Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on Apr 16

Commit

4438c93

verified ·

1 Parent(s): 9b41d83

Update index.html

Browse files

Files changed (1) hide show

index.html +113 -230

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,243 +323,126 @@
                 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>
@@ -799,14 +682,14 @@
       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; // ラインスナップを無効に
         }

   <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;
             }
         }
   </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>
       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; // ラインスナップを無効に
         }