Gallery page content

2025-09-11 18:10:39 +03:00
parent 4cf39f48f3
commit 33cd3fd94b
5 changed files with 105 additions and 2 deletions
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -5,6 +5,63 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея » Веб-програмування ПР№1</title>
    <link rel="stylesheet" href="/style.css">
+
+    <script>
+        const gallery = [
+            {
+                image: "/images/hero-image.png",
+                title: "Всім привіт!"
+            },
+            {
+                image: "/images/website-logo.png",
+                title: "Наш логотип"
+            },
+            {
+                image: "/images/about-image.png",
+                title: "Наш офіс"
+            },
+            {
+                image: "/images/team-photo.webp",
+                title: "Наша команда"
+            },
+            {
+                image: "/images/product-image.jpg",
+                title: "Наш продукт"
+            },
+            {
+                image: "/images/event-image.jpg",
+                title: "Подія компанії"
+            },
+        ];
+
+        function loadGallery() {
+            const gallerySection = document.getElementById("gallery");
+
+            gallery.forEach(el => {
+                const galleryItem = document.createElement("a");
+                galleryItem.href = el.image;
+                galleryItem.target = "_blank";
+                galleryItem.className = "gallery-item";
+
+                const img = document.createElement("img");
+                img.src = el.image;
+                img.alt = el.title;
+
+                const title = document.createElement("span");
+                title.className = "gallery-title";
+                title.textContent = el.title;
+
+                galleryItem.appendChild(img);
+                galleryItem.appendChild(title);
+
+                gallerySection.appendChild(galleryItem);
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            loadGallery();
+        });
+    </script>
 </head>
 <body>
    <!-- Navbar -->
@@ -17,5 +74,13 @@
            <a href="/pages/about.html">Про нас</a>
        </div>
    </nav>
+
+    <!-- Content -->
+    <main>
+        <h1>Галерея</h1>
+        <div id="gallery" class="gallery">
+            <!-- Generated dynamically with JS -->
+        </div>
+    </main>
 </body>
 </html>