ローディング画面のデザインを変更

Robot-Inventor · Jun 20, 2020 · 2fff02d · 2fff02d
1 parent 952e852
commit 2fff02d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 25 deletions.
diff --git a/changelog.md b/changelog.md
@@ -31,6 +31,10 @@ Edition: ORIZIN Agent HTML
 |開発コードネーム|メジャー（マイナー）バージョンのコードネーム|
 
 ## リリース
+### [v3.0.77.3dev-Crane] - 2020-06-20
+#### 変更
+- ローディング画面のデザインを変更しました。
+
 ### [v3.0.76.2dev-Crane] - 2020-06-20
 #### 追加
 - 6通りの応答を辞書に追加し，応答は全てで1726通りになりました。

diff --git a/resource/html/splash.html b/resource/html/splash.html
@@ -22,7 +22,7 @@
     </head>
     <body>
         <main>
-            <div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg3); color: gray; text-align: center;">
+            <div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg); text-align: center;">
                 <div class="loading_div">
                     <img src="../image/loading1.svg" class="loading">
                     <div class="fulfilling-bouncing-circle-spinner">
@@ -36,34 +36,34 @@
                         }
 
                         .fulfilling-bouncing-circle-spinner {
-                            height: 20vmin;
-                            width: 20vmin;
+                            height: 40vmin;
+                            width: 40vmin;
                             position: relative;
-                            top: 15vmin;
-                            left: calc(50vw - 10vmin);
+                            top: calc(50vh - 20vmin);
+                            left: calc(50vw - 20vmin);
                             animation: fulfilling-bouncing-circle-spinner-animation infinite 3s ease;
                         }
 
                         .fulfilling-bouncing-circle-spinner .orbit {
-                            height: 20vmin;
-                            width: 20vmin;
+                            height: 40vmin;
+                            width: 40vmin;
                             position: absolute;
                             top: 0;
                             left: 0;
                             border-radius: 50%;
-                            border: calc(20vmin * 0.03) solid var(--theme_color);
+                            border: calc(30vmin * 0.03) solid var(--theme_color);
                             animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 3s ease;
                             opacity: 0;
                         }
 
                         .fulfilling-bouncing-circle-spinner .circle {
-                            height: 20vmin;
-                            width: 20vmin;
+                            height: 40vmin;
+                            width: 40vmin;
                             color: var(--theme_color);
                             display: block;
                             border-radius: 50%;
                             position: relative;
-                            border: calc(20vmin * 0.1) solid var(--theme_color);
+                            border: calc(30vmin * 0.1) solid var(--theme_color);
                             animation: fulfilling-bouncing-circle-spinner-circle-animation infinite 3s ease;
                             transform: rotate(0deg) scale(1);
                             opacity: 0;
@@ -145,14 +145,13 @@
                             }
                         }
                     </style>
-                    <div class="message">
-                        <h1>ORIZIN Agent HTML</h1>
-                        <h2>Now Loading... Please waite.</h2><br>
-                        Preloading and cacheing...
+                    <h1 id="program_name">ORIZIN Agent HTML</h1>
+                    <p id="now_loading">
+                        Now Loading. Please waite...
                         <noscript>
-                            <br>******JavaScriptが無効になっています。ブラウザの設定で有効にしてください。******
+                            <br><b>JavaScriptが無効になっています。ブラウザの設定で有効にしてください。</b>
                         </noscript>
-                    </div>
+                    </p>
                 </div>
             </div>
         </main>
@@ -166,19 +165,40 @@ <h2>Now Loading... Please waite.</h2><br>
             }
 
             .loading {
-                width: 50vmin;
+                width: 100vmin;
                 position: absolute;
-                top: 0;
-                left: calc((100vw - 50vmin) / 2);
+                top: calc(50vh - 50vmin);
+                left: calc((100vw - 100vmin) / 2);
+                filter: drop-shadow(0 0 1em #ffffffaa);
             }
 
-            .message {
+            #program_name {
                 position: absolute;
-                bottom: 0;
+                text-align: center;
+                width: 100vw;
+                top: 50vh;
                 left: 0;
+                transform: translateY(calc(-50% - 0.75em));
+                color: var(--text);
+                font-size: 6vmin;
+                font-variation-settings: "wght" 250;
+                letter-spacing: 0.125em;
+                text-shadow: 0 0 1em white, 0 0 1em white, 0 0 2em white;
+                overflow: visible;
+            }
+
+            #now_loading {
+                position: absolute;
                 text-align: center;
                 width: 100vw;
-                padding-bottom: 2em;
+                top: 80vh;
+                left: 0;
+                transform: translateY(calc(-50% - 0.75em));
+                color: var(--text);
+                font-size: 2.5vmin;
+                font-variation-settings: "wght" 200;
+                letter-spacing: 0.15em;
+                opacity: 0.75;
             }
         </style>
         <script src="../javascript/jquery-3.5.1.min.js"></script>

diff --git a/resource/information.txt b/resource/information.txt
@@ -1,5 +1,5 @@
 Series Name:ORIZIN Agent
 Edition:ORIZIN Agent HTML
-Version:v3.0.76.2dev
+Version:v3.0.77.3dev
 Code Name:Crane
 Date:2020-06-20 JST
diff --git a/update_message.txt b/update_message.txt
@@ -1 +1 @@
-辞書ファイルのアップデートです。
+デザインの修正です。