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;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
|
||||
@@ -1,4 +1,92 @@
|
||||
<!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">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
Reference in New Issue
Block a user