Pense-Bête avec Stockage Local

Générateur de Cases à Cocher

Nombre de Cases à Générer:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pense-Bête avec Stockage Local</title> <style> body { font-family: Arial, sans-serif; } #note-container { width: auto; /* Augmenté la largeur */ margin: auto; } .checkbox-container { display: flex; flex-direction: column; margin-bottom: 10px; } .checkbox-label { margin-bottom: 5px; } .checkbox-item { margin-bottom: 5px; } #note-input { width: calc(100% - 38px); padding: 5px; margin-bottom: 10px; display: inline-block; } #add-button, #export-button, #grid-button, #list-button { width: 30px; padding: 6px 0; margin-bottom: 10px; display: inline-block; } #note-list { list-style-type: none; padding: 0; margin: 0; } .note-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; position: relative; } .note-options { margin-top: 5px; font-size: 14px; color: #333; } .note-text { margin: 0; } .note-url { font-size: 12px; color: #666; } button#export-button { width: 95px; } .grid-view .note-item { display: inline-block; vertical-align: top; margin: 10px; width: 250px; /* Ajusté la largeur */ position: relative; } .grid-view .note-text { max-height: 60px; overflow: hidden; } .block-number { position: absolute; top: 5px; left: 5px; background-color: white; padding: 2px 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; font-weight: bold; } </style> </head> <body> <input type="text" id="note-input" placeholder="Ajouter une note"> <button id="add-button">+</button> <button id="export-button">Export HTML</button> <button id="grid-button">Vue en Grille</button> <button id="list-button">Vue en Liste</button> <ul id="note-list"></ul> </div> <script> document.getElementById('note-input').addEventListener('keypress', function(event) { if (event.key === 'Enter') { addNote(); } }); document.getElementById('add-button').addEventListener('click', function() { addNote(); }); document.getElementById('export-button').addEventListener('click', function() { exportToHTML(); }); document.getElementById('grid-button').addEventListener('click', function() { document.getElementById('note-list').classList.add('grid-view'); }); document.getElementById('list-button').addEventListener('click', function() { document.getElementById('note-list').classList.remove('grid-view'); }); function addNote() { var noteInput = document.getElementById('note-input'); var noteText = noteInput.value.trim(); var currentPageURL = window.location.href; var selectedOptions = getSelectedOptions(); if (noteText !== '') { var noteList = document.getElementById('note-list'); var noteItem = document.createElement('li'); noteItem.className = 'note-item'; var noteTextElement = document.createElement('p'); noteTextElement.className = 'note-text'; noteTextElement.innerText = noteText; // Ajouter les options sélectionnées à la note if (selectedOptions.length > 0) { var optionsText = selectedOptions.join(', '); var optionsElement = document.createElement('p'); optionsElement.className = 'note-options'; optionsElement.innerText = 'Options : ' + optionsText; noteItem.appendChild(optionsElement); } var noteURLElement = document.createElement('p'); noteURLElement.className = 'note-url'; noteURLElement.innerHTML = `<a href="${currentPageURL}" target="_blank">${currentPageURL}</a>`; // Ajout du numéro de bloc var blockNumber = document.createElement('div'); blockNumber.className = 'block-number'; blockNumber.innerText = noteList.children.length + 1; noteItem.appendChild(blockNumber); noteItem.appendChild(noteTextElement); noteItem.appendChild(noteURLElement); var deleteButton = document.createElement('button'); deleteButton.className = 'delete-button'; deleteButton.innerText = 'Supprimer'; deleteButton.addEventListener('click', function() { noteItem.remove(); saveNotes(); }); noteItem.appendChild(deleteButton); noteList.appendChild(noteItem); noteInput.value = ''; saveNotes(); } } function getSelectedOptions() { var checkboxes = document.querySelectorAll('.checkbox-item:checked'); var selectedOptions = []; checkboxes.forEach(function(checkbox) { selectedOptions.push(checkbox.value); }); return selectedOptions; } function saveNotes() { var notes = []; var noteElements = document.querySelectorAll('.note-item .note-text'); var urlElements = document.querySelectorAll('.note-item .note-url a'); var optionElements = document.querySelectorAll('.note-item .note-options'); noteElements.forEach(function(element, index) { var note = { text: element.innerText, url: urlElements[index].getAttribute('href'), options: [] }; // Obtenir les options de la note var optionsText = optionElements[index].innerText.replace('Options : ', ''); note.options = optionsText.split(', '); notes.push(note); }); localStorage.setItem('notes', JSON.stringify(notes)); } function loadNotes() { var notes = JSON.parse(localStorage.getItem('notes') || '[]'); notes.forEach(function(note) { var noteList = document.getElementById('note-list'); var noteItem = document.createElement('li'); noteItem.className = 'note-item'; var noteTextElement = document.createElement('p'); noteTextElement.className = 'note-text'; noteTextElement.innerText = note.text; // Ajouter les options à la note if (note.options.length > 0) { var optionsElement = document.createElement('p'); optionsElement.className = 'note-options'; optionsElement.innerText = 'Options : ' + note.options.join(', '); noteItem.appendChild(optionsElement); } var noteURLElement = document.createElement('p'); noteURLElement.className = 'note-url'; noteURLElement.innerHTML = `<a href="${note.url}" target="_blank">${note.url}</a>`; noteItem.appendChild(noteTextElement); noteItem.appendChild(noteURLElement); // Ajout du numéro de bloc var blockNumber = document.createElement('div'); blockNumber.className = 'block-number'; blockNumber.innerText = noteList.children.length + 1; noteItem.appendChild(blockNumber); var deleteButton = document.createElement('button'); deleteButton.className = 'delete-button'; deleteButton.innerText = 'Supprimer'; deleteButton.addEventListener('click', function() { noteItem.remove(); saveNotes(); }); noteItem.appendChild(deleteButton); noteList.appendChild(noteItem); }); } function exportToHTML() { var notes = document.getElementById('note-list').innerHTML; var currentPageURL = window.location.href; var htmlContent = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Notes Exportées</title> <style> body { font-family: Arial, sans-serif; } .note-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; position: relative; } .note-text { margin: 0; } .note-url { font-size: 12px; color: #666; } .note-options { margin-top: 5px; font-size: 14px; color: #333; } .grid-view .note-item { display: inline-block; vertical-align: top; margin: 10px; width: 250px; position: relative; } .grid-view .note-text { max-height: 60px; overflow: hidden; } .block-number { position: absolute; top: 5px; left: 5px; background-color: white; padding: 2px 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; font-weight: bold; } </style> </head> <body> ${notes} <p>Page d'origine: <a href="${currentPageURL}" target="_blank">${currentPageURL}</a></p> </body> </html> `; var a = document.createElement('a'); var blob = new Blob([htmlContent], { type: 'text/html' }); a.href = URL.createObjectURL(blob); a.download = 'notes_exportees.html'; a.click(); } loadNotes(); </script> </body> </html>