60 lines
1.7 KiB
HTML
60 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Bibliothèque de dessins</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<ul class="menu">
|
|
<li><a href="index.html">Accueil</a></li>
|
|
<li><a href="create.html">Créer</a></li>
|
|
<li><a href="biblio.html" class="active">Bibliothèque</a></li>
|
|
</ul>
|
|
</header>
|
|
|
|
<main id="library" style="padding:20px;">
|
|
<h1>Ma Bibliothèque de Dessins</h1>
|
|
<div id="gallery" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
|
|
</main>
|
|
|
|
<script>
|
|
const gallery = document.getElementById('gallery');
|
|
|
|
// Récupérer les dessins enregistrés depuis le localStorage
|
|
let library = JSON.parse(localStorage.getItem('canvasLibrary') || "[]");
|
|
|
|
library.forEach((dataURL, index) => {
|
|
const container = document.createElement('div');
|
|
container.style.position = "relative";
|
|
|
|
const img = document.createElement('img');
|
|
img.src = dataURL;
|
|
img.style.width = "200px";
|
|
img.style.border = "1px solid #ccc";
|
|
img.style.borderRadius = "5px";
|
|
container.appendChild(img);
|
|
|
|
// Optionnel : bouton supprimer
|
|
const delBtn = document.createElement('button');
|
|
delBtn.textContent = "Supprimer";
|
|
delBtn.style.position = "absolute";
|
|
delBtn.style.top = "5px";
|
|
delBtn.style.right = "5px";
|
|
delBtn.style.fontSize = "12px";
|
|
delBtn.style.cursor = "pointer";
|
|
container.appendChild(delBtn);
|
|
|
|
delBtn.onclick = () => {
|
|
library.splice(index, 1);
|
|
localStorage.setItem('canvasLibrary', JSON.stringify(library));
|
|
container.remove();
|
|
};
|
|
|
|
gallery.appendChild(container);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|