235 lines
9.5 KiB
HTML
235 lines
9.5 KiB
HTML
<!doctype html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Hey, ci sono i 40 anni del Gianca!</title>
|
|
<meta name="description" content="Landing RSVP per i 40 anni del Gianca - 25 aprile 2026, Lost Paradise Beach Club, Bacoli." />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body class="theme-icon">
|
|
<div class="page-shell">
|
|
<header class="hero">
|
|
<img class="hero__image" src="assets/gianca-photo.jpg" alt="Giancarlo in posa sulla spiaggia" />
|
|
<div class="hero__overlay"></div>
|
|
|
|
<div class="hero__content container">
|
|
<h1 class="hero__title">Hey, ci sono i 40 anni del Gianca!</h1>
|
|
<div class="hero__underline" aria-hidden="true"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="section intro">
|
|
<div class="container intro__grid">
|
|
<div class="intro__text">
|
|
<p class="section-kicker">Un pranzo vista mare</p>
|
|
<h2>Una giornata semplice, bella, piena di affetto.</h2>
|
|
<p>
|
|
Il Gianca festeggia i suoi 40 anni e ha bisogno di sapere chi ci sarà, così da organizzare al meglio tavoli, spazi e tutto il resto.
|
|
</p>
|
|
<p>
|
|
Compila il modulo qui sotto: bastano pochi secondi per confermare la presenza, indicare l'eventuale partner e il numero di bambini.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="details-card">
|
|
<div class="details-card__item details-card__item--calendar">
|
|
<span class="details-card__label">Quando</span>
|
|
<strong>Sabato 25 aprile 2026</strong>
|
|
<div class="calendar-tools">
|
|
<a
|
|
class="calendar-tools__action"
|
|
id="google-calendar-link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Google Calendar
|
|
</a>
|
|
<button
|
|
class="calendar-tools__action calendar-tools__action--button"
|
|
type="button"
|
|
id="ical-download"
|
|
>
|
|
iCal / Apple Calendar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="details-card__item">
|
|
<span class="details-card__label">Dove</span>
|
|
<strong>Lost Paradise Beach Club</strong>
|
|
<span>Bacoli</span>
|
|
</div>
|
|
<div class="details-card__item">
|
|
<span class="details-card__label">Orario</span>
|
|
<strong>Dalle ore 12.00</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section gift" id="regalo">
|
|
<div class="container gift__shell">
|
|
<div class="gift__layout" aria-labelledby="gift-title">
|
|
<h3 class="gift__title" id="gift-title">Dettagli regalo</h3>
|
|
<div class="gift__col gift__col--left">
|
|
<p class="section-kicker gift__kicker">Regalo / quota viaggio</p>
|
|
<h2 class="gift__heading">Un piccolo gesto, con il sorriso.</h2>
|
|
<p class="gift__lead">
|
|
Se ti fa piacere contribuire al regalo o alla quota viaggio, qui trovi i riferimenti.
|
|
</p>
|
|
<p class="gift__note" id="gift-note">Nota facoltativa: un pensiero semplice è più che sufficiente.</p>
|
|
</div>
|
|
|
|
<div class="gift__col gift__col--right">
|
|
<span class="gift__accent" aria-hidden="true"></span>
|
|
<!-- Dati contributo: modifica rapidamente intestatario, IBAN, causale e nota in script.js (costante GIFT_DETAILS). -->
|
|
<dl class="gift__details">
|
|
<div class="gift__row">
|
|
<dt>Intestatario</dt>
|
|
<dd id="gift-holder">Giancarlo ...</dd>
|
|
</div>
|
|
<div class="gift__row gift__row--iban">
|
|
<dt>IBAN</dt>
|
|
<dd id="gift-iban">IT00X0000000000000000000000</dd>
|
|
<div class="gift__iban-actions">
|
|
<button
|
|
class="button button--secondary button--compact gift__copy"
|
|
type="button"
|
|
id="copy-iban"
|
|
data-copy-target="gift-iban"
|
|
>
|
|
Copia IBAN
|
|
</button>
|
|
<p class="gift__feedback" id="iban-feedback" aria-live="polite"></p>
|
|
</div>
|
|
</div>
|
|
<div class="gift__row">
|
|
<dt>Causale consigliata</dt>
|
|
<dd id="gift-causal">Regalo 40 anni Gianca</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section rsvp" id="rsvp">
|
|
<div class="container rsvp__grid">
|
|
<div class="rsvp__copy">
|
|
<p class="section-kicker">RSVP</p>
|
|
<h2>Conferma la tua presenza</h2>
|
|
<p>
|
|
Grazie: la tua risposta ci aiuta davvero a organizzare tutto al meglio.
|
|
</p>
|
|
<ul class="rsvp__notes">
|
|
<li>Se non puoi esserci, seleziona semplicemente “No”.</li>
|
|
<li>Se vieni, indica se sarai con partner.</li>
|
|
<li>Se ci sono bambini, scrivi quanti.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="form-card">
|
|
<form
|
|
name="rsvp-gianca-40"
|
|
method="POST"
|
|
data-netlify="true"
|
|
netlify-honeypot="bot-field"
|
|
action="/grazie/"
|
|
id="rsvp-form"
|
|
novalidate
|
|
>
|
|
<input type="hidden" name="form-name" value="rsvp-gianca-40" />
|
|
|
|
<div class="form-row">
|
|
<label for="name">Nome e cognome</label>
|
|
<input id="name" name="name" type="text" autocomplete="name" required />
|
|
</div>
|
|
|
|
<p class="hidden-field">
|
|
<label>Non compilare questo campo se sei umano: <input name="bot-field" /></label>
|
|
</p>
|
|
|
|
<div class="form-row">
|
|
<span class="form-label">Confermi la tua presenza?</span>
|
|
<div class="choice-group" role="radiogroup">
|
|
<label class="choice">
|
|
<input type="radio" name="attendance" value="si" required checked />
|
|
<span>Sì, ci sarò</span>
|
|
</label>
|
|
<label class="choice">
|
|
<input type="radio" name="attendance" value="no" required />
|
|
<span>No, non riesco</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="attendance-fields">
|
|
<div class="form-row">
|
|
<span class="form-label">Verrai con partner?</span>
|
|
<div class="choice-group">
|
|
<label class="choice">
|
|
<input type="radio" name="partner" value="si" checked />
|
|
<span>Sì</span>
|
|
</label>
|
|
<label class="choice">
|
|
<input type="radio" name="partner" value="no" />
|
|
<span>No</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="childrenCount">Quanti bambini verranno con te?</label>
|
|
<select id="childrenCount" name="childrenCount">
|
|
<option value="0" selected>0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4+">4 o più</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="notes">Note utili</label>
|
|
<textarea id="notes" name="notes" rows="4" placeholder="Allergie, esigenze particolari, eventuali dettagli utili"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="button" type="submit">Invia conferma</button>
|
|
<p class="form-status" id="form-status" aria-live="polite"></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="success-modal" id="success-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="success-title">
|
|
<div class="success-modal__backdrop" data-close-modal></div>
|
|
<div class="success-modal__dialog" role="document">
|
|
<div class="success-tag" aria-live="polite">
|
|
<!-- <div class="success-tag__line" aria-hidden="true"></div> -->
|
|
<div class="success-tag__content">
|
|
<p class="success-tag__kicker">Risposta inviata</p>
|
|
<h3 class="success-tag__title" id="success-title">Grazie per la tua risposta</h3>
|
|
<p class="success-tag__text">La conferma è stata registrata correttamente. A presto!</p>
|
|
<button class="button success-tag__button" type="button" id="success-ok">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer__inner">
|
|
<p>Sviluppato con ♥ da bisco con Codex</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|