educational-presentation

Educational Presentation Skill

Quando usare questa skill

• Creare una nuova presentazione interattiva per lezioni scolastiche ITIS
• Aggiungere moduli/slide a una presentazione esistente
• Creare un gioco educativo multiplayer (escape room)
• Scegliere tra approccio CDN (rapido) o Build (scalabile)
• Creare simulatori interattivi (ACL, packet filter, handshake, configuratori)
• Creare quiz interattivi con feedback immediato
• Deploy su GitHub Pages

Stack Standard

Tutte le presentazioni seguono lo stesso stack leggero:

presentazione-ARGOMENTO/
├── index.html              # Entry point + dashboard
├── modulo1.html            # Slide modulo 1
├── modulo2.html            # Slide modulo 2
├── ...
├── quiz.html               # Quiz interattivo
├── package.json            # Solo per dev server locale (opzionale)
└── .github/
    └── workflows/
        └── deploy.yml      # Auto-deploy GitHub Pages

Dipendenze (tutte via CDN, zero build)

<!-- React 18 via CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- Icone -->
<script src="https://unpkg.com/lucide-react@latest/dist/umd/lucide-react.min.js"></script>

<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Design System

Tema Dark Standard

:root {
    --bg-primary: #0f172a;      /* Sfondo principale */
    --bg-secondary: #1e293b;    /* Card, box */
    --bg-tertiary: #334155;     /* Hover, bordi */
    --text-primary: #f1f5f9;    /* Testo principale */
    --text-secondary: #94a3b8;  /* Testo secondario */
    --accent-blue: #3b82f6;     /* Accent primario */
    --accent-green: #10b981;    /* Successo, conferma */
    --accent-orange: #f59e0b;   /* Warning, evidenziazione */
    --accent-red: #ef4444;      /* Errore, pericolo */
    --accent-purple: #8b5cf6;   /* Secondario */
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}