Läuft mal mit kontinuierlicher Kuppelposition

2025-09-24 11:35:07 +02:00
parent d02588b554
commit cfa3f6112e
9 changed files with 1070 additions and 9 deletions
--- a/JS/public/style.css
+++ b/JS/public/style.css
@@ -0,0 +1,126 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+  margin: 0;
+  padding: 20px;
+}
+
+h2, h3 {
+  color: #4a9eff;
+  margin-top: 0;
+}
+
+.container {
+  display: flex;
+  gap: 30px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.visualization {
+  flex-shrink: 0;
+}
+
+#simCanvas {
+  border: 2px solid #444;
+  border-radius: 8px;
+  background-color: #2a2a2a;
+}
+
+.controls {
+  flex: 1;
+  min-width: 300px;
+}
+
+.task-section {
+  background-color: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+}
+
+button {
+  background-color: #4a9eff;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: #357abd;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+.status {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 12px;
+  color: #a0a0a0;
+  background-color: #1a1a1a;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border-left: 3px solid #4a9eff;
+}
+
+.debug-info {
+  margin-top: 30px;
+  background-color: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+#debug {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  color: #c0c0c0;
+  background-color: #1a1a1a;
+  padding: 15px;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 200px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .controls {
+    max-width: 700px;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+  
+  #simCanvas {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+  }
+  
+  .button-group {
+    justify-content: center;
+  }
+}