99 lines
4.3 KiB
PHP
99 lines
4.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Freax Web Media Player</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Archivo:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<a href="index.php" aria-label="Go to home page">
|
|
<img width="250px" alt="freax penguin logo" src="freaxlogo.png"/>
|
|
</a>
|
|
<h1>Freax Web Media Player</h1>
|
|
<div class="subtitle">Your Digital Entertainment Hub, no bloat, always free, developed by MARKMENTAL</div>
|
|
</header>
|
|
|
|
<div class="main-layout">
|
|
<aside class="sidebar">
|
|
<div class="wizard-panel">
|
|
<div class="wizard-step" id="wizardStep">Step 1 - Choose Library</div>
|
|
|
|
<div class="wizard-section" id="libraryPicker">
|
|
<button class="tab-btn" data-library="videos">Videos</button>
|
|
<button class="tab-btn" data-library="music">Music</button>
|
|
</div>
|
|
|
|
<div class="wizard-section" id="browserStep" style="display:none;">
|
|
<div class="wizard-toolbar">
|
|
<button class="btn" id="backBtn" type="button">Back</button>
|
|
<button class="btn" id="rootBtn" type="button">Library Root</button>
|
|
<button class="btn" id="refreshBtn" type="button">Refresh</button>
|
|
</div>
|
|
<div class="wizard-library" id="currentLibraryLabel"></div>
|
|
<div class="wizard-path" id="breadcrumb">/</div>
|
|
</div>
|
|
</div>
|
|
<div class="file-browser" id="fileBrowser">
|
|
<p style="color: var(--text-secondary); padding: 1rem;">Choose a library to browse files.</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="player-section">
|
|
<div class="topbar">
|
|
<button class="btn" id="logoutBtn" style="display:none;">Logout</button>
|
|
</div>
|
|
|
|
<div class="player-container" id="playerContainer">
|
|
<div class="player-placeholder">
|
|
<div class="player-placeholder-icon">🎵</div>
|
|
<p>Select a file to start playing</p>
|
|
</div>
|
|
</div>
|
|
<div class="player-controls-row" id="audioControls" style="display:none;">
|
|
<div class="audio-track-label">Audio Track</div>
|
|
<select id="audioSelect" class="audio-track-select"></select>
|
|
</div>
|
|
<div class="audio-track-hint" id="audioHint" style="display:none;"></div>
|
|
|
|
<div class="now-playing" id="nowPlaying" style="display: none;">
|
|
<div class="now-playing-label">Now Playing</div>
|
|
<div class="now-playing-title" id="nowPlayingTitle"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="loginOverlay" style="display:none;">
|
|
<div class="login-card">
|
|
<div class="login-title">Login</div>
|
|
<div class="login-subtitle">Sign in to access your media library.</div>
|
|
|
|
<form id="loginForm">
|
|
<div class="login-row">
|
|
<label for="username">Username</label>
|
|
<input id="username" name="username" autocomplete="username" required />
|
|
</div>
|
|
|
|
<div class="login-row">
|
|
<label for="password">Password</label>
|
|
<input id="password" name="password" type="password" autocomplete="current-password" required />
|
|
</div>
|
|
|
|
<div class="login-actions">
|
|
<button class="btn btn-primary" type="submit" id="loginBtn">Login</button>
|
|
<span id="loginSpinner" class="loading" style="display:none;"></span>
|
|
</div>
|
|
|
|
<div class="login-error" id="loginError"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|