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>离开A级队伍的我，和从前的弟子往迷宫深处迈进 - 在线漫画阅读器</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-822", "mangaid": "822", "zh_title": "离开A级队伍的我，和从前的弟子往迷宫深处迈进", "hant_title": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進", "en_title": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 (Bilimanga #822)", "author": "ユーリ / 右薙光介 / すーぱーぞんび", "tags": ["奇幻", "冒险", "异世界", "战斗", "复仇", "魔法", "后宫", "奇幻冒险"], "zh_desc": "「老子不干了！」\n\r\n红魔导士优克从待了五年的A级冒险者队伍离开了。\n\r\n长期被人当成「打杂小弟」与「万能菜鸡」百般轻视的\n\r\n冒险者生活，终于让他忍无可忍！\n\r\n令人绝望的无业游民生活就此开始……\n\r\n他原本以为会是这样，但结果正好相反！\n\r\n优克竟然被以前教过的学生邀请，\n\r\n加入一个都是美少女的队伍！\n\r\n而优克也在挑战迷宫的过程中，逐渐展现他真正的实力。\n\r\n其实他所使用的魔法与技能，都拥有超乎常理的力量──！?\n\r\n经验老道的辅助系主角与菜鸟美少女队伍的\n\r\n逆转无双冒险传说就此开始！\n\n📚 作品信息：作者 ユーリ / 右薙光介 / すーぱーぞんび · 评分 10 · 共收录 9 卷 / 129 话章节目录与高清彩页/条漫预览。", "hant_desc": "「老子不幹了！」\n\r\n紅魔導士優克從待了五年的A級冒險者隊伍離開了。\n\r\n長期被人當成「打雜小弟」與「萬能菜雞」百般輕視的\n\r\n冒險者生活，終於讓他忍無可忍！\n\r\n令人絕望的無業遊民生活就此開始……\n\r\n他原本以為會是這樣，但結果正好相反！\n\r\n優克竟然被以前教過的學生邀請，\n\r\n加入一個都是美少女的隊伍！\n\r\n而優克也在挑戰迷宮的過程中，逐漸展現他真正的實力。\n\r\n其實他所使用的魔法與技能，都擁有超乎常理的力量──！?\n\r\n經驗老道的輔助系主角與菜鳥美少女隊伍的\n\r\n逆轉無雙冒險傳說就此開始！\n\n📚 作品資訊：作者 ユーリ / 右薙光介 / すーぱーぞんび · 評分 10 · 共收錄 9 卷 / 129 話章節目錄與高清彩頁/條漫預覽。", "en_desc": "Popular serialized manga '离开A级队伍的我，和从前的弟子往迷宫深处迈进' (離開A級隊伍的我，和從前的弟子往迷宮深處邁進) by ユーリ / 右薙光介 / すーぱーぞんび. Includes 9 volumes and 129 chapters with full online vertical/page-flip web reader.", "pages": ["https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_01.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_02.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_03.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_04.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_05.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-822/page_06.jpg"], "volumes": [{"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 1", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 1", "cover_id": 1400329, "first_chap_id": 64101, "cover_url": "https://i.motiezw.com/cover/822/1400329.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 2", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 2", "cover_id": 1400529, "first_chap_id": 64115, "cover_url": "https://i.motiezw.com/cover/822/1400529.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 3", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 3", "cover_id": 1400720, "first_chap_id": 64132, "cover_url": "https://i.motiezw.com/cover/822/1400720.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 4", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 4", "cover_id": 1400911, "first_chap_id": 64149, "cover_url": "https://i.motiezw.com/cover/822/1400911.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 5", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 5", "cover_id": 1401102, "first_chap_id": 64165, "cover_url": "https://i.motiezw.com/cover/822/1401102.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 6", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 6", "cover_id": 1401289, "first_chap_id": 64181, "cover_url": "https://i.motiezw.com/cover/822/1401289.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 7", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 7", "cover_id": 1401482, "first_chap_id": 64197, "cover_url": "https://i.motiezw.com/cover/822/1401482.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 8", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 8", "cover_id": 1879013, "first_chap_id": 87386, "cover_url": "https://i.motiezw.com/cover/822/1879013.jpg"}, {"title_hant": "離開A級隊伍的我，和從前的弟子往迷宮深處邁進 9", "title_zh": "离开A级队伍的我，和从前的弟子往迷宫深处迈进 9", "cover_id": 2864176, "first_chap_id": 130876, "cover_url": "https://i.motiezw.com/cover/822/2864176.jpg"}], "chapters": [{"cid": "64101", "title": "第一話 從最爛的隊伍退隊吧!!", "title_zh": "第一话 从最烂的队伍退队吧!!"}, {"cid": "64102", "title": "第二話 優克的輔助傳說就此展開!!", "title_zh": "第二话 优克的辅助传说就此展开!!"}, {"cid": "64103", "title": "第三話 在迷宮裡也能享用大餐", "title_zh": "第三话 在迷宫里也能享用大餐"}, {"cid": "64104", "title": "第四話 令人臉紅心跳的最強輔助", "title_zh": "第四话 令人脸红心跳的最强辅助"}, {"cid": "64105", "title": "第五話 四個人一起踏出的一步", "title_zh": "第五话 四个人一起踏出的一步"}, {"cid": "64106", "title": "第六話 不小心使出的超強一擊!!", "title_zh": "第六话 不小心使出的超强一击!!"}, {"cid": "64107", "title": "第七話 少了優克的雷霆之槍", "title_zh": "第七话 少了优克的雷霆之枪"}, {"cid": "64108", "title": "第八話 優克的神技瞬間爆紅!!", "title_zh": "第八话 优克的神技瞬间爆红!!"}, {"cid": "64109", "title": "第九話 公會櫃檯小姐的特殊對待!?", "title_zh": "第九话 公会柜台小姐的特殊对待!?"}, {"cid": "64110", "title": "第十話 對傲慢又顛倒是非的傢伙使出強烈的一擊", "title_zh": "第十话 对傲慢又颠倒是非的家伙使出强烈的一击"}, {"cid": "64112", "title": "附錄小說", "title_zh": "附录小说"}, {"cid": "64111", "title": "附錄漫畫", "title_zh": "附录漫画"}, {"cid": "64115", "title": "第十一話 不該遭遇的強敵", "title_zh": "第十一话 不该遭遇的强敌"}, {"cid": "64116", "title": "第十二話 團隊的價值", "title_zh": "第十二话 团队的价值"}, {"cid": "64117", "title": "第十三話 優克的絕招", "title_zh": "第十三话 优克的绝招"}, {"cid": "64118", "title": "第十四話 死鬥的結局", "title_zh": "第十四话 死斗的结局"}, {"cid": "64119", "title": "第十五話 公會長的驚人聲明", "title_zh": "第十五话 公会长的惊人声明"}, {"cid": "64120", "title": "第十六話 焦慮的西蒙", "title_zh": "第十六话 焦虑的西蒙"}, {"cid": "64121", "title": "第十七話 A級冒險者優克與西蒙的重逢", "title_zh": "第十七话 A级冒险者优克与西蒙的重逢"}, {"cid": "64122", "title": "第十八話 怒斥", "title_zh": "第十八话 怒斥"}, {"cid": "64123", "title": "第十九話 大家一起去買房", "title_zh": "第十九话 大家一起去买房"}, {"cid": "64124", "title": "第二十話 第一次跟蕾茵單獨約會⋯", "title_zh": "第二十话 第一次跟蕾茵单独约会⋯"}, {"cid": "64126", "title": "第二十二話 貓耳少N的約會化妝服務", "title_zh": "第二十二话 猫耳少N的约会化妆服务"}, {"cid": "64127", "title": "第二十三話 新裝備如何呢…老師⋯⋯？", "title_zh": "第二十三话 新装备如何呢…老师⋯⋯？"}, {"cid": "64128", "title": "第二十四話 希露可的仇敵登場", "title_zh": "第二十四话 希露可的仇敌登场"}, {"cid": "64129", "title": "附錄小說", "title_zh": "附录小说"}, {"cid": "64130", "title": "附錄漫畫", "title_zh": "附录漫画"}, {"cid": "64132", "title": "第二十五話 暗黑魔法的威脅", "title_zh": "第二十五话 暗黑魔法的威胁"}, {"cid": "64133", "title": "第二十六話 命懸一線的優克", "title_zh": "第二十六话 命悬一线的优克"}, {"cid": "64134", "title": "第二十七話 優克的師父", "title_zh": "第二十七话 优克的师父"}, {"cid": "64135", "title": "第二十八話 三位N孩覺醒", "title_zh": "第二十八话 三位N孩觉醒"}, {"cid": "64136", "title": "第二十九話 死亡逼近", "title_zh": "第二十九话 死亡逼近"}, {"cid": "64137", "title": "第三十話 優克發飆了", "title_zh": "第三十话 优克发飙了"}, {"cid": "64138", "title": "第三十一話 四重奏攻擊", "title_zh": "第三十一话 四重奏攻击"}, {"cid": "64139", "title": "第三十二話 傲嬌侯爵登場", "title_zh": "第三十二话 傲娇侯爵登场"}, {"cid": "64140", "title": "第三十三話「大暴走」對策會議", "title_zh": "第三十三话「大暴走」对策会议"}, {"cid": "64141", "title": "第三十四話 同床共枕是恢復疲勞的最好方法!?", "title_zh": "第三十四话 同床共枕是恢复疲劳的最好方法!?"}, {"cid": "64142", "title": "第三十五話 雷霆之槍的悽慘現況", "title_zh": "第三十五话 雷霆之枪的凄惨现况"}, {"cid": "64143", "title": "第三十六話 愚蠢至極的舉動！", "title_zh": "第三十六话 愚蠢至极的举动！"}, {"cid": "64144", "title": "第三十七話 駁倒西蒙", "title_zh": "第三十七话 驳倒西蒙"}, {"cid": "64145", "title": "第三十八話 受到重用的「四葉草」", "title_zh": "第三十八话 受到重用的「四叶草」"}, {"cid": "64146", "title": "附錄小說", "title_zh": "附录小说"}, {"cid": "64147", "title": "附錄漫畫", "title_zh": "附录漫画"}, {"cid": "64149", "title": "第三十九話 與貓耳少N重逢", "title_zh": "第三十九话 与猫耳少N重逢"}, {"cid": "64151", "title": "第四十一話 熱烈歡迎", "title_zh": "第四十一话 热烈欢迎"}, {"cid": "64152", "title": "第四十二話 三位N孩與寧寧一起洗澡！", "title_zh": "第四十二话 三位N孩与宁宁一起洗澡！"}, {"cid": "64153", "title": "第四十三話 實現夢想的第一步", "title_zh": "第四十三话 实现梦想的第一步"}, {"cid": "64154", "title": "第四十四話 在「無S暗影」裡反常即為正常", "title_zh": "第四十四话 在「无S暗影」里反常即为正常"}, {"cid": "64155", "title": "第四十五話「四葉草」進化後的實力", "title_zh": "第四十五话「四叶草」进化后的实力"}, {"cid": "64156", "title": "第四十六話 瑪莉娜的隱藏才能", "title_zh": "第四十六话 玛莉娜的隐藏才能"}, {"cid": "64157", "title": "第四十七話一波未平，一波又起", "title_zh": "第四十七话一波未平，一波又起"}, {"cid": "64158", "title": "第四十八話 西蒙的愚蠢策略", "title_zh": "第四十八话 西蒙的愚蠢策略"}, {"cid": "64159", "title": "第四十九話 給予西蒙鐵拳制裁！", "title_zh": "第四十九话 给予西蒙铁拳制裁！"}, {"cid": "64160", "title": "第五十話 未知魔法道具的真面目", "title_zh": "第五十话 未知魔法道具的真面目"}, {"cid": "64161", "title": "第五十一話 開始挑戰第二層！", "title_zh": "第五十一话 开始挑战第二层！"}, {"cid": "64162", "title": "附錄小說", "title_zh": "附录小说"}, {"cid": "64163", "title": "附錄漫畫", "title_zh": "附录漫画"}, {"cid": "64165", "title": "第五十二話 這人為何在「無S暗影」裡⋯!?", "title_zh": "第五十二话 这人为何在「无S暗影」里⋯!?"}, {"cid": "64166", "title": "第五十三話 與冥界之王的驚天邂逅", "title_zh": "第五十三话 与冥界之王的惊天邂逅"}, {"cid": "64167", "title": "第五十四話 英雄與其愛人的悲傷故事", "title_zh": "第五十四话 英雄与其爱人的悲伤故事"}]};
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>
