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