Update index.html

index.html

@@ -8,15 +8,26 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      background-color: #f0f0f0;
-      font-family: sans-serif;
+      background-color: #0a0a12;
+      color: #00ffcc;
+      font-family: 'Courier New', monospace;
       padding: 20px;
+      margin: 0;
+    }
+
+    h1 {
+      color: #00aaff;
+      text-shadow: 0 0 5px #0066ff;
+      border-bottom: 1px solid #0066ff;
+      padding-bottom: 10px;
     }
 
     video {
       max-width: 100%;
       height: auto;
       margin-bottom: 10px;
+      border: 2px solid #0066ff;
+      box-shadow: 0 0 10px #0066ff;
     }
 
     .controls {
@@ -25,11 +36,15 @@
       gap: 15px;
       width: 100%;
       max-width: 800px;
+      background-color: #0f0f1a;
+      padding: 20px;
+      border: 1px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
     }
 
     .control-group {
       display: flex;
-      flex-direction: row;      /* 横並び */
+      flex-direction: row;
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
@@ -37,25 +52,62 @@
     }
 
     .control-group label {
-      white-space: nowrap;      /* 改行しない */
-      min-width: 100px;         /* ラベル幅を統一 */
+      white-space: nowrap;
+      min-width: 100px;
       text-align: right;
+      color: #00ccff;
     }
 
     input[type="range"] {
-      flex-grow: 1;             /* スライダーが伸びて余白を埋める */
+      flex-grow: 1;
+      -webkit-appearance: none;
+      height: 8px;
+      background: #001133;
+      border-radius: 5px;
+      outline: none;
     }
 
-    input[type="number"] {
-      width: 80px;
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: #00aaff;
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 0 5px #00aaff;
+    }
+
+    input[type="number"], select {
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 5px;
+      font-family: 'Courier New', monospace;
     }
 
     button {
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 8px 15px;
+      cursor: pointer;
+      font-family: 'Courier New', monospace;
+      transition: all 0.3s;
       align-self: flex-start;
     }
 
+    button:hover {
+      background-color: #0066ff;
+      color: #000;
+      box-shadow: 0 0 10px #0066ff;
+    }
+
     select {
       width: 300px;
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 5px;
     }
 
     .video-selector {
@@ -64,6 +116,30 @@
       align-items: center;
       gap: 10px;
     }
+
+    input[type="checkbox"] {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: #001133;
+      border: 1px solid #0066ff;
+      position: relative;
+    }
+
+    input[type="checkbox"]:checked {
+      background: #0066ff;
+      box-shadow: 0 0 5px #0066ff;
+    }
+
+    input[type="checkbox"]:checked::after {
+      content: "✓";
+      position: absolute;
+      color: #000;
+      font-size: 14px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   </style>
 
 </head>