187 lines
8.5 KiB
PHP
187 lines
8.5 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Watchlist</title>
|
||
<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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet" />
|
||
<!-- Bootstrap 5 -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
<link rel="stylesheet" href="style.css?v=2" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Ambient background -->
|
||
<div class="ambient">
|
||
<div class="ambient-orb orb-1"></div>
|
||
<div class="ambient-orb orb-2"></div>
|
||
<div class="ambient-orb orb-3"></div>
|
||
</div>
|
||
|
||
<div class="app">
|
||
|
||
<!-- HEADER -->
|
||
<header class="header">
|
||
<div class="header-brand">
|
||
<span class="header-icon"></span>
|
||
<div class="header-text">
|
||
<h1 class="header-title">Watchlist</h1>
|
||
<p class="header-sub">Your personal streaming guide</p>
|
||
</div>
|
||
</div>
|
||
<button class="btn-primary" id="openAddModal">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
Add Title
|
||
</button>
|
||
</header>
|
||
|
||
<!-- STATS -->
|
||
<section class="stats">
|
||
<div class="stat">
|
||
<span class="stat-value" id="statTotal"></span>
|
||
<span class="stat-label">Total</span>
|
||
</div>
|
||
<div class="stat-sep"></div>
|
||
<div class="stat">
|
||
<span class="stat-value" id="statUnwatched"></span>
|
||
<span class="stat-label">To Watch</span>
|
||
</div>
|
||
<div class="stat-sep"></div>
|
||
<div class="stat">
|
||
<span class="stat-value" id="statWatched"></span>
|
||
<span class="stat-label">Watched</span>
|
||
</div>
|
||
<div class="stat-sep"></div>
|
||
<div class="stat stat-progress">
|
||
<div class="progress-track">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<span class="stat-label" id="statPercent">0% complete</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTROLS -->
|
||
<section class="controls">
|
||
<div class="pill-group" id="filterGroup">
|
||
<button class="pill active" data-filter="all">All</button>
|
||
<button class="pill" data-filter="unwatched">To Watch</button>
|
||
<button class="pill" data-filter="watched">Watched</button>
|
||
</div>
|
||
<div class="pill-group" id="typeGroup">
|
||
<button class="type-pill active" data-type="">All</button>
|
||
<button class="type-pill" data-type="movie">Movies</button>
|
||
<button class="type-pill" data-type="show">Shows</button>
|
||
</div>
|
||
<div class="pill-group" id="forGroup">
|
||
<button class="for-pill active" data-for="">All</button>
|
||
<button class="for-pill" data-for="nik">Nik</button>
|
||
<button class="for-pill" data-for="tod">Tod</button>
|
||
</div>
|
||
<div class="search-box">
|
||
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<input type="text" class="search-input" id="searchInput" placeholder="Search" />
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SERVICE FILTER PILLS -->
|
||
<div class="service-row" id="serviceRow"></div>
|
||
|
||
<!-- GRID -->
|
||
<main class="grid" id="grid">
|
||
<div class="loading" id="loadingState">
|
||
<div class="spinner"></div>
|
||
<p>Loading your watchlistâ¦</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- EMPTY STATE (injected by JS) -->
|
||
|
||
</div><!-- /.app -->
|
||
|
||
<!-- ADD / EDIT MODAL -->
|
||
<div class="modal-overlay hidden" id="modalOverlay">
|
||
<div class="modal" id="modal">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="modalTitle">Add Title</h2>
|
||
<button class="modal-close" id="closeModal">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<form id="addForm" class="modal-form">
|
||
<input type="hidden" id="editId" />
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Title</label>
|
||
<input type="text" class="form-input" id="inputTitle" placeholder="Movie or show name" required />
|
||
</div>
|
||
|
||
<!-- Type toggle -->
|
||
<div class="form-group">
|
||
<label class="form-label">Type</label>
|
||
<div class="type-toggle">
|
||
<button type="button" class="type-option active" data-type-val="movie">Movie</button>
|
||
<button type="button" class="type-option" data-type-val="show">Show</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- For toggle -->
|
||
<div class="form-group">
|
||
<label class="form-label">For</label>
|
||
<div class="type-toggle">
|
||
<button type="button" class="for-option active" data-for-val="all">All</button>
|
||
<button type="button" class="for-option" data-for-val="nik">Nik</button>
|
||
<button type="button" class="for-option" data-for-val="tod">Tod</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Streaming Service</label>
|
||
<input type="text" class="form-input" id="inputService" placeholder="Netflix, Hulu, Disney+â¦" list="serviceList" autocomplete="off" />
|
||
<datalist id="serviceList"></datalist>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Genre</label>
|
||
<input type="text" class="form-input" id="inputGenre" placeholder="Drama, Comedy, Thrillerâ¦" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Notes</label>
|
||
<textarea class="form-input form-textarea" id="inputNotes" placeholder="Any notes or remindersâ¦"></textarea>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn-ghost" id="cancelModal">Cancel</button>
|
||
<button type="submit" class="btn-primary" id="submitBtn">Add to Watchlist</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DELETE CONFIRM MODAL -->
|
||
<div class="modal-overlay hidden" id="deleteOverlay">
|
||
<div class="modal modal-sm" id="deleteModal">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title">Remove Title?</h2>
|
||
<button class="modal-close" id="closeDeleteModal">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="delete-msg">Are you sure you want to remove <strong id="deleteTitle"></strong> from your watchlist?</p>
|
||
<div class="modal-actions" style="padding: 0 28px 24px;">
|
||
<button class="btn-ghost" id="cancelDelete">Cancel</button>
|
||
<button class="btn-danger" id="confirmDelete">Remove</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TOAST -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script src="app.js?v=4"></script>
|
||
</body>
|
||
</html>
|