Spaces:

drmurataltun
/

mutlu-mutfak

Running

App Files Files Community

drmurataltun commited on Jun 25, 2025

Commit

f9f8374

verified ·

1 Parent(s): 0f2d949

bülten kaydı olayını kaldır haritada göster ksımını da düzenle https://www.google.com/maps?ll=40.999856,28.866527&z=14&t=m&hl=tr&gl=TR&mapclient=embed&cid=8684274558401595205 - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +73 -14

index.html CHANGED Viewed

@@ -24,23 +24,34 @@
         .flip-card {
             perspective: 1000px;
         }
         .flip-card-inner {
             transition: transform 0.6s;
             transform-style: preserve-3d;
         }
-        .flip-card:hover .flip-card-inner {
-            transform: rotateY(180deg);
         }
         .flip-card-front, .flip-card-back {
             backface-visibility: hidden;
         }
         .flip-card-back {
             transform: rotateY(180deg);
         }
         .menu-item:nth-child(odd) {
@@ -50,6 +61,9 @@
         .menu-item:nth-child(even) {
             background-color: #f9fafb;
         }
     </style>
 </head>
 <body class="min-h-screen">
@@ -243,7 +257,55 @@
                 </div>
             </div>
-            <!-- Other cuisines (Turkish, Japanese, Mexican) would follow the same pattern -->
         </div>
     </section>
@@ -484,21 +546,11 @@
                         </li>
                         <li class="flex items-start">
                             <i class="fas fa-map-marked-alt mt-1 mr-2 text-blue-400"></i>
-                            <a href="https://maps.app.goo.gl/[HARITA_LINKI]" class="hover:text-white" target="_blank">Haritada Gör</a> (3.8★)
                         </li>
                     </ul>
                 </div>
-                <div>
-                    <h4 class="text-white text-lg font-bold mb-4">BÜLTEN KAYDI</h4>
-                    <p class="mb-4">Yeni menülerden ve etkinliklerden haberdar olmak için e-bültenimize kaydolun.</p>
-                    <div class="flex">
-                        <input type="email" placeholder="E-posta adresiniz" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
-                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </div>
-                </div>
             </div>
             <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
@@ -513,6 +565,13 @@
     </footer>
     <script>
         // Cuisine Tab Switching
         document.addEventListener('DOMContentLoaded', function() {
             const tabs = document.querySelectorAll('.cuisine-tab');

         .flip-card {
             perspective: 1000px;
+            height: 100%;
         }
         .flip-card-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
             transition: transform 0.6s;
             transform-style: preserve-3d;
         }
+        @media (hover: hover) {
+            .flip-card:hover .flip-card-inner {
+                transform: rotateY(180deg);
+            }
         }
         .flip-card-front, .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
             backface-visibility: hidden;
+            border-radius: 0.5rem;
         }
         .flip-card-back {
             transform: rotateY(180deg);
+            display: flex;
         }
         .menu-item:nth-child(odd) {
         .menu-item:nth-child(even) {
             background-color: #f9fafb;
         }
+        .flip-card.flipped .flip-card-inner {
+            transform: rotateY(180deg);
+        }
     </style>
 </head>
 <body class="min-h-screen">
                 </div>
             </div>
+            <!-- Japanese Cuisine -->
+            <div id="japanese-cuisine" class="cuisine-content hidden">
+                <div class="flex flex-col md:flex-row items-center mb-10">
+                    <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
+                        <img src="https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1540&q=80" alt="Japanese Cuisine" class="rounded-xl shadow-lg w-full">
+                    </div>
+                    <div class="md:w-1/2">
+                        <h3 class="text-2xl font-bold text-amber-600 mb-4">Ocak Ayı: Japon Mutfağı</h3>
+                        <p class="text-gray-700 mb-4">Öğrencilerimiz bu ay sağlıklı ve lezzetli Japon mutfağı ile tanışıyor. Özenle seçilmiş deniz ürünleri ve geleneksel Japon teknikleriyle hazırlanan menüler.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Taze balık ve deniz ürünleri</li>
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Sağlıklı pişirme yöntemleri</li>
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Düşük kalorili ama doyurucu öğünler</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl shadow-inner">
+                    <h4 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Örnek Japon Menüsü</h4>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+                        <!-- Menu items for Japanese cuisine would go here -->
+                    </div>
+                </div>
+            </div>
+            <!-- Mexican Cuisine -->
+            <div id="mexican-cuisine" class="cuisine-content hidden">
+                <div class="flex flex-col md:flex-row items-center mb-10">
+                    <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
+                        <img src="https://images.unsplash.com/photo-1599481238640-4c1288750d7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1526&q=80" alt="Mexican Cuisine" class="rounded-xl shadow-lg w-full">
+                    </div>
+                    <div class="md:w-1/2">
+                        <h3 class="text-2xl font-bold text-amber-600 mb-4">Şubat Ayı: Meksika Mutfağı</h3>
+                        <p class="text-gray-700 mb-4">Renkli ve enerjik Meksika mutfağı öğrencilerimizle buluşuyor. Baharatların dengeli kullanımı ve taze malzemelerle hazırlanan menüler.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Otantik Meksika tatları</li>
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Vejetaryen seçenekler</li>
+                            <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> Besleyici ve enerjik öğünler</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl shadow-inner">
+                    <h4 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Örnek Meksika Menüsü</h4>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+                        <!-- Menu items for Mexican cuisine would go here -->
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
                         </li>
                         <li class="flex items-start">
                             <i class="fas fa-map-marked-alt mt-1 mr-2 text-blue-400"></i>
+                            <a href="https://www.google.com/maps?ll=40.999856,28.866527&z=14&t=m&hl=tr&gl=TR&mapclient=embed&cid=8684274558401595205" class="hover:text-white" target="_blank">Haritada Gör</a> (3.8★)
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
     </footer>
     <script>
+        // Flip card functionality
+        document.querySelectorAll('.flip-card').forEach(card => {
+            card.addEventListener('click', function() {
+                this.classList.toggle('flipped');
+            });
+        });
         // Cuisine Tab Switching
         document.addEventListener('DOMContentLoaded', function() {
             const tabs = document.querySelectorAll('.cuisine-tab');