So much play

docs/react/src/index.css

@@ -0,0 +1,173 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+  color: white;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.App {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
+
+canvas {
+  display: block;
+  width: 100% !important;
+  height: 100vh !important;
+  touch-action: none;
+}
+
+.toolbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 300px;
+  height: 100vh;
+  background-color: rgba(32, 32, 32, 0.8);
+  padding: 20px;
+  overflow-y: auto;
+  color: #e0e0e0;
+  font-family: Roboto, system-ui;
+  transition: transform 0.3s ease;
+  z-index: 10;
+}
+
+.toolbar.hidden {
+  transform: translateX(100%);
+}
+
+.control-container {
+  margin-bottom: 15px;
+}
+
+.control-label {
+  margin-bottom: 5px;
+  display: block;
+}
+
+.shape-selector {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 20px;
+  background-color: #333;
+  color: white;
+  border: 1px solid #555;
+}
+
+.button {
+  display: inline-block;
+  background-color: #e1ecf4;
+  border-radius: 3px;
+  border: 1px solid #7aa7c7;
+  box-sizing: border-box;
+  color: #1f3f55;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 400;
+  padding: 8px 12px;
+  text-align: center;
+  margin: 5px 2px;
+}
+
+.button:hover {
+  background-color: #b3d3ea;
+}
+
+.button-reset {
+  background-color: #f4e1e1;
+}
+
+.toggle-button {
+  position: absolute;
+  top: 10px;
+  right: 320px;
+  z-index: 11;
+  padding: 10px;
+  background-color: rgba(32, 32, 32, 0.8);
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+}
+
+.filter-container {
+  margin-left: 20px;
+  padding: 10px;
+  border-left: 1px solid #444;
+  margin-top: 10px;
+}
+
+.filter-header {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.range-control {
+  width: 100%;
+  background: #444;
+  height: 5px;
+  border-radius: 5px;
+  outline: none;
+  transition: background 0.15s;
+}
+
+.range-control::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #e1ecf4;
+  cursor: pointer;
+}
+
+.add-filter-button {
+  margin-top: 5px;
+  padding: 3px 8px;
+  background-color: #444;
+  border: none;
+  color: white;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.add-filter-button:hover {
+  background-color: #555;
+}
+
+.control-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.control-row label {
+  flex: 1;
+}
+
+.control-row input[type="range"] {
+  flex: 2;
+}
+
+.control-row .value {
+  flex: 0 0 40px;
+  text-align: right;
+}