diff --git a/index.html b/index.html index 533017b..7296f41 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,83 @@ - - - - - Fws Web - - - -
-
+ + + + + + Fws Web + + + + +
+
+
- F + Logo Fws Linux - Fws - Site statique + Fws Linux -
+
+
-
- -
+
+ +
- -
+ + + + + - - \ No newline at end of file diff --git a/p/assets/img/logo.png b/p/assets/img/logo.png new file mode 100644 index 0000000..dda0772 Binary files /dev/null and b/p/assets/img/logo.png differ diff --git a/p/assets/main-nav/app.js b/p/assets/main-nav/app.js index 4ed7a06..3173bb4 100644 --- a/p/assets/main-nav/app.js +++ b/p/assets/main-nav/app.js @@ -1,9 +1,14 @@ (() => { const main = document.getElementById("app-main"); + const footerYear = document.getElementById("footer-year"); const pageStyleSelectors = "[data-page-style='true']"; const links = Array.from(document.querySelectorAll("[data-route]")); + if (footerYear) { + footerYear.textContent = new Date().getFullYear().toString(); + } + function clearInjectedPageStyles() { document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove()); } @@ -59,6 +64,10 @@ const path = window.location.pathname.replace(/^\/+|\/+$/g, ""); if (path) { + if (path.endsWith(".html")) { + return "index"; + } + const parts = path.split("/"); if (parts[0] === "p" && parts[1]) { return normalizeRoute(parts.slice(1).join("/")); diff --git a/p/assets/main-styles/main.css b/p/assets/main-styles/main.css new file mode 100644 index 0000000..7904585 --- /dev/null +++ b/p/assets/main-styles/main.css @@ -0,0 +1,129 @@ +@import "./var.css"; + +.hero, +.card { + backdrop-filter: blur(18px); + background: var(--bg-soft); + box-shadow: var(--shadow); +} + +.hero { + padding: clamp(1.5rem, 3vw, 2.75rem); +} + +.eyebrow { + margin: 0 0 0.75rem; + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.22em; + font-size: 0.78rem; + font-weight: 700; +} + +.hero h1, +.card h2 { + font-family: "Georgia", "Palatino Linotype", serif; +} + +.hero h1 { + margin: 0; + font-size: clamp(2.2rem, 5vw, 4.5rem); + line-height: 0.98; + max-width: 12ch; +} + +.lead { + max-width: 62ch; + color: var(--muted); + font-size: 1.08rem; + line-height: 1.7; + margin: 1rem 0 0; +} + +.lead span, +.card span { + color: var(--text); +} + +.release-badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; + margin: 1.35rem 0 0; + padding: 0.7rem 1rem; + border: 1px solid rgba(148, 163, 184, 0.22); + border-radius: 999px; + background: rgba(255, 255, 255, 0.04); + color: var(--muted); + font-size: 0.95rem; + font-weight: 700; +} + +.release-badge span { + color: var(--text); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.5rem; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.85rem 1.2rem; + text-decoration: none; + border: 1px solid rgba(148, 163, 184, 0.22); + border-radius: 999px; + font-weight: 700; + transition: + transform 160ms ease, + background 160ms ease, + color 160ms ease, + border-color 160ms ease; +} + +.button:hover { + transform: translateY(-1px); +} + +.button-primary { + color: #08101d; + background: linear-gradient(145deg, var(--accent), var(--accent-strong)); +} + +.button-secondary { + color: var(--text); + background: rgba(255, 255, 255, 0.04); +} + +.grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.card { + padding: 1.25rem; +} + +.card h2 { + margin-top: 0; + margin-bottom: 0.75rem; + font-size: 1.45rem; +} + +.card p { + margin: 0; + color: var(--muted); + line-height: 1.65; +} + +@media (max-width: 900px) { + .grid { + grid-template-columns: 1fr; + } +} diff --git a/p/assets/main-styles/styles.css b/p/assets/main-styles/styles.css index 3908f9c..8f9e7ae 100644 --- a/p/assets/main-styles/styles.css +++ b/p/assets/main-styles/styles.css @@ -1,13 +1,15 @@ +@import "./var.css"; + :root { color-scheme: dark; - --bg: #0b1020; - --bg-soft: rgba(11, 16, 32, 0.72); + --bg: var(--background-color); + --bg-soft: rgba(15, 52, 96, 0.72); --panel: rgba(17, 25, 49, 0.82); - --panel-border: rgba(148, 163, 184, 0.18); - --text: #e5eefc; - --muted: #9fb0cc; - --accent: #7dd3fc; - --accent-strong: #38bdf8; + --panel-border: rgba(22, 33, 62, 0.18); + --text: var(--generic-text-color); + --muted: var(--sidebar-text); + --accent: var(--sidebar-text-highlight); + --accent-strong: var(--sidebar-select); --shadow: 0 24px 70px rgba(0, 0, 0, 0.35); } @@ -35,7 +37,6 @@ body::after { content: ""; position: fixed; inset: auto; - border-radius: 999px; pointer-events: none; filter: blur(18px); opacity: 0.6; @@ -60,32 +61,34 @@ body::after { .page-shell { position: relative; z-index: 1; - width: min(1120px, calc(100% - 2rem)); + width: 100%; margin: 0 auto; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; - padding: 1rem 0 1.25rem; -} - -.site-header, -.site-footer, -.hero, -.card { - backdrop-filter: blur(18px); - background: var(--bg-soft); - border: 1px solid var(--panel-border); - box-shadow: var(--shadow); } .site-header, .site-footer { - border-radius: 1.5rem; + backdrop-filter: blur(18px); + background: var(--bg-soft); + box-shadow: var(--shadow); +} + +.header-brand-block{ + width: 100%; + margin: 0 auto; + max-width: 1200px; + display: flex; + /* align-items: center; */ + gap: 0.85rem; + justify-content: space-between; } .site-header { display: flex; + width: 100%; align-items: center; justify-content: space-between; gap: 1rem; @@ -101,14 +104,10 @@ body::after { } .brand-mark { - display: grid; - place-items: center; width: 2.75rem; height: 2.75rem; - border-radius: 0.95rem; - background: linear-gradient(145deg, rgba(125, 211, 252, 0.95), rgba(56, 189, 248, 0.45)); - color: #08101d; - font-weight: 800; + object-fit: cover; + display: block; } .brand-text { @@ -116,9 +115,7 @@ body::after { line-height: 1.05; } -.brand-text strong, -.hero h1, -.card h2 { +.brand-text strong { font-family: "Georgia", "Palatino Linotype", serif; } @@ -132,8 +129,7 @@ body::after { gap: 0.6rem; } -.site-nav a, -.button { +.site-nav a { border-radius: 999px; transition: transform 160ms ease, @@ -157,113 +153,133 @@ body::after { } .site-main { + margin: 0 auto; + max-width: 1200px; display: grid; gap: 1.25rem; align-content: start; } -.hero { - border-radius: 2rem; - padding: clamp(1.5rem, 3vw, 2.75rem); -} - -.eyebrow { - margin: 0 0 0.75rem; - color: var(--accent); - text-transform: uppercase; - letter-spacing: 0.22em; - font-size: 0.78rem; - font-weight: 700; -} - -.hero h1 { - margin: 0; - font-size: clamp(2.2rem, 5vw, 4.5rem); - line-height: 0.98; - max-width: 12ch; -} - -.lead { - max-width: 62ch; - color: var(--muted); - font-size: 1.08rem; - line-height: 1.7; - margin: 1rem 0 0; -} - -.lead span, -.card span { - color: var(--text); -} - -.hero-actions { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.5rem; -} - -.button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.85rem 1.2rem; - text-decoration: none; - border: 1px solid rgba(148, 163, 184, 0.22); - font-weight: 700; -} - -.button:hover, .site-nav a:hover { transform: translateY(-1px); } -.button-primary { - color: #08101d; - background: linear-gradient(145deg, var(--accent), var(--accent-strong)); -} - -.button-secondary { - color: var(--text); - background: rgba(255, 255, 255, 0.04); -} - -.grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 1rem; -} - -.card { - border-radius: 1.4rem; - padding: 1.25rem; -} - -.card h2 { - margin-top: 0; - margin-bottom: 0.75rem; - font-size: 1.45rem; -} - -.card p { - margin: 0; - color: var(--muted); - line-height: 1.65; -} - .site-footer { - padding: 1rem 1.25rem; - color: var(--muted); + padding: 1.5rem 1.25rem; + background: rgb(50, 54, 66); } .site-footer p { margin: 0; } +.footer-brand-row { + display: flex; + align-items: start; + justify-content: space-between; + gap: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(148, 163, 184, 0.16); +} +.footer-content { + margin: 0 auto; + max-width: 1200px; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.footer-brand-block { + display: flex; + align-items: center; + gap: 0.85rem; + max-width: 42rem; +} + +.footer-brand-mark { + width: 3rem; + height: 3rem; + border-radius: 0.95rem; + object-fit: cover; + display: block; + flex: none; +} + +.footer-brand-block strong { + display: block; + color: var(--text); + font-family: "Georgia", "Palatino Linotype", serif; + font-size: 1.05rem; +} + +.footer-brand-block p, +.footer-note, +.footer-bottom p { + color: var(--muted); + line-height: 1.6; +} + +.footer-note { + max-width: 20rem; +} + +.footer-links-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + padding: 1.25rem 0; +} + +.footer-links-grid section { + display: grid; + gap: 0.6rem; + align-content: start; +} + +.footer-links-grid h2 { + margin: 0 0 0.15rem; + color: var(--text); + font-size: 0.98rem; +} + +.footer-links-grid a { + color: var(--muted); + text-decoration: none; + width: fit-content; + transition: color 160ms ease, transform 160ms ease; +} + +.footer-links-grid a:hover { + color: var(--text); + transform: translateX(2px); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + gap: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(148, 163, 184, 0.16); + font-size: 0.95rem; +} + +.footer-release, +.footer-commit { + text-align: right; +} + +.footer-release span, +.footer-commit span { + color: var(--text); +} + @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } + + .footer-links-grid { + grid-template-columns: 1fr; + } } @media (max-width: 700px) { @@ -286,4 +302,13 @@ body::after { .button { width: 100%; } + + .footer-brand-row, + .footer-bottom { + flex-direction: column; + } + + .footer-brand-block { + align-items: flex-start; + } } \ No newline at end of file diff --git a/p/assets/main-styles/var.css b/p/assets/main-styles/var.css new file mode 100644 index 0000000..42d7428 --- /dev/null +++ b/p/assets/main-styles/var.css @@ -0,0 +1,14 @@ +:root { + /* Couleurs de la sidebar */ + --sidebar-background: #1a1a2e; + --sidebar-text: #e0e0e0; + --sidebar-text-highlight: #00d4ff; + --sidebar-select: #16213e; + + /* Couleurs générales */ + --background-color: #0f3460; + --highlighted-text-color: #ffffff; + --generic-text-color: #e0e0e0; + --error-text-color: #ff6b6b; + --warning-text-color: #ffa500; +} diff --git a/p/contact/index.html b/p/contact/index.html new file mode 100644 index 0000000..bf5ce52 --- /dev/null +++ b/p/contact/index.html @@ -0,0 +1,39 @@ + + + + + + Contact + + + +
+
+

Contact

+

Tu veux nous joindre ?

+

+ Cette page centralise les moyens de contact et les liens utiles pour écrire, appeler, ou retrouver le projet ailleurs. +

+
+ Envoyer un mail + Retour à l'accueil +
+
+ +
+
+

Email

+

contact@fwslinux.fr pour les demandes générales et les retours rapides.

+
+
+

Téléphone

+

+33 0 00 00 00 00 pour les appels ou le support direct.

+
+
+

Réseaux

+

Le footer te donne aussi les liens vers GitHub, Instagram et LinkedIn.

+
+
+
+ + diff --git a/p/dl/index.html b/p/dl/index.html index 3417dca..48a4643 100644 --- a/p/dl/index.html +++ b/p/dl/index.html @@ -4,6 +4,7 @@ DL +
diff --git a/p/index/index.html b/p/index/index.html index 0fe4b72..14e6468 100644 --- a/p/index/index.html +++ b/p/index/index.html @@ -4,6 +4,7 @@ Accueil +
@@ -14,6 +15,7 @@ La page principale vit dans p/index/index.html et le script l'injecte dans le main quand l'URL pointe vers /?p/index/.

+

Download FWS

Aller vers DL Rester sur l'accueil