Scheda_libro

<!DOCTYPE html>
<html lang='it'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Scheda Libro - Valutazione</title>
<style>
:root{--bg:#f6f5f1;--card:#fff;--ink:#1a1a1a;--muted:#7a7a7a;--line:#e8e2d9}
*{box-sizing:border-box;font-family:system-ui,sans-serif}
body{margin:0;background:var(--bg);color:var(--ink);padding:24px}
.wrap{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
@media(max-width:860px){.wrap{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 4px 24px rgba(0,0,0,.04)}
h2{margin:0 0 12px}
label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fffcf8;font-size:14px}
textarea{min-height:110px;resize:vertical}
.btn{width:100%;padding:14px;border-radius:12px;border:0;background:#111;color:#fff;font-weight:700;cursor:pointer;margin-top:14px}
.btn-ghost{background:transparent;color:#111;border:1px solid var(--line)}
.list{display:flex;flex-direction:column;gap:12px}
.item{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fffcf8}
</style>
</head>
<body>
<div class='wrap'>
<div class='card'>
<h2>Scheda libro</h2>
<label>Titolo *</label><input id='titolo' placeholder="Es. Il nome della rosa">
<div style='display:grid;grid-template-columns:1fr 1fr;gap:12px'>
<div><label>Autore *</label><input id='autore' placeholder="Umberto Eco"></div>
<div><label>Genere</label><select id='genere'><option value=""></option><option>Narrativa</option><option>Saggio</option><option>Giallo</option><option>Fantascienza</option><option>Biografia</option><option>Biblioteconomia</option><option>Altro</option></select></div>
</div>
<div style='display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px'>
<div><label>Editore</label><input id='editore'></div>
<div><label>Anno</label><input id='anno' type='number'></div>
<div><label>Pagine</label><input id='pagine' type='number'></div>
</div>
<label>ISBN</label><input id='isbn'>
<label>Lingua</label><input id='lingua' value="Italiano">
<label>Collocazione / Segnatura</label><input id='colloc' placeholder="Es. MAG. 45231 oppure 025.3 ECO">
<label>Valutazione: <span id='valLabel'>5</span>/10</label>
<input id='voto' type='range' min='1' max='10' value='5' style="width:100%;accent-color:#111">
<label>Commento / Recensione</label><textarea id='commento' placeholder="Cosa ti è piaciuto, citazioni, a chi lo consigli..."></textarea>
<button class='btn' onclick='salva()'>Salva scheda</button>
<button class='btn btn-ghost' onclick='pulisci()'>Pulisci campi</button>
</div>
<div class='card'>
<h2>Libreria salvata</h2>
<div id='counter' style="font-size:12px;color:#888;margin-bottom:12px"></div>
<div class='list' id='lista'></div>
<button class='btn btn-ghost' onclick='svuota()'>Svuota tutto</button>
</div>
</div>
<script>
const $=id=>document.getElementById(id);
const voto=$('voto'); 
voto.addEventListener('input',()=>{$('valLabel').textContent=voto.value});
function getData(){return{
titolo:$('titolo').value.trim(),autore:$('autore').value.trim(),
genere:$('genere').value,editore:$('editore').value.trim(),
anno:$('anno').value.trim(),pagine:$('pagine').value.trim(),
isbn:$('isbn').value.trim(),lingua:$('lingua').value.trim(),
colloc:$('colloc').value.trim(),voto:$('voto').value,
commento:$('commento').value.trim(),
data:new Date().toLocaleString('it-IT')};}
function salva(){
const d=getData();
if(!d.titolo||!d.autore){alert('Titolo e autore obbligatori');return;}
const libri=JSON.parse(localStorage.getItem('libri_v1')||'[]');
libri.unshift(d);
localStorage.setItem('libri_v1',JSON.stringify(libri));
render();pulisci();
}
function pulisci(){['titolo','autore','editore','anno','pagine','isbn','lingua','colloc','commento'].forEach(id=>$(id).value='');$('genere').value='';$('voto').value=5;$('valLabel').textContent=5;}
function render(){
const libri=JSON.parse(localStorage.getItem('libri_v1')||'[]');
$('counter').textContent=libri.length+' libri - media: '+(libri.length? (libri.reduce((a,b)=>a+Number(b.voto),0)/libri.length).toFixed(1):0);
const lista=$('lista');
lista.innerHTML=libri.map((l,i)=>`
<div class='item'>
<b>${esc(l.titolo)}</b> - ${esc(l.autore)} <span style='float:right;font-weight:800'>${l.voto}/10</span><br>
<small>${esc(l.genere)} ${l.colloc? '• Segnatura: '+esc(l.colloc):''}<br>
${l.editore} ${l.anno? '('+l.anno+')':''}<br>
${esc(l.commento)}</small><br>
<button onclick='elimina(${i})' style='font-size:11px;color:#c00;border:0;background:none;cursor:pointer;margin-top:6px'>Elimina</button>
</div>`).join('');
}
function elimina(i){const libri=JSON.parse(localStorage.getItem('libri_v1')||'[]');libri.splice(i,1);localStorage.setItem('libri_v1',JSON.stringify(libri));render();}
function svuota(){if(confirm('Cancellare tutte le schede?')){localStorage.removeItem('libri_v1');render();}}
function esc(s){return (s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));}
render();
</script>
</body>
</html>