index.html

﻿<!-- 

##########################################
               Deemo 复刻
         「古树旋律游戏界面复刻」
##########################################

Designed by Mashiro.

所有素材版权为雷亞遊戲（Rayark Inc.）所有。

https://github.com/mashirozx/deemo

-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Deemo 复刻 - by Mashiro</title>
    <meta charset="utf-8">
    <meta name="description" content="「Deemo 曲绘集 Online」">
    <meta name="keywords" content="Deemo, 复刻, Mashiro, 曲封">
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
    <meta property="og:url" content="https://deemo.shino.cc">
    <meta property="og:image" content="/apple-touch-icon.png">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Deemo 复刻 - by Mashiro">
    <meta property="og:site_name" content="deemo.shino.cc">
    <meta property="og:description" content="Deemo 复刻 - by Mashiro">
    <meta property="og:locale" content="zh_CN">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="style.css">
    <style>
        html,
        body {
            background-color: #fff;
        }

        mashiro,
        .bt {
            opacity: 0
        }

    </style>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-100439904-6"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-100439904-6');

    </script>

</head>

<body>
    <mashiro>
        <div class="slideshow-container">
            
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01dedication.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01long_summer.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01oceanus.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01snowscape.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/adpiano01white_palette.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/AI01creamstew.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/AI02ienakunaru.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/AI03image.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/AI04kireigoto.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/AI05newworld.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/aioi_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/angelicsphere.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/atlantis_love.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/beyond.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_0.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_10.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_11.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_12.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_2.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_4.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_5.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_6.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_7.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_8.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/booksprites_9.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/chai_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/chapter_k2_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic01.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic02.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic03.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic04.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic05.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic06.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic07.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic08.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic09.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic10.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic11.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic12.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic13.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic14.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/classic15.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/corsskiminonamae.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/cranky14bunnies.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crankyanotherkatharsis.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crankybooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crankyconflict.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crankyeternity.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crankyrainofflowers.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crossbooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crosshyakkaryouran.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/crossknotsway.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/deemo1a.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/deemo1b.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/deemo2_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dreamofdreams.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dream_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/drg.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01caramelcustard.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01eltina.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01hanomai.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01noblesseoblige.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/dspiano01samishigariyanogaisen.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/electron_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/entrance.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/ephemeral.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/etudebooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/evolution_era.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/fable.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/fallingears.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitousadaptation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitouscydral.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitouserua.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitouskoqurow.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitousrhuzerv.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/feryquitous_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/findinghome.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/flowersaboveyourhead.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkotareyouready.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkotdusktodawn.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkotengachop.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkotflp.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkotfunky.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/funkot_booksprite.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/futureworld.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/heyboy_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/holyknight.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/hua_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/ice10.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/icedetermination.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/icepandora.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/icereunion.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/icescherzo.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/ice_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/Ihatetty_c2.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/imagining.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/invite_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/jstar_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k01thewaywewere.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k02thesanctuary.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k03theredcoronation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k04forbiddencodex.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k05knightoffirmament.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k06lordofcrimsonrose.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k07predawn.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k08thefallenbloom.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k09whereyouarenot.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/k10music.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/land_of_giants_s.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/leviathan.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/liberame.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/lightpo_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/lion_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/littlecorgisdream.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/livingintheone.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowbooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowlapse.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowlatent.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowleverage.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowliberation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/llowloneliness.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/lupbooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/luplament.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/luplargo.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/luplegion.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/luplost.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/luplunatic.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/m2uxnicode_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/magnolia.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/melody_of_elves.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/metal_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02aturtlesheart.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02cerebrite.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02imaginedflight.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02spacecolony.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili02ufo.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03bathtubmermaid.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03dk.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03ga1ahad.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03ikutoshitsuki.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mili03milk.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/mirror_night_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN01loadstar.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN02lune.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN03moonhalo.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN04stellar.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN05wickedfate.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2cradle.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2deerstalker.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2nya.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2sagashimono.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2sandglass.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2yoake.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/MN2_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/moon_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/morningdrops.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/niflheimr.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/NMST01farewell.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/NMST02winter.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/NMST03fluffiepartie.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/NMST04snowflakes.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/NMST05kouyou.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/nmst_booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/npe_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/paperplane.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/parousia.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/past_the_stargazing_season.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/peach_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/pilot_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/precipitation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/pulse.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/purewhite.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01delivery.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01encumbrance.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01expansion.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01mellow.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rabpit01overlong.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01aciculignosa.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01bloomingspring.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01lifill.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01rethefullmoonworld.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac01toysetude.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02aliceinsecretcircus.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02anticipation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02graduationsong.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02lili.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac02sprout.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03levelzero.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03memoryofskyblue.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03pupa.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03ragnarok.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac03tonextpage.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04butterfly.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04diary.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04fissure.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04theyseemlikeblossomsyet.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac04wishuponashootingstar.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05finalrush.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05likeasianspirit.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05paraline.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05scherzo.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac05yoakeomatsukiminouta.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06ancientrose.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06carnation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06delusion.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06frozenemotion.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rac06scent.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rainmem_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/Randall.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/recollections.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/reverse_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/rosetta.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/runawayrun.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sacred.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/saika_c3.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sairai.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01angelfalse.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01imp.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01magicatz.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01poemofrapture.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sakuzyo01rondofor97keys.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsara105.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsara105_fc.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaraamberwishes.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaraaragami.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsarabooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaralostinthenowhere.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaramarigold.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaraparodiasonatina.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsarareverence.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsarathewayhome.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaravalledeloscaidos.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/samsaravoiceofcell.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sandglass_sprite.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_chin.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_friction.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_platinum.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_race.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_rungorun.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/sc_sanctity.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/seasideroad.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/shatteredmemories2booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/shatteredmemoriesbooksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/suspenseful_third_day.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/suspenseful_third_day_fc.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/theblackcase.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/theletter.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/thetruththatyouleave.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeforgotten.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01anewhome.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01booksprites.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01moneymoney.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01penglaimovement.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01phubbing.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/timeline01protest.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/untitle2.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/utopia_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20anima.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20fluquor.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20fluquor_fc.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20lapromesse.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20legacy.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20myosotis.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20sakuraironoyume.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20sakuraironoyume_fc.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20sunset.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v20thebeautifulmonnlight.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v21altale.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v22farewellwaltz.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v22revival.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v22runladsrun.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v22startingwind.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v23arkofdesire.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v23futarimiti.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v23nightfall.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v23shadowinthemirror.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v23yaoyue.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v24guardian.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v24h.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v24kimiganokoshitasekaide.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v24postscript.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v24rainbowsend.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v30infinitepuzzle.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v30springsnowflake.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v30treeofdreams.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v30whiterain.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v31littlelove.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v31lonelypianist.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v31miracle.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v31waltz.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v32aquamarine.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v32go.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v32ruins.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/v32whitefantasy.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/veritas.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/vvv_c.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/walkingbythesea.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/will.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/witchs_invitation.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/xue_wu.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetamidelicious.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetbooksprite.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetmerrygoroundgirl.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetmonokuronokaze.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetorca.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yamajetsincerity.png">
        </div>
       <div class="mySlides fade">
            <img class="deemo-draw" data-src="tiny/yubikiri_genman.png">
        </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <div class="dear-alice">To the lovely, lonely stranger<br>And my dearest brother,<br>Hans.
            <p>-Alice</p>
        </div>
        <div class="signature">Crafted with <img src="src/love.svg" style="height:0.8em;width:0.8em" alt="love" /> by <a href="https://2heng.xin" target="_blank">Mashiro</a></div>

        <div class="photo bt">
            <a href="javascript:screenshot();">
                <div class="pop"><img src="src/camera.svg" class="css-1bgbwga" data-reactid="50"></div>
            </a>
        </div>

        <div class="iplayer bt">
            <div class="speaker" id="speaker"></div>
            <img src="src/pause.svg" style="width:0;height:0;">
        </div>

        <div class="random bt">
            <a href="javascript:randomClick();">
                <div class="pop"><img src="src/sand-clock.svg" class="sand-clock" data-reactid="50"></div>
            </a>
        </div>

        <div class="github bt">
            <a href="https://github.com/mashirozx/deemo" target="_blank">
                <div class="pop"><img src="src/github.svg" class="css-1bgbwga" data-reactid="50"></div>
            </a>
        </div>

        <div class="weibo bt">
            <a href="https://weibo.com/2960337711" target="_blank">
                <div class="pop"><img src="src/weibo.svg" class="css-1bgbwga" data-reactid="50"></div>
            </a>
        </div>

        <div class="wordpress bt">
            <a href="https://2heng.xin/" target="_blank">
                <div class="pop"><img src="src/wordpress.svg" class="css-1bgbwga" data-reactid="50"></div>
            </a>
        </div>

        <div id="screenshot" class="overlay">
            <div class="save bt">
                <a href="javascript:downloadCanvas();">
                    <div class="pop"><img src="src/save.svg" class="css-1bgbwga" data-reactid="50"></div>
                </a>
            </div>
            <div class="popup">
                <a class="close" href="#">&times;</a>
                <div id="scerrn-content"></div>
            </div>
        </div>
        <div id="message" class="overlay">
            <div class="popup normal">
                <a class="close" href="#">&times;</a>
                <div class="content">
                    <p>建议用屏幕宽度大于1100px的电脑访问。手机的话把屏幕<img src="src/rotate.svg" style="height:1em;width:1em" />试试？</p>
                    <p>正常视图是这样的~</p>
                    <img src="src/Capture.png" style="width:100%">
                </div>
            </div>
        </div>
    </mashiro>

    <audio loop="loop" id="player">
      <source src="src/Riin - Alice good night.mp3" type="audio/mpeg">
    </audio>

    <script src="src/main.js"></script>

    <script>
        "use strict";

        if (screen.width <= 1100) {
            location.href = "#message";
        }

        var slideIndex = 1;
        var imgTargets = document.getElementsByClassName("deemo-draw");

        Pace.on('done', function() {
            document.getElementsByTagName("mashiro")[0].style.opacity = "1";
            true ? randomSlide() : showSlides(slideIndex);
            for (var i = 0; i < document.getElementsByClassName("bt").length; i++) {
                document.getElementsByClassName("bt")[i].style.opacity = "1";
            }
        });

        // Timeout
        var int = self.setInterval("randomSlide()", 6000);

        function plusSlides(n) {
            showSlides(slideIndex += n);
            try {
                int = window.clearInterval(int);
                document.getElementsByClassName("sand-clock")[0].style.transform = "rotate(0deg)";
                randomFlag = 1;
            } catch (err) {}
        }

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            // control
            if (slideIndex == 0) {
                slideIndex = imgTargets.length;
            } else if (slideIndex == imgTargets.length + 1) {
                slideIndex = 1;
            }
            // title
            document.title = (slideIndex) + '/' + slides.length + ' | Deemo 复刻 - by Mashiro';
            // load
            lazyload(slideIndex - 1);
            // hide
            for (i = 0; i < slides.length; i++) {
                slides[i].style.opacity = 0;
            }
            // check load condition
            imgLoad((slideIndex - 1), function() {
                // display
                slides[slideIndex - 1].style.opacity = 1;
            });
            // preload
            //if (slideIndex < imgTargets.length) {
            //    lazyload(slideIndex - 1 + 1);
            //}
            //if (slideIndex > 1) {
            //    lazyload(slideIndex - 1 - 1);
            //}
        }

        // check picture load condition
        function imgLoad(n, callback) {
            var timer = setInterval(function() {
                if (imgTargets[n].complete) {
                    callback(imgTargets[n]);
                    clearInterval(timer);
                }
            }, 50)
        }

        function lazyload(n) {
            try {
                imgTargets[n].setAttribute("src", imgTargets[n].getAttribute("data-src"));
            } catch (err) {
                console.log("error = " + n);
            }
        }

        // Random
        function randomSlide() {
            var rand = Math.floor(Math.random() * (imgTargets.length + 1));
            showSlides(slideIndex = rand);
        }

        var randomFlag = 0;

        function randomClick() {
            if (randomFlag == 1) {
                int = self.setInterval("randomSlide()", 6000);
                document.getElementsByClassName("sand-clock")[0].style.transform = "rotate(20deg)";
                randomSlide();
                randomFlag = 0;
            } else {
                int = window.clearInterval(int);
                document.getElementsByClassName("sand-clock")[0].style.transform = "rotate(0deg)";
                randomFlag = 1;
            }
        }

        function saveFile(url) {
            var date = new Date();
            var filename = "deemo-";
            filename = filename + date.getTime();
            filename = filename + ".png";
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = function() {
                var a = document.createElement('a');
                a.href = window.URL.createObjectURL(xhr.response);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                //a = null;
            };
            xhr.open('GET', url);
            xhr.send();
        }

        function downloadCanvas() {
            var src = document.getElementsByTagName("canvas");
            var img = src[src.length - 1].toDataURL("image/png");
            saveFile(img);
        }

        function screenshot() {
            var sholdHide = new Array("photo", "iplayer", "random", "weibo", "github", "wordpress", "signature", "prev", "next");
            for (var i = 0; i < sholdHide.length; i++) document.getElementsByClassName(sholdHide[i])[0].style.visibility = 'hidden';

            let opt = {
                async: true,
                useCORS: true
            };
            html2canvas(document.body, opt).then(function(canvas) {
                document.getElementById("scerrn-content").appendChild(canvas);
                location.href = "#screenshot";
            });

            for (var i = 0; i < sholdHide.length; i++) document.getElementsByClassName(sholdHide[i])[0].style.visibility = 'visible';
        }

        // Player
        function hasClass(el, className) {
            if (el.classList)
                var e = el.classList.contains(className);
            else
                var e = new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
            return e;
        }

        function addClass(el, className) {
            if (el.classList)
                el.classList.add(className);
            else
                el.className += ' ' + className;
        }

        function removeClass(el, className) {
            if (el.classList)
                el.classList.remove(className);
            else
                el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }

        var getaudio = document.getElementById("player");
        var audiostatus = 'off';
        var speaker = document.getElementById("speaker");

        speaker.addEventListener("click", function() {
            // on touchend?

            if (!hasClass(speaker, "speakerplay")) {
                if (audiostatus == 'off') {
                    addClass(speaker, 'speakerplay');
                    getaudio.load();
                    getaudio.play();
                    audiostatus = 'on';
                    return false;
                } else if (audiostatus == 'on') {
                    addClass(speaker, 'speakerplay');
                    getaudio.play()
                }
            } else if (hasClass(speaker, "speakerplay")) {
                getaudio.pause();
                removeClass(speaker, 'speakerplay');
                audiostatus = 'on';
            }
        });

        document.getElementById("player").addEventListener("ended", function() {
            removeClass(speaker, 'speakerplay');
            audiostatus = 'off';
        });

    </script>
</body>

</html>