Compare commits
8 Commits
main
..
e315b511ee
| Author | SHA1 | Date | |
|---|---|---|---|
 BlackAngelTV
|
e315b511ee
|
||
|
BlackAngelTV
|
ba31d6447a
|
||
|
BlackAngelTV
|
4c958b448a | ||
|
BlackAngelTV
|
71a5673572 | ||
|
BlackAngelTV
|
1303f0fbd5 | ||
|
BlackAngelTV
|
d7e769abfd
|
||
|
BlackAngelTV
|
3c57353e25
|
||
|
BlackAngelTV
|
1b6a961e09
|
+3
-3
@@ -7,7 +7,7 @@
|
|||||||
<meta name="description"
|
<meta name="description"
|
||||||
content="Site statique one-page avec navigation par URL et chargement dynamique du contenu." />
|
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/styles/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -70,14 +70,14 @@
|
|||||||
|
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<p>© <span id="footer-year">2026</span> Fws Linux</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="p/assets/main-nav/app.js"></script>
|
<script src="p/assets/main-nav/app.js"></script>
|
||||||
|
<script src="p/assets/main-nav/feature-cards.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
@@ -0,0 +1,155 @@
|
|||||||
|
(() => {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const existingCleanup = window.__heroCarouselCleanup;
|
||||||
|
if (typeof existingCleanup === "function") {
|
||||||
|
existingCleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
const hero = document.querySelector(".hero-carousel");
|
||||||
|
if (!hero) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const slides = Array.from(hero.querySelectorAll("[data-hero-slide]"));
|
||||||
|
const prevButton = hero.querySelector("[data-hero-prev]");
|
||||||
|
const nextButton = hero.querySelector("[data-hero-next]");
|
||||||
|
const dotsContainer = hero.querySelector("[data-hero-dots]");
|
||||||
|
|
||||||
|
if (!slides.length || !prevButton || !nextButton || !dotsContainer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentIndex = Math.max(
|
||||||
|
0,
|
||||||
|
slides.findIndex((slide) => slide.classList.contains("is-active"))
|
||||||
|
);
|
||||||
|
let autoRotateTimer = null;
|
||||||
|
const rotateDelay = 5500;
|
||||||
|
const abortController = new AbortController();
|
||||||
|
const { signal } = abortController;
|
||||||
|
|
||||||
|
const dots = slides.map((_, index) => {
|
||||||
|
const dot = document.createElement("button");
|
||||||
|
dot.type = "button";
|
||||||
|
dot.className = "hero-dot";
|
||||||
|
dot.setAttribute("role", "tab");
|
||||||
|
dot.setAttribute("aria-label", `Aller a l'image ${index + 1}`);
|
||||||
|
dot.dataset.index = index.toString();
|
||||||
|
dotsContainer.appendChild(dot);
|
||||||
|
return dot;
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateUI() {
|
||||||
|
slides.forEach((slide, index) => {
|
||||||
|
const isActive = index === currentIndex;
|
||||||
|
slide.classList.toggle("is-active", isActive);
|
||||||
|
slide.setAttribute("aria-hidden", String(!isActive));
|
||||||
|
});
|
||||||
|
|
||||||
|
dots.forEach((dot, index) => {
|
||||||
|
const isActive = index === currentIndex;
|
||||||
|
dot.classList.toggle("is-active", isActive);
|
||||||
|
dot.setAttribute("aria-selected", String(isActive));
|
||||||
|
dot.tabIndex = isActive ? 0 : -1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function goTo(index) {
|
||||||
|
if (index < 0) {
|
||||||
|
currentIndex = slides.length - 1;
|
||||||
|
} else if (index >= slides.length) {
|
||||||
|
currentIndex = 0;
|
||||||
|
} else {
|
||||||
|
currentIndex = index;
|
||||||
|
}
|
||||||
|
updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAutoRotate() {
|
||||||
|
if (autoRotateTimer !== null) {
|
||||||
|
window.clearInterval(autoRotateTimer);
|
||||||
|
autoRotateTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startAutoRotate() {
|
||||||
|
stopAutoRotate();
|
||||||
|
autoRotateTimer = window.setInterval(() => {
|
||||||
|
goTo(currentIndex + 1);
|
||||||
|
}, rotateDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
prevButton.addEventListener(
|
||||||
|
"click",
|
||||||
|
() => {
|
||||||
|
goTo(currentIndex - 1);
|
||||||
|
startAutoRotate();
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
nextButton.addEventListener(
|
||||||
|
"click",
|
||||||
|
() => {
|
||||||
|
goTo(currentIndex + 1);
|
||||||
|
startAutoRotate();
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
dotsContainer.addEventListener(
|
||||||
|
"click",
|
||||||
|
(event) => {
|
||||||
|
const button = event.target.closest(".hero-dot");
|
||||||
|
if (!button) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetIndex = Number.parseInt(button.dataset.index || "0", 10);
|
||||||
|
goTo(targetIndex);
|
||||||
|
startAutoRotate();
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
hero.addEventListener(
|
||||||
|
"mouseenter",
|
||||||
|
() => {
|
||||||
|
stopAutoRotate();
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
hero.addEventListener(
|
||||||
|
"mouseleave",
|
||||||
|
() => {
|
||||||
|
startAutoRotate();
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"visibilitychange",
|
||||||
|
() => {
|
||||||
|
if (document.hidden) {
|
||||||
|
stopAutoRotate();
|
||||||
|
} else {
|
||||||
|
startAutoRotate();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
updateUI();
|
||||||
|
startAutoRotate();
|
||||||
|
|
||||||
|
window.__heroCarouselCleanup = () => {
|
||||||
|
stopAutoRotate();
|
||||||
|
abortController.abort();
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("page:before-route-change", window.__heroCarouselCleanup, {
|
||||||
|
once: true,
|
||||||
|
});
|
||||||
|
})();
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
const main = document.getElementById("app-main");
|
const main = document.getElementById("app-main");
|
||||||
const footerYear = document.getElementById("footer-year");
|
const footerYear = document.getElementById("footer-year");
|
||||||
const pageStyleSelectors = "[data-page-style='true']";
|
const pageStyleSelectors = "[data-page-style='true']";
|
||||||
|
const pageScriptSelectors = "script[data-page-script='true']";
|
||||||
|
|
||||||
const links = Array.from(document.querySelectorAll("[data-route]"));
|
const links = Array.from(document.querySelectorAll("[data-route]"));
|
||||||
|
|
||||||
@@ -13,6 +14,11 @@
|
|||||||
document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove());
|
document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clearInjectedPageScripts() {
|
||||||
|
document.dispatchEvent(new CustomEvent("page:before-route-change"));
|
||||||
|
document.querySelectorAll(pageScriptSelectors).forEach((node) => node.remove());
|
||||||
|
}
|
||||||
|
|
||||||
function injectPageStyles(parsedDocument, sourceUrl) {
|
function injectPageStyles(parsedDocument, sourceUrl) {
|
||||||
clearInjectedPageStyles();
|
clearInjectedPageStyles();
|
||||||
|
|
||||||
@@ -38,6 +44,37 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function injectPageScripts(parsedDocument, sourceUrl) {
|
||||||
|
clearInjectedPageScripts();
|
||||||
|
|
||||||
|
const scriptNodes = Array.from(parsedDocument.querySelectorAll("script"));
|
||||||
|
|
||||||
|
for (const node of scriptNodes) {
|
||||||
|
const scriptElement = document.createElement("script");
|
||||||
|
scriptElement.setAttribute("data-page-script", "true");
|
||||||
|
|
||||||
|
const src = node.getAttribute("src");
|
||||||
|
if (src) {
|
||||||
|
scriptElement.src = new URL(src, sourceUrl).toString();
|
||||||
|
scriptElement.async = false;
|
||||||
|
if (node.defer) {
|
||||||
|
scriptElement.defer = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
scriptElement.onload = () => resolve();
|
||||||
|
scriptElement.onerror = () => reject(new Error(`Impossible de charger le script: ${src}`));
|
||||||
|
document.body.appendChild(scriptElement);
|
||||||
|
});
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
scriptElement.textContent = node.textContent;
|
||||||
|
document.body.appendChild(scriptElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function normalizeRoute(value) {
|
function normalizeRoute(value) {
|
||||||
const raw = (value ?? "").toString().trim().toLowerCase();
|
const raw = (value ?? "").toString().trim().toLowerCase();
|
||||||
if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
|
if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
|
||||||
@@ -117,6 +154,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function loadRoute(route) {
|
async function loadRoute(route) {
|
||||||
|
clearInjectedPageScripts();
|
||||||
|
|
||||||
const source = routeToSource(route);
|
const source = routeToSource(route);
|
||||||
const response = await fetch(source, { cache: "no-store" });
|
const response = await fetch(source, { cache: "no-store" });
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -128,6 +167,7 @@
|
|||||||
injectPageStyles(parsed, response.url);
|
injectPageStyles(parsed, response.url);
|
||||||
const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
|
const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
|
||||||
main.innerHTML = injected.innerHTML.trim();
|
main.innerHTML = injected.innerHTML.trim();
|
||||||
|
await injectPageScripts(parsed, response.url);
|
||||||
}
|
}
|
||||||
|
|
||||||
function render(route, { replaceHistory = false } = {}) {
|
function render(route, { replaceHistory = false } = {}) {
|
||||||
|
|||||||
@@ -1,129 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,409 @@
|
|||||||
|
@import "./var.css";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--main-max: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
main[data-page-content] {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: var(--main-max);
|
||||||
|
padding: 2rem 1.25rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid { display: block; }
|
||||||
|
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0b1324;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: clamp(2rem, 4.5vw, 3.5rem);
|
||||||
|
color: var(--text);
|
||||||
|
min-height: clamp(24rem, 56vw, 34rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-carousel-track {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.02);
|
||||||
|
transition: opacity 700ms ease, transform 1000ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(110deg, rgba(2, 6, 23, 0.78) 18%, rgba(2, 6, 23, 0.28) 58%, rgba(2, 6, 23, 0.66) 100%),
|
||||||
|
radial-gradient(circle at 72% 20%, rgba(56, 189, 248, 0.2), transparent 48%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide.is-active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 52rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0 0 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-family: "Georgia", "Palatino Linotype", serif;
|
||||||
|
font-size: clamp(3rem, 8vw, 5rem);
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
color: #f8fbff;
|
||||||
|
text-shadow: 0 10px 28px rgba(2, 6, 23, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1rem, 2.2vw, 1.3rem);
|
||||||
|
color: #e7edf9;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 4px 18px rgba(2, 6, 23, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
color: #d8e1f3;
|
||||||
|
max-width: 68ch;
|
||||||
|
margin: 0 0 1.25rem;
|
||||||
|
text-wrap: pretty;
|
||||||
|
text-shadow: 0 2px 14px rgba(2, 6, 23, 0.34);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-controls {
|
||||||
|
position: absolute;
|
||||||
|
right: clamp(1rem, 2.5vw, 2rem);
|
||||||
|
bottom: clamp(1rem, 2.8vw, 1.75rem);
|
||||||
|
z-index: 3;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
padding: 0.4rem 0.55rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(2, 6, 23, 0.46);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-control {
|
||||||
|
width: 2.2rem;
|
||||||
|
height: 2.2rem;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 1.32rem;
|
||||||
|
color: #e2e8f0;
|
||||||
|
background: rgba(148, 163, 184, 0.22);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-control:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
background: rgba(125, 211, 252, 0.36);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-dots {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin: 0 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-dot {
|
||||||
|
width: 0.6rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(226, 232, 240, 0.55);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-dot.is-active {
|
||||||
|
background: #7dd3fc;
|
||||||
|
transform: scale(1.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.8rem 1.2rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 700;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary {
|
||||||
|
background: linear-gradient(145deg, var(--accent), var(--accent-strong));
|
||||||
|
color: #08101d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.features {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-choices {
|
||||||
|
margin-top: 1.8rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: clamp(1rem, 2.4vw, 1.5rem);
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
box-shadow: 0 8px 22px rgba(2, 6, 23, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-choices-header h2 {
|
||||||
|
margin: 0 0 0.45rem;
|
||||||
|
font-family: "Georgia", "Palatino Linotype", serif;
|
||||||
|
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-choices-header p {
|
||||||
|
margin: 2rem 0 1rem;
|
||||||
|
color: var(--muted);
|
||||||
|
max-width: 78ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(170px, 0.9fr) minmax(0, 2.1fr);
|
||||||
|
gap: clamp(0.85rem, 2vw, 1.35rem);
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-row.is-reverse {
|
||||||
|
grid-template-columns: minmax(0, 2.1fr) minmax(170px, 0.9fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-media,
|
||||||
|
.env-text {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(2, 6, 23, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-media {
|
||||||
|
min-height: clamp(140px, 20vw, 190px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-media img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-text {
|
||||||
|
padding: clamp(1rem, 2.4vw, 1.4rem);
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-text h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", "Palatino Linotype", serif;
|
||||||
|
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-text p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 11rem;
|
||||||
|
background: rgba(255,255,255,0.02);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
box-shadow: 0 8px 22px rgba(2,6,23,0.45);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", serif;
|
||||||
|
font-size: clamp(1.25rem, 1.6vw, 1.6rem);
|
||||||
|
line-height: 1.1;
|
||||||
|
transition: transform 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(0.95rem, 1.05vw, 1.08rem);
|
||||||
|
line-height: 1.6;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
bottom: 1.35rem;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0.5rem);
|
||||||
|
transition: opacity 180ms ease, transform 220ms ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features:not(:hover) .card:first-child,
|
||||||
|
.features .card:first-child:hover,
|
||||||
|
.features .card:first-child:focus {
|
||||||
|
flex-grow: 2.6;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features:not(:hover) .card:first-child p,
|
||||||
|
.features .card:first-child:hover p,
|
||||||
|
.features .card:first-child:focus p {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features:hover .card:first-child:not(:hover):not(:focus) {
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features:hover .card:first-child:not(:hover):not(:focus) p {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card:hover,
|
||||||
|
.features .card:focus {
|
||||||
|
flex-grow: 2.6;
|
||||||
|
justify-content: flex-start;
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 22px 60px rgba(2,6,23,0.55);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card:hover p,
|
||||||
|
.features .card:focus p {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card:focus {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 27rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-controls {
|
||||||
|
left: 1rem;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-row,
|
||||||
|
.env-row.is-reverse {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-media {
|
||||||
|
min-height: 185px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card:hover,
|
||||||
|
.features .card:focus {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features .card p {
|
||||||
|
position: static;
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero {
|
||||||
|
min-height: 29rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-inner {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-controls {
|
||||||
|
left: 0.8rem;
|
||||||
|
right: 0.8rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -104,15 +104,16 @@ body::after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.brand-mark {
|
||||||
width: 2.75rem;
|
width: 3.75rem;
|
||||||
height: 2.75rem;
|
height: 3.75rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-text {
|
.brand-text {
|
||||||
display: grid;
|
display: grid;
|
||||||
line-height: 1.05;
|
/* line-height: 3.05; */
|
||||||
|
font-size: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-text strong {
|
.brand-text strong {
|
||||||
@@ -131,6 +132,7 @@ body::after {
|
|||||||
|
|
||||||
.site-nav a {
|
.site-nav a {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
|
margin: auto;
|
||||||
transition:
|
transition:
|
||||||
transform 160ms ease,
|
transform 160ms ease,
|
||||||
background 160ms ease,
|
background 160ms ease,
|
||||||
+1
-15
@@ -4,7 +4,6 @@
|
|||||||
<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>
|
||||||
@@ -21,20 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="grid">
|
|
||||||
<article class="card">
|
|
||||||
<h2>Vrai fichier</h2>
|
|
||||||
<p>Le HTML est bien stocké dans le dossier <span>p/</span>, pas dans le fichier principal.</p>
|
|
||||||
</article>
|
|
||||||
<article class="card">
|
|
||||||
<h2>Injection</h2>
|
|
||||||
<p>Le script lit ce fichier puis injecte uniquement le bloc portant <span>data-page-content</span>.</p>
|
|
||||||
</article>
|
|
||||||
<article class="card">
|
|
||||||
<h2>Extensible</h2>
|
|
||||||
<p>Tu peux créer d'autres dossiers comme <span>p/contact/</span> ou <span>p/about/</span>.</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+99
-22
@@ -4,38 +4,115 @@
|
|||||||
<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" />
|
<link rel="stylesheet" href="../assets/styles/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main data-page-content>
|
<main data-page-content>
|
||||||
<section class="hero">
|
<section class="hero hero-carousel" aria-label="Présentation FWS Linux">
|
||||||
<p class="eyebrow">Navigation one-page</p>
|
<div class="hero-carousel-track" data-hero-track>
|
||||||
<h1>Le site change de contenu sans changer de page.</h1>
|
<article class="hero-slide is-active" data-hero-slide style="background-image: url('/p/assets/img/hero/xfce.png');" aria-hidden="false"></article>
|
||||||
<p class="lead">
|
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/install.png');" aria-hidden="true"></article>
|
||||||
La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le
|
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/gnome.png');" aria-hidden="true"></article>
|
||||||
<span>main</span> quand l'URL pointe vers <span>/?p/index/</span>.
|
</div>
|
||||||
</p>
|
|
||||||
<p class="release-badge">Download FWS</p>
|
<div class="hero-inner">
|
||||||
|
<h1 class="hero-title">FWS Linux</h1>
|
||||||
|
<h2 class="hero-subtitle">Un systeme leger, libre et compatible</h2>
|
||||||
|
<p class="lead">Open-source base sur Arch Linux, FWS facilite la transition depuis Windows sans vous deposseder de vos donnees. Installation simplifiee, interface epuree, et compatibilite avec vos applications Windows grace a Wine et Winboat.</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">Telecharger</a>
|
||||||
<a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a>
|
<a class="button button-secondary" href="/?p/contact/" data-route="contact">En savoir plus</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-controls" aria-label="Controles du carousel">
|
||||||
|
<button class="hero-control" type="button" data-hero-prev aria-label="Image precedente">‹</button>
|
||||||
|
<div class="hero-dots" data-hero-dots role="tablist" aria-label="Selectionner une image"></div>
|
||||||
|
<button class="hero-control" type="button" data-hero-next aria-label="Image suivante">›</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="features">
|
||||||
|
<article class="card" tabindex="0">
|
||||||
|
<h2>Installation simplifiée</h2>
|
||||||
|
<p>Installateur graphique pour une configuration facile et rapide.</p>
|
||||||
|
</article>
|
||||||
|
<article class="card" tabindex="0">
|
||||||
|
<h2>Léger et rapide</h2>
|
||||||
|
<p>Conçu pour être peu gourmand en ressources : idéal pour redonner vie à d'anciens PC.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
<section class="grid">
|
<article class="card" tabindex="0">
|
||||||
<article class="card">
|
<h2>Respect de la vie privée</h2>
|
||||||
<h2>Header commun</h2>
|
<p>Pas de télémétrie intrusive ni de collecte de données : vous gardez le contrôle.</p>
|
||||||
<p>Le bandeau du haut reste identique sur chaque vue.</p>
|
|
||||||
</article>
|
</article>
|
||||||
<article class="card">
|
|
||||||
<h2>Footer commun</h2>
|
<article class="card" tabindex="0">
|
||||||
<p>Le pied de page reste fixe, quelle que soit la section chargée.</p>
|
<h2>Compatibilité Windows</h2>
|
||||||
|
<p>Exécutez vos logiciels Windows avec Wine et Winboat sans devoir rester sous Windows.</p>
|
||||||
</article>
|
</article>
|
||||||
<article class="card">
|
|
||||||
<h2>Injection réelle</h2>
|
</section>
|
||||||
<p>Chaque route peut venir d'un vrai fichier <span>index.html</span> dans <span>p/</span>.</p>
|
|
||||||
|
<section class="env-choices" aria-labelledby="env-choices-title">
|
||||||
|
<header class="env-choices-header">
|
||||||
|
<h2 id="env-choices-title">Choisissez votre environnement a l'installation</h2>
|
||||||
|
<p>FWS Linux vous laisse choisir l'interface qui correspond a votre usage. Vous pouvez demarrer en CLI minimale ou installer un bureau complet des le debut.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="env-row is-reverse">
|
||||||
|
<div class="env-text">
|
||||||
|
<h3>KDE Plasma</h3>
|
||||||
|
<p>Interface moderne, complete et hautement personnalisable. Un excellent choix si vous voulez un bureau riche avec de nombreux outils integres.</p>
|
||||||
|
</div>
|
||||||
|
<figure class="env-media">
|
||||||
|
<img src="/p/assets/img/hero/KDE.png" alt="Capture de l'environnement KDE Plasma" loading="lazy" />
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="env-row">
|
||||||
|
<figure class="env-media">
|
||||||
|
<img src="/p/assets/img/hero/gnome.png" alt="Capture de l'environnement Gnome" loading="lazy" />
|
||||||
|
</figure>
|
||||||
|
<div class="env-text">
|
||||||
|
<h3>Gnome</h3>
|
||||||
|
<p>Experience epuree et orientee productivite. Gnome met l'accent sur la simplicite d'utilisation et un flux de travail propre sans surcharge visuelle.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="env-row is-reverse">
|
||||||
|
<div class="env-text">
|
||||||
|
<h3>XFCE</h3>
|
||||||
|
<p>Environnement leger et tres stable, ideal pour les machines modestes ou pour privilegier les performances au quotidien.</p>
|
||||||
|
</div>
|
||||||
|
<figure class="env-media">
|
||||||
|
<img src="/p/assets/img/hero/xfce.png" alt="Capture de l'environnement XFCE" loading="lazy" />
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="env-row">
|
||||||
|
<figure class="env-media">
|
||||||
|
<img src="/p/assets/img/hero/hyprland.png" alt="Capture de l'environnement Hyprland" loading="lazy" />
|
||||||
|
</figure>
|
||||||
|
<div class="env-text">
|
||||||
|
<h3>Hyprland</h3>
|
||||||
|
<p>Tiling Wayland rapide et moderne, pense pour un workflow clavier et une grande efficacite. Parfait pour les utilisateurs techniques qui aiment optimiser leur espace de travail.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="env-row is-reverse">
|
||||||
|
<div class="env-text">
|
||||||
|
<h3>CLI (sans environnement)</h3>
|
||||||
|
<p>Version minimale pour les utilisateurs avances, les serveurs ou ceux qui veulent construire leur systeme a la carte. Aucun bureau graphique n'est preinstalle.</p>
|
||||||
|
</div>
|
||||||
|
<figure class="env-media">
|
||||||
|
<img src="/p/assets/img/hero/install.png" alt="Capture de l'environnement CLI" loading="lazy" />
|
||||||
|
</figure>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<script src="../assets/js/hero-carousel.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user