203 lines
9.3 KiB
HTML
203 lines
9.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||
<title>WaifuBoard</title>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||
|
||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||
</head>
|
||
<body>
|
||
<a href="/anime" class="back-btn">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||
</svg>
|
||
Back
|
||
</a>
|
||
|
||
<div class="modal-overlay" id="desc-modal">
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||
<h2 class="modal-title">Synopsis</h2>
|
||
<div class="modal-text" id="full-description"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||
|
||
<div class="hero-wrapper" id="hero-wrapper">
|
||
<div class="video-background"><div id="trailer-player"></div></div>
|
||
<div class="hero-overlay"></div>
|
||
</div>
|
||
|
||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||
<div class="player-container">
|
||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
|
||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
|
||
<div class="player-header">
|
||
<div class="header-left">
|
||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
||
</button>
|
||
<div class="episode-info">
|
||
<span class="ep-label">Watching</span>
|
||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
<polyline points="7 10 12 15 17 10"></polyline>
|
||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
</svg>
|
||
</button>
|
||
<div class="settings-group">
|
||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||
<div class="sd-bg"></div>
|
||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||
<div class="sd-option" id="opt-dub">Dub</div>
|
||
</div>
|
||
|
||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
||
<select id="extension-select" class="glass-select"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="video-frame">
|
||
<video id="player" controls crossorigin playsinline></video>
|
||
<div id="player-loading" class="player-loading-overlay">
|
||
<div class="spinner"></div>
|
||
<p id="player-loading-text">Loading Stream...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-overlay" id="download-modal">
|
||
<div class="modal-content download-settings-content">
|
||
<button class="modal-close" id="close-download-modal">✕</button>
|
||
<h2 class="modal-title">Download Settings</h2>
|
||
|
||
<div class="download-sections-wrapper">
|
||
<div id="dl-quality-section" class="dl-section" style="display:none;">
|
||
<h3>Video Quality</h3>
|
||
<div class="dl-list" id="dl-quality-list"></div>
|
||
</div>
|
||
|
||
<div id="dl-audio-section" class="dl-section" style="display:none;">
|
||
<h3>Audio Tracks</h3>
|
||
<div class="dl-list" id="dl-audio-list"></div>
|
||
</div>
|
||
|
||
<div id="dl-subs-section" class="dl-section">
|
||
<h3>Subtitles</h3>
|
||
<div class="dl-list" id="dl-subs-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dl-actions">
|
||
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
|
||
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-container" id="main-content">
|
||
<div class="anime-header">
|
||
<h1 class="anime-title" id="title">Loading...</h1>
|
||
<div class="hero-meta-info">
|
||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||
</div>
|
||
<div class="hero-description-mini" id="description-preview"></div>
|
||
<div class="hero-tags" id="genres"></div>
|
||
|
||
<div class="action-row">
|
||
<button class="btn-watch" id="watch-btn">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||
Start Watching
|
||
</button>
|
||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-layout">
|
||
<aside class="poster-section">
|
||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||
<div class="metadata-sidebar">
|
||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="content-column">
|
||
|
||
<section class="episodes-section">
|
||
<div class="episodes-header-row">
|
||
<h2>Episodes</h2>
|
||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||
</div>
|
||
<div id="episodes-grid" class="episodes-grid"></div>
|
||
|
||
<div class="pagination-controls" id="pagination-controls">
|
||
<button class="page-btn" id="prev-page">Previous</button>
|
||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||
<button class="page-btn" id="next-page">Next</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||
<h3 class="subsection-title">Relations</h3>
|
||
<div class="relations-horizontal" id="relations-grid"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<section class="content-section">
|
||
<h2 class="subsection-title">Characters</h2>
|
||
<div class="characters-grid" id="char-list"></div>
|
||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||
</section>
|
||
|
||
<section class="content-section">
|
||
<h2 class="subsection-title">Recommended</h2>
|
||
<div class="carousel-wrapper">
|
||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||
<div class="carousel" id="recommendations-grid"></div>
|
||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||
|
||
<script src="/src/scripts/anime/player.js"></script>
|
||
<script src="/src/scripts/anime/entry.js"></script>
|
||
|
||
</body>
|
||
</html> |