Gemini 3 çok başarılı olmuş. Saatlerdir uğraşıyorum çok zevkli.
Kendime kütüphane takip programı yazdırdım. Hemen hemen istediğim tüm özellikleri ekledi. Film aramada bir sıkıntı var ücretsiz ve apisiz bir veritabanı bulamadı nedense. Bir de veri import etmede bir sıkıntı var. Csv dosyalarını yüklerken bir sıkıntı yaşıyor, halledemezsem manuel girmem gerekecek.
İsteyene HTML kodu
Medya Kütüphanem V20
<style>
/* --- TEMEL TASARIM --- */
:root {
--primary: #4a90e2; --sidebar-bg: #ffffff; --main-bg: #f4f7f6;
--text: #333; --text-light: #666; --border: #e0e0e0; --input-bg: #fff;
--success: #27ae60; --danger: #e74c3c; --warning: #f1c40f; --info: #3498db;
--fav: #ff4757; --lent: #8e44ad; --radius: 12px; --shadow: 0 4px 12px rgba(0,0,0,0.08);
--color-kitap: #3498db; --color-film: #e74c3c; --color-dizi: #f1c40f;
--color-anime: #9b59b6; --color-manga: #e67e22; --color-tiyatro: #d63031;
}
body.dark-mode {
--primary: #6ab0ff; --sidebar-bg: #1e1e1e; --main-bg: #121212;
--text: #e0e0e0; --text-light: #aaa; --border: #333; --input-bg: #2d2d2d;
--shadow: 0 4px 12px rgba(0,0,0,0.4);
}
body { font-family: 'Segoe UI', sans-serif; background-color: var(--main-bg); color: var(--text); margin: 0; padding: 0; height: 100vh; display: flex; overflow: hidden; transition: background 0.3s; }
/* SIDEBAR */
.sidebar { width: 260px; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex-shrink: 0; }
.brand { font-size: 1.4rem; font-weight: bold; color: var(--primary); display: flex; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.nav-item { padding: 12px 15px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 12px; color: var(--text-light); font-weight: 600; transition: 0.2s; }
.nav-item:hover { background: rgba(0,0,0,0.05); color: var(--primary); }
.nav-item.active { background: var(--primary); color: white; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.sidebar-btn { padding: 10px; border: none; border-radius: var(--radius); cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 10px; color:white; font-size:13px;}
/* MAIN */
.main-content { flex-grow: 1; padding: 20px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; }
.page-title { font-size: 24px; font-weight: bold; }
.theme-toggle { background: none; border: 2px solid var(--primary); color: var(--primary); padding: 5px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; }
/* DASHBOARD */
.year-filter-container { display: flex; align-items: center; gap: 10px; background: var(--sidebar-bg); padding: 10px; border-radius: var(--radius); border: 1px solid var(--border); }
.year-select { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); cursor: pointer; }
/* AKTİF VİTRİN */
.active-section { margin-bottom: 10px; }
.active-grid { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.active-grid::-webkit-scrollbar { height: 6px; }
.active-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.active-card {
min-width: 240px; background: var(--sidebar-bg); padding: 15px; border-radius: var(--radius);
box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; align-items: center; gap: 15px;
}
.active-card img { width: 50px; height: 75px; object-fit: cover; border-radius: 6px; }
.active-info { flex-grow: 1; min-width: 0; }
.active-info h4 { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.active-info p { margin: 5px 0 0; font-size: 13px; color: var(--primary); font-weight: bold; }
.quick-btn {
width: 35px; height: 35px; border-radius: 50%; border: none; background: var(--success); color: white;
font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: transform 0.2s;
}
.quick-btn:hover { transform: scale(1.1); }
.recent-section h3 { margin: 0 0 15px 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; font-size: 16px; color: var(--text-light); }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.recent-card { background: var(--sidebar-bg); padding: 15px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; flex-direction: column; }
.recent-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.recent-item { display: flex; gap: 10px; align-items: center; font-size: 13px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.recent-item:last-child { border-bottom: none; }
.recent-img { width: 30px; height: 45px; object-fit: cover; border-radius: 4px; background: #ccc; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.top10-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.top10-table td { padding: 8px 5px; border-bottom: 1px solid var(--border); }
/* FORM & LIST */
.form-card { background: var(--sidebar-bg); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.full-width { grid-column: span 2; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--input-bg); color: var(--text); box-sizing: border-box; font-size: 14px; }
.special-fields { grid-column: span 2; background: rgba(74, 144, 226, 0.05); padding: 15px; border-radius: var(--radius); border: 1px dashed var(--primary); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-save { grid-column: span 2; background: var(--success); color: white; border: none; padding: 12px; border-radius: var(--radius); cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; }
.btn-cancel { grid-column: span 2; background: var(--text-light); color: white; border: none; padding: 10px; border-radius: var(--radius); cursor: pointer; display: none; text-align: center; }
.btn-search { color: white; border: none; padding: 0 15px; height: 40px; border-radius: var(--radius); cursor: pointer; font-weight: bold; }
.btn-itunes { background: #9b59b6; } .btn-tvmaze { background: #3c948b; } .btn-mal { background: #2e51a2; } .btn-google { background: #4285F4; }
.api-search-row { grid-column: span 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #f9f9f9; padding: 10px; border-radius: 8px; border: 1px solid #eee; }
/* LISTE */
.toolbar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.search-bar { flex-grow: 1; position: relative; max-width: 300px; }
.search-bar input { padding-left: 35px; }
.search-bar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); }
.library-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.item-card { background: var(--sidebar-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; overflow: hidden; border-left: 5px solid transparent; transition: transform 0.2s; position: relative; }
.item-card:hover { transform: translateY(-3px); }
.type-kitap { border-left-color: var(--color-kitap); } .type-film { border-left-color: var(--color-film); } .type-dizi { border-left-color: var(--color-dizi); }
.type-anime { border-left-color: var(--color-anime); } .type-manga { border-left-color: var(--color-manga); } .type-tiyatro { border-left-color: var(--color-tiyatro); }
.card-img { width: 85px; min-width: 85px; object-fit: cover; background: #ccc; }
.card-body { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.card-title { font-weight: bold; font-size: 15px; color: var(--primary); display: flex; justify-content: space-between; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.fav-icon { position: absolute; top: 10px; right: 10px; font-size: 16px; cursor: pointer; color: #ccc; transition: 0.2s; }
.fav-icon.active { color: var(--fav); }
.card-meta { font-size: 12px; color: var(--text-light); margin-top: 5px; }
.status-badge { padding: 3px 8px; border-radius: 4px; background: #eee; color: #333; font-size: 11px; display: inline-block; margin-top: 5px; }
.card-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }
.action-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-light); }
/* EXTRAS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal { background: var(--sidebar-bg); padding: 25px; border-radius: var(--radius); width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.goal-spacer { height: 30px; width: 100%; }
.goal-banner { background: var(--sidebar-bg); padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.progress-track { background: #e0e0e0; height: 12px; border-radius: 10px; overflow: hidden; width: 100%; }
.progress-fill { height: 100%; width: 0%; transition: width 0.5s; }
/* CALENDAR */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.calendar-day { background: var(--sidebar-bg); min-height: 100px; border-radius: 8px; border: 1px solid var(--border); padding: 5px; font-size: 12px; position: relative; }
.cal-date { font-weight: bold; margin-bottom: 5px; display: block; }
.cal-item img { width: 100%; height: 40px; object-fit: cover; border-radius: 4px; }
.api-result-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.api-result-item:hover { background: rgba(0,0,0,0.03); }
.fab-random { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.3s; z-index: 100; }
/* STATS */
.stat-box { background: var(--sidebar-bg); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; border-bottom: 4px solid var(--primary); }
.stat-num { font-size: 1.8rem; font-weight: bold; color: var(--text); }
.stat-label { font-size: 0.9rem; color: var(--text-light); }
@media (max-width: 768px) {
body { flex-direction: column; overflow-y: auto; }
.sidebar { width: 100%; height: auto; padding: 15px; border-bottom: 1px solid var(--border); }
.form-grid, .recent-grid, .calendar-grid, .dashboard-grid { grid-template-columns: 1fr; }
.full-width, .special-fields { grid-column: span 1; }
}
</style>
Kütüphanem V20
<div class="nav-item active" onclick="navigate('dashboard')"><i class="fas fa-home"></i> Genel Bakış</div>
<div class="nav-item" onclick="navigate('calendar')"><i class="fas fa-calendar-alt"></i> Takvim</div>
<div class="nav-item" onclick="navigate('stats')"><i class="fas fa-chart-pie"></i> İstatistikler</div>
<hr style="width:100%; border:0; border-top:1px solid var(--border);">
<div class="nav-item" onclick="navigate('kitap')"><i class="fas fa-book"></i> Kitaplar</div>
<div class="nav-item" onclick="navigate('film')"><i class="fas fa-film"></i> Filmler</div>
<div class="nav-item" onclick="navigate('dizi')"><i class="fas fa-tv"></i> Diziler</div>
<div class="nav-item" onclick="navigate('tiyatro')"><i class="fas fa-theater-masks"></i> Tiyatrolar</div>
<div class="nav-item" onclick="navigate('anime')"><i class="fas fa-ghost"></i> Animeler</div>
<div class="nav-item" onclick="navigate('manga')"><i class="fas fa-book-open"></i> Mangalar</div>
<div class="sidebar-footer">
<button onclick="exportData()" class="sidebar-btn" style="background:#27ae60;"><i class="fas fa-download"></i> Yedek Al</button>
<button onclick="document.getElementById('importFile').click()" class="sidebar-btn" style="background:#e67e22;"><i class="fas fa-upload"></i> Yedek Yükle</button>
<input type="file" id="importFile" style="display:none" onchange="importData(this)">
<div style="display:flex; gap:5px;">
<button onclick="downloadCSVTemplate()" class="sidebar-btn" style="background:#16a085; flex:1;"><i class="fas fa-file-csv"></i> Şablon</button>
<button onclick="document.getElementById('importCsvFile').click()" class="sidebar-btn" style="background:#8e44ad; flex:1;"><i class="fas fa-file-import"></i> CSV</button>
</div>
<input type="file" id="importCsvFile" accept=".csv" style="display:none" onchange="processCSV(this)">
</div>
<div class="year-filter-container">
<i class="fas fa-calendar-check"></i> <label>Yıl:</label>
<select id="dashYearFilter" class="year-select" onchange="renderDashboard()"><option value="all">Tüm Zamanlar</option></select>
</div>
<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin:15px 0;">
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-kitap);"><h5>Kitap</h5><h3 id="dash-kitap">0</h3></div>
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-film);"><h5>Film</h5><h3 id="dash-film">0</h3></div>
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-dizi);"><h5>Dizi</h5><h3 id="dash-dizi">0</h3></div>
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-tiyatro);"><h5>Tiyatro</h5><h3 id="dash-tiyatro">0</h3></div>
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-anime);"><h5>Anime</h5><h3 id="dash-anime">0</h3></div>
<div class="form-card" style="text-align:center; border-left:4px solid var(--color-manga);"><h5>Manga</h5><h3 id="dash-manga">0</h3></div>
</div>
<div class="dashboard-grid">
<div class="recent-section">
<h3 id="recentTitle">🔥 Son Aktiviteler</h3>
<div class="recent-grid" id="recentGrid"></div>
</div>
<div class="recent-section">
<h3>🏆 Top 10</h3>
<div class="dash-card">
<table class="top10-table"><tbody id="top10List"></tbody></table>
</div>
</div>
</div>
<div class="form-card">
<h3 id="formTitle" style="margin:0 0 15px 0;">Yeni Ekle</h3>
<form id="mainForm" class="form-grid">
<div class="api-search-row" id="apiSearchRow"></div>
<input type="text" id="title" placeholder="Ad / Başlık (Zorunlu)" required class="full-width">
<select id="status">
<option value="planlandi">📅 Planlandı</option> <option value="devam">⏳ Devam Ediyor</option>
<option value="bitti">✅ Bitti</option> <option value="birakildi">⛔ Bırakıldı</option>
</select>
<input type="number" id="rating" placeholder="Puan (1-10)" min="1" max="10">
<input type="text" id="imageUrl" placeholder="Resim URL">
<select id="source" style="display:none;"><option value="">Platform...</option><option value="Netflix">Netflix</option><option value="Disney+">Disney+</option><option value="Prime">Prime Video</option><option value="BluTV">BluTV</option><option value="Sinema">Sinema</option><option value="TV">TV</option><option value="Diğer">Diğer</option></select>
<input type="date" id="startDate" title="Başlama Tarihi"><input type="date" id="endDate" title="Bitiş Tarihi">
<input type="number" id="price" placeholder="Fiyat (TL)" style="display:none;"><input type="text" id="tags" placeholder="#Etiketler">
<div id="bookFields" class="special-fields" style="display:none;"><input type="text" id="isbn" placeholder="ISBN (Google Books)"><button type="button" onclick="fetchBook()" class="btn-search btn-google">Getir</button><input type="text" id="author" placeholder="Yazar"><input type="text" id="publisher" placeholder="Yayınevi"><div style="display:flex; gap:5px;"><input type="number" id="currentPage" placeholder="Okunan Syf."><input type="number" id="pageCount" placeholder="Toplam Syf."></div><select id="ownership" class="full-width"><option value="">Sahiplik...</option><option value="Var">Fiziksel</option><option value="Yok">Yok</option><option value="PDF">PDF</option><option value="ePUB">ePUB</option></select></div>
<div id="movieFields" class="special-fields" style="display:none;"><input type="text" id="director" placeholder="Yönetmen"><select id="country"><option value="">Ülke...</option><option value="TR">TR</option><option value="US">US</option><option value="GB">UK</option><option value="FR">FR</option><option value="DE">DE</option><option value="JP">JP</option><option value="KR">KR</option><option value="IN">IN</option><option value="Diğer">Diğer</option></select><input type="number" id="releaseYear" placeholder="Yapım Yılı"></div>
<div id="seriesFields" class="special-fields" style="display:none;"><input type="number" id="season" placeholder="Sezon"><div style="display:flex; gap:5px;"><input type="number" id="episode" placeholder="İzlenen Bl."><input type="number" id="totalEpisodes" placeholder="Toplam Bl."></div></div>
<div id="theaterFields" class="special-fields" style="display:none;"><input type="text" id="playwright" placeholder="Yazar"><input type="text" id="theaterDirector" placeholder="Yönetmen"><input type="text" id="stageName" placeholder="Sahne Adı" class="full-width"></div>
<div id="animeFields" class="special-fields" style="display:none;"><input type="text" id="animeGenre" placeholder="Tür"><div style="display:flex; gap:5px;"><input type="number" id="watchedEp" placeholder="İzl."><input type="number" id="totalEp" placeholder="Top."></div></div>
<div id="mangaFields" class="special-fields" style="display:none;"><input type="text" id="mangaka" placeholder="Mangaka"><input type="text" id="illustrator" placeholder="Çizer"><div style="display:flex; gap:5px;"><input type="number" id="readCh" placeholder="Oku."><input type="number" id="totalCh" placeholder="Top."></div></div>
<textarea id="notes" class="full-width" placeholder="Notlar..."></textarea>
<button type="submit" id="submitBtn" class="btn-save">Kaydet</button><div class="full-width" onclick="resetForm()" id="cancelBtn" style="text-align:center; cursor:pointer; color:#888; display:none;">İptal</div>
</form>
</div>
<div class="toolbar">
<div style="display:flex; gap:5px; align-items:center; flex-grow:1;"><div class="search-bar"><i class="fas fa-search"></i><input type="text" id="searchInput" placeholder="Ara..." onkeyup="renderLibrary()"></div><select id="listYearFilter" class="year-select" onchange="renderLibrary()"><option value="all">Tüm Yıllar</option></select></div>
<select id="sortSelect" style="width:auto; border-radius:20px; padding:8px 15px;" onchange="renderLibrary()"><option value="dateDesc">Tarih (Yeni)</option><option value="dateAsc">Tarih (Eski)</option><option value="fav">❤️ Favori</option></select>
<button onclick="exportExcel()" style="background:var(--success); color:white; border:none; padding:0 15px; border-radius:20px; cursor:pointer;">Excel</button>
</div>
<ul id="libraryList" class="library-list"></ul>
Önceki
Sonraki
Toplam 0
Biten 0
Harcama 0
Süre (Saat) 0
Tür Dağılımı
Durum Dağılımı