ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Compare commits

base: ItsSkaiya:7544f56ba9081dc85c392e4f39b2d819030c2963
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1
...
compare: ItsSkaiya:7c85d91b85341a88ab5e07579a2a5520e5d2b474
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1

2 Commits
7544f56ba9 ... 7c85d91b85

Author SHA1 Message Date
itsskaiya
7c85d91b85 Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard 2025-12-17 13:00:35 -05:00
itsskaiya
c11a1eed35 Docker server has responsiveness now 2025-12-17 13:00:15 -05:00
14 changed files with 2465 additions and 747 deletions
Expand all files Collapse all files

559
docker/views/anime/anime.html
View File

@@ -1,224 +1,365 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link
<title>WaifuBoard</title> rel="icon"
<link rel="stylesheet" href="/views/css/globals.css"> href="/public/assets/waifuboards.ico"
<link rel="stylesheet" href="/views/css/components/anilist-modal.css"> type="image/x-icon"
<link rel="stylesheet" href="/views/css/components/hero.css"> />
<link rel="stylesheet" href="/views/css/anime/anime.css"> <title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link rel="stylesheet" href="/views/css/globals.css" />
<script src="/src/scripts/titlebar.js"></script> <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
<link rel="stylesheet" href="/views/css/components/titlebar.css"> <link rel="stylesheet" href="/views/css/components/hero.css" />
</head> <link rel="stylesheet" href="/views/css/anime/anime.css" />
<body> <link
<div id="titlebar"> rel="stylesheet"
<div class="title-left"> href="/views/css/components/updateNotifier.css"
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/> />
<span class="app-title">WaifuBoard</span> <script src="/src/scripts/titlebar.js"></script>
</div> <link rel="stylesheet" href="/views/css/components/titlebar.css" />
<div class="title-right"> </head>
<button class="min">—</button> <body>
<button class="max">🗖</button> <div id="titlebar">
<button class="close">✕</button> <div class="title-left">
</div> <img
</div> 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-overlay" id="desc-modal">
<div class="modal-content"> <div class="modal-content">
<button class="modal-close" onclick="closeModal()">✕</button> <button class="modal-close" onclick="closeModal()">✕</button>
<h2 class="modal-title">Synopsis</h2> <h2 class="modal-title">Synopsis</h2>
<div class="modal-text" id="full-description"></div> <div class="modal-text" id="full-description"></div>
</div> </div>
</div> </div>
<div class="modal-overlay" id="add-list-modal"> <div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list"> <div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button> <button class="modal-close" onclick="closeAddToListModal()">
<h2 class="modal-title" id="modal-title">Add to List</h2> ✕
</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body"> <div class="modal-body">
<div class="modal-fields-grid"> <div class="modal-fields-grid">
<div class="form-group">
<div class="form-group"> <label>Status</label>
<label>Status</label> <select id="entry-status" class="form-input">
<select id="entry-status" class="form-input"> <option value="WATCHING">Watching</option>
<option value="WATCHING">Watching</option> <option value="COMPLETED">Completed</option>
<option value="COMPLETED">Completed</option> <option value="PLANNING">Planning</option>
<option value="PLANNING">Planning</option> <option value="PAUSED">Paused</option>
<option value="PAUSED">Paused</option> <option value="DROPPED">Dropped</option>
<option value="DROPPED">Dropped</option> <option value="REPEATING">Rewatching</option>
<option value="REPEATING">Rewatching</option> </select>
</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> </div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label> <div class="form-group">
<input type="date" id="entry-end-date" class="form-input"> <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>
</div> </div>
<div class="form-group"> <div class="modal-actions">
<label for="entry-repeat-count">Rewatch Count</label> <button
<input type="number" id="entry-repeat-count" class="form-input" min="0"> class="btn-danger"
</div> id="modal-delete-btn"
onclick="deleteFromList()"
<div class="form-group notes-group"> >
<label for="entry-notes">Notes</label> Remove
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea> </button>
</div> <button
class="btn-secondary"
<div class="form-group checkbox-group"> onclick="closeAddToListModal()"
<input type="checkbox" id="entry-is-private" class="form-checkbox"> >
<label for="entry-is-private">Mark as Private</label> Cancel
</div> </button>
<button class="btn-primary" onclick="saveToList()">
</div> Save Changes
</div> </button>
<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> </div>
</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> </div>
</main>
</div>
<div id="updateToast" class="hidden"> <a href="/anime" class="back-btn">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p> <svg
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank"> width="20"
Click To Download height="20"
</a> fill="none"
</div> 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> <div class="hero-wrapper">
<script src="/src/scripts/rpc-inapp.js"></script> <div class="video-background">
<script src="/src/scripts/auth-guard.js"></script> <div id="player"></div>
</div>
<div class="hero-overlay"></div>
</div>
<script src="/src/scripts/utils/auth-utils.js"></script> <div class="content-container">
<script src="/src/scripts/utils/notification-utils.js"></script> <aside class="sidebar">
<script src="/src/scripts/utils/url-utils.js"></script> <div class="poster-card">
<script src="/src/scripts/utils/pagination-manager.js"></script> <img id="poster" src="" alt="" />
<script src="/src/scripts/utils/media-metadata-utils.js"></script> </div>
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script> <div class="info-grid">
<script src="/src/scripts/anime/anime.js"></script> <div class="info-item">
</body> <h4>Format</h4>
</html> <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>

232
docker/views/css/anime/anime.css
View File

@@ -34,7 +34,7 @@
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); 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 { .poster-card img {
@@ -45,7 +45,7 @@
.info-grid { .info-grid {
background: var(--color-bg-elevated); 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); border-radius: var(--radius-md);
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
@@ -53,16 +53,36 @@
gap: 1.25rem; 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 h4 {
.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); } 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 { .character-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
} }
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; } .character-item {
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } 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 { .main-content {
display: flex; display: flex;
@@ -79,7 +99,7 @@
font-weight: 900; font-weight: 900;
line-height: 1; line-height: 1;
margin: 0 0 1.5rem 0; 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 { .meta-row {
@@ -92,14 +112,18 @@
.pill { .pill {
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px); 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); border-radius: var(--radius-full);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; 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 { .action-row {
display: flex; display: flex;
@@ -119,7 +143,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
transition: transform 0.2s, box-shadow 0.2s; transition:
transform 0.2s,
box-shadow 0.2s;
} }
.btn-watch:hover { .btn-watch:hover {
@@ -135,7 +161,7 @@
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
@@ -153,17 +179,30 @@
line-height: 1.8; line-height: 1.8;
color: #e4e4e7; color: #e4e4e7;
max-width: 900px; max-width: 900px;
background: rgba(255,255,255,0.03); background: rgba(255, 255, 255, 0.03);
padding: 2rem; padding: 2rem;
border-radius: var(--radius-md); 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 { .episodes-section {
margin-top: 4rem; 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 {
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; } 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 { .episodes-grid {
display: grid; display: grid;
@@ -173,7 +212,7 @@
.episode-btn { .episode-btn {
background: var(--color-bg-elevated); 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; padding: 1.25rem 1rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
@@ -191,8 +230,14 @@
} }
@keyframes slideUp { @keyframes slideUp {
from { opacity: 0; transform: translateY(60px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
@@ -201,11 +246,24 @@
margin-top: -100px; margin-top: -100px;
padding: 0 1.5rem 4rem 1.5rem; 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); } .poster-card {
.main-content { text-align: center; align-items: center; } width: 220px;
.anime-title { font-size: 2.5rem; } margin: 0 auto;
.meta-row { justify-content: center; } box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
.sidebar { display: none; } }
.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 { .read-more-btn {
@@ -221,7 +279,9 @@
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
} }
.read-more-btn:hover { text-decoration: underline; } .read-more-btn:hover {
text-decoration: underline;
}
.episodes-header-row { .episodes-header-row {
display: flex; display: flex;
@@ -261,7 +321,10 @@
} }
.episode-search-input::-webkit-outer-spin-button, .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 { .pagination-controls {
display: flex; display: flex;
@@ -294,4 +357,119 @@
color: #a1a1aa; color: #a1a1aa;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; 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;
}
}

350
docker/views/css/anime/watch.css
View File

@@ -4,7 +4,11 @@
left: 0; left: 0;
right: 0; right: 0;
padding: var(--spacing-lg) var(--spacing-xl); 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; z-index: 1000;
pointer-events: none; pointer-events: none;
} }
@@ -64,7 +68,11 @@
box-shadow: var(--shadow-sm); 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 { .sd-toggle {
display: flex; display: flex;
@@ -87,11 +95,15 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.sd-option.active { color: var(--color-text-primary); } .sd-option.active {
color: var(--color-text-primary);
}
.sd-bg { .sd-bg {
position: absolute; position: absolute;
top: 4px; left: 4px; bottom: 4px; top: 4px;
left: 4px;
bottom: 4px;
width: calc(50% - 4px); width: calc(50% - 4px);
background: var(--color-primary); background: var(--color-primary);
border-radius: var(--radius-full); border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
z-index: 1; 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 { .source-select {
appearance: none; appearance: none;
@@ -119,8 +133,15 @@
transition: all var(--transition-base); transition: all var(--transition-base);
} }
.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); } .source-select:hover {
.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } 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 { .video-container {
aspect-ratio: 16/9; aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
background: var(--color-bg-base); background: var(--color-bg-base);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; 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; position: relative;
transition: box-shadow var(--transition-smooth); 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 { .loading-overlay {
position: absolute; position: absolute;
@@ -150,16 +182,25 @@
} }
.spinner { .spinner {
width: 48px; height: 48px; width: 48px;
border: 3px solid rgba(255,255,255,0.1); height: 48px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--color-primary); border-top-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; 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 { .episode-controls {
display: flex; display: flex;
@@ -174,21 +215,49 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); } .episode-info h1 {
.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } font-size: 1.75rem;
font-weight: 800;
.navigation-buttons { display: flex; gap: var(--spacing-md); } margin: 0 0 var(--spacing-xs);
}
.nav-btn { .episode-info p {
display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-primary);
background: var(--color-bg-elevated); border: var(--border-subtle); font-weight: 600;
color: var(--color-text-primary); padding: 0.75rem 1.5rem; font-size: 1rem;
border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
cursor: pointer; transition: all var(--transition-base); 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); } .navigation-buttons {
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } 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 { .episode-carousel-compact {
width: 100%; width: 100%;
@@ -258,10 +327,18 @@
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scrollbar-width: none; 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 { .carousel-item {
flex: 0 0 200px; flex: 0 0 200px;
@@ -290,12 +367,14 @@
.carousel-item.active-ep-carousel { .carousel-item.active-ep-carousel {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.15); 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); transform: scale(1.02);
} }
.carousel-item.active-ep-carousel::after { .carousel-item.active-ep-carousel::after {
content: 'WATCHING'; content: "WATCHING";
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -391,7 +470,8 @@
color: var(--color-primary); color: var(--color-primary);
} }
.anime-details, .anime-extra-content { .anime-details,
.anime-extra-content {
max-width: 1600px; max-width: 1600px;
margin: var(--spacing-2xl) auto; margin: var(--spacing-2xl) auto;
} }
@@ -425,9 +505,17 @@
text-align: left; 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 { .meta-badge {
background: rgba(139, 92, 246, 0.12); background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
border: 1px solid rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.2);
} }
.meta-badge.meta-score { background: var(--color-primary); color: white; } .meta-badge.meta-score {
.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); } background: var(--color-primary);
color: white;
}
.details-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
.characters-header { .characters-header {
display: flex; display: flex;
@@ -471,9 +566,15 @@
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.expand-btn:hover { background: rgba(139, 92, 246, 0.1); } .expand-btn:hover {
.expand-btn svg { transition: transform var(--transition-smooth); } background: rgba(139, 92, 246, 0.1);
.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); } }
.expand-btn svg {
transition: transform var(--transition-smooth);
}
.expand-btn[data-expanded="true"] svg {
transform: rotate(180deg);
}
.characters-carousel { .characters-carousel {
display: flex; display: flex;
@@ -495,7 +596,6 @@
} }
.characters-carousel.expanded { .characters-carousel.expanded {
height: auto; height: auto;
max-height: 3200px; max-height: 3200px;
overflow-y: auto; overflow-y: auto;
@@ -519,15 +619,38 @@
background: transparent; background: transparent;
} }
.plyr--video { border-radius: var(--radius-xl); } .plyr--video {
.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; } border-radius: var(--radius-xl);
.plyr--full-ui input[type=range] { color: var(--color-primary); } }
.plyr__control:hover { background: rgba(255,255,255,0.12) !important; } .plyr__controls {
.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; } 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) { @media (min-width: 1024px) {
.carousel-nav { display: flex; } .carousel-nav {
.watch-container { padding-top: 5rem; } display: flex;
}
.watch-container {
padding-top: 5rem;
}
.details-cover { .details-cover {
align-items: center; align-items: center;
@@ -540,64 +663,101 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.watch-container { padding: 4.5rem 1rem; } .watch-container {
padding: 5rem 1rem 2rem 1rem;
.episode-carousel-compact-list { margin: 0;
padding: var(--spacing-sm) var(--spacing-md); width: 100%;
} overflow-x: hidden;
.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;
} }
.details-container { flex-direction: column; text-align: center; } .player-toolbar {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.details-cover { .control-group {
align-items: center; justify-content: space-between;
width: 100%; 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); } .source-select {
.navigation-buttons { width: 100%; justify-content: center; } width: 100%;
.nav-btn { flex: 1; justify-content: center; } background-position: right 1.5rem 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;
} }
.details-cover h1 { .episode-controls {
font-size: 1.5rem; 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 { .character-card {
width: calc(50% - 0.75rem);
flex: 1 1 100%; flex: 0 0 calc(50% - 0.75rem);
} }
} }

515
docker/views/css/books/book.css
View File

@@ -1,28 +1,61 @@
.back-btn { .back-btn {
position: fixed; position: fixed;
top: 2rem; left: 2rem; z-index: 100; top: 2rem;
display: flex; align-items: center; gap: 0.5rem; left: 2rem;
z-index: 100;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
background: var(--color-glass-bg); backdrop-filter: blur(12px); background: var(--color-glass-bg);
border: var(--border-subtle); border-radius: var(--radius-full); backdrop-filter: blur(12px);
color: white; text-decoration: none; font-weight: 600; border: var(--border-subtle);
border-radius: var(--radius-full);
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease; 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 { .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 { .hero-overlay {
position: absolute; inset: 0; z-index: 1; position: absolute;
background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); inset: 0;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
var(--color-bg-base) 100%
);
} }
.content-container { .content-container {
position: relative; z-index: 10; position: relative;
max-width: 1600px; margin: -350px auto 0 auto; z-index: 10;
max-width: 1600px;
margin: -350px auto 0 auto;
padding: 0 3rem 4rem 3rem; padding: 0 3rem 4rem 3rem;
display: grid; display: grid;
grid-template-columns: 260px 1fr; grid-template-columns: 260px 1fr;
@@ -31,7 +64,9 @@
animation: slideUp 0.8s ease; animation: slideUp 0.8s ease;
} }
.hero-content { display: none; } .hero-content {
display: none;
}
.sidebar { .sidebar {
display: flex; display: flex;
@@ -44,49 +79,111 @@
} }
.poster-card { .poster-card {
width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg); width: 100%;
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); aspect-ratio: 2/3;
border: 1px solid rgba(255,255,255,0.1); 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; background: #1a1a1a;
} }
.poster-card img { width: 100%; height: 100%; object-fit: cover; } .poster-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-grid { .info-grid {
background: var(--color-bg-elevated); border: var(--border-subtle); background: var(--color-bg-elevated);
border-radius: var(--radius-md); padding: 1.25rem; border: var(--border-subtle);
display: flex; flex-direction: column; gap: 1rem; 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 { .main-content {
display: flex; flex-direction: column; display: flex;
flex-direction: column;
padding-top: 4rem; padding-top: 4rem;
justify-content: flex-start; justify-content: flex-start;
} }
.book-header { margin-bottom: 1.5rem; } .book-header {
.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); } margin-bottom: 1.5rem;
}
.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .book-title {
.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); } font-size: 3.5rem;
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); } font-weight: 900;
line-height: 1.1;
#description { display: none; } margin: 0 0 1rem 0;
#year { display: none; } text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}
.action-row { display: flex; gap: 1rem; }
.btn-primary { .meta-row {
padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px; display: flex;
font-weight: 800; cursor: pointer; transition: transform 0.2s; 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 { .btn-secondary {
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
color: white; color: white;
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 99px; border-radius: 99px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
@@ -94,49 +191,80 @@
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255,255,255,0.2); background: rgba(255, 255, 255, 0.2);
} }
.btn-blur { .btn-blur {
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
color: white; color: white;
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 99px; border-radius: 99px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
backdrop-filter: blur(10px); 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; } .chapters-section {
.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; } margin-top: 1rem;
.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 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 { .chapters-table-wrapper {
background: var(--color-bg-elevated); border-radius: var(--radius-md); background: var(--color-bg-elevated);
border: 1px solid rgba(255,255,255,0.05); overflow: hidden; 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 { .chapters-table th {
padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03); padding: 0.8rem 1.2rem;
color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem; background: rgba(255, 255, 255, 0.03);
text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
} }
.chapters-table td { .chapters-table td {
padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1rem 1.2rem;
color: var(--color-text-primary); font-size: 0.95rem; 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 { .filter-select {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
background-color: var(--color-bg-elevated); background-color: var(--color-bg-elevated);
color: var(--color-text-primary); 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; padding: 0.5rem 2rem 0.5rem 1rem;
border-radius: 99px; border-radius: 99px;
font-size: 0.9rem; font-size: 0.9rem;
@@ -159,36 +287,261 @@
} }
.read-btn-small { .read-btn-small {
background: var(--color-primary); color: white; border: none; background: var(--color-primary);
padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer; color: white;
font-size: 0.8rem; transition: 0.2s; 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 { .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 { .page-btn {
background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1); background: var(--color-bg-elevated);
color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; 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) { @media (max-width: 1024px) {
.hero-wrapper { height: 40vh; } .hero-wrapper {
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; } height: 40vh;
.poster-card { display: none; } }
.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; } .main-content {
.book-title { font-size: 2.2rem; } padding-top: 0;
.meta-row { justify-content: center; } align-items: center;
.action-row { justify-content: center; width: 100%; } text-align: center;
.btn-primary, .btn-blur { flex: 1; justify-content: 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; } .sidebar {
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; } display: none;
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { 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);
}
}

92
docker/views/css/books/reader.css
View File

@@ -4,11 +4,15 @@
--bg-hover: #252530; --bg-hover: #252530;
} }
.hidden { display: none !important; } .hidden {
display: none !important;
}
.top-bar { .top-bar {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; top: 0;
left: 0;
right: 0;
height: 64px; height: 64px;
background: rgba(10, 10, 15, 0.85); background: rgba(10, 10, 15, 0.85);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
@@ -107,7 +111,9 @@
height: auto; height: auto;
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); 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; cursor: pointer;
display: block; display: block;
} }
@@ -160,7 +166,9 @@
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
object-fit: contain; object-fit: contain;
cursor: pointer; 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 { .double-container img:hover {
@@ -174,7 +182,7 @@
padding: 3rem 2.5rem; padding: 3rem 2.5rem;
line-height: var(--ln-line-height, 1.8); line-height: var(--ln-line-height, 1.8);
font-size: var(--ln-font-size, 18px); 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); color: var(--ln-text-color, #e5e7eb);
text-align: var(--ln-text-align, left); text-align: var(--ln-text-align, left);
} }
@@ -183,7 +191,9 @@
margin-bottom: 1.5em; 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-top: 2em;
margin-bottom: 1em; margin-bottom: 1em;
font-weight: 700; font-weight: 700;
@@ -297,7 +307,7 @@
.control label span { .control label span {
color: var(--color-text-primary); color: var(--color-text-primary);
font-weight: 600; font-weight: 600;
font-family: 'JetBrains Mono', monospace; font-family: "JetBrains Mono", monospace;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
transition: all 0.2s; transition: all 0.2s;
} }
select, input[type="color"], input[type="number"] { select,
input[type="color"],
input[type="number"] {
width: 100%; width: 100%;
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
border: 1px solid var(--border-subtle); 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); 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; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-glow); box-shadow: 0 0 0 3px var(--color-primary-glow);
@@ -454,7 +470,9 @@ input[type="color"] {
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
.loading-container { .loading-container {
@@ -544,4 +562,54 @@ input[type="color"] {
max-width: 50%; max-width: 50%;
margin: 0 auto; margin: 0 auto;
display: block; 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;
}
}

123
docker/views/css/components/anilist-modal.css
View File

@@ -1,7 +1,7 @@
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.9); background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
z-index: 2000; z-index: 2000;
display: flex; display: flex;
@@ -12,14 +12,14 @@
.modal-content { .modal-content {
background: var(--color-bg-amoled); 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); border-radius: var(--radius-lg);
max-width: 900px; max-width: 900px;
width: 95%; width: 95%;
padding: 0; padding: 0;
position: relative; position: relative;
animation: modalSlideUp 0.3s ease; 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; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -40,8 +40,8 @@
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255, 255, 255, 0.1);
color: white; color: white;
width: 36px; width: 36px;
height: 36px; height: 36px;
@@ -66,7 +66,7 @@
padding: 1.5rem 2rem 0.5rem; padding: 1.5rem 2rem 0.5rem;
margin-bottom: 0; margin-bottom: 0;
color: var(--color-text-primary); 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 { .modal-body {
@@ -112,7 +112,7 @@
.form-input { .form-input {
background: var(--color-bg-field); 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); color: var(--color-text-primary);
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
border-radius: 8px; border-radius: 8px;
@@ -154,7 +154,7 @@
.form-checkbox { .form-checkbox {
width: 18px; width: 18px;
height: 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); background: var(--color-bg-base);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@@ -171,7 +171,7 @@
} }
.form-checkbox:checked::after { .form-checkbox:checked::after {
content: '✓'; content: "✓";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -187,21 +187,25 @@
justify-content: flex-end; justify-content: flex-end;
flex-shrink: 0; flex-shrink: 0;
padding: 1rem 2rem; 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); background: var(--color-bg-amoled);
position: sticky; position: sticky;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
} }
.btn-primary, .btn-secondary, .btn-danger { .btn-primary,
.btn-secondary,
.btn-danger {
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.95rem;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background 0.2s; transition:
transform 0.2s,
background 0.2s;
flex: none; flex: none;
} }
@@ -215,13 +219,13 @@
} }
.btn-secondary { .btn-secondary {
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
color: white; color: white;
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255,255,255,0.15); background: rgba(255, 255, 255, 0.15);
} }
.btn-danger { .btn-danger {
@@ -243,26 +247,89 @@
opacity: 1; opacity: 1;
} }
@media (max-width: 900px) { @media (max-width: 600px) {
.modal-content { .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 { .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; .date-group {
align-self: auto; flex-direction: column;
gap: 1rem;
} }
.notes-textarea {
min-height: 120px;
}
.modal-actions { .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; .btn-primary,
padding-right: 1.5rem; .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);
} }
} }

108
docker/views/css/components/hero.css
View File

@@ -23,8 +23,13 @@
.hero-vignette { .hero-vignette {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%), background:
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%); 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; z-index: 1;
} }
@@ -106,8 +111,18 @@
.hero-overlay { .hero-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%), background:
linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%); 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; z-index: 1;
} }
@@ -117,4 +132,87 @@
padding: 0.2rem 0.8rem; padding: 0.2rem 0.8rem;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(34, 197, 94, 0.2); 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%
);
}
}

114
docker/views/css/components/navbar.css
View File

@@ -8,7 +8,11 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 3rem; 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; transition: background 0.3s;
} }
@@ -211,7 +215,9 @@
min-width: 260px; min-width: 260px;
display: none; display: none;
flex-direction: column; 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; z-index: 9999;
overflow: hidden; overflow: hidden;
animation: dropdownSlide 0.2s ease-out; animation: dropdownSlide 0.2s ease-out;
@@ -415,4 +421,106 @@
.search-results::-webkit-scrollbar-thumb { .search-results::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border-radius: 3px; 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;
}
}

98
docker/views/css/globals.css
View File

@@ -57,7 +57,7 @@ body {
padding: 0; padding: 0;
background-color: var(--color-bg-base); background-color: var(--color-bg-base);
color: var(--color-text-primary); color: var(--color-text-primary);
font-family: 'Inter', system-ui, sans-serif; font-family: "Inter", system-ui, sans-serif;
overflow-x: hidden; overflow-x: hidden;
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -288,7 +288,7 @@ body {
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
@@ -298,4 +298,96 @@ body {
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
transform: scale(1.05); 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;
}
}

186
docker/views/css/list.css
View File

@@ -27,14 +27,16 @@
.stat-card { .stat-card {
background: var(--color-bg-elevated); 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); border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
transition: transform 0.3s, box-shadow 0.3s; transition:
box-shadow: 0 5px 20px rgba(0,0,0,0.2); transform 0.3s,
box-shadow 0.3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
} }
.stat-card:hover { .stat-card:hover {
@@ -54,7 +56,6 @@
font-weight: 600; font-weight: 600;
} }
/* --- Filtros mejorados --- */
.filters-section { .filters-section {
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
@@ -62,9 +63,9 @@
padding: 1.5rem; padding: 1.5rem;
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
border-radius: var(--radius-md); 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; 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 { .filter-group {
@@ -85,7 +86,7 @@
.filter-select { .filter-select {
background: var(--color-bg-base); 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); color: var(--color-text-primary);
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-radius: 8px; border-radius: 8px;
@@ -118,7 +119,7 @@
.view-btn { .view-btn {
background: var(--color-bg-base); 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); color: var(--color-text-secondary);
padding: 0.7rem; padding: 0.7rem;
border-radius: 8px; border-radius: 8px;
@@ -159,7 +160,9 @@
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
.empty-state { .empty-state {
@@ -194,14 +197,14 @@
.list-item { .list-item {
background: var(--color-bg-elevated-hover); 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); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; 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 { .list-item:hover {
@@ -236,16 +239,15 @@
} }
.list-grid.list-view .item-poster { .list-grid.list-view .item-poster {
/* Cambiar el ancho y alto */ width: 120px;
width: 120px; /* Antes: 100px */ height: 180px;
height: 180px; /* Antes: 150px */
aspect-ratio: auto; aspect-ratio: auto;
border-radius: 8px; border-radius: 8px;
margin: 1rem; margin: 1rem;
} }
.item-content { .item-content {
padding: 1rem; /* Antes: 1.2rem */ padding: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@@ -262,7 +264,7 @@
} }
.item-title { .item-title {
font-size: 1rem; /* Antes: 1.1rem */ font-size: 1rem;
font-weight: 800; font-weight: 800;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
white-space: nowrap; white-space: nowrap;
@@ -281,16 +283,16 @@
.item-meta { .item-meta {
display: flex; display: flex;
gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */ gap: 0.3rem;
margin-bottom: 0.5rem; /* Antes: 0.8rem */ margin-bottom: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
/* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
line-height: 1.4; line-height: 1.4;
} }
.meta-pill { .meta-pill {
font-size: 0.65rem; /* Antes: 0.7rem */ font-size: 0.65rem;
padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */ padding: 0.15rem 0.4rem;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
@@ -329,12 +331,12 @@
} }
.progress-bar-container { .progress-bar-container {
background: rgba(255,255,255,0.08); background: rgba(255, 255, 255, 0.08);
border-radius: 999px; border-radius: 999px;
height: 10px; height: 10px;
overflow: hidden; overflow: hidden;
margin-bottom: 0.5rem; 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 { .progress-bar {
@@ -364,7 +366,6 @@
border-radius: 4px; border-radius: 4px;
} }
/* --- Botón de edición flotante --- */
.edit-icon-btn { .edit-icon-btn {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
@@ -382,7 +383,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; 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 { .list-item:hover .edit-icon-btn {
@@ -412,74 +416,92 @@
transform: none; transform: none;
} }
/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */ @media (max-width: 768px) {
.container {
@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;
padding: 1rem; padding: 1rem;
} width: 100%;
.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);
} }
/* Modal en móvil */ .header-section {
.modal-content { margin-top: 1rem;
margin: 0.5rem; margin-bottom: 1.5rem;
width: auto;
} }
.modal-fields-grid {
.page-title {
font-size: 2rem;
text-align: center;
margin-bottom: 1.5rem;
}
.stats-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
padding-bottom: 0;
} }
.form-group.notes-group,
.form-group.checkbox-group { .stat-card {
grid-column: auto; padding: 1rem;
flex-direction: row;
align-items: center;
justify-content: space-between;
} }
.modal-actions {
flex-direction: column; .stat-value {
align-items: stretch; font-size: 1.8rem;
}
.btn-danger {
margin-right: 0;
order: 3;
}
.btn-secondary {
order: 2; order: 2;
} }
.btn-primary {
.stat-label {
font-size: 1rem;
order: 1; order: 1;
} }
}
.edit-btn-card { .filters-section {
display: none; flex-direction: column;
} padding: 1rem;
gap: 1rem;
}
.item-poster-link { .filter-group {
z-index: 1; 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;
}
}

134
docker/views/css/marketplace.css
View File

@@ -25,7 +25,7 @@
border-radius: 999px; border-radius: 999px;
background: var(--color-bg-elevated-hover); background: var(--color-bg-elevated-hover);
color: var(--color-text-primary); 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; appearance: none;
font-weight: 600; font-weight: 600;
@@ -51,14 +51,14 @@
.extension-card { .extension-card {
background: var(--bg-surface); 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); border-radius: var(--radius-md);
padding: 1rem; padding: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
transition: all 0.2s; 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; min-height: 140px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -67,7 +67,7 @@
.extension-card:hover { .extension-card:hover {
background: var(--color-bg-elevated-hover); background: var(--color-bg-elevated-hover);
transform: translateY(-4px); 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 { .card-content-wrapper {
@@ -128,7 +128,10 @@
font-size: 0.9rem; font-size: 0.9rem;
border: none; border: none;
cursor: pointer; 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; margin-top: auto;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@@ -176,7 +179,7 @@
border-radius: 8px; border-radius: 8px;
margin-bottom: 0.75rem; 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 { .skeleton-text.title-skeleton {
height: 1.1em; height: 1.1em;
@@ -228,10 +231,14 @@
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
width: 90%; width: 90%;
max-width: 450px; max-width: 450px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow); box-shadow:
border: 1px solid rgba(255,255,255,0.1); 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); 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; opacity: 0;
} }
@@ -245,7 +252,7 @@
font-weight: 800; font-weight: 800;
margin-top: 0; margin-top: 0;
color: var(--color-primary); 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; padding-bottom: 0.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -264,14 +271,15 @@
} }
.modal-button { .modal-button {
padding: 0.6rem 1.5rem; padding: 0.6rem 1.5rem;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 700;
font-size: 0.9rem; font-size: 0.9rem;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: background 0.2s, transform 0.2s; transition:
background 0.2s,
transform 0.2s;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@@ -292,4 +300,104 @@
.modal-button.btn-uninstall:hover { .modal-button.btn-uninstall:hover {
background: #ef4444; background: #ef4444;
transform: scale(1.02); 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;
}
}

94
docker/views/css/schedule/schedule.css
View File

@@ -361,3 +361,97 @@ html.electron body {
transform: rotate(360deg); 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;
}
}

167
docker/views/css/users.css
View File

@@ -10,15 +10,29 @@
.background-gradient { .background-gradient {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%), background:
radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%); 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; z-index: 0;
animation: gradientShift 10s ease infinite; animation: gradientShift 10s ease infinite;
} }
@keyframes gradientShift { @keyframes gradientShift {
0%, 100% { opacity: 1; } 0%,
50% { opacity: 0.7; } 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
} }
.content-container { .content-container {
@@ -80,9 +94,8 @@
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
} }
/* Badge de contraseña protegida */
.user-card.has-password::after { .user-card.has-password::after {
content: '🔒'; content: "🔒";
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
@@ -116,7 +129,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .user-avatar-placeholder svg {
@@ -131,7 +148,12 @@
left: 0; left: 0;
right: 0; right: 0;
padding: 1rem 1.5rem; 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%); transform: translateY(100%);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@@ -168,7 +190,9 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transition: opacity 0.3s, background 0.2s; transition:
opacity 0.3s,
background 0.2s;
z-index: 20; z-index: 20;
} }
@@ -205,7 +229,6 @@
box-shadow: 0 10px 30px var(--color-primary-glow); box-shadow: 0 10px 30px var(--color-primary-glow);
} }
/* Modal Styles */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@@ -438,7 +461,6 @@ input[type="file"] {
color: white; color: white;
} }
/* Estilos para modal de password */
.password-modal-content { .password-modal-content {
padding: 1.5rem; padding: 1.5rem;
} }
@@ -461,7 +483,6 @@ input[type="file"] {
margin-top: 0.1rem; margin-top: 0.1rem;
} }
/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
.manage-actions-modal { .manage-actions-modal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -673,10 +694,13 @@ input[type="file"] {
border: 1px solid rgba(59, 130, 246, 0.4); border: 1px solid rgba(59, 130, 246, 0.4);
} }
/* Animations */
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes fadeInDown { @keyframes fadeInDown {
@@ -720,22 +744,121 @@ input[type="file"] {
} }
@keyframes shimmer { @keyframes shimmer {
0% { background-position: 200% 0; } 0% {
100% { background-position: -200% 0; } background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
} }
/* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.page-wrapper {
padding: 1rem;
align-items: flex-start;
padding-top: 2rem;
}
.header-section {
margin-bottom: 2rem;
}
.page-title { .page-title {
font-size: 2.5rem; font-size: 2.2rem;
line-height: 1.1;
} }
.users-grid { .users-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: 1.5rem; 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 { .modal-content {
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
max-height: 85vh;
padding: 1.5rem; 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;
}
}

440
docker/views/users.html
View File

@@ -1,174 +1,280 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>WaifuBoard - Users</title> <title>WaifuBoard - Users</title>
<link rel="stylesheet" href="/views/css/globals.css"> <link rel="stylesheet" href="/views/css/globals.css" />
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link
<link rel="stylesheet" href="/views/css/components/titlebar.css"> rel="stylesheet"
<link rel="stylesheet" href="/views/css/users.css"> href="/views/css/components/updateNotifier.css"
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> />
<script src="/src/scripts/titlebar.js"></script> <link rel="stylesheet" href="/views/css/components/titlebar.css" />
</head> <link rel="stylesheet" href="/views/css/users.css" />
<body> <link
<div id="titlebar"> <div class="title-left"> rel="icon"
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/> href="/public/assets/waifuboards.ico"
<span class="app-title">WaifuBoard</span> type="image/x-icon"
</div> />
<div class="title-right"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<button class="min">—</button> <script src="/src/scripts/titlebar.js"></script>
<button class="max">🗖</button> </head>
<button class="close">✕</button> <body>
</div> <div id="titlebar">
</div> <div class="title-left">
<img
<div class="page-wrapper"> class="app-icon"
<div class="background-gradient"></div> src="/public/assets/waifuboards.ico"
alt=""
<div class="content-container"> />
<div class="header-section"> <span class="app-title">WaifuBoard</span>
<h1 class="page-title">Who's exploring?</h1> </div>
<p class="page-subtitle">Select your profile to continue</p> <div class="title-right">
</div> <button class="min">—</button>
<button class="max">🗖</button>
<div class="users-grid" id="usersGrid"> <button class="close">✕</button>
</div> </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>
</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="page-wrapper">
<div class="modal-overlay"></div> <div class="background-gradient"></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="content-container">
<div class="modal-overlay"></div> <div class="header-section">
<div class="modal-content"> <h1 class="page-title">Who's exploring?</h1>
<div class="modal-header"> <p class="page-subtitle">Select your profile to continue</p>
<h2>Edit Profile</h2> </div>
<button class="modal-close" id="closeEditModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <div class="users-grid" id="usersGrid"></div>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <button class="btn-add-user" id="btnAddUser">
</svg> <svg
</button> width="24"
</div> height="24"
<form id="editUserForm"> viewBox="0 0 24 24"
<div class="form-group"> fill="none"
<label for="editUsername">Username</label> stroke="currentColor"
<input type="text" id="editUsername" name="username" required maxlength="20" placeholder="Enter your new name"> stroke-width="2"
</div> >
<div class="form-group"> <line x1="12" y1="5" x2="12" y2="19"></line>
<label>Profile Picture</label> <line x1="5" y1="12" x2="19" y2="12"></line>
<div class="avatar-upload-area" id="editAvatarUploadArea"> </svg>
<div class="avatar-preview" id="editAvatarPreview"> Add User
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> </button>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> </div>
<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> </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" id="modalCreateUser">
<div class="modal-overlay"></div> <div class="modal-overlay"></div>
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>AniList Integration</h2> <h2>Create New User</h2>
<button class="modal-close" id="closeAniListModal"> <button class="modal-close" id="closeCreateModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg
<line x1="18" y1="6" x2="6" y2="18"></line> width="24"
<line x1="6" y1="6" x2="18" y2="18"></line> height="24"
</svg> viewBox="0 0 24 24"
</button> fill="none"
</div> stroke="currentColor"
<div id="aniListContent"> stroke-width="2"
</div> >
</div> <line x1="18" y1="6" x2="6" y2="18"></line>
</div> <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 class="modal" id="modalUserActions">
<div id="updateToast" class="hidden"> <div class="modal-overlay"></div>
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p> <div class="modal-content" style="max-width: 400px">
<a <div class="modal-header">
id="downloadButton" <h2 id="actionsModalTitle">Manage Profile</h2>
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" <button class="modal-close" id="closeActionsModal">
target="_blank" <svg
> width="24"
Click To Download height="24"
</a> viewBox="0 0 24 24"
</div> fill="none"
<script>localStorage.removeItem("token")</script> stroke="currentColor"
<script src="/src/scripts/updateNotifier.js"></script> stroke-width="2"
<script src="/src/scripts/users.js"></script> >
</body> <line x1="18" y1="6" x2="6" y2="18"></line>
</html> <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>