diff --git a/frontend/index.html b/frontend/index.html index d5657a9..deeacf0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,625 +1,1347 @@ - - -just download stuff lol - + .backend-status { + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; + user-select: none; + padding: 2px 6px; + background: rgba(255, 255, 255, 0.02); + border: 1px solid #1a1a1a; + transition: all 0.2s ease; + } + + .backend-status:hover { + border-color: #333; + } + + .status-dot { + width: 6px; + height: 6px; + background: #555; + transition: background 0.3s ease; + } + + .backend-status.online .status-dot { + background: var(--success); + box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); + } + + .backend-status.offline .status-dot { + background: var(--error); + box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); + } + + .status-text { + font-size: 0.72rem; + color: var(--text-sub); + } + + /* Input zone */ + .input-zone { + background: var(--panel); + border: 1px solid var(--border); + padding: 16px; + margin-bottom: 18px; + transition: border-color 0.2s ease; + } + + .input-zone.drag-over { + border-color: var(--accent); + background: #141414; + } + + .input-row { + display: flex; + align-items: center; + gap: 10px; + } + + .input-prefix { + color: var(--text-dim); + font-weight: 700; + user-select: none; + font-size: 0.9rem; + } + + .url-input { + flex: 1; + background: #080808; + border: 1px solid #242424; + padding: 10px 14px; + color: #fff; + font-family: inherit; + font-size: 0.85rem; + outline: none; + transition: border-color 0.2s ease; + } + + .url-input:focus { + border-color: var(--accent); + } + + .url-input::placeholder { + color: #444; + } + + .drag-hint { + font-size: 0.7rem; + color: var(--text-dim); + margin-top: 8px; + text-align: right; + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 18px; + background: #141414; + color: #ccc; + border: 1px solid #2a2a2a; + font-family: inherit; + font-size: 0.8rem; + cursor: pointer; + user-select: none; + letter-spacing: 0.02em; + transition: all 0.15s ease; + } + + .btn:hover:not(:disabled) { + background: #222; + border-color: var(--accent); + color: var(--accent); + } + + .btn:active:not(:disabled) { + background: #fff; + color: #000; + border-color: #fff; + } + + .btn:disabled { + opacity: 0.3; + cursor: not-allowed; + border-color: #1f1f1f; + } + + .btn-primary { + background: #191919; + border-color: #383838; + color: #fff; + } + + .btn-main { + width: 100%; + padding: 13px; + font-size: 0.88rem; + font-weight: 500; + background: #181818; + border: 1px solid #383838; + color: #fff; + margin-bottom: 10px; + } + + .btn-main:hover:not(:disabled) { + background: #fff; + color: #000; + border-color: #fff; + } + + .btn-secondary { + width: 100%; + padding: 10px; + font-size: 0.78rem; + background: #0f0f0f; + border: 1px solid #222; + color: var(--text-sub); + } + + /* Platform Tabs */ + .platform-tabs { + display: flex; + gap: 8px; + margin-bottom: 16px; + } + + .tab-btn { + flex: 1; + background: #0e0e0e; + border: 1px solid var(--border); + padding: 10px; + font-family: inherit; + font-size: 0.8rem; + color: var(--text-sub); + cursor: pointer; + text-align: center; + transition: all 0.15s ease; + user-select: none; + } + + .tab-btn:hover { + border-color: var(--border-hover); + color: #fff; + } + + .tab-btn.active-yt { + background: #141414; + border-color: var(--yt); + color: var(--yt); + } + + .tab-btn.active-ig { + background: #141414; + border-color: var(--ig); + color: var(--ig); + } + + /* Preview Card */ + .preview-card { + background: var(--panel); + border: 1px solid var(--border); + padding: 16px; + margin-bottom: 18px; + display: none; + gap: 16px; + } + + .preview-card.show { + display: flex; + } + + .preview-thumb { + width: 140px; + height: 80px; + background: #080808; + border: 1px solid #222; + flex-shrink: 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + } + + .preview-thumb img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .preview-info { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + justify-content: center; + gap: 6px; + } + + .preview-title { + font-size: 0.88rem; + font-weight: 500; + color: #fff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .preview-meta { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + + .meta-pill { + background: #080808; + border: 1px solid #222; + padding: 3px 8px; + font-size: 0.7rem; + color: var(--text-sub); + } + + .preview-quality { + font-size: 0.7rem; + color: var(--text-dim); + } + + .skeleton { + background: linear-gradient(90deg, #141414 25%, #222 50%, #141414 75%); + background-size: 200%; + animation: skel 1.4s infinite; + } + + @keyframes skel { + 0% { background-position: 200%; } + 100% { background-position: -200%; } + } + + /* Options Section */ + .panel { + display: none; + } + + .panel.active { + display: block; + } + + .section-label { + font-size: 0.7rem; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 10px; + } + + .options-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 8px; + margin-bottom: 16px; + } + + .opt-card { + background: #0e0e0e; + border: 1px solid var(--border); + padding: 12px; + cursor: pointer; + user-select: none; + transition: all 0.15s ease; + position: relative; + } + + .opt-card:hover { + border-color: var(--border-hover); + background: #141414; + } + + .opt-card.selected-yt { + border-color: var(--yt); + background: rgba(255, 68, 68, 0.06); + } + + .opt-card.selected-ig { + border-color: var(--ig); + background: rgba(225, 48, 108, 0.06); + } + + .opt-title { + font-size: 0.8rem; + font-weight: 500; + color: #fff; + margin-bottom: 4px; + } + + .opt-desc { + font-size: 0.68rem; + color: var(--text-dim); + } + + .sub-panel { + background: var(--panel); + border: 1px solid var(--border); + padding: 16px; + margin-bottom: 18px; + } + + .form-row { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 12px; + } + + .form-row:last-child { + margin-bottom: 0; + } + + .form-label { + font-size: 0.78rem; + color: var(--text-sub); + min-width: 90px; + } + + .form-select { + background: #080808; + border: 1px solid #242424; + padding: 8px 12px; + color: #fff; + font-family: inherit; + font-size: 0.78rem; + outline: none; + cursor: pointer; + flex: 1; + } + + .form-toggle { + display: flex; + gap: 4px; + } + + .toggle-btn { + background: #080808; + border: 1px solid #242424; + padding: 6px 14px; + font-size: 0.74rem; + color: var(--text-sub); + cursor: pointer; + user-select: none; + transition: all 0.15s ease; + } + + .toggle-btn:hover { + border-color: #444; + color: #fff; + } + + .toggle-btn.on { + background: #202020; + border-color: var(--accent); + color: var(--accent); + } + + .time-row { + display: flex; + align-items: center; + gap: 8px; + margin-top: 8px; + } + + .time-input { + background: #080808; + border: 1px solid #242424; + padding: 6px 10px; + color: #fff; + font-family: inherit; + font-size: 0.76rem; + width: 80px; + outline: none; + text-align: center; + } + + .time-input:focus { + border-color: var(--accent); + } + + .time-sep { + color: var(--text-dim); + font-size: 0.74rem; + } + + /* Progress wrap */ + .progress-wrap { + background: var(--panel); + border: 1px solid var(--border); + padding: 16px; + margin-bottom: 18px; + display: none; + } + + .progress-wrap.show { + display: block; + } + + .progress-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + } + + .progress-label { + font-size: 0.78rem; + color: #fff; + } + + .progress-pct { + font-size: 0.78rem; + color: var(--accent); + font-weight: 600; + } + + .progress-bar-bg { + background: #080808; + border: 1px solid #1a1a1a; + height: 6px; + margin-bottom: 8px; + overflow: hidden; + } + + .progress-bar { + height: 100%; + background: var(--accent); + width: 0%; + transition: width 0.3s ease; + } + + .progress-status { + font-size: 0.7rem; + color: var(--text-dim); + } + + /* History section */ + .history-section { + margin-top: 32px; + background: var(--panel); + border: 1px solid var(--border); + padding: 16px; + } + + .history-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 0; + border-bottom: 1px solid #181818; + font-size: 0.76rem; + } + + .history-item:last-child { + border-bottom: none; + } + + .history-tag { + padding: 2px 6px; + font-size: 0.68rem; + background: #080808; + border: 1px solid #222; + flex-shrink: 0; + } + + .history-info { + flex: 1; + min-width: 0; + } + + .history-title { + color: #ddd; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .history-meta { + color: var(--text-dim); + font-size: 0.68rem; + margin-top: 2px; + } + + .history-status { + color: var(--success); + font-size: 0.7rem; + flex-shrink: 0; + } + + /* Toast */ + .toast { + position: fixed; + bottom: 24px; + right: 24px; + background: #111; + border: 1px solid #2a2a2a; + padding: 10px 16px; + font-size: 0.78rem; + color: #e5e5e5; + transform: translateY(60px); + opacity: 0; + transition: all 0.25s ease; + z-index: 1000; + pointer-events: none; + } + + .toast.show { + transform: translateY(0); + opacity: 1; + } + + @media (max-width: 600px) { + .wrap { + padding: 30px 14px 60px; + } + .preview-card.show { + flex-direction: column; + } + .preview-thumb { + width: 100%; + height: 140px; + } + .form-row { + flex-direction: column; + align-items: flex-start; + } + } + -
- + -
-
- - -
-
or drag & drop a url here
-
- -
-
YouTube
-
Instagram (only public account stuff)
-
- -
-
- -
-
-
—
-
-
-
-
- -
-
choose
-
-
- 🎬
Video
MP4 with audio
-
-
-
- 🎵
Audio only
MP3 extraction
-
-
-
- 🖼️
Thumbnail
JPG/WebP
-
-
-
- 💬
Subtitles
SRT / VTT
-
-
-
- 👤
Channel art
Avatar + banner
-
-
-
-
-
settings
-
- Resolution - -
-
- Format -
-
MP4
-
WebM
-
MKV
+
+
+

just-download

+
+ // give link. get video. + • +
+ + connecting...
-
- Trim -
-
-
Full
-
Custom
+
+ +
+
+ > + + +
+
// or drag & drop url here
+
+ +
+ + +
+ +
+
+ +
+
+
—
+
+
+
+
+ + +
+
// options
+
+
+
[video]
+
MP4 with audio
+
+
+
[audio]
+
MP3 extract
+
+
+
[thumbnail]
+
JPG/WebP
+
+
+
[subtitles]
+
SRT/VTT
+
+
+
[channel art]
+
Avatar + banner
+
+
+ +
+
// settings
+
+ resolution + +
+
+ format +
+
MP4
+
WebM
+
MKV
- +
+ trim +
+
+
Full
+
Custom
+
+
-
-
-
choose
-
-
- 📸
Post
Image or video
-
+ +
+
// options
+
+
+
[post]
+
Photo or video
+
+
+
[reel]
+
Short clip
+
+
+
[profile pic]
+
Full size avatar
+
+
+
[thumbnail]
+
Cover frame
+
-
- 🎞️
Reel
Short video
-
-
-
- 👤
Profile pic
Avatar JPG
-
-
-
- 🖼️
Thumbnail
Cover frame
-
-
-
-
-
settings
-
- Format -
-
MP4
-
JPG
+ +
+
// settings
+
+ format +
+
MP4
+
JPG
+
-
-
-
- downloading... - 0% + +
+
+ downloading... + 0% +
+
+
connecting...
-
-
connecting...
-
-
- - -
+ + + - -
+ + +
-
+
- + switchPlatform('yt'); + document.getElementById('yt-video-opts').style.display = 'block'; +