{{ define "common/manga.html" }}
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=880, target-densitydpi=device-dpi, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>转校生漫画 〜转校生庆典〜</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/perfect-scrollbar.css">
    <link rel="stylesheet" href="/static/css/ll-perfect-scrollbar.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body class="android_chromium ">
    <div id="body">
        <div id="list-container">
            <h2><img src="/static/images/title-banner.png"></h2>
            <div id="list-scroll">
                <ul>
                    <li class="button" data-image="/static/images/15238702168776.png">
                        <p>第54话 转学生派对</p>
                    </li>
                    <li class="button" data-image="/static/images/15238701747409.png">
                        <p>第53话 末路</p>
                    </li>
                    <li class="button" data-image="/static/images/15238695641197.png">
                        <p>第52话 练习</p>
                    </li>
                    <li class="button" data-image="/static/images/15238695587056.png">
                        <p>第51话 放松效果</p>
                    </li>
                    <li class="button" data-image="/static/images/15238695455400.png">
                        <p>第50话 好胜心</p>
                    </li>
                    <li class="button" data-image="/static/images/15238695303404.png">
                        <p>第49话 相遇的两人</p>
                    </li>
                    <li class="button" data-image="/static/images/15238695116848.png">
                        <p>第48话 消化</p>
                    </li>
                    <li class="button" data-image="/static/images/15238694919055.png">
                        <p>第47话 摘花</p>
                    </li>
                    <li class="button" data-image="/static/images/15238694807202.png">
                        <p>第46话 小心叮咛</p>
                    </li>
                    <li class="button" data-image="/static/images/15141865196092.jpg">
                        <p>第45话 好人有好报</p>
                    </li>
                    <li class="button" data-image="/static/images/15141865133555.jpg">
                        <p>第44话 被宠坏的鸟儿</p>
                    </li>
                    <li class="button" data-image="/static/images/15141865055652.jpg">
                        <p>第43话 海对岸的双峰</p>
                    </li>
                    <li class="button" data-image="/static/images/15238681581968.png">
                        <p>第42话 美丽的发声练习</p>
                    </li>
                    <li class="button" data-image="/static/images/15141864889884.jpg">
                        <p>第41话 强力副歌的美学</p>
                    </li>
                    <li class="button" data-image="/static/images/15141864804128.jpg">
                        <p>第40话 热血女子</p>
                    </li>
                    <li class="button" data-image="/static/images/15141864695842.jpg">
                        <p>第39话 恶作剧之风</p>
                    </li>
                    <li class="button" data-image="/static/images/15141864584520.jpg">
                        <p>第38话 禅之心</p>
                    </li>
                    <li class="button" data-image="/static/images/15141864261972.jpg">
                        <p>第37话 枪械迷</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863772178.jpg">
                        <p>第36话 爱与正义的风纪纠察</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863639911.jpg">
                        <p>第35话 帅哥特集</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863483422.jpg">
                        <p>第34话 保护</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863365919.jpg">
                        <p>第33话 窗边美景</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863229129.jpg">
                        <p>第32话 机动性↑↑</p>
                    </li>
                    <li class="button" data-image="/static/images/15141863126912.jpg">
                        <p>第31话 祈祷</p>
                    </li>
                    <li class="button" data-image="/static/images/15141862946556.jpg">
                        <p>第30话 努力</p>
                    </li>
                    <li class="button" data-image="/static/images/15141862776588.jpg">
                        <p>第29话 溜冰</p>
                    </li>
                    <li class="button" data-image="/static/images/15141856059568.jpg">
                        <p>第28话 逃跑</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555888980.jpg">
                        <p>第27话 突刺</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555798773.jpg">
                        <p>第26话 咖喱饭</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555704112.jpg">
                        <p>第25话 坠入爱河之日</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555585712.jpg">
                        <p>第24话 饲料</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555499746.jpg">
                        <p>第23话 刚才的事</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555411780.jpg">
                        <p>第22话 天体观测</p>
                    </li>
                    <li class="button" data-image="/static/images/15107324142966.png">
                        <p>第21话 空腹</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555219572.jpg">
                        <p>第20话 斗舞2</p>
                    </li>
                    <li class="button" data-image="/static/images/15047555087747.jpg">
                        <p>第19话 斗舞</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554922924.jpg">
                        <p>第18话 点单</p>
                    </li>
                    <li class="button" data-image="/static/images/15088959186072.jpg">
                        <p>第17话 学园偶像祭最快决定战!!</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554774569.jpg">
                        <p>第16话 历史</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554596230.jpg">
                        <p>第15话 量尺寸</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554481319.jpg">
                        <p>第14话 艺术</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554315307.jpg">
                        <p>第13话 读书</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554203428.jpg">
                        <p>第12话 演出前</p>
                    </li>
                    <li class="button" data-image="/static/images/15047554108052.jpg">
                        <p>第11话 特技</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553982300.jpg">
                        <p>第10话 学园偶像祭最快决定战！！</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553849518.jpg">
                        <p>第9话 给我醒过来！！</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553728636.jpg">
                        <p>第8话 秘密调查</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553611357.jpg">
                        <p>第7话 炎</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553496606.jpg">
                        <p>第6话 野生</p>
                    </li>
                    <li class="button" data-image="/static/images/15047553374283.jpg">
                        <p>第5话 诞生</p>
                    </li>
                    <li class="button" data-image="/static/images/15047551242040.jpg">
                        <p>第4话 优雅的放学后</p>
                    </li>
                    <li class="button" data-image="/static/images/15047551145790.jpg">
                        <p>第3话 情人节</p>
                    </li>
                    <li class="button" data-image="/static/images/15047551059201.jpg">
                        <p>第2话 游泳</p>
                    </li>
                    <li class="button" data-image="/static/images/15047550942873.jpg">
                        <p>第1话 开始！</p>
                    </li>
                </ul>
            </div>
        </div>
        <div id="image-container">
            <div id="image-scroll">
                <img id="image" src="/static/images/15238702168776.png" width="444" height="850">
            </div>
        </div>
        <div id="large-image-container">
            <div id="large-image-scroll">
                <img id="large-image" width="888" height="1700">
            </div>
        </div>
    </div>
    <script src="/static/js/perfect-scrollbar.min.js"></script>
    <script src="/static/js/button.js"></script>
    <script>
        var largeImageContainer = document.getElementById('large-image-container');

        var listScroll = document.getElementById('list-scroll');
        var imageScroll = document.getElementById('image-scroll');
        var largeImageScroll = document.getElementById('large-image-scroll');

        var image = document.getElementById('image');
        var largeImage = document.getElementById('large-image');

        new PerfectScrollbar(listScroll, { suppressScrollX: true });
        var imageScrollbar = new PerfectScrollbar(imageScroll, { suppressScrollX: true });
        var largeImageScrollbar = new PerfectScrollbar(largeImageScroll, { suppressScrollX: true });

        function resetImageScroll() {
            imageScroll.scrollTop = 0;
            imageScrollbar.update();
        }

        function showLargeImage() {
            if (largeImageContainer.style.display === 'block') {
                return;
            }

            largeImage.src = image.src;
            largeImageContainer.style.display = 'block';

            largeImageScroll.scrollTop = 0;
            largeImageScrollbar.update();
        }

        function hideLargeImage() {
            largeImageContainer.style.display = 'none';
        }

        image.addEventListener('load', resetImageScroll);
        image.addEventListener('click', showLargeImage);

        largeImageContainer.addEventListener('click', hideLargeImage);

        var buttons = document.getElementsByClassName('button');
        for (var i = 0; i < buttons.length; ++i) {
            Button.initialize(buttons[i], function () {
                var url = this.getAttribute('data-image');
                if (url.replace(/^.*\//, '') !== image.src.replace(/^.*\//, '')) {
                    image.src = url;
                } else {
                    resetImageScroll();
                }
            });
        }
    </script>
</body>

</html>
{{ end }}