Compare commits
2 Commits
7544f56ba9
...
7c85d91b85
| Author | SHA1 | Date | |
|---|---|---|---|
| 7c85d91b85 | |||
| c11a1eed35 |
@@ -1,224 +1,365 @@
|
||||
<!DOCTYPE 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>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/views/css/components/updateNotifier.css"
|
||||
/>
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img
|
||||
class="app-icon"
|
||||
src="/public/assets/waifuboards.ico"
|
||||
alt=""
|
||||
/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">
|
||||
✕
|
||||
</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Planning</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
<option value="REPEATING">Rewatching</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Episodes Watched</label>
|
||||
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<div class="date-group">
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-start-date">Start Date</label>
|
||||
<input type="date" id="entry-start-date" class="form-input">
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Planning</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
<option value="REPEATING">Rewatching</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-end-date">End Date</label>
|
||||
<input type="date" id="entry-end-date" class="form-input">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Episodes Watched</label>
|
||||
<input
|
||||
type="number"
|
||||
id="entry-progress"
|
||||
class="form-input"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="entry-score"
|
||||
class="form-input"
|
||||
min="0"
|
||||
max="10"
|
||||
step="0.1"
|
||||
placeholder="Optional"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<div class="date-group">
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-start-date"
|
||||
>Start Date</label
|
||||
>
|
||||
<input
|
||||
type="date"
|
||||
id="entry-start-date"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-end-date">End Date</label>
|
||||
<input
|
||||
type="date"
|
||||
id="entry-end-date"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-repeat-count"
|
||||
>Rewatch Count</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="entry-repeat-count"
|
||||
class="form-input"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group notes-group">
|
||||
<label for="entry-notes">Notes</label>
|
||||
<textarea
|
||||
id="entry-notes"
|
||||
class="form-input notes-textarea"
|
||||
rows="4"
|
||||
placeholder="Personal notes..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="entry-is-private"
|
||||
class="form-checkbox"
|
||||
/>
|
||||
<label for="entry-is-private"
|
||||
>Mark as Private</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-repeat-count">Rewatch Count</label>
|
||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group notes-group">
|
||||
<label for="entry-notes">Notes</label>
|
||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||
Read More
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
class="btn-danger"
|
||||
id="modal-delete-btn"
|
||||
onclick="deleteFromList()"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
onclick="closeAddToListModal()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-primary" onclick="saveToList()">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-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/anime.js"></script>
|
||||
</body>
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div
|
||||
class="pill extension-pill"
|
||||
id="extension-pill"
|
||||
style="display: none; background: #8b5cf6"
|
||||
></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
id="add-to-list-btn"
|
||||
onclick="openAddToListModal()"
|
||||
>
|
||||
+ Add to List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button
|
||||
id="read-more-btn"
|
||||
class="read-more-btn"
|
||||
style="display: none"
|
||||
onclick="openModal()"
|
||||
>
|
||||
Read More
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div
|
||||
class="section-title"
|
||||
style="margin: 0; border: none; padding: 0"
|
||||
>
|
||||
<h2
|
||||
style="
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
"
|
||||
>
|
||||
Episodes
|
||||
</h2>
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input
|
||||
type="number"
|
||||
id="ep-search"
|
||||
class="episode-search-input"
|
||||
placeholder="Jump to Ep #"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button
|
||||
class="page-btn"
|
||||
id="prev-page"
|
||||
onclick="changePage(-1)"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="page-info" id="page-info"
|
||||
>Page 1 of 1</span
|
||||
>
|
||||
<button
|
||||
class="page-btn"
|
||||
id="next-page"
|
||||
onclick="changePage(1)"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-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/anime.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -34,7 +34,7 @@
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.poster-card img {
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
@@ -53,16 +53,36 @@
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
|
||||
.info-item h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.info-item span {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
.character-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.char-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
@@ -79,7 +99,7 @@
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
@@ -92,14 +112,18 @@
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
.pill.score {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
@@ -119,7 +143,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
@@ -135,7 +161,7 @@
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
@@ -153,17 +179,30 @@
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.section-title::before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 28px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
@@ -173,7 +212,7 @@
|
||||
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
@@ -191,8 +230,14 @@
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -201,11 +246,24 @@
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
.poster-card {
|
||||
width: 220px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-content {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.anime-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
}
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
@@ -221,7 +279,9 @@
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
.read-more-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.episodes-header-row {
|
||||
display: flex;
|
||||
@@ -261,7 +321,10 @@
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
.episode-search-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
@@ -295,3 +358,118 @@
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-container,
|
||||
.section,
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -50px;
|
||||
padding: 1rem 1.25rem 4rem 1.25rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
width: 180px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-watch,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 2rem;
|
||||
padding: 1.25rem;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 3rem;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.episodes-header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.episode-search-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.episode-search-input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episodes-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.episode-btn {
|
||||
padding: 0.8rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,11 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -64,7 +68,11 @@
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group { display: flex; align-items: center; gap: var(--spacing-md); }
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
@@ -87,11 +95,15 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sd-option.active { color: var(--color-text-primary); }
|
||||
.sd-option.active {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px; left: 4px; bottom: 4px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: calc(50% - 4px);
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
@@ -100,7 +112,9 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.source-select {
|
||||
appearance: none;
|
||||
@@ -119,8 +133,15 @@
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); }
|
||||
.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
|
||||
.source-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
.source-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
aspect-ratio: 16/9;
|
||||
@@ -128,14 +149,25 @@
|
||||
background: var(--color-bg-base);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--glass-border);
|
||||
position: relative;
|
||||
transition: box-shadow var(--transition-smooth);
|
||||
}
|
||||
|
||||
.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); }
|
||||
.video-container:hover {
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--color-primary),
|
||||
var(--shadow-glow);
|
||||
}
|
||||
|
||||
#player { width: 100%; height: 100%; object-fit: contain; }
|
||||
#player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
@@ -150,16 +182,25 @@
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px; height: 48px;
|
||||
border: 3px solid rgba(255,255,255,0.1);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; }
|
||||
.loading-overlay p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
display: flex;
|
||||
@@ -174,21 +215,49 @@
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); }
|
||||
.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
.navigation-buttons { display: flex; gap: var(--spacing-md); }
|
||||
|
||||
.nav-btn {
|
||||
display: flex; align-items: center; gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated); border: var(--border-subtle);
|
||||
color: var(--color-text-primary); padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
|
||||
cursor: pointer; transition: all var(--transition-base);
|
||||
.episode-info h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
.episode-info p {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
|
||||
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.episode-carousel-compact {
|
||||
width: 100%;
|
||||
@@ -258,10 +327,18 @@
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black var(--spacing-md),
|
||||
black calc(100% - var(--spacing-md)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list::-webkit-scrollbar { display: none; }
|
||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 200px;
|
||||
@@ -290,12 +367,14 @@
|
||||
.carousel-item.active-ep-carousel {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-primary),
|
||||
var(--shadow-md);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel::after {
|
||||
content: 'WATCHING';
|
||||
content: "WATCHING";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -391,7 +470,8 @@
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.anime-details, .anime-extra-content {
|
||||
.anime-details,
|
||||
.anime-extra-content {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
}
|
||||
@@ -425,9 +505,17 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
|
||||
.cover-image {
|
||||
width: 220px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); }
|
||||
.details-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
@@ -439,8 +527,15 @@
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-badge.meta-score { background: var(--color-primary); color: white; }
|
||||
.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
|
||||
.meta-badge.meta-score {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
.details-description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
display: flex;
|
||||
@@ -471,9 +566,15 @@
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.expand-btn:hover { background: rgba(139, 92, 246, 0.1); }
|
||||
.expand-btn svg { transition: transform var(--transition-smooth); }
|
||||
.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); }
|
||||
.expand-btn:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.expand-btn svg {
|
||||
transition: transform var(--transition-smooth);
|
||||
}
|
||||
.expand-btn[data-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
display: flex;
|
||||
@@ -495,7 +596,6 @@
|
||||
}
|
||||
|
||||
.characters-carousel.expanded {
|
||||
|
||||
height: auto;
|
||||
max-height: 3200px;
|
||||
overflow-y: auto;
|
||||
@@ -519,15 +619,38 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plyr--video { border-radius: var(--radius-xl); }
|
||||
.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
|
||||
.plyr--full-ui input[type=range] { color: var(--color-primary); }
|
||||
.plyr__control:hover { background: rgba(255,255,255,0.12) !important; }
|
||||
.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; }
|
||||
.plyr--video {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.plyr__controls {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.5) 50%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
padding: 1rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
.plyr--full-ui input[type="range"] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.plyr__control:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.plyr__menu__container {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.carousel-nav { display: flex; }
|
||||
.watch-container { padding-top: 5rem; }
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
}
|
||||
.watch-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
@@ -540,64 +663,101 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.watch-container { padding: 4.5rem 1rem; }
|
||||
|
||||
.episode-carousel-compact-list {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
.carousel-header {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
.carousel-item {
|
||||
flex: 0 0 180px;
|
||||
height: 100px;
|
||||
}
|
||||
.carousel-item-img-container { height: 60px; }
|
||||
.carousel-item-info p { font-size: 0.95rem; }
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 140px;
|
||||
height: 80px;
|
||||
.watch-container {
|
||||
padding: 5rem 1rem 2rem 1rem;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.details-container { flex-direction: column; text-align: center; }
|
||||
.player-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.details-cover h1 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.cover-image { width: 180px; margin: 0 auto; }
|
||||
|
||||
.episode-controls { flex-direction: column; gap: var(--spacing-md); }
|
||||
.navigation-buttons { width: 100%; justify-content: center; }
|
||||
.nav-btn { flex: 1; justify-content: center; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.episode-info h1, .details-content h1 { font-size: 1.5rem; }
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 150px;
|
||||
height: 90px;
|
||||
}
|
||||
.carousel-item-img-container { height: 50px; }
|
||||
.carousel-item-info p { font-size: 0.9rem; }
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 120px;
|
||||
height: 70px;
|
||||
.source-select {
|
||||
width: 100%;
|
||||
background-position: right 1.5rem center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
font-size: 1.5rem;
|
||||
.episode-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-btn span { display: none; }
|
||||
.episode-info {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.details-cover {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.character-card {
|
||||
|
||||
flex: 1 1 100%;
|
||||
width: calc(50% - 0.75rem);
|
||||
flex: 0 0 calc(50% - 0.75rem);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,61 @@
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 2rem; left: 2rem; z-index: 100;
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: var(--color-glass-bg); backdrop-filter: blur(12px);
|
||||
border: var(--border-subtle); border-radius: var(--radius-full);
|
||||
color: white; text-decoration: none; font-weight: 600;
|
||||
background: var(--color-glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative; width: 100%; height: 60vh; overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.hero-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.4;
|
||||
filter: blur(8px);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
||||
.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
|
||||
.hero-overlay {
|
||||
position: absolute; inset: 0; z-index: 1;
|
||||
background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
var(--color-bg-base) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative; z-index: 10;
|
||||
max-width: 1600px; margin: -350px auto 0 auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
@@ -31,7 +64,9 @@
|
||||
animation: slideUp 0.8s ease;
|
||||
}
|
||||
|
||||
.hero-content { display: none; }
|
||||
.hero-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
@@ -44,49 +79,111 @@
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
|
||||
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.poster-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated); border: var(--border-subtle);
|
||||
border-radius: var(--radius-md); padding: 1.25rem;
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.info-item h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.info-item span {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 0.95rem; }
|
||||
|
||||
.main-content {
|
||||
display: flex; flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 4rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.book-header { margin-bottom: 1.5rem; }
|
||||
.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
|
||||
|
||||
.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
|
||||
.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--border-subtle); backdrop-filter: blur(10px); }
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
#description { display: none; }
|
||||
#year { display: none; }
|
||||
|
||||
.action-row { display: flex; gap: 1rem; }
|
||||
.btn-primary {
|
||||
padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
|
||||
font-weight: 800; cursor: pointer; transition: transform 0.2s;
|
||||
.book-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.book-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 1rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pill {
|
||||
padding: 0.4rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
border: var(--border-subtle);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.pill.score {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
#description {
|
||||
display: none;
|
||||
}
|
||||
#year {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn-primary {
|
||||
padding: 0.8rem 2rem;
|
||||
background: white;
|
||||
color: black;
|
||||
border: none;
|
||||
border-radius: 99px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.btn-primary:hover { transform: scale(1.05); }
|
||||
|
||||
.btn-secondary {
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -94,49 +191,80 @@
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-blur {
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.btn-blur:hover { background: rgba(255,255,255,0.2); }
|
||||
.btn-blur:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.chapters-section { margin-top: 1rem; }
|
||||
.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
|
||||
.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
|
||||
.chapters-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 0.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.section-title h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.chapters-table-wrapper {
|
||||
background: var(--color-bg-elevated); border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
.chapters-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
|
||||
.chapters-table th {
|
||||
padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
|
||||
color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
padding: 0.8rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.chapters-table td {
|
||||
padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
color: var(--color-text-primary); font-size: 0.95rem;
|
||||
padding: 1rem 1.2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.chapters-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.chapters-table tr:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
}
|
||||
.chapters-table tr:last-child td { border-bottom: none; }
|
||||
.chapters-table tr:hover { background: var(--color-bg-elevated-hover); }
|
||||
|
||||
.filter-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
border-radius: 99px;
|
||||
font-size: 0.9rem;
|
||||
@@ -159,36 +287,261 @@
|
||||
}
|
||||
|
||||
.read-btn-small {
|
||||
background: var(--color-primary); color: white; border: none;
|
||||
padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
|
||||
font-size: 0.8rem; transition: 0.2s;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.read-btn-small:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
.read-btn-small:hover { background: #7c3aed; }
|
||||
|
||||
.pagination-controls {
|
||||
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.page-btn {
|
||||
background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1);
|
||||
color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-btn:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
|
||||
|
||||
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-wrapper { height: 40vh; }
|
||||
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
|
||||
.poster-card { display: none; }
|
||||
.hero-wrapper {
|
||||
height: 40vh;
|
||||
}
|
||||
.content-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -80px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content { padding-top: 0; align-items: center; text-align: center; }
|
||||
.book-title { font-size: 2.2rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.action-row { justify-content: center; width: 100%; }
|
||||
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
|
||||
.main-content {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.book-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
}
|
||||
.action-row {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.btn-primary,
|
||||
.btn-blur {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar { display: none; }
|
||||
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
|
||||
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
.chapters-table th:nth-child(3),
|
||||
.chapters-table td:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
.chapters-table th:nth-child(4),
|
||||
.chapters-table td:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-wrapper {
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -60px;
|
||||
padding: 0 1rem 3rem 1rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex !important;
|
||||
position: static;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
display: block !important;
|
||||
width: 160px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
order: 2;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.3rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-blur {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.chapters-table-wrapper {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chapters-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapters-table tbody,
|
||||
.chapters-table tr,
|
||||
.chapters-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chapters-table tr {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 0.8rem;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chapters-table td {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chapters-table td:nth-child(1) {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chapters-table td:nth-child(2) {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.chapters-table td:last-child {
|
||||
margin-top: 0.5rem;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.chapters-table td:last-child,
|
||||
.chapters-table td:nth-child(4) {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.read-btn-small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.chapters-table td:nth-child(3) {
|
||||
display: block !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.chapters-table td:nth-child(3)::before {
|
||||
content: "Provider: ";
|
||||
font-weight: 700;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.read-btn-small {
|
||||
width: 100%;
|
||||
padding: 0.7rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -4,11 +4,15 @@
|
||||
--bg-hover: #252530;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: rgba(10, 10, 15, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
@@ -107,7 +111,9 @@
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
@@ -160,7 +166,9 @@
|
||||
box-shadow: var(--shadow-lg);
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.double-container img:hover {
|
||||
@@ -174,7 +182,7 @@
|
||||
padding: 3rem 2.5rem;
|
||||
line-height: var(--ln-line-height, 1.8);
|
||||
font-size: var(--ln-font-size, 18px);
|
||||
font-family: var(--ln-font-family, 'Georgia', serif);
|
||||
font-family: var(--ln-font-family, "Georgia", serif);
|
||||
color: var(--ln-text-color, #e5e7eb);
|
||||
text-align: var(--ln-text-align, left);
|
||||
}
|
||||
@@ -183,7 +191,9 @@
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.ln-content h1, .ln-content h2, .ln-content h3 {
|
||||
.ln-content h1,
|
||||
.ln-content h2,
|
||||
.ln-content h3 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 700;
|
||||
@@ -297,7 +307,7 @@
|
||||
.control label span {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
select, input[type="color"], input[type="number"] {
|
||||
select,
|
||||
input[type="color"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border-radius: var(--radius-md);
|
||||
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
select:hover, input[type="color"]:hover, input[type="number"]:hover {
|
||||
select:hover,
|
||||
input[type="color"]:hover,
|
||||
input[type="number"]:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
select:focus, input[type="color"]:focus, input[type="number"]:focus {
|
||||
select:focus,
|
||||
input[type="color"]:focus,
|
||||
input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
@@ -454,7 +470,9 @@ input[type="color"] {
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@@ -545,3 +563,53 @@ input[type="color"] {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#reader {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.manga-container {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.page-img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.page-img.longstrip-fit {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.double-container {
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.double-container img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.fit-height,
|
||||
.fit-screen {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
@@ -12,14 +12,14 @@
|
||||
|
||||
.modal-content {
|
||||
background: var(--color-bg-amoled);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 900px;
|
||||
width: 95%;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
animation: modalSlideUp 0.3s ease;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -40,8 +40,8 @@
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -66,7 +66,7 @@
|
||||
padding: 1.5rem 2rem 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
.form-input {
|
||||
background: var(--color-bg-field);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
@@ -154,7 +154,7 @@
|
||||
.form-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: var(--color-bg-base);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@@ -171,7 +171,7 @@
|
||||
}
|
||||
|
||||
.form-checkbox:checked::after {
|
||||
content: '✓';
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -187,21 +187,25 @@
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 2rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: var(--color-bg-amoled);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger {
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
background 0.2s;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@@ -215,13 +219,13 @@
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@@ -243,26 +247,89 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 600px) {
|
||||
.modal-content {
|
||||
max-width: 95%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem;
|
||||
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.modal-fields-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.form-group.notes-group {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
.form-group,
|
||||
.form-group.notes-group,
|
||||
.form-group.checkbox-group,
|
||||
.form-group.full-width {
|
||||
grid-column: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.form-group.checkbox-group {
|
||||
grid-column: 1 / -1;
|
||||
align-self: auto;
|
||||
|
||||
.date-group {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.notes-textarea {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
padding: 1rem 1.5rem;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
padding: 1rem;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
.modal-title, .modal-body {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
order: 1;
|
||||
}
|
||||
.btn-secondary {
|
||||
order: 2;
|
||||
}
|
||||
.btn-danger {
|
||||
order: 3;
|
||||
margin-top: 0.5rem;
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,8 +23,13 @@
|
||||
.hero-vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
|
||||
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
transparent 0%,
|
||||
var(--color-bg-base) 120%
|
||||
),
|
||||
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -106,8 +111,18 @@
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
|
||||
linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
transparent 0%,
|
||||
var(--color-bg-base) 120%
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
var(--color-bg-base) 10%,
|
||||
rgba(9, 9, 11, 0.8) 25%,
|
||||
transparent 60%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -118,3 +133,86 @@
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-wrapper {
|
||||
height: auto;
|
||||
min-height: 85vh;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
padding: 6rem 1.5rem 3rem 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.hero-poster-card {
|
||||
width: 150px;
|
||||
height: 225px;
|
||||
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
||||
-webkit-line-clamp: 3;
|
||||
max-width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-buttons .btn-primary,
|
||||
.hero-buttons .btn-blur {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
transparent 0%,
|
||||
var(--color-bg-base) 140%
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
var(--color-bg-base) 15%,
|
||||
rgba(0, 0, 0, 0.8) 40%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,11 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(9, 9, 11, 0.9) 0%,
|
||||
rgba(9, 9, 11, 0) 100%
|
||||
);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
@@ -211,7 +215,9 @@
|
||||
min-width: 260px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.6),
|
||||
0 0 0 1px rgba(139, 92, 246, 0.1);
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
animation: dropdownSlide 0.2s ease-out;
|
||||
@@ -416,3 +422,105 @@
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 0 1rem;
|
||||
height: 60px;
|
||||
gap: 0.5rem;
|
||||
|
||||
z-index: 1002;
|
||||
background: rgba(9, 9, 11, 0.95);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
min-width: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.5rem 1rem 0.5rem 2.2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#nav-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
background: rgba(9, 9, 11, 0.98);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
z-index: 1001;
|
||||
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-center::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
flex-shrink: 0;
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-button.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: fixed;
|
||||
top: 110px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
max-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 1rem;
|
||||
left: 1rem;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ body {
|
||||
padding: 0;
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -288,7 +288,7 @@ body {
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
@@ -299,3 +299,95 @@ body {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
Here is the CSS you need to add to the very bottom of your file.
|
||||
|
||||
I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
|
||||
1. First: The HTML Tag (Crucial)
|
||||
|
||||
Ensure this is in your HTML <head> or the CSS below will not work:
|
||||
HTML
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
2. The CSS Update
|
||||
|
||||
Copy and paste this entire block to the bottom of your CSS file:
|
||||
CSS
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--nav-height: 60px;
|
||||
--spacing-2xl: 1.5rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.scroll-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
padding: 0.5rem 0;
|
||||
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: 160px;
|
||||
width: 160px;
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.profile-selection-container,
|
||||
main {
|
||||
width: 90% !important;
|
||||
margin: 0 auto;
|
||||
padding-top: 20vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-card img,
|
||||
.user-avatar {
|
||||
width: 140px !important;
|
||||
height: 140px !important;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-blur,
|
||||
.add-user-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,14 +27,16 @@
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||||
transition:
|
||||
transform 0.3s,
|
||||
box-shadow 0.3s;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
@@ -54,7 +56,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Filtros mejorados --- */
|
||||
.filters-section {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
@@ -62,9 +63,9 @@
|
||||
padding: 1.5rem;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
@@ -85,7 +86,7 @@
|
||||
|
||||
.filter-select {
|
||||
background: var(--color-bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 8px;
|
||||
@@ -118,7 +119,7 @@
|
||||
|
||||
.view-btn {
|
||||
background: var(--color-bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-secondary);
|
||||
padding: 0.7rem;
|
||||
border-radius: 8px;
|
||||
@@ -159,7 +160,9 @@
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -194,14 +197,14 @@
|
||||
|
||||
.list-item {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
@@ -236,16 +239,15 @@
|
||||
}
|
||||
|
||||
.list-grid.list-view .item-poster {
|
||||
/* Cambiar el ancho y alto */
|
||||
width: 120px; /* Antes: 100px */
|
||||
height: 180px; /* Antes: 150px */
|
||||
width: 120px;
|
||||
height: 180px;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding: 1rem; /* Antes: 1.2rem */
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
@@ -262,7 +264,7 @@
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1rem; /* Antes: 1.1rem */
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
@@ -281,16 +283,16 @@
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
|
||||
margin-bottom: 0.5rem; /* Antes: 0.8rem */
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
/* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
|
||||
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
font-size: 0.65rem; /* Antes: 0.7rem */
|
||||
padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -329,12 +331,12 @@
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
background: rgba(255,255,255,0.08);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 999px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@@ -364,7 +366,6 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* --- Botón de edición flotante --- */
|
||||
.edit-icon-btn {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
@@ -382,7 +383,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, transform 0.2s, background 0.2s;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
transform 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover .edit-icon-btn {
|
||||
@@ -412,74 +416,92 @@
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */
|
||||
|
||||
@media (max-width: 550px) {
|
||||
/* Layout de lista (card view) */
|
||||
.list-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
.list-grid.list-view .list-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-right: 0;
|
||||
}
|
||||
.list-grid.list-view .item-poster {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.list-grid.list-view .item-content {
|
||||
flex-direction: column;
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
.list-grid.list-view .item-content > div:first-child {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.list-grid.list-view .edit-icon-btn {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
opacity: 1;
|
||||
background: rgba(18, 18, 21, 0.8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Modal en móvil */
|
||||
.modal-content {
|
||||
margin: 0.5rem;
|
||||
width: auto;
|
||||
.header-section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.modal-fields-grid {
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.form-group.notes-group,
|
||||
.form-group.checkbox-group {
|
||||
grid-column: auto;
|
||||
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.btn-danger {
|
||||
margin-right: 0;
|
||||
order: 3;
|
||||
}
|
||||
.btn-secondary {
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.8rem;
|
||||
order: 2;
|
||||
}
|
||||
.btn-primary {
|
||||
|
||||
.stat-label {
|
||||
font-size: 1rem;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn-card {
|
||||
display: none;
|
||||
}
|
||||
.filters-section {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-poster-link {
|
||||
z-index: 1;
|
||||
.filter-group {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
|
||||
.edit-icon-btn {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
@@ -25,7 +25,7 @@
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-elevated-hover);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
appearance: none;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -51,14 +51,14 @@
|
||||
|
||||
.extension-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
min-height: 140px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -67,7 +67,7 @@
|
||||
.extension-card:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.card-content-wrapper {
|
||||
@@ -128,7 +128,10 @@
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
background 0.2s,
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
margin-top: auto;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -176,7 +179,7 @@
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
border: 2px solid rgba(255,255,255,0.05);
|
||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.skeleton-text.title-skeleton {
|
||||
height: 1.1em;
|
||||
@@ -228,10 +231,14 @@
|
||||
border-radius: var(--radius-lg);
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow:
|
||||
0 15px 50px rgba(0, 0, 0, 0.8),
|
||||
0 0 20px var(--color-primary-glow);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-50px);
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
|
||||
opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -245,7 +252,7 @@
|
||||
font-weight: 800;
|
||||
margin-top: 0;
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid rgba(255,255,255,0.05);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.05);
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -264,14 +271,15 @@
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
transition:
|
||||
background 0.2s,
|
||||
transform 0.2s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -293,3 +301,103 @@
|
||||
background: #ef4444;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.filter-controls::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex-shrink: 0;
|
||||
padding: 0.6rem 2.2rem 0.6rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.marketplace-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.extension-card {
|
||||
padding: 0.75rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.extension-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.extension-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.extension-status-badge {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.extension-card:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.extension-action-button {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
max-width: none;
|
||||
padding: 1.5rem;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transform: translateY(100%);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-overlay:not(.hidden) .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#modalTitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#modalMessage {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -361,3 +361,97 @@ html.electron body {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.calendar-wrapper {
|
||||
padding: 1rem;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calendar-controls {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.month-selector {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 1.5rem;
|
||||
min-width: auto;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.controls-right {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-board {
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.weekdays-grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.days-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background: transparent;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.day-cell.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.day-cell {
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-elevated);
|
||||
min-height: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.day-cell:nth-child(7n) {
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.day-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.anime-chip {
|
||||
padding: 12px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.cell-backdrop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,29 @@
|
||||
.background-gradient {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at top,
|
||||
rgba(139, 92, 246, 0.15) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at bottom right,
|
||||
rgba(59, 130, 246, 0.1) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
z-index: 0;
|
||||
animation: gradientShift 10s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
@@ -80,9 +94,8 @@
|
||||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Badge de contraseña protegida */
|
||||
.user-card.has-password::after {
|
||||
content: '🔒';
|
||||
content: "🔒";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
@@ -116,7 +129,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(139, 92, 246, 0.1) 0%,
|
||||
rgba(59, 130, 246, 0.05) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder svg {
|
||||
@@ -131,7 +148,12 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.95) 0%,
|
||||
rgba(0, 0, 0, 0.7) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
@@ -168,7 +190,9 @@
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, background 0.2s;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
background 0.2s;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@@ -205,7 +229,6 @@
|
||||
box-shadow: 0 10px 30px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -438,7 +461,6 @@ input[type="file"] {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Estilos para modal de password */
|
||||
.password-modal-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
@@ -461,7 +483,6 @@ input[type="file"] {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
|
||||
.manage-actions-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -673,10 +694,13 @@ input[type="file"] {
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
@@ -720,22 +744,121 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.page-wrapper {
|
||||
padding: 1rem;
|
||||
|
||||
align-items: flex-start;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.users-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.user-config-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.user-config-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.btn-add-user {
|
||||
width: 100%;
|
||||
padding: 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.users-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.user-info {
|
||||
transform: translateY(0);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.95) 0%,
|
||||
rgba(0, 0, 0, 0.6) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: none;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-card:active {
|
||||
transform: scale(0.97);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 20px 20px 0 0;
|
||||
max-height: 85vh;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"] {
|
||||
padding: 1.2rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,174 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WaifuBoard - Users</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/users.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="background-gradient"></div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="header-section">
|
||||
<h1 class="page-title">Who's exploring?</h1>
|
||||
<p class="page-subtitle">Select your profile to continue</p>
|
||||
</div>
|
||||
|
||||
<div class="users-grid" id="usersGrid">
|
||||
</div>
|
||||
|
||||
<button class="btn-add-user" id="btnAddUser">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modalCreateUser">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Create New User</h2>
|
||||
<button class="modal-close" id="closeCreateModal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form id="createUserForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required maxlength="20" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Profile Picture</label>
|
||||
<div class="avatar-upload-area" id="avatarUploadArea">
|
||||
<div class="avatar-preview" id="avatarPreview">
|
||||
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="avatar-upload-text">Click to upload or drag and drop</p>
|
||||
<p class="avatar-upload-hint">PNG, JPG, GIF... up to 50 MB</p>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>WaifuBoard - Users</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/views/css/components/updateNotifier.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
|
||||
<link rel="stylesheet" href="/views/css/users.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="/public/assets/waifuboards.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img
|
||||
class="app-icon"
|
||||
src="/public/assets/waifuboards.ico"
|
||||
alt=""
|
||||
/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="avatarInput" accept="image/*">
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" id="cancelCreate">Cancel</button>
|
||||
<button type="submit" class="btn-primary">Create User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modalUserActions">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h2 id="actionsModalTitle">Manage Profile</h2>
|
||||
<button class="modal-close" id="closeActionsModal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="actionsModalContent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-wrapper">
|
||||
<div class="background-gradient"></div>
|
||||
|
||||
<div class="modal" id="modalEditUser">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Edit Profile</h2>
|
||||
<button class="modal-close" id="closeEditModal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form id="editUserForm">
|
||||
<div class="form-group">
|
||||
<label for="editUsername">Username</label>
|
||||
<input type="text" id="editUsername" name="username" required maxlength="20" placeholder="Enter your new name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Profile Picture</label>
|
||||
<div class="avatar-upload-area" id="editAvatarUploadArea">
|
||||
<div class="avatar-preview" id="editAvatarPreview">
|
||||
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="avatar-upload-text">Click to upload or drag and drop</p>
|
||||
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
||||
<div class="content-container">
|
||||
<div class="header-section">
|
||||
<h1 class="page-title">Who's exploring?</h1>
|
||||
<p class="page-subtitle">Select your profile to continue</p>
|
||||
</div>
|
||||
|
||||
<div class="users-grid" id="usersGrid"></div>
|
||||
|
||||
<button class="btn-add-user" id="btnAddUser">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="editAvatarInput" accept="image/*">
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" id="cancelEdit">Cancel</button>
|
||||
<button type="submit" class="btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modalAniList">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>AniList Integration</h2>
|
||||
<button class="modal-close" id="closeAniListModal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="aniListContent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" id="modalCreateUser">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Create New User</h2>
|
||||
<button class="modal-close" id="closeCreateModal">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form id="createUserForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
maxlength="20"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Profile Picture</label>
|
||||
<div class="avatar-upload-area" id="avatarUploadArea">
|
||||
<div class="avatar-preview" id="avatarPreview">
|
||||
<svg
|
||||
class="avatar-preview-placeholder"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
||||
></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="avatar-upload-text">
|
||||
Click to upload or drag and drop
|
||||
</p>
|
||||
<p class="avatar-upload-hint">
|
||||
PNG, JPG, GIF... up to 50 MB
|
||||
</p>
|
||||
</div>
|
||||
<input type="file" id="avatarInput" accept="image/*" />
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondary"
|
||||
id="cancelCreate"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn-primary">
|
||||
Create User
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="userToastContainer"></div>
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
<script>localStorage.removeItem("token")</script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/users.js"></script>
|
||||
</body>
|
||||
<div class="modal" id="modalUserActions">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content" style="max-width: 400px">
|
||||
<div class="modal-header">
|
||||
<h2 id="actionsModalTitle">Manage Profile</h2>
|
||||
<button class="modal-close" id="closeActionsModal">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="actionsModalContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modalEditUser">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Edit Profile</h2>
|
||||
<button class="modal-close" id="closeEditModal">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form id="editUserForm">
|
||||
<div class="form-group">
|
||||
<label for="editUsername">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="editUsername"
|
||||
name="username"
|
||||
required
|
||||
maxlength="20"
|
||||
placeholder="Enter your new name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Profile Picture</label>
|
||||
<div
|
||||
class="avatar-upload-area"
|
||||
id="editAvatarUploadArea"
|
||||
>
|
||||
<div class="avatar-preview" id="editAvatarPreview">
|
||||
<svg
|
||||
class="avatar-preview-placeholder"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
||||
></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="avatar-upload-text">
|
||||
Click to upload or drag and drop
|
||||
</p>
|
||||
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
id="editAvatarInput"
|
||||
accept="image/*"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondary"
|
||||
id="cancelEdit"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn-primary">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modalAniList">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>AniList Integration</h2>
|
||||
<button class="modal-close" id="closeAniListModal">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="aniListContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="userToastContainer"></div>
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
localStorage.removeItem("token");
|
||||
</script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/users.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user