truncgit/VibeDownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement initial UI structure and multi-language support for downloader interface

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-28 07:27:25 +03:00
parent ce192828e0
commit 67d833d7d7
8 changed files with 606 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+34 -23
View File
@@ -23,10 +23,20 @@
<span>VibeDownloader</span>
</div>
<div class="titlebar-controls">
<button id="titlebar-minimize" class="control-btn" title="Simge Durumuna Getir">
<!-- Language Dropdown -->
<div class="language-selector-wrapper">
<select id="language-select" class="language-select">
<option value="tr">🇹🇷 Türkçe</option>
<option value="en">🇺🇸 English</option>
<option value="de">🇩🇪 Deutsch</option>
<option value="ru">🇷🇺 Русский</option>
<option value="ar">🇸🇦 العربية</option>
</select>
</div>
<button id="titlebar-minimize" class="control-btn" title="Simge Durumuna Getir" data-i18n-title="titlebar_minimize">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
<button id="titlebar-close" class="control-btn close" title="Kapat">
<button id="titlebar-close" class="control-btn close" title="Kapat" data-i18n-title="titlebar_close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
@@ -43,12 +53,12 @@
<div class="spinner-container">
<div class="spinner"></div>
</div>
<h2 id="dep-title">Sistem Hazırlanıyor</h2>
<p id="dep-msg">Lütfen bekleyin, gerekli bileşenler kontrol ediliyor...</p>
<h2 id="dep-title" data-i18n="dep_title">Sistem Hazırlanıyor</h2>
<p id="dep-msg" data-i18n="dep_msg">Lütfen bekleyin, gerekli bileşenler kontrol ediliyor...</p>
<div class="progress-bar-container">
<div id="dep-progress" class="progress-bar-fill" style="width: 0%"></div>
</div>
<div id="dep-percent" class="pct-text">0%</div>
<div id="dep-percent" class="pct-text" data-i18n="dep_percent">0%</div>
</div>
</div>
@@ -66,28 +76,29 @@
</svg>
</div>
<h1 class="glow-text">VibeDownloader</h1>
<p class="subtitle">YouTube, X/Twitter, Instagram, TikTok ve tüm popüler sitelerden video/ses indirin</p>
<p class="subtitle" data-i18n="app_subtitle">YouTube, X/Twitter, Instagram, TikTok ve tüm popüler sitelerden video/ses indirin</p>
</header>
<section class="glass-card url-section">
<div class="input-group">
<input type="text" id="url-input" placeholder="Sosyal medya veya video platformu bağlantısı yapıştırın (YouTube, Instagram, TikTok, X/Twitter vb.)..." autocomplete="off">
<input type="text" id="url-input" data-i18n-placeholder="url_placeholder" placeholder="Sosyal medya veya video platformu bağlantısı yapıştırın (YouTube, Instagram, TikTok, X/Twitter vb.)..." autocomplete="off">
<button id="analyze-btn" class="glow-button">
<span>Analiz Et</span>
<span data-i18n="btn_analyze">Analiz Et</span>
<svg class="btn-icon animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
<circle cx="12" cy="12" r="10" />
<path d="M2 12a10 10 0 0 1 8-9.8" />
</svg>
</button>
</div>
<div class="output-folder-row">
<span class="folder-label">Kaydetme Yeri:</span>
<span id="output-path" class="folder-path">Yükleniyor...</span>
<button id="change-folder-btn" class="text-btn">Değiştir</button>
<span class="folder-label" data-i18n="folder_label">Kaydetme Yeri:</span>
<span id="output-path" class="folder-path" data-i18n="folder_loading">Yükleniyor...</span>
<button id="change-folder-btn" class="text-btn" data-i18n="btn_change_folder">Değiştir</button>
</div>
<div class="cookies-row" style="margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.85em; opacity: 0.85; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; flex-wrap: wrap;">
<input type="checkbox" id="use-cookies" style="cursor: pointer; accent-color: #7000ff; width: 15px; height: 15px;">
<label for="use-cookies" style="cursor: pointer; color: #fff; user-select: none;">Giriş gerektiren içerikler (Örn. Instagram Hikayeleri) için tarayıcı oturumunu kullan:</label>
<label for="use-cookies" data-i18n="use_cookies_label" style="cursor: pointer; color: #fff; user-select: none;">Giriş gerektiren içerikler (Örn. Instagram Hikayeleri) için tarayıcı oturumunu kullan:</label>
<select id="cookie-browser" style="background: rgba(23, 20, 38, 0.8); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 2px 8px; cursor: pointer; outline: none; font-family: inherit; font-size: 0.95em;">
<option value="chrome">Chrome</option>
<option value="edge">Edge</option>
@@ -105,7 +116,7 @@
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<span id="error-message">Bir hata oluştu.</span>
<span id="error-message" data-i18n="error_default">Bir hata oluştu.</span>
</div>
</div>
@@ -113,13 +124,13 @@
<div id="step-2" class="wizard-step">
<header class="step-header">
<button id="back-btn" class="back-button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<svg class="back-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
<span>Geri Dön</span>
<span data-i18n="btn_back">Geri Dön</span>
</button>
<h2 class="step-title">İndirilecek Dosya</h2>
<h2 class="step-title" data-i18n="step2_title">İndirilecek Dosya</h2>
</header>
<!-- Scrollable Track List Area -->
@@ -135,23 +146,23 @@
<!-- Formats & Quality Picker -->
<div class="options-panel">
<div class="option-row">
<span class="option-label">Format:</span>
<span class="option-label" data-i18n="format_label">Format:</span>
<div class="format-toggle">
<button id="format-mp3-btn" class="format-btn active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /></svg>
<span>MP3 Ses</span>
<span data-i18n="format_mp3">MP3 Ses</span>
</button>
<button id="format-mp4-btn" class="format-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" /><line x1="7" y1="2" x2="7" y2="22" /><line x1="17" y1="2" x2="17" y2="22" /><line x1="2" y1="12" x2="22" y2="12" /></svg>
<span>MP4 Video</span>
<span data-i18n="format_mp4">MP4 Video</span>
</button>
</div>
</div>
<div class="option-row">
<span class="option-label">Kalite:</span>
<span class="option-label" data-i18n="quality_label">Kalite:</span>
<div id="quality-pills" class="quality-pills">
<!-- Populated dynamically: 320kbps, 256kbps, 192kbps for MP3 or 1080p, 720p, 480p for MP4 -->
<!-- Populated dynamically -->
</div>
</div>
</div>
@@ -171,8 +182,8 @@
</div>
<button id="download-btn" class="glow-button full-width">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
<span>İndirmeyi Başlat</span>
<svg class="dl-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
<span data-i18n="btn_download">İndirmeyi Başlat</span>
</button>
</div>
</div>