<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Libro - iltrovalibri.it</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
input, textarea, select { width: 100%; padding: 10px; margin: 10px 0; }
button { background: #007bff; color: white; padding: 10px; border: none; cursor: pointer; }
button:hover { background: #0056b3; }
#preview { max-width: 200px; display: none; }
.form-group { margin-bottom: 15px; }
label { font-weight: bold; }
.error { color: red; display: none; }
</style>
</head>
<body>
<h1>Carica la Tua Promozione Libro</h1>
<form id="uploadForm">
<div class="form-group">
<label>Titolo Libro:</label>
<input type="text" id="titolo" required>
</div>
<div class="form-group">
<label>Copertina:</label>
<input type="file" id="copertina" accept="image/*" required>
<img id="preview" alt="Anteprima copertina">
</div>
<div class="form-group">
<label>Descrizione Libro:</label>
<textarea id="descrizione" rows="5" required maxlength="2000"></textarea>
</div>
<div class="form-group">
<label>Note Biografiche Autore:</label>
<textarea id="bio" rows="3" maxlength="1000"></textarea>
</div>
<div class="form-group">
<label>Date di Pubblicazione:</label>
<input type="date" id="dataPub" multiple required min="2025-10-16">
<p><small>Seleziona una o più date (tieni premuto Ctrl per selezioni multiple su desktop).</small></p>
<p id="dataError" class="error">Seleziona almeno una data valida.</p>
</div>
<div class="form-group">
<label>Durata Promozione (per ogni data):</label>
<select id="durata" required>
<option value="1">1 giorno (5€)</option>
<option value="3">3 giorni (12€)</option>
<option value="7">7 giorni (20€)</option>
<option value="30">30 giorni (50€)</option>
</select>
</div>
<div class="form-group">
<label>Costo Totale Promozione: <span id="costo">5€</span></label>
</div>
<button type="submit">Invia e Paga</button>
</form>
<script>
// Preview immagine copertina
document.getElementById('copertina').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
document.getElementById('preview').style.display = 'block';
};
reader.readAsDataURL(file);
}
});
// Aggiorna costo in base alla durata e al numero di date
function aggiornaCosto() {
const durata = document.getElementById('durata').value;
const costiBase = { '1': 5, '3': 12, '7': 20, '30': 50 };
// Nota: Per semplificare, assumiamo una data per ora. Aggiungi logica per date multiple se necessario.
const costoTotale = costiBase[durata];
document.getElementById('costo').textContent = `${costoTotale}€`;
}
document.getElementById('durata').addEventListener('change', aggiornaCosto);
// Submit form
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
const dataPub = document.getElementById('dataPub').value;
if (!dataPub) {
document.getElementById('dataError').style.display = 'block';
return;
}
const data = {
titolo: document.getElementById('titolo').value,
descrizione: document.getElementById('descrizione').value,
bio: document.getElementById('bio').value,
datePub: dataPub.split(','), // Array di date
durata: document.getElementById('durata').value + ' giorni',
costo: document.getElementById('costo').textContent
};
alert('Dati inviati: ' + JSON.stringify(data, null, 2) + '\nProssimo: Integrazione pagamento Stripe.');
// Qui: Invia a backend via fetch() o email
});
// Inizializza costo
aggiornaCosto();
</script>
</body>
</html>
Nessun commento:
Posta un commento