OSDN Git Service

Add kitstrap for /setup.html and "Skip Setup" [0.2.1]
[kit/kit.git] / setup.html
index 9ac6095..3f9612f 100644 (file)
@@ -4,11 +4,12 @@
 <head>
     <meta charset="UTF-8">
     <title>kit - 初期設定</title>
-    <script src="system/jquery.min.js"></script>
-    <link rel="stylesheet" href="system/jquery-ui-1.12.1/jquery-ui.min.css">
-    <script src="system/jquery-ui-1.12.1/jquery-ui.min.js"></script>
-    <link href="fa/css/all.css" rel="stylesheet">
-    <link href="system/noto.css" rel="stylesheet">
+    <script src="./system/jquery.min.js"></script>
+    <link rel="stylesheet" href="./system/jquery-ui-1.12.1/jquery-ui.min.css">
+    <script src="./system/jquery-ui-1.12.1/jquery-ui.min.js"></script>
+    <link href="./fa/css/all.css" rel="stylesheet">
+    <link href="./system/noto.css" rel="stylesheet">
+    <link href="./system/kitstrap/kitstrap.css" rel="stylesheet">
     <style type="text/css">
         *::selection {
             background: rgba(0, 0, 0, .0);
@@ -16,8 +17,6 @@
 
         body {
             font-family: 'Noto Sans JP', sans-serif;
-            font-weight: 100;
-            margin: 0;
             background: #000000;
             color: #ffffff;
             font-size: 20px;
             text-align: center;
         }
 
-        h1 {
-            margin: 5px 0;
+        h3 {
+            font-size: 36px;
             font-weight: 100;
         }
 
-        a {
-            display: inline-block;
-            cursor: default;
-            border-radius: 4px;
-            line-height: 200%;
-            background: dodgerblue;
-            color: #ffffff;
-            padding: 1px 10px;
-            margin: 1px 2px;
-            text-decoration: none;
-            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3), inset 0px 0px 2px 0px rgba(255, 255, 255, .5);
-        }
-
-        a:hover {
-            background: rgb(17, 111, 204);
-            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .5), inset 0px 0px 2px 0px rgba(0, 0, 0, .5);
-        }
-
-        a:active {
-            box-shadow: none;
-            padding: 2px 10px 0px 10px;
-        }
-
         input {
+            box-sizing: border-box;
             border: 2px solid white;
             font-size: 20px;
             padding: 7px;
@@ -80,8 +57,8 @@
             color: #ffffff;
             border-radius: 6px;
             font-family: 'Noto Sans JP', sans-serif;
-            font-weight: 100;
             box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, .3);
+            max-width: 100%;
         }
 
         input::selection {
             localStorage.setItem("kit-setup-flag", true);
             location.href = "index.html";
         }
+        function skip() {
+            $('section').text('今回以降、初期設定の画面は表示されません。');
+            setTimeout( function() {
+                $('section').text('kitを起動します。お待ち下さい');
+                localStorage.setItem("kit-setup-flag", true);
+                setTimeout( function() { location.href = "index.html"; }, 1000);
+            }, 1000);
+        }
     </script>
 </head>
 
 <body>
     <div id="kit-wallpaper"></div>
     <section id="1">
-        <h1><span class="fa fa-cogs"></span> kitの初期設定</h1>
+        <h3><span class="fa fa-cogs"></span> kitの初期設定</h3>
         <p>kitを選んでいただきありがとうございます</p>
         <p>初期設定を行います</p>
-        <a onclick="page('2')">次へ</a>
+        <a class="kit-button" onclick="page('2')">次へ</a>
+        <p class="kit-font-s m-t-xl">
+            今は初期設定をスキップして<br>
+            あとから「設定」アプリで設定を行うこともできます。
+        </p>
+        <li>
+            <a href="./index.html" class="kit-hl-alt">初期設定をスキップ</a>
+        </li>
+        <li>
+            <a onclick="skip()" class="kit-hl-alt">以降表示しない</a>
+        </li>
     </section>
 
     <section id="2">
-        <h1><span class="fa fa-user"></span> ユーザー名</h1>
+        <h3><span class="fa fa-user"></span> ユーザー名</h3>
         <p>ユーザーを識別する名前として表示されます</p>
         <input type="text" name="" id="config-username">
         <p>
-            <a onclick="page('1')">前へ</a>
-            <a onclick="page('3')">次へ</a>
+            <a class="kit-button" onclick="page('1')">前へ</a>
+            <a class="kit-button" onclick="page('3')">次へ</a>
         </p>
     </section>
 
     <section id="3">
-        <h1><span class="fa fa-palette"></span> ユーザーカラー</h1>
+        <h3><span class="fa fa-palette"></span> ユーザーカラー</h3>
         <p>ユーザーが持つ色です。ロック画面などで表示されます</p>
         <input type="text" name="" id="config-usercolor">
         <p>
-            <a onclick="page('2')">前へ</a>
-            <a onclick="page('4')">次へ</a>
+            <a class="kit-button" onclick="page('2')">前へ</a>
+            <a class="kit-button" onclick="page('4')">次へ</a>
         </p>
     </section>
 
     <section id="4">
-        <h1><span class="fa fa-key"></span> パスワード</h1>
+        <h3><span class="fa fa-key"></span> パスワード</h3>
         <p>ロックされた状態からログインするときに必要です。</p>
         <p>空欄にするとパスワードを設定しません</p>
         <input type="password" name="" id="config-password">
         <p>
-            <a onclick="page('3')">前へ</a>
-            <a onclick="page('e')">次へ</a>
+            <a class="kit-button" onclick="page('3')">前へ</a>
+            <a class="kit-button" onclick="page('e')">次へ</a>
         </p>
     </section>
 
     <section id="e">
-        <h1><span class="fa fa-toolbox"></span> 初期設定は終わりです</h1>
-        <p>以下の設定内容でよろしければ、下のボタンを押してkitの使用を開始します</p>
+        <h3><span class="fa fa-toolbox"></span> 初期設定は終わりです</h3>
+        <p>以下の設定内容でよろしければ、下のボタンを押してkitの使用を開始します</p>
         <p>
                 <span class="fa fa-user"></span>ユーザー名:<span id="view-username"></span><br>
                 <span class="fa fa-palette"></span>ユーザーカラー:<span id="view-usercolor"></span><br>
                 <span class="fa fa-key"></span>パスワード:<span id="view-password"></span>
         </p>
         <p>
-            <a onclick="page('4')">前へ</a>
-            <a onclick="end()">初期設定を完了する</a>
+            <a class="kit-button" onclick="page('4')">前へ</a>
+            <a class="kit-button" onclick="end()">初期設定を完了</a>
         </p>
     </section>
 </body>
 
-</html>
\ No newline at end of file
+</html>