Update index.html

Author: Yamonov

index.html

@@ -10,6 +10,7 @@
             background-color: #fff;
             margin: 0;
             padding: 0;
+            font-size: 75%;
         }
         .container {
             width: 96vw;
@@ -31,24 +32,24 @@
             display: flex;
             gap: 20px;
             margin-bottom: 30px;
+            flex-wrap: wrap;
         }
-        .controls-left {
-            flex: 1 1 380px;
-            min-width: 320px;
+        .controls-left,
+        .controls-right {
+            flex: 1 1 500px;
+            min-width: 500px;
             display: flex;
             flex-direction: column;
+        }
+        .controls-left {
             gap: 0;
         }
         .controls-right {
-            flex: 2 2 440px;
-            min-width: 340px;
-            display: flex;
-            flex-direction: column;
             gap: 20px;
         }
         .control-group {
             background-color: #f8f8f8;
-            padding: 15px;
+            padding: 8px;
             border-radius: 8px;
             border: 1px solid #ddd;
         }
@@ -61,13 +62,15 @@
         .slider-container {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 6px;
+            flex-wrap: wrap;
+            min-height: 24px;
         }
         input[type="range"] {
             flex: 1;
-            height: 6px;
+            height: 4px;
             background: #ddd;
-            border-radius: 3px;
+            border-radius: 2px;
             outline: none;
             -webkit-appearance: none;
         }
@@ -88,18 +91,18 @@
             border: none;
         }
         .value-display {
-            min-width: 50px;
+            min-width: 40px;
             text-align: center;
             background-color: white;
-            padding: 4px 8px;
+            padding: 1px 4px;
             border-radius: 4px;
             border: 1px solid #ccc;
-            font-size: 14px;
+            font-size: 10px;
         }
         .density-inputs {
             display: flex;
             flex-direction: column;
-            gap: 18px;
+            gap: 8px;
         }
         .density-box {
             width: 30px;
@@ -112,16 +115,24 @@
             vertical-align: middle;
         }
         .density-input {
-            display: flex;
+            display: grid;
+            grid-template-columns: 72px 1fr auto auto;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
+        }
+        .density-input label {
+            text-align: right;
+        }
+        .density-input input[type="range"] {
+            min-width: 120px;
         }
         .density-input input[type="number"] {
             width: 60px;
-            padding: 8px;
+            padding: 4px;
             border: 1px solid #ccc;
             border-radius: 4px;
             text-align: center;
+            font-size: 10px;
         }
         .canvas-container {
             text-align: center;
@@ -225,21 +236,21 @@ <h1>USM簡易シミュレーター</h1>
                     <label>強さ (Amount)</label>
                     <div class="slider-container">
                         <input type="range" id="amount" min="0" max="500" value="100" step="1">
-                        <div class="value-display" id="amountValue">100%</div>
+                        <input type="number" class="value-display" id="amountValue" min="0" max="500" value="100">
                     </div>
                 </div>
                 <div class="control-group">
                     <label>半径 (Radius)</label>
                     <div class="slider-container">
                         <input type="range" id="radius" min="0.1" max="5" step="0.1" value="1">
-                        <div class="value-display" id="radiusValue">1.0</div>
+                        <input type="number" class="value-display" id="radiusValue" min="0.1" max="5" step="0.1" value="1.0">
                     </div>
                 </div>
                 <div class="control-group">
                     <label>閾値 (Threshold)</label>
                     <div class="slider-container">
                         <input type="range" id="threshold" min="0" max="50" value="0">
-                        <div class="value-display" id="thresholdValue">0</div>
+                        <input type="number" class="value-display" id="thresholdValue" min="0" max="50" value="0">
                     </div>
                 </div>
             </div>
@@ -452,9 +463,9 @@ <h1>USM簡易シミュレーター</h1>
 		// 値を表示
 		startDensityValue.textContent = startDensity;
 		endDensityValue.textContent = endDensity;
-		amountValue.textContent = amount + '%';
-		radiusValue.textContent = radius.toFixed(1);
-		thresholdValue.textContent = threshold;
+		amountValue.value = amount;
+		radiusValue.value = radius.toFixed(1);
+		thresholdValue.value = threshold;
 		// 濃度ボックスの色を更新
 		startDensityBox.style.background = `rgb(${startDensity},${startDensity},${startDensity})`;
 		endDensityBox.style.background = `rgb(${endDensity},${endDensity},${endDensity})`;
@@ -585,9 +596,41 @@ <h1>USM簡易シミュレーター</h1>
 	// 各スライダー等の値変更時にグラフ再描画
 	startDensityInput.addEventListener('input', drawGraph);
 	endDensityInput.addEventListener('input', drawGraph);
-	amountSlider.addEventListener('input', drawGraph);
-	radiusSlider.addEventListener('input', drawGraph);
-	thresholdSlider.addEventListener('input', drawGraph);
+	amountSlider.addEventListener('input', () => {
+	    amountValue.value = amountSlider.value;
+	    drawGraph();
+	});
+	radiusSlider.addEventListener('input', () => {
+	    radiusValue.value = radiusSlider.value;
+	    drawGraph();
+	});
+	thresholdSlider.addEventListener('input', () => {
+	    thresholdValue.value = thresholdSlider.value;
+	    drawGraph();
+	});
+
+	// input[type="number"]にinputイベント追加
+	amountValue.addEventListener('input', () => {
+	    let v = Math.max(0, Math.min(500, parseInt(amountValue.value) || 0));
+	    amountValue.value = v;
+	    amountSlider.value = v;
+	    drawGraph();
+	});
+	// radiusValueはinputイベントではなくchangeイベントで制御
+	radiusValue.addEventListener('change', () => {
+	    let v = parseFloat(radiusValue.value);
+	    if (isNaN(v)) return;
+	    v = Math.max(0.1, Math.min(5, v));
+	    radiusValue.value = v;
+	    radiusSlider.value = v;
+	    drawGraph();
+	});
+	thresholdValue.addEventListener('input', () => {
+	    let v = Math.max(0, Math.min(50, parseInt(thresholdValue.value) || 0));
+	    thresholdValue.value = v;
+	    thresholdSlider.value = v;
+	    drawGraph();
+	});
 
 	// ウインドウリサイズ時にキャンバスサイズ調整と再描画
 	window.addEventListener('resize', drawGraph);