Update index.html

index.html

@@ -13,6 +13,7 @@
             padding: 20px;
             line-height: 1.6;
             user-select: none;
+            overflow-x: auto;
         }
         
         .container {
@@ -20,23 +21,24 @@
             margin: 0 auto;
             background: #ffffff;
             border: 2px solid #000000;
-            padding: 30px;
+            padding: clamp(15px, 4vw, 30px);
+            box-sizing: border-box;
         }
         
         h1 {
             text-align: center;
-            margin-bottom: 40px;
+            margin-bottom: clamp(20px, 5vw, 40px);
             color: #000000;
             font-weight: bold;
-            font-size: 24px;
+            font-size: clamp(18px, 4vw, 24px);
             border-bottom: 2px solid #000000;
             padding-bottom: 15px;
         }
         
         .controls {
             display: flex;
-            gap: 30px;
-            margin-bottom: 40px;
+            gap: clamp(15px, 3vw, 30px);
+            margin-bottom: clamp(20px, 5vw, 40px);
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
@@ -44,8 +46,11 @@
         
         .control-group {
             background: #ffffff;
-            padding: 15px 20px;
+            padding: clamp(10px, 2vw, 20px);
             border: 1px solid #000000;
+            min-width: 200px;
+            flex: 1 1 auto;
+            max-width: 300px;
         }
         
         .control-group label {
@@ -54,17 +59,20 @@
             font-weight: bold;
             color: #000000;
             text-align: center;
-            font-size: 14px;
+            font-size: clamp(12px, 2.5vw, 14px);
         }
         
         .dimension-inputs {
             display: flex;
             gap: 10px;
             align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
         }
         
         .dimension-inputs input {
-            width: 50px;
+            width: clamp(40px, 8vw, 50px);
+            height: clamp(36px, 8vw, 44px);
             padding: 8px;
             border: 1px solid #000000;
             background: #ffffff;
@@ -72,32 +80,37 @@
             font-weight: bold;
             text-align: center;
             font-family: 'Consolas', 'Courier New', monospace;
+            font-size: clamp(12px, 2.5vw, 14px);
+            box-sizing: border-box;
         }
         
         .dimension-inputs .label {
-            font-size: 14px;
+            font-size: clamp(12px, 2.5vw, 14px);
             color: #000000;
             margin: 0 5px;
+            flex-shrink: 0;
         }
         
         .stats {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 40px;
-            flex-wrap: wrap;
-            justify-content: center;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: clamp(10px, 2vw, 20px);
+            margin-bottom: clamp(20px, 5vw, 40px);
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
         }
         
         .stat-box {
             background: #ffffff;
-            padding: 15px 20px;
+            padding: clamp(10px, 2vw, 20px);
             border: 1px solid #000000;
             text-align: center;
-            min-width: 120px;
+            min-width: 100px;
         }
         
         .stat-box .label {
-            font-size: 12px;
+            font-size: clamp(10px, 2vw, 12px);
             margin-bottom: 8px;
             color: #666666;
             text-transform: uppercase;
@@ -105,26 +118,88 @@
         }
         
         .stat-box .value {
-            font-size: 24px;
+            font-size: clamp(18px, 4vw, 24px);
             font-weight: bold;
             color: #000000;
         }
         
         .main-visualization {
             display: flex;
-            gap: 40px;
-            margin-bottom: 40px;
+            flex-direction: column;
+            gap: clamp(20px, 4vw, 40px);
+            margin-bottom: clamp(20px, 5vw, 40px);
+        }
+        
+        /* Large screens: side-by-side layout */
+        @media (min-width: 1024px) {
+            .main-visualization {
+                flex-direction: row;
+            }
+            
+            .cube-section {
+                flex: 1;
+                min-width: 500px;
+            }
+            
+            .info-panel {
+                flex: 0 0 350px;
+            }
+        }
+        
+        /* Medium screens: adjust proportions */
+        @media (min-width: 768px) and (max-width: 1023px) {
+            .main-visualization {
+                flex-direction: row;
+            }
+            
+            .cube-section {
+                flex: 1.2;
+                min-width: 400px;
+            }
+            
+            .info-panel {
+                flex: 0.8;
+                min-width: 280px;
+            }
+        }
+        
+        /* Small screens: stack vertically */
+        @media (max-width: 767px) {
+            .main-visualization {
+                flex-direction: column;
+            }
+            
+            .cube-section {
+                width: 100%;
+                order: 1;
+            }
+            
+            .info-panel {
+                width: 100%;
+                order: 2;
+                max-height: none;
+            }
+            
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            
+            .control-group {
+                max-width: none;
+                width: 100%;
+            }
         }
         
         .cube-section {
-            flex: 1;
-            min-width: 600px;
+            display: flex;
+            flex-direction: column;
         }
         
         .section-title {
             text-align: center;
             margin-bottom: 20px;
-            font-size: 18px;
+            font-size: clamp(16px, 3vw, 18px);
             font-weight: bold;
             color: #000000;
             border-bottom: 1px solid #000000;
@@ -132,28 +207,31 @@
         }
         
         .interaction-guide {
-            display: flex;
-            justify-content: space-around;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: clamp(8px, 2vw, 15px);
             margin-bottom: 20px;
-            padding: 15px;
+            padding: clamp(10px, 2vw, 15px);
             background: #f8f8f8;
             border: 1px solid #cccccc;
-            font-size: 12px;
+            font-size: clamp(10px, 2vw, 12px);
         }
         
         .interaction-item {
             text-align: center;
             color: #333333;
+            padding: 5px;
         }
         
         .interaction-item .icon {
-            font-size: 18px;
+            font-size: clamp(14px, 3vw, 18px);
             margin-bottom: 5px;
             display: block;
         }
         
         .cube-container {
-            height: 500px;
+            height: clamp(300px, 50vw, 500px);
+            width: 100%;
             perspective: 1200px;
             display: flex;
             justify-content: center;
@@ -163,6 +241,8 @@
             margin-bottom: 20px;
             cursor: grab;
             overflow: hidden;
+            position: relative;
+            box-sizing: border-box;
         }
         
         .cube-container:active {
@@ -177,8 +257,8 @@
         
         .block-cube {
             position: absolute;
-            width: 70px;
-            height: 70px;
+            width: clamp(50px, 8vw, 70px);
+            height: clamp(50px, 8vw, 70px);
             background: #ffffff;
             border: 2px solid #000000;
             display: flex;
@@ -209,7 +289,7 @@
         }
         
         .block-label {
-            font-size: 11px;
+            font-size: clamp(9px, 1.5vw, 11px);
             line-height: 1.2;
             margin-bottom: 6px;
             font-weight: bold;
@@ -223,7 +303,7 @@
         }
         
         .thread-count {
-            font-size: 9px;
+            font-size: clamp(7px, 1.2vw, 9px);
             color: #333333;
             font-weight: bold;
             text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
@@ -235,16 +315,22 @@
         }
         
         .info-panel {
-            flex: 0 0 350px;
             background: #ffffff;
             border: 2px solid #000000;
-            padding: 25px;
+            padding: clamp(15px, 3vw, 25px);
             max-height: 600px;
             overflow-y: auto;
+            box-sizing: border-box;
+        }
+        
+        @media (max-width: 767px) {
+            .info-panel {
+                max-height: 400px;
+            }
         }
         
         .info-title {
-            font-size: 18px;
+            font-size: clamp(16px, 3vw, 18px);
             font-weight: bold;
             margin-bottom: 25px;
             text-align: center;
@@ -255,13 +341,13 @@
         
         .info-item {
             margin-bottom: 20px;
-            padding: 15px;
+            padding: clamp(10px, 2vw, 15px);
             background: #f8f8f8;
             border-left: 4px solid #000000;
         }
         
         .info-item .label {
-            font-size: 12px;
+            font-size: clamp(10px, 2vw, 12px);
             margin-bottom: 8px;
             color: #666666;
             text-transform: uppercase;
@@ -269,30 +355,30 @@
         }
         
         .info-item .value {
-            font-size: 16px;
+            font-size: clamp(14px, 2.5vw, 16px);
             font-weight: bold;
             color: #000000;
         }
         
         .thread-detail-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(clamp(20px, 4vw, 26px), 1fr));
             gap: 1px;
             margin-top: 15px;
-            padding: 12px;
+            padding: clamp(8px, 2vw, 12px);
             background: #f0f0f0;
             border: 1px solid #cccccc;
         }
         
         .thread-detail {
-            width: 24px;
-            height: 24px;
+            width: clamp(20px, 4vw, 24px);
+            height: clamp(20px, 4vw, 24px);
             background: #ffffff;
             border: 1px solid #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 8px;
+            font-size: clamp(6px, 1.5vw, 8px);
             font-weight: bold;
             cursor: pointer;
             transition: all 0.2s ease;
@@ -312,11 +398,12 @@
         .instructions {
             text-align: center;
             margin-top: 20px;
-            font-size: 14px;
+            font-size: clamp(12px, 2vw, 14px);
             color: #666666;
             border: 1px solid #cccccc;
-            padding: 15px;
+            padding: clamp(10px, 2vw, 15px);
             background: #f8f8f8;
+            line-height: 1.5;
         }
         
         .current-view {
@@ -324,11 +411,29 @@
             top: 10px;
             right: 10px;
             background: rgba(255, 255, 255, 0.9);
-            padding: 8px 12px;
+            padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 12px);
             border: 1px solid #cccccc;
-            font-size: 11px;
+            font-size: clamp(9px, 1.5vw, 11px);
             color: #666666;
         }
+        
+        /* Touch device improvements */
+        @media (pointer: coarse) {
+            .thread-detail {
+                min-width: 28px;
+                min-height: 28px;
+            }
+            
+            .dimension-inputs input {
+                min-height: 44px;
+                min-width: 50px;
+            }
+            
+            .block-cube {
+                min-width: 60px;
+                min-height: 60px;
+            }
+        }
     </style>
 </head>
 <body>