Upload index.html

index.html

@@ -120,6 +120,90 @@
         html[lang="tr"] [data-lang="tr"] {
             display: block;
         }
+
+        /* Lightbox Styles */
+        .lightbox {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.95);
+            z-index: 2000;
+            padding: 2rem;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .lightbox.active {
+            display: flex;
+        }
+
+        .lightbox-content {
+            max-width: 90%;
+            max-height: 80vh;
+            position: relative;
+        }
+
+        .lightbox-img {
+            max-width: 100%;
+            max-height: 80vh;
+            object-fit: contain;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+
+        .lightbox-close {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+            line-height: 1;
+        }
+
+        .lightbox-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 50%;
+        }
+
+        .lightbox-nav:hover {
+            background: var(--primary-turquoise);
+            color: var(--brand-dark);
+        }
+
+        .lightbox-prev {
+            left: -70px;
+        }
+
+        .lightbox-next {
+            right: -70px;
+        }
+
+        @media (max-width: 768px) {
+            .lightbox-nav {
+                width: 40px;
+                height: 40px;
+            }
+
+            .lightbox-prev {
+                left: -10px;
+            }
+
+            .lightbox-next {
+                right: -10px;
+            }
+        }
     </style>
 </head>
 
@@ -146,8 +230,10 @@
                 </span>
             </div>
             <div class="flex space-x-4">
-                <a href="#" class="hover:text-turquoise transition-colors">INSTAGRAM</a>
-                <a href="#" class="hover:text-turquoise transition-colors">LINKEDIN</a>
+                <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')"
+                    class="hover:text-turquoise transition-colors">INSTAGRAM</a>
+                <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')"
+                    class="hover:text-turquoise transition-colors">LINKEDIN</a>
             </div>
         </div>
     </div>
@@ -156,7 +242,7 @@
     <header id="mainHeader" class="sticky top-0 w-full z-50 transition-all duration-500 py-6">
         <div class="container mx-auto px-6 flex justify-between items-center">
             <div class="flex items-center">
-                <a href="#" class="flex items-center gap-3">
+                <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')" class="flex items-center gap-3">
                     <img src="images/logo.png" alt="Logo" class="h-12 w-auto">
 
                     <!--
@@ -515,8 +601,8 @@
                                 <span data-lang="tr">Deniz Manzarasıyla Bütünleşen Rüya Gibi Bir Yaşam</span>
                                 <span data-lang="en">A Dream-like Life Integrated with Sea Views</span>
                             </p>
-                            <a href="#"
-                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
+                            <a href="javascript:void(0)" onclick="openLightbox('noa-terrace')"
+                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
                                 PROJECT</a>
                         </div>
                     </div>
@@ -539,8 +625,8 @@
                                 <span data-lang="tr">Mavi Sonsuzluğa Uyanmak</span>
                                 <span data-lang="en">Waking up to the Blue Infinity</span>
                             </p>
-                            <a href="#"
-                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
+                            <a href="javascript:void(0)" onclick="openLightbox('noa-star')"
+                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
                                 PROJECT</a>
                         </div>
                     </div>
@@ -564,8 +650,8 @@
                                 <span data-lang="tr">Lüks Yaşamın En Saf Hali</span>
                                 <span data-lang="en">The Purest Form of Luxury Living</span>
                             </p>
-                            <a href="#"
-                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
+                            <a href="javascript:void(0)" onclick="openLightbox('som-blu')"
+                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
                                 PROJECT</a>
                         </div>
                     </div>
@@ -588,8 +674,8 @@
                                 <span data-lang="tr">Körfez ve Orman Manzaralı Ferah Yaşam</span>
                                 <span data-lang="en">Spacious Living with Gulf and Forest Views</span>
                             </p>
-                            <a href="#"
-                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
+                            <a href="javascript:void(0)" onclick="openLightbox('izmir-35')"
+                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
                                 PROJECT</a>
                         </div>
                     </div>
@@ -613,8 +699,8 @@
                                 <span data-lang="tr">Şehrin Kalbinde Özel Yaşam Alanları</span>
                                 <span data-lang="en">Private Spaces in the Heart of the City</span>
                             </p>
-                            <a href="#"
-                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
+                            <a href="javascript:void(0)" onclick="openLightbox('keya-bornova')"
+                                class="inline-block text-[10px] font-black tracking-[0.3em] uppercase text-turquoise hover:text-turquoise transition-colors underline decoration-turquoise underline-offset-8">VIEW
                                 PROJECT</a>
                         </div>
                     </div>
@@ -862,6 +948,34 @@
     </div>
 
     <script>
+        // Project Gallery Data 
+        const projectGalleries = {
+            "noa-terrace": ["images/Noa Terrace/1.png", "images/Noa Terrace/2.png", "images/Noa Terrace/3.png", "images/Noa Terrace/4.png", "images/Noa Terrace/5.png"],
+            "noa-star": ["images/Noa Star/6.png", "images/Noa Star/7.png", "images/Noa Star/8.png"],
+            "som-blu": ["images/Som Blu/9.png", "images/Som Blu/10.png", "images/Som Blu/11.png", "images/Som Blu/12.png", "images/Som Blu/14.png"],
+            "izmir-35": ["images/İzmir 35/17.png", "images/İzmir 35/18.png", "images/İzmir 35/19.png", "images/İzmir 35/20.png"],
+            "keya-bornova": ["images/Keya Bornova/22.png", "images/Keya Bornova/23.png"]
+        };
+        let currentGallery = [];
+        let currentIndex = 0;
+        function openLightbox(projectId) {
+            currentGallery = projectGalleries[projectId];
+            currentIndex = 0;
+            updateLightbox();
+            document.getElementById("lightbox").classList.add("active");
+            document.body.style.overflow = "hidden";
+        }
+        function closeLightbox() {
+            document.getElementById("lightbox").classList.remove("active");
+            document.body.style.overflow = "auto";
+        }
+        function changeImage(step) {
+            currentIndex = (currentIndex + step + currentGallery.length) % currentGallery.length;
+            updateLightbox();
+        }
+        function updateLightbox() {
+            document.getElementById("lightboxImg").src = currentGallery[currentIndex];
+        }
         // Language State Management
         let currentLang = 'tr';
 
@@ -960,6 +1074,15 @@
             }
         }
     </script>
+    <!-- Lightbox Modal -->
+    <div id="lightbox" class="lightbox" onclick="closeLightbox()">
+        <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
+        <div class="lightbox-content" onclick="event.stopPropagation()">
+            <img id="lightboxImg" src="" alt="Project Image" class="lightbox-img">
+            <div class="lightbox-nav lightbox-prev" onclick="changeImage(-1)">&#10094;</div>
+            <div class="lightbox-nav lightbox-next" onclick="changeImage(1)">&#10095;</div>
+        </div>
+    </div>
 </body>
 
 </html>