Hugging Face's logo

Spaces:
ersinkx
/
buildmart-pro
Running

App Files Community
ersinkx commited on
Commit
7d8ea94
·
verified ·
1 Parent(s): 847d32c

RENK PALETİ:

Browse files

Primary (Ana Renkler):
- Koyu Antrasit: #2D3436
- Orta Antrasit: #353B48
- Açık Gri: #636E72

Accent (Vurgu Renkleri):
- Parlak Sarı: #F9CA24
- Altın Sarı: #FFC312
- Açık Sarı: #F8C630

Background (Arka Plan):
- Ana Arka Plan: #F5F6FA
- Kart Arka Planı: #FFFFFF
- Hover/Seçili: #FFEAA7

Text (Metin):
- Ana Metin: #2D3436
- İkincil Metin: #636E72
- Açıklama Metni: #B2BEC3
- Vurgu Metni: #F9CA24

Status (Durum):
- Başarı: #00B894
- Uyarı: #FDCB6E
- Hata: #FF7675
- Bilgi: #74B9FF

TİPOGRAFİ:
- Başlıklar: Poppins Bold (600-700)
- Metin: Inter Regular (400-500)
- Sayılar: Space Mono (fiyatlar için)

Boyutlar (Mobile):
- H1: 28-32px
- H2: 22-24px
- H3: 18-20px
- Body: 14-16px
- Small: 12-14px

TASARIM PRENSİPLERİ:
1. Endüstriyel lüks görünüm
2. Sert köşeler (border-radius: 8-12px)
3. Gölgeler: elevation shadows (0 2px 8px rgba(0,0,0,0.08))
4. Sarı sadece CTA ve önemli bilgilerde
5. Bol beyaz alan kullanımı
6. İnce çizgiler (1-2px)
7. Smooth animasyonlar (0.3s ease-in-out)

COMPONENT STYLES:
Primary Button:
- Background: #F9CA24
- Text: #2D3436
- Border Radius: 12px
- Padding: 14px 24px
- Shadow: 0 4px 12px rgba(249, 202, 36, 0.3)

Secondary Button:
- Background: #2D3436
- Text: #FFFFFF
- Border Radius: 12px
- Padding: 14px 24px

Card:
- Background: #FFFFFF
- Border Radius: 12px
- Shadow: 0 2px 8px rgba(0, 0, 0, 0.08)
- Padding: 16px

Input Field:
- Background: #F5F6FA
- Border: none (default), #F9CA24 2px bottom (focus)
- Border Radius: 8px
- Padding: 14px
- Font Size: 14px

İKON SETİ: Phosphor Icons (outline style). AYFA YAPISI ve DETAYLARI1️⃣ ONBOARDING / SPLASH SCREENSayfa Adı: splash_screen.dart / SplashViewController.swiftİçerik: Ekran 1: Logo Animasyonu
- Merkeze yerleştirilmiş büyük logo
- Background: #2D3436 (koyu antrasit)
- Logo: Beyaz + #F9CA24 sarı accent
- Animasyon: Fade-in + hafif scale (0.8 → 1.0)
- Süre: 2 saniye

Ekran 2: Hoşgeldin Slaytı
- Background: #FFFFFF
- Büyük ikon (kamyon/malzeme görseli) - #F9CA24
- Başlık: "En Uygun Fiyatlarla İnşaat Malzemesi" (28px, #2D3436)
- Alt başlık: "Nakliye dahil fiyatlarla kapınıza teslim" (14px, #636E72)
- İlerle butonu (nokta nokta indicator) - #F9CA24

Ekran 3: Hızlı Teslimat
- Background: #FFFFFF
- İkon: Teslimat kamyonu - #F9CA24
- Başlık: "Hızlı ve Güvenli Teslimat" (28px)
- Alt başlık: "İzmir'in her ilçesine aynı gün teslimat"
- İlerle butonu

Ekran 4: Akıllı Fiyatlandırma
- Background: #FFFFFF
- İkon: Hesap makinesi/fiyat etiketi - #F9CA24
- Başlık: "Bölgenize Özel Fiyatlar" (28px)
- Alt başlık: "Nakliye maliyeti otomatik hesaplanır"
- "Başla" butonu (Primary Yellow)

UI Elemanları:
- Skip butonu (sağ üst): "Atla" (14px, #636E72)
- Dot indicator (alt): Aktif #F9CA24, pasif #B2BEC3
- Padding: 24px her yandan 2️⃣ GİRİŞ / KAYIT EKRANLARISayfa Adı: login_screen.dart / LoginViewController.swiftGiriş Ekranı İçeriği: Layout:
- Background: #F5F6FA
- Ana kart: Beyaz, border-radius 20px üstten
- Padding: 24px

Üst Kısım:
- Logo (orta, 80x80px)
- "Hoş Geldiniz" başlık (24px, #2D3436, bold)
- "Hesabınıza giriş yapın" alt başlık (14px, #636E72)
- Boşluk: 32px

Form:
Input 1: E-posta
- Label: "E-posta Adresiniz" (12px, #636E72)
- Placeholder: "[email protected]"
- Background: #F5F6FA
- Border-radius: 8px
- Padding: 14px
- İkon: Mail ikonu (sol) - #636E72
- Focus border-bottom: 2px #F9CA24

Input 2: Şifre
- Label: "Şifreniz" (12px, #636E72)
- Placeholder: "••••••••"
- Background: #F5F6FA
- Sağ taraf: Göz ikonu (göster/gizle) - #636E72
- İkon: Lock ikonu (sol) - #636E72

Şifremi Unuttum:
- Sağ hizalı link (12px, #F9CA24)
- Padding-top: 8px

Giriş Yap Butonu:
- Full width
- Background: #F9CA24
- Text: "Giriş Yap" (16px, #2D3436, bold)
- Border-radius: 12px
- Padding: 16px
- Shadow: 0 4px 12px rgba(249, 202, 36, 0.3)
- Margin-top: 24px

Divider:
- "veya" metni ortada (12px, #B2BEC3)
- Çizgiler yan tarafta - #E5E5E5
- Margin: 24px üst/alt

Sosyal Giriş (opsiyonel):
- Google ile Giriş butonu
- Background: #FFFFFF
- Border: 1px #E5E5E5
- Google ikonu + "Google ile Giriş"
- Border-radius: 12px
- Padding: 14px

Alt Kısım:
- "Hesabınız yok mu?" (14px, #636E72)
- "Kayıt Olun" (14px, #F9CA24, bold)
- Orta hizalı
- Padding-top: 24px kayıt ekranı içeriği : Layout: Giriş ile aynı temel yapı

Üst Kısım:
- "Kayıt Olun" başlık (24px, #2D3436, bold)
- "Yeni hesap oluşturun" alt başlık (14px, #636E72)

Üyelik Tipi Seçimi (Önemli):
- İki buton yan yana
- Buton 1: "Bireysel Üyelik"
- Aktif: Background #F9CA24, text #2D3436
- Pasif: Background #FFFFFF, border 1px #E5E5E5, text #636E72
- İkon: Kişi ikonu
- Border-radius: 12px
- Padding: 12px

- Buton 2: "Kurumsal Üyelik"
- Aynı stil
- İkon: Bina ikonu

Bireysel Üyelik Formu:
Input 1: Ad
- Label: "Adınız"
- Placeholder: "Mehmet"
- İkon: User

Input 2: Soyad
- Label: "Soyadınız"
- Placeholder: "Yılmaz"

Input 3: Telefon
- Label: "Telefon Numaranız"
- Prefix: "+90" (sabit, gri background)
- Placeholder: "5XX XXX XX XX"
- Auto-format: 3-3-4 (555 123 45 67)
- İkon: Phone

Input 4: E-posta
- Label: "E-posta Adresiniz"
- Placeholder: "[email protected]"
- İkon: Mail

Input 5: Şifre
- Label: "Şifre"
- Şifre gücü göstergesi (zayıf/orta/güçlü)
- Renk: Kırmızı/Turuncu/Yeşil

Input 6: Şifre Tekrar
- Label: "Şifre Tekrar"

Kurumsal Üyelik Formu (farklı alanlar):
Input 1: Firma Adı
- Label: "Firma Adınız"
- Placeholder: "ABC İnşaat Ltd. Şti."
- İkon: Building

Input 2: Vergi Dairesi
- Label: "Vergi Dairesi"
- Placeholder: "Konak"

Input 3: Vergi No
- Label: "Vergi Numarası"
- Placeholder: "1234567890"
- İkon: Hash

Input 4: Yetkili Adı Soyadı
- Label: "Yetkili Kişi"
- Placeholder: "Mehmet Yılmaz"
- İkon: User

Input 5: Telefon
- Aynı bireysel gibi

Input 6: E-posta
- Aynı

Input 7-8: Şifre alanları

Onay Kutucukları:
Checkbox 1: KVKK
- "KVKK Aydınlatma Metni'ni okudum, kabul ediyorum"
- Link: "KVKK Metni" (#F9CA24, underline)
- Checkbox aktif: #F9CA24 background, beyaz check

Checkbox 2: Kullanım Koşulları
- "Kullanım Koşulları ve Gizlilik Politikası'nı kabul ediyorum"
- Link: "Koşullar" (#F9CA24)

Checkbox 3: İletişim İzni (opsiyonel)
- "Kampanya ve fırsatlardan haberdar olmak istiyorum"
- Default: Checked

Kayıt Ol Butonu:
- Full width
- Background: #F9CA24
- Text: "Hesap Oluştur"
- Disabled state: #B2BEC3 (onaylar seçili değilse)

Alt Kısım:
- "Zaten hesabınız var mı?" (14px, #636E72)
- "Giriş Yapın" (14px, #F9CA24, bold)
şifremi unuttum ekranı
Layout:
- Minimal, tek input

Başlık: "Şifrenizi mi Unuttunuz?" (24px, #2D3436)
Alt başlık: "E-posta adresinize şifre sıfırlama bağlantısı göndereceğiz" (14px, #636E72)

Input: E-posta
- Full width

Buton: "Sıfırlama Linki Gönder"
- Primary yellow

Geri Dön Linki:
- "Giriş ekranına dön" (14px, #636E72)
- İkon: Sol ok. 3️⃣ ANA SAYFA (HOME)Sayfa Adı: home_screen.dart / HomeViewController.swiftLayout Yapısı: APP BAR (Sabit üst):
- Background: #FFFFFF
- Height: 64px + safe area
- Shadow: 0 2px 4px rgba(0,0,0,0.06)

Sol Taraf:
- Logo (32x32px)
- "BuildMart" text (16px, #2D3436, bold) - veya sizin şirket adınız

Sağ Taraf:
- Bildirim ikonu (Bell)
- Badge: Kırmızı nokta (okunmamış varsa)
- İkon rengi: #636E72
- Profil ikonu (User circle)
- İkon rengi: #636E72

ARAMA BARI:
- Background: #F5F6FA
- Border-radius: 12px
- Padding: 12px 16px
- Placeholder: "Ürün ara... (örn: çimento, kireç)"
- Sol taraf: Search ikonu (#636E72)
- Sağ taraf: QR kod tarama ikonu (#F9CA24)
- Margin: 16px horizontal

LOKASyON SEÇİCİ:
- Background: #FFFFFF
- Border: 1px #E5E5E5
- Border-radius: 12px
- Padding: 12px 16px
- Margin: 16px horizontal

İçerik:
- Sol taraf: Location pin ikonu (#F9CA24)
- Orta: "Buca, Kaynaklar" (14px, #2D3436, bold)
Alt: "Teslimat bölgeniz" (11px, #636E72)
- Sağ taraf: Chevron down (#636E72)
- Tıklanabilir (bottom sheet açar)

HIZLI AKSİYON KARTLARI (4'lü Grid):
- 2x2 grid
- Her kart: Background #FFFFFF, shadow, border-radius 12px
- Padding: 16px
- Margin: 8px

Kart 1: Hızlı Teklif Al
- İkon: Calculator (#F9CA24, 32x32px)
- Başlık: "Hızlı Teklif" (13px, #2D3436, bold)
- Alt yazı: "Anında fiyat hesapla" (11px, #636E72)

Kart 2: Projelerim
- İkon: Folder (#F9CA24)
- Başlık: "Projelerim"
- Alt yazı: "X adet proje" (dinamik)

Kart 3: Tekliflerim
- İkon: File text (#F9CA24)
- Başlık: "Tekliflerim"
- Alt yazı: "Y adet teklif"

Kart 4: Kampanyalar
- İkon: Tag (#F9CA24)
- Başlık: "Kampanyalar"
- Alt yazı: "Fırsatları gör"
- Badge: "3 Yeni" (kırmızı, sağ üst)

DEPO MESAFE KARTI (Önemli):
- Full width
- Background: Linear gradient (#F9CA24 → #FFC312)
- Border-radius: 16px
- Padding: 20px
- Margin: 16px horizontal

İçerik:
- Sol taraf: Warehouse ikonu (beyaz, 40x40px)
- Orta:
- "Depomuz 12.4 km uzaklıkta" (16px, #2D3436, bold)
- "Menderes Depo - Yaklaşık 18 dakika" (12px, #2D3436)
- Sağ taraf:
- "Yol Tarifi Al" butonu
- Background: #2D3436
- Text: Beyaz
- Border-radius: 8px
- Padding: 8px 12px

KAMPANYA BANNER SLIDER:
- Auto scroll horizontal
- Dot indicator altta
- Her banner:
- Full width (padding 16px)
- Height: 160px
- Border-radius: 16px
- Background: Gradient veya resim

Örnek Banner 1:
- Background: #2D3436
- Sol taraf metin:
- "Çimento'da %15 İndirim" (20px, beyaz, bold)
- "Bu hafta özel" (12px, #F9CA24)
- Sağ taraf: Çimento çuvalı görseli

Örnek Banner 2:
- Background: #F9CA24
- "1000 kg Üzeri Alımlarda Nakliye Bedava"
- CTA: "Şimdi Al" butonu

KATEGORİLER:
- Horizontal scroll
- Her kategori kartı:
- Width: 100px
- Height: 100px
- Background: #FFFFFF
- Border-radius: 12px
- Shadow: soft

Kategori 1: Çimento
- İkon: Çuval görseli (56x56px) - #636E72
- Başlık: "Çimento" (13px, #2D3436)
- Centered

Kategori 2: Kireç
- İkon: Kova
- Başlık: "Kireç"

Kategori 3: İzolasyon
- İkon: Layers
- Başlık: "İzolasyon"

Kategori 4: Beton
- İkon: Box
- Başlık: "Beton"

Kategori 5: Yapıştırıcı
- İkon: Droplet
- Başlık: "Yapıştırıcı"

Kategori 6: Tümünü Gör
- İkon: Grid (#F9CA24)
- Background:

Files changed (6) hide show
  1. README.md +8 -4
  2. forgot-password.html +76 -0
  3. index.html +286 -19
  4. login.html +103 -0
  5. register.html +243 -0
  6. splash.html +179 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Buildmart Pro
3
- emoji: 📉
4
- colorFrom: yellow
5
  colorTo: yellow
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: BuildMart Pro 🛠️✨
3
+ colorFrom: purple
 
4
  colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
forgot-password.html ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BuildMart Pro - Şifremi Unuttum</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #F5F6FA;
15
+ color: #2D3436;
16
+ }
17
+ h1, h2, h3 {
18
+ font-family: 'Poppins', sans-serif;
19
+ }
20
+ .numbers {
21
+ font-family: 'Space Mono', monospace;
22
+ }
23
+ .primary-bg { background-color: #2D3436; }
24
+ .accent-yellow { color: #F9CA24; }
25
+ .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
26
+ .primary-btn {
27
+ background-color: #F9CA24;
28
+ color: #2D3436;
29
+ border-radius: 12px;
30
+ padding: 14px 24px;
31
+ box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3);
32
+ }
33
+ .input-field {
34
+ background-color: #F5F6FA;
35
+ border-radius: 8px;
36
+ padding: 14px;
37
+ }
38
+ .input-field:focus {
39
+ border-bottom: 2px solid #F9CA24;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-100">
44
+ <div class="min-h-screen flex items-center justify-center p-4">
45
+ <div class="w-full max-w-md bg-white rounded-2xl card-shadow p-6">
46
+ <div class="text-center mb-8">
47
+ <h1 class="text-2xl font-bold">Şifrenizi mi Unuttunuz?</h1>
48
+ <p class="text-gray-500">E-posta adresinize şifre sıfırlama bağlantısı göndereceğiz</p>
49
+ </div>
50
+
51
+ <form>
52
+ <div class="mb-6">
53
+ <label class="block text-xs text-gray-500 mb-2">E-posta Adresiniz</label>
54
+ <div class="relative">
55
+ <input type="email" placeholder="[email protected]" class="w-full input-field pl-10">
56
+ <i data-feather="mail" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
57
+ </div>
58
+ </div>
59
+
60
+ <button type="submit" class="w-full primary-btn mb-6">Sıfırlama Linki Gönder</button>
61
+ </form>
62
+
63
+ <div class="text-center">
64
+ <a href="login.html" class="flex items-center justify-center gap-2 text-gray-500">
65
+ <i data-feather="arrow-left" class="w-4 h-4"></i>
66
+ Giriş ekranına dön
67
+ </a>
68
+ </div>
69
+ </div>
70
+
71
+ <script>
72
+ feather.replace();
73
+ </script>
74
+ </div>
75
+ </body>
76
+ </html>
index.html CHANGED
@@ -1,19 +1,286 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BuildMart Pro - Ana Sayfa</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #F5F6FA;
15
+ color: #2D3436;
16
+ padding-bottom: 64px;
17
+ }
18
+ h1, h2, h3 {
19
+ font-family: 'Poppins', sans-serif;
20
+ }
21
+ .numbers {
22
+ font-family: 'Space Mono', monospace;
23
+ }
24
+ .primary-bg { background-color: #2D3436; }
25
+ .accent-yellow { color: #F9CA24; }
26
+ .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
27
+ .primary-btn {
28
+ background-color: #F9CA24;
29
+ color: #2D3436;
30
+ border-radius: 12px;
31
+ padding: 14px 24px;
32
+ box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3);
33
+ }
34
+ .input-field {
35
+ background-color: #F5F6FA;
36
+ border-radius: 12px;
37
+ padding: 12px 16px;
38
+ }
39
+ .category-card {
40
+ width: 100px;
41
+ height: 100px;
42
+ background-color: #FFFFFF;
43
+ border-radius: 12px;
44
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
45
+ }
46
+ .product-card {
47
+ width: 160px;
48
+ background-color: #FFFFFF;
49
+ border-radius: 12px;
50
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
51
+ }
52
+ .blog-card {
53
+ width: 280px;
54
+ background-color: #FFFFFF;
55
+ border-radius: 12px;
56
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
57
+ }
58
+ .banner {
59
+ height: 160px;
60
+ border-radius: 16px;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <!-- App Bar -->
66
+ <div class="fixed top-0 left-0 right-0 bg-white h-16 flex items-center justify-between px-4 z-10 card-shadow">
67
+ <div class="flex items-center">
68
+ <div class="w-8 h-8 bg-gray-300 rounded mr-2"></div>
69
+ <span class="font-bold">BuildMart</span>
70
+ </div>
71
+ <div class="flex items-center gap-4">
72
+ <i data-feather="bell" class="text-gray-500 relative">
73
+ <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
74
+ </i>
75
+ <i data-feather="user" class="text-gray-500"></i>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Content Area (with top padding for app bar) -->
80
+ <div class="pt-16">
81
+ <!-- Search Bar -->
82
+ <div class="px-4 mt-4">
83
+ <div class="relative">
84
+ <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
85
+ <i data-feather="search"></i>
86
+ </div>
87
+ <input type="text" placeholder="Ürün ara... (örn: çimento, kireç)" class="w-full input-field pl-10">
88
+ <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-yellow-400">
89
+ <i data-feather="scan"></i>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Location Selector -->
95
+ <div class="px-4 mt-4">
96
+ <div class="bg-white border border-gray-300 rounded-xl p-3 flex items-center">
97
+ <i data-feather="map-pin" class="text-yellow-400 mr-2"></i>
98
+ <div class="flex-1">
99
+ <div class="font-bold text-sm">Buca, Kaynaklar</div>
100
+ <div class="text-xs text-gray-500">Teslimat bölgeniz</div>
101
+ </div>
102
+ <i data-feather="chevron-down" class="text-gray-500"></i>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Quick Action Cards -->
107
+ <div class="grid grid-cols-2 gap-4 p-4">
108
+ <div class="bg-white rounded-xl card-shadow p-4">
109
+ <i data-feather="calculator" class="text-yellow-400 w-8 h-8 mb-2"></i>
110
+ <div class="font-bold text-sm">Hızlı Teklif</div>
111
+ <div class="text-xs text-gray-500">Anında fiyat hesapla</div>
112
+ </div>
113
+ <div class="bg-white rounded-xl card-shadow p-4">
114
+ <i data-feather="folder" class="text-yellow-400 w-8 h-8 mb-2"></i>
115
+ <div class="font-bold text-sm">Projelerim</div>
116
+ <div class="text-xs text-gray-500">X adet proje</div>
117
+ </div>
118
+ <div class="bg-white rounded-xl card-shadow p-4">
119
+ <i data-feather="file-text" class="text-yellow-400 w-8 h-8 mb-2"></i>
120
+ <div class="font-bold text-sm">Tekliflerim</div>
121
+ <div class="text-xs text-gray-500">Y adet teklif</div>
122
+ </div>
123
+ <div class="bg-white rounded-xl card-shadow p-4 relative">
124
+ <i data-feather="tag" class="text-yellow-400 w-8 h-8 mb-2"></i>
125
+ <div class="font-bold text-sm">Kampanyalar</div>
126
+ <div class="text-xs text-gray-500">Fırsatları gör</div>
127
+ <span class="absolute top-2 right-2 bg-red-500 text-white text-xs rounded-full px-2 py-1">3 Yeni</span>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Warehouse Distance Card -->
132
+ <div class="mx-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-2xl p-5">
133
+ <div class="flex items-center">
134
+ <i data-feather="home" class="text-white w-10 h-10 mr-3"></i>
135
+ <div class="flex-1">
136
+ <div class="font-bold text-gray-800">Depomuz 12.4 km uzaklıkta</div>
137
+ <div class="text-sm text-gray-800">Menderes Depo - Yaklaşık 18 dakika</div>
138
+ </div>
139
+ <button class="bg-gray-800 text-white rounded-lg px-3 py-2 text-sm">Yol Tarifi Al</button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Campaign Banners -->
144
+ <div class="mt-6 px-4">
145
+ <div class="relative">
146
+ <div class="banner bg-gray-800 flex items-center justify-between p-4">
147
+ <div>
148
+ <div class="text-white text-xl font-bold">Çimento'da %15 İndirim</div>
149
+ <div class="text-yellow-400 text-sm">Bu hafta özel</div>
150
+ </div>
151
+ <div class="w-16 h-16 bg-gray-200 rounded-full"></div>
152
+ </div>
153
+ <div class="flex justify-center mt-3">
154
+ <div class="w-2 h-2 bg-gray-300 rounded-full mx-1"></div>
155
+ <div class="w-2 h-2 bg-white rounded-full mx-1"></div>
156
+ <div class="w-2 h-2 bg-gray-300 rounded-full mx-1"></div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Categories -->
162
+ <div class="mt-6 px-4">
163
+ <h2 class="text-lg font-bold mb-3">Kategoriler</h2>
164
+ <div class="flex overflow-x-auto pb-2 gap-3">
165
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center">
166
+ <div class="w-14 h-14 bg-gray-300 rounded-full mb-2"></div>
167
+ <span class="text-xs">Çimento</span>
168
+ </div>
169
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center">
170
+ <div class="w-14 h-14 bg-gray-300 rounded-full mb-2"></div>
171
+ <span class="text-xs">Kireç</span>
172
+ </div>
173
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center">
174
+ <div class="w-14 h-14 bg-gray-300 rounded-full mb-2"></div>
175
+ <span class="text-xs">İzolasyon</span>
176
+ </div>
177
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center">
178
+ <div class="w-14 h-14 bg-gray-300 rounded-full mb-2"></div>
179
+ <span class="text-xs">Beton</span>
180
+ </div>
181
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center">
182
+ <div class="w-14 h-14 bg-gray-300 rounded-full mb-2"></div>
183
+ <span class="text-xs">Yapıştırıcı</span>
184
+ </div>
185
+ <div class="flex-shrink-0 category-card flex flex-col items-center justify-center bg-yellow-100">
186
+ <i data-feather="grid" class="text-yellow-400 w-6 h-6 mb-2"></i>
187
+ <span class="text-xs">Tümünü Gör</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Featured Products -->
193
+ <div class="mt-6 px-4">
194
+ <div class="flex justify-between items-center mb-3">
195
+ <h2 class="text-lg font-bold">Öne Çıkan Ürünler</h2>
196
+ <a href="#" class="text-yellow-400 text-sm">Tümünü Gör</a>
197
+ </div>
198
+ <div class="flex overflow-x-auto pb-2 gap-3">
199
+ <div class="flex-shrink-0 product-card p-3">
200
+ <div class="relative">
201
+ <div class="w-full h-32 bg-gray-200 rounded mb-2"></div>
202
+ <i data-feather="heart" class="absolute top-2 right-2 text-gray-400"></i>
203
+ </div>
204
+ <span class="text-xs bg-yellow-100 text-gray-800 px-2 py-1 rounded">Çimento</span>
205
+ <div class="text-sm font-bold mt-1 line-clamp-2">Çimento 50 KG CEM I 42.5 R</div>
206
+ <div class="flex items-center mt-1">
207
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
208
+ <span class="text-xs text-green-500">Stokta</span>
209
+ </div>
210
+ <div class="mt-2">
211
+ <div class="text-xs text-gray-500 line-through">₺125.00</div>
212
+ <div class="text-base font-bold">₺150.00</div>
213
+ <div class="text-xs text-gray-500">/ Adet</div>
214
+ </div>
215
+ <button class="bg-yellow-400 rounded-lg w-9 h-9 flex items-center justify-center absolute bottom-3 right-3">
216
+ <i data-feather="plus" class="text-gray-800"></i>
217
+ </button>
218
+ </div>
219
+ <!-- Repeat product cards as needed -->
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Recent Orders -->
224
+ <div class="mt-6 mx-4 bg-yellow-50 rounded-xl p-4">
225
+ <div class="flex items-center">
226
+ <i data-feather="users" class="text-yellow-400 w-6 h-6 mr-2"></i>
227
+ <div>
228
+ <div class="font-bold text-sm">Son 24 Saatte</div>
229
+ <div class="text-yellow-500 font-bold">847 sipariş verildi</div>
230
+ <div class="text-xs text-gray-500">Buca'ya 234 ton malzeme gönderildi</div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Blog/Education Content -->
236
+ <div class="mt-6 px-4">
237
+ <h2 class="text-lg font-bold mb-3">İnşaat Rehberi</h2>
238
+ <div class="flex overflow-x-auto pb-2 gap-3">
239
+ <div class="flex-shrink-0 blog-card">
240
+ <div class="w-full h-32 bg-gray-200 rounded-t-xl"></div>
241
+ <div class="p-3">
242
+ <span class="text-xs bg-yellow-100 text-gray-800 px-2 py-1 rounded">Rehber</span>
243
+ <div class="font-bold text-sm mt-2 line-clamp-2">Dış Cephe İzolasyonu Nasıl Yapılır?</div>
244
+ <div class="text-xs text-gray-500 mt-1 line-clamp-2">İzolasyon malzemesi seçiminden...</div>
245
+ <div class="flex items-center justify-between mt-2">
246
+ <span class="text-xs text-gray-400">5 dk okuma</span>
247
+ <i data-feather="clock" class="text-gray-400 w-4 h-4"></i>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ <!-- Repeat blog cards as needed -->
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Bottom Navigation -->
257
+ <div class="fixed bottom-0 left-0 right-0 bg-white flex items-center justify-around py-2 card-shadow">
258
+ <div class="flex flex-col items-center text-yellow-400">
259
+ <i data-feather="home"></i>
260
+ <span class="text-xs">Ana Sayfa</span>
261
+ </div>
262
+ <div class="flex flex-col items-center text-gray-400">
263
+ <i data-feather="grid"></i>
264
+ <span class="text-xs">Kategoriler</span>
265
+ </div>
266
+ <div class="relative -top-4">
267
+ <div class="w-14 h-14 bg-yellow-400 rounded-full flex items-center justify-center shadow-lg">
268
+ <i data-feather="shopping-cart" class="text-gray-800"></i>
269
+ <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>
270
+ </div>
271
+ </div>
272
+ <div class="flex flex-col items-center text-gray-400">
273
+ <i data-feather="package"></i>
274
+ <span class="text-xs">Siparişler</span>
275
+ </div>
276
+ <div class="flex flex-col items-center text-gray-400">
277
+ <i data-feather="user"></i>
278
+ <span class="text-xs">Profil</span>
279
+ </div>
280
+ </div>
281
+
282
+ <script>
283
+ feather.replace();
284
+ </script>
285
+ </body>
286
+ </html>
login.html ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BuildMart Pro - Giriş</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #F5F6FA;
15
+ color: #2D3436;
16
+ }
17
+ h1, h2, h3 {
18
+ font-family: 'Poppins', sans-serif;
19
+ }
20
+ .numbers {
21
+ font-family: 'Space Mono', monospace;
22
+ }
23
+ .primary-bg { background-color: #2D3436; }
24
+ .accent-yellow { color: #F9CA24; }
25
+ .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
26
+ .primary-btn {
27
+ background-color: #F9CA24;
28
+ color: #2D3436;
29
+ border-radius: 12px;
30
+ padding: 14px 24px;
31
+ box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3);
32
+ }
33
+ .input-field {
34
+ background-color: #F5F6FA;
35
+ border-radius: 8px;
36
+ padding: 14px;
37
+ }
38
+ .input-field:focus {
39
+ border-bottom: 2px solid #F9CA24;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-100">
44
+ <div class="min-h-screen flex items-center justify-center p-4">
45
+ <div class="w-full max-w-md bg-white rounded-2xl card-shadow p-6">
46
+ <div class="text-center mb-8">
47
+ <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-4"></div>
48
+ <h1 class="text-2xl font-bold">Hoş Geldiniz</h1>
49
+ <p class="text-gray-500">Hesabınıza giriş yapın</p>
50
+ </div>
51
+
52
+ <form>
53
+ <div class="mb-4">
54
+ <label class="block text-xs text-gray-500 mb-2">E-posta Adresiniz</label>
55
+ <div class="relative">
56
+ <input type="email" placeholder="[email protected]" class="w-full input-field pl-10">
57
+ <i data-feather="mail" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="mb-2">
62
+ <label class="block text-xs text-gray-500 mb-2">Şifreniz</label>
63
+ <div class="relative">
64
+ <input type="password" placeholder="••••••••" class="w-full input-field pl-10 pr-10">
65
+ <i data-feather="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
66
+ <i data-feather="eye" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 cursor-pointer"></i>
67
+ </div>
68
+ </div>
69
+
70
+ <div class="text-right mb-6">
71
+ <a href="forgot-password.html" class="text-sm accent-yellow">Şifremi Unuttum</a>
72
+ </div>
73
+
74
+ <button type="submit" class="w-full primary-btn mb-6">Giriş Yap</button>
75
+ </form>
76
+
77
+ <div class="flex items-center my-6">
78
+ <div class="flex-grow border-t border-gray-300"></div>
79
+ <span class="mx-4 text-sm text-gray-400">veya</span>
80
+ <div class="flex-grow border-t border-gray-300"></div>
81
+ </div>
82
+
83
+ <button class="w-full flex items-center justify-center gap-3 py-3 px-4 border border-gray-300 rounded-xl mb-6">
84
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
85
+ <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
86
+ <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
87
+ <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
88
+ <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
89
+ </svg>
90
+ Google ile Giriş
91
+ </button>
92
+
93
+ <div class="text-center">
94
+ <p class="text-gray-500">Hesabınız yok mu? <a href="register.html" class="accent-yellow font-medium">Kayıt Olun</a></p>
95
+ </div>
96
+ </div>
97
+
98
+ <script>
99
+ feather.replace();
100
+ </script>
101
+ </div>
102
+ </body>
103
+ </html>
register.html ADDED
@@ -0,0 +1,243 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BuildMart Pro - Kayıt</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #F5F6FA;
15
+ color: #2D3436;
16
+ }
17
+ h1, h2, h3 {
18
+ font-family: 'Poppins', sans-serif;
19
+ }
20
+ .numbers {
21
+ font-family: 'Space Mono', monospace;
22
+ }
23
+ .primary-bg { background-color: #2D3436; }
24
+ .accent-yellow { color: #F9CA24; }
25
+ .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
26
+ .primary-btn {
27
+ background-color: #F9CA24;
28
+ color: #2D3436;
29
+ border-radius: 12px;
30
+ padding: 14px 24px;
31
+ box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3);
32
+ }
33
+ .input-field {
34
+ background-color: #F5F6FA;
35
+ border-radius: 8px;
36
+ padding: 14px;
37
+ }
38
+ .input-field:focus {
39
+ border-bottom: 2px solid #F9CA24;
40
+ }
41
+ .membership-btn.active {
42
+ background-color: #F9CA24;
43
+ color: #2D3436;
44
+ }
45
+ .membership-btn.inactive {
46
+ background-color: #FFFFFF;
47
+ border: 1px solid #E5E5E5;
48
+ color: #636E72;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-100">
53
+ <div class="min-h-screen flex items-center justify-center p-4">
54
+ <div class="w-full max-w-md bg-white rounded-2xl card-shadow p-6">
55
+ <div class="text-center mb-8">
56
+ <h1 class="text-2xl font-bold">Kayıt Olun</h1>
57
+ <p class="text-gray-500">Yeni hesap oluşturun</p>
58
+ </div>
59
+
60
+ <div class="flex gap-3 mb-6">
61
+ <button class="flex-1 flex flex-col items-center justify-center py-3 px-4 membership-btn active rounded-xl">
62
+ <i data-feather="user" class="mb-2"></i>
63
+ <span>Bireysel Üyelik</span>
64
+ </button>
65
+ <button class="flex-1 flex flex-col items-center justify-center py-3 px-4 membership-btn inactive rounded-xl">
66
+ <i data-feather="building" class="mb-2"></i>
67
+ <span>Kurumsal Üyelik</span>
68
+ </button>
69
+ </div>
70
+
71
+ <form id="individual-form">
72
+ <div class="grid grid-cols-2 gap-4 mb-4">
73
+ <div>
74
+ <label class="block text-xs text-gray-500 mb-2">Adınız</label>
75
+ <div class="relative">
76
+ <input type="text" placeholder="Mehmet" class="w-full input-field pl-10">
77
+ <i data-feather="user" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
78
+ </div>
79
+ </div>
80
+ <div>
81
+ <label class="block text-xs text-gray-500 mb-2">Soyadınız</label>
82
+ <div class="relative">
83
+ <input type="text" placeholder="Yılmaz" class="w-full input-field pl-10">
84
+ <i data-feather="user" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="mb-4">
90
+ <label class="block text-xs text-gray-500 mb-2">Telefon Numaranız</label>
91
+ <div class="relative">
92
+ <div class="absolute left-3 top-1/2 transform -translate-y-1/2 bg-gray-200 px-2 py-1 rounded text-sm">+90</div>
93
+ <input type="tel" placeholder="5XX XXX XX XX" class="w-full input-field pl-16">
94
+ <i data-feather="phone" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="mb-4">
99
+ <label class="block text-xs text-gray-500 mb-2">E-posta Adresiniz</label>
100
+ <div class="relative">
101
+ <input type="email" placeholder="[email protected]" class="w-full input-field pl-10">
102
+ <i data-feather="mail" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="mb-4">
107
+ <label class="block text-xs text-gray-500 mb-2">Şifre</label>
108
+ <div class="relative">
109
+ <input type="password" placeholder="••••••••" class="w-full input-field pl-10">
110
+ <i data-feather="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
111
+ </div>
112
+ <div class="mt-2 h-1 bg-gray-200 rounded-full overflow-hidden">
113
+ <div class="h-full bg-red-500 w-1/3"></div>
114
+ </div>
115
+ <p class="text-xs text-red-500 mt-1">Zayıf</p>
116
+ </div>
117
+
118
+ <div class="mb-6">
119
+ <label class="block text-xs text-gray-500 mb-2">Şifre Tekrar</label>
120
+ <div class="relative">
121
+ <input type="password" placeholder="••••••••" class="w-full input-field pl-10">
122
+ <i data-feather="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
123
+ </div>
124
+ </div>
125
+ </form>
126
+
127
+ <form id="corporate-form" class="hidden">
128
+ <div class="mb-4">
129
+ <label class="block text-xs text-gray-500 mb-2">Firma Adınız</label>
130
+ <div class="relative">
131
+ <input type="text" placeholder="ABC İnşaat Ltd. Şti." class="w-full input-field pl-10">
132
+ <i data-feather="building" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="grid grid-cols-2 gap-4 mb-4">
137
+ <div>
138
+ <label class="block text-xs text-gray-500 mb-2">Vergi Dairesi</label>
139
+ <input type="text" placeholder="Konak" class="w-full input-field">
140
+ </div>
141
+ <div>
142
+ <label class="block text-xs text-gray-500 mb-2">Vergi Numarası</label>
143
+ <div class="relative">
144
+ <input type="text" placeholder="1234567890" class="w-full input-field pl-10">
145
+ <i data-feather="hash" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="mb-4">
151
+ <label class="block text-xs text-gray-500 mb-2">Yetkili Kişi</label>
152
+ <div class="relative">
153
+ <input type="text" placeholder="Mehmet Yılmaz" class="w-full input-field pl-10">
154
+ <i data-feather="user" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="mb-4">
159
+ <label class="block text-xs text-gray-500 mb-2">Telefon Numaranız</label>
160
+ <div class="relative">
161
+ <div class="absolute left-3 top-1/2 transform -translate-y-1/2 bg-gray-200 px-2 py-1 rounded text-sm">+90</div>
162
+ <input type="tel" placeholder="5XX XXX XX XX" class="w-full input-field pl-16">
163
+ <i data-feather="phone" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="mb-4">
168
+ <label class="block text-xs text-gray-500 mb-2">E-posta Adresiniz</label>
169
+ <div class="relative">
170
+ <input type="email" placeholder="[email protected]" class="w-full input-field pl-10">
171
+ <i data-feather="mail" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="mb-4">
176
+ <label class="block text-xs text-gray-500 mb-2">Şifre</label>
177
+ <div class="relative">
178
+ <input type="password" placeholder="••••••••" class="w-full input-field pl-10">
179
+ <i data-feather="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="mb-6">
184
+ <label class="block text-xs text-gray-500 mb-2">Şifre Tekrar</label>
185
+ <div class="relative">
186
+ <input type="password" placeholder="••••••••" class="w-full input-field pl-10">
187
+ <i data-feather="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
188
+ </div>
189
+ </div>
190
+ </form>
191
+
192
+ <div class="mb-6">
193
+ <label class="flex items-start gap-2 mb-3">
194
+ <input type="checkbox" class="mt-1">
195
+ <span class="text-sm">KVKK Aydınlatma Metni'ni okudum, kabul ediyorum. <a href="#" class="accent-yellow">KVKK Metni</a></span>
196
+ </label>
197
+ <label class="flex items-start gap-2 mb-3">
198
+ <input type="checkbox" class="mt-1">
199
+ <span class="text-sm">Kullanım Koşulları ve Gizlilik Politikası'nı kabul ediyorum. <a href="#" class="accent-yellow">Koşullar</a></span>
200
+ </label>
201
+ <label class="flex items-start gap-2">
202
+ <input type="checkbox" class="mt-1" checked>
203
+ <span class="text-sm">Kampanya ve fırsatlardan haberdar olmak istiyorum</span>
204
+ </label>
205
+ </div>
206
+
207
+ <button class="w-full primary-btn mb-6">Hesap Oluştur</button>
208
+
209
+ <div class="text-center">
210
+ <p class="text-gray-500">Zaten hesabınız var mı? <a href="login.html" class="accent-yellow font-medium">Giriş Yapın</a></p>
211
+ </div>
212
+ </div>
213
+
214
+ <script>
215
+ feather.replace();
216
+
217
+ // Toggle between individual and corporate forms
218
+ const individualBtn = document.querySelector('.membership-btn:nth-child(1)');
219
+ const corporateBtn = document.querySelector('.membership-btn:nth-child(2)');
220
+ const individualForm = document.getElementById('individual-form');
221
+ const corporateForm = document.getElementById('corporate-form');
222
+
223
+ individualBtn.addEventListener('click', () => {
224
+ individualBtn.classList.add('active');
225
+ individualBtn.classList.remove('inactive');
226
+ corporateBtn.classList.add('inactive');
227
+ corporateBtn.classList.remove('active');
228
+ individualForm.classList.remove('hidden');
229
+ corporateForm.classList.add('hidden');
230
+ });
231
+
232
+ corporateBtn.addEventListener('click', () => {
233
+ corporateBtn.classList.add('active');
234
+ corporateBtn.classList.remove('inactive');
235
+ individualBtn.classList.add('inactive');
236
+ individualBtn.classList.remove('active');
237
+ corporateForm.classList.remove('hidden');
238
+ individualForm.classList.add('hidden');
239
+ });
240
+ </script>
241
+ </div>
242
+ </body>
243
+ </html>
splash.html ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BuildMart Pro - Hoşgeldiniz</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&family=Space+Mono&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #F5F6FA;
16
+ color: #2D3436;
17
+ }
18
+ h1, h2, h3 {
19
+ font-family: 'Poppins', sans-serif;
20
+ }
21
+ .numbers {
22
+ font-family: 'Space Mono', monospace;
23
+ }
24
+ .primary-bg { background-color: #2D3436; }
25
+ .accent-yellow { color: #F9CA24; }
26
+ .card-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
27
+ .primary-btn {
28
+ background-color: #F9CA24;
29
+ color: #2D3436;
30
+ border-radius: 12px;
31
+ padding: 14px 24px;
32
+ box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3);
33
+ }
34
+ .dot-active { background-color: #F9CA24; }
35
+ .dot-inactive { background-color: #B2BEC3; }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-100">
39
+ <!-- Splash Screen -->
40
+ <div id="splash-screen" class="fixed inset-0 flex items-center justify-center primary-bg z-50">
41
+ <div class="text-center">
42
+ <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
43
+ <rect x="20" y="20" width="80" height="80" rx="12" fill="white"/>
44
+ <circle cx="60" cy="60" r="20" fill="#F9CA24"/>
45
+ </svg>
46
+ </div>
47
+ </div>
48
+
49
+ <!-- Onboarding Screens -->
50
+ <div id="onboarding-container" class="hidden">
51
+ <!-- Screen 1 -->
52
+ <div class="onboarding-screen min-h-screen flex flex-col items-center justify-center px-6 bg-white">
53
+ <button id="skip-btn" class="absolute top-6 right-6 text-sm text-gray-500">Atla</button>
54
+ <div class="mb-8">
55
+ <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
56
+ <rect x="20" y="20" width="80" height="80" rx="12" fill="#F9CA24"/>
57
+ <circle cx="60" cy="60" r="20" fill="#2D3436"/>
58
+ </svg>
59
+ </div>
60
+ <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">En Uygun Fiyatlarla İnşaat Malzemesi</h1>
61
+ <p class="text-center text-gray-500 mb-12">Nakliye dahil fiyatlarla kapınıza teslim</p>
62
+ <div class="flex space-x-2 mb-8">
63
+ <div class="w-3 h-3 rounded-full dot-active"></div>
64
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
65
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
66
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
67
+ </div>
68
+ <button class="primary-btn w-full next-screen">İlerle</button>
69
+ </div>
70
+
71
+ <!-- Screen 2 -->
72
+ <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white">
73
+ <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button>
74
+ <div class="mb-8">
75
+ <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
76
+ <rect x="20" y="40" width="80" height="40" rx="8" fill="#F9CA24"/>
77
+ <circle cx="40" cy="80" r="10" fill="#2D3436"/>
78
+ <circle cx="80" cy="80" r="10" fill="#2D3436"/>
79
+ </svg>
80
+ </div>
81
+ <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Hızlı ve Güvenli Teslimat</h1>
82
+ <p class="text-center text-gray-500 mb-12">İzmir'in her ilçesine aynı gün teslimat</p>
83
+ <div class="flex space-x-2 mb-8">
84
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
85
+ <div class="w-3 h-3 rounded-full dot-active"></div>
86
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
87
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
88
+ </div>
89
+ <button class="primary-btn w-full next-screen">İlerle</button>
90
+ </div>
91
+
92
+ <!-- Screen 3 -->
93
+ <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white">
94
+ <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button>
95
+ <div class="mb-8">
96
+ <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
97
+ <rect x="30" y="30" width="60" height="40" rx="4" fill="#F9CA24"/>
98
+ <rect x="40" y="45" width="40" height="10" fill="#2D3436"/>
99
+ </svg>
100
+ </div>
101
+ <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Bölgenize Özel Fiyatlar</h1>
102
+ <p class="text-center text-gray-500 mb-12">Nakliye maliyeti otomatik hesaplanır</p>
103
+ <div class="flex space-x-2 mb-8">
104
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
105
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
106
+ <div class="w-3 h-3 rounded-full dot-active"></div>
107
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
108
+ </div>
109
+ <button class="primary-btn w-full next-screen">İlerle</button>
110
+ </div>
111
+
112
+ <!-- Screen 4 -->
113
+ <div class="onboarding-screen min-h-screen hidden flex-col items-center justify-center px-6 bg-white">
114
+ <button class="absolute top-6 right-6 text-sm text-gray-500">Atla</button>
115
+ <div class="mb-8">
116
+ <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
117
+ <circle cx="60" cy="50" r="20" fill="#F9CA24"/>
118
+ <rect x="40" y="80" width="40" height="20" rx="4" fill="#2D3436"/>
119
+ </svg>
120
+ </div>
121
+ <h1 class="text-3xl font-bold text-center mb-4 text-gray-800">Akıllı Fiyatlandırma</h1>
122
+ <p class="text-center text-gray-500 mb-12">Gerçek zamanlı fiyat güncellemeleri</p>
123
+ <div class="flex space-x-2 mb-8">
124
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
125
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
126
+ <div class="w-3 h-3 rounded-full dot-inactive"></div>
127
+ <div class="w-3 h-3 rounded-full dot-active"></div>
128
+ </div>
129
+ <a href="login.html" class="primary-btn w-full">Başla</a>
130
+ </div>
131
+ </div>
132
+
133
+ <script>
134
+ // Splash screen animation
135
+ document.addEventListener('DOMContentLoaded', function() {
136
+ const splashScreen = document.getElementById('splash-screen');
137
+ const onboardingContainer = document.getElementById('onboarding-container');
138
+
139
+ setTimeout(() => {
140
+ splashScreen.classList.add('hidden');
141
+ onboardingContainer.classList.remove('hidden');
142
+ }, 2000);
143
+
144
+ // Onboarding navigation
145
+ const screens = document.querySelectorAll('.onboarding-screen');
146
+ const dots = document.querySelectorAll('.dot-active, .dot-inactive');
147
+ let currentScreen = 0;
148
+
149
+ document.querySelectorAll('.next-screen').forEach((button, index) => {
150
+ button.addEventListener('click', () => {
151
+ screens[currentScreen].classList.add('hidden');
152
+ currentScreen++;
153
+
154
+ if (currentScreen < screens.length) {
155
+ screens[currentScreen].classList.remove('hidden');
156
+ updateDots();
157
+ }
158
+ });
159
+ });
160
+
161
+ document.getElementById('skip-btn').addEventListener('click', () => {
162
+ window.location.href = 'login.html';
163
+ });
164
+
165
+ function updateDots() {
166
+ dots.forEach((dot, index) => {
167
+ if (index === currentScreen) {
168
+ dot.classList.remove('dot-inactive');
169
+ dot.classList.add('dot-active');
170
+ } else {
171
+ dot.classList.remove('dot-active');
172
+ dot.classList.add('dot-inactive');
173
+ }
174
+ });
175
+ }
176
+ });
177
+ </script>
178
+ </body>
179
+ </html>