2026-02-02 12:14:18 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2026-02-03 17:12:55 -05:00
|
|
|
<title>Freax Web Media Player</title>
|
2026-02-02 12:14:18 -05:00
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Archivo:wght@300;400;600&display=swap" rel="stylesheet">
|
2026-02-06 12:15:30 -05:00
|
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
2026-02-02 12:14:18 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<header>
|
2026-02-03 17:12:55 -05:00
|
|
|
<img width="250px" alt="freax penguin logo" src="freaxlogo.png"/>
|
|
|
|
|
<h1>Freax Web Media Player</h1>
|
|
|
|
|
<div class="subtitle">Your Digital Entertainment Hub, no bloat, always free, developed by MARKMENTAL</div>
|
2026-02-02 12:14:18 -05:00
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="main-layout">
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
<div class="media-type-tabs">
|
|
|
|
|
<button class="tab-btn active" data-type="videos">Videos</button>
|
|
|
|
|
<button class="tab-btn" data-type="music">Music</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="file-browser" id="fileBrowser">
|
|
|
|
|
<div class="loading"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<main class="player-section">
|
2026-02-02 14:05:21 -05:00
|
|
|
<div class="topbar">
|
|
|
|
|
<button class="btn" id="logoutBtn" style="display:none;">Logout</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-02-02 12:14:18 -05:00
|
|
|
<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>
|
2026-02-02 14:05:21 -05:00
|
|
|
<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>
|
|
|
|
|
|
2026-02-02 12:14:18 -05:00
|
|
|
<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>
|
|
|
|
|
|
2026-02-02 14:05:21 -05:00
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
2026-02-06 12:15:30 -05:00
|
|
|
<script src="assets/js/app.js"></script>
|
2026-02-02 12:14:18 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
