refactor: usunięcie starego panelu ze statycznych plików
static/app.js (1196 linii imperatywnego JS operującego na getElementById) oraz static/index.html zastąpione w całości aplikacją z frontend/. Arkusz stylów został wcześniej przeniesiony, nie usuwamy go ponownie. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
lgooseandClaude Bot committed
1 parent
038fa2ead4
commit
d3408da2ed
2 files changed
-1467
No files matched your search
-1195
File diff suppressed because it is too large.
Load diff
@@ -1,272 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ŻyrarBOT - Dashboard Kolejki</title>
|
||||
<!-- Google Fonts -->
|
||||
<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">
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-glow bg-glow-1"></div>
|
||||
<div class="background-glow bg-glow-2"></div>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- Header -->
|
||||
<header class="main-header">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">
|
||||
<i data-lucide="music"></i>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<h1>ŻyrarBOT</h1>
|
||||
<span class="subtitle">Kontroler Web</span>
|
||||
</div>
|
||||
<div class="header-actions" style="display: flex; align-items: center; gap: 16px;">
|
||||
<button id="btn-open-settings" class="btn btn-secondary" style="display: flex; align-items: center; gap: 8px;">
|
||||
<i data-lucide="settings"></i> Ustawienia
|
||||
</button>
|
||||
<div class="bot-status-badge" id="bot-status-container">
|
||||
<span class="status-indicator offline" id="status-dot"></span>
|
||||
<span id="status-text">Rozłączony</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Layout Grid -->
|
||||
<main class="dashboard-grid">
|
||||
<!-- Left Side: Controls & Connection -->
|
||||
<section class="grid-column left-column">
|
||||
<!-- Connection & Settings Panel -->
|
||||
<div class="glass-card connection-panel">
|
||||
<h2 class="card-title"><i data-lucide="radio"></i> Kanał Głosowy</h2>
|
||||
<div class="control-row">
|
||||
<select id="voice-channel-select" class="premium-select">
|
||||
<option value="" disabled selected>Wybierz kanał...</option>
|
||||
</select>
|
||||
<button id="btn-connect" class="btn btn-primary btn-glow">
|
||||
<i data-lucide="log-in"></i> Połącz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Panel (Now Playing) -->
|
||||
<div class="glass-card player-panel">
|
||||
<div class="card-header-actions">
|
||||
<span class="badge badge-live">Live</span>
|
||||
</div>
|
||||
|
||||
<!-- Vinyl / Wave Visualizer -->
|
||||
<div class="visualizer-container">
|
||||
<div class="vinyl-record" id="vinyl-record">
|
||||
<div class="vinyl-center"></div>
|
||||
<div class="vinyl-grooves"></div>
|
||||
<div class="vinyl-glow"></div>
|
||||
<div class="vinyl-icon"><i data-lucide="music-4"></i></div>
|
||||
</div>
|
||||
<div class="music-wave" id="music-wave">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Song Info -->
|
||||
<div class="now-playing-info">
|
||||
<h3 class="track-title" id="track-title">Nic nie jest odtwarzane</h3>
|
||||
<p class="track-artist" id="track-artist">Połącz bota i dodaj utwór</p>
|
||||
<a href="#" target="_blank" class="track-link-btn" id="track-link" style="display: none;">
|
||||
<i data-lucide="external-link"></i> Otwórz w YouTube
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Track Progress Bar -->
|
||||
<div class="track-progress-container" id="progress-container" style="display: none;">
|
||||
<span class="time-text" id="time-elapsed">0:00</span>
|
||||
<div class="progress-bar-bg" id="progress-bar-bg">
|
||||
<div class="progress-bar-fill" id="progress-bar-fill" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="time-text" id="time-total">0:00</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress / State (Simple status text) -->
|
||||
<div class="playback-state-bar">
|
||||
<span class="badge" id="loop-badge"><i data-lucide="repeat-1"></i> Zapętlenie aktywne</span>
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="player-controls">
|
||||
<button class="btn-icon btn-secondary" id="btn-stop" title="Zatrzymaj i wyczyść">
|
||||
<i data-lucide="square"></i>
|
||||
</button>
|
||||
<button class="btn-icon btn-primary" id="btn-play-pause" title="Odtwarzaj / Pauza">
|
||||
<i data-lucide="play" id="play-pause-icon"></i>
|
||||
</button>
|
||||
<button class="btn-icon btn-secondary" id="btn-skip" title="Pomiń utwór">
|
||||
<i data-lucide="skip-forward"></i>
|
||||
</button>
|
||||
<button class="btn-icon btn-secondary" id="btn-loop" title="Zapętlanie: wyłączone">
|
||||
<i data-lucide="repeat"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<div class="volume-container">
|
||||
<button class="btn-icon-small" id="btn-mute" title="Wycisz">
|
||||
<i data-lucide="volume-2" id="volume-icon"></i>
|
||||
</button>
|
||||
<input type="range" id="volume-slider" class="premium-slider" min="0" max="100" value="100">
|
||||
<span class="volume-value" id="volume-value">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right Side: Add Song & Queue -->
|
||||
<section class="grid-column right-column">
|
||||
<!-- Add Track Panel -->
|
||||
<div class="glass-card add-track-panel">
|
||||
<h2 class="card-title"><i data-lucide="plus-circle"></i> Dodaj do kolejki</h2>
|
||||
<form id="add-track-form" class="add-form">
|
||||
<div class="input-with-icon">
|
||||
<i data-lucide="search" class="input-icon"></i>
|
||||
<input type="text" id="track-query" class="premium-input" placeholder="Wklej link YouTube lub wpisz wyszukiwanie..." required>
|
||||
</div>
|
||||
<button type="submit" id="btn-add-track" class="btn btn-primary">
|
||||
<span id="btn-add-text"><i data-lucide="plus"></i> Dodaj</span>
|
||||
<span id="btn-add-spinner" class="spinner" style="display: none;"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Uploaded Files Library Panel -->
|
||||
<div class="glass-card uploads-panel">
|
||||
<div class="queue-header">
|
||||
<h2 class="card-title"><i data-lucide="folder-up"></i> Serwerowa baza plików</h2>
|
||||
<span class="queue-count" id="uploads-count">0 plików</span>
|
||||
</div>
|
||||
|
||||
<div class="upload-area" id="upload-dropzone" style="margin-bottom: 15px;">
|
||||
<input type="file" id="file-input" style="display: none;" accept="*/*" multiple>
|
||||
<button type="button" id="btn-select-file" class="btn btn-secondary" style="width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||||
<i data-lucide="upload-cloud"></i> Prześlij plik wideo/audio na serwer
|
||||
</button>
|
||||
<div id="upload-progress-container" style="display: none; margin-bottom: 10px;">
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fill" id="upload-progress-fill" style="width: 0%; background: var(--primary);"></div>
|
||||
</div>
|
||||
<span class="time-text" id="upload-status-text" style="display: block; text-align: center; margin-top: 4px;">Przesyłanie... 0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="queue-list-container" style="max-height: 250px;">
|
||||
<ul class="queue-list" id="uploads-list">
|
||||
<div class="empty-queue-message" id="empty-uploads-msg">
|
||||
<i data-lucide="folder-open"></i>
|
||||
<p>Brak przesłanych plików na serwerze.</p>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" id="btn-open-all-uploads" class="btn btn-secondary" style="width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||||
<i data-lucide="folder-open"></i> Pokaż wszystkie pliki na serwerze (<span id="btn-all-uploads-count">0</span>)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Queue List Panel -->
|
||||
<div class="glass-card queue-panel">
|
||||
<div class="queue-header">
|
||||
<h2 class="card-title"><i data-lucide="list-music"></i> Kolejka odtwarzania</h2>
|
||||
<span class="queue-count" id="queue-count">0 utworów</span>
|
||||
</div>
|
||||
<div class="queue-list-container">
|
||||
<ul class="queue-list" id="queue-list">
|
||||
<!-- Populated via JS -->
|
||||
<div class="empty-queue-message" id="empty-queue-msg">
|
||||
<i data-lucide="disc"></i>
|
||||
<p>Kolejka jest pusta. Dodaj coś!</p>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History List Panel -->
|
||||
<div class="glass-card history-panel">
|
||||
<div class="queue-header">
|
||||
<h2 class="card-title"><i data-lucide="history"></i> Historia odtwarzania</h2>
|
||||
<span class="queue-count" id="history-count">0 utworów</span>
|
||||
</div>
|
||||
<div class="queue-list-container" style="max-height: 250px;">
|
||||
<ul class="queue-list" id="history-list">
|
||||
<div class="empty-queue-message" id="empty-history-msg">
|
||||
<i data-lucide="clock"></i>
|
||||
<p>Historia odtwarzania jest pusta.</p>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal-overlay" id="settings-modal" style="display: none;">
|
||||
<div class="modal-card glass-card">
|
||||
<div class="modal-header">
|
||||
<h2 class="card-title"><i data-lucide="settings"></i> Ustawienia ŻyrarBOT</h2>
|
||||
<button class="btn-icon" id="btn-close-settings" title="Zamknij"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="settings-section" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08);">
|
||||
<h3><i data-lucide="repeat"></i> Domyślna liczba odtworzeń w kolejce</h3>
|
||||
<p class="settings-desc">Ustaw domyślną liczbę odtworzeń dla każdego nowo dodawanego utworu do kolejki. Przy każdym odtworzeniu utworu wartość jest pomniejszana o 1, a po spadku do 0 utwór usuwany jest z kolejki.</p>
|
||||
<div style="display: flex; align-items: center; gap: 12px; margin-top: 12px;">
|
||||
<input type="number" id="setting-default-plays" class="input-text" min="1" max="999" value="5" style="width: 100px; text-align: center; font-weight: bold; font-size: 1.1rem; padding: 8px 12px;">
|
||||
<button id="btn-save-default-plays" class="btn btn-primary" style="display: flex; align-items: center; gap: 8px; padding: 8px 16px;"><i data-lucide="save"></i> Zapisz</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3><i data-lucide="server"></i> Konfiguracja Serwerów Discord (Kanały Logów)</h3>
|
||||
<p class="settings-desc">Wybierz kanał tekstowy na każdym serwerze Discord, na który bot ma wysyłać powiadomienia o odtwarzanych utworach i zmianach w kolejce.</p>
|
||||
<div class="guilds-list" id="settings-guilds-list">
|
||||
<!-- Populated via JS -->
|
||||
<div class="empty-queue-message">
|
||||
<i data-lucide="loader"></i>
|
||||
<p>Ładowanie listy serwerów...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All Uploads Modal -->
|
||||
<div class="modal-overlay" id="uploads-modal" style="display: none;">
|
||||
<div class="modal-card glass-card" style="max-width: 650px;">
|
||||
<div class="modal-header">
|
||||
<h2 class="card-title"><i data-lucide="folder-up"></i> Wszystkie pliki na serwerze</h2>
|
||||
<button class="btn-icon" id="btn-close-uploads" title="Zamknij"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
|
||||
<p class="settings-desc">Pełna lista plików zapisanych w serwerowej bazie danych (posortowana od ostatnio używanych / przesłanych).</p>
|
||||
<ul class="queue-list" id="modal-uploads-list">
|
||||
<div class="empty-queue-message" id="empty-modal-uploads-msg">
|
||||
<i data-lucide="folder-open"></i>
|
||||
<p>Brak przesłanych plików na serwerze.</p>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification Toast -->
|
||||
<div class="toast-container" id="toast-container"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user