Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>İzmir Yapı Malzemeleri - Ana Sayfa</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F5F6FA; | |
| color: #2D3436; | |
| padding-bottom: 64px; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .numbers { | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .primary-bg { background-color: #2D3436; } | |
| .accent-yellow { color: #F9CA24; } | |
| .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } | |
| .primary-btn { | |
| background-color: #F9CA24; | |
| color: #2D3436; | |
| border-radius: 12px; | |
| padding: 14px 24px; | |
| box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3); | |
| } | |
| .input-field { | |
| background-color: #F5F6FA; | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| } | |
| .category-card { | |
| width: 100px; | |
| height: 100px; | |
| background-color: #FFFFFF; | |
| border-radius: 12px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |
| } | |
| .product-card { | |
| width: 160px; | |
| background-color: #FFFFFF; | |
| border-radius: 12px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |
| } | |
| .blog-card { | |
| width: 280px; | |
| background-color: #FFFFFF; | |
| border-radius: 12px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |
| } | |
| .banner { | |
| height: 160px; | |
| border-radius: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- App Bar --> | |
| <div class="fixed top-0 left-0 right-0 bg-white h-16 flex items-center justify-between px-4 z-10 card-shadow"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/industry/32x32/42" class="w-8 h-8 rounded mr-2"> | |
| <span class="font-bold">İzmir Yapı Malzemeleri</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <i data-feather="bell" class="text-gray-500 relative"> | |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </i> | |
| <i data-feather="user" class="text-gray-500"></i> | |
| </div> | |
| </div> | |
| <!-- Content Area (with top padding for app bar) --> | |
| <div class="pt-16"> | |
| <!-- Search Bar --> | |
| <div class="px-4 mt-4"> | |
| <div class="relative"> | |
| <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"> | |
| <i data-feather="search"></i> | |
| </div> | |
| <input type="text" placeholder="Ürün ara... (örn: çimento, kireç)" class="w-full input-field pl-10"> | |
| <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-yellow-400"> | |
| <i data-feather="scan"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Location Selector --> | |
| <div class="px-4 mt-4"> | |
| <div class="bg-white border border-gray-300 rounded-xl p-3 flex items-center"> | |
| <i data-feather="map-pin" class="text-yellow-400 mr-2"></i> | |
| <div class="flex-1"> | |
| <div class="font-bold text-sm">Buca, Kaynaklar</div> | |
| <div class="text-xs text-gray-500">Teslimat bölgeniz</div> | |
| </div> | |
| <i data-feather="chevron-down" class="text-gray-500"></i> | |
| </div> | |
| </div> | |
| <!-- Quick Action Cards --> | |
| <div class="grid grid-cols-2 gap-4 p-4"> | |
| <div class="bg-white rounded-xl card-shadow p-4 hovered-element"> | |
| <i data-feather="calculator" class="text-yellow-400 w-8 h-8 mb-2"></i> | |
| <div class="font-bold text-sm">Hızlı Teklif</div> | |
| <div class="text-xs text-gray-500 hovered-element">Anında fiyat hesapla</div> | |
| </div> | |
| <div class="bg-white rounded-xl card-shadow p-4 hovered-element"> | |
| <i data-feather="folder" class="text-yellow-400 w-8 h-8 mb-2"></i> | |
| <div class="font-bold text-sm">Projelerim</div> | |
| <div class="text-xs text-gray-500 hovered-element">X adet proje</div> | |
| </div> | |
| <div class="bg-white rounded-xl card-shadow p-4 hovered-element"> | |
| <i data-feather="file-text" class="text-yellow-400 w-8 h-8 mb-2"></i> | |
| <div class="font-bold text-sm">Tekliflerim</div> | |
| <div class="text-xs text-gray-500 hovered-element">Y adet teklif</div> | |
| </div> | |
| <div class="bg-white rounded-xl card-shadow p-4 relative hovered-element"> | |
| <i data-feather="tag" class="text-yellow-400 w-8 h-8 mb-2"></i> | |
| <div class="font-bold text-sm">Kampanyalar</div> | |
| <div class="text-xs text-gray-500 hovered-element">Fırsatları gör</div> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs rounded-full px-2 py-1">3 Yeni</span> | |
| </div> | |
| </div> | |
| <!-- Warehouse Distance Card --> | |
| <div class="mx-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-2xl p-5"> | |
| <div class="flex items-center"> | |
| <i data-feather="home" class="text-white w-10 h-10 mr-3"></i> | |
| <div class="flex-1"> | |
| <div class="font-bold text-gray-800">Depomuz 12.4 km uzaklıkta</div> | |
| <div class="text-sm text-gray-800">Menderes Depo - Yaklaşık 18 dakika</div> | |
| </div> | |
| <button class="bg-gray-800 text-white rounded-lg px-3 py-2 text-sm">Yol Tarifi Al</button> | |
| </div> | |
| </div> | |
| <!-- Campaign Banners --> | |
| <div class="mt-6 px-4"> | |
| <div class="relative"> | |
| <div class="banner bg-gray-800 flex items-center justify-between p-4"> | |
| <div> | |
| <div class="text-white text-xl font-bold">Çimento'da %15 İndirim</div> | |
| <div class="text-yellow-400 text-sm">Bu hafta özel</div> | |
| </div> | |
| <img src="http://static.photos/industry/80x80/145" class="w-16 h-16 rounded-full"> | |
| </div> | |
| <div class="flex justify-center mt-3"> | |
| <div class="w-2 h-2 bg-gray-300 rounded-full mx-1"></div> | |
| <div class="w-2 h-2 bg-white rounded-full mx-1"></div> | |
| <div class="w-2 h-2 bg-gray-300 rounded-full mx-1"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="mt-6 px-4"> | |
| <h2 class="text-lg font-bold mb-3">Kategoriler</h2> | |
| <div class="flex overflow-x-auto pb-2 gap-3"> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center"> | |
| <i data-feather="package" class="text-gray-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">Çimento</span> | |
| </div> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center"> | |
| <i data-feather="wind" class="text-gray-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">Kireç</span> | |
| </div> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center"> | |
| <i data-feather="layers" class="text-gray-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">İzolasyon</span> | |
| </div> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center"> | |
| <i data-feather="sliders" class="text-gray-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">Beton</span> | |
| </div> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center"> | |
| <i data-feather="anchor" class="text-gray-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">Yapıştırıcı</span> | |
| </div> | |
| <div class="flex-shrink-0 category-card flex flex-col items-center justify-center bg-yellow-100"> | |
| <i data-feather="grid" class="text-yellow-400 w-6 h-6 mb-2"></i> | |
| <span class="text-xs">Tümünü Gör</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Products --> | |
| <div class="mt-6 px-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-bold">Öne Çıkan Ürünler</h2> | |
| <a href="#" class="text-yellow-400 text-sm">Tümünü Gör</a> | |
| </div> | |
| <div class="flex overflow-x-auto pb-2 gap-3"> | |
| <div class="flex-shrink-0 product-card p-3"> | |
| <div class="relative"> | |
| <img src="http://static.photos/industry/160x140/123" class="w-full h-32 rounded mb-2 object-cover"> | |
| <i data-feather="heart" class="absolute top-2 right-2 text-gray-400"></i> | |
| </div> | |
| <span class="text-xs bg-yellow-100 text-gray-800 px-2 py-1 rounded">Çimento</span> | |
| <div class="text-sm font-bold mt-1 line-clamp-2">Çimento 50 KG CEM I 42.5 R</div> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div> | |
| <span class="text-xs text-green-500">Stokta</span> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="text-xs text-gray-500 line-through">₺125.00</div> | |
| <div class="text-base font-bold">₺150.00</div> | |
| <div class="text-xs text-gray-500">/ Adet</div> | |
| </div> | |
| <button class="bg-yellow-400 rounded-lg w-8 h-8 flex items-center justify-center absolute bottom-3 right-3"> | |
| <i data-feather="plus" class="text-gray-800 w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Repeat product cards as needed --> | |
| </div> | |
| </div> | |
| <!-- Recent Orders --> | |
| <div class="mt-6 mx-4 bg-yellow-50 rounded-xl p-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="text-yellow-400 w-6 h-6 mr-2"></i> | |
| <div> | |
| <div class="font-bold text-sm">Son 24 Saatte</div> | |
| <div class="text-yellow-500 font-bold">847 sipariş verildi</div> | |
| <div class="text-xs text-gray-500">Buca'ya 234 ton malzeme gönderildi</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog/Education Content --> | |
| <div class="mt-6 px-4"> | |
| <h2 class="text-lg font-bold mb-3">İnşaat Rehberi</h2> | |
| <div class="flex overflow-x-auto pb-2 gap-3"> | |
| <div class="flex-shrink-0 blog-card"> | |
| <img src="http://static.photos/construction/280x140/99" class="w-full h-32 rounded-t-xl object-cover"> | |
| <div class="p-3"> | |
| <span class="text-xs bg-yellow-100 text-gray-800 px-2 py-1 rounded">Rehber</span> | |
| <div class="font-bold text-sm mt-2 line-clamp-2">Dış Cephe İzolasyonu Nasıl Yapılır?</div> | |
| <div class="text-xs text-gray-500 mt-1 line-clamp-2">İzolasyon malzemesi seçiminden...</div> | |
| <div class="flex items-center justify-between mt-2"> | |
| <span class="text-xs text-gray-400">5 dk okuma</span> | |
| <i data-feather="clock" class="text-gray-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeat blog cards as needed --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white flex items-center justify-around py-2 card-shadow"> | |
| <div class="flex flex-col items-center text-yellow-400"> | |
| <i data-feather="home"></i> | |
| <span class="text-xs">Ana Sayfa</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="grid"></i> | |
| <span class="text-xs">Kategoriler</span> | |
| </div> | |
| <div class="relative -top-4"> | |
| <div class="w-14 h-14 bg-yellow-400 rounded-full flex items-center justify-center shadow-lg"> | |
| <i data-feather="shopping-cart" class="text-gray-800"></i> | |
| <span class="absolute -top-1 -right-1 bg-white text-gray-800 text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="package"></i> | |
| <span class="text-xs">Siparişler</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="user"></i> | |
| <span class="text-xs">Profil</span> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |