<div class="tutorial_background" style="display:none;">
    <div class="tutorial_modal">
        <div class="tutorial">
            <div class="page" id="page1">
                <h1>チュートリアルへようこそ！</h1>
                <p style="text-align: center;">ここでは、uwuzuのチュートリアルを行うことができます！<br>
                チュートリアルでは、uwuzuについてや、基本的な使用方法を学ぶことができます！</p>
                <div class="btm_area">
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page2" style="display:none;">
                <h2>そもそも、uwuzuって？</h2>
                <p>簡潔に言えば、ミニブログSNSです！<br>
                アカウント登録をしたユーザーが「ユーズ」という投稿を行うことができ、他のユーザーがいいねをしたり、フォローなどをして交流することができます。<br>
                <br>
                基本的な使用方法はこれまでのミニブログSNSと似ているものです。<br>
                <br>
                ここで一つ知っていただきたいことがあります！<br>
                uwuzuは、SNSという場所を作るためのソフトウェアの名前です。<br>
                つまりどういうことかというと、あなたが使っているこのサービス自体は"uwuzu"ではなく"uwuzuを使って作られているコミュニティ"ということになります！<br>
                <br>
                uwuzuはどなたでもサーバーを構築できるという特徴があり、誰でも簡単にuwuzuを使用したサーバーを立ててコミュニティを作ることができます！<br>
                <br>
                そして、今あなたがチュートリアルを見ているこのサーバーもuwuzuを使用して構築されたコミュニティの一つです。
                </p>
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page3" style="display:none;">
                <h2>ユーズって何？</h2>
                <p>uwuzu上では、投稿のことを「ユーズ」と呼んでいます。<br>
                このユーズは、他のSNSで言う「ノート」や、「ツイート」と同じような意味を持つ言葉です。<br>
                <br>
                ユーズをするには、タイムラインの一番上にある「いまどうしてる？」という入力欄に投稿したい内容を入力して、「ユーズする」ボタンを押すことでユーズができます！<br>
                <br>
                投稿されたユーズはタイムラインに時系列順にならんで他のユーザーに表示されます！
                </p>
                <img src="../img/tutorial_image/image1.png">
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page4" style="display:none;">
                <h2>ユーズを知ってみる！</h2>
                <p>先ほど紹介したユーズにできる機能を紹介します！</p>
                <img src="../img/tutorial_image/image2.png">
                <p>- いいね … ユーズに「いいね！」できます！<br>
                    - リユーズ … ユーズを拡散したり引用してユーズできます！<br>
                    - 返信 … ユーズに返信をできます！もちろん返信への返信も可能です<br>
                    - ブックマーク … ユーズを自分のブックマークに登録できます！<br>
                    - 追記 … ユーズに追記を行えます！後日談やミスの訂正にどうぞ！<br>
                    - その他 … シェアやユーズの削除などその他の操作を行えます！</p>
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page5" style="display:none;">
                <h2>タイムラインの仕組み</h2>
                <p>uwuzuには主に3つのタイムラインがあります！<br>
                uwuzuの「ホーム」を開いてデフォルトで開かれるタイムラインは「ローカル」と書かれています。<br>
                そして、タイムライン上部のメニューから「フォロー」というタイムラインや「おすすめ」も見ることが可能です。<br>
                それぞれの機能はこんな感じ！<br>
                <br>
                - おすすめ … おすすめタイムラインの略称で、人気のユーズや自分が多くいいねしているユーザーのユーズなどが表示されます！<br>
                - ローカル … ローカルタイムラインの略称で、同じサーバーにいる全員のユーズが表示されます。(uwuzu v1.3.5以前はLTL)<br>
                - フォロー … フォロータイムラインの略称で、自分のフォローしているユーザーのユーズが表示されます。(uwuzu v1.3.5以前はFTL)<br>
                </p>
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page6" style="display:none;">
                <h2>NSFWとは</h2>
                <p>もし、このサーバーのルールに、センシティブな内容を投稿する際にはNSFWを設定する必要があるというものがあれば、あなたはセンシティブな内容のユーズをするさいにNSFWを設定する必要があります。<br>
                <br>
                NSFWは、Not Safe For Workの略であり、解釈としては「仕事中や学校などで見るべきではないぞっ！」って感じのことになります。<br>
                <br>
                センシティブな内容の投稿をする際はサーバーのルールを守って投稿画面より「目に斜線」ボタンを押してNSFWを設定してくださいね
                </p>
                <img src="../img/tutorial_image/image3.png">
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page7" style="display:none;">
                <h2>このサーバーで少し過ごして居づらかったら...</h2>
                <p>安心してください、uwuzuにはいろんなサーバーがあり、自分にあったサーバーをさがし、登録することができます！<br>
                <br>
                <br>
                えっ？自分の好みにあったサーバーがないって...？<br>
                <br>
                大丈夫、uwuzuは無料で配布されているソフトウェアです。<br>
                少しのWebサーバーの知識とインターネットの使い方がわかっていれば大丈夫！<br>
                あなたが自分だけのサーバーを立てることができちゃいます！<br>
                <br>
                また、uwuzu v1.3.6以上を導入しているサーバーであれば、サーバー間でのアカウントの移行が可能です！
                </p>
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="next">次へ</div>
                </div>
            </div>

            <div class="page" id="page8" style="display:none;">
                <h1>お疲れ様でした！</h1>
                <p style="text-align: center;">チュートリアルは終了です！<br>
                まだ、このチュートリアルで紹介できていないuwuzuの機能や使い方も多くあるので、もっとuwuzuについて知りたい方はぜひdocs.uwuzu.xyzをご覧ください。</p>
                <div class="btm_area">
                    <div class="iro_btn backcolor" id="back">戻る</div>
                    <div class="iro_btn" id="end">閉じる</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $(".tutorial_background").on('click', function(e) {
        if(e.target !== e.currentTarget) return;
        $(".tutorial_background").hide();
    });

    var page = 1;
    $(document).on("click", "#next", function () {
        $("#page"+page+"").hide();
        page++
        $("#page"+page+"").show();
    });

    $(document).on("click", "#back", function () {
        $("#page"+page+"").hide();
        page = page-1
        $("#page"+page+"").show();
    });

    $(document).on("click", "#end", function () {
        $(".tutorial_background").hide();
    });
});
</script>