<html>

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />

    <!--modules.js-->
    <link href="/modules/flickity/flickity.min.css" rel="stylesheet">
    <script src="/modules/flickity/flickity.custom.js"></script>
    <script src="/modules/lozad/lozad.custom.min.js"></script>
    <script src="/modules/brotlijs/brotli.min.js"></script>
    <script src="/modules/utf8/utf8.min.js"></script>
    <script src="/modules/nanobar/nanobar.min.js"></script>
    <script src="/modules/fromnow/fromnow.min.js"></script>
    <script src="/modules/simpleseo/simple-seo.js"></script>

    <!--my.css-->
    <link href="/css/defualt.css" rel="stylesheet">
    <link href="/css/info-view.css" rel="stylesheet">
    <link href="/css/read-view.css" rel="stylesheet">
    <link href="/css/search-view.css" rel="stylesheet">
    <link href="/css/category-view.css" rel="stylesheet">
    <link href="/css/comment-view.css" rel="stylesheet">
    <link href="/css/start-view.css" rel="stylesheet">
    <link href="/css/init-view.css" rel="stylesheet">

    <!--my.js-->
    <script src="/js/mods/_Utils.js"></script>
    <script src="/js/mods/_Api.js"></script>
    <script src="/js/mods/_Brotli.js"></script>
    <script src="/js/mods/_Lozad.js"></script>
    <script src="/js/mods/_Webstorage.js"></script>
    <script src="/js/info-view.js"></script>
    <script src="/js/read-view.js"></script>
    <script src="/js/start-view.js"></script>
    <script src="/js/comment-view.js"></script>
    <script src="/js/category-view.js"></script>
    <script src="/js/init-view.js"></script>
    <script src="/js/main.js"></script>

    <!--Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1">
</head>

<body>
    <!--Popdown-->
    <div id="PopDown">It doesn't work</div>

    <!--Nano bar-->
    <div id="Nano-Bar"></div>

    <!--Start View [Index:0-99]-->
    <div id="Start-View" class="hide-view">
        <!--Main-->
        <div class="main">
            <!--Discover-->
            <div class="discover hide-view">
                <!--Nav-->
                <div class="nav">
                    <a>For (You)</a>
                    <a class="selected">Latest</a>
                    <a>Popular</a>
                </div>
                <!--Content-->
                <div class="content">
                    <div id="foryou-carousel" class="main-carousel">
                        <div class="carousel-cell">
                            <img src="/img/404category.webp">
                        </div>
                        <div class="carousel-cell">
                            <img src="/img/404category.webp">
                        </div>
                    </div>
                    <script>
                        setTimeout( // there is bug which sometimes it wont load, it fix it it, we need a settimeout
                            () => {
                                var elem = document.querySelector('#foryou-carousel');
                                var flkty = new Flickity(elem, {
                                    // options
                                    cellAlign: 'left',
                                    contain: true,
                                    pageDots: false,
                                    prevNextButtons: false,
                                    selectedAttraction: 0.1,
                                    friction: 0.6,
                                    dragThreshold: 20
                                });
                            }, 0
                        );
                    </script>

                    <h1>Latest</h1>
                    <!--DEFUALT.CSS > Manga List Small-->
                    <div class="manga-list-small">
                        <div> <img src="/img/cover.png"> </div>
                        <div> <img src="/img/cover.png"> </div>
                        <div> <img src="/img/cover.png"> </div>
                        <div> <img src="/img/cover.png"> </div>
                        <div> <img src="/img/cover.png"> </div>
                        <div> <img src="/img/cover.png"> </div>
                    </div>
                </div>
            </div>

            <!--Favorites-->
            <div class="favorites hide-view">
                <!--Collection-->
                <h1>Collections</h1>
                <div class="collection-list">
                    <h5 class="selected">Isekai</h5>
                    <h5 class=""></h5>
                    <h5 class="new"><i class="fas fa-plus"></i></h5>
                    <h5 class="new"><input></h5>
                    <h5 class="delete"><i class="fas fa-trash"></i></h5>
                </div>

                <!--Library-->
                <h1>Library</h1>
                <!--DEFUALT.CSS > Manga List Extra-->
                <div class="manga-list-extra">
                    <div>
                        <img src="/img/cover.png">
                        <div class="extra">
                            <p>5 New Chapters</p>
                            <a><i class="fas fa-ellipsis-h"></i></a>
                        </div>
                        <div class="dropdown">
                            <p>Isekai</p>
                            <p>Collection</p>
                        </div>
                    </div>
                    <div>
                        <img src="/img/cover.png">
                        <div class="extra">
                            <p>5 New Chapters</p>
                            <a><i class="fas fa-ellipsis-h"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!--Search-->
            <div class="search hide-view">
                <h1>Search</h1>
                <input placeholder="Search for manga, authors & characters">

                <!--Sort by in V2.0
                <div class="sort-by">
                    <a class="selected">Rank</a>
                    <a>Name</a>
                    <a>Last Updated</a>
                </div>
                -->

                <!--Status-->
                <div class="sort-by">
                    <a class="selected">Any</a>
                    <a>Ongoing</a>
                    <a>Completed</a>
                </div>

                <!--Genre List-->
                <div class="genre-list">
                    <span class="selected">Action</span>
                    <span>Adventure</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                    <span>Isekai</span>
                </div>

                <!--Recent-->
                <h3>Recent</h3>
                <h2>Ur mum</h2>
                <h2>Ur mum</h2>

                <!--Result-->
                <div>
                    <hr>
                    <h4>56 Results</h4>
                    <!--DEFUALT.CSS > Manga List-->
                    <div class="manga-list">
                        <div>
                            <img src="/img/cover.png">
                            <h6>I Have been killing slimes for 300 years</h6>
                            <p>Kisetsu morita & Bento</p>
                        </div>
                        <div>
                            <img src="/img/cover.png">
                            <h6>I Have been killing slimes for 300 years</h6>
                            <p>Kisetsu morita & Bento</p>
                        </div>
                        <div>
                            <img src="/img/cover.png">
                            <h6>I Have been killing slimes for 300 years</h6>
                            <p>Kisetsu morita & Bento</p>
                        </div>
                        <div>
                            <img src="/img/cover.png">
                            <h6>I Have been killing slimes for 300 years</h6>
                            <p>Kisetsu morita & Bento</p>
                        </div>
                        <div>
                            <img src="/img/cover.png">
                            <h6>I Have been killing slimes for 300 years</h6>
                            <p>Kisetsu morita & Bento</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--Setting-->
            <div class="settings">
                <h1>Settings</h1>

                <!--Theme-->
                <h2>Theme</h2>
                <select>
                    <option>Tenshi</option>
                    <option>Seija</option>
                    <option>Momiji</option>
                    <option>Remilia</option>
                    <option>Flandere</option>
                    <option>Patchouli</option>
                    <option>Koishi</option>
                    <option>Youmu</option>
                </select>
                <div class="palette">
                    <div style="background: tomato"></div>
                    <div style="background: tomato"></div>
                    <div style="background: tomato"></div>
                </div>
                <p>Change the color of TenkoReader</p>

                <!--Import/Export Favorties-->
                <h2>Datas</h2>
                <button onclick="WSImportAll()">Import Favorites</button>
                <p>Import favorites and replace all your existing favorites</p>
                <button onclick="WSExportAll()">Export Favorites</button>
                <p>Export your favorites</p>
                <button>Delete everything</button>
                <button class="delete">Click again to confirm <i class="fas fa-trash"></i></button>
                <p>Deletes all your favorites, theme, reads, etc.</p>

                <!--About-->
                <h2>About</h2>
                <p>TenkoReader is a manga reader without the chinese or korean comics. As featured on >>>/g/wdg/</p>
                <p>-</p>
                <p>[Jan. 28 2022] Version Alpha 2 - Image testing, mobile ui testing, themes, other minor enhancements</p>
                <p>[Jan. 26 2022] Version Alpha 1 - Inital ui testing</p>
            </div>
        </div>

        <!--Foot-->
        <div class="foot">
            <div></div>
            <a class="selected"><i class="fas fa-compass"></i> <span>Discover</span></a>
            <a><i class="fas fa-heart"></i> <span>Favorites</span></a>
            <a><i class="fas fa-search"></i> <span>Search</span></a>
            <a><i class="fas fa-cog"></i> <span>Settings</span></a>
            <div></div>
        </div>
    </div>

    <!--Category View [Index:100-199]-->
    <div id="Category-View" class="close">
        <!--Nav-->
        <div class="nav">
            <p><i class="fas fa-chevron-left"></i></p>
            <div>
                <h2>Isekai</h2>
                <h3>44 mangas</h3>
            </div>
            
            <p>40 <i class="far fa-comment-alt"></i></p>
        </div>
        <!--Content-->
        <div class="content">
            <!--DEFUALT.CSS > Manga List-->
            <div class="manga-list">
                <div>
                    <img src="/img/404cover.webp">
                    <h6>I Have been killing slimes for 300 years</h6>
                    <p>Kisetsu morita & Bento</p>
                </div>
                <div>
                    <img src="/img/404cover.webp">
                    <h6>I Have been killing slimes for 300 years</h6>
                    <p>Kisetsu morita & Bento</p>
                </div>
                <div>
                    <img src="/img/404cover.webp">
                    <h6>I Have been killing slimes for 300 years</h6>
                    <p>Kisetsu morita & Bento</p>
                </div>
                <div>
                    <img src="/img/404cover.webp">
                    <h6>I Have been killing slimes for 300 years</h6>
                    <p>Kisetsu morita & Bento</p>
                </div>
                <div>
                    <img src="/img/404cover.webp">
                    <h6>I Have been killing slimes for 300 years</h6>
                    <p>Kisetsu morita & Bento</p>
                </div>
            </div>
        </div>
    </div>

    <!--Info View [Index:200-299]-->
    <div id="Info-View" class="close">
        <!--Tint-->
        <div class="tint"></div>

    </div>

    <!--Read View [Index:300-399]-->
    <div id="Read-View" class="close">
        <!--Overlay-->
        <div class="overlay disable">
            <!--Background Tint-->
            <div class="bg-tint"></div>

            <!--Background Arrows-->
            <div class="bgarrow-left"><i class="fas fa-arrow-left"></i></div>
            <div class="bgarrow-right"><i class="fas fa-arrow-right"></i></div>

            <!--Top-->
            <div class="top">
                <a class="close"><i class="fas fa-arrow-left"></i></a>
                <div class="info">
                    <h3>Title</h3>
                    <P>chapter</P>
                </div>
                <a class="comment">40 <i class="far fa-comment-alt"></i></a>
            </div>
            <div></div>

            <!--bottom-->
            <div class="bottom">
                <a class="back"><i class="fas fa-arrow-left"></i></a>
                <p class="pagenum">20 / 50</p>
                <a class="foward"><i class="fas fa-arrow-right"></i></a>
            </div>
        </div>

        <!--Main-->
        <div class="main">
            <div class="main-carousel" id="read-carousel">
                <div class="carousel-cell">
                    <div class="page double">
                        <img src="/img/404page.webp">
                        <img src="/img/404page.webp">
                    </div>
                </div>
                <div class="carousel-cell">
                    <div class="page ">
                        <img src="/img/404page.webp">
                    </div>
                </div>
                <div class="carousel-cell">
                    <div class="page double">
                        <div class="infolink">
                            <img src="/img/404page.webp">
                            <div class="links">
                                <h1>Detected Links</h1>
                                <p>[QR] <a href="www.google.com">www.google.com</a></p>
                                <p>[Text] <a href="www.google.com">www.google.com</a></p>
                            </div>
                        </div>
                        <img src="/img/test/1.png">
                    </div>
                </div>
                <div class="carousel-cell">
                    <div class="page">
                        <div class="infolink">
                            <img src="/img/404page.webp">
                            <div class="links">
                                <h1>Detected Links</h1>
                                <p class="qr">www.google.com</p>
                                <p class="text">www.google.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                var elem = document.querySelector('#read-carousel');
                var flkty = new Flickity(elem, {
                    // options
                    cellAlign: 'left',
                    pageDots: false,
                    prevNextButtons: false,
                    selectedAttraction: 0.1,
                    friction: 0.6,
                    dragThreshold: 20,
                    initialIndex: 3
                });
                flkty.on('scroll', function (progress) { });

            </script>
        </div>

    </div>

    <!--Comment View [Index:400-499]-->
    <div id="Comment-View" class="hide-view">
        <!--Tint-->
        <div class="tint"></div>

        <!--Content-->
        <div class="content">
            <!--Exit-->
            <a class="exit"><i class="fas fa-times-circle"></i></a>

            <!--Wrapper-->
            <div class="wrapper">
                <h1>Comments</h1>

                <!--Field-->
                <div class="field">
                    <input placeholder="anonymous">
                    <textarea maxlength="100"></textarea>
                    <div class="h-captcha" data-sitekey="74f0ca81-09da-48e7-9f81-dbb1ff11edda"></div>
                    <button>Post</button>
                </div>

                <!--Comments-->
                <div class="comment">
                    <div>
                        <span class="button">[Delete]</span>
                        <span class="name">Anonynous</span>
                        <span>Jan. 23 2021, 7:30 AM</span>
                        <span class="button">[Reply]</span>
                    </div>
                    <p>Heloooo. GOOOOOD SIRRS</p>

                    <div>
                        <div class="field">
                            <input placeholder="anonymous">
                            <textarea maxlength="100"></textarea>
                            <button>Reply</button>
                        </div>
                    </div>

                    <div class="comment">
                        <div>
                            <span class="name">Anonynous</span>
                            <span>Jan. 23 2021, 7:30 AM</span>
                        </div>
                        <p class="quote">Heloooo. GOOOOOD SIRRS</p>
                        <p>Heloooo. GOOOOOD SIRRS</p>
                    </div>
                    <div class="comment">
                        <div>
                            <span class="name deleted">Deleted</span>
                            <span>Jan. 23 2021, 7:30 AM</span>
                        </div>
                        <p class="deleted">Comment was deleted by user</p>
                    </div>


                </div>
                <div class="comment">
                    <div>
                        <span class="name">Anonynous</span>
                        <span>Jan. 23 2021, 7:30 AM</span>
                        <span class="button">[Reply]</span>
                    </div>
                    <p>Shutup fags</p>
                </div>
            </div>
        </div>
        <script>
            var comment_content = document.querySelector('#Comment-View .content');
            comment_content.addEventListener("touchstart", dragStart, false);
            comment_content.addEventListener("touchend", dragEnd, false);
            comment_content.addEventListener("touchmove", drag, false);
            comment_content.addEventListener("mousedown", dragStart, false);
            comment_content.addEventListener("mouseup", dragEnd, false);
            comment_content.addEventListener("mousemove", drag, false);
            var mousedown;
            var initialY;
            var currentY;
            function dragStart(e) {
                if (["P", "INPUT", "TEXTAREA", "SPAN", "BUTTON"].includes(e.target.tagName)) return;
                console.log(e.target.tagName);

                mousedown = true;
                initialY = (e.type === "touchstart") ? e.touches[0].clientY : e.clientY;
            }

            function dragEnd(e) {
                mousedown = false;
                comment_content.style = null;

                if (screen.height * 0.05 < currentY) console.log("Newee");
            }

            function drag(e) {
                if (!mousedown) return;
                currentY = e.clientY - initialY;
                console.log(e.clientY);
                comment_content.style = "transform: translateY(" + currentY + "px); transition: 0s";
            }
        </script>
    </div>

    <!--Init View [Index: 500-599]-->
    <div id="Init-View" class="hide-view">
        <img src="/img/logo.webp">
        <div class="init-nano"></div>
        <script>
            var nanobar = new Nanobar({
                target: document.querySelector('.init-nano')
            });
            nanobar.go(60);
        </script>
        <p>Fetching Server</p>
    </div>
</body>

</html>