Compare commits

...

24 Commits

Author SHA1 Message Date
BlackAngelTV c0fd8353a6 Refactor contact page styling 2026-05-28 21:55:32 +02:00
BlackAngelTV 6456859e9e feat(contact): redesign contact page 2026-05-28 21:36:13 +02:00
BlackAngelTV 85a551c0b7 chore: commit workspace edits 2026-05-28 21:15:02 +02:00
BlackAngelTV ca7cbf98ec feat(router): use page <title> when injecting pages, fallback to generated title 2026-05-28 21:12:45 +02:00
BlackAngelTV 59d18dfdb7 feat(ui): add favicon using logo.png 2026-05-28 21:07:06 +02:00
BlackAngelTV 6a7566e149 fix(dl): ajuster la page releases 2026-05-28 19:21:32 +02:00
BlackAngelTV ec2c75de33 fix(dl): afficher les images de release et ouvrir la page de release 2026-05-28 19:19:46 +02:00
BlackAngelTV 41c2c58dba fix(dl): fallback tags quand releases absentes 2026-05-28 19:13:34 +02:00
BlackAngelTV 07f232b70b refactor(ui): deplacer les boutons dans styles global 2026-05-28 19:10:34 +02:00
BlackAngelTV 06cef39749 style(ui): boutons globaux pour toutes les pages 2026-05-28 19:08:54 +02:00
BlackAngelTV 3b844a3718 refactor(dl): séparer les styles de téléchargements 2026-05-28 19:07:37 +02:00
BlackAngelTV 07b54a7f5d fix(dl): message quand aucune release et liste partielle 2026-05-28 19:04:43 +02:00
BlackAngelTV bb72082230 feat(dl): charger les releases GitHub pour les downloads 2026-05-28 19:03:23 +02:00
BlackAngelTV 4a7df3e5b7 feat(dl): afficher version courante + liste anciennes versions 2026-05-28 18:21:54 +02:00
BlackAngelTV 5ccc51e8e5 feat(dl): gestion des versions (latest + archive) sur la page downloads 2026-05-28 18:19:27 +02:00
BlackAngelTV bca5626096 feat(dl): page de téléchargements avec liens modifiables et copie 2026-05-28 18:14:54 +02:00
BlackAngelTV e315b511ee fix(copy): corrections textes environnements 2026-05-28 18:09:48 +02:00
BlackAngelTV ba31d6447a feat(index): ajouter hero carousel avec images et script dedie 2026-05-28 17:48:45 +02:00
BlackAngelTV 4c958b448a style(css): ajustements visuels 2026-05-27 22:27:33 +02:00
BlackAngelTV 71a5673572 docs(features): raccourcir texte de la carte 'Installation simplifiée' 2026-05-27 22:27:20 +02:00
BlackAngelTV 1303f0fbd5 feat(features): améliorer comportement hover et état initial des cartes 2026-05-27 22:27:13 +02:00
BlackAngelTV d7e769abfd Merge branch 'main' of https://gitea.nocode-var.tech/FWS/Web-site 2026-05-27 21:44:47 +02:00
BlackAngelTV 3c57353e25 temps 2026-05-27 21:44:33 +02:00
BlackAngelTV 1b6a961e09 feat(main): add hero content and installation copy 2026-05-27 21:42:41 +02:00
18 changed files with 1333 additions and 225 deletions
+5 -4
View File
@@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<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 Linux</title>
<link rel="stylesheet" href="p/assets/main-styles/styles.css" /> <link rel="stylesheet" href="p/assets/styles/styles.css" />
<link rel="icon" type="image/png" href="/p/assets/img/logo.png" />
</head> </head>
<body> <body>
@@ -70,14 +71,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

+212
View File
@@ -0,0 +1,212 @@
(() => {
const OWNER = "You-re-like-Windows-a-bitch";
const REPO = "ISO";
const RELEASES_URL = `https://api.github.com/repos/${OWNER}/${REPO}/releases?per_page=6`;
const TAGS_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=6`;
const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
const currentVersionNode = document.querySelector("[data-current-version]");
const currentVersionDateNode = document.querySelector("[data-current-version-date]");
const currentReleaseNoteNode = document.querySelector("[data-current-release-note]");
const latestDownloadNode = document.querySelector("[data-latest-download]");
const viewMoreNode = document.querySelector("[data-view-more]");
const versionsListNode = document.querySelector("[data-versions-list]");
function formatDate(value) {
if (!value) return "";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return "";
return date.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
});
}
function getReleaseLabel(entry) {
return entry?.name || entry?.tag_name || entry?.ref || "Sans nom";
}
function getReleasePageUrl(entry, mode) {
if (mode === "releases") {
return entry?.html_url || REPO_URL;
}
if (entry?.name) {
return `${REPO_URL}/releases/tag/${encodeURIComponent(entry.name)}`;
}
return REPO_URL;
}
function sanitizeReleaseHtml(html) {
const wrapper = document.createElement("div");
wrapper.innerHTML = html || "";
wrapper.querySelectorAll("script, iframe, object, embed, link, style").forEach((node) => node.remove());
wrapper.querySelectorAll("*").forEach((node) => {
Array.from(node.attributes).forEach((attribute) => {
const name = attribute.name.toLowerCase();
const value = attribute.value || "";
if (name.startsWith("on")) {
node.removeAttribute(attribute.name);
return;
}
if ((name === "href" || name === "src") && /^javascript:/i.test(value)) {
node.removeAttribute(attribute.name);
}
});
});
return wrapper.innerHTML;
}
function pickDirectDownloadUrl(release) {
const assets = Array.isArray(release?.assets) ? release.assets : [];
const isoAsset = assets.find((asset) => /\.iso$/i.test(asset?.name || ""));
const directAsset = isoAsset || assets[0];
if (directAsset) {
return directAsset.browser_download_url || directAsset.url || release.html_url || REPO_URL;
}
return release?.zipball_url || release?.html_url || REPO_URL;
}
function renderEmptyState(title, message) {
if (!versionsListNode) return;
versionsListNode.innerHTML = `
<li class="version-item version-item-empty">
<div class="version-main">
<strong>${title}</strong>
<span>${message}</span>
</div>
<div class="version-side">
<a class="button button-secondary" href="${REPO_URL}" target="_blank" rel="noreferrer">Voir le repo</a>
</div>
</li>
`;
}
function renderList(items, mode) {
if (!versionsListNode) return;
versionsListNode.innerHTML = "";
const visibleItems = items.slice(1, 6);
if (!visibleItems.length) {
if (items.length === 0) {
renderEmptyState("Aucune release trouvée", "Le dépôt n'expose pas encore de release ou les releases ne sont pas accessibles.");
} else {
renderEmptyState(
mode === "releases" ? "Aucune release précédente trouvée" : "Aucun tag précédent trouvé",
mode === "releases"
? "Il n'y a qu'une seule release publiée pour le moment."
: "Il n'y a qu'un seul tag disponible pour le moment."
);
}
return;
}
visibleItems.forEach((entry) => {
const li = document.createElement("li");
li.className = "version-item";
const label = getReleaseLabel(entry);
const downloadUrl = getReleasePageUrl(entry, mode);
const published = formatDate(entry.published_at || entry.commit?.committer?.date);
li.innerHTML = `
<div class="version-main">
<strong>${label}</strong>
<span>${published ? `Publié le ${published}` : mode === "releases" ? "Date inconnue" : "Tag GitHub"}</span>
</div>
<div class="version-side">
<a class="button button-secondary" href="${downloadUrl}" target="_blank" rel="noreferrer">Télécharger</a>
</div>
`;
versionsListNode.appendChild(li);
});
}
async function fetchJson(url) {
const response = await fetch(url, {
headers: { Accept: "application/vnd.github+json" },
});
if (!response.ok) {
throw new Error(`GitHub API ${response.status}`);
}
return response.json();
}
async function loadReleases() {
if (currentVersionNode) currentVersionNode.textContent = "Chargement...";
if (currentVersionDateNode) currentVersionDateNode.textContent = "";
if (currentReleaseNoteNode) currentReleaseNoteNode.textContent = "";
if (latestDownloadNode) latestDownloadNode.href = REPO_URL;
if (viewMoreNode) viewMoreNode.href = `${REPO_URL}/releases`;
try {
const releases = await fetchJson(RELEASES_URL);
if (Array.isArray(releases) && releases.length > 0) {
const latest = releases[0];
const latestLabel = getReleaseLabel(latest);
const latestDownloadUrl = pickDirectDownloadUrl(latest);
const latestDate = formatDate(latest.published_at);
if (currentVersionNode) currentVersionNode.textContent = latestLabel;
if (currentVersionDateNode) currentVersionDateNode.textContent = latestDate ? ` · ${latestDate}` : "";
if (currentReleaseNoteNode) {
const bodyHtml = sanitizeReleaseHtml(latest.body || "");
currentReleaseNoteNode.innerHTML = bodyHtml || "Release GitHub la plus récente.";
}
if (latestDownloadNode) latestDownloadNode.href = latest.html_url || REPO_URL;
renderList(releases, "releases");
return;
}
} catch (error) {
// On tente le fallback tags ci-dessous.
}
try {
const tags = await fetchJson(TAGS_URL);
if (Array.isArray(tags) && tags.length > 0) {
const latestTag = tags[0];
const latestLabel = getReleaseLabel(latestTag);
const latestDownloadUrl = `${REPO_URL}/releases/tag/${encodeURIComponent(latestTag.name)}`;
if (currentVersionNode) currentVersionNode.textContent = `${latestLabel} (tag)`;
if (currentVersionDateNode) currentVersionDateNode.textContent = "";
if (currentReleaseNoteNode) {
currentReleaseNoteNode.textContent = "Aucune release GitHub publiée pour le moment, affichage des tags du dépôt.";
}
if (latestDownloadNode) latestDownloadNode.href = latestDownloadUrl;
renderList(tags, "tags");
return;
}
if (currentVersionNode) currentVersionNode.textContent = "Aucune release trouvée";
if (currentReleaseNoteNode) {
currentReleaseNoteNode.textContent = "Le dépôt ne renvoie ni release ni tag public.";
}
renderEmptyState("Aucune release trouvée", "Le dépôt ne renvoie ni release ni tag public.");
} catch (error) {
if (currentVersionNode) currentVersionNode.textContent = "Impossible de charger les releases";
if (currentReleaseNoteNode) {
currentReleaseNoteNode.textContent = `Erreur: ${error.message}. Vérifie que le repo GitHub est public et qu'il expose des releases ou des tags.`;
}
renderEmptyState("Impossible de charger les releases", "Ouvre le repo GitHub pour vérifier les releases ou les tags.");
}
}
loadReleases();
})();
+155
View File
@@ -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,
});
})();
+47 -1
View File
@@ -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,14 @@
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);
// Update document title from the fetched page if present, otherwise use generated title
const pageTitleEl = parsed.querySelector("title");
if (pageTitleEl && pageTitleEl.textContent && pageTitleEl.textContent.trim()) {
document.title = pageTitleEl.textContent.trim();
} else {
document.title = routeToTitle(route);
}
} }
function render(route, { replaceHistory = false } = {}) { function render(route, { replaceHistory = false } = {}) {
@@ -137,7 +184,6 @@
.then(() => { .then(() => {
setActiveRoute(safeRoute); setActiveRoute(safeRoute);
setCanonicalUrl(safeRoute, replaceHistory); setCanonicalUrl(safeRoute, replaceHistory);
document.title = routeToTitle(safeRoute);
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}) })
.catch((error) => { .catch((error) => {
-129
View File
@@ -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;
}
}
+111
View File
@@ -0,0 +1,111 @@
@import "./var.css";
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
color: var(--generic-text-color);
background:
radial-gradient(circle at top left, rgba(0, 212, 255, 0.18), transparent 24%),
radial-gradient(circle at right center, rgba(255, 165, 0, 0.14), transparent 28%),
linear-gradient(160deg, var(--sidebar-background) 0%, var(--sidebar-select) 50%, var(--background-color) 100%);
}
.contact-header {
max-width: 1120px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 5rem) 1.25rem 1.25rem;
text-align: center;
}
.contact-header h1 {
margin: 0;
font-family: "Georgia", "Times New Roman", serif;
font-size: clamp(2.5rem, 7vw, 5.2rem);
line-height: 0.95;
letter-spacing: -0.05em;
color: var(--highlighted-text-color);
}
.contact-header p {
max-width: 62ch;
margin: 1rem auto 0;
color: var(--generic-text-color);
opacity: 0.84;
font-size: 1.05rem;
line-height: 1.8;
}
hr {
width: min(1120px, calc(100% - 2.5rem));
margin: 0 auto;
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sidebar-text-highlight), var(--warning-text-color), transparent);
}
main {
width: min(1120px, calc(100% - 2.5rem));
margin: 1.5rem auto 0;
padding: 0 0 3rem;
}
main section {
padding: clamp(1.4rem, 3vw, 2rem);
border-radius: 1.6rem;
border: 1px solid rgba(224, 224, 224, 0.16);
background: linear-gradient(145deg, var(--sidebar-background), var(--sidebar-select));
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.42);
}
main section h2 {
margin: 0 0 0.85rem;
color: var(--highlighted-text-color);
font-family: "Georgia", "Times New Roman", serif;
font-size: clamp(1.4rem, 3vw, 2.1rem);
}
main section p {
margin: 0 0 1rem;
color: var(--generic-text-color);
opacity: 0.9;
line-height: 1.8;
}
main section strong {
color: var(--highlighted-text-color);
}
main section a:not(.button) {
color: var(--sidebar-text-highlight);
text-decoration: underline;
text-underline-offset: 0.15em;
}
main section a:not(.button):hover,
main section a:not(.button):focus-visible {
color: var(--highlighted-text-color);
}
@media (max-width: 700px) {
.contact-header {
padding-top: 2rem;
}
main,
hr {
width: min(100% - 1rem, 1120px);
}
main section {
border-radius: 1.1rem;
}
main section a.button {
width: 100%;
}
}
+114
View File
@@ -0,0 +1,114 @@
.versions-panel {
margin-top: 1rem;
padding: 1rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(148, 163, 184, 0.08);
}
.latest-version h2 {
margin: 0 0 0.35rem;
}
.latest-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.latest-meta {
color: var(--muted);
font-size: 1.05rem;
}
.latest-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.latest-note {
margin: 0.85rem 0 0;
color: var(--muted);
line-height: 1.6;
}
.latest-note img {
display: block;
max-width: 100%;
height: auto;
margin: 0.75rem 0;
border-radius: 0.65rem;
}
.latest-note a {
color: #7dd3fc;
text-decoration: none;
}
.latest-note a:hover {
text-decoration: underline;
}
.versions-archive {
margin-top: 1rem;
}
.versions-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.version-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.8rem 0.9rem;
border-radius: 0.8rem;
background: rgba(2, 6, 23, 0.24);
border: 1px solid rgba(148, 163, 184, 0.08);
}
.version-item-empty {
opacity: 0.8;
}
.version-main {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.version-main a {
color: #7dd3fc;
text-decoration: none;
width: fit-content;
}
.version-main a:hover {
text-decoration: underline;
}
.version-side {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
@media (max-width: 880px) {
.latest-row,
.version-item {
flex-direction: column;
align-items: flex-start;
}
.version-side {
width: 100%;
}
}
+454
View File
@@ -0,0 +1,454 @@
@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);
}
.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;
}
/* Styles page Téléchargements */
.downloads {
margin-top: 1.5rem;
}
.downloads-header h1 { margin: 0 0 0.35rem; }
.download-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.download-card {
display: flex;
gap: 1rem;
align-items: stretch;
padding: 0.8rem;
border-radius: 0.75rem;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(148,163,184,0.06);
}
.download-media { width: 220px; flex: 0 0 220px; overflow: hidden; border-radius: 0.5rem; }
.download-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.download-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.download-actions { display: flex; gap: 0.6rem; margin-top: auto; }
@media (max-width: 880px) {
.download-grid { grid-template-columns: 1fr; }
.download-media { width: 140px; flex-basis: 140px; }
}
/* Versions toolbar */
.version-toolbar {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
margin-top: 0.8rem;
}
.version-current { color: var(--muted); }
.versions-archive {
margin-top: 0.8rem;
padding: 0.8rem;
border-radius: 0.6rem;
background: rgba(255,255,255,0.01);
border: 1px solid rgba(148,163,184,0.06);
}
.versions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.version-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.6rem; border-radius: 0.45rem; }
.version-meta { color: var(--muted); margin-left: 0.6rem; font-size: 0.92rem; }
.version-actions { display: flex; gap: 0.4rem; }
@media (max-width: 640px) {
.version-toolbar { flex-direction: column; align-items: flex-start; }
.version-actions { width: 100%; display: flex; gap: 0.5rem; }
}
.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,
@@ -272,6 +274,69 @@ body::after {
color: var(--text); color: var(--text);
} }
.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;
cursor: pointer;
transition:
transform 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease,
opacity 180ms ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.button-primary {
background: linear-gradient(145deg, var(--accent), var(--accent-strong));
color: #08101d;
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.25);
}
.button-secondary {
background: rgba(255,255,255,0.04);
color: var(--text);
border-color: rgba(148, 163, 184, 0.18);
}
.button:hover,
.button:focus-visible {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28);
}
.button-primary:hover,
.button-primary:focus-visible {
background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 86%, white), color-mix(in srgb, var(--accent-strong) 92%, white));
}
.button-secondary:hover,
.button-secondary:focus-visible {
background: rgba(125, 211, 252, 0.12);
border-color: rgba(125, 211, 252, 0.35);
}
.button:focus-visible {
outline: 2px solid rgba(125, 211, 252, 0.85);
outline-offset: 2px;
}
.button[aria-disabled="true"],
.button:disabled {
opacity: 0.55;
pointer-events: none;
transform: none;
box-shadow: none;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
+34 -36
View File
@@ -1,39 +1,37 @@
<!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.0">
<title>Contact</title> <title>Contact - Linux OS</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" /> <link rel="stylesheet" href="../assets/styles/styles.css">
</head> <link rel="stylesheet" href="../assets/styles/contact.css">
<body> </head>
<main data-page-content> <body>
<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"> <header class="contact-header">
<article class="card"> <h1>Contactez l'équipe de développement</h1>
<h2>Email</h2> <p>Une question, un bug à signaler ou envie de contribuer ? Voici comment nous joindre.</p>
<p>contact@fwslinux.fr pour les demandes générales et les retours rapides.</p> </header>
</article>
<article class="card"> <hr>
<h2>Téléphone</h2>
<p>+33 0 00 00 00 00 pour les appels ou le support direct.</p> <main>
</article> <section>
<article class="card"> <h2>Notre seul canal officiel actuel</h2>
<h2>Réseaux</h2> <p>Le projet est en plein développement. Pour le moment, nous n'avons pas encore d'adresse email dédiée ni de réseaux sociaux.</p>
<p>Le footer te donne aussi les liens vers GitHub, Instagram et LinkedIn.</p> <p>
</article> <strong>Suivez le projet et ouvrez des Issues / PR ici :</strong>
</section> <br>
</main> <a class="button button-primary" href="https://github.com/You-re-like-Windows-a-bitch/ISO" target="_blank" rel="noopener noreferrer">Notre GitHub</a>
</body> </p>
</section>
<hr>
</main>
</body>
</html> </html>
+30 -27
View File
@@ -3,38 +3,41 @@
<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" />
<title>DL</title> <title>FWS Linux - Téléchargements</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" />
<link rel="stylesheet" href="../assets/styles/downloads.css" />
<link rel="icon" type="image/png" href="/p/assets/img/logo.png" />
</head> </head>
<body> <body>
<main data-page-content> <main data-page-content>
<section class="hero"> <section class="downloads">
<p class="eyebrow">Route DL</p> <header class="downloads-header">
<h1>Le contenu de la section DL charge ici.</h1> <h1>Téléchargements</h1>
<p class="lead"> <div class="versions-panel">
Cette page vit dans <span>p/dl/index.html</span> et son contenu est injecté dans le <div class="latest-version">
<span>main</span> quand l'URL pointe vers <span>/?p/dl/</span>. <h2>Dernière version</h2>
</p> <div class="latest-row">
<div class="hero-actions"> <div class="latest-meta">
<a class="button button-primary" href="/" data-route="home">Retour à l'accueil</a> <strong data-current-version>Chargement...</strong>
<a class="button button-secondary" href="/?p/dl/" data-route="dl">Recharger DL</a> <span data-current-version-date></span>
</div> </div>
</section> <div class="latest-actions">
<a class="button" data-latest-download href="#" target="_blank" rel="noreferrer">Télécharger</a>
</div>
</div>
<p class="latest-note" data-current-release-note></p>
</div>
<div class="versions-archive">
<h3>5 versions précédentes</h3>
<ul class="versions-list" data-versions-list></ul>
</div>
</div>
</header>
<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> </section>
</main> </main>
<script src="../assets/js/downloads.js"></script>
</body> </body>
</html> </html>
+102 -24
View File
@@ -3,39 +3,117 @@
<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" />
<title>Accueil</title> <title>FWS Linux - Accueil</title>
<link rel="stylesheet" href="../assets/main-styles/main.css" /> <link rel="stylesheet" href="../assets/styles/main.css" />
<link rel="icon" type="image/png" href="/p/assets/img/logo.png" />
</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">
<div class="hero-actions"> <h1 class="hero-title">FWS Linux</h1>
<a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a> <h2 class="hero-subtitle">Un systeme leger, libre et compatible</h2>
<a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a> <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">
<a class="button button-primary" href="/?p/dl/" data-route="dl">Telecharger</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>