From 1fd8aa6ec4098896f8e412c64ae6a3924615fec9 Mon Sep 17 00:00:00 2001 From: Nonsense Date: Sun, 9 Feb 2025 23:59:21 +1100 Subject: [PATCH] Update tree3d.html --- tree3d.html | 208 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 192 insertions(+), 16 deletions(-) diff --git a/tree3d.html b/tree3d.html index a34f01e..a42c835 100644 --- a/tree3d.html +++ b/tree3d.html @@ -28,25 +28,194 @@ pointer-events: none; z-index: 10; } + #config-panel { + position: fixed; + background: rgba(0, 0, 0, 0.85); + color: white; + font-family: sans-serif; + font-size: 12px; + z-index: 100; + transition: transform 0.3s ease; + border-radius: 8px 0 0 8px; + padding: 12px; + right: 0; + width: 220px; + max-width: 80vw; + } + + /* Desktop positioning */ + @media (min-width: 601px) { + #config-panel { + top: 20px; + max-height: calc(100vh - 40px); + } + #config-panel.minimized { + transform: translateX(calc(100% - 30px)); + } + } + + /* Mobile positioning */ + @media (max-width: 600px) { + #config-panel { + bottom: 20px; + max-height: 60vh; + transform-origin: bottom right; + } + #config-panel.minimized { + transform: translateX(100%); + } + .minimize-btn { + position: absolute; + left: -30px; + top: 0; + width: 30px; + height: 40px; + background: rgba(0, 0, 0, 0.85); + border-radius: 8px 0 0 8px; + } + } + + .config-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + font-weight: bold; + } + .minimize-btn { + background: none; + border: none; + color: white; + cursor: pointer; + padding: 5px; + font-size: 18px; + } + .control-group { + margin-bottom: 12px; + } + .control-group label { + display: block; + margin-bottom: 4px; + font-size: 11px; + } + .control-group input[type="range"] { + width: 100%; + margin: 2px 0; + } + .value-display { + float: right; + font-size: 11px; + opacity: 0.8; + } + + /* Scrollable content area */ + .controls-container { + overflow-y: auto; + max-height: calc(100% - 30px); + padding-right: 5px; + } + + /* Custom scrollbar */ + .controls-container::-webkit-scrollbar { + width: 4px; + } + .controls-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + } + .controls-container::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + border-radius: 2px; + }
Tap to grow a new tree
+ +
+ +
+
+ Tree Controls +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+