Main #2

Merged
BlackAngelTV merged 3 commits from main into main 2026-05-27 19:22:00 +00:00
6 changed files with 375 additions and 136 deletions
Showing only changes of commit ca4f849dda - Show all commits
+55 -10
View File
@@ -1,27 +1,31 @@
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="fr">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Site statique one-page avec navigation par URL et chargement dynamique du contenu." /> <meta name="description"
content="Site statique one-page avec navigation par URL et chargement dynamique du contenu." />
<title>Fws Web</title> <title>Fws Web</title>
<link rel="stylesheet" href="p/assets/main-styles/styles.css" /> <link rel="stylesheet" href="p/assets/main-styles/styles.css" />
</head> </head>
<body>
<body>
<div class="page-shell"> <div class="page-shell">
<header class="site-header"> <header class="site-header">
<div class="header-brand-block">
<a class="brand" href="/?p/index/" data-route="index" aria-label="Retour à l'accueil"> <a class="brand" href="/?p/index/" data-route="index" aria-label="Retour à l'accueil">
<span class="brand-mark">F</span> <img class="brand-mark" src="p/assets/img/logo.png" alt="Logo Fws Linux" />
<span class="brand-text"> <span class="brand-text">
<strong>Fws</strong> <strong>Fws Linux</strong>
<small>Site statique</small>
</span> </span>
</a> </a>
<nav class="site-nav" aria-label="Navigation principale"> <nav class="site-nav" aria-label="Navigation principale">
<a href="/?p/index/" data-route="index">Accueil</a> <a href="/?p/index/" data-route="index">Accueil</a>
<a href="/?p/dl/" data-route="dl">DL</a> <a href="/?p/dl/" data-route="dl">Downloads</a>
</nav> </nav>
</div>
</header> </header>
<main id="app-main" class="site-main" aria-live="polite"> <main id="app-main" class="site-main" aria-live="polite">
@@ -29,10 +33,51 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<p>Un seul index, un header, un footer, et du contenu injecté dans le main selon l'URL.</p> <div class="footer-content">
<div class="footer-brand-row">
<div class="footer-brand-block">
<img class="footer-brand-mark" src="p/assets/img/logo.png" alt="Logo Fws Linux" />
<div>
<strong>Fws Linux</strong>
<p>Un site simple, rapide, et pensé pour naviguer entre plusieurs pages sans quitter l'accueil.</p>
</div>
</div>
<p class="footer-note">Contact, aide, et liens utiles au même endroit.</p>
</div>
<div class="footer-links-grid">
<section>
<h2>Navigation</h2>
<a href="/?p/index/" data-route="index">Accueil</a>
<a href="/?p/dl/" data-route="dl">Downloads</a>
</section>
<section>
<h2>Contact</h2>
<a href="mailto:contact@fwslinux.fr">Envoyer un mail</a>
<a href="tel:+33000000000">Téléphone</a>
<a href="/?p/contact/" data-route="contact">Page de contact</a>
</section>
<section>
<h2>Réseaux</h2>
<a href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
<a href="https://www.instagram.com/" target="_blank" rel="noreferrer">Instagram</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noreferrer">LinkedIn</a>
</section>
</div>
<div class="footer-bottom">
<p>© <span id="footer-year">2026</span> Fws Linux</p>
<p class="footer-release">Dernière release : non affichée</p>
<p class="footer-commit">Dernier commit : non affiché</p>
</div>
</div>
</footer> </footer>
</div> </div>
<script src="p/assets/main-nav/app.js"></script> <script src="p/assets/main-nav/app.js"></script>
</body> </body>
</html> </html>
+129
View File
@@ -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;
}
}
+135 -112
View File
@@ -37,7 +37,6 @@ body::after {
content: ""; content: "";
position: fixed; position: fixed;
inset: auto; inset: auto;
border-radius: 999px;
pointer-events: none; pointer-events: none;
filter: blur(18px); filter: blur(18px);
opacity: 0.6; opacity: 0.6;
@@ -62,32 +61,34 @@ body::after {
.page-shell { .page-shell {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: min(1120px, calc(100% - 2rem)); width: 100%;
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
gap: 1.25rem; 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-header,
.site-footer { .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 { .site-header {
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
@@ -103,14 +104,10 @@ body::after {
} }
.brand-mark { .brand-mark {
display: grid;
place-items: center;
width: 2.75rem; width: 2.75rem;
height: 2.75rem; height: 2.75rem;
border-radius: 0.95rem; object-fit: cover;
background: linear-gradient(145deg, rgba(125, 211, 252, 0.95), rgba(56, 189, 248, 0.45)); display: block;
color: #08101d;
font-weight: 800;
} }
.brand-text { .brand-text {
@@ -118,9 +115,7 @@ body::after {
line-height: 1.05; line-height: 1.05;
} }
.brand-text strong, .brand-text strong {
.hero h1,
.card h2 {
font-family: "Georgia", "Palatino Linotype", serif; font-family: "Georgia", "Palatino Linotype", serif;
} }
@@ -134,8 +129,7 @@ body::after {
gap: 0.6rem; gap: 0.6rem;
} }
.site-nav a, .site-nav a {
.button {
border-radius: 999px; border-radius: 999px;
transition: transition:
transform 160ms ease, transform 160ms ease,
@@ -159,113 +153,133 @@ body::after {
} }
.site-main { .site-main {
margin: 0 auto;
max-width: 1200px;
display: grid; display: grid;
gap: 1.25rem; gap: 1.25rem;
align-content: start; 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 { .site-nav a:hover {
transform: translateY(-1px); 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 { .site-footer {
padding: 1rem 1.25rem; padding: 1.5rem 1.25rem;
color: var(--muted); background: rgb(50, 54, 66);
} }
.site-footer p { .site-footer p {
margin: 0; 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) { @media (max-width: 900px) {
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.footer-links-grid {
grid-template-columns: 1fr;
}
} }
@media (max-width: 700px) { @media (max-width: 700px) {
@@ -288,4 +302,13 @@ body::after {
.button { .button {
width: 100%; width: 100%;
} }
.footer-brand-row,
.footer-bottom {
flex-direction: column;
}
.footer-brand-block {
align-items: flex-start;
}
} }
+39
View File
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" />
</head>
<body>
<main data-page-content>
<section class="hero">
<p class="eyebrow">Contact</p>
<h1>Tu veux nous joindre ?</h1>
<p class="lead">
Cette page centralise les moyens de contact et les liens utiles pour écrire, appeler, ou retrouver le projet ailleurs.
</p>
<div class="hero-actions">
<a class="button button-primary" href="mailto:contact@fwslinux.fr">Envoyer un mail</a>
<a class="button button-secondary" href="/?p/index/" data-route="index">Retour à l'accueil</a>
</div>
</section>
<section class="grid">
<article class="card">
<h2>Email</h2>
<p>contact@fwslinux.fr pour les demandes générales et les retours rapides.</p>
</article>
<article class="card">
<h2>Téléphone</h2>
<p>+33 0 00 00 00 00 pour les appels ou le support direct.</p>
</article>
<article class="card">
<h2>Réseaux</h2>
<p>Le footer te donne aussi les liens vers GitHub, Instagram et LinkedIn.</p>
</article>
</section>
</main>
</body>
</html>
+1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DL</title> <title>DL</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" />
</head> </head>
<body> <body>
<main data-page-content> <main data-page-content>
+2
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Accueil</title> <title>Accueil</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" />
</head> </head>
<body> <body>
<main data-page-content> <main data-page-content>
@@ -14,6 +15,7 @@
La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le
<span>main</span> quand l'URL pointe vers <span>/?p/index/</span>. <span>main</span> quand l'URL pointe vers <span>/?p/index/</span>.
</p> </p>
<p class="release-badge">Download FWS</p>
<div class="hero-actions"> <div class="hero-actions">
<a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a> <a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a>
<a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a> <a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a>