Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on Apr 15

Commit

9b41d83

verified ·

1 Parent(s): 4c34935

Update index.html

Browse files

Files changed (1) hide show

index.html +230 -113

index.html CHANGED Viewed

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
   <link rel="icon" href="icon.png" type="image/png">
   <style>
-  body {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -323,126 +323,243 @@
                 opacity: 0;
             }
         }
   </style>
 </head>
 <body>
   <div id="ripple-container">
   </div>
   <script>
-  document.addEventListener('DOMContentLoaded', function() {
-              const container = document.getElementById('ripple-container');
-              function createRipple() {
-                  const ripple = document.createElement('div');
-                  ripple.classList.add('ripple');
-                  // ランダムな位置
-                  const posX = Math.random() * 100;
-                  const posY = Math.random() * 100;
-                  // ランダムなサイズとアニメーション時間
-                  const maxSize = 400 + Math.random() * 500;
-                  const duration = 3 + Math.random() * 3;
-                  // 半透明の薄い水色のバリエーション
-                  const hue = 190 + Math.random() * 20 - 10; // 水色を中心に少し変化
-                  const saturation = 80 + Math.random() * 15;
-                  const lightness = 70 + Math.random() * 20;
-                  const opacity = 0.3 + Math.random() * 0.3;
-                  ripple.style.left = `${posX}%`;
-                  ripple.style.top = `${posY}%`;
-                  ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
-                  ripple.style.animationDuration = `${duration}s`;
-                  // キーフレームを動的に変更
-                  const animationName = `ripple-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                  ripple.style.animationName = animationName;
-                  const style = document.createElement('style');
-                  style.innerHTML = `
-                      @keyframes ${animationName} {
-                          0% {
-                              width: 0;
-                              height: 0;
-                              opacity: ${opacity};
-                          }
-                          100% {
-                              width: ${maxSize}px;
-                              height: ${maxSize}px;
-                              opacity: 0;
-                          }
-                      }
-                  `;
-                  document.head.appendChild(style);
-                  container.appendChild(ripple);
-                  // アニメーション終了後に要素を削除
-                  ripple.addEventListener('animationend', function() {
-                      ripple.remove();
-                      style.remove();
-                  });
-              }
-              // 最初の波紋をいくつか作成
-              for (let i = 0; i < 8; i++) {
-                  setTimeout(createRipple, i * 600);
               }
-              // 定期的に新しい波紋を作成
-              setInterval(createRipple, 1200);
-              // クリックでも波紋を作成
-              document.addEventListener('click', function(e) {
-                  createRippleAtPosition(e.clientX, e.clientY);
-              });
-              function createRippleAtPosition(x, y) {
-                  const ripple = document.createElement('div');
-                  ripple.classList.add('ripple');
-                  const maxSize = 400 + Math.random() * 500;
-                  const duration = 3 + Math.random() * 3;
-                  const hue = 190 + Math.random() * 20 - 10;
-                  const saturation = 80 + Math.random() * 15;
-                  const lightness = 70 + Math.random() * 20;
-                  const opacity = 0.3 + Math.random() * 0.3;
-                  ripple.style.left = `${x}px`;
-                  ripple.style.top = `${y}px`;
-                  ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
-                  ripple.style.animationDuration = `${duration}s`;
-                  const animationName = `ripple-click-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                  ripple.style.animationName = animationName;
-                  const style = document.createElement('style');
-                  style.innerHTML = `
-                      @keyframes ${animationName} {
-                          0% {
-                              width: 0;
-                              height: 0;
-                              opacity: ${opacity};
-                          }
-                          100% {
-                              width: ${maxSize}px;
-                              height: ${maxSize}px;
-                              opacity: 0;
-                          }
-                      }
-                  `;
-                  document.head.appendChild(style);
-                  container.appendChild(ripple);
-                  ripple.addEventListener('animationend', function() {
-                      ripple.remove();
-                      style.remove();
-                  });
               }
           });
   </script>
   <h1>ラジオ体操動画プレイヤー
     <br>For Kushihara</h1>
@@ -682,14 +799,14 @@
       subtitleSizeInput.value = size;
       subtitleSize.value = size;
-      // CSS変数で字幕サイズを制御
       document.documentElement.style.setProperty('--subtitle-scale', size);
       // VTTCueのlineプロパティには数値のみを設定（'bottom'は無効）
       const track = subtitleTrackElement.track;
       if (track && track.cues) {
         for (let i = 0; i < track.cues.length; i++) {
-          // 画面下部に表示するため、適切な数値を設定（例: 90）
           track.cues[i].line = 90;
           track.cues[i].snapToLines = false; // ラインスナップを無効に
         }

   <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
   <link rel="icon" href="icon.png" type="image/png">
   <style>
+    body {
       display: flex;
       flex-direction: column;
       align-items: center;
                 opacity: 0;
             }
         }
+    /* ローディングアニメーション */
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      transition: opacity 1s ease-out;
+    }
+    .spinner-box {
+      width: 300px;
+      height: 300px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+    /* 軌道スタイル */
+    .leo {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+    .blue-orbit {
+      width: 165px;
+      height: 165px;
+      border: 1px solid #91daffa5;
+      animation: spin3D 3s linear .2s infinite;
+    }
+    .green-orbit {
+      width: 120px;
+      height: 120px;
+      border: 1px solid #91ffbfa5;
+      animation: spin3D 2s linear 0s infinite;
+    }
+    .red-orbit {
+      width: 90px;
+      height: 90px;
+      border: 1px solid #ffca91a5;
+      animation: spin3D 1s linear 0s infinite;
+    }
+    .white-orbit {
+      width: 60px;
+      height: 60px;
+      border: 2px solid #ffffff;
+      animation: spin3D 10s linear 0s infinite;
+    }
+    .w1 {
+      transform: rotate3D(1, 1, 1, 90deg);
+    }
+    .w2 {
+      transform: rotate3D(1, 2, .5, 90deg);
+    }
+    .w3 {
+      transform: rotate3D(.5, 1, 2, 90deg);
+    }
+    /* キーフレームアニメーション */
+    @keyframes spin3D {
+      from {
+        transform: rotate3d(.5,.5,.5, 360deg);
+      }
+      to {
+        transform: rotate3d(0,0,0, 0deg);
+      }
+    }
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
   </style>
 </head>
 <body>
+  <!-- ローディングオーバーレイ -->
+  <div class="loading-overlay" id="loadingOverlay">
+    <div class="spinner-box">
+      <div class="blue-orbit leo"></div>
+      <div class="green-orbit leo"></div>
+      <div class="red-orbit leo"></div>
+      <div class="white-orbit w1 leo"></div>
+      <div class="white-orbit w2 leo"></div>
+      <div class="white-orbit w3 leo"></div>
+    </div>
+  </div>
   <div id="ripple-container">
   </div>
   <script>
+    // ローディングアニメーションをフェードアウト
+    window.addEventListener('load', function() {
+      setTimeout(function() {
+        const loadingOverlay = document.getElementById('loadingOverlay');
+        loadingOverlay.style.opacity = '0';
+        setTimeout(function() {
+          loadingOverlay.style.display = 'none';
+        }, 1000); // フェードアウト完了後に非表示にする
+      }, 1500); // ページ読み込み後1.5秒でフェードアウト開始
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+      const container = document.getElementById('ripple-container');
+      function createRipple() {
+          const ripple = document.createElement('div');
+          ripple.classList.add('ripple');
+          // ランダムな位置
+          const posX = Math.random() * 100;
+          const posY = Math.random() * 100;
+          // ランダムなサイズとアニメーション時間
+          const maxSize = 400 + Math.random() * 500;
+          const duration = 3 + Math.random() * 3;
+          // 半透明の薄い水色のバリエーション
+          const hue = 190 + Math.random() * 20 - 10; // 水色を中心に少し変化
+          const saturation = 80 + Math.random() * 15;
+          const lightness = 70 + Math.random() * 20;
+          const opacity = 0.3 + Math.random() * 0.3;
+          ripple.style.left = `${posX}%`;
+          ripple.style.top = `${posY}%`;
+          ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
+          ripple.style.animationDuration = `${duration}s`;
+          // キーフレームを動的に変更
+          //Math.random()で 0〜1 のランダムな数を生成。 .toString(36) で36進数（0-9 + a-z）に変換。
+          //.substr(2, 9) で先頭の "0." を除いた部分から9文字取り出し、 結果として英数字のランダムな9文字列を生成。
+          const animationName = `ripple-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+          ripple.style.animationName = animationName;
+          const style = document.createElement('style');
+          style.innerHTML = `
+              @keyframes ${animationName} {
+                  0% {
+                      width: 0;
+                      height: 0;
+                      opacity: ${opacity};
+                  }
+                  100% {
+                      width: ${maxSize}px;
+                      height: ${maxSize}px;
+                      opacity: 0;
+                  }
               }
+          `;
+          document.head.appendChild(style);
+          container.appendChild(ripple);
+          // アニメーション終了後に要素を削除
+          ripple.addEventListener('animationend', function() {
+              ripple.remove();
+              style.remove();
+          });
+      }
+      // 最初の波紋をいくつか作成
+      for (let i = 0; i < 8; i++) {
+          setTimeout(createRipple, i * 600);
+      }
+      // 定期的に新しい波紋を作成
+      setInterval(createRipple, 1200);
+      // クリックでも波紋を作成
+      document.addEventListener('click', function(e) {
+          createRippleAtPosition(e.clientX, e.clientY);
+      });
+      function createRippleAtPosition(x, y) {
+          const ripple = document.createElement('div');
+          ripple.classList.add('ripple');
+          const maxSize = 400 + Math.random() * 500;
+          const duration = 3 + Math.random() * 3;
+          const hue = 190 + Math.random() * 20 - 10;
+          const saturation = 80 + Math.random() * 15;
+          const lightness = 70 + Math.random() * 20;
+          const opacity = 0.3 + Math.random() * 0.3;
+          ripple.style.left = `${x}px`;
+          ripple.style.top = `${y}px`;
+          ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
+          ripple.style.animationDuration = `${duration}s`;
+          const animationName = `ripple-click-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+          ripple.style.animationName = animationName;
+          const style = document.createElement('style');
+          style.innerHTML = `
+              @keyframes ${animationName} {
+                  0% {
+                      width: 0;
+                      height: 0;
+                      opacity: ${opacity};
+                  }
+                  100% {
+                      width: ${maxSize}px;
+                      height: ${maxSize}px;
+                      opacity: 0;
+                  }
               }
+          `;
+          document.head.appendChild(style);
+          container.appendChild(ripple);
+          ripple.addEventListener('animationend', function() {
+              ripple.remove();
+              style.remove();
           });
+      }
+  });
   </script>
   <h1>ラジオ体操動画プレイヤー
     <br>For Kushihara</h1>
       subtitleSizeInput.value = size;
       subtitleSize.value = size;
+      // 字幕サイズを制御
       document.documentElement.style.setProperty('--subtitle-scale', size);
       // VTTCueのlineプロパティには数値のみを設定（'bottom'は無効）
       const track = subtitleTrackElement.track;
       if (track && track.cues) {
         for (let i = 0; i < track.cues.length; i++) {
+          // 画面下部に表示するため、適切な数値を設定。とりあえず90。
           track.cues[i].line = 90;
           track.cues[i].snapToLines = false; // ラインスナップを無効に
         }