Deploy from Lumerel
This commit is contained in:
Lumerel Deploy
169
index.php
Normal file
169
index.php
Normal file
@@ -0,0 +1,169 @@
|
||||
<!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" />
|
||||
</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="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="loader"></div>
|
||||
<span>Loading your watchlist</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</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-field">
|
||||
<label class="form-label" for="inputTitle">Title <span class="req">*</span></label>
|
||||
<input type="text" class="form-input" id="inputTitle" placeholder="e.g. Dune: Part Two" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<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>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="inputService">Streaming On</label>
|
||||
<input type="text" class="form-input" id="inputService" placeholder="e.g. Netflix, HBO Max" autocomplete="off" list="serviceList" />
|
||||
<datalist id="serviceList"></datalist>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="inputGenre">Genre</label>
|
||||
<input type="text" class="form-input" id="inputGenre" placeholder="e.g. Sci-Fi, Drama" autocomplete="off" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="inputNotes">Notes</label>
|
||||
<input type="text" class="form-input" id="inputNotes" placeholder="Optional notes" autocomplete="off" />
|
||||
</div>
|
||||
</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=1"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user