Update index.html

index.html

@@ -1,19 +1,173 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Benvenuti a scuola!</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f4f7f6;
+            color: #333;
+            display: flex;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            width: 100%;
+            max-width: 480px;
+            background: #ffffff;
+            border-radius: 20px;
+            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+            overflow: hidden;
+            padding: 20px;
+            text-align: center;
+        }
+        /* Intestazione */
+        .logo {
+            width: 100%;
+            max-height: 120px;
+            object-fit: contain;
+            margin-bottom: 15px;
+        }
+        h1 {
+            font-size: 22px;
+            color: #2c3e50;
+            margin-bottom: 5px;
+        }
+        p.subtitle {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin-bottom: 20px;
+        }
+        .divider {
+            border: none;
+            height: 1px;
+            background: #eee;
+            margin: 20px 0;
+        }
+        /* Sezione Video Principale */
+        h2 {
+            font-size: 16px;
+            color: #34495e;
+            margin-bottom: 10px;
+            text-align: left;
+        }
+        video.main-video {
+            width: 100%;
+            border-radius: 12px;
+            outline: none;
+            background: #000;
+        }
+        /* Griglia Instagram */
+        .instagram-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .insta-card {
+            background: #fff;
+            border: 1px solid #e1e8ed;
+            border-radius: 10px;
+            overflow: hidden;
+            text-decoration: none;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .insta-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .insta-card img {
+            width: 100%;
+            height: 110px;
+            object-fit: cover;
+        }
+        .insta-card span {
+            font-size: 12px;
+            font-weight: bold;
+            padding: 8px 4px;
+            color: #E1306C;
+            background: #fafafa;
+        }
+        /* Pulsanti Social */
+        .social-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .btn-social {
+            flex: 1;
+            padding: 12px 10px;
+            border-radius: 10px;
+            text-decoration: none;
+            color: white;
+            font-weight: bold;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+        }
+        .btn-instagram { background: #E1306C; }
+        .btn-facebook { background: #1877F2; }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <!-- 1. INTESTAZIONE / LOGO -->
+        <img src="logo_scuola.png" alt="Logo Scuola" class="logo">
+        <h1>Benvenuti nella nostra scuola! 👋</h1>
+        <p class="subtitle">Scansiona, guarda e scopri tutte le nostre attività.</p>
+
+        <hr class="divider">
+
+        <!-- 2. VIDEO PRINCIPALE DEL PERSONAGGINO -->
+        <h2>🌟 Messaggio Principale</h2>
+        <video class="main-video" controls poster="anteprima_personaggio.jpg">
+            <source src="personaggio.mp4" type="video/mp4">
+            Il tuo browser non supporta il tag video.
+        </video>
+
+        <hr class="divider">
+
+        <!-- 3. TRE RIQUADRI PER I VIDEO DI INSTAGRAM -->
+        <h2>📱 I nostri Reel e Video</h2>
+        <div class="instagram-grid">
+            <!-- Riquadro 1 -->
+            <a href="https://www.instagram.com/reel/DRorsPxjf-P/?psln=c3k4cXJtNWh6d254" target="_blank" class="insta-card">
+                <img src="anteprima1.jpg" alt="Video 1">
+                <span>▶ Guarda 1</span>
+            </a>
+            <!-- Riquadro 2 -->
+            <a href="https://www.instagram.com/reel/DRmHmnwjTYx/?dlrf=MWFidHZ4bHNhdHYxZA==" target="_blank" class="insta-card">
+                <img src="anteprima2.jpg" alt="Video 2">
+                <span>▶ Guarda 2</span>
+            </a>
+            <!-- Riquadro 3 -->
+            <a href="https://www.instagram.com/reel/DRmHF-DDYgR/?srtk=OXprY3ZvMDJhYXQ1" target="_blank" class="insta-card">
+                <img src="anteprima3.jpg" alt="Video 3">
+                <span>▶ Guarda 3</span>
+            </a>
+        </div>
+
+        <hr class="divider">
+
+        <!-- 4. PULSANTI SOCIAL -->
+        <h2>🌐 Seguici online</h2>
+        <div class="social-buttons">
+            <a href="https://www.instagram.com/ic_monte_san_michele?vrfl=eDMzeHV6cTFkYThq" target="_blank" class="btn-social btn-instagram">Instagram</a>
+        </div>
+    </div>
+
+</body>
+</html>