diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..2188705 --- /dev/null +++ b/src/index.html @@ -0,0 +1,146 @@ + + + + + + VibeDownloader - Premium YouTube & MP3 Downloader + + + + + + + +
+
+
+ + +
+
+ +

Sistem Hazırlanıyor

+

Lütfen bekleyin, gerekli bileşenler kontrol ediliyor...

+
+
+
+
0%
+
+
+ + +
+
+
+ + + + + +
+

VibeDownloader

+

YouTube videolarını saniyeler içinde yüksek kaliteli MP4 veya MP3 olarak indirin

+
+ + +
+
+ + +
+
+ Kaydetme Yeri: + Yükleniyor... + +
+
+ + + + + + + + + +
+ + + + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..4a66a7e --- /dev/null +++ b/src/style.css @@ -0,0 +1,511 @@ +/* Basic Reset and Global Styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Outfit', sans-serif; + user-select: none; +} + +body { + background: #09060f; + color: #f1f0f5; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow-x: hidden; + position: relative; +} + +/* Vibrant Animated Background Glows */ +.bg-glow { + position: absolute; + border-radius: 50%; + filter: blur(140px); + z-index: 0; + opacity: 0.45; + pointer-events: none; + animation: float-glow 20s infinite alternate ease-in-out; +} + +.bg-glow-1 { + width: 500px; + height: 500px; + background: radial-gradient(circle, #7928ca 0%, #ff0080 100%); + top: -10%; + left: -10%; + animation-duration: 25s; +} + +.bg-glow-2 { + width: 600px; + height: 600px; + background: radial-gradient(circle, #00dfd8 0%, #007cf0 100%); + bottom: -20%; + right: -10%; + animation-duration: 30s; +} + +.bg-glow-3 { + width: 400px; + height: 400px; + background: radial-gradient(circle, #ff4d4d 0%, #f9cb28 100%); + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + animation-duration: 22s; +} + +@keyframes float-glow { + 0% { + transform: translate(0, 0) scale(1); + } + 50% { + transform: translate(80px, 50px) scale(1.1); + } + 100% { + transform: translate(-40px, -60px) scale(0.9); + } +} + +/* Premium Glassmorphic Cards */ +.glass-card { + background: rgba(18, 14, 28, 0.45); + backdrop-filter: blur(25px) saturate(180%); + -webkit-backdrop-filter: blur(25px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 20px; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + padding: 24px; + margin-bottom: 20px; + position: relative; + z-index: 10; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.glass-card:hover { + border-color: rgba(255, 255, 255, 0.15); + box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* Main Container Layout */ +.app-container { + width: 100%; + max-width: 800px; + padding: 20px; + display: flex; + flex-direction: column; + z-index: 10; + animation: fade-in 0.8s ease-out; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Header Styles */ +.app-header { + margin-bottom: 30px; +} + +.logo-wrapper { + display: inline-flex; + padding: 16px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 16px; + color: #ff0080; + box-shadow: 0 10px 25px rgba(255, 0, 128, 0.2); +} + +.logo-icon { + width: 36px; + height: 36px; +} + +.glow-text { + font-size: 2.5rem; + font-weight: 800; + letter-spacing: -0.5px; + background: linear-gradient(to right, #ffffff, #dcd7eb, #ff0080); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 8px; +} + +.subtitle { + color: #b3aeca; + font-size: 1rem; + font-weight: 400; +} + +/* Input Fields & Buttons */ +.input-group { + display: flex; + gap: 12px; +} + +input[type="text"] { + flex: 1; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 14px 20px; + font-size: 0.95rem; + color: #ffffff; + outline: none; + font-weight: 400; + transition: all 0.3s; +} + +input[type="text"]::placeholder { + color: #6e6a82; +} + +input[type="text"]:focus { + border-color: #ff0080; + box-shadow: 0 0 15px rgba(255, 0, 128, 0.25); + background: rgba(0, 0, 0, 0.4); +} + +/* Glowing Dynamic Buttons */ +.glow-button { + background: linear-gradient(135deg, #7928ca 0%, #ff0080 100%); + color: #ffffff; + border: none; + border-radius: 12px; + padding: 14px 28px; + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + box-shadow: 0 4px 15px rgba(255, 0, 128, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.glow-button:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(255, 0, 128, 0.45); +} + +.glow-button:active { + transform: translateY(0); +} + +.glow-button.full-width { + width: 100%; +} + +.glow-button:disabled { + background: rgba(255, 255, 255, 0.1); + color: #6e6a82; + box-shadow: none; + cursor: not-allowed; + transform: none; +} + +/* Path Row */ +.output-folder-row { + margin-top: 14px; + display: flex; + align-items: center; + gap: 8px; + font-size: 0.85rem; +} + +.folder-label { + color: #6e6a82; +} + +.folder-path { + color: #dcd7eb; + font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 480px; +} + +.text-btn { + background: none; + border: none; + color: #00dfd8; + font-weight: 600; + cursor: pointer; + transition: color 0.2s; +} + +.text-btn:hover { + color: #007cf0; + text-decoration: underline; +} + +/* Spinner & Icon Animation */ +.animate-spin { + animation: spin 1s linear infinite; + width: 18px; + height: 18px; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* Preview Card Layout */ +.preview-layout { + display: flex; + gap: 24px; + align-items: center; +} + +.thumbnail-wrapper { + width: 260px; + aspect-ratio: 16/9; + border-radius: 12px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); +} + +.thumbnail-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.video-details { + flex: 1; +} + +.video-details h3 { + font-size: 1.15rem; + font-weight: 600; + margin-bottom: 6px; + line-height: 1.4; + color: #ffffff; +} + +.details-text { + font-size: 0.85rem; + color: #9e97b8; + margin-bottom: 4px; +} + +/* Format Cards Selection */ +.format-selection { + display: flex; + gap: 12px; + margin: 16px 0 20px 0; +} + +.radio-card { + flex: 1; + position: relative; + cursor: pointer; +} + +.radio-card input[type="radio"] { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.radio-content { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + transition: all 0.25s; +} + +.radio-content svg { + width: 22px; + height: 22px; + color: #9e97b8; +} + +.radio-info { + display: flex; + flex-direction: column; +} + +.radio-title { + font-size: 0.85rem; + font-weight: 600; + color: #f1f0f5; +} + +.radio-desc { + font-size: 0.72rem; + color: #6e6a82; +} + +.radio-card input[type="radio"]:checked + .radio-content { + background: rgba(255, 0, 128, 0.08); + border-color: #ff0080; + box-shadow: 0 0 15px rgba(255, 0, 128, 0.15); +} + +.radio-card input[type="radio"]:checked + .radio-content svg { + color: #ff0080; +} + +/* Progress Bars */ +.progress-bar-container { + width: 100%; + height: 8px; + background: rgba(255, 255, 255, 0.08); + border-radius: 4px; + overflow: hidden; + margin-top: 14px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); +} + +.progress-bar-fill { + height: 100%; + background: linear-gradient(90deg, #00dfd8 0%, #ff0080 100%); + border-radius: 4px; + width: 0%; + box-shadow: 0 0 10px rgba(0, 223, 216, 0.5); + transition: width 0.3s ease-out; +} + +/* Loading Overlay */ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(6, 4, 10, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + opacity: 0; + pointer-events: none; + transition: opacity 0.4s; +} + +.overlay.active { + opacity: 1; + pointer-events: auto; +} + +.overlay-card { + width: 90%; + max-width: 440px; + border-color: rgba(255, 255, 255, 0.15); +} + +.spinner-container { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.spinner { + width: 44px; + height: 44px; + border: 3px solid rgba(255, 255, 255, 0.08); + border-top-color: #ff0080; + border-radius: 50%; + animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite; +} + +.overlay-card h2 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 8px; +} + +.overlay-card p { + font-size: 0.88rem; + color: #9e97b8; + margin-bottom: 12px; +} + +.pct-text { + font-size: 1.25rem; + font-weight: 800; + color: #ff0080; + margin-top: 10px; +} + +.text-center { + text-align: center; +} + +/* Error Alert */ +.error-card { + display: flex; + align-items: center; + gap: 12px; + border-color: rgba(255, 77, 77, 0.2); + background: rgba(255, 77, 77, 0.06); + padding: 16px 20px; +} + +.error-icon { + width: 22px; + height: 22px; + color: #ff4d4d; +} + +#error-message { + font-size: 0.88rem; + color: #ffb3b3; + font-weight: 500; +} + +/* Download Card Details */ +.download-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.download-header h4 { + font-size: 0.95rem; + font-weight: 600; +} + +.download-percent { + font-size: 1.05rem; + font-weight: 800; + color: #00dfd8; +} + +.download-card .subtext { + margin-top: 8px; + font-size: 0.8rem; + color: #9e97b8; +} + +/* Responsive Customization */ +@media (max-width: 640px) { + .preview-layout { + flex-direction: column; + align-items: flex-start; + } + .thumbnail-wrapper { + width: 100%; + } +}