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

feat: design elegant glassmorphic ui style and html layout

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-20 16:45:00 +03:00
parent a55950e80c
commit 67f5628859
2 changed files with 657 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VibeDownloader - Premium YouTube & MP3 Downloader</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- Vibrant Animated Background Elements -->
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="bg-glow bg-glow-3"></div>
<!-- Dependency Download Overlay -->
<div id="dependency-overlay" class="overlay active">
<div class="glass-card overlay-card text-center">
<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>
<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>
</div>
<!-- Main Container -->
<main class="app-container">
<header class="app-header text-center">
<div class="logo-wrapper">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
</div>
<h1 class="glow-text">VibeDownloader</h1>
<p class="subtitle">YouTube videolarını saniyeler içinde yüksek kaliteli MP4 veya MP3 olarak indirin</p>
</header>
<!-- URL Input Section -->
<section class="glass-card url-section">
<div class="input-group">
<input type="text" id="url-input" placeholder="YouTube video veya oynatma listesi bağlantısı yapıştırın..." autocomplete="off">
<button id="analyze-btn" class="glow-button">
<span>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>
</div>
</section>
<!-- Error Display -->
<div id="error-card" class="glass-card error-card" style="display: none;">
<svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10" />
<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>
</div>
<!-- Video Preview & Download Section -->
<section id="preview-section" class="glass-card preview-card" style="display: none;">
<div class="preview-layout">
<div class="thumbnail-wrapper">
<img id="video-thumbnail" src="" alt="Thumbnail">
</div>
<div class="video-details">
<h3 id="video-title">Video Başlığı</h3>
<p id="video-uploader" class="details-text">Kanal Adı</p>
<p id="video-duration" class="details-text">Süre: --:--</p>
<div class="format-selection">
<label class="radio-card active">
<input type="radio" name="format-type" value="mp3" checked>
<div class="radio-content">
<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>
<div class="radio-info">
<span class="radio-title">MP3 Ses</span>
<span class="radio-desc">En yüksek kalite (320kbps)</span>
</div>
</div>
</label>
<label class="radio-card">
<input type="radio" name="format-type" value="mp4">
<div class="radio-content">
<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" />
<line x1="2" y1="7" x2="7" y2="7" />
<line x1="2" y1="17" x2="7" y2="17" />
<line x1="17" y1="17" x2="22" y2="17" />
<line x1="17" y1="7" x2="22" y2="7" />
</svg>
<div class="radio-info">
<span class="radio-title">MP4 Video</span>
<span class="radio-desc">En yüksek çözünürlük</span>
</div>
</div>
</label>
</div>
<button id="download-btn" class="glow-button full-width">
İndirmeyi Başlat
</button>
</div>
</div>
</section>
<!-- Download Progress Section -->
<section id="download-section" class="glass-card download-card" style="display: none;">
<div class="download-header">
<h4 id="download-status">İndiriliyor...</h4>
<span id="download-percent" class="download-percent">0%</span>
</div>
<div class="progress-bar-container">
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
</div>
<p id="download-subtext" class="subtext">Lütfen bekleyin...</p>
</section>
</main>
<script src="renderer.js"></script>
</body>
</html>