github-copilot-dev-days-2026/index.html at main · DotNetCodeIT/github-copilot-dev-days-2026 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#09090b">
  <title>Event Gallery</title>
  <link rel="stylesheet" href="css/style.css">
  <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=Inter:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">
</head>

<body>

  <!-- Hero Section -->
  <header id="hero" class="hero">
    <div id="hero-bg" class="hero-bg"></div>
    <div class="hero-overlay"></div>
    <div class="hero-particles"></div>
    <div class="hero-content">
      <h1 id="event-title">Event Gallery</h1>
      <p id="event-date" class="event-date"></p>
      <p id="event-description" class="event-description"></p>
      <div id="hero-stats" class="hero-stats" style="display:none;">
        <div class="hero-stat">
          <div id="stat-photos" class="hero-stat-number">0</div>
          <div class="hero-stat-label">Foto</div>
        </div>
        <div class="hero-stat">
          <div id="stat-slides" class="hero-stat-number">0</div>
          <div class="hero-stat-label">Slide</div>
        </div>
      </div>
    </div>
  </header>

  <!-- Navigation -->
  <nav class="nav">
    <div class="nav-container">
      <a href="#photos-section" class="nav-link active" data-section="photos">
        📷 Foto <span id="nav-photos-badge" class="nav-badge">0</span>
      </a>
      <a href="#slides-section" class="nav-link" data-section="slides">
        📊 Slide <span id="nav-slides-badge" class="nav-badge">0</span>
      </a>
    </div>
  </nav>

  <!-- Photos Section -->
  <section id="photos-section" class="section">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">Galleria Foto</h2>
        <span id="photos-count" class="section-count"></span>
      </div>
      <p id="photos-empty" class="empty-message" style="display:none;">
        <span class="empty-icon">📷</span>
        Nessuna foto disponibile al momento.
      </p>
      <div id="photos-grid" class="photos-grid"></div>
    </div>
  </section>

  <!-- Slides Section -->
  <section id="slides-section" class="section" style="display:none;">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">Slide dell'Evento</h2>
        <span id="slides-count" class="section-count"></span>
      </div>
      <p id="slides-empty" class="empty-message" style="display:none;">
        <span class="empty-icon">📊</span>
        Nessune slide disponibili al momento.
      </p>
      <div id="slides-grid" class="slides-grid"></div>
    </div>
  </section>

  <!-- Lightbox -->
  <div id="lightbox" class="lightbox" style="display:none;">
    <div class="lightbox-toolbar">
      <div class="lightbox-toolbar-left">
        <span id="lightbox-counter" class="lightbox-counter"></span>
      </div>
      <button class="lightbox-close" aria-label="Chiudi">&times;</button>
    </div>
    <button class="lightbox-prev" aria-label="Precedente">&#10094;</button>
    <button class="lightbox-next" aria-label="Successivo">&#10095;</button>
    <div class="lightbox-content">
      <img id="lightbox-img" src="" alt="">
    </div>
    <div class="lightbox-bottom">
      <p id="lightbox-caption" class="lightbox-caption"></p>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <p id="footer-text">Event Gallery</p>
  </footer>

  <script src="js/app.js"></script>
</body>

</html>