HTML5 在线漫画阅读器 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,user-scalable=yes">
<title>超超超超超喜欢你的100个女朋友 - 在线漫画阅读器</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0f17;color:#f1f5f9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{position:sticky;top:0;z-index:50;background:rgba(13,15,23,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.09);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.badge{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px}
.title{font-size:16px;font-weight:700;color:#fff}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button{background:rgba(255,255,255,0.08);color:#e2e8f0;border:1px solid rgba(255,255,255,0.14);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:.18s}
button:hover,button.active{background:#ec4899;color:#fff;border-color:#ec4899}
.hero{max-width:920px;margin:16px auto;padding:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;display:flex;gap:18px;align-items:flex-start}
.hero img{width:120px;height:160px;object-fit:cover;border-radius:10px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.45)}
.hero-meta h1{font-size:20px;margin-bottom:6px}
.hero-meta .sub{font-size:13px;color:#94a3b8;margin-bottom:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{background:rgba(236,72,153,0.16);color:#f472b6;padding:2px 8px;border-radius:6px;font-size:11px}
.desc{font-size:13px;line-height:1.6;color:#cbd5e1}
.reader-wrap{max-width:860px;width:100%;margin:0 auto 40px;padding:0 8px;flex:1}
.scroll-mode .page-card{margin-bottom:10px;background:#161925;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.scroll-mode .page-card img{width:100%;height:auto;display:block}
.page-footer{text-align:center;font-size:11px;color:#64748b;padding:4px 0}
.flip-controls{display:none;justify-content:center;align-items:center;gap:14px;margin:14px 0}
.flip-mode .flip-controls{display:flex}
.drawer{display:none;max-width:920px;margin:0 auto 20px;padding:16px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.1)}
.drawer.open{display:block}
.chap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:10px}
.chap-item{padding:8px 10px;background:rgba(255,255,255,0.06);border-radius:8px;font-size:12px;color:#e2e8f0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-item:hover{background:rgba(236,72,153,0.28)}
@media(max-width:600px){.hero{flex-direction:column;align-items:center;text-align:center}.tags{justify-content:center}}
</style>
</head>
<body>
<header>
<div class="brand">
<span class="badge">BILIMANGA · 统一媒体库</span>
<span class="title" id="hdrTitle"></span>
</div>
<div class="controls">
<button id="btnScroll" class="active" onclick="setMode('scroll')">条漫下拉模式</button>
<button id="btnFlip" onclick="setMode('flip')">单页翻页模式</button>
<button onclick="toggleCatalog()">章节目录 (<span id="chapCount">0</span>)</button>
<button onclick="cycleLang()" id="btnLang">繁/簡/EN</button>
</div>
</header>
<section class="hero">
<img id="heroCover" src="" alt="cover">
<div class="hero-meta">
<h1 id="heroTitle"></h1>
<div class="sub" id="heroSub"></div>
<div class="tags" id="heroTags"></div>
<p class="desc" id="heroDesc"></p>
</div>
</section>
<section class="drawer" id="catDrawer">
<h3 style="font-size:14px;margin-bottom:6px">全卷章节目录 (点击切换预览章节)</h3>
<div class="chap-grid" id="chapGrid"></div>
</section>
<div class="reader-wrap scroll-mode" id="readerWrap">
<div class="flip-controls">
<button onclick="stepPage(-1)">◀ 上一页</button>
<span id="pageIndicator" style="font-size:13px;color:#cbd5e1">1 / 1</span>
<button onclick="stepPage(1)">下一页 ▶</button>
</div>
<div id="pagesContainer"></div>
</div>
<script>
const COMIC = {"slug": "bilimanga-802", "mangaid": "802", "zh_title": "超超超超超喜欢你的100个女朋友", "hant_title": "超超超超超喜歡你的100個女朋友", "en_title": "超超超超超喜欢你的100个女朋友 (Bilimanga #802)", "author": "野泽由纪子 / 中村力斗", "tags": ["恋爱", "欢乐", "后宫", "校园", "日常", "爱情浪漫", "日本漫画", "漫画"], "zh_desc": "爱城恋太郎在中学毕业前已经有向一百位女孩告白，并遭到拒绝的经验。他在中学毕业那天在神社遇见神明，得知自己如此惨澹的恋爱运，是因为神明不小心将他人生中「真命天女」的数目加多了两个位，改成了100人。神明也告诉他由于一般人只有一个命中注定的对象，所以若他没有跟对方实现恋情，对方就会遭遇不幸，然后死亡。恋太郎在升上高中后首日，就遇见他头两个「命运之人」——花园羽香里、院田唐音。她们两人对恋太郎一见钟情，而恋太郎也决定同时跟两人交往。随故事进展，恋太郎也和越来越多女性发展成多边恋关系。\n\n📚 作品信息：作者 野泽由纪子 / 中村力斗 · 评分 9.8 · 共收录 29 卷 / 277 话章节目录与高清彩页/条漫预览。", "hant_desc": "愛城戀太郎在中學畢業前已經有向一百位女孩告白，並遭到拒絕的經驗。他在中學畢業那天在神社遇見神明，得知自己如此慘澹的戀愛運，是因為神明不小心將他人生中「真命天女」的數目加多了兩個位，改成了100人。神明也告訴他由於一般人只有一個命中注定的對象，所以若他沒有跟對方實現戀情，對方就會遭遇不幸，然後死亡。戀太郎在升上高中後首日，就遇見他頭兩個「命運之人」——花園羽香里、院田唐音。她們兩人對戀太郎一見鍾情，而戀太郎也決定同時跟兩人交往。隨故事進展，戀太郎也和越來越多女性發展成多邊戀關係。\n\n📚 作品資訊：作者 野澤由紀子 / 中村力斗 · 評分 9.8 · 共收錄 29 卷 / 277 話章節目錄與高清彩頁/條漫預覽。", "en_desc": "Popular serialized manga '超超超超超喜欢你的100个女朋友' (超超超超超喜歡你的100個女朋友) by 野泽由纪子 / 中村力斗. Includes 29 volumes and 277 chapters with full online vertical/page-flip web reader.", "pages": ["https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_01.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_02.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_03.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_04.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_05.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-802/page_06.jpg"], "volumes": [{"title_hant": "超超超超超喜歡你的100個女朋友 1", "title_zh": "超超超超超喜欢你的100个女朋友 1", "cover_id": 1360659, "first_chap_id": 62278, "cover_url": "https://i.motiezw.com/cover/802/1360659.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 2", "title_zh": "超超超超超喜欢你的100个女朋友 2", "cover_id": 1360870, "first_chap_id": 62285, "cover_url": "https://i.motiezw.com/cover/802/1360870.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 3", "title_zh": "超超超超超喜欢你的100个女朋友 3", "cover_id": 1361086, "first_chap_id": 62296, "cover_url": "https://i.motiezw.com/cover/802/1361086.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 4", "title_zh": "超超超超超喜欢你的100个女朋友 4", "cover_id": 1361288, "first_chap_id": 62307, "cover_url": "https://i.motiezw.com/cover/802/1361288.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 5", "title_zh": "超超超超超喜欢你的100个女朋友 5", "cover_id": 1361494, "first_chap_id": 62318, "cover_url": "https://i.motiezw.com/cover/802/1361494.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 6", "title_zh": "超超超超超喜欢你的100个女朋友 6", "cover_id": 1361700, "first_chap_id": 62329, "cover_url": "https://i.motiezw.com/cover/802/1361700.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 7", "title_zh": "超超超超超喜欢你的100个女朋友 7", "cover_id": 2617903, "first_chap_id": 62340, "cover_url": "https://i.motiezw.com/cover/802/2617903.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 8", "title_zh": "超超超超超喜欢你的100个女朋友 8", "cover_id": 1362123, "first_chap_id": 62352, "cover_url": "https://i.motiezw.com/cover/802/1362123.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 9", "title_zh": "超超超超超喜欢你的100个女朋友 9", "cover_id": 1362327, "first_chap_id": 62364, "cover_url": "https://i.motiezw.com/cover/802/1362327.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 10", "title_zh": "超超超超超喜欢你的100个女朋友 10", "cover_id": 1362552, "first_chap_id": 62377, "cover_url": "https://i.motiezw.com/cover/802/1362552.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 11", "title_zh": "超超超超超喜欢你的100个女朋友 11", "cover_id": 1362755, "first_chap_id": 62387, "cover_url": "https://i.motiezw.com/cover/802/1362755.jpg"}, {"title_hant": "超超超超超喜歡你的100個女朋友 12", "title_zh": "超超超超超喜欢你的100个女朋友 12", "cover_id": 1362964, "first_chap_id": 62399, "cover_url": "https://i.motiezw.com/cover/802/1362964.jpg"}], "chapters": [{"cid": "62278", "title": "第１話 花園同學與院田同學", "title_zh": "第１话 花园同学与院田同学"}, {"cid": "62279", "title": "第２話 第一次的溫", "title_zh": "第２话 第一次的温"}, {"cid": "62280", "title": "第３話 好本同學", "title_zh": "第３话 好本同学"}, {"cid": "62281", "title": "第４話 原以為是恩愛回", "title_zh": "第４话 原以为是恩爱回"}, {"cid": "62282", "title": "第５話 結果，是更上一層的恩愛", "title_zh": "第５话 结果，是更上一层的恩爱"}, {"cid": "62283", "title": "番外篇 戀太郎的初戀", "title_zh": "番外篇 恋太郎的初恋"}, {"cid": "62285", "title": "第６話 榮逢同學", "title_zh": "第６话 荣逢同学"}, {"cid": "62286", "title": "第７話 AI少N無意義的一天", "title_zh": "第７话 AI少N无意义的一天"}, {"cid": "62287", "title": "第８話 大家最喜歡的泳裝回", "title_zh": "第８话 大家最喜欢的泳装回"}, {"cid": "62288", "title": "第９話 水上樂園的戀人們", "title_zh": "第９话 水上乐园的恋人们"}, {"cid": "62289", "title": "第10話 化學教室的神祕學姊", "title_zh": "第10话 化学教室的神秘学姊"}, {"cid": "62290", "title": "第11話 初次見面的調藥少N", "title_zh": "第11话 初次见面的调药少N"}, {"cid": "62291", "title": "第12話 親溫殭屍大危機", "title_zh": "第12话 亲温僵尸大危机"}, {"cid": "62292", "title": "第13話 我喜歡這樣的學姊", "title_zh": "第13话 我喜欢这样的学姊"}, {"cid": "62293", "title": "第14話 賭上愛與靈魂的聖戰", "title_zh": "第14话 赌上爱与灵魂的圣战"}, {"cid": "62294", "title": "番外篇 猜匈部遊戲", "title_zh": "番外篇 猜匈部游戏"}, {"cid": "62296", "title": "第15話 告別的理由", "title_zh": "第15话 告别的理由"}, {"cid": "62297", "title": "第16話 Love Mission：Impossible", "title_zh": "第16话 Love Mission：Impossible"}, {"cid": "62298", "title": "第17話 羽香里的母親", "title_zh": "第17话 羽香里的母亲"}, {"cid": "62299", "title": "第18話 找出謊言的魔N審判", "title_zh": "第18话 找出谎言的魔N审判"}, {"cid": "62300", "title": "第19話 即使付出這條命", "title_zh": "第19话 即使付出这条命"}, {"cid": "62302", "title": "第21話 即使跨越話數也要做。這才是所謂的全力", "title_zh": "第21话 即使跨越话数也要做。这才是所谓的全力"}, {"cid": "62303", "title": "第22話 花園家的人們", "title_zh": "第22话 花园家的人们"}, {"cid": "62304", "title": "第23話 她的名字。", "title_zh": "第23话 她的名字。"}, {"cid": "62305", "title": "番外篇 羽羽里小姐想要被撒嬌", "title_zh": "番外篇 羽羽里小姐想要被撒娇"}, {"cid": "62307", "title": "第24話 飢餓的學妹", "title_zh": "第24话 饥饿的学妹"}, {"cid": "62308", "title": "第25話 開幕! Food Fight Festival", "title_zh": "第25话 开幕! Food Fight Festival"}, {"cid": "62309", "title": "第26話 激戰！Food Fight Festival", "title_zh": "第26话 激战！Food Fight Festival"}, {"cid": "62310", "title": "第27話 決勝！Food Fight Festival", "title_zh": "第27话 决胜！Food Fight Festival"}, {"cid": "62311", "title": "第28話 大家以前都是小嬰兒", "title_zh": "第28话 大家以前都是小婴儿"}, {"cid": "62312", "title": "第29話 企太郎的大冒險", "title_zh": "第29话 企太郎的大冒险"}, {"cid": "62313", "title": "第30話 總是笑著的N僕小姐", "title_zh": "第30话 总是笑著的N仆小姐"}, {"cid": "62314", "title": "第31話 一日主人體驗♥", "title_zh": "第31话 一日主人体验♥"}, {"cid": "62315", "title": "第32話 濕漉漉N僕泒對", "title_zh": "第32话 湿漉漉N仆泒对"}, {"cid": "62316", "title": "番外篇 芽衣與羽羽里的相遇", "title_zh": "番外篇 芽衣与羽羽里的相遇"}, {"cid": "62318", "title": "第33話 須藤同學", "title_zh": "第33话 须藤同学"}, {"cid": "62319", "title": "第34話 戀太郎總教練的熱血愛指導", "title_zh": "第34话 恋太郎总教练的热血爱指导"}, {"cid": "62320", "title": "第35話 才、才不是因為9個人，所以就根到打棒球這種膚淺的理由呢!!", "title_zh": "第35话 才、才不是因为9个人，所以就根到打棒球这种肤浅的理由呢!!"}, {"cid": "62321", "title": "第36話 對妳的全壘打起誓", "title_zh": "第36话 对妳的全垒打起誓"}, {"cid": "62322", "title": "第37話 喜歡喜歡最喜歡♥", "title_zh": "第37话 喜欢喜欢最喜欢♥"}, {"cid": "62323", "title": "第38話 KTV危機", "title_zh": "第38话 KTV危机"}, {"cid": "62324", "title": "第39話 M杉學姊", "title_zh": "第39话 M杉学姊"}, {"cid": "62325", "title": "第40話 忘不了的過去", "title_zh": "第40话 忘不了的过去"}, {"cid": "62327", "title": "番外篇 就這樣，怪物誕生了", "title_zh": "番外篇 就这样，怪物诞生了"}, {"cid": "62329", "title": "第42話 任何漫畫都有的 爛大街的更換髮型回", "title_zh": "第42话 任何漫画都有的 烂大街的更换发型回"}, {"cid": "62330", "title": "第43話 是你讓這世界迎來了終結、然後", "title_zh": "第43话 是你让这世界迎来了终结、然后"}, {"cid": "62331", "title": "第44話 我想吃掉你的牛舌", "title_zh": "第44话 我想吃掉你的牛舌"}, {"cid": "62332", "title": "第45話 華暮同學", "title_zh": "第45话 华暮同学"}, {"cid": "62333", "title": "第46話 鬼捉人！校園內的捉迷藏", "title_zh": "第46话 鬼捉人！校园内的捉迷藏"}, {"cid": "62334", "title": "第47話 芽衣小姐的購物大作戰", "title_zh": "第47话 芽衣小姐的购物大作战"}, {"cid": "62335", "title": "第48話 失去的傲嬌屬悻", "title_zh": "第48话 失去的傲娇属悻"}, {"cid": "62336", "title": "第49話 取回傲嬌屬悻", "title_zh": "第49话 取回傲娇属悻"}, {"cid": "62337", "title": "第50話 值得珍愛的傲嬌", "title_zh": "第50话 值得珍爱的傲娇"}, {"cid": "62338", "title": "番外篇 第一次視線誘導", "title_zh": "番外篇 第一次视线诱导"}, {"cid": "62340", "title": "第51話 知與表妹", "title_zh": "第51话 知与表妹"}, {"cid": "62341", "title": "第52話 知與表妹的Family指導", "title_zh": "第52话 知与表妹的Family指导"}, {"cid": "62342", "title": "第53話 星期天早上大致都播這個", "title_zh": "第53话 星期天早上大致都播这个"}, {"cid": "62343", "title": "第54話 戀太郎Family的校內接溫禁止令", "title_zh": "第54话 恋太郎Family的校内接温禁止令"}, {"cid": "62344", "title": "第55話 超喜歡大家修行回", "title_zh": "第55话 超喜欢大家修行回"}, {"cid": "62345", "title": "第56話 膝枕王者決定戰", "title_zh": "第56话 膝枕王者决定战"}]};
let lang = 'zh';
let mode = 'scroll';
let curPage = 0;
function renderMeta() {
const t = lang === 'zh' ? COMIC.zh_title : (lang === 'hant' ? COMIC.hant_title : COMIC.en_title);
const d = lang === 'zh' ? COMIC.zh_desc : (lang === 'hant' ? COMIC.hant_desc : COMIC.en_desc);
document.getElementById('hdrTitle').textContent = t;
document.getElementById('heroTitle').textContent = t;
document.getElementById('heroSub').textContent = `${COMIC.author} · 共 ${COMIC.volumes.length} 卷 / ${COMIC.chapters.length} 话`;
document.getElementById('heroDesc').textContent = d;
document.getElementById('heroCover').src = COMIC.pages[0] || '';
document.getElementById('chapCount').textContent = COMIC.chapters.length;
const tg = document.getElementById('heroTags');
tg.innerHTML = '';
(COMIC.tags || []).forEach(x => {
const s = document.createElement('span');
s.className = 'tag';
s.textContent = x;
tg.appendChild(s);
});
}
function renderCatalog() {
const g = document.getElementById('chapGrid');
g.innerHTML = '';
(COMIC.chapters || []).forEach((c, idx) => {
const d = document.createElement('div');
d.className = 'chap-item';
d.textContent = c.title_zh || c.title;
d.onclick = () => {
curPage = idx % COMIC.pages.length;
if (mode === 'flip') renderPages();
else document.querySelectorAll('.page-card')[curPage]?.scrollIntoView({behavior:'smooth'});
document.getElementById('catDrawer').classList.remove('open');
};
g.appendChild(d);
});
}
function renderPages() {
const wrap = document.getElementById('readerWrap');
wrap.className = 'reader-wrap ' + (mode === 'scroll' ? 'scroll-mode' : 'flip-mode');
const box = document.getElementById('pagesContainer');
box.innerHTML = '';
const list = mode === 'scroll' ? COMIC.pages : [COMIC.pages[curPage]];
list.forEach((url, i) => {
const idx = mode === 'scroll' ? i : curPage;
const card = document.createElement('div');
card.className = 'page-card';
card.innerHTML = `<img src="${url}" loading="lazy" alt="Page ${idx+1}"><div class="page-footer">第 ${idx+1} / ${COMIC.pages.length} 页 · ${COMIC.zh_title}</div>`;
if (mode === 'flip') card.onclick = () => stepPage(1);
box.appendChild(card);
});
document.getElementById('pageIndicator').textContent = `${curPage + 1} / ${COMIC.pages.length}`;
}
function setMode(m) {
mode = m;
document.getElementById('btnScroll').classList.toggle('active', m === 'scroll');
document.getElementById('btnFlip').classList.toggle('active', m === 'flip');
renderPages();
}
function stepPage(delta) {
curPage = (curPage + delta + COMIC.pages.length) % COMIC.pages.length;
renderPages();
}
function toggleCatalog() {
document.getElementById('catDrawer').classList.toggle('open');
}
function cycleLang() {
lang = lang === 'zh' ? 'hant' : (lang === 'hant' ? 'en' : 'zh');
renderMeta();
}
renderMeta();
renderCatalog();
renderPages();
</script>
</body>
</html>
