forked from FWS/TEMPLATE-Web-site-one-page
feat(dl): page de téléchargements avec liens modifiables et copie
This commit is contained in:
@@ -0,0 +1,73 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const cards = Array.from(document.querySelectorAll(".download-card"));
|
||||||
|
|
||||||
|
function toast(message) {
|
||||||
|
const t = document.createElement("div");
|
||||||
|
t.className = "dl-toast";
|
||||||
|
t.textContent = message;
|
||||||
|
Object.assign(t.style, {
|
||||||
|
position: "fixed",
|
||||||
|
right: "1rem",
|
||||||
|
bottom: "1rem",
|
||||||
|
background: "rgba(2,6,23,0.9)",
|
||||||
|
color: "#fff",
|
||||||
|
padding: "0.6rem 0.9rem",
|
||||||
|
borderRadius: "6px",
|
||||||
|
boxShadow: "0 6px 20px rgba(2,6,23,0.5)",
|
||||||
|
zIndex: 9999,
|
||||||
|
});
|
||||||
|
document.body.appendChild(t);
|
||||||
|
setTimeout(() => t.remove(), 2200);
|
||||||
|
}
|
||||||
|
|
||||||
|
cards.forEach((card) => {
|
||||||
|
const key = `fws:download:${card.dataset.key}`;
|
||||||
|
const btn = card.querySelector(".download-btn");
|
||||||
|
const copyBtn = card.querySelector(".copy-btn");
|
||||||
|
const editBtn = card.querySelector(".edit-btn");
|
||||||
|
|
||||||
|
function setLink(url) {
|
||||||
|
if (!url) url = "#";
|
||||||
|
btn.href = url;
|
||||||
|
btn.dataset.link = url;
|
||||||
|
copyBtn.dataset.link = url;
|
||||||
|
localStorage.setItem(key, url);
|
||||||
|
}
|
||||||
|
|
||||||
|
const stored = localStorage.getItem(key);
|
||||||
|
if (stored) {
|
||||||
|
setLink(stored);
|
||||||
|
}
|
||||||
|
|
||||||
|
editBtn.addEventListener("click", () => {
|
||||||
|
const current = localStorage.getItem(key) || "";
|
||||||
|
const value = window.prompt("Collez l'URL de téléchargement pour ce fichier:", current);
|
||||||
|
if (value === null) return;
|
||||||
|
const trimmed = value.trim();
|
||||||
|
setLink(trimmed);
|
||||||
|
toast("Lien enregistré");
|
||||||
|
});
|
||||||
|
|
||||||
|
copyBtn.addEventListener("click", async () => {
|
||||||
|
const link = copyBtn.dataset.link || btn.href || "";
|
||||||
|
if (!link || link === "#") {
|
||||||
|
toast("Aucun lien défini — utilisez 'Modifier le lien'");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(link);
|
||||||
|
toast("Lien copié dans le presse-papiers");
|
||||||
|
} catch (e) {
|
||||||
|
window.prompt("Copiez manuellement ce lien:", link);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.addEventListener("click", (ev) => {
|
||||||
|
const href = btn.getAttribute("href") || "";
|
||||||
|
if (!href || href === "#") {
|
||||||
|
ev.preventDefault();
|
||||||
|
toast("Aucun lien configuré — cliquez sur 'Modifier le lien' pour en ajouter un");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -259,6 +259,43 @@ main[data-page-content] {
|
|||||||
line-height: 1.65;
|
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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.features .card {
|
.features .card {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|||||||
@@ -1,4 +1,92 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Téléchargements — FWS Linux</title>
|
||||||
|
<link rel="stylesheet" href="../assets/styles/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main data-page-content>
|
||||||
|
<section class="downloads">
|
||||||
|
<header class="downloads-header">
|
||||||
|
<h1>Téléchargements</h1>
|
||||||
|
<p>Choisissez votre image et collez le lien de téléchargement (ou utilisez ceux fournis). Les liens sont sauvegardés localement pour faciliter la gestion.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="download-grid">
|
||||||
|
<article class="download-card" data-key="cli">
|
||||||
|
<figure class="download-media"><img src="/p/assets/img/hero/install.png" alt="CLI"/></figure>
|
||||||
|
<div class="download-body">
|
||||||
|
<h3>CLI (Minimal)</h3>
|
||||||
|
<p>Image minimale sans environnement graphique, pour les installations serveur ou avancées.</p>
|
||||||
|
<div class="download-actions">
|
||||||
|
<a class="button download-btn" href="#" target="_blank">Télécharger</a>
|
||||||
|
<button class="button button-secondary copy-btn">Copier le lien</button>
|
||||||
|
<button class="button button-secondary edit-btn">Modifier le lien</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="download-card" data-key="kde">
|
||||||
|
<figure class="download-media"><img src="/p/assets/img/hero/KDE.png" alt="KDE Plasma"/></figure>
|
||||||
|
<div class="download-body">
|
||||||
|
<h3>KDE Plasma</h3>
|
||||||
|
<p>Environnement complet, riche en fonctionnalités et personnalisable.</p>
|
||||||
|
<div class="download-actions">
|
||||||
|
<a class="button download-btn" href="#" target="_blank">Télécharger</a>
|
||||||
|
<button class="button button-secondary copy-btn">Copier le lien</button>
|
||||||
|
<button class="button button-secondary edit-btn">Modifier le lien</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="download-card" data-key="gnome">
|
||||||
|
<figure class="download-media"><img src="/p/assets/img/hero/gnome.png" alt="GNOME"/></figure>
|
||||||
|
<div class="download-body">
|
||||||
|
<h3>GNOME</h3>
|
||||||
|
<p>Expérience épurée et orientée productivité, simple à prendre en main.</p>
|
||||||
|
<div class="download-actions">
|
||||||
|
<a class="button download-btn" href="#" target="_blank">Télécharger</a>
|
||||||
|
<button class="button button-secondary copy-btn">Copier le lien</button>
|
||||||
|
<button class="button button-secondary edit-btn">Modifier le lien</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="download-card" data-key="xfce">
|
||||||
|
<figure class="download-media"><img src="/p/assets/img/hero/xfce.png" alt="XFCE"/></figure>
|
||||||
|
<div class="download-body">
|
||||||
|
<h3>XFCE</h3>
|
||||||
|
<p>Environnement léger et stable, adapté aux machines modestes.</p>
|
||||||
|
<div class="download-actions">
|
||||||
|
<a class="button download-btn" href="#" target="_blank">Télécharger</a>
|
||||||
|
<button class="button button-secondary copy-btn">Copier le lien</button>
|
||||||
|
<button class="button button-secondary edit-btn">Modifier le lien</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="download-card" data-key="hyprland">
|
||||||
|
<figure class="download-media"><img src="/p/assets/img/hero/hyprland.png" alt="Hyprland"/></figure>
|
||||||
|
<div class="download-body">
|
||||||
|
<h3>Hyprland</h3>
|
||||||
|
<p>Tiling Wayland moderne, pensé pour les workflows clavier avancés.</p>
|
||||||
|
<div class="download-actions">
|
||||||
|
<a class="button download-btn" href="#" target="_blank">Télécharger</a>
|
||||||
|
<button class="button button-secondary copy-btn">Copier le lien</button>
|
||||||
|
<button class="button button-secondary edit-btn">Modifier le lien</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="../assets/js/downloads.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<!doctype html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|||||||
Reference in New Issue
Block a user