Merge branch 'add-after-vaccine'

xtetsuji · xtetsuji · commit 107377d0b8ae · 2021-08-21T01:26:47.000+09:00
diff --git a/after-vaccine.html b/after-vaccine.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <title>接種後経過時間</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <script>
+        // 接種日時を設定
+        const injection_date = new Date(2021, 8-1, 17, 16, 40);
+        function parse_ms(ms) {
+            const total_second = Math.floor( ms / 1000 );
+            const day     = Math.floor( total_second / 86400 );
+            const hour    = Math.floor( total_second % 86400 / 3600 );
+            const minute  = Math.floor( total_second % 3600 / 60 );
+            return [day, hour, minute];
+        }
+        function update_message() {
+            const now_date = new Date();
+            const diff = now_date - injection_date;
+            const [day, hour, minute] = parse_ms(diff);
+            const sesshugo = `${day}日と${hour}時間${minute}分` + (
+                day >= 1 ? `（${hour + 24 * day}時間）` : ''
+            );
+            document.getElementById("sesshugo").innerText = sesshugo;
+            document.getElementById("last_update").innerText = now_date.toString();
+            document.getElementById("menekiato").innerText = 14 - day;
+            // TODO: 14 - day <= 0 の場合の表示
+            document.getElementById("toggle_description").addEventListener("click", () => {
+                const style = document.getElementById("description").style
+                if ( style.display !== "block" ) {
+                    style.display = "block";
+                } else {
+                    style.display = "none";
+                }
+            });
+        }
+        addEventListener("load", () => {
+            update_message();
+            setInterval(update_message, 60 * 1000);
+        });
+    </script>
+    <style>
+        body {
+            font-size: 24pt;
+        }
+        #sesshugo {
+            font-weight: bold;
+            font-size: 1.5em;
+        }
+        #description {
+            border: 1px solid green;
+            display: none;
+        }
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #000;
+                color: #888
+            }
+        }
+    </style>
+</head>
+<body>
+<div>接種後<br><span id="sesshugo">...</span><br>経過しました。</div>
+<div>免疫が付くまであと<span id="menekiato">...</span>日</div>
+<hr>
+<div>Last Update: <span id="last_update"></span></div>
+
+<div><legend><button id="toggle_description">▼説明</button></legend></div>
+<p id="description">時間はHTMLに直接書かれています。使う方はダウンロードしてその箇所を書き換えてローカルで開いて使用して下さい。</p>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@ <h1>xtetsuji/html-javascript-tinyapps</h1>
     <li><a href="kachimai-download.html">kachimai-download.html</a> - 十勝毎日新聞電子版の指定日付のアクセス・ダウンロード用（そのブラウザで要事前ログイン）</li>
     <li><a href="tweet-count.html">tweet-count.html</a> - Twitter向け（？）の風変わりな文字数カウント</li>
     <li><a href="copy-per-line.html">copy-per-line.html</a> - クリップボード行ごとコピー支援</li>
+    <li><a href="after-vaccine.html">after-vaccine.html</a> - ワクチン接種後何日？</li>
 </ul>
 
 </body>
