setup.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3
   4 <head>
   5     <meta charset="UTF-8">
   6     <title>kit - 初期設定</title>
   7     <script src="./system/jquery.min.js"></script>
   8     <link rel="stylesheet" href="./system/jquery-ui-1.12.1/jquery-ui.min.css">
   9     <script src="./system/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  10     <link href="./fa/css/all.css" rel="stylesheet">
  11     <link href="./system/noto.css" rel="stylesheet">
  12     <link href="./system/kitstrap/kitstrap.css" rel="stylesheet">
  13     <style type="text/css">
  14         *::selection {
  15             background: rgba(0, 0, 0, .0);
  16         }
  17
  18         body {
  19             font-family: 'Noto Sans JP', sans-serif;
  20             background: #000000;
  21             color: #ffffff;
  22             font-size: 20px;
  23             text-shadow: 0px 2px 3px black;
  24         }
  25
  26         #kit-wallpaper {
  27             position: fixed;
  28             top: 0px;
  29             left: 0px;
  30             height: 100%;
  31             width: 100%;
  32             background: url("./system/wallpaper/11.jpg");
  33             background-size: cover;
  34             transform: scale(1.1);
  35             filter: blur(10px);
  36         }
  37
  38         section {
  39             position: fixed;
  40             padding: 20px;
  41             box-sizing: border-box;
  42             width: 100%;
  43             text-align: center;
  44         }
  45
  46         h3 {
  47             font-size: 36px;
  48             font-weight: 100;
  49         }
  50
  51         input {
  52             box-sizing: border-box;
  53             border: 2px solid white;
  54             font-size: 20px;
  55             padding: 7px;
  56             background: rgba(0, 0, 0, .3);
  57             color: #ffffff;
  58             border-radius: 6px;
  59             font-family: 'Noto Sans JP', sans-serif;
  60             box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, .3);
  61             max-width: 100%;
  62         }
  63
  64         input::selection {
  65             background: dodgerblue;
  66             color: white;
  67         }
  68     </style>
  69     <script type="text/javascript">
  70         $(document).ready(Load);
  71         function Load() {
  72             $("section").hide();
  73             $("#1").show("drop", 500);
  74
  75             $("#config-username").val( localStorage.getItem("kit-username") )
  76             $("#config-usercolor").val( localStorage.getItem("kit-user-color") )
  77             $("#config-password").val( localStorage.getItem("kit-password") )
  78         }
  79         function page(str) {
  80             $("section").fadeOut(500);
  81             $("#" + str).show("drop", 500);
  82
  83             if( str == "e" ){
  84                 $("#view-username").text( $("#config-username").val() );
  85                 $("#view-usercolor").text( $("#config-usercolor").val() );
  86                 if( $("#config-password").val().length > 0 ){
  87                     $("#view-password").text("パスワードを設定します");
  88                 }
  89                 else $("#view-password").text("設定しません");
  90             }
  91         }
  92         function end() {
  93             localStorage.setItem("kit-username", $("#config-username").val());
  94             localStorage.setItem("kit-user-color", $("#config-usercolor").val());
  95             localStorage.setItem("kit-password", $("#config-password").val());
  96             localStorage.setItem("kit-setup-flag", true);
  97             location.href = "index.html";
  98         }
  99         function skip() {
 100             $('section').text('今回以降、初期設定の画面は表示されません。');
 101             setTimeout( function() {
 102                 $('section').text('kitを起動します。お待ち下さい');
 103                 localStorage.setItem("kit-setup-flag", true);
 104                 setTimeout( function() { location.href = "index.html"; }, 1000);
 105             }, 1000);
 106         }
 107     </script>
 108 </head>
 109
 110 <body>
 111     <div id="kit-wallpaper"></div>
 112     <section id="1">
 113         <h3><span class="fa fa-cogs"></span> kitの初期設定</h3>
 114         <p>kitを選んでいただきありがとうございます</p>
 115         <p>初期設定を行います</p>
 116         <a class="kit-button" onclick="page('2')">次へ</a>
 117         <p class="kit-font-s m-t-xl">
 118             今は初期設定をスキップして<br>
 119             あとから「設定」アプリで設定を行うこともできます。
 120         </p>
 121         <li>
 122             <a href="./index.html" class="kit-hl-alt">初期設定をスキップ</a>
 123         </li>
 124         <li>
 125             <a onclick="skip()" class="kit-hl-alt">以降表示しない</a>
 126         </li>
 127     </section>
 128
 129     <section id="2">
 130         <h3><span class="fa fa-user"></span> ユーザー名</h3>
 131         <p>ユーザーを識別する名前として表示されます</p>
 132         <input type="text" name="" id="config-username">
 133         <p>
 134             <a class="kit-button" onclick="page('1')">前へ</a>
 135             <a class="kit-button" onclick="page('3')">次へ</a>
 136         </p>
 137     </section>
 138
 139     <section id="3">
 140         <h3><span class="fa fa-palette"></span> ユーザーカラー</h3>
 141         <p>ユーザーが持つ色です。ロック画面などで表示されます</p>
 142         <input type="text" name="" id="config-usercolor">
 143         <p>
 144             <a class="kit-button" onclick="page('2')">前へ</a>
 145             <a class="kit-button" onclick="page('4')">次へ</a>
 146         </p>
 147     </section>
 148
 149     <section id="4">
 150         <h3><span class="fa fa-key"></span> パスワード</h3>
 151         <p>ロックされた状態からログインするときに必要です。</p>
 152         <p>空欄にするとパスワードを設定しません</p>
 153         <input type="password" name="" id="config-password">
 154         <p>
 155             <a class="kit-button" onclick="page('3')">前へ</a>
 156             <a class="kit-button" onclick="page('e')">次へ</a>
 157         </p>
 158     </section>
 159
 160     <section id="e">
 161         <h3><span class="fa fa-toolbox"></span> 初期設定は終わりです</h3>
 162         <p>以下の設定内容でよろしければ、下のボタンを押してkitの使用を開始します。</p>
 163         <p>
 164                 <span class="fa fa-user"></span>ユーザー名：<span id="view-username"></span><br>
 165                 <span class="fa fa-palette"></span>ユーザーカラー：<span id="view-usercolor"></span><br>
 166                 <span class="fa fa-key"></span>パスワード：<span id="view-password"></span>
 167         </p>
 168         <p>
 169             <a class="kit-button" onclick="page('4')">前へ</a>
 170             <a class="kit-button" onclick="end()">初期設定を完了</a>
 171         </p>
 172     </section>
 173 </body>
 174
 175 </html>