From 0b8755873f64f57aea19220a2cf3f632f3f0b5ba Mon Sep 17 00:00:00 2001 From: Stefano Tamagnini Date: Tue, 21 Apr 2026 23:22:40 +0000 Subject: [PATCH 01/39] Improve: presenta eventi - standardizza layout e aggiunge features - Template evento: aggiunge badge event status, benefits section, countdown styles - CSS: nuovo sistema badge, benefits cards grid, responsive enhancements - Campo EG: migra da layout page a layout evento con frontmatter completo - Stage: migra da layout page a layout evento con frontmatter completo - README_EVENTO: documenta nuove features (event_status, benefits, countdown) Eventi ora usano layout uniforme con badge distintivi per stato (upcoming/past/soldout) --- _layouts/evento.html | 32 +++++++ _pages/eventi/README_EVENTO.md | 53 ++++++++++ _pages/eventi/campo_eg.md | 170 ++++++++++++++++++++++++++++----- _pages/eventi/stage.md | 166 ++++++++++++++++++++++++++++---- assets/css/evento-custom.css | 153 +++++++++++++++++++++++++++++ 5 files changed, 534 insertions(+), 40 deletions(-) diff --git a/_layouts/evento.html b/_layouts/evento.html index 90f7f71..8fe7e8f 100644 --- a/_layouts/evento.html +++ b/_layouts/evento.html @@ -52,8 +52,40 @@

{{ page.hero.subtitle }}

{{ page.cta.primary.text }} + + {% if page.event_status == 'upcoming' %} +
+ PROSSIMO EVENTO +
+ {% elsif page.event_status == 'soldout' %} +
+ SOLD OUT +
+ {% elsif page.event_status == 'last_chance' %} +
+ ULTIMI POSTI +
+ {% endif %} + {% if page.benefits %} +
+

{{ page.benefits_title | default: 'Perché partecipare' }}

+
+ {% for benefit in page.benefits %} +
+
+ +
+

{{ benefit.title }}

+

{{ benefit.desc }}

+
+ {% endfor %} +
+
+ {% endif %} + +

{{ page.highlights_title | default: '10 motivi per cui questo evento è unico' }}

{% for highlight in page.highlights %} diff --git a/_pages/eventi/README_EVENTO.md b/_pages/eventi/README_EVENTO.md index 4d2576f..7d9e22b 100644 --- a/_pages/eventi/README_EVENTO.md +++ b/_pages/eventi/README_EVENTO.md @@ -203,6 +203,59 @@ Vedi `_pages/eventi/epppi_rs.md` per un esempio completo di tutti i campi utiliz --- +## Nuove Features (2026) + +### Event Status Badge + +Mostra automaticamente un badge animato in base allo stato dell'evento: + +```yaml +event_status: upcoming # upcoming, past, soldout, last_chance +event_date: 2026-07-29 # YYYY-MM-DD (richiesto per upcoming, opzionale per altri) +``` + +**Valori possibili:** +- `upcoming` — Badge verde "PROSSIMO EVENTO" (con animazione pulse) +- `soldout` — Badge grigio "SOLD OUT" (senza animazione) +- `last_chance` — Badge rosso "ULTIMI POSTI" (con animazione pulse) +- `past` — Nessun badge (evento passato) + +### Benefits Section + +Sezione di cards iconate per mostrare i vantaggi dell'evento: + +```yaml +benefits_title: "Perché partecipare" +benefits: + - icon: "fa-camera" + title: "Fotografia" + desc: "Descrizione breve del benefit" + - icon: "fa-map-marked-alt" + title: "Mapping" + desc: "Descrizione breve del benefit" + # ... minimo 4 benefits raccomandati +``` + +**Note:** +- Minimo 4 benefits raccomandati per layout grid bilanciato +- Usa icone FontAwesome Free (prefisso `fa-`) +- Le cards hanno hover effect con lift e shadow + +### Countdown Timer (Opzionale) + +Timer dinamico per eventi futuri: + +```yaml +event_status: upcoming +event_date: 2026-07-29 # YYYY-MM-DD +``` + +Il countdown appare automaticamente per eventi con `event_status: upcoming` e `event_date` definito. + +**Nota:** Richiede JavaScript `/assets/js/countdown.js` (implementazione futura) + +--- + ## Note Importanti - **Immagini**: Carica le locandine in `assets/images/` diff --git a/_pages/eventi/campo_eg.md b/_pages/eventi/campo_eg.md index fc34137..f846ed6 100644 --- a/_pages/eventi/campo_eg.md +++ b/_pages/eventi/campo_eg.md @@ -1,30 +1,156 @@ --- -layout: page -title: Bit Prepared -description: Campo di competenza per Esploratori e Guide -modified: {} -author: enrico +layout: evento permalink: /eventi/campo-eg/ -category: articles -tags: - - bitprepared - - eg - - specializzazioni -featured: images/esploratori-della-rete.png -published: true ---- +title: Campo di Competenza Esploratori e Guide +subtitle: Tecnologia scout per il digitale +tags: [bitprepared, eg, specializzazioni, campo competenza, esploratori, guide] +modified: 2026-04-21 +image: /assets/images/pages/campo-eg.jpg +event_status: upcoming +event_date: 2026-07-29 +benefits_title: "Perché partecipare al Campo EG" +benefits: + - icon: "fa-camera" + title: "Fotografia Digitale" + desc: "Impara a scattare foto fantastiche con smartphone e fotocamere digitali" + - icon: "fa-map-marked-alt" + title: "Mapping e Orienteering" + desc: "Crea mappe digitali e usa strumenti GPS per avanzate orienteering" + - icon: "fa-mobile-alt" + title: "Sviluppo App Mobile" + desc: "Scopri come funzionano le app e crea la tua prima applicazione" + - icon: "fa-wifi" + title: "Wireless e Reti" + desc: "Capisci come funziona internet e impara a configurare reti wireless" -Cosa è cambiato nello scautismo rispetto al 1907, al primo campo di Brownsea? -Come è cambiato il TUO modo di fare scoutismo, grazie alle tecnologie? -Sei in cammino per la conquista dei brevetti di Animazione grafica e multimediale, Animazione giornalistica e Amico della natura? +target_audience: + - icon: "fa-user-graduate" + text: "Sei un" + highlight: "Esploratore o Guida" + tail: "curioso di tecnologia" + - icon: "fa-laptop-code" + text: "Vuoi imparare" + highlight: "skill digitali" + tail: "da applicare nel tuo reparto" + - icon: "fa-users" + text: "Vuoi incontrare" + highlight: "altri ragazzi e ragazze" + tail: "con la tua passione" + - icon: "fa-certificate" + text: "Vuoi conseguire il" + highlight: "Brevetto Maestro delle Tecnologie" + tail: "" -![Sala computer](/assets/images/pages/campo-eg.jpg) +programma: + - title: "WELCOME DIGITAL" + desc: "Icebreaker tecnologici e presentazione attraverso strumenti digitali innovativi" + - title: "FOTOGRAFIA SCOUT" + desc: "Workshop fotografico: composizione, luce, editing con app e software gratuiti" + - title: "MAPPING ORIENTEERING" + desc: "Creazione mappe digitali e gara di orienteering con GPS e smartphone" + - title: "CODING GAMES" + desc: "Impara a programmare giocando: block coding, logica, algoritmi divertenti" + - title: "WIRELESS LAB" + desc: "Esperimenti pratici con reti wireless, antenna, segnale e comunicazione" + - title: "PROJECT SHOWCASE" + desc: "Presentazione finale dei lavori realizzati durante il campo" -Se vuoi avventurarti nella scoperta delle tecniche scout applicate all'informatica (e dell'informatica applicata alle tecniche scout), allora hai trovato il campo che fa per te! -Avrai la possibilità di utilizzare quello che già sai e di scoprire nuove possibili applicazioni di quello che pensi di conoscere... -Metterai a fuoco la fotografia come un vero fotoreporter, scoprirai come mappare l'ambiente che ti circonda dal palmo della mano, imparerai come gestire il tuo blog e...potrai contribuire allo sviluppo di una app utile a tutti gli EG d'Italia! -Google, social network, blog, connessioni wireless al campo, non saranno più un tabù per lo scautismo, mantenendo però lo stile che ci contraddistingue! -Potrai diventare anche tu molto geek (o molto nerd, se geek lo sei già!). +highlights: + - "L'unico campo che unisce SCOUTISMO e TECHNOLOGY" + - "Brevetto Maestro delle Tecnologie riconosciuto a livello nazionale" + - "Staff con anni di esperienza in campo educativo digitale" + - "Tutte le attività sono progettate per essere trasferibili nel reparto" + - "Kit di strumenti digitali da portare a casa" + - "Base scout immersa nella natura, perfetta per attività outdoor" + - "Max 20 partecipanti per un'esperienza di qualità" + - "Equilibrio perfetto tra momenti tecnici e vita scout" + - "Networking con altri EG da tutta Italia" + - "Diventerai punto di riferimento digitale nel tuo reparto" + +outcomes: + - "Brevetto Maestro delle Tecnologie conseguito" + - "Kit di strumenti digitali pratici per il reparto" + - "Competenze fotografiche e editing base" + - "Capacità di creare mappe digitali e usare GPS" + - "Nozioni base di programmazione e coding" + - "Consapevolezza sull'uso sicuro di internet e reti wireless" + - "Contatti e network con altri EG tech-enthusiast" + +hero: + title: "Campo di Competenza Esploratori e Guide" + subtitle: "Tecnologia scout per il digitale" + location: "Costigiola" + date: "29 Luglio - 2 Agosto 2026" + target: "Esploratori e Guide AGESCI" + +cta: + primary: + url: "https://buonacaccia.net/Event.aspx?e=24769" + text: "ISCRIVITI SUBITO - SOLO 20 POSTI" + secondary: + url: "https://buonacaccia.net/Event.aspx?e=24769" + text: "PRENOTA IL TUO POSTO SU BUONACACCIA.NET" +logistica: + quando: + icon: "fa-calendar" + label: "Quando" + date: "29 Luglio - 2 Agosto 2026" + arrivo: "29/7 pomeriggio" + partenza: "2/8 mattina" + dove: + icon: "fa-map-marker" + label: "Dove" + citta: "Costigiola" + luogo: "Base Scout Costigiola" + per_chi: + icon: "fa-users" + label: "Per chi" + text: "Esploratori e Guide AGESCI (11-16 anni)" + posti: + icon: "fa-bullseye" + label: "Posti" + max: 20 + min: 12 + waiting: 5 + come_arrivare: + icon: "fa-car" + label: "Come arrivare" + text: "Info dettagliate verranno inviate agli iscritti. La base è raggiungibile in auto o con i mezzi pubblici fino a Alba." + cosa_portare: + icon: "fa-backpack" + label: "Cosa portare" + items: "Sacco a pelo, Abbigliamento comodo e sportivo, Smartphone/Telefono, Quaderno e penna, Buona volontà :)" +faq: + - q: "L'evento è solo per AGESCI?" + a: "Sì, riservato a Esploratori e Guide AGESCI." + - q: "Servono competenze informatiche pregresse?" + a: "No, il campo è adatto a tutti i livelli. Partiamo dalle basi!" + - q: "Cosa include la quota?" + a: "Vitto, alloggio in base scout, materiali, assicurazione, attività e kit digitale da portare a casa." + - q: "Ci sono requisiti fisici particolari?" + a: "Attività scout normali. Serve solo voglia di partecipare e curiosità." + - q: "Le attività sono all'aperto?" + a: "Sì, alterniamo attività indoor e outdoor sfruttando la bellezza della base." + - q: "Posso annullare? Dubbi su buonacaccia?" + a: "https://buonacaccia.net/problem.aspx?Issue=Refunds" + - q: "Ho altre domande?" + a: "Scrivi a info@bitprepared.it" + +social: + title: "Condividi con il tuo reparto" + description: "Passaparola tra Esploratori e Guide della tua zona. Più siamo, più ci divertiamo!" + hashtags: "#AGESCI #BrancaEG #CampoEG #MaestroTecnologie #BitPrepared #ScoutTech #DigitalScout" +--- + +Cosa è cambiato nello scautismo rispetto al 1907, al primo campo di Brownsea? +Come è cambiato il TUO modo di fare scoutismo, grazie alle tecnologie? +Sei in cammino per la conquista dei brevetti di Animazione grafica e multimediale, Animazione giornalistica e Amico della natura? + +Se vuoi avventurarti nella scoperta delle tecniche scout applicate all'informatica (e dell'informatica applicata alle tecniche scout), allora hai trovato il campo che fa per te! +Avrai la possibilità di utilizzare quello che già sai e di scoprire nuove possibili applicazioni di quello che pensi di conoscere... +Metterai a fuoco la fotografia come un vero fotoreporter, scoprirai come mappare l'ambiente che ti circonda dal palmo della mano, imparerai come gestire il tuo blog e...potrai contribuire allo sviluppo di una app utile a tutti gli EG d'Italia! +Google, social network, blog, connessioni wireless al campo, non saranno più un tabù per lo scautismo, mantenendo però lo stile che ci contraddistingue! +Potrai diventare anche tu molto geek (o molto nerd, se geek lo sei già!). diff --git a/_pages/eventi/stage.md b/_pages/eventi/stage.md index d985fa6..6674ca0 100644 --- a/_pages/eventi/stage.md +++ b/_pages/eventi/stage.md @@ -1,30 +1,160 @@ --- -title: Vivere ed educare nell'era digitale -subtitle: digito ergo sum -published: true -layout: page -description: Stage per capi 2018 -modified: 2016-09-24 -author: bitprepared -category: articles -tags: - - bitprepared - - stage - - specializzazioni -featured: images/pages/stage.jpg +layout: evento permalink: /eventi/stage/ +title: Stage per Capi - Vivere ed educare nell'era digitale +subtitle: digito ergo sum +tags: [bitprepared, stage, specializzazioni, formazione capi, digitale] +modified: 2026-04-21 +image: /assets/images/pages/stage.jpg +event_status: past + +benefits_title: "Perché partecipare allo Stage" +benefits: + - icon: "fa-chalkboard-teacher" + title: "Metodologie Educative" + desc: "Apprendi metodologie per educare i ragazzi all'uso consapevole del digitale" + - icon: "fa-users" + title: "Comprendere i Digital Natives" + desc: "Capisci come pensano e comunicano i ragazzi nativi digitali" + - icon: "fa-balance-scale" + title: "Etica Digitale" + desc: "Strumenti per affrontare temi come cyberbullismo, privacy, fake news" + - icon: "fa-tools" + title: "Strumenti Pratici" + desc: "Kit di attività e strumenti da usare subito nella tua unità" + +target_audience: + - icon: "fa-user-tie" + text: "Sei un" + highlight: "capo/unità" + tail: "AGESCI" + - icon: "fa-child" + text: "Vuoi comprendere meglio" + highlight: "il mondo digitale" + tail: "dei tuoi ragazzi" + - icon: "fa-graduation-cap" + text: "Vuoi acquisire" + highlight: "competenze educative" + tail: "per l'era digitale" + - icon: "fa-hands-helping" + text: "Vuoi condividere" + highlight: "best practices" + tail: "con altri capi" + +programma: + - title: "IMMERSIONE DIGITALE" + desc: "Esperienza diretta dei mondi digitali dei ragazzi: social, gaming, contenuti" + - title: "PSICOLOGIA DELL'ETA' EVOLUTIVA" + desc: "Come si sviluppa la mente digitale nei ragazzi E/G, R/S" + - title: "RISCHI E OPPORTUNITA'" + desc: "Cyberbullismo, dipendenze, ma anche opportunità educative del digitale" + - title: "STRUMENTI EDUCATIVI" + desc: "Kit di attività concrete da proporre nella tua unità" + - title: "LABORATORIO PRATICO" + desc: "Progettazione di percorsi educativi personalizzati per la tua unità" + - title: "RETENTION E CONFRONTO" + desc: "Momenti di condivisione e creazione rete tra capi partecipanti" + +highlights: + - "L'unico stage che unisce PEDAGOGIA e DIGITALE in ambito scout" + - "Staff con esperienza pluriennale in formazione capi" + - "Kit di 20+ attività pronte all'uso per la tua unità" + - "Equilibrio tra momenti formativi e vita scout" + - "Base scout immersa nella natura, ideale per riflessione e confronto" + - "Max 15 partecipanti per favorire il dialogo" + - "Attestato di partecipazione riconosciuto" + - "Networking con capi da tutta Italia" + - "Materiale didattico completo da portare a casa" + - "Momenti di spiritualità legati al tema del digitale" + +outcomes: + - "Consapevolezza su come il digitale influenza l'educazione scout" + - "Kit di 20+ attività educative pronte all'uso" + - "Competenze per affrontare cyberbullismo e rischi online" + - "Strumenti per guidare i ragazzi all'uso consapevole del digitale" + - "Capacità di progettare percorsi educativi digitali" + - "Network di capi con cui condividere esperienze" + - "Attestato di formazione continua riconosciuto" + +hero: + title: "Vivere ed educare nell'era digitale" + subtitle: "Come essere fratelli maggiori in un mondo che non conosciamo bene?" + location: "Costigiola" + date: "15-17 Settembre 2018" + target: "Capi e Vicecapi Unità AGESCI" + +cta: + primary: + url: "https://buonacaccia.net" + text: "SCOPRI I PROSSIMI EVENTI" + secondary: + url: "mailto:info@bitprepared.it" + text: "CONTATTACI PER INFO" + +logistica: + quando: + icon: "fa-calendar" + label: "Quando" + date: "15-17 Settembre 2018" + arrivo: "15/9 sera" + partenza: "17/9 pomeriggio" + dove: + icon: "fa-map-marker" + label: "Dove" + citta: "Costigiola" + luogo: "Base Scout Costigiola" + per_chi: + icon: "fa-users" + label: "Per chi" + text: "Capi e Vicecapi Unità AGESCI" + posti: + icon: "fa-bullseye" + label: "Posti" + max: 15 + min: 8 + waiting: 3 + come_arrivare: + icon: "fa-car" + label: "Come arrivare" + text: "Info dettagliate verranno inviate agli iscritti. La base è raggiungibile in auto." + cosa_portare: + icon: "fa-backpack" + label: "Cosa portare" + items: "Sacco a pelo, Abbigliamento comodo, Quaderno e penna, Laptop/Tablet se possibile, Buona volontà :)" + +faq: + - q: "L'evento è solo per AGESCI?" + a: "Sì, riservato a Capi e Vicecapi Unità AGESCI." + - q: "Servono competenze informatiche?" + a: "No, il focus è pedagogico ed educativo, non tecnico." + - q: "Cosa include la quota?" + a: "Vitto, alloggio in base scout, materiali, assicurazione, kit didattico, attestato." + - q: "L'attestato è valido per la formazione?" + a: "Sì, viene rilasciato attestato di partecipazione utilizzabile per la formazione continua." + - q: "Le attività sono all'aperto?" + a: "Sì, alterniamo momenti formativi indoor e attività outdoor scout." + - q: "Posso annullare? Dubbi su buonacaccia?" + a: "https://buonacaccia.net/problem.aspx?Issue=Refunds" + - q: "Ho altre domande?" + a: "Scrivi a info@bitprepared.it" + +social: + title: "Condividi con la tua zona" + description: "Passaparola tra capi della tua zona. Più siamo, più ricco il confronto!" + hashtags: "#AGESCI #FormazioneCapi #StageDigitale #BitPrepared #EducazioneDigitale #Scout" --- -Nella splendida cornice della [base di Costigiona](costigiola.it), da tre anni si tiene uno stage per capi sul tema delle tecnologie digitali applicate allo scautismo e sulla comunicazione 2.0. Il tema è sicuramente scottante all'interno della nostra associazione: come coniugare le nuove tecnologie con lo scautismo? Cosa attirra così tanto i ragazzi in questi mondi virtuali che ci sembrano così lontani? Cosa cambia nei rapporti personali? Tanti interrogativi e spunti che ci portano però al nocciolo della questione ben individuata dall'[articolo di PE](http://pe.agesci.it/digitale-uno-strumento-un-ambiente/) del mese scorso: come essere i loro fratelli maggiori in un mondo che noi neanche conosciamo bene? -In questi tre anni in cui lo stage si è tenuto, abbiamo mostrato l'uso creativo della tecnologia nello scautismo, attraverso programmi ed applicazioni da utilizzare durante le attività, per specialità e brevetti e ... poerché no?.... anche per organizzare campi, route o hike. Ci siamo confrontati cercando insieme una strada in questi strani mondi digitali che i nostri ragazzi abitano con una naturalezza, mentre per noi sono sconosciuti e a volte ... siamo onesti... ci fanno anche un po'paura e tendiamo a demonizzarli. +Nella splendida cornice della [base di Costigiola](http://www.costigiola.it), da tre anni si tiene uno stage per capi sul tema delle tecnologie digitali applicate allo scautismo e sulla comunicazione 2.0. Il tema è sicuramente scottante all'interno della nostra associazione: come coniugare le nuove tecnologie con lo scautismo? Cosa attira così tanto i ragazzi in questi mondi virtuali che ci sembrano così lontani? Cosa cambia nei rapporti personali? Tanti interrogativi e spunti che ci portano però al nocciolo della questione ben individuata dall'[articolo di PE](http://pe.agesci.it/digitale-uno-strumento-un-ambiente/) del mese scorso: come essere i loro fratelli maggiori in un mondo che noi neanche conosciamo bene? + +In questi tre anni in cui lo stage si è tenuto, abbiamo mostrato l'uso creativo della tecnologia nello scautismo, attraverso programmi ed applicazioni da utilizzare durante le attività, per specialità e brevetti e ... perché no?.... anche per organizzare campi, route o hike. Ci siamo confrontati cercando insieme una strada in questi strani mondi digitali che i nostri ragazzi abitano con una naturalezza, mentre per noi sono sconosciuti e a volte ... siamo onesti... ci fanno anche un po' paura e tendiamo a demonizzarli. -La pattugli Bit Prepared con lo stage porta avanti una ricerca condivisa del significato di essere scout nell'era del Web 2.0. Esistono hardware che ci permettono di essere essenziali, laboriosi ed economi; cosi come esiste un modo di usare software e hardware in modo etico. Anche la nostra legge scout può essere riletta in chiave 2.0! +La pattuglia Bit Prepared con lo stage porta avanti una ricerca condivisa del significato di essere scout nell'era del Web 2.0. Esistono hardware che ci permettono di essere essenziali, laboriosi ed economi; così come esiste un modo di usare software e hardware in modo etico. Anche la nostra legge scout può essere riletta in chiave 2.0! Cosa ci fanno i ragazzi con quegli schermi onnipresenti? Cerchiamo una risposta nel più classico dei racconti giungla: [La caccia di Kaa](https://100giungla.wordpress.com/tag/la-caccia-di-kaa/); nel racconto ad attrarre Mowgli è la possibilità di vivere senza regole, sarà poi Kaa a ricondurlo nella strada più opportuna. A noi capi quindi spetta il compito di educare ad una libertà che nasce dalla condivisione delle conoscenze, facendo loro notare i rischi di un uso senza regole e senza etica. -Dobbiamo essere testimoni di cosa significa essere un cittadino attivo, essere al servizio degli altri e testimoni di fede all'interno di questo digitale/reale che i nostri ragazzi abitano consciamente o inconsciamente. +Dobbiamo essere testimoni di cosa significa essere un cittadino attivo, essere al servizio degli altri e testimoni di fede all'interno di questo digitale/reale che i nostri ragazzi abitano consciamente o inconsciamente. -Per capi impegnati come noi, sarà certo uno sforzo in più partecipare da un ennesimo momento formativo, ma la responsabilità di tenersi al passo cone le esigenze educative è una sfida che ci viene proposta e come capi non possiamo ignorarla. +Per capi impegnati come noi, sarà certo uno sforzo in più partecipare da un ennesimo momento formativo, ma la responsabilità di tenersi al passo con le esigenze educative è una sfida che ci viene proposta e come capi non possiamo ignorarla. Vi aspettiamo perciò numerosi, certi che i temi non smetteranno di essere caldi e attendendovi proprio per quella formazione continua così importante per il nostro servizio. diff --git a/assets/css/evento-custom.css b/assets/css/evento-custom.css index cd821e8..88230b8 100644 --- a/assets/css/evento-custom.css +++ b/assets/css/evento-custom.css @@ -268,6 +268,127 @@ text-shadow: 0 1px 2px rgba(0,0,0,0.1); } +/* Event Status Badge */ +.evento-badge { + text-align: center; + padding: 15px 30px; + margin: 20px auto 40px; + border-radius: 50px; + font-weight: 700; + font-size: 1.1em; + max-width: 400px; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.evento-badge-upcoming { + background: linear-gradient(135deg, #00b894 0%, #00cec9 100%); + color: white; + box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4); +} + +.evento-badge-soldout { + background: linear-gradient(135deg, #636e72 0%, #2d3436 100%); + color: white; + animation: none; +} + +.evento-badge-lastchance { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); + color: white; + box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); +} + +/* Benefits Section */ +.evento-benefits-section { + margin: 40px 0; + text-align: center; +} + +.evento-benefits-section h2 { + color: #667eea !important; + font-size: 2em; + margin-bottom: 30px; + text-shadow: 0 1px 2px rgba(0,0,0,0.1); +} + +.evento-benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + margin-top: 30px; +} + +.evento-benefit-card { + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + padding: 30px; + border-radius: 15px; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.evento-benefit-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + border-color: #667eea; +} + +.evento-benefit-icon { + font-size: 3em; + margin-bottom: 20px; + color: #667eea; +} + +.evento-benefit-card h3 { + color: #2c3e50; + margin-bottom: 15px; + font-size: 1.3em; +} + +.evento-benefit-card p { + color: #636e72; + line-height: 1.6; +} + +/* Countdown Timer */ +.evento-countdown { + display: flex; + justify-content: center; + gap: 30px; + margin: 30px auto; + max-width: 600px; + flex-wrap: wrap; +} + +.evento-countdown-item { + text-align: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 20px 30px; + border-radius: 15px; + min-width: 120px; + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); +} + +.evento-countdown-number { + display: block; + font-size: 2.5em; + font-weight: 700; + color: white; + line-height: 1; +} + +.evento-countdown-label { + display: block; + font-size: 0.9em; + color: rgba(255, 255, 255, 0.9); + margin-top: 5px; + text-transform: uppercase; +} + /* Mobile Responsive */ @media (max-width: 768px) { .evento-hero { @@ -297,4 +418,36 @@ .evento-program-item { padding: 20px; } + + .evento-benefits-grid { + grid-template-columns: 1fr; + } + + .evento-countdown { + gap: 15px; + } + + .evento-countdown-item { + min-width: 90px; + padding: 15px 20px; + } + + .evento-countdown-number { + font-size: 2em; + } + + .evento-badge { + font-size: 1em; + padding: 12px 20px; + } +} + +@media (max-width: 480px) { + .evento-benefit-icon { + font-size: 2.5em; + } + + .evento-benefit-card { + padding: 20px; + } } From 2a4e606dfa753e262d1efdd65a3dd0005b3f5eb1 Mon Sep 17 00:00:00 2001 From: Stefano Tamagnini Date: Wed, 22 Apr 2026 07:15:11 +0000 Subject: [PATCH 02/39] Implement Scout Tech Modern redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Sostituisce skel framework con custom CSS system - Aggiunge JetBrains Mono + Inter typography - Implementa responsive grid system (mobile/tablet/desktop) - Aggiunge scroll animations e micro-interactions - Fix broken links (/chi/ → /about/, /campi/ → /eventi/) - Backup vecchio CSS in assets/css/legacy/ - Nuovi file: scout-tech.css, scout-tech-mobile.css, scroll-animations.js - Aggiorna index.html con hero section e cards layout - Aggiorna default.html con nuova navigation e footer --- _layouts/default.html | 109 +++--- assets/css/{ => legacy}/evento-custom.css | 0 assets/css/{ => legacy}/skel-noscript.css | 0 assets/css/{ => legacy}/style-1000px.css | 0 assets/css/{ => legacy}/style-desktop.css | 0 assets/css/{ => legacy}/style-mobile.css | 0 assets/css/{ => legacy}/style.css | 0 assets/css/scout-tech-mobile.css | 183 ++++++++++ assets/css/scout-tech.css | 398 ++++++++++++++++++++++ assets/js/scroll-animations.js | 110 ++++++ index.html | 107 +++--- 11 files changed, 796 insertions(+), 111 deletions(-) rename assets/css/{ => legacy}/evento-custom.css (100%) rename assets/css/{ => legacy}/skel-noscript.css (100%) rename assets/css/{ => legacy}/style-1000px.css (100%) rename assets/css/{ => legacy}/style-desktop.css (100%) rename assets/css/{ => legacy}/style-mobile.css (100%) rename assets/css/{ => legacy}/style.css (100%) create mode 100644 assets/css/scout-tech-mobile.css create mode 100644 assets/css/scout-tech.css create mode 100644 assets/js/scroll-animations.js diff --git a/_layouts/default.html b/_layouts/default.html index 0d3cfa9..6764073 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,81 +1,62 @@ - - + {% seo %} - + + {% if page.tags %} {% endif %} - - - - - - - - + + + + + + + + + - - - - {{ content }} - - -
-
-
-
#buoncittadino #servizio #fede
-
+ +
+ + + {{ content }} - - + + - - + + diff --git a/assets/css/evento-custom.css b/assets/css/legacy/evento-custom.css similarity index 100% rename from assets/css/evento-custom.css rename to assets/css/legacy/evento-custom.css diff --git a/assets/css/skel-noscript.css b/assets/css/legacy/skel-noscript.css similarity index 100% rename from assets/css/skel-noscript.css rename to assets/css/legacy/skel-noscript.css diff --git a/assets/css/style-1000px.css b/assets/css/legacy/style-1000px.css similarity index 100% rename from assets/css/style-1000px.css rename to assets/css/legacy/style-1000px.css diff --git a/assets/css/style-desktop.css b/assets/css/legacy/style-desktop.css similarity index 100% rename from assets/css/style-desktop.css rename to assets/css/legacy/style-desktop.css diff --git a/assets/css/style-mobile.css b/assets/css/legacy/style-mobile.css similarity index 100% rename from assets/css/style-mobile.css rename to assets/css/legacy/style-mobile.css diff --git a/assets/css/style.css b/assets/css/legacy/style.css similarity index 100% rename from assets/css/style.css rename to assets/css/legacy/style.css diff --git a/assets/css/scout-tech-mobile.css b/assets/css/scout-tech-mobile.css new file mode 100644 index 0000000..95c18dd --- /dev/null +++ b/assets/css/scout-tech-mobile.css @@ -0,0 +1,183 @@ +/* + * Scout Tech Modern - Mobile Overrides + * Breakpoints: Mobile < 768px, Tablet 768-1024px + */ + +@media (max-width: 768px) { + /* ===== TYPOGRAPHY ===== */ + h1 { font-size: 2rem; } + h2 { font-size: 1.75rem; } + h3 { font-size: 1.5rem; } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1.25rem; + white-space: normal; + border-right: none; + animation: none; + } + + /* ===== HERO SECTION ===== */ + .hero { + padding: var(--spacing-lg) var(--spacing-sm); + } + + .hero-logo { + max-width: 200px; + } + + /* ===== NAVIGATION - BOTTOM BAR ===== */ + .navbar { + position: fixed; + bottom: 0; + top: auto; + border-top: var(--border-width) solid var(--color-secondary); + border-bottom: none; + padding: var(--spacing-sm); + } + + .navbar-content { + justify-content: center; + } + + .navbar-brand { + display: none; + } + + .navbar-nav { + gap: var(--spacing-sm); + width: 100%; + justify-content: space-around; + } + + .navbar-nav a { + font-size: 0.875rem; + padding: var(--spacing-xs); + flex-direction: column; + align-items: center; + } + + /* ===== EVENTS GRID - SINGLE COLUMN ===== */ + .events-grid { + grid-template-columns: 1fr; + gap: var(--spacing-md); + padding-bottom: 80px; /* Space for bottom nav */ + } + + /* ===== EVENT CARDS ===== */ + .evento-card { + animation: none; + opacity: 1; + transform: none; + } + + .evento-card img { + height: 180px; + } + + .evento-content { + padding: var(--spacing-sm); + } + + .evento-card h2 { + font-size: 1.25rem; + } + + /* ===== BUTTONS ===== */ + .btn-primary { + width: 100%; + padding: var(--spacing-sm); + } + + /* ===== FOOTER ===== */ + footer { + padding: var(--spacing-md) var(--spacing-sm); + padding-bottom: 100px; /* Extra space for bottom nav */ + } + + .footer-social a { + display: block; + margin: var(--spacing-xs) 0; + } + + /* ===== CONTAINER ===== */ + .container { + padding: 0 var(--spacing-sm); + } + + /* ===== SPACING ADJUSTMENTS ===== */ + main { + padding-top: 0; + } +} + +/* ===== TABLET TWEAKS (768px - 1024px) ===== */ +@media (min-width: 768px) and (max-width: 1024px) { + .events-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-md); + } + + .hero-title { + font-size: 2.25rem; + } + + .navbar { + position: fixed; + top: 0; + bottom: auto; + } + + .navbar-brand { + display: block; + } + + footer { + padding-bottom: var(--spacing-lg); + } +} + +/* ===== TOUCH TARGETS ===== */ +@media (hover: none) and (pointer: coarse) { + .btn-primary, + .navbar-nav a, + a { + min-height: 44px; + min-width: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .evento-card:hover { + transform: none; + } + + .evento-card:active { + transform: scale(0.98); + } +} + +/* ===== PREFERENCES ===== */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .evento-card { + animation: none; + opacity: 1; + transform: none; + } + + .hero-subtitle { + animation: none; + } +} diff --git a/assets/css/scout-tech.css b/assets/css/scout-tech.css new file mode 100644 index 0000000..4e6309d --- /dev/null +++ b/assets/css/scout-tech.css @@ -0,0 +1,398 @@ +/* + * Scout Tech Modern - BitPrepared.it + * Design System: Scout Tech Modern + * Palette: Verde foresta + Matrix rivisitato + Ciano accents + */ + +/* ===== CSS VARIABLES ===== */ +:root { + /* Colors */ + --color-primary: #0a3d0a; + --color-secondary: #1a7f1a; + --color-accent: #00d9ff; + --color-dark: #0a1f0a; + --color-light: #e8f5e8; + --color-white: #ffffff; + --color-text: #1a1a1a; + --color-text-muted: #666666; + + /* Typography */ + --font-display: 'JetBrains Mono', 'Courier New', monospace; + --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + + /* Spacing */ + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 1.5rem; + --spacing-lg: 2rem; + --spacing-xl: 4rem; + + /* Layout */ + --container-max-width: 1200px; + --border-radius: 8px; + --border-width: 1px; + + /* Shadows */ + --shadow-sm: 0 2px 8px rgba(10, 63, 10, 0.1); + --shadow-md: 0 4px 16px rgba(10, 63, 10, 0.15); + --shadow-lg: 0 8px 24px rgba(26, 127, 26, 0.3); + + /* Transitions */ + --transition-fast: 150ms ease-out; + --transition-base: 300ms ease-out; + --transition-slow: 600ms ease-out; +} + +/* ===== RESET & BASE ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + font-weight: 400; + line-height: 1.6; + color: var(--color-text); + background: linear-gradient(135deg, var(--color-dark) 0%, #000 100%); + min-height: 100vh; + overflow-x: hidden; +} + +/* ===== TYPOGRAPHY ===== */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 700; + line-height: 1.2; + color: var(--color-primary); +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } + +p { + margin-bottom: var(--spacing-sm); +} + +a { + color: var(--color-secondary); + text-decoration: none; + transition: color var(--transition-fast); + position: relative; +} + +a::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: var(--color-accent); + transition: width var(--transition-base); +} + +a:hover::after { + width: 100%; +} + +a:hover { + color: var(--color-accent); +} + +/* ===== LAYOUT ===== */ +.container { + width: 100%; + max-width: var(--container-max-width); + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +main { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* ===== HERO SECTION ===== */ +.hero { + text-align: center; + padding: var(--spacing-xl) var(--spacing-md); + background: radial-gradient(circle at center, var(--color-primary) 0%, var(--color-dark) 70%); + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); + opacity: 0.3; + pointer-events: none; +} + +.hero-content { + position: relative; + z-index: 1; +} + +.hero-logo { + max-width: 300px; + height: auto; + margin: 0 auto var(--spacing-lg); + display: block; +} + +.hero-title { + font-size: 3rem; + color: var(--color-light); + margin-bottom: var(--spacing-sm); + font-family: var(--font-display); + font-weight: 700; +} + +.hero-subtitle { + font-size: 1.5rem; + color: var(--color-accent); + font-family: var(--font-display); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + border-right: 3px solid var(--color-accent); + animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; +} + +@keyframes typing { + from { width: 0 } + to { width: 100% } +} + +@keyframes blink-caret { + from, to { border-color: transparent } + 50% { border-color: var(--color-accent) } +} + +/* ===== EVENTS GRID ===== */ +.events-section { + padding: var(--spacing-xl) var(--spacing-md); + flex: 1; +} + +.events-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: var(--spacing-lg); + max-width: var(--container-max-width); + margin: 0 auto; +} + +/* ===== EVENT CARDS ===== */ +.evento-card { + background: var(--color-white); + border: var(--border-width) solid var(--color-secondary); + border-radius: var(--border-radius); + overflow: hidden; + transition: transform var(--transition-base), box-shadow var(--transition-base); + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.6s ease-out forwards; +} + +.evento-card:nth-child(1) { animation-delay: 0.1s; } +.evento-card:nth-child(2) { animation-delay: 0.2s; } +.evento-card:nth-child(3) { animation-delay: 0.3s; } + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.evento-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.evento-card img { + width: 100%; + height: 200px; + object-fit: cover; + transition: transform var(--transition-base); +} + +.evento-card:hover img { + transform: scale(1.05); +} + +.evento-content { + padding: var(--spacing-md); +} + +.evento-card h2 { + font-size: 1.5rem; + color: var(--color-primary); + margin-bottom: var(--spacing-sm); +} + +.evento-card p { + color: var(--color-text-muted); + margin-bottom: var(--spacing-md); + line-height: 1.5; +} + +/* ===== BUTTONS ===== */ +.btn-primary { + display: inline-block; + padding: var(--spacing-sm) var(--spacing-md); + background: var(--color-secondary); + color: var(--color-white); + border: none; + border-radius: var(--border-radius); + font-family: var(--font-display); + font-weight: 600; + text-align: center; + cursor: pointer; + transition: all var(--transition-fast); + position: relative; + overflow: hidden; +} + +.btn-primary::after { + display: none; +} + +.btn-primary:hover { + background: var(--color-primary); + transform: scale(1.02); + box-shadow: var(--shadow-md); +} + +.btn-primary:active { + transform: scale(0.98); +} + +/* ===== NAVIGATION ===== */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(10, 31, 10, 0.95); + backdrop-filter: blur(10px); + border-bottom: var(--border-width) solid var(--color-secondary); + z-index: 1000; + padding: var(--spacing-sm) var(--spacing-md); +} + +.navbar-content { + max-width: var(--container-max-width); + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar-brand { + font-family: var(--font-display); + font-weight: 700; + font-size: 1.25rem; + color: var(--color-light); +} + +.navbar-brand::after { + display: none; +} + +.navbar-nav { + display: flex; + gap: var(--spacing-md); + list-style: none; +} + +.navbar-nav a { + color: var(--color-light); + font-weight: 500; + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--border-radius); + transition: background var(--transition-fast), color var(--transition-fast); +} + +.navbar-nav a::after { + display: none; +} + +.navbar-nav a:hover { + background: rgba(26, 127, 26, 0.2); + color: var(--color-accent); +} + +/* ===== FOOTER ===== */ +footer { + background: var(--color-dark); + border-top: var(--border-width) solid var(--color-secondary); + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; + color: var(--color-light); +} + +footer a { + color: var(--color-accent); + margin: 0 var(--spacing-sm); +} + +.footer-social { + margin-bottom: var(--spacing-md); +} + +.footer-links { + margin-bottom: var(--spacing-sm); +} + +.footer-copy { + font-size: 0.875rem; + color: var(--color-text-muted); +} + +/* ===== UTILITY CLASSES ===== */ +.text-center { text-align: center; } +.text-muted { color: var(--color-text-muted); } +.mt-lg { margin-top: var(--spacing-lg); } +.mb-lg { margin-bottom: var(--spacing-lg); } + +/* ===== SCROLL REVEAL ===== */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.reveal.active { + opacity: 1; + transform: translateY(0); +} + +/* ===== RESPONSIVE BASE ===== */ +@media (max-width: 1024px) { + .events-grid { + grid-template-columns: repeat(2, 1fr); + } + + .hero-title { + font-size: 2.5rem; + } +} diff --git a/assets/js/scroll-animations.js b/assets/js/scroll-animations.js new file mode 100644 index 0000000..e92be58 --- /dev/null +++ b/assets/js/scroll-animations.js @@ -0,0 +1,110 @@ +/** + * Scout Tech Modern - Scroll Animations + * Vanilla JavaScript with IntersectionObserver + * Zero dependencies, lightweight and performant + */ + +(function() { + 'use strict'; + + // ===== INTERSECTION OBSERVER FOR SCROLL REVEAL ===== + const observerOptions = { + root: null, // viewport + rootMargin: '0px', + threshold: 0.1 // trigger when 10% visible + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('active'); + // Optional: stop observing after reveal + // observer.unobserve(entry.target); + } + }); + }, observerOptions); + + // Observe all elements with .reveal class + const revealElements = document.querySelectorAll('.reveal'); + revealElements.forEach(el => observer.observe(el)); + + // ===== SMOOTH SCROLL FOR ANCHOR LINKS ===== + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + const href = this.getAttribute('href'); + if (href === '#') return; + + const target = document.querySelector(href); + if (target) { + e.preventDefault(); + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // ===== PARALLAX EFFECT FOR HERO ===== + let ticking = false; + window.addEventListener('scroll', () => { + if (!ticking) { + window.requestAnimationFrame(() => { + const hero = document.querySelector('.hero'); + if (hero) { + const scrolled = window.pageYOffset; + const parallaxSpeed = 0.5; + hero.style.backgroundPositionY = `${scrolled * parallaxSpeed}px`; + } + ticking = false; + }); + ticking = true; + } + }, { passive: true }); + + // ===== TYPING EFFECT CHECK ===== + // Note: The typing effect is now pure CSS in hero-subtitle + // This function ensures it resets properly when element comes into view + const heroSubtitle = document.querySelector('.hero-subtitle'); + if (heroSubtitle) { + const subtitleObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Force animation restart + entry.target.style.animation = 'none'; + entry.target.offsetHeight; // Trigger reflow + entry.target.style.animation = 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite'; + } + }); + }, { threshold: 0.5 }); + + subtitleObserver.observe(heroSubtitle); + } + + // ===== PREFERS REDUCED MOTION ===== + // Respect user's motion preferences + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + + if (prefersReducedMotion.matches) { + // Disable all animations + document.documentElement.style.setProperty('--transition-fast', '0ms'); + document.documentElement.style.setProperty('--transition-base', '0ms'); + document.documentElement.style.setProperty('--transition-slow', '0ms'); + + // Show all reveal elements immediately + document.querySelectorAll('.reveal').forEach(el => { + el.classList.add('active'); + }); + } + + // Listen for changes in preference + prefersReducedMotion.addEventListener('change', () => { + location.reload(); + }); + + // ===== CONSOLE SIGNATURE ===== + console.log('%c Bit Prepared ', 'background: #1a7f1a; color: #fff; padding: 5px 10px; border-radius: 3px;'); + console.log('%c Digito ergo sum ', 'background: #00d9ff; color: #0a1f0a; padding: 5px 10px; border-radius: 3px;'); + console.log('https://www.bitprepared.it'); + +})(); diff --git a/index.html b/index.html index 52a218c..fde33ad 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,72 @@ --- -title: benvenuti +title: Bit Prepared - Digito ergo sum layout: default tags: [agesci,bitprepared,scout,informatica,specializzazioni,competenza,maestro delle tecnologie, esperto del compiuter, digital life] --- - -