🔖 Modern Bookmark Yöneticisi: Web Sitelerinizi Organize Etmenin En Kolay Yolu

Giriş

İnternet üzerinde gezinirken karşılaştığımız yararlı web sitelerini nasıl organize ediyorsunuz? Tarayıcının kendi bookmark sistemi kullanışlı olsa da, bazen daha fazla kontrol ve organizasyon istiyoruz. İşte bu ihtiyaçtan doğan modern bir çözüm: HTML Bookmark Yöneticisi.

Bu proje, vanilla JavaScript, HTML5 ve CSS3 kullanılarak geliştirilmiş, tamamen client-side çalışan bir web uygulamasıdır. En güzel yanı ise herhangi bir sunucu kurulumu gerektirmemesi ve verilerinizin tamamen tarayıcınızda güvenle saklanmasıdır.

🎯 Neden Bu Projeyi Geliştirdim?

Modern internet kullanıcısının karşılaştığı en büyük problemlerden biri, bookmark yönetimi. Özellikle:

  • Kategorizasyon: Film siteleri, anime siteleri, torrent siteleri gibi farklı kategorilerde onlarca site
  • Taşınabilirlik: Farklı tarayıcılar arası geçiş
  • Paylaşım: Bookmark koleksiyonlarını arkadaşlarla paylaşma
  • Organizasyon: Uzun listelerde istenen siteyi bulma zorluğu

Bu ihtiyaçlardan yola çıkarak, hem kullanım kolaylığı hem de güçlü özellikler sunan bir çözüm geliştirdim.

✨ Öne Çıkan Özellikler

1. 📁 Akıllı Kategori Yönetimi

• Film Websiteleri
• Anime Platformları  
• Torrent Siteleri
• Streaming Servisleri
• Uzakdoğu Dizileri

Her kategoriyi istediğiniz şekilde adlandırabilir, kolayca ekleyip silebilirsiniz.

2. 🔗 Hızlı URL Ekleme

  • Otomatik HTTP/HTTPS düzeltme
  • Kategori bazlı organizasyon
  • Duplicate kontrol sistemi
  • Tek tıkla silme özelliği

3. 📄 Çift Formatlı Export

  • Temalı HTML: Güzel görünüm, açılır-kapanır kategoriler
  • Tarayıcı Uyumlu: Firefox, Chrome’a direk aktarım

4. 📥 Import Özelliği

  • Mevcut bookmark.html dosyalarını içe aktarma
  • Farklı format desteği
  • Duplicate önleme
  • Akıllı kategori tanıma

5. 💾 Güvenli Depolama

  • localStorage API kullanımı
  • Otomatik kaydetme
  • Veri kaybı koruması
  • Offline çalışma

🚀 Kullanım Senaryoları

Senaryo 1: Anime Severlerin Favorisi

Kategori: "Anime Platformları"
• Crunchyroll → https://crunchyroll.com
• Funimation → https://funimation.com
• AnimePahe → https://animepahe.com

Senaryo 2: Film Tutkunları İçin

Kategori: "Streaming Servisleri"
• Netflix → https://netflix.com
• Amazon Prime → https://primevideo.com
• Disney+ → https://disneyplus.com

Senaryo 3: Torrent Kullanıcıları

Kategori: "Torrent Siteleri"
• The Pirate Bay → https://thepiratebay[dot]org
• 1337x → https://1337x[dot]to
• RARBG → https://rarbg[dot]to

🛠️ Teknik Özellikler

Frontend Teknolojileri

  • HTML5: Semantic yapı, modern etiketler
  • CSS3: Grid, Flexbox, animasyonlar, gradientler
  • Vanilla JavaScript: Framework bağımsız, hızlı çalışma

Responsive Tasarım

@media (max-width: 768px) {
    /* Mobil uyumlu stil düzenlemeleri */
    .container { padding: 15px; }
    h1 { font-size: 2em; }
}

LocalStorage Kullanımı

// Otomatik kaydetme
function saveToStorage() {
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

// Sayfa yüklendiğinde geri yükleme
function loadFromStorage() {
    const saved = localStorage.getItem('bookmarks');
    if (saved) {
        bookmarks = JSON.parse(saved);
    }
}

📱 Temalı HTML Export Özelliği

Export edilen HTML dosyalarında şu özellikleri bulacaksınız:

Visual Enhancements

  • Gradient arkaplanlar: Modern görünüm
  • Açılır-kapanır kategoriler: Uzun listelerde kolayca gezinme
  • Hover efektleri: İnteraktif deneyim
  • İkonlar: 📁 kategori, 🔗 link ikonları

Interactive Features

// Kategori açma/kapama
function toggleCategory(categoryId) {
    const bookmarkList = document.getElementById(categoryId);
    // Smooth animation ile açılır-kapanır
}

// Toplu işlemler
expandAll() // Tümünü aç
collapseAll() // Tümünü kapat

🎨 Kullanıcı Arayüzü

Ana Özellikler

  • İki sütunlu tasarım: Sol kontroller, sağ görüntüleme
  • Color-coded butonlar: Her işlem farklı renk
  • Gradient tema: Modern ve çekici görünüm
  • Türkçe arayüz: Tamamen yerelleştirilmiş

Keyboard Shortcuts

  • Ctrl + Enter: Kategori ekleme
  • Enter: URL ekleme
  • Responsive design: Mobil uyumlu

💡 Gelişmiş Kullanım İpuçları

1. Kategori Isimlendirme

✅ İyi: "Film Websiteleri", "Anime Platformları"
❌ Kötü: "Siteler", "Linkler"

2. URL Formatı

Program otomatik olarak https:// ekler, ama manuel de ekleyebilirsiniz:

netflix.com → https://netflix.com (otomatik)
https://netflix.com → https://netflix.com (değişmez)

3. Import İşlemi

  • Firefox/Chrome export’larını destekler
  • Kendi temalı HTML dosyalarını okur
  • Genel HTML sayfalarındaki linkleri toplar

📊 Performans ve Uyumluluk

Tarayıcı Desteği

  • ✅ Chrome/Chromium (88+)
  • ✅ Firefox (85+)
  • ✅ Safari (14+)
  • ✅ Edge (88+)
  • ✅ Opera (74+)

Dosya Boyutları

  • index.html: ~3KB
  • style.css: ~4KB
  • script.js: ~15KB
  • Toplam: ~22KB (çok hafif!)

🔧 Kurulum ve Dağıtım

Yerel Kurulum

# Projeyi indirin
git clone [repository-url]

# Dizine gidin
cd bookmark-manager

# HTML dosyasını açın
# Tarayıcınızda index.html'i açın

📝 Sonuç

Bu HTML Bookmark Yöneticisi, modern web geliştiricilerinin ihtiyaçlarını karşılamak için tasarlanmış, pratik ve güçlü bir araçtır. Vanilla JavaScript kullanarak framework bağımsızlığı, localStorage ile güvenli depolama ve responsive tasarım ile her cihazda mükemmel deneyim sunar.

Özellikle anime, film ve torrent sitelerini takip eden kullanıcılar için vazgeçilmez bir araç olan bu proje, bookmark yönetiminde yeni bir standart oluşturuyor.

‍💻 Geliştirici

xmtaha

Bu makale, HTML Bookmark Yöneticisi projesinin detaylı incelemesi ve kullanım kılavuzudur. Projede kullanılan teknolojiler ve özellikler hakkında kapsamlı bilgi vermek amacıyla yazılmıştır.