Batu Market, telefonlardaki uygulama mağazasının ruhunu taşıyan, tarayıcıda çalışan bir mağaza uygulaması. Ana sayfa, arama, kategoriler, uygulama detay sayfası, kitaplık ve trend uygulamalar ekranları ayrı ayrı tarif ediliyor; gerçek uygulamalar gerçeğe yakın indirme sayısı, puan ve geliştirici adıyla listeleniyor.
Yorumların en sonuncusu her zaman "Batu kanalına abone ol" oluyor, bunun gibi küçük sürprizler de isteniyor. Proje Three.js ile birden fazla dosyaya bölünüyor.
Görevin: "Batu Market" adlı, Google Play Store'dan ilham alan,
tamamen işlevsel ve oynanabilir bir tarayıcı uygulaması geliştirmek.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 DOSYA YAPISI (zorunlu, birden fazla dosya)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
index.html → Ana sayfa (Play Store ana ekranı)
store.css → Tüm stiller, animasyonlar, tema
store.js → Uygulama mantığı, Three.js sahneleri, veri yönetimi
apps-data.js → Sahte uygulama veritabanı (en az 20 uygulama)
three-scene.js → Three.js 3D arka plan / hero sahnesi
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📦 KULLANILACAK KÜTÜPHANELER (CDN ile)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Three.js (r128+) → 3D arka plan efektleri, uygulama ikonları 3D dönen küre
- Google Material Icons (fonts.googleapis.com) → Tüm ikonlar bu paketten
- Google Fonts → "Roboto" veya "Nunito" font ailesi
- Vanilla HTML5 / CSS3 / JavaScript (framework yok)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 VİZYON & TASARIM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Uygulama Google Play Store'un ruhunu taşımalı ama "Batu Market"
kendi kimliğine sahip olmalı. Ana renk paleti: koyu mor + elektrik mavisi
+ altın sarısı gradyanlar. Dark mode zorunlu.
Three.js ile MUTLAKA şunları yap:
→ Ana sayfada arka planda yavaşça dönen 3D uygulama ikonları küresi
(tıpkı bir gezegen etrafında dönen uydular gibi)
→ "Öne Çıkan Uygulama" hero kartında Three.js ile gerçek zamanlı
parlama/ışık efekti (shader kullan)
→ Uygulama detay sayfasına geçişte Three.js parçacık patlaması (particle burst)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🗂️ EKRANLAR & FONKSİYONELLİK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. ANA SAYFA (Home)
- Üst: Arama çubuğu (gerçekten çalışan, anlık filtreleme)
- "Editörün Seçimi" banner → Three.js hero efekti
- Kategoriler: Oyunlar / Araçlar / Sosyal / Eğlence / Eğitim
- "Trend Uygulamalar" yatay kaydırmalı liste
- "Sana Özel" bölümü
2. KATEGORİ SAYFASI
- Grid ve liste görünümü arasında geçiş (animasyonlu)
- Sıralama: Puan / İndirme / Yenilik
3. UYGULAMA DETAY SAYFASI
- App ikonu (Three.js ile dönen 3D versiyon)
- Ekran görüntüleri carousel (swiping çalışır)
- Yıldız puanlama sistemi (tıklanabilir, localStorage'a kaydeder)
- "Yükle" butonu → animasyonlu progress bar → "Aç" butonuna dönüşür
- Sahte yorumlar bölümü
- "Benzer Uygulamalar" önerisi
4. KİTAPLIĞIM (Library)
- "Yüklenen" uygulamalar gösterimi
- localStorage ile kalıcı
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📡 GERÇEK TREND UYGULAMALAR & LOGOLAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
"Trend Uygulamalar" bölümünde GERÇEK, güncel uygulamalar gösterilmeli.
Her uygulamanın logosu resmi çekilmeli,
SVG veya emoji kullanma — gerçek logo görseli zorunlu.
Şu uygulamaları mutlaka dahil et:
→ TikTok
→ Instagram
→ WhatsApp
→ YouTube
→ Spotify
→ Snapchat
→ Telegram
→ ChatGPT
→ Capcut
→ Netflix
Her logo için fallback olarak:
→ img.onerror tetiklenirse dinamik canvas ile uygulama
adının baş harfinden gradyan ikon üret (gerçek Play Store mantığı)
İndirme sayıları ve puanları gerçekmiş gibi göster
(TikTok: 5B+ indirme, 4.4★ gibi — gerçek verilere yakın)
Uygulamaya tıklandığında detay sayfasında:
→ Resmi açıklamanın Türkçe çevirisini yaz
→ Gerçek geliştirici adını göster (ByteDance, Meta, Google LLC vb.)
→ Gerçek kategoriyi ve içerik derecelendirmesini ekle
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
😄 GİZLİ EASTER EGGS & KOMİK DETAYLAR
(bunlar şart, yaratıcılık sana ait)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Store'da mutlaka bu tür sahte uygulamalar olsun:
→ "Ödev Yapan AI" — 4.9 yıldız, 50 Milyon indirme, "Öğretmenler tarafından
tavsiye edilmez" rozetli
→ "Ex Takipçi Pro" — Kaldırılmış görünsün (kırmızı banner: "Google tarafından
kaldırıldı - sebep: çok etkili")
→ "Uyku Simülatörü" — Açıklaması: "Hiçbir şey yapmaz. Sadece açık bırakırsın.
5 yıldız hak ediyor."
→ Başka komik uygulamalar da ekle, hayal gücünü kullan
Kullanıcı Konuşma Balonları (yorumlar bölümünde):
→ "Bu uygulamayı indirdikten sonra hayatım değişti. Kötüye."
→ "Annem de indirdi, şimdi benden iyi kullanıyor. Üzücü."
→ En son yorum her zaman: "Batu kanalına abone ol" olsun ve
bu yorumun altında 847 kişi beğenmiş gözüksün
"Yükle" butonuna basınca:
→ Progress bar'ın tam %99'unda 3 saniye beklesin,
ardından "Beklenmeyen hata (ama aslında tamam)" yazısı çıksın,
sonra yine tamamlansın
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🌟 GRAFİK KALİTESİ GEREKSİNİMLERİ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Tüm geçişler: cubic-bezier easing, minimum 300ms
- Kartlar: cam morphism efekti (backdrop-filter: blur)
- İkon arka planları: dinamik mesh gradient (CSS animated)
- Yükleme animasyonları: skeleton screen (gerçek Play Store gibi)
- Hover efektleri: 3D tilt (perspective transform)
- Her uygulama ikonu kendi renk paletinden otomatik gradyan arka plan almalı
- Responsive: mobil öncelikli tasarım
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔧 TEKNİK ZORUNLULUKLAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Hiçbir backend yok, tamamen client-side
- localStorage: yüklü uygulamalar, puanlamalar, arama geçmişi
- Tüm metinler Türkçe
- Three.js renderer'ı CSS canvas üzerine absolute position ile bindirme
- requestAnimationFrame döngüsü optimize edilmiş olmalı
- Tüm CDN linkleri çalışır durumda olmalı
- Kod yorumları Türkçe
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️ KURAL: Sıradan, jenerik bir tasarım yapma.
Her element dikkat çekici olmalı. Bir kullanıcı
uygulamayı açtığında "vay be" demeli.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Yorumlar
Yorum Yap