Roket Emojisi, genellikle bir girişimin başlatılması, hızlı ilerleme, başarı veya uzay ile ilgili konuları ifade etmek için kullanılır. Kripto para dünyasında to the moon (aya doğru) yükselişi temsil eder.
? Nerelerde Kullanılır?
Yeni bir proje lansmanında.
Hızlı artan istatistikleri paylaşırken.
Motivasyon ve hadi gidelim mesajlarında.
? Teknik Bilgiler
Unicode
U+1F680
HTML Entity
🚀
Kategori
Seyahat ve Yerler
Konu: Yüksek Otoriteli, SEO Odaklı, App-Style Emoji Sayfası Kodlaması
Talimat: Aşağıdaki teknik özelliklerin tamamını içeren, modern bir mobil uygulama (App) arayüzüne sahip tek bir emoji detay sayfası oluştur. Kodlamayı HTML, CSS ve JS olarak 3 ayrı blokta ve eksiksiz sağla.
1. Teknik Altyapı:
Görsel Kaynağı: Ana emoji görselini https://fonts.gstatic.com/s/e/notoemoji/latest/[UNICODE]/emoji.svg adresinden çek (Örn: X-Ray için 1fa7b). Görsel yüklenene kadar Skeleton Loading animasyonu kullan.
İkonlar: Arama, Paylaşma, Tema Değiştirme ve Kopyalama işlemleri için sadece Inline SVG ikonlar kullan (Harici kütüphane veya emoji karakteri kullanma).
SEO: Semantik HTML5 yapılarını (header, main, section, footer), h1-h2-h3 hiyerarşisini ve Adsense yerleşim alanlarını ekle.
2. UX ve Tasarım Özellikleri:
Dark/Light Mode: data-theme niteliği ve CSS değişkenleri ile yönetilen, kullanıcının tercihini localStorage ile hatırlayan bir tema sistemi kur.
Sticky Copy-Box: Sayfa aşağı kaydırıldığında kopyalama barı (copy-box) en üstte sabitlensin ve is-sticky sınıfı ile görsel olarak vurgulansın.
Arama Overlay: Sağ üstteki büyüteç ikonuna tıklandığında tam ekran, arka planı bulanık (backdrop-filter) bir arama arayüzü açılsın. Altında kategori butonları bulunsun.
Mikro Etkileşim: Kopyala butonuna basıldığında ekranda 6-8 adet yüzen emoji beliren bir Burst (patlama) animasyonu ve mobil cihazlar için Haptic Feedback (titreşim) ekle.
Lightbox: Ana emojiye tıklandığında tam ekran görüntüleme modu açılsın.
3. İçerik Yapısı:
Hero Section: Emoji görseli ve H1 başlığı.
Copy Section: Büyük kopyala butonu ve emoji önizlemesi.
Content Section: Anlam, kullanım alanları ve hap bilgiler (usage pills).
Tech Card: Unicode, Shortcode ve HTML kodlarının bulunduğu, her biri tıklandığında kopyalanan teknik bilgi kartları.
Footer: Tasarımla bütünleşik, linkler ve telif haklarını içeren alt bilgi alanı.
Kodlama Standartı: JavaScript vanilla olsun (No JQuery). CSS, GPU hızlandırmalı animasyonlar içersin. Lighthouse performans skoru odaklı, minimize ama tam fonksiyonel bir çıktı ver.
------
Modern ui ux ile mobile app tarzı emoji konulu bir websitesi yapmak istiyorum Blogger ile. Her emojinin kendine özel bir yayın/sayfası olacak. İçeriğinde başlık: "Kuru kafa emojisi kopyala", içerik: "büyük bir kuru kafa emojisi ve kopyala butonu, kuru kafa emojisi nedir manası nedir, bir emoji görseli, nerelerde nasıl kullanılır unicode teknik bilgiler kategorisi, benzer emojiler vs" gibi emoji hakkında detaylı bir yazı olacak. Ana sayfada da emojiler görsel olarak grid yapıda infinite scroll olarak listelenip ilgili yayınlara yönlendirilecek.
> Sen kıdemli bir Senior Frontend Architect, SEO uzmanı ve UX performans danışmanısın. Senden, Blogger (XML) altyapısı için geliştirilmiş, ultra hızlı, SEO-first, mobil odaklı ve Web App hissi veren bir emoji sitesi teması oluşturmanı istiyorum. Bu tema Google AdSense ile gelir elde etmek ve organik trafik çekmek amacıyla kullanılacaktır. Bu yüzden hem performans (Lighthouse ≥ 90) hem de SEO (schema, semantic HTML) kusursuz olmalıdır.
---
## ? PROJE AMACI
* Site türü: Emoji keşfetme ve kopyalama sitesi
* Ana kullanıcı aksiyonu:
* Emoji aramak (live search)
* Emoji görseline tıklayıp detay sayfasına gitmek
* Tek tıkla kopyalamak
* Trafik kaynağı: SEO (Google)
* Gelir modeli: Google AdSense
---
## ⚡ ÖNCELİKLER (STRICT)
1. Mobil performans (EN KRİTİK)
2. SEO uyumluluğu (schema dahil)
3. Minimal DOM + düşük JS
4. UX sadeliği (Less is More)
---
## ? TASARIM FELSEFESİ
* Tamamen mobil-first
* Web App hissi (native app gibi)
* Gereksiz hiçbir element YOK
* Görsellik yayınlarda yer alan emoji görselleri üzerinden sağlanacak
* CLS (layout shift) kesinlikle olmamalı
---
## ? UI / UX DETAYLARI
### Renk Sistemi
* modern ui ux 2026 trendleri
* CSS `:root` değişkenleri kullanılmalı
* Dark mode:
* Default: kullanıcının sistem tercihi (`prefers-color-scheme`)
* Manuel toggle: localStorage ile kayıt
---
### Typography
* Font:
```css
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
```
* Harici font yüklenmeyecek (performans için)
---
## ? HEADER (Sticky)
* Sabit (position: sticky / fixed)
* Yükseklik: 56px
* İçerik:
* Sol: geri butonu svg icon (`history.back()`)
* SADECE post sayfasında görünür
* Orta: site adı (text logo, h1 veya strong)
* Sağ: dark mode toggle svg icon
---
## ? BOTTOM NAVIGATION
* Sabit (fixed bottom)
* 2 buton:
* Ana Sayfa svg buton
* Arama svg buton
* iOS safe-area uyumlu (`env(safe-area-inset-bottom)`)
---
## ? ARAMA SİSTEMİ (KRİTİK)
### Arama Overlay
* Fullscreen overlay (position: fixed)
* Açılış/kapanış:
* opacity + transform
* 150–200ms
### İçerik:
* Büyük input (min-height: 48px)
* Grid Kategoriler listesi doğrudan kategori sayfasına link verir.
* Live search (JS ile anlık filtreleme)
* Altında:
* Emoji sonuçları (grid)
* Kategoriler (label listesi + emoji)
---
### Live Search Kuralları
* Sayfa yenilemeden çalışmalı
* JS minimal olmalı
* Sadece gerekli DOM üzerinde çalışmalı
* Büyük dataset için optimize edilmeli
---
## ? GRID SİSTEMİ
### Ana Sayfa / Label / Search
* Responsive grid:
* Desktop: 5 kolon
* Tablet: 4 kolon
* Mobil: 3 kolon
* Gap: 8px
### Emoji Kart
* Kare oran (aspect-ratio: 1/1)
* Ortalanmış emoji görseli
* Minimal interaction:
* hover/tap → scale(1.05)
---
## ? POST SAYFASI (EMOJI DETAY)
### İçerik:
* Büyük emoji + kopyala butonu -w/ svg icon
* Altında:
* Başlık (SEO uyumlu)
* Format:
**"? Gülen Yüz Emojisi Kopyala"**
* Açıklama (max ~150 karakter)
---
### Kopyalama Özelliği
* `navigator.clipboard.writeText()`
* Başarılı olunca:
* küçük toast feedback ("Kopyalandı")
---
## ? SEO & SCHEMA (ÇOK KRİTİK)
### Teknik SEO
* Semantic HTML zorunlu:
* ``, ``, ``, `