Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BuildMart Pro - Hoşgeldiniz</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> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.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; | |
| } | |
| 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); | |
| } | |
| .dot-active { background-color: #F9CA24; } | |
| .dot-inactive { background-color: #B2BEC3; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Splash Screen --> | |
| <div id="splash-screen" class="fixed inset-0 flex items-center justify-center primary-bg z-50"> | |
| <div class="text-center"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto"> | |
| <rect x="20" y="20" width="80" height="80" rx="12" fill="white"/> | |
| <circle cx="60" cy="60" r="20" fill="#F9CA24"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Onboarding Screens --> | |
| <div id="onboarding-container" class="hidden"> | |
| <!-- Screen 1 --> | |
| <div class="onboarding-screen min-h-screen flex flex-col items-center justify-center px-6 bg-white"> | |
| <button id="skip-btn" class="absolute top-6 right-6 text-sm text-gray-500">Atla</button> | |
| <div class="mb-8"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto"> | |
| <rect x="20" y="20" width="80" height="80" rx="12" fill="#F9CA24"/> | |
| <circle cx="60" cy="60" r="20" fill="#2D3436"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">En Uygun Fiyatlarla İnşaat Malzemesi</h1> | |
| <p class="text-center text-gray-500 mb-12">Nakliye dahil fiyatlarla kapınıza teslim</p> | |
| <div class="flex space-x-2 mb-8"> | |
| <div class="w-3 h-3 rounded-full dot-active"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| </div> | |
| <button class="primary-btn w-full next-screen">İlerle</button> | |
| </div> | |
| <!-- Screen 2 --> | |
| <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white"> | |
| <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button> | |
| <div class="mb-8"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto"> | |
| <rect x="20" y="40" width="80" height="40" rx="8" fill="#F9CA24"/> | |
| <circle cx="40" cy="80" r="10" fill="#2D3436"/> | |
| <circle cx="80" cy="80" r="10" fill="#2D3436"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Hızlı ve Güvenli Teslimat</h1> | |
| <p class="text-center text-gray-500 mb-12">İzmir'in her ilçesine aynı gün teslimat</p> | |
| <div class="flex space-x-2 mb-8"> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-active"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| </div> | |
| <button class="primary-btn w-full next-screen">İlerle</button> | |
| </div> | |
| <!-- Screen 3 --> | |
| <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white"> | |
| <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button> | |
| <div class="mb-8"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto"> | |
| <rect x="30" y="30" width="60" height="40" rx="4" fill="#F9CA24"/> | |
| <rect x="40" y="45" width="40" height="10" fill="#2D3436"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Bölgenize Özel Fiyatlar</h1> | |
| <p class="text-center text-gray-500 mb-12">Nakliye maliyeti otomatik hesaplanır</p> | |
| <div class="flex space-x-2 mb-8"> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-active"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| </div> | |
| <button class="primary-btn w-full next-screen">İlerle</button> | |
| </div> | |
| <!-- Screen 4 --> | |
| <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white"> | |
| <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button> | |
| <div class="mb-8"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto"> | |
| <circle cx="60" cy="50" r="20" fill="#F9CA24"/> | |
| <rect x="40" y="80" width="40" height="20" rx="4" fill="#2D3436"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Akıllı Fiyatlandırma</h1> | |
| <p class="text-center text-gray-500 mb-12">Gerçek zamanlı fiyat güncellemeleri</p> | |
| <div class="flex space-x-2 mb-8"> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-inactive"></div> | |
| <div class="w-3 h-3 rounded-full dot-active"></div> | |
| </div> | |
| <a href="login.html" class="primary-btn w-full">Başla</a> | |
| </div> | |
| </div> | |
| <script> | |
| // Splash screen animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const splashScreen = document.getElementById('splash-screen'); | |
| const onboardingContainer = document.getElementById('onboarding-container'); | |
| setTimeout(() => { | |
| splashScreen.classList.add('hidden'); | |
| onboardingContainer.classList.remove('hidden'); | |
| }, 2000); | |
| // Onboarding navigation | |
| const screens = document.querySelectorAll('.onboarding-screen'); | |
| const dots = document.querySelectorAll('.dot-active, .dot-inactive'); | |
| let currentScreen = 0; | |
| document.querySelectorAll('.next-screen').forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| screens[currentScreen].classList.add('hidden'); | |
| currentScreen++; | |
| if (currentScreen < screens.length) { | |
| screens[currentScreen].classList.remove('hidden'); | |
| updateDots(); | |
| } | |
| }); | |
| }); | |
| document.getElementById('skip-btn').addEventListener('click', () => { | |
| window.location.href = 'login.html'; | |
| }); | |
| function updateDots() { | |
| dots.forEach((dot, index) => { | |
| if (index === currentScreen) { | |
| dot.classList.remove('dot-inactive'); | |
| dot.classList.add('dot-active'); | |
| } else { | |
| dot.classList.remove('dot-active'); | |
| dot.classList.add('dot-inactive'); | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |