940 lines
32 KiB
HTML
940 lines
32 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
<title>Manga - Media App</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
/>
|
|
<style>
|
|
:root {
|
|
--accent-color: #de541e;
|
|
--accent-glow: rgba(222, 84, 30, 0.35);
|
|
--accent-rgb: 222, 84, 30;
|
|
--background-color: #0e0e0e;
|
|
--surface: #1c1c1c;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #999999;
|
|
--border-color: rgba(255, 255, 255, 0.08);
|
|
--shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.7);
|
|
--transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--radius-card: 14px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--background-color);
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
/* ── Navbar ── */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
padding: 14px 0;
|
|
background: rgba(14, 14, 14, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(222, 84, 30, 0.1);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.navbar svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
height: 44px;
|
|
width: auto;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* ── App container ── */
|
|
.app-container {
|
|
padding: 0 5%;
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ── Desktop Hero ── */
|
|
#desktop-hero {
|
|
display: none;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 580px;
|
|
margin: 24px 0 56px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.hero-bg-image {
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 65%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center; /* Centers banners beautifully */
|
|
opacity: 0.75;
|
|
mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%);
|
|
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%);
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(to right, #0e0e0e 28%, rgba(14,14,14,0.72) 52%, transparent 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 52%;
|
|
height: 100%;
|
|
padding: 56px 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
|
|
}
|
|
|
|
.hero-hidden { opacity: 0; transform: translateY(8px); }
|
|
|
|
.hero-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-color);
|
|
margin-bottom: 18px;
|
|
background: rgba(222, 84, 30, 0.12);
|
|
border: 1px solid rgba(222, 84, 30, 0.25);
|
|
padding: 5px 12px;
|
|
border-radius: 20px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.hero-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-tag {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
padding: 4px 11px;
|
|
border-radius: 6px;
|
|
font-size: 0.8rem;
|
|
color: #bbb;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
font-family: "DM Sans", sans-serif;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 3.2rem;
|
|
line-height: 1.08;
|
|
font-weight: 800;
|
|
margin: 0 0 10px 0;
|
|
text-shadow: 0 2px 14px rgba(0,0,0,0.6);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.15rem;
|
|
color: var(--accent-color);
|
|
margin: 0 0 18px 0;
|
|
font-weight: 600;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.hero-synopsis {
|
|
font-size: 0.93rem;
|
|
line-height: 1.65;
|
|
color: #ccc;
|
|
margin-bottom: 32px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
max-width: 88%;
|
|
font-family: "DM Sans", sans-serif;
|
|
}
|
|
|
|
.hero-actions { display: flex; gap: 14px; }
|
|
|
|
.btn-hero {
|
|
padding: 12px 26px;
|
|
font-size: 0.93rem;
|
|
font-weight: 700;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: none;
|
|
font-family: "Outfit", sans-serif;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-color);
|
|
color: #fff;
|
|
box-shadow: 0 4px 20px var(--accent-glow);
|
|
}
|
|
.btn-primary:hover {
|
|
background: #f05f22;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 28px rgba(222,84,30,0.5);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1.5px solid rgba(255,255,255,0.18);
|
|
color: #fff;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.btn-outline:hover {
|
|
border-color: rgba(255,255,255,0.4);
|
|
background: rgba(255,255,255,0.14);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ── Hero Dots ── */
|
|
.hero-indicators {
|
|
position: absolute;
|
|
bottom: 36px; right: 52px;
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hero-dot {
|
|
width: 10px; height: 10px;
|
|
background-color: rgba(255,255,255,0.25);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.35s ease;
|
|
}
|
|
.hero-dot:hover { background-color: rgba(255,255,255,0.55); }
|
|
.hero-dot.active {
|
|
background-color: var(--accent-color);
|
|
width: 22px;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
/* ── Mobile Carousel ── */
|
|
#featured-carousel-container {
|
|
min-height: 360px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.carousel-viewport {
|
|
width: 100%;
|
|
height: 320px;
|
|
position: relative;
|
|
perspective: 1200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.carousel-slide {
|
|
position: absolute;
|
|
width: 60%;
|
|
max-width: 195px;
|
|
height: 290px;
|
|
border-radius: var(--radius-card);
|
|
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
|
|
cursor: pointer;
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
.carousel-slide img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-card);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
|
|
}
|
|
.slide-center { transform: translateX(0) scale(1); opacity: 1; z-index: 10; }
|
|
.slide-left { transform: translateX(-40%) scale(0.78) rotate(-7deg); opacity: 0.9; z-index: 5; }
|
|
.slide-right { transform: translateX(40%) scale(0.78) rotate(7deg); opacity: 0.9; z-index: 5; }
|
|
.slide-exit-left { transform: translateX(-150%) scale(0.6); opacity: 0; z-index: 1; }
|
|
.slide-exit-right { transform: translateX(150%) scale(0.6); opacity: 0; z-index: 1; }
|
|
|
|
/* ── Sections ── */
|
|
.content-section { margin-bottom: 48px; }
|
|
|
|
.section-header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.28rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-title::before {
|
|
content: "";
|
|
display: block;
|
|
width: 3px; height: 20px;
|
|
background: linear-gradient(to bottom, var(--accent-color), rgba(222,84,30,0.2));
|
|
border-radius: 3px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Horizontal Scroll ── */
|
|
.horizontal-scroll-container {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 14px 0 30px;
|
|
gap: 16px;
|
|
scroll-behavior: smooth;
|
|
mask-image: linear-gradient(to right, black 93%, transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, black 93%, transparent 100%);
|
|
}
|
|
.horizontal-scroll-container::-webkit-scrollbar { display: none; }
|
|
.horizontal-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* ── Curated Poster Cards ── */
|
|
.poster-card {
|
|
flex-shrink: 0;
|
|
width: 150px; height: 225px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-radius: var(--radius-card);
|
|
overflow: hidden;
|
|
transition: transform 0.35s var(--transition-smooth), box-shadow 0.35s var(--transition-smooth);
|
|
background-color: var(--surface);
|
|
border: 1.5px solid transparent;
|
|
}
|
|
.poster-card:hover {
|
|
transform: scale(1.04) translateY(-6px);
|
|
box-shadow: 0 20px 44px rgba(0,0,0,0.65), 0 0 0 1px rgba(222,84,30,0.2);
|
|
border-color: rgba(222,84,30,0.18);
|
|
z-index: 10;
|
|
}
|
|
.poster-card img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.4s var(--transition-smooth);
|
|
}
|
|
.poster-card:hover img { transform: scale(1.04); }
|
|
.poster-card::after {
|
|
content: "";
|
|
position: absolute; bottom: 0; left: 0;
|
|
width: 100%; height: 58%;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 100%);
|
|
border-radius: 0 0 var(--radius-card) var(--radius-card);
|
|
pointer-events: none;
|
|
}
|
|
.poster-card .poster-title {
|
|
position: absolute; bottom: 0; left: 0;
|
|
width: 100%;
|
|
padding: 10px;
|
|
z-index: 2;
|
|
font-size: 0.86rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
white-space: normal;
|
|
line-height: 1.25;
|
|
text-shadow: 0 2px 6px rgba(0,0,0,0.8);
|
|
font-family: "DM Sans", sans-serif;
|
|
}
|
|
.manga-badge {
|
|
position: absolute;
|
|
top: 7px; left: 7px;
|
|
z-index: 2;
|
|
background: var(--accent-color);
|
|
color: #fff;
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
padding: 2px 7px;
|
|
border-radius: 5px;
|
|
letter-spacing: 0.08em;
|
|
font-family: "Outfit", sans-serif;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
/* ── Continue Reading Posters ── */
|
|
.poster-container {
|
|
flex-shrink: 0;
|
|
width: 155px;
|
|
text-align: left;
|
|
transition: transform 0.3s var(--transition-smooth);
|
|
}
|
|
.poster-container:hover { transform: translateY(-6px); }
|
|
|
|
.poster-image-wrapper {
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
border-radius: var(--radius-card);
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
|
|
border: 1.5px solid transparent;
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
.poster-container:hover .poster-image-wrapper {
|
|
border-color: rgba(222,84,30,0.22);
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
|
|
}
|
|
.poster-image-wrapper img {
|
|
width: 100%; height: 220px;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform 0.4s var(--transition-smooth);
|
|
}
|
|
.poster-container:hover .poster-image-wrapper img { transform: scale(1.04); }
|
|
|
|
.poster-container .poster-title {
|
|
font-size: 0.83rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.3s;
|
|
font-family: "DM Sans", sans-serif;
|
|
padding: 0 2px;
|
|
}
|
|
.poster-container:hover .poster-title { color: var(--accent-color); }
|
|
|
|
.progress-bar {
|
|
position: absolute; bottom: 0; left: 0;
|
|
width: 100%; height: 3px;
|
|
background-color: rgba(255,255,255,0.15);
|
|
z-index: 2;
|
|
}
|
|
.progress-bar-inner {
|
|
height: 100%; width: 0%;
|
|
background: linear-gradient(to right, var(--accent-color), #ff7a3a);
|
|
box-shadow: 0 0 8px var(--accent-glow);
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
.chapter-indicator {
|
|
position: absolute;
|
|
top: 7px; left: 7px;
|
|
background-color: rgba(0,0,0,0.72);
|
|
color: #fff;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
z-index: 2;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
font-family: "Outfit", sans-serif;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ── Loader ── */
|
|
.loader {
|
|
border: 3px solid rgba(255,255,255,0.1);
|
|
border-top: 3px solid var(--accent-color);
|
|
border-radius: 50%;
|
|
width: 46px; height: 46px;
|
|
animation: spin 0.8s linear infinite;
|
|
margin: 80px auto;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Error ── */
|
|
.error-message {
|
|
color: #777;
|
|
font-style: italic;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
font-family: "DM Sans", sans-serif;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (min-width: 1024px) {
|
|
body { padding-top: 100px; }
|
|
#featured-carousel-container { display: none !important; }
|
|
#desktop-hero { display: flex !important; }
|
|
.navbar { padding: 18px 0; }
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
#desktop-hero { height: 620px; }
|
|
.hero-title { font-size: 3.6rem; }
|
|
.poster-container { width: 168px; }
|
|
.poster-card { width: 162px; height: 243px; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section-title { font-size: 1.05rem; }
|
|
.poster-container { width: 128px; }
|
|
.poster-image-wrapper img { height: 185px; }
|
|
.poster-card { width: 118px; height: 177px; }
|
|
.poster-card .poster-title { font-size: 0.76rem; padding: 8px; }
|
|
.chapter-indicator { font-size: 0.66rem; padding: 2px 5px; }
|
|
.content-section { margin-bottom: 36px; }
|
|
.horizontal-scroll-container { gap: 10px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar">
|
|
<svg
|
|
width="1767" height="292"
|
|
viewBox="0 0 1767 292"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect width="1767" height="292" rx="146" fill="black" fill-opacity="0.01" />
|
|
<rect x="802" y="56" width="164" height="22.5285" fill="#DE541E" />
|
|
<rect x="802" y="93.7502" width="164" height="22.5285" fill="#DE541E" />
|
|
<path d="M957.858 235.619H931.051L903.773 71.8308H931.051L957.858 235.619Z" fill="#DE541E" />
|
|
<path d="M813.05 235.619H839.857L867.135 71.8308H839.857L813.05 235.619Z" fill="#DE541E" />
|
|
<rect x="867.135" y="199.608" width="34.3121" height="36.0108" fill="#DE541E" />
|
|
<ellipse cx="884.291" cy="199.275" rx="17.156" ry="19.6726" fill="#DE541E" />
|
|
</svg>
|
|
</nav>
|
|
|
|
<div class="app-container">
|
|
|
|
<!-- Desktop Hero (shown on 1024px+) -->
|
|
<div id="desktop-hero">
|
|
<img class="hero-bg-image" id="hero-bg" src="" alt="" />
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content" id="hero-content">
|
|
<span class="hero-label"><i class="fas fa-fire"></i> Trending Manga</span>
|
|
<div class="hero-tags" id="hero-tags"></div>
|
|
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
|
<h2 class="hero-subtitle" id="hero-subtitle"></h2>
|
|
<p class="hero-synopsis" id="hero-desc"></p>
|
|
<div class="hero-actions">
|
|
<button class="btn-hero btn-primary" id="hero-read-btn">
|
|
Read Now <i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
<button class="btn-hero btn-outline">
|
|
<i class="far fa-bookmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hero-indicators" id="hero-indicators"></div>
|
|
</div>
|
|
|
|
<!-- Jikan Content (carousel on mobile, hero replaces on desktop) -->
|
|
<section class="content-section" id="jikan-content">
|
|
<!-- Mobile Carousel -->
|
|
<div id="featured-carousel-container">
|
|
<div class="loader"></div>
|
|
</div>
|
|
|
|
<!-- Continue Reading + Curated sections injected here -->
|
|
<main id="main-content-area-shared"></main>
|
|
<main id="main-content-area-jikan"></main>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const JIKAN_API_BASE_URL = "https://api.jikan.moe/v4";
|
|
const CONTENT_JSON_FILE = "manga_content.json";
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const profileId = urlParams.get("profileId");
|
|
|
|
// ── Open manga in parent popup ──
|
|
function openMangaModal(source, mangaId) {
|
|
window.parent.openPopup(`manga-info.html?source=${source}&id=${mangaId}`);
|
|
}
|
|
|
|
// ── Carousel state ──
|
|
const carouselContainer = document.getElementById("featured-carousel-container");
|
|
let carouselData = [];
|
|
let currentIndex = 0;
|
|
let slides = [];
|
|
let isAnimating = false;
|
|
|
|
// ── Desktop hero state ──
|
|
let currentHeroIndex = 0;
|
|
let heroInterval;
|
|
|
|
// ── Load curated JSON ──
|
|
async function loadCuratedContent() {
|
|
try {
|
|
const response = await fetch(CONTENT_JSON_FILE);
|
|
if (!response.ok) throw new Error("Could not load manga_content.json");
|
|
const data = await response.json();
|
|
|
|
if (data.spotlight && data.spotlight.length > 0) {
|
|
setupSpotlight(data.spotlight);
|
|
} else {
|
|
carouselContainer.innerHTML = `<p class="error-message">No spotlight content found.</p>`;
|
|
}
|
|
|
|
if (data.sections && data.sections.length > 0) {
|
|
data.sections.forEach((section) => createLocalJikanSection(section));
|
|
}
|
|
} catch (error) {
|
|
console.error("Content Load Error:", error);
|
|
createJikanHorizontalSection(
|
|
"Top Manga",
|
|
`${JIKAN_API_BASE_URL}/top/manga?filter=bypopularity&limit=15`
|
|
);
|
|
}
|
|
}
|
|
|
|
function setupSpotlight(spotlightItems) {
|
|
carouselData = spotlightItems;
|
|
|
|
// Mobile carousel HTML (Continues to use poster images)
|
|
carouselContainer.innerHTML = `
|
|
<div class="carousel-viewport">
|
|
${carouselData.map((item) =>
|
|
`<div class="carousel-slide" data-id="${item.id}">
|
|
<img src="${item.image_tall || item.image}" alt="${item.name}">
|
|
</div>`
|
|
).join("")}
|
|
</div>`;
|
|
|
|
slides = Array.from(carouselContainer.querySelectorAll(".carousel-slide"));
|
|
const viewport = carouselContainer.querySelector(".carousel-viewport");
|
|
let touchstartX = 0;
|
|
|
|
if (viewport) {
|
|
viewport.addEventListener("touchstart",
|
|
(e) => (touchstartX = e.changedTouches[0].screenX), { passive: true });
|
|
viewport.addEventListener("touchend", (e) => {
|
|
const touchendX = e.changedTouches[0].screenX;
|
|
if (touchendX < touchstartX - 50) navigateCarousel(1);
|
|
if (touchendX > touchstartX + 50) navigateCarousel(-1);
|
|
});
|
|
viewport.addEventListener("click", (e) => {
|
|
const slide = e.target.closest(".carousel-slide");
|
|
if (slide && slide.classList.contains("slide-center"))
|
|
openMangaModal("jikan", slide.dataset.id);
|
|
});
|
|
updateCarousel();
|
|
}
|
|
|
|
// Desktop hero
|
|
if (carouselData.length > 0) {
|
|
setupHeroIndicators(carouselData);
|
|
updateDesktopHero(carouselData[0]);
|
|
resetHeroTimer();
|
|
}
|
|
}
|
|
|
|
// ── Desktop hero ──
|
|
function setupHeroIndicators(data) {
|
|
const container = document.getElementById("hero-indicators");
|
|
container.innerHTML = "";
|
|
data.forEach((_, index) => {
|
|
const dot = document.createElement("div");
|
|
dot.className = "hero-dot";
|
|
if (index === 0) dot.classList.add("active");
|
|
dot.addEventListener("click", () => {
|
|
currentHeroIndex = index;
|
|
updateDesktopHero(data[index], true);
|
|
resetHeroTimer();
|
|
});
|
|
container.appendChild(dot);
|
|
});
|
|
}
|
|
|
|
function resetHeroTimer() {
|
|
if (heroInterval) clearInterval(heroInterval);
|
|
heroInterval = setInterval(() => {
|
|
currentHeroIndex = (currentHeroIndex + 1) % carouselData.length;
|
|
updateDesktopHero(carouselData[currentHeroIndex], true);
|
|
}, 8000);
|
|
}
|
|
|
|
function updateDesktopHero(item, animate = false) {
|
|
if (!item) return;
|
|
|
|
const heroContent = document.getElementById("hero-content");
|
|
const heroBg = document.getElementById("hero-bg");
|
|
const heroTitle = document.getElementById("hero-title");
|
|
const heroSub = document.getElementById("hero-subtitle");
|
|
const heroDesc = document.getElementById("hero-desc");
|
|
const heroTags = document.getElementById("hero-tags");
|
|
const heroBtn = document.getElementById("hero-read-btn");
|
|
|
|
document.querySelectorAll(".hero-dot").forEach((dot, idx) => {
|
|
dot.classList.toggle("active", idx === currentHeroIndex);
|
|
});
|
|
|
|
const setContent = () => {
|
|
heroTitle.textContent = item.name;
|
|
heroSub.textContent = item.jp_name || "";
|
|
heroDesc.textContent = item.description || "Click to read more.";
|
|
|
|
// Set Anilist banner dynamically. Fallback to poster if banner is unavailable.
|
|
heroBg.src = `/manga/${item.id}/banner`;
|
|
heroBg.onerror = () => {
|
|
heroBg.src = item.image;
|
|
};
|
|
|
|
heroTags.innerHTML = "";
|
|
const tag = document.createElement("span");
|
|
tag.className = "hero-tag";
|
|
tag.textContent = "Manga";
|
|
heroTags.appendChild(tag);
|
|
|
|
const newBtn = heroBtn.cloneNode(true);
|
|
heroBtn.parentNode.replaceChild(newBtn, heroBtn);
|
|
newBtn.addEventListener("click", () => openMangaModal("jikan", item.id));
|
|
};
|
|
|
|
if (animate) {
|
|
heroContent.classList.add("hero-hidden");
|
|
heroBg.classList.add("hero-hidden");
|
|
setTimeout(() => {
|
|
setContent();
|
|
heroContent.classList.remove("hero-hidden");
|
|
heroBg.classList.remove("hero-hidden");
|
|
}, 500);
|
|
} else {
|
|
setContent();
|
|
}
|
|
}
|
|
|
|
// ── Mobile carousel ──
|
|
function navigateCarousel(direction) {
|
|
if (isAnimating) return;
|
|
isAnimating = true;
|
|
const total = carouselData.length;
|
|
const oldIndex = currentIndex;
|
|
currentIndex = (currentIndex + direction + total) % total;
|
|
updateCarousel(direction, oldIndex);
|
|
setTimeout(() => { isAnimating = false; }, 600);
|
|
}
|
|
|
|
function updateCarousel(direction = 0, oldIndex = -1) {
|
|
const total = slides.length;
|
|
if (total === 0) return;
|
|
const leftIndex = (currentIndex - 1 + total) % total;
|
|
const rightIndex = (currentIndex + 1 + total) % total;
|
|
|
|
if (direction !== 0 && oldIndex !== -1) {
|
|
const oldLeftIndex = (oldIndex - 1 + total) % total;
|
|
const oldRightIndex = (oldIndex + 1 + total) % total;
|
|
if (direction === 1)
|
|
slides[oldLeftIndex].className = "carousel-slide slide-exit-left";
|
|
else
|
|
slides[oldRightIndex].className = "carousel-slide slide-exit-right";
|
|
}
|
|
|
|
slides.forEach((slide, index) => {
|
|
setTimeout(() => {
|
|
let cls = "carousel-slide";
|
|
if (index === currentIndex) cls += " slide-center";
|
|
else if (index === leftIndex) cls += " slide-left";
|
|
else if (index === rightIndex) cls += " slide-right";
|
|
slide.className = cls;
|
|
}, 10);
|
|
});
|
|
}
|
|
|
|
// ── Curated JSON sections ──
|
|
const mainContentAreaJikan = document.getElementById("main-content-area-jikan");
|
|
|
|
function createLocalJikanSection(sectionData) {
|
|
const section = document.createElement("section");
|
|
section.className = "content-section";
|
|
section.innerHTML = `
|
|
<div class="section-header-row">
|
|
<h2 class="section-title">${sectionData.title}</h2>
|
|
</div>
|
|
<div class="horizontal-scroll-container"></div>`;
|
|
mainContentAreaJikan.appendChild(section);
|
|
const scrollContainer = section.querySelector(".horizontal-scroll-container");
|
|
|
|
if (sectionData.items && sectionData.items.length > 0) {
|
|
const mapped = sectionData.items.map((item) => ({
|
|
mal_id: item.id,
|
|
title: item.name,
|
|
images: { jpg: { image_url: item.image } },
|
|
}));
|
|
displayJikanPosters(mapped, scrollContainer);
|
|
} else {
|
|
scrollContainer.innerHTML = `<p class="error-message">No items in this section.</p>`;
|
|
}
|
|
}
|
|
|
|
async function createJikanHorizontalSection(title, apiUrl) {
|
|
try {
|
|
const section = document.createElement("section");
|
|
section.className = "content-section";
|
|
section.innerHTML = `
|
|
<div class="section-header-row">
|
|
<h2 class="section-title">${title}</h2>
|
|
</div>
|
|
<div class="horizontal-scroll-container"><div class="loader"></div></div>`;
|
|
mainContentAreaJikan.appendChild(section);
|
|
const scrollContainer = section.querySelector(".horizontal-scroll-container");
|
|
const response = await fetch(apiUrl);
|
|
if (!response.ok) throw new Error(`API error: ${response.status}`);
|
|
const responseData = await response.json();
|
|
displayJikanPosters(responseData.data, scrollContainer);
|
|
} catch (error) {
|
|
console.error(`Failed to load section "${title}":`, error);
|
|
}
|
|
}
|
|
|
|
function displayJikanPosters(mangaData, container) {
|
|
container.innerHTML = "";
|
|
if (!mangaData || mangaData.length === 0) {
|
|
container.innerHTML = `<p class="error-message">No results found.</p>`;
|
|
return;
|
|
}
|
|
mangaData.forEach((item) => {
|
|
const imageUrl = item.images?.jpg?.image_url || item.image;
|
|
if (!imageUrl) return;
|
|
const card = document.createElement("div");
|
|
card.className = "poster-card";
|
|
card.onclick = () => {
|
|
window.parent.openPopup(`manga-info.html?source=jikan&id=${item.mal_id}`);
|
|
};
|
|
card.innerHTML = `
|
|
<img src="${imageUrl}" alt="${item.title}" loading="lazy">
|
|
<div class="manga-badge">Manga</div>
|
|
<p class="poster-title">${item.title}</p>`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// ── Continue Reading (Jikan only) ──
|
|
const mainContentAreaShared = document.getElementById("main-content-area-shared");
|
|
|
|
async function initializeContinueReading() {
|
|
const rawHistory = JSON.parse(localStorage.getItem("reading_history")) || [];
|
|
if (rawHistory.length === 0) return;
|
|
|
|
const sortedHistory = [...rawHistory].sort((a, b) => {
|
|
const aMax = Math.max(...Object.values(a.chapters).map(c => c.timestamp || 0));
|
|
const bMax = Math.max(...Object.values(b.chapters).map(c => c.timestamp || 0));
|
|
return bMax - aMax;
|
|
});
|
|
|
|
const jikanList = [];
|
|
sortedHistory.forEach(entry => {
|
|
if (entry.source === "mangadex") return; // MangaDex continue reading not shown here
|
|
let latestChNum = null, maxTime = 0;
|
|
for (const [chNum, chData] of Object.entries(entry.chapters)) {
|
|
if (chData.timestamp > maxTime) { maxTime = chData.timestamp; latestChNum = chNum; }
|
|
}
|
|
if (!latestChNum) return;
|
|
jikanList.push({ mangaId: entry.mangaId, last_chapter: parseFloat(latestChNum) });
|
|
});
|
|
|
|
const oldSection = document.getElementById("continue-reading-jikan");
|
|
if (oldSection) oldSection.remove();
|
|
|
|
if (jikanList.length > 0) await renderJikanContinueReading(jikanList);
|
|
}
|
|
|
|
async function renderJikanContinueReading(list) {
|
|
const section = document.createElement("section");
|
|
section.id = "continue-reading-jikan";
|
|
section.className = "content-section";
|
|
section.innerHTML = `
|
|
<div class="section-header-row">
|
|
<h2 class="section-title">Continue Reading</h2>
|
|
</div>
|
|
<div class="horizontal-scroll-container"></div>`;
|
|
mainContentAreaShared.prepend(section);
|
|
const container = section.querySelector(".horizontal-scroll-container");
|
|
|
|
for (const item of list.slice(0, 15)) {
|
|
try {
|
|
await new Promise((resolve) => setTimeout(resolve, 350));
|
|
const response = await fetch(`${JIKAN_API_BASE_URL}/manga/${item.mangaId}`);
|
|
if (!response.ok) continue;
|
|
const mangaData = (await response.json()).data;
|
|
if (!mangaData) continue;
|
|
|
|
const title = mangaData.title_english || mangaData.title;
|
|
const totalChapters = mangaData.chapters;
|
|
const progressPct = totalChapters > 0 ? (item.last_chapter / totalChapters) * 100 : 0;
|
|
const isFinished = totalChapters && item.last_chapter >= totalChapters;
|
|
const indicatorText = isFinished ? "Finished" : `Chapter ${item.last_chapter}`;
|
|
|
|
container.appendChild(
|
|
createContinuePoster("jikan", mangaData.mal_id, mangaData.images?.jpg?.image_url, title, indicatorText, progressPct)
|
|
);
|
|
} catch (err) {
|
|
console.error(`Failed to fetch Jikan data for manga ID ${item.mangaId}:`, err);
|
|
}
|
|
}
|
|
}
|
|
|
|
function createContinuePoster(source, id, imageUrl, title, indicatorText, progressPercent) {
|
|
const el = document.createElement("div");
|
|
el.className = "poster-container";
|
|
el.innerHTML = `
|
|
<div class="poster-image-wrapper">
|
|
<div class="chapter-indicator">${indicatorText}</div>
|
|
<img src="${imageUrl}" alt="${title}" loading="lazy">
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-inner" style="width: ${progressPercent}%;"></div>
|
|
</div>
|
|
</div>
|
|
<p class="poster-title" title="${title}">${title}</p>`;
|
|
el.addEventListener("click", () => openMangaModal(source, id));
|
|
return el;
|
|
}
|
|
|
|
// ── Init ──
|
|
async function initializePage() {
|
|
await initializeContinueReading();
|
|
await loadCuratedContent();
|
|
}
|
|
|
|
initializePage();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |