diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/react/.gitignore b/Tests/react (rename)/.gitignore similarity index 100% rename from react/.gitignore rename to Tests/react (rename)/.gitignore diff --git a/react/README.md b/Tests/react (rename)/README.md similarity index 100% rename from react/README.md rename to Tests/react (rename)/README.md diff --git a/react/eslint.config.js b/Tests/react (rename)/eslint.config.js similarity index 100% rename from react/eslint.config.js rename to Tests/react (rename)/eslint.config.js diff --git a/react/index.html b/Tests/react (rename)/index.html similarity index 100% rename from react/index.html rename to Tests/react (rename)/index.html diff --git a/react/package-lock.json b/Tests/react (rename)/package-lock.json similarity index 100% rename from react/package-lock.json rename to Tests/react (rename)/package-lock.json diff --git a/react/package.json b/Tests/react (rename)/package.json similarity index 100% rename from react/package.json rename to Tests/react (rename)/package.json diff --git a/react/public/vite.svg b/Tests/react (rename)/public/vite.svg similarity index 100% rename from react/public/vite.svg rename to Tests/react (rename)/public/vite.svg diff --git a/react/src/App.css b/Tests/react (rename)/src/App.css similarity index 100% rename from react/src/App.css rename to Tests/react (rename)/src/App.css diff --git a/react/src/App.jsx b/Tests/react (rename)/src/App.jsx similarity index 100% rename from react/src/App.jsx rename to Tests/react (rename)/src/App.jsx diff --git a/react/src/PhyllotaxisSystem.jsx b/Tests/react (rename)/src/PhyllotaxisSystem.jsx similarity index 100% rename from react/src/PhyllotaxisSystem.jsx rename to Tests/react (rename)/src/PhyllotaxisSystem.jsx diff --git a/react/src/assets/react.svg b/Tests/react (rename)/src/assets/react.svg similarity index 100% rename from react/src/assets/react.svg rename to Tests/react (rename)/src/assets/react.svg diff --git a/react/src/filters.js b/Tests/react (rename)/src/filters.js similarity index 100% rename from react/src/filters.js rename to Tests/react (rename)/src/filters.js diff --git a/react/src/index.css b/Tests/react (rename)/src/index.css similarity index 100% rename from react/src/index.css rename to Tests/react (rename)/src/index.css diff --git a/react/src/main.jsx b/Tests/react (rename)/src/main.jsx similarity index 100% rename from react/src/main.jsx rename to Tests/react (rename)/src/main.jsx diff --git a/react/src/useFilteredControl.js b/Tests/react (rename)/src/useFilteredControl.js similarity index 100% rename from react/src/useFilteredControl.js rename to Tests/react (rename)/src/useFilteredControl.js diff --git a/react/vite.config.js b/Tests/react (rename)/vite.config.js similarity index 100% rename from react/vite.config.js rename to Tests/react (rename)/vite.config.js diff --git a/tomp4_test/fresh.html b/Tests/tomp4_test/fresh.html similarity index 100% rename from tomp4_test/fresh.html rename to Tests/tomp4_test/fresh.html diff --git a/tomp4_test/phyllotaxis.html b/Tests/tomp4_test/phyllotaxis.html similarity index 100% rename from tomp4_test/phyllotaxis.html rename to Tests/tomp4_test/phyllotaxis.html diff --git a/webGl/New/index.html b/Tests/webGl/New/index.html similarity index 100% rename from webGl/New/index.html rename to Tests/webGl/New/index.html diff --git a/webGl/New/index.js b/Tests/webGl/New/index.js similarity index 100% rename from webGl/New/index.js rename to Tests/webGl/New/index.js diff --git a/webGl/circle fractal/css/styles.css b/Tests/webGl/circle fractal/css/styles.css similarity index 100% rename from webGl/circle fractal/css/styles.css rename to Tests/webGl/circle fractal/css/styles.css diff --git a/webGl/circle fractal/index.html b/Tests/webGl/circle fractal/index.html similarity index 100% rename from webGl/circle fractal/index.html rename to Tests/webGl/circle fractal/index.html diff --git a/webGl/circle fractal/js/helper.js b/Tests/webGl/circle fractal/js/helper.js similarity index 100% rename from webGl/circle fractal/js/helper.js rename to Tests/webGl/circle fractal/js/helper.js diff --git a/webGl/circle fractal/js/index.js b/Tests/webGl/circle fractal/js/index.js similarity index 100% rename from webGl/circle fractal/js/index.js rename to Tests/webGl/circle fractal/js/index.js diff --git a/webGl/circle fractal/js/math.js b/Tests/webGl/circle fractal/js/math.js similarity index 100% rename from webGl/circle fractal/js/math.js rename to Tests/webGl/circle fractal/js/math.js diff --git a/webGl/circle fractal/js/objects.js b/Tests/webGl/circle fractal/js/objects.js similarity index 100% rename from webGl/circle fractal/js/objects.js rename to Tests/webGl/circle fractal/js/objects.js diff --git a/webGl/first test/index.html b/Tests/webGl/first test/index.html similarity index 100% rename from webGl/first test/index.html rename to Tests/webGl/first test/index.html diff --git a/webGl/first test/main.js b/Tests/webGl/first test/main.js similarity index 100% rename from webGl/first test/main.js rename to Tests/webGl/first test/main.js diff --git a/webGl/my-threejs-test/.parcel-cache/6054c31dbe703fb9-BundleGraph-0 b/Tests/webGl/my-threejs-test/.parcel-cache/6054c31dbe703fb9-BundleGraph-0 similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/6054c31dbe703fb9-BundleGraph-0 rename to Tests/webGl/my-threejs-test/.parcel-cache/6054c31dbe703fb9-BundleGraph-0 diff --git a/webGl/my-threejs-test/.parcel-cache/7f973df67467291d-AssetGraph-0 b/Tests/webGl/my-threejs-test/.parcel-cache/7f973df67467291d-AssetGraph-0 similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/7f973df67467291d-AssetGraph-0 rename to Tests/webGl/my-threejs-test/.parcel-cache/7f973df67467291d-AssetGraph-0 diff --git a/webGl/my-threejs-test/.parcel-cache/a8a28560cabca33b-AssetGraph-0 b/Tests/webGl/my-threejs-test/.parcel-cache/a8a28560cabca33b-AssetGraph-0 similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/a8a28560cabca33b-AssetGraph-0 rename to Tests/webGl/my-threejs-test/.parcel-cache/a8a28560cabca33b-AssetGraph-0 diff --git a/webGl/my-threejs-test/.parcel-cache/data.mdb b/Tests/webGl/my-threejs-test/.parcel-cache/data.mdb similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/data.mdb rename to Tests/webGl/my-threejs-test/.parcel-cache/data.mdb diff --git a/webGl/my-threejs-test/.parcel-cache/lock.mdb b/Tests/webGl/my-threejs-test/.parcel-cache/lock.mdb similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/lock.mdb rename to Tests/webGl/my-threejs-test/.parcel-cache/lock.mdb diff --git a/webGl/my-threejs-test/.parcel-cache/requestGraph-8b272c8491111040-0 b/Tests/webGl/my-threejs-test/.parcel-cache/requestGraph-8b272c8491111040-0 similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/requestGraph-8b272c8491111040-0 rename to Tests/webGl/my-threejs-test/.parcel-cache/requestGraph-8b272c8491111040-0 diff --git a/webGl/my-threejs-test/.parcel-cache/requestGraph-nodes-0-8b272c8491111040-0 b/Tests/webGl/my-threejs-test/.parcel-cache/requestGraph-nodes-0-8b272c8491111040-0 similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/requestGraph-nodes-0-8b272c8491111040-0 rename to Tests/webGl/my-threejs-test/.parcel-cache/requestGraph-nodes-0-8b272c8491111040-0 diff --git a/webGl/my-threejs-test/.parcel-cache/snapshot-8b272c8491111040.txt b/Tests/webGl/my-threejs-test/.parcel-cache/snapshot-8b272c8491111040.txt similarity index 100% rename from webGl/my-threejs-test/.parcel-cache/snapshot-8b272c8491111040.txt rename to Tests/webGl/my-threejs-test/.parcel-cache/snapshot-8b272c8491111040.txt diff --git a/webGl/my-threejs-test/dist/index.975ef6c8.js b/Tests/webGl/my-threejs-test/dist/index.975ef6c8.js similarity index 100% rename from webGl/my-threejs-test/dist/index.975ef6c8.js rename to Tests/webGl/my-threejs-test/dist/index.975ef6c8.js diff --git a/webGl/my-threejs-test/dist/index.975ef6c8.js.map b/Tests/webGl/my-threejs-test/dist/index.975ef6c8.js.map similarity index 100% rename from webGl/my-threejs-test/dist/index.975ef6c8.js.map rename to Tests/webGl/my-threejs-test/dist/index.975ef6c8.js.map diff --git a/webGl/my-threejs-test/dist/index.html b/Tests/webGl/my-threejs-test/dist/index.html similarity index 100% rename from webGl/my-threejs-test/dist/index.html rename to Tests/webGl/my-threejs-test/dist/index.html diff --git a/webGl/my-threejs-test/index.html b/Tests/webGl/my-threejs-test/index.html similarity index 100% rename from webGl/my-threejs-test/index.html rename to Tests/webGl/my-threejs-test/index.html diff --git a/webGl/my-threejs-test/package-lock.json b/Tests/webGl/my-threejs-test/package-lock.json similarity index 100% rename from webGl/my-threejs-test/package-lock.json rename to Tests/webGl/my-threejs-test/package-lock.json diff --git a/webGl/my-threejs-test/package.json b/Tests/webGl/my-threejs-test/package.json similarity index 100% rename from webGl/my-threejs-test/package.json rename to Tests/webGl/my-threejs-test/package.json diff --git a/webGl/my-threejs-test/shaders/fragment.glsl b/Tests/webGl/my-threejs-test/shaders/fragment.glsl similarity index 100% rename from webGl/my-threejs-test/shaders/fragment.glsl rename to Tests/webGl/my-threejs-test/shaders/fragment.glsl diff --git a/webGl/my-threejs-test/shaders/vertex.glsl b/Tests/webGl/my-threejs-test/shaders/vertex.glsl similarity index 100% rename from webGl/my-threejs-test/shaders/vertex.glsl rename to Tests/webGl/my-threejs-test/shaders/vertex.glsl diff --git a/webGl/my-threejs-test/src/index.js b/Tests/webGl/my-threejs-test/src/index.js similarity index 100% rename from webGl/my-threejs-test/src/index.js rename to Tests/webGl/my-threejs-test/src/index.js diff --git a/webGl/sams_webgl/index.html b/Tests/webGl/sams_webgl/index.html similarity index 100% rename from webGl/sams_webgl/index.html rename to Tests/webGl/sams_webgl/index.html diff --git a/webGl/sams_webgl/index.js b/Tests/webGl/sams_webgl/index.js similarity index 100% rename from webGl/sams_webgl/index.js rename to Tests/webGl/sams_webgl/index.js diff --git a/docs/css/styles.css b/docs/css/styles.css index 017cdc8..b73a9c1 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -23,13 +23,13 @@ canvas { display: flex; flex-flow: column; height: 100%; - position: absolute; padding: 0px 20px 0px 20px; width: 500px; height: 100vh; background-color: rgba(32, 32, 32, 0.616); overflow-y: scroll; + box-sizing: border-box; } @media screen and (max-width: 768px) { #toolbar { @@ -38,43 +38,11 @@ canvas { } } -#shape-controls { - display: flex; - flex-flow: column; - height: 100%; - - /* position: absolute; */ - padding: 0px 20px 0px 20px; - /* width: 500px; */ - /* height: 100vh; */ - /* background-color: rgba(32, 32, 32, 0.616); */ -} - - - -#shape-controls p{ - color: #e0e0e0; - font-family: Roboto, system-ui; -} #toolbar p{ color: #e0e0e0; font-family: Roboto, system-ui; } -.control-container { - display: flex; - flex-direction: column; - justify-content: center; - margin: 0px 0px 0px 0px; -} - -.filter-div { - display: flex; - flex-direction: column; - justify-content: center; - margin: 0px 0px 0px 24px; -} - .header { text-align: center; font-weight: bold; @@ -149,4 +117,820 @@ canvas { .buttonReset{ background-color: #f4e1e1; +} + +/* ============================================ + Control System Styles + ============================================ */ + +.control-container { + display: flex; + flex-direction: column; + margin: 2px 0; + padding: 6px 8px; + background: rgba(40, 45, 50, 0.5); + border-radius: 4px; +} + +.control-range-container { + padding-bottom: 4px; +} + +.control-main-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 4px; +} + +.control-label-inline { + color: #b0b8c0; + font-family: Roboto, system-ui; + font-size: 12px; + flex: 1; + min-width: 80px; +} + +.control-value { + color: #4a9eff; + font-family: 'Roboto Mono', monospace; + font-size: 12px; + min-width: 50px; + text-align: right; +} + +.control-label { + color: #e0e0e0; + font-family: Roboto, system-ui; + font-size: 13px; + margin-bottom: 2px; +} + +.control-range { + width: 100%; + cursor: pointer; + height: 6px; + -webkit-appearance: none; + appearance: none; + background: #3a4a5a; + border-radius: 3px; + outline: none; +} + +.control-range::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; + height: 14px; + background: #4a9eff; + border-radius: 50%; + cursor: pointer; +} + +.control-range::-moz-range-thumb { + width: 14px; + height: 14px; + background: #4a9eff; + border-radius: 50%; + cursor: pointer; + border: none; +} + +.control-color { + width: 40px; + height: 24px; + border: none; + cursor: pointer; + border-radius: 3px; + padding: 0; +} + +.control-checkbox { + width: 16px; + height: 16px; + cursor: pointer; + accent-color: #4a9eff; +} + +.control-dropdown { + padding: 4px 8px; + background: #2a2a2a; + color: #e0e0e0; + border: 1px solid #555; + border-radius: 3px; +} + +/* Options row with toggle buttons */ +.control-options-row { + display: flex; + gap: 4px; + margin-top: 4px; +} + +.control-toggle-btn { + background: transparent; + border: 1px solid #3a4a5a; + border-radius: 3px; + color: #6a7a8a; + font-size: 10px; + padding: 2px 6px; + cursor: pointer; + transition: all 0.15s ease; +} + +.control-toggle-btn:hover { + background: #3a4a5a; + color: #a0b0c0; +} + +.control-toggle-btn.active { + background: #4a9eff20; + border-color: #4a9eff; + color: #4a9eff; +} + +.control-toggle-btn.has-filters { + background: #4a9eff30; + border-color: #4a9eff; + color: #4a9eff; +} + +/* Settings panel */ +.control-settings-panel { + margin-top: 8px; + padding: 8px; + background: rgba(30, 35, 40, 0.6); + border-radius: 4px; + border-left: 2px solid #5a6a7a; +} + +.setting-row { + display: flex; + align-items: center; + gap: 8px; + margin: 4px 0; +} + +.setting-label { + color: #8a9aa0; + font-size: 11px; + min-width: 35px; +} + +.setting-input { + background: #2a3a4a; + border: 1px solid #4a5a6a; + border-radius: 3px; + color: #e0e0e0; + padding: 3px 6px; + font-size: 11px; + width: 70px; +} + +/* Filters panel */ +.control-filters-panel { + margin-top: 8px; +} + +.add-filter-row { + margin-bottom: 8px; +} + +.filter-type-select { + width: 100%; + background: #2a3a4a; + border: 1px dashed #4a5a6a; + border-radius: 3px; + color: #8a9aa0; + padding: 6px 8px; + font-size: 11px; + cursor: pointer; +} + +.filter-type-select:hover { + border-color: #6a7a8a; + color: #a0b0c0; +} + +.filters-list { + display: flex; + flex-direction: column; + gap: 6px; +} + +/* Individual filter item */ +.filter-item { + background: rgba(40, 50, 60, 0.5); + border-left: 3px solid #4a9eff; + border-radius: 0 4px 4px 0; + padding: 6px 8px; +} + +.filter-item-header { + display: flex; + align-items: center; + gap: 6px; +} + +.filter-type-dropdown { + flex: 1; + background: #2a3a4a; + border: 1px solid #4a5a6a; + border-radius: 3px; + color: #8ac4ff; + padding: 4px 6px; + font-size: 11px; + cursor: pointer; +} + +.filter-settings-toggle { + background: transparent; + border: 1px solid #3a4a5a; + border-radius: 3px; + color: #6a7a8a; + font-size: 10px; + padding: 2px 5px; + cursor: pointer; +} + +.filter-settings-toggle:hover, +.filter-settings-toggle.active { + background: #3a4a5a; + color: #a0b0c0; +} + +.filter-remove-btn { + background: #5a3a3a; + border: none; + border-radius: 3px; + color: #ff8a8a; + font-size: 12px; + width: 20px; + height: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.filter-remove-btn:hover { + background: #7a4a4a; + color: #ffaaaa; +} + +/* Filter settings panel */ +.filter-settings-panel { + margin-top: 8px; + padding-left: 4px; +} + +.filter-param-row { + margin: 6px 0; +} + +.filter-param-top-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 3px; +} + +.filter-param-label { + color: #8a9aa0; + font-size: 10px; + flex: 1; +} + +.filter-param-value { + color: #6a9aff; + font-family: 'Roboto Mono', monospace; + font-size: 10px; + min-width: 35px; + text-align: right; +} + +.param-settings-btn { + background: transparent; + border: none; + color: #5a6a7a; + font-size: 12px; + padding: 0 4px; + cursor: pointer; +} + +.param-settings-btn:hover { + color: #8a9aaa; +} + +.filter-param-slider { + width: 100%; + height: 4px; + -webkit-appearance: none; + appearance: none; + background: #3a4a5a; + border-radius: 2px; + outline: none; +} + +.filter-param-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 10px; + height: 10px; + background: #6a9aff; + border-radius: 50%; + cursor: pointer; +} + +.filter-param-slider::-moz-range-thumb { + width: 10px; + height: 10px; + background: #6a9aff; + border-radius: 50%; + cursor: pointer; + border: none; +} + +/* Parameter bounds panel */ +.param-bounds-panel { + margin-top: 4px; + padding: 4px; + background: rgba(30, 40, 50, 0.5); + border-radius: 3px; +} + +.param-bounds-row { + display: flex; + gap: 6px; +} + +.param-bound-input { + flex: 1; + background: #2a3a4a; + border: 1px solid #4a5a6a; + border-radius: 3px; + color: #a0b0c0; + padding: 3px 6px; + font-size: 10px; + width: 50px; +} + +/* ===== Scene / Multi-Shape UI ===== */ + +.scene-header { + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px 0; + border-bottom: 1px solid #444; + margin-bottom: 10px; +} + +.scene-header h3 { + margin: 0; + color: #e0e0e0; + font-size: 14px; +} + +.scene-header-buttons { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.scene-btn { + padding: 6px 10px; + font-size: 11px; + background: #3a3a3a; + border: 1px solid #444; + border-radius: 4px; + color: #e0e0e0; + cursor: pointer; + flex: 1; + min-width: 60px; +} + +.scene-btn:hover { + background: #4a4a4a; + border-color: #4a9eff; +} + +#add-shape-btn { + background: #4a9eff; + border-color: #4a9eff; + color: white; +} + +#add-shape-btn:hover { + background: #3a8eef; +} + +/* Legacy - keep for compatibility */ +.add-shape-btn { + padding: 6px 12px; + font-size: 12px; + background: #4a9eff; + border: none; + border-radius: 4px; + color: white; + cursor: pointer; +} + +.add-shape-btn:hover { + background: #3a8eef; +} + +/* Presets modal */ +.presets-modal { + position: fixed; + padding: 0px 20px; + top: 0; + left: 0; + width: 500px; + height: 100%; + background: rgba(0, 0, 0, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.presets-content { + background: #2a2a2a; + border-radius: 8px; + padding: 20px; + width: calc(100% - 40px); + max-height: 80vh; + display: flex; + flex-direction: column; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); +} + +.presets-content h3 { + color: #e0e0e0; + margin: 0 0 16px 0; + text-align: center; +} + +.presets-actions { + margin-bottom: 16px; +} + +.preset-save-current-btn { + width: 100%; + padding: 10px; + font-size: 12px; + background: #4a9eff; + border: none; + border-radius: 4px; + color: white; + cursor: pointer; +} + +.preset-save-current-btn:hover { + background: #3a8eef; +} + +.presets-list { + flex: 1; + overflow-y: auto; + min-height: 100px; + max-height: 300px; + margin-bottom: 16px; +} + +.presets-empty { + color: #888; + text-align: center; + font-style: italic; + padding: 20px; +} + +.preset-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background: #3a3a3a; + border: 1px solid #444; + border-radius: 4px; + margin-bottom: 8px; +} + +.preset-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.preset-name { + color: #e0e0e0; + font-size: 13px; + font-weight: 500; +} + +.preset-layers { + color: #888; + font-size: 11px; +} + +.preset-actions { + display: flex; + gap: 6px; +} + +.preset-load-btn { + padding: 6px 12px; + font-size: 11px; + background: #4a9eff; + border: none; + border-radius: 4px; + color: white; + cursor: pointer; +} + +.preset-load-btn:hover { + background: #3a8eef; +} + +.preset-delete-btn { + padding: 6px 8px; + font-size: 11px; + background: #444; + border: none; + border-radius: 4px; + color: #ccc; + cursor: pointer; +} + +.preset-delete-btn:hover { + background: #c44; + color: white; +} + +.presets-cancel { + width: 100%; + background: #555; + flex-shrink: 0; +} + +.presets-cancel:hover { + background: #666; +} + +.presets-section-header { + color: #888; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + padding: 12px 0 6px 0; + border-bottom: 1px solid #444; + margin-bottom: 8px; +} + +.presets-section-header:first-child { + padding-top: 0; +} + +.preset-builtin { + border-color: #4a9eff33; +} + +.preset-description { + color: #888; + font-size: 11px; + font-style: italic; +} + +@media screen and (max-width: 768px) { + .presets-modal { + width: 100%; + } +} + +/* Layer panels */ +.layer-panel { + background: #1a1a1a; + border: 1px solid #333; + border-radius: 6px; + margin-bottom: 10px; + overflow: hidden; +} + +.layer-header { + display: flex; + align-items: center; + padding: 8px 10px; + background: #252525; + border-bottom: 1px solid #333; + gap: 8px; +} + +.layer-collapse-btn { + cursor: pointer; + color: #888; + font-size: 10px; + width: 16px; + text-align: center; +} + +.layer-collapse-btn:hover { + color: #fff; +} + +.layer-name { + flex: 1; + color: #e0e0e0; + font-size: 13px; + font-weight: 500; +} + +.layer-controls { + display: flex; + gap: 4px; +} + +.layer-btn { + width: 24px; + height: 24px; + padding: 0; + font-size: 12px; + background: #333; + border: 1px solid #444; + border-radius: 4px; + color: #ccc; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.layer-btn:hover { + background: #444; + color: #fff; +} + +.layer-remove:hover { + background: #c44; + border-color: #c44; +} + +.layer-content { + padding: 10px; +} + +/* Layers container */ +#layers-container { + margin-top: 10px; +} + +/* Shape picker modal */ +.shape-picker-modal { + position: fixed; + top: 0; + left: 0; + width: 500px; + height: 100%; + background: rgba(0, 0, 0, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + box-sizing: border-box; +} + +.shape-picker-container { + background: #2a2a2a; + border-radius: 8px; + padding: 20px; + width: calc(100% - 40px); + max-height: 80vh; + display: flex; + flex-direction: column; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + box-sizing: border-box; +} + +.shape-picker-container h3 { + color: #e0e0e0; + margin: 0 0 12px 0; + text-align: center; + flex-shrink: 0; +} + +.shape-picker-tabs { + display: flex; + gap: 4px; + margin-bottom: 12px; + flex-shrink: 0; +} + +.shape-picker-tab { + flex: 1; + padding: 8px 12px; + font-size: 12px; + background: #333; + border: 1px solid #444; + border-radius: 4px; + color: #aaa; + cursor: pointer; + transition: all 0.15s; +} + +.shape-picker-tab:hover { + background: #3a3a3a; + color: #e0e0e0; +} + +.shape-picker-tab.active { + background: #4a9eff; + border-color: #4a9eff; + color: white; +} + +.shape-picker-content { + flex: 1; + min-height: 0; + overflow-y: auto; +} + +.shape-picker-panel { + display: none; +} + +.shape-picker-panel.active { + display: block; +} + +.shape-picker-section { + margin-bottom: 16px; +} + +.shape-picker-section-title { + color: #888; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + padding-bottom: 6px; + border-bottom: 1px solid #444; + margin-bottom: 8px; +} + +.shape-picker-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; +} + +.shape-picker-btn { + padding: 10px 12px; + font-size: 11px; + text-align: left; + background: #3a3a3a; + border: 1px solid #444; + border-radius: 4px; + color: #e0e0e0; + cursor: pointer; +} + +.shape-picker-btn:hover { + background: #4a4a4a; + border-color: #4a9eff; +} + +.shape-picker-btn.preset-btn { + display: flex; + flex-direction: column; + gap: 2px; +} + +.preset-btn-name { + font-weight: 500; +} + +.preset-btn-info { + font-size: 10px; + color: #888; +} + +.shape-picker-cancel { + width: 100%; + padding: 10px; + margin-top: 12px; + font-size: 12px; + background: #555; + border: none; + border-radius: 4px; + color: #e0e0e0; + cursor: pointer; + flex-shrink: 0; +} + +.shape-picker-cancel:hover { + background: #666; +} + +/* Mobile responsive for shape picker */ +@media screen and (max-width: 768px) { + .shape-picker-modal { + width: 100%; + } } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 259700f..5372b53 100644 --- a/docs/index.html +++ b/docs/index.html @@ -10,24 +10,8 @@
Controls:
@@ -52,10 +36,40 @@