init
This commit is contained in:
BIN
animex/Resources/.DS_Store
vendored
Normal file
BIN
animex/Resources/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
animex/Resources/Images/Launch.png
Normal file
BIN
animex/Resources/Images/Launch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
BIN
animex/Resources/Images/Launch_screen.png
Normal file
BIN
animex/Resources/Images/Launch_screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 569 KiB |
BIN
animex/Resources/Images/aesthetic.jpg
Normal file
BIN
animex/Resources/Images/aesthetic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
BIN
animex/Resources/Images/logo-196.png
Normal file
BIN
animex/Resources/Images/logo-196.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
animex/Resources/Images/logo-256.png
Normal file
BIN
animex/Resources/Images/logo-256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
animex/Resources/Images/logo-512.png
Normal file
BIN
animex/Resources/Images/logo-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
3
animex/Resources/Svgs/Tabbar/Anime.svg
Normal file
3
animex/Resources/Svgs/Tabbar/Anime.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="33" height="29" viewBox="0 0 33 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.1507 24.6181C13.4752 24.6181 15.737 26.2917 16.0776 27.0829C16.0912 27.1286 16.1185 27.159 16.1594 27.1894V3.74294C15.3146 2.93654 12.9983 1.73455 10.1643 1.73455C6.68992 1.73455 3.46078 3.71251 3.4744 4.79279V26.8547C3.4744 27.0981 3.62428 27.2655 3.84228 27.2655C4.04665 27.2655 4.19653 27.1894 4.25103 27.0829C4.59166 26.307 6.8398 24.6181 10.1507 24.6181ZM22.8493 24.6181C26.1738 24.6181 28.422 26.307 28.7626 27.0829C28.8035 27.1894 28.9533 27.2655 29.1577 27.2655C29.3757 27.2655 29.5256 27.0981 29.5256 26.8547V4.79279C29.5392 3.71251 26.3237 1.73455 22.8357 1.73455C20.0017 1.73455 17.699 2.93654 16.8406 3.74294V27.1894C16.8951 27.159 16.9088 27.1286 16.9224 27.0829C17.263 26.2917 19.5248 24.6181 22.8493 24.6181Z" fill="#5B574C" stroke="#B6521B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 874 B |
3
animex/Resources/Svgs/item-list-1.svg
Normal file
3
animex/Resources/Svgs/item-list-1.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="58" height="64" viewBox="0 0 58 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="58" height="64" rx="9" fill="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 203 B |
3
animex/Resources/Svgs/item-list-2.svg
Normal file
3
animex/Resources/Svgs/item-list-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="58" height="24" viewBox="0 0 58 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="58" height="24" rx="12" fill="#22221C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 204 B |
4
animex/Resources/Svgs/item-list-arrow.svg
Normal file
4
animex/Resources/Svgs/item-list-arrow.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="23" height="32" viewBox="0 0 23 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_12_142_item1)"><path d="M4.43147 31.0806C4.56956 31.0806 4.62135 31.0016 4.72491 30.9029L18.7066 16.5629C18.862 16.3852 18.9828 16.2074 18.9828 15.9901C18.9828 15.7728 18.8792 15.6148 18.7239 15.4568L4.75944 1.11687C4.63861 1.01811 4.56956 0.919348 4.43147 0.919348C4.20707 0.919348 4.0172 1.13662 4.0172 1.41315C4.0172 1.53166 4.03446 1.66992 4.12076 1.74893L17.9471 16.0099L4.12076 30.2313C4.03446 30.3301 4.0172 30.4683 4.0172 30.5868C4.0172 30.8634 4.20707 31.0806 4.43147 31.0806Z" fill="#878472" stroke="#878472" stroke-width="3"/></g>
|
||||
<defs><clipPath id="clip0_12_142_item1"><rect width="23" height="32" fill="white"/></clipPath></defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 843 B |
BIN
animex/Resources/favicon.png
Normal file
BIN
animex/Resources/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
885
animex/Resources/manga.css
Normal file
885
animex/Resources/manga.css
Normal file
@@ -0,0 +1,885 @@
|
||||
:root {
|
||||
/* Accent and Palette */
|
||||
--brand-accent: #ff9500;
|
||||
--background-primary: #0a0a0a;
|
||||
--background-secondary: #161616;
|
||||
--background-tertiary: #202020; /* Added for consistency in related cards */
|
||||
--text-primary: #eaeaea;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666; /* Added for info messages */
|
||||
--border-color: #2a2a2a;
|
||||
|
||||
/* Effects */
|
||||
--brand-glow: rgba(255, 149, 0, 0.5);
|
||||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Animation and Sizing */
|
||||
--transition-duration: 0.3s;
|
||||
--border-radius: 8px;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#manga-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- HERO SECTION --- */
|
||||
#hero-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60vh;
|
||||
min-height: 450px;
|
||||
padding: 0 5%;
|
||||
background-color: var(--background-tertiary);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: background-image var(--transition-duration) ease-in-out;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--background-primary) 20%,
|
||||
rgba(10, 10, 10, 0.7) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(30, 30, 30, 0.7);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-duration) ease,
|
||||
transform var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: var(--background-secondary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.vertical-title-jp {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 30px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
writing-mode: vertical-rl;
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
letter-spacing: 6px;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease 0.2s;
|
||||
}
|
||||
|
||||
.vertical-title-jp.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cover-art-container {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
height: 65%;
|
||||
max-height: 420px;
|
||||
aspect-ratio: 2 / 3;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.cover-art-container.loaded {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
#manga-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 20px 40px -10px var(--shadow-color);
|
||||
}
|
||||
|
||||
/* --- CONTENT SHEET --- */
|
||||
#content-sheet {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
max-width: 1200px;
|
||||
min-height: 50vh;
|
||||
margin: -50px auto 0;
|
||||
padding: 2rem 5%;
|
||||
background: transparent;
|
||||
border-radius: 24px 24px 0 0;
|
||||
}
|
||||
|
||||
.manga-title-en {
|
||||
font-size: clamp(2.2rem, 6vw, 3rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.manga-title-jp {
|
||||
margin-bottom: 2rem;
|
||||
font-size: clamp(1.1rem, 3vw, 1.3rem);
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.genres-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.genre-tag {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: color var(--transition-duration) ease,
|
||||
border-color var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.genre-tag:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--brand-accent);
|
||||
}
|
||||
|
||||
.synopsis-container {
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
|
||||
.synopsis-container h3 {
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#manga-synopsis {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* --- TABS SYSTEM --- */
|
||||
.tabs-section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
position: relative;
|
||||
padding: 1rem 0.25rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.tab-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: var(--brand-accent);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-duration)
|
||||
cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-btn.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
animation: fadeIn 0.4s ease;
|
||||
}
|
||||
|
||||
.tab-panel.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- CHAPTER LIST --- */
|
||||
#chapter-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.chapter-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-secondary);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out,
|
||||
box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.chapter-item:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
border-color: var(--brand-accent);
|
||||
box-shadow: 0 8px 25px -5px var(--shadow-color);
|
||||
}
|
||||
|
||||
.chapter-item.is-read .chapter-details .chapter-title {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chapter-item.is-read:hover .chapter-details .chapter-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chapter-thumbnail {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 180px;
|
||||
background-color: #333;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.chapter-thumbnail .chapter-number-display {
|
||||
z-index: 2;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chapter-thumbnail::after {
|
||||
content: "\f04b";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
z-index: 3;
|
||||
font-size: 32px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.chapter-item:hover .chapter-thumbnail::after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.chapter-item .chapter-thumbnail::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
rgba(0, 0, 0, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0.7) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
.chapter-item:hover .chapter-thumbnail::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.read-progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 0;
|
||||
height: 5px;
|
||||
background-color: var(--brand-accent);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.chapter-item.is-read .read-progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chapter-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
gap: 6px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.chapter-meta {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.chapter-item:hover .action-btn {
|
||||
opacity: 1;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--brand-accent);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
.add-to-list-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* --- READER MODAL --- */
|
||||
#reader-modal-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background-color: #121212;
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
|
||||
}
|
||||
|
||||
#reader-modal-container.visible {
|
||||
display: block;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#reader-modal-container iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* --- UTILITIES & PLACEHOLDERS --- */
|
||||
.loader {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 2rem auto;
|
||||
border: 4px solid var(--border-color);
|
||||
border-top-color: var(--brand-accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clear-cache-btn {
|
||||
float: right;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
border: 4px solid var(--brand-accent);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 0 15px rgba(135, 135, 135, 0.1),
|
||||
0 0 18px 3px rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jump-read-btn {
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
border: 4px solid var(--brand-accent);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 0 15px rgba(135, 135, 135, 0.1),
|
||||
0 0 18px 3px rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- RELATED & RECOMMENDATIONS --- */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.recommendation-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-secondary);
|
||||
box-shadow: 0 2px 8px var(--shadow-color);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition-duration) ease,
|
||||
box-shadow var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.recommendation-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px var(--shadow-color);
|
||||
}
|
||||
|
||||
.recommendation-card-img-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
background-color: var(--background-tertiary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recommendation-card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.recommendation-card:hover .recommendation-card-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.recommendation-card-title {
|
||||
flex-grow: 1;
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.related-content-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.related-card {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-secondary);
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transition: background-color var(--transition-duration) ease,
|
||||
transform var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.related-card:hover {
|
||||
background-color: var(--background-tertiary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.related-card-img-container {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
aspect-ratio: 2 / 3;
|
||||
background-color: var(--background-tertiary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.related-card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.related-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
min-width: 0; /* Prevents flexbox overflow */
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.related-card-title {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.related-card-tag {
|
||||
align-self: flex-start;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--brand-accent);
|
||||
color: var(--background-primary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- MANGADEX & META STYLES --- */
|
||||
.mangadex-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #333;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.mangadex-button:hover {
|
||||
background-color: #444;
|
||||
border-color: var(--brand-accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.mangadex-button img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.chapter-meta-mangadex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: background-color var(--transition-duration) ease,
|
||||
border-color var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.meta-tag .fas {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.chapter-item:hover .meta-tag {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--brand-glow);
|
||||
}
|
||||
|
||||
/* --- PAGINATION --- */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.pagination-container button {
|
||||
padding: 10px 18px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-duration) ease,
|
||||
border-color var(--transition-duration) ease,
|
||||
color var(--transition-duration) ease,
|
||||
transform var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.pagination-container button:hover:not(:disabled) {
|
||||
background-color: var(--brand-accent);
|
||||
border-color: var(--brand-accent);
|
||||
color: var(--background-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pagination-container button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-container span {
|
||||
padding: 0 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- RESPONSIVE ADJUSTMENTS --- */
|
||||
@media (max-width: 768px) {
|
||||
#hero-section {
|
||||
height: 50vh;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.vertical-title-jp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cover-art-container {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
#content-sheet {
|
||||
margin-top: -60px;
|
||||
padding: 3rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.manga-title-en,
|
||||
.manga-title-jp {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.genres-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chapter-item:hover {
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
}
|
||||
|
||||
.chapter-thumbnail {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.chapter-details {
|
||||
gap: 2px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chapter-meta {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.action-btn.download-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.1rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
opacity: 1; /* Always visible on touch devices */
|
||||
}
|
||||
.action-btn.add-to-list-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.1rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
opacity: 1; /* Always visible on touch devices */
|
||||
}
|
||||
|
||||
.related-content-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chapter-meta-mangadex {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chapter-item .chapter-details {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
.add-list-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-action-btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: color var(--transition-duration) ease
|
||||
}
|
||||
|
||||
.hero-action-btn:hover {
|
||||
color: var(--brand-accent);
|
||||
border-color: var(--brand-accent);
|
||||
user-select: none;
|
||||
}
|
||||
27
animex/Resources/manifest.json
Normal file
27
animex/Resources/manifest.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "Animex",
|
||||
"short_name": "Animex",
|
||||
"description": "Animex - Anime and Manga Search and Player",
|
||||
"start_url": "/?source=pwa",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0b0b0b",
|
||||
"theme_color": "#FF9500",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/Resources/Images/logo-256.png",
|
||||
"sizes": "400x400",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/Resources/Images/logo-196.png",
|
||||
"sizes": "196x196",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/Resources/Images/logo-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
186
animex/Resources/old/Manga.html
Normal file
186
animex/Resources/old/Manga.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Animex</title>
|
||||
<link rel="icon" href="Resources/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="Resources/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app-wrapper">
|
||||
<!-- Header Image -->
|
||||
<img class="app-absolute header-main-image" style="left: -44px; top: -26px;" src="https://images.unsplash.com/photo-1579803815617-16568f90450e?q=80&w=1933&auto=format&fit=crop" alt="Header Background"/>
|
||||
|
||||
<!-- Featured Content -->
|
||||
<img id="featured-poster" class="app-absolute featured-poster-img" style="left: 36px; top: 59px;" src="https://placehold.co/126x193/99AAB5/FFFFFF?text=Featured&font=montserrat" alt="Featured Poster"/>
|
||||
<div id="featured-info" class="app-absolute flex-center-col featured-small-text" style="left: 176px; top: 82px;">TYPE | YEAR</div>
|
||||
<div id="featured-title" class="app-absolute featured-title-text" style="left: 176px; top: 105px; width: 184px; height: auto; max-height: 80px;">Featured Manga Title</div>
|
||||
<div class="app-absolute featured-button-background" style="left: 176px; top: 203px;"></div>
|
||||
<div class="app-absolute flex-center-col featured-small-text" style="left: 205px; top: 207px;">READ MORE</div>
|
||||
<div class="app-absolute featured-button-icon-svg-wrapper" style="left: 185px; top: 207px;">
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.15329 12.2561C2.28704 12.2561 2.38735 12.2214 2.55453 12.1171L10.9203 6.98663C11.1543 6.85455 11.2948 6.72246 11.2948 6.5C11.2948 6.28449 11.1543 6.15241 10.9203 6.01337L2.55453 0.882887C2.38735 0.778609 2.28704 0.74385 2.15329 0.74385C1.8858 0.74385 1.70525 0.945454 1.70525 1.29305V11.707C1.70525 12.0545 1.8858 12.2561 2.15329 12.2561Z" fill="white" stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Explore Tab Backing & Content -->
|
||||
<div class="explore-backing">
|
||||
<div class="explore-title">
|
||||
Explore Manga
|
||||
</div>
|
||||
<div id="scrollable-list-content">
|
||||
<!-- Manga items will be injected here by JavaScript -->
|
||||
<div class="loading-message">Loading manga...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<div class="bottom-tabbar">
|
||||
<!-- MANGA Tab (Active) -->
|
||||
<div class="tab-item">
|
||||
<div class="app-absolute tab-icon-svg-wrapper" style="left: 24px; top: 12px;">
|
||||
<svg width="33" height="29" viewBox="0 0 33 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.1507 24.6181C13.4752 24.6181 15.737 26.2917 16.0776 27.0829C16.0912 27.1286 16.1185 27.159 16.1594 27.1894V3.74294C15.3146 2.93654 12.9983 1.73455 10.1643 1.73455C6.68992 1.73455 3.46078 3.71251 3.4744 4.79279V26.8547C3.4744 27.0981 3.62428 27.2655 3.84228 27.2655C4.04665 27.2655 4.19653 27.1894 4.25103 27.0829C4.59166 26.307 6.8398 24.6181 10.1507 24.6181ZM22.8493 24.6181C26.1738 24.6181 28.422 26.307 28.7626 27.0829C28.8035 27.1894 28.9533 27.2655 29.1577 27.2655C29.3757 27.2655 29.5256 27.0981 29.5256 26.8547V4.79279C29.5392 3.71251 26.3237 1.73455 22.8357 1.73455C20.0017 1.73455 17.699 2.93654 16.8406 3.74294V27.1894C16.8951 27.159 16.9088 27.1286 16.9224 27.0829C17.263 26.2917 19.5248 24.6181 22.8493 24.6181Z" fill="#B6521B" stroke="#B6521B"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-absolute tab-label-text" style="left: 17px; color: #B6521B;">MANGA</div>
|
||||
</div>
|
||||
|
||||
<!-- ANIME Tab -->
|
||||
<div class="tab-item">
|
||||
<div class="app-absolute tab-icon-svg-wrapper" style="left: 104px; top: 12px;">
|
||||
<svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.73459 26.8169H30.2654C31.3442 26.8169 31.9435 26.1127 31.9435 24.8451V4.15492C31.9435 2.9014 31.3322 2.18309 30.2654 2.18309H4.73459C3.66781 2.18309 3.05651 2.9014 3.05651 4.15492V24.8451C3.05651 26.1127 3.65582 26.8169 4.73459 26.8169ZM4.73459 26.1268C3.97945 26.1268 3.64384 25.7324 3.64384 24.8451V4.15492C3.64384 3.28168 3.99144 2.87323 4.73459 2.87323H30.2654C31.0086 2.87323 31.3562 3.28168 31.3562 4.15492V24.8451C31.3562 25.7324 31.0325 26.1268 30.2654 26.1268H4.73459ZM4.95034 6.25351C4.95034 6.59154 5.19007 6.88732 5.53767 6.88732H6.77226C7.11986 6.88732 7.33562 6.59154 7.33562 6.25351V4.92957C7.33562 4.52112 7.11986 4.25351 6.77226 4.25351H5.53767C5.1661 4.25351 4.95034 4.52112 4.95034 4.92957V6.25351ZM27.6764 6.25351C27.6764 6.59154 27.8921 6.88732 28.2397 6.88732H29.4863C29.8219 6.88732 30.0497 6.59154 30.0497 6.25351V4.92957C30.0497 4.52112 29.8219 4.25351 29.4863 4.25351H28.2397C27.8681 4.25351 27.6764 4.52112 27.6764 4.92957V6.25351ZM8.72603 12.5352C8.72603 13 8.97774 13.2676 9.37329 13.2676H25.6267C26.0342 13.2676 26.274 13 26.274 12.5352V5.0845C26.274 4.60563 26.0342 4.33802 25.6267 4.33802H9.37329C8.97774 4.33802 8.72603 4.60563 8.72603 5.0845V12.5352ZM4.95034 10.7042C4.95034 11.0563 5.19007 11.3521 5.53767 11.3521H6.77226C7.11986 11.3521 7.33562 11.0563 7.33562 10.7042V9.38027C7.33562 8.97182 7.11986 8.7183 6.77226 8.7183H5.53767C5.1661 8.7183 4.95034 8.97182 4.95034 9.38027V10.7042ZM27.6764 10.7042C27.6764 11.0563 27.8921 11.3521 28.2397 11.3521H29.4863C29.8219 11.3521 30.0497 11.0563 30.0497 10.7042V9.38027C30.0497 8.97182 29.8219 8.7183 29.4863 8.7183H28.2397C27.8681 8.7183 27.6764 8.97182 27.6764 9.38027V10.7042ZM4.95034 15.169C4.95034 15.507 5.19007 15.7887 5.53767 15.7887H6.77226C7.11986 15.7887 7.33562 15.507 7.33562 15.169V13.8451C7.33562 13.4366 7.11986 13.169 6.77226 13.169H5.53767C5.1661 13.169 4.95034 13.4366 4.95034 13.8451V15.169ZM27.6764 15.169C27.6764 15.507 27.8921 15.7887 28.2397 15.7887H29.4863C29.8219 15.7887 30.0497 15.507 30.0497 15.169V13.8451C30.0497 13.4366 29.8219 13.169 29.4863 13.169H28.2397C27.8681 13.169 27.6764 13.4366 27.6764 13.8451V15.169ZM8.72603 23.8873C8.72603 24.3521 8.97774 24.6197 9.37329 24.6197H25.6267C26.0342 24.6197 26.274 24.3521 26.274 23.8873V16.4225C26.274 15.9577 26.0342 15.6901 25.6267 15.6901H9.37329C8.97774 15.6901 8.72603 15.9577 8.72603 16.4225V23.8873ZM4.95034 19.6197C4.95034 19.9577 5.19007 20.2394 5.53767 20.2394H6.77226C7.11986 20.2394 7.33562 19.9577 7.33562 19.6197V18.2958C7.33562 17.8873 7.11986 17.6197 6.77226 17.6197H5.53767C5.1661 17.6197 4.95034 17.8873 4.95034 18.2958V19.6197ZM27.6764 19.6197C27.6764 19.9577 27.8921 20.2394 28.2397 20.2394H29.4863C29.8219 20.2394 30.0497 19.9577 30.0497 19.6197V18.2958C30.0497 17.8873 29.8219 17.6197 29.4863 17.6197H28.2397C27.8681 17.6197 27.6764 17.8873 27.6764 18.2958V19.6197ZM4.95034 24.0563C4.95034 24.4225 5.19007 24.7042 5.53767 24.7042H6.77226C7.11986 24.7042 7.33562 24.4225 7.33562 24.0563V22.7324C7.33562 22.3521 7.11986 22.0845 6.77226 22.0845H5.53767C5.1661 22.0845 4.95034 22.3521 4.95034 22.7324V24.0563ZM27.6764 24.0563C27.6764 24.4225 27.8921 24.7042 28.2397 24.7042H29.4863C29.8219 24.7042 30.0497 24.4225 30.0497 24.0563V22.7324C30.0497 22.3521 29.8219 22.0845 29.4863 22.0845H28.2397C27.8681 22.0845 27.6764 22.3521 27.6764 22.7324V24.0563Z" fill="#5B574C" stroke="#5B574C"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-absolute tab-label-text" style="left: 101px; color: #5B574C;">ANIME</div>
|
||||
</div>
|
||||
|
||||
<!-- SEARCH Tab -->
|
||||
<div class="tab-item">
|
||||
<div class="app-absolute tab-icon-svg-wrapper" style="left: 183px; top: 10px;">
|
||||
<svg width="35" height="37" viewBox="0 0 35 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 33.2075C25.625 33.2075 32.2713 26.5933 32.2713 18.4924C32.2713 10.4067 25.625 3.79253 17.5 3.79253C9.375 3.79253 2.72866 10.4067 2.72866 18.4924C2.72866 26.5933 9.375 33.2075 17.5 33.2075ZM17.5 32.4641C9.77134 32.4641 3.47561 26.1988 3.47561 18.4924C3.47561 10.8011 9.77134 4.53587 17.5 4.53587C25.2439 4.53587 31.5244 10.8011 31.5244 18.4924C31.5244 26.1988 25.2439 32.4641 17.5 32.4641ZM15.8079 22.2243C17.1341 22.2243 18.3537 21.7692 19.314 20.9803L23.75 25.41C23.9024 25.5617 24.0091 25.6376 24.2073 25.6376C24.5122 25.6376 24.6951 25.4252 24.6951 25.1673C24.6951 24.9701 24.6189 24.879 24.4817 24.7425L20.0305 20.2977C20.8689 19.3268 21.3872 18.0525 21.3872 16.672C21.3872 13.6228 18.872 11.1045 15.8079 11.1045C12.7287 11.1045 10.2134 13.6228 10.2134 16.672C10.2134 19.7364 12.7287 22.2243 15.8079 22.2243ZM15.8079 21.4658C13.1555 21.4658 10.9756 19.3116 10.9756 16.672C10.9756 14.0324 13.1555 11.8631 15.8079 11.8631C18.4604 11.8631 20.625 14.0324 20.625 16.672C20.625 19.3116 18.4604 21.4658 15.8079 21.4658Z" fill="#5B574C" stroke="#5B574C"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-absolute tab-label-text" style="left: 175px; color: #5B574C;">SEARCH</div>
|
||||
</div>
|
||||
|
||||
<!-- LIBRARY Tab -->
|
||||
<div class="tab-item">
|
||||
<div class="app-absolute tab-icon-svg-wrapper" style="left: 269px; top: 8px;">
|
||||
<svg width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.82036 34.5045C4.10779 34.5045 4.34731 34.344 4.58683 34.052L11.2814 25.893C11.5928 25.5135 11.7844 25.4405 12 25.4405C12.2156 25.4405 12.4192 25.5135 12.7186 25.893L19.4012 34.0375C19.6647 34.3732 19.8922 34.5045 20.1796 34.5045C20.6467 34.5045 20.9461 34.0958 20.9461 33.4828V8.24666C20.9461 5.80916 19.8802 4.49554 17.8683 4.49554H6.13174C4.11976 4.49554 3.05389 5.80916 3.05389 8.24666V33.4828C3.05389 34.0958 3.3533 34.5045 3.82036 34.5045Z" fill="#5B574C" stroke="#5B574C"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-absolute tab-label-text" style="left: 255px; color: #5B574C;">LIBRARY</div>
|
||||
</div>
|
||||
|
||||
<!-- SETTINGS Tab -->
|
||||
<div class="tab-item">
|
||||
<div class="app-absolute tab-icon-svg-wrapper" style="left: 347.28px; top: 12px;">
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.1824 12.5815L25.4 11.9632C25.1786 11.2042 24.8758 10.4746 24.497 9.78403L26.705 6.63715C26.8835 6.38307 26.8528 6.03683 26.6333 5.81667L24.1443 3.32899C23.9222 3.10755 23.5728 3.07875 23.3181 3.26243L20.2186 5.49027C19.5216 5.10499 18.7856 4.79907 18.0221 4.57699L17.3622 0.809949C17.3085 0.504029 17.0429 0.280029 16.7318 0.280029H13.2118C12.8982 0.280029 12.6307 0.507229 12.5802 0.816989L11.9683 4.56355C11.2003 4.78435 10.463 5.08707 9.76864 5.46723L6.67744 3.25923C6.42208 3.07683 6.07456 3.10627 5.85248 3.32707L3.3648 5.81475C3.14528 6.03427 3.11456 6.37987 3.29312 6.63395L5.46848 9.74627C5.08128 10.4471 4.7728 11.1888 4.54816 11.9607L0.81632 12.5821C0.50784 12.6333 0.281281 12.9008 0.281281 13.2131V16.7331C0.281281 17.0435 0.504 17.3091 0.80928 17.3636L4.54112 18.0253C4.76448 18.7952 5.07296 19.537 5.46144 20.2397L3.2592 23.32C3.07744 23.5741 3.10624 23.9229 3.32704 24.145L5.81536 26.6352C6.03488 26.8547 6.38112 26.8855 6.6352 26.7069L9.752 24.5239C10.4515 24.9085 11.1907 25.2138 11.9568 25.4352L12.5814 29.1863C12.632 29.4941 12.8989 29.72 13.2118 29.72H16.7318C17.0422 29.72 17.3078 29.4973 17.3616 29.192L18.0304 25.4224C18.7978 25.1965 19.5331 24.8893 20.2256 24.504L23.3648 26.7063C23.6195 26.8861 23.9651 26.8547 24.1853 26.6352L26.6736 24.145C26.895 23.9229 26.9238 23.5728 26.7402 23.3181L24.5014 20.2096C24.881 19.5184 25.1824 18.7875 25.4019 18.0285L29.1894 17.3636C29.496 17.3098 29.7187 17.0435 29.7187 16.7331V13.2131C29.7194 12.8995 29.4922 12.632 29.1824 12.5815ZM15 19.48C12.5258 19.48 10.52 17.4743 10.52 15C10.52 12.5258 12.5258 10.52 15 10.52C17.4742 10.52 19.48 12.5258 19.48 15C19.48 17.4743 17.4742 19.48 15 19.48Z" fill="#5B574C"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="app-absolute tab-label-text" style="left: 331px; color: #5B574C;">SETTINGS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="desktop-message">
|
||||
Desktop app isn't available now. Please use a mobile device or resize your browser to a mobile width (e.g., less than 420px wide).
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const PROXY_URL = 'https://cors-anywhere.herokuapp.com/'; // Example public proxy
|
||||
const API_URL = PROXY_URL + 'https://api.consumet.org/meta/anilist/trending?type=MANGA&perPage=15'; // Example: Fetch 15 trending manga
|
||||
const scrollableListContent = document.getElementById('scrollable-list-content');
|
||||
|
||||
// Featured content elements
|
||||
const featuredPoster = document.getElementById('featured-poster');
|
||||
const featuredInfo = document.getElementById('featured-info');
|
||||
const featuredTitle = document.getElementById('featured-title');
|
||||
|
||||
async function fetchManga() {
|
||||
try {
|
||||
const response = await fetch(API_URL);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
displayManga(data.results);
|
||||
if (data.results && data.results.length > 0) {
|
||||
displayFeaturedManga(data.results[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
scrollableListContent.innerHTML = `<div class="error-message">Failed to load manga. ${error.message}</div>`;
|
||||
console.error('Error fetching manga:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function displayManga(mangaList) {
|
||||
scrollableListContent.innerHTML = ''; // Clear loading message or previous content
|
||||
|
||||
if (!mangaList || mangaList.length === 0) {
|
||||
scrollableListContent.innerHTML = '<div class="info-message">No manga found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
mangaList.forEach(manga => {
|
||||
const title = manga.title.english || manga.title.romaji || 'N/A';
|
||||
const coverImage = manga.image || 'https://placehold.co/58x64/333333/FFFFFF?text=N/A&font=montserrat';
|
||||
const rating = manga.rating ? (manga.rating / 10).toFixed(1) : 'N/A';
|
||||
const chapters = manga.totalChapters || manga.chapters || 'N/A';
|
||||
const status = manga.status || 'N/A';
|
||||
const year = manga.releaseDate || 'N/A';
|
||||
|
||||
const listItemWrapper = document.createElement('div');
|
||||
listItemWrapper.className = 'list-item-wrapper';
|
||||
|
||||
// Adjust inline styles as needed or move more to CSS if positions become complex
|
||||
listItemWrapper.innerHTML = `
|
||||
<div class="app-absolute li-thumb-container" style="top: 5px; left: 10px;">
|
||||
<img class="li-thumb-img" src="${coverImage}" alt="${title} cover" />
|
||||
</div>
|
||||
<div class="app-absolute flex-center-col li-main-title-text" style="left: 85px; top: 8px; width: calc(100% - 125px);">${title}</div>
|
||||
|
||||
<div class="app-absolute li-rating-badge-bg" style="left: 85px; top: 48px;"></div>
|
||||
<div class="app-absolute flex-center-col li-badge-text li-rating-text-spacing" style="left: 88px; top: 51px; width: 80px;">${rating}/10</div>
|
||||
|
||||
<div class="app-absolute li-chapters-badge-bg" style="left: 180px; top: 48px;"></div>
|
||||
<div class="app-absolute flex-center-col li-badge-text" style="left: 183px; top: 51px; width: auto; padding: 0 5px;">${chapters} Ch.</div>
|
||||
|
||||
<div class="app-absolute li-arrow-icon-wrapper" style="right: 15px; top: 24px;">
|
||||
<img src="Resources/Svgs/item-list-arrow.svg" alt="Arrow icon" width="23" height="32"/>
|
||||
</div>
|
||||
`;
|
||||
// Note: If 'Resources/Svgs/item-list-arrow.svg' is not available, replace or remove this arrow.
|
||||
// For simplicity, I'm keeping the arrow SVG as an img, assuming it's a UI element not a background.
|
||||
|
||||
scrollableListContent.appendChild(listItemWrapper);
|
||||
});
|
||||
}
|
||||
|
||||
function displayFeaturedManga(manga) {
|
||||
if (!manga) return;
|
||||
|
||||
const title = manga.title.english || manga.title.romaji || 'N/A';
|
||||
const coverImage = manga.image || 'https://placehold.co/126x193/333333/FFFFFF?text=N/A&font=montserrat';
|
||||
const type = manga.type || 'MANGA';
|
||||
const year = manga.releaseDate || 'N/A';
|
||||
|
||||
featuredPoster.src = coverImage;
|
||||
featuredPoster.alt = `${title} Poster`;
|
||||
featuredInfo.textContent = `${type} | ${year}`;
|
||||
featuredTitle.textContent = title;
|
||||
}
|
||||
|
||||
fetchManga();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
270
animex/Resources/old/styles.css
Normal file
270
animex/Resources/old/styles.css
Normal file
@@ -0,0 +1,270 @@
|
||||
/* body, #app-wrapper, #desktop-message, @media (max-width: 420px) rules remain the same as your previous version */
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #e0e0e0; /* A light grey for desktop background */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#app-wrapper {
|
||||
width: 402px; /* Design reference width */
|
||||
height: 874px; /* Design reference height */
|
||||
position: relative;
|
||||
background: white;
|
||||
overflow: hidden; /* Crucial to contain absolutely positioned children */
|
||||
display: none; /* Hidden by default, shown via media query for mobile */
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.2); /* Optional: for better visual separation if shown on desktop */
|
||||
}
|
||||
|
||||
/* --- Desktop Message --- */
|
||||
#desktop-message {
|
||||
display: flex; /* Shown by default on desktop/larger screens */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh; /* Can be min-height: 100vh as well */
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* --- Styles for elements INSIDE #app-wrapper --- */
|
||||
/* --- Explore Tab Backing --- */
|
||||
.explore-backing {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 299px;
|
||||
width: 100%;
|
||||
background: #36362F;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* --- Explore Title --- */
|
||||
.explore-title {
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 15px;
|
||||
color: white;
|
||||
font-size: 24px; /* Slightly reduced for potentially longer text */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Scrollable List --- */
|
||||
#scrollable-list-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.loading-message, .error-message, .info-message {
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* --- List Items --- */
|
||||
.list-item-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80px; /* Increased height slightly for better spacing */
|
||||
margin-bottom: 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.05); /* Subtle background for items */
|
||||
border-radius: 8px;
|
||||
}
|
||||
.list-item-wrapper:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Helper Classes --- */
|
||||
.app-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.flex-center-col {
|
||||
justify-content: center; /* Vertically center text in its given height */
|
||||
align-items: flex-start; /* Align text to the start horizontally */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- Image Adjustments --- */
|
||||
img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Bottom Navigation Bar --- */
|
||||
.bottom-tabbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #22221C;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* --- Header and Featured Content Specific Styles --- */
|
||||
.header-main-image {
|
||||
width: 540px;
|
||||
height: 409px;
|
||||
box-shadow: 1.6px 1.6px 1.6px rgba(0,0,0,0.1);
|
||||
filter: blur(1.5px) brightness(0.7); /* Adjusted for better text visibility */
|
||||
}
|
||||
|
||||
.featured-poster-img {
|
||||
width: 126px;
|
||||
height: 193px;
|
||||
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.featured-small-text {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-family: Verdana;
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.featured-title-text { /* New class for the featured title div */
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* Limit to 3 lines */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.featured-button-background {
|
||||
width: 160px;
|
||||
height: 21px;
|
||||
background: rgba(54, 54, 47, 0.8); /* Darker, slightly transparent */
|
||||
border-radius: 81px;
|
||||
}
|
||||
.featured-button-icon-svg-wrapper {
|
||||
/* Positioned by inline styles */
|
||||
}
|
||||
|
||||
|
||||
/* List Item Specific Styles (Updated for CSS backgrounds) */
|
||||
.li-thumb-container {
|
||||
/* No explicit background needed if img fills it */
|
||||
width: 58px; /* Ensure container size matches image */
|
||||
height: 64px;
|
||||
/* left: 10px; top: 5px; (from JS) */
|
||||
}
|
||||
.li-thumb-img {
|
||||
width:58px;
|
||||
height:64px;
|
||||
border-radius:9px; /* Rounded corners for the manga cover */
|
||||
}
|
||||
.li-main-title-text {
|
||||
/* top: 8px; left: 85px; (from JS) */
|
||||
color: white;
|
||||
font-size: 16px; /* Adjusted for better fit */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
max-height: 38px; /* Approx 2 lines */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* width: calc(100% - 125px); (from JS - to prevent overlap with arrow) */
|
||||
display: -webkit-box; /* For multi-line ellipsis */
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.li-rating-badge-bg, .li-chapters-badge-bg { /* Combined for similar styling */
|
||||
height: 22px; /* Adjusted height */
|
||||
background: #22221C; /* Dark background for badges */
|
||||
border-radius: 11px; /* Rounded corners */
|
||||
/* top: 48px; (from JS) */
|
||||
}
|
||||
.li-rating-badge-bg {
|
||||
width: 85px; /* Fixed width for rating */
|
||||
/* left: 85px; (from JS) */
|
||||
}
|
||||
.li-chapters-badge-bg {
|
||||
min-width: 55px; /* Min width, can grow */
|
||||
padding: 0 8px; /* Padding for dynamic width */
|
||||
/* left: 180px; (from JS) */
|
||||
}
|
||||
|
||||
.li-badge-text {
|
||||
/* height: 19px; (Not strictly needed with flex centering) */
|
||||
/* top: 51px; (from JS, vertically align with badge bg) */
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 11px; /* Adjusted for badge size */
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
line-height: 22px; /* Match badge height for vertical center */
|
||||
white-space: nowrap;
|
||||
/* width and left are set in JS or specific badge bg above */
|
||||
}
|
||||
.li-rating-text-spacing {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.li-arrow-icon-wrapper {
|
||||
/* top: 24px; right: 15px; (from JS) */
|
||||
}
|
||||
|
||||
/* Bottom Tab Bar Specific Styles */
|
||||
.tab-icon-svg-wrapper {
|
||||
/* Positioned via inline styles (top, left) */
|
||||
}
|
||||
.tab-label-text {
|
||||
top: 66px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Verdana;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* --- Mobile View Overrides & Enhancements --- */
|
||||
@media (max-width: 420px) {
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#app-wrapper {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#desktop-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.explore-backing {
|
||||
bottom: 98px;
|
||||
}
|
||||
|
||||
#scrollable-list-content {
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
540
animex/Resources/series.css
Normal file
540
animex/Resources/series.css
Normal file
@@ -0,0 +1,540 @@
|
||||
/* =========================================
|
||||
1. VARIABLES & RESET
|
||||
========================================= */
|
||||
:root {
|
||||
/* Brand & Palette */
|
||||
--brand-accent: #ff9500;
|
||||
--brand-accent-hover: #ffae40;
|
||||
--background-primary: #0a0a0a;
|
||||
--background-secondary: #161616;
|
||||
--background-tertiary: #202020;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #eaeaea;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666666;
|
||||
|
||||
/* UI Elements */
|
||||
--border-color: #2a2a2a;
|
||||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||||
--brand-glow: rgba(255, 149, 0, 0.5);
|
||||
|
||||
/* Dimensions & Animation */
|
||||
--transition-duration: 0.3s;
|
||||
--border-radius: 8px;
|
||||
--nav-height: 60px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. APP STRUCTURE & HERO SECTION
|
||||
========================================= */
|
||||
.app-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.series-hero-section {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
min-height: 550px;
|
||||
background-size: cover;
|
||||
background-position: center 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 0 5% 4rem;
|
||||
transition: background-image var(--transition-duration) ease-in-out;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--background-primary) 15%,
|
||||
rgba(10, 10, 10, 0.9) 50%,
|
||||
rgba(10, 10, 10, 0.4) 80%,
|
||||
rgba(0,0,0,0.3) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.series-hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3rem;
|
||||
animation: fadeInUp 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
/* Desktop Poster in Hero */
|
||||
.hero-poster-container {
|
||||
display: none; /* Hidden on mobile */
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.hero-poster-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-text-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.series-title-text {
|
||||
font-size: clamp(2rem, 5vw, 3.8rem);
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* Hero Sub-metadata (Rating, Studio) */
|
||||
.hero-sub-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero-rating-badge {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
.hero-rating-badge i { color: var(--brand-accent); font-size: 0.8em; }
|
||||
|
||||
/* --- HERO ACTIONS --- */
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Primary Watch Button */
|
||||
.hero-watch-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background-color: var(--brand-accent);
|
||||
color: #000;
|
||||
padding: 12px 28px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero-watch-btn:hover {
|
||||
background-color: var(--brand-accent-hover);
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 6px 25px rgba(255, 149, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Secondary Action Buttons */
|
||||
.hero-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--text-primary);
|
||||
padding: 0 20px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(5px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-action-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: var(--text-primary);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.back-btn:hover { background-color: rgba(255,255,255,0.2); }
|
||||
|
||||
/* =========================================
|
||||
3. MAIN CONTENT
|
||||
========================================= */
|
||||
.main-content {
|
||||
position: relative;
|
||||
padding: 0 5% 4rem;
|
||||
background-color: var(--background-primary);
|
||||
z-index: 3;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.series-details-section {
|
||||
margin-bottom: 3rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.series-meta-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 16px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.series-meta-info span:not(:last-child)::after {
|
||||
content: "•";
|
||||
margin-left: 16px;
|
||||
color: var(--border-color);
|
||||
}
|
||||
#series-score { color: var(--brand-accent); font-weight: 700; }
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
#series-synopsis {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: #ccc;
|
||||
}
|
||||
#series-info-additional p {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#series-info-additional strong { color: #fff; }
|
||||
|
||||
/* Genres/Studios */
|
||||
.series-genres span, .series-studios span {
|
||||
display: inline-block;
|
||||
margin: 5px 5px 0 0;
|
||||
padding: 4px 10px;
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
4. TABS & SECTIONS LAYOUT
|
||||
========================================= */
|
||||
.tabs-section { margin-top: 2rem; }
|
||||
|
||||
/* Desktop: Hide Tabs, Stack Panels */
|
||||
@media (min-width: 769px) {
|
||||
.tabs-container { display: none; }
|
||||
.tab-panel {
|
||||
display: block !important;
|
||||
margin-bottom: 4rem;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Section Headings for Desktop Stacking */
|
||||
.tab-panel::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
border-left: 4px solid var(--brand-accent);
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: Show Tabs */
|
||||
@media (max-width: 768px) {
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.tab-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tab-btn.active { color: var(--text-primary); }
|
||||
.tab-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.5rem;
|
||||
left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--brand-accent);
|
||||
}
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; animation: fadeIn 0.3s; }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
5. EPISODES
|
||||
========================================= */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.season-selector {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
outline: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.episode-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.episode-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
height: 90px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.episode-item:hover { background: var(--background-tertiary); }
|
||||
.episode-item.watched .episode-title { color: var(--text-muted); }
|
||||
.episode-item.watched { border-left: 3px solid var(--brand-accent); }
|
||||
|
||||
.episode-thumbnail {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.episode-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.episode-info { flex: 1; min-width: 0; }
|
||||
.episode-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.episode-title-romanji { font-size: 0.85rem; color: var(--text-secondary); }
|
||||
|
||||
.episode-action-icon {
|
||||
background: none; border: none; color: var(--text-secondary);
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
cursor: pointer; margin-left: 5px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.episode-action-icon:hover { background: rgba(255,255,255,0.1); color: var(--brand-accent); }
|
||||
|
||||
/* =========================================
|
||||
6. HORIZONTAL SCROLL LISTS (Chars, Rel, Rec)
|
||||
========================================= */
|
||||
.horizontal-scroll-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 15px;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
/* Character Card */
|
||||
.character-card {
|
||||
flex: 0 0 280px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
scroll-snap-align: start;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.char-image-box, .va-image-box {
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.char-image-box img, .va-image-box img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.char-info {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.char-name { font-weight: 700; color: var(--text-primary); line-height: 1.2; }
|
||||
.char-role { font-size: 0.75rem; color: var(--text-muted); }
|
||||
.va-name { text-align: right; font-size: 0.8rem; color: var(--text-primary); }
|
||||
.va-lang { text-align: right; font-size: 0.7rem; color: var(--text-muted); }
|
||||
|
||||
/* Language Tabs for Characters */
|
||||
.char-lang-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.lang-tab {
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lang-tab.active {
|
||||
background: var(--text-primary);
|
||||
color: #000;
|
||||
border-color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Related & Rec Cards (Horizontal Style) */
|
||||
.scroll-card {
|
||||
flex: 0 0 160px;
|
||||
scroll-snap-align: start;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.scroll-card-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 8px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.scroll-card:hover .scroll-card-img { transform: scale(1.05); }
|
||||
.scroll-card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll-card-meta { font-size: 0.8rem; color: var(--text-secondary); }
|
||||
|
||||
/* =========================================
|
||||
7. RESPONSIVE MEDIA QUERIES
|
||||
========================================= */
|
||||
@media (min-width: 769px) {
|
||||
/* Show poster on Desktop */
|
||||
.hero-poster-container { display: block; }
|
||||
|
||||
/* Make relations/recs grid on desktop? Or keep scroll?
|
||||
Prompt said "Relations (scrollable horizontal list)" & "Recommendations (scrollable)" */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.series-hero-section { height: auto; min-height: auto; padding-top: 250px; background-position: center top; }
|
||||
.series-hero-content { display: block; }
|
||||
.series-title-text { font-size: 2rem; margin-top: 0; }
|
||||
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
|
||||
.hero-watch-btn { grid-column: span 2; width: 100%; }
|
||||
.details-grid { grid-template-columns: 1fr; gap: 1rem; }
|
||||
}
|
||||
647
animex/Resources/styles.css
Normal file
647
animex/Resources/styles.css
Normal file
@@ -0,0 +1,647 @@
|
||||
:root {
|
||||
--bg-dark: #1C1C1E;
|
||||
--bg-content-area: #1C1C1E;
|
||||
--bg-content-elements: #3A3A3C;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #EBEBF599;
|
||||
--text-tertiary: #8A8A8E;
|
||||
--accent-color-active: #FF9500;
|
||||
--border-color: #38383A;
|
||||
--button-bg: #4A4A4F;
|
||||
--button-secondary-bg: rgba(74, 74, 79, 0.7);
|
||||
|
||||
/* Desktop-specific variables */
|
||||
--sidebar-width: 280px;
|
||||
--content-max-width: 1400px;
|
||||
--desktop-padding: 40px;
|
||||
--card-hover-lift: translateY(-4px);
|
||||
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* NEW: Consistent border radius variables */
|
||||
--radius-large: 16px;
|
||||
--radius-medium: 12px;
|
||||
--radius-small: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
DESKTOP STYLES (REWORKED & CONSOLIDATED)
|
||||
================================================================================
|
||||
*/
|
||||
@media (min-width: 768px) {
|
||||
/* === BASE LAYOUT === */
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto; /* Scroll is on the main container now */
|
||||
background: var(--bg-content-area);
|
||||
}
|
||||
|
||||
/* Hide mobile bottom nav on desktop */
|
||||
.bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* === DESKTOP SIDEBAR NAVIGATION === */
|
||||
.desktop-sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, rgba(28, 28, 30, 0.95) 0%, rgba(28, 28, 30, 0.98) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--desktop-padding) 24px;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.desktop-sidebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 149, 0, 0.3) 20%, rgba(255, 149, 0, 0.1) 50%, rgba(255, 149, 0, 0.3) 80%, transparent 100%);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-brand .brand-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%);
|
||||
border-radius: var(--radius-small);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
|
||||
}
|
||||
|
||||
.sidebar-brand .brand-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, #E0E0E0 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--radius-medium);
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
transition: var(--transition-smooth);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-nav-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, rgba(255, 149, 0, 0.05) 100%);
|
||||
opacity: 0;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.sidebar-nav-item:hover {
|
||||
color: var(--text-primary);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.sidebar-nav-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-nav-item.active {
|
||||
background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 149, 0, 0.08) 100%);
|
||||
color: var(--accent-color-active);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-nav-item.active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-nav-item .nav-icon, .sidebar-nav-item .nav-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-nav-item .nav-icon {
|
||||
font-size: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* === HERO SECTION === */
|
||||
.hero-section {
|
||||
/* FIX: Use min-height to prevent content squishing on smaller viewports */
|
||||
min-height: 400px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: var(--desktop-padding);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.7) 100%), linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: var(--content-max-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 30px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-bottom: 20px; /* Reduced padding slightly for balance */
|
||||
}
|
||||
|
||||
.hero-poster img {
|
||||
/* FIX: Increased size for more impact on desktop */
|
||||
width: 180px;
|
||||
height: 270px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-medium);
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.hero-poster img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.hero-details .title-logo {
|
||||
/* FIX: clamp() makes font size fluid and responsive */
|
||||
font-size: clamp(2.5rem, 4vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero-details .episode-info {
|
||||
font-size: 1rem;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-small);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
padding: 14px 28px;
|
||||
font-size: 1.1rem;
|
||||
border-radius: var(--radius-small);
|
||||
transition: var(--transition-smooth);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: rgba(255, 149, 0, 0.2);
|
||||
border-color: rgba(255, 149, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(255, 149, 0, 0.3);
|
||||
}
|
||||
|
||||
/* === MAIN CONTENT BODY === */
|
||||
.main-content {
|
||||
/* This is the inner container that centers the content */
|
||||
padding: var(--desktop-padding);
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, #E0E0E0 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* FIX: Reduced minmax() width to make the grid more responsive on smaller desktop screens */
|
||||
.item-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background: rgba(58, 58, 60, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-large);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-smooth);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 149, 0, 0.05) 0%, rgba(255, 149, 0, 0.02) 100%);
|
||||
opacity: 0;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: rgba(58, 58, 60, 0.6);
|
||||
transform: var(--card-hover-lift);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(255, 149, 0, 0.1);
|
||||
border-color: rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
|
||||
.list-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.item-thumbnail img {
|
||||
/* FIX: Increased size and set aspect ratio for better visual weight */
|
||||
width: 90px;
|
||||
height: 135px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-medium);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: var(--transition-smooth);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-item:hover .item-thumbnail img {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 8px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
background-color: rgba(58, 58, 60, 0.8);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.item-arrow .fa-chevron-right {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 1.1rem;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.list-item:hover .item-arrow .fa-chevron-right {
|
||||
color: var(--accent-color-active);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* === SEARCH BAR === */
|
||||
.search-bar-container {
|
||||
/* FIX: Center the search bar within the main content area */
|
||||
margin: 0 auto 32px auto;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: rgba(58, 58, 60, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 16px 24px;
|
||||
border-radius: var(--radius-large);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.search-bar-container:focus-within {
|
||||
border-color: rgba(255, 149, 0, 0.4);
|
||||
box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.1);
|
||||
background: rgba(58, 58, 60, 0.6);
|
||||
}
|
||||
|
||||
.search-bar-container input[type="text"] {
|
||||
font-size: 1.1rem;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.search-bar-container .fa-search {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 16px;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.search-bar-container:focus-within .fa-search {
|
||||
color: var(--accent-color-active);
|
||||
}
|
||||
|
||||
/* === SETTINGS PAGE === */
|
||||
.settings-group {
|
||||
margin-bottom: 40px;
|
||||
background: rgba(58, 58, 60, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-large);
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.settings-user-profile {
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.settings-user-profile img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border: 2px solid rgba(255, 149, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-user-profile .username {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
padding: 20px 12px;
|
||||
font-size: 1.1rem;
|
||||
transition: var(--transition-smooth);
|
||||
border-radius: var(--radius-small);
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.settings-item:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(28px);
|
||||
}
|
||||
|
||||
/* === SCROLLBAR STYLING === */
|
||||
.desktop-main::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.desktop-main::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.desktop-main::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--bg-dark);
|
||||
}
|
||||
|
||||
.desktop-main::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
MOBILE STYLES (UNCHANGED)
|
||||
================================================================================
|
||||
*/
|
||||
@media (max-width: 767px) {
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.desktop-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop-main {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Original mobile hero section */
|
||||
.hero-section {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-poster img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
.hero-details .title-logo {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
background-color: var(--bg-content-area);
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background: rgba(58, 58, 60, 0.5);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: rgba(58, 58, 60, 0.7);
|
||||
}
|
||||
|
||||
/* Mobile bottom navigation */
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: var(--bg-dark);
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
flex-grow: 1;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-item .nav-icon {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--accent-color-active);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user