Create styles.css

styles.css

@@ -0,0 +1,558 @@
+/* Base Styles */
+:root {
+    --primary: #6200ea;
+    --primary-dark: #3700b3;
+    --primary-light: #bb86fc;
+    --secondary: #03dac6;
+    --secondary-dark: #018786;
+    --background: #121212;
+    --surface: #1e1e1e;
+    --error: #cf6679;
+    --on-primary: #ffffff;
+    --on-secondary: #000000;
+    --on-background: #ffffff;
+    --on-surface: #ffffff;
+    --on-error: #000000;
+    --grid-color: rgba(100, 100, 255, 0.2);
+    --user-colors: #ff9800, #4caf50, #2196f3, #e91e63, #9c27b0, #00bcd4;
+    --notification-bg: rgba(0, 0, 0, 0.8);
+    --notification-text: white;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--on-background);
+    background-color: var(--background);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+    border-radius: 8px;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(90deg, var(--secondary), var(--primary-light));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+h2 {
+    font-size: 1.2rem;
+    color: var(--secondary);
+    font-weight: 400;
+}
+
+h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.8rem;
+    color: var(--primary-light);
+    border-bottom: 1px solid var(--primary);
+    padding-bottom: 0.3rem;
+}
+
+/* Visualization Section */
+.visualization-container {
+    background-color: var(--surface);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+#visualization {
+    height: 300px;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.visual-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 40px 40px;
+    background-image: 
+        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
+    transform-origin: center;
+    transform: perspective(500px) rotateX(60deg) scale(1.5);
+}
+
+/* Control Panel */
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.control-panel, .info-panel {
+    flex: 1;
+    min-width: 250px;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.control-group {
+    margin-bottom: 1.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+button {
+    background-color: var(--primary);
+    color: var(--on-primary);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+button:hover {
+    background-color: var(--primary-dark);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.system-btn {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--on-background);
+}
+
+.system-btn.active {
+    background-color: var(--primary);
+    color: var(--on-primary);
+    box-shadow: 0 0 15px var(--primary-light);
+}
+
+.system-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.system-btn.active:hover {
+    background-color: var(--primary-dark);
+}
+
+#llmlBtn {
+    border-left: 3px solid #f06292;
+}
+
+#qgaBtn {
+    border-left: 3px solid #4fc3f7;
+}
+
+#holoBtn {
+    border-left: 3px solid #ffeb3b;
+}
+
+#integratedBtn {
+    border-left: 3px solid #66bb6a;
+}
+
+#evolveBtn {
+    background-color: var(--secondary);
+    color: var(--on-secondary);
+    width: 100%;
+    margin-bottom: 0.5rem;
+}
+
+#evolveBtn:hover {
+    background-color: var(--secondary-dark);
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+input[type="range"] {
+    flex: 1;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background: rgba(255, 255, 255, 0.1);
+    outline: none;
+}
+
+.concept-input {
+    display: flex;
+    gap: 0.5rem;
+}
+
+#conceptInput {
+    flex: 1;
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--on-surface);
+}
+
+#processBtn {
+    background-color: var(--secondary);
+    color: var(--on-secondary);
+}
+
+/* LLML Symbolic styles */
+.symbolic-input {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+#symbolSelector {
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--on-surface);
+    font-family: 'Courier New', monospace;
+}
+
+.symbolic-node {
+    color: var(--primary-light);
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+}
+
+.operator-node {
+    color: var(--secondary);
+    font-weight: bold;
+}
+
+.quantum-node {
+    color: #f06292;
+    font-weight: bold;
+}
+
+.insight-level {
+    margin-top: 1rem;
+    padding: 0.5rem;
+    border-left: 3px solid var(--primary);
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.insight-level h4 {
+    color: var(--primary-light);
+    margin-bottom: 0.5rem;
+}
+
+/* Triadic Architecture styles */
+#sonwBtn {
+    border-left: 3px solid #f06292;
+}
+
+#afterthoughtBtn {
+    border-left: 3px solid #4fc3f7;
+}
+
+#cognitiveBtn {
+    border-left: 3px solid #ffeb3b;
+}
+
+#integratedBtn {
+    border-left: 3px solid #66bb6a;
+}
+
+/* Info Panel */
+#statusDisplay {
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-family: monospace;
+    color: var(--secondary);
+}
+
+.metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.metric {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.metric span {
+    font-size: 0.9rem;
+}
+
+.metric-bar {
+    height: 0.5rem;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#symbolicBar {
+    background: linear-gradient(90deg, #f06292, #ff94c2);
+}
+
+#quantumBar {
+    background: linear-gradient(90deg, #4fc3f7, #8bf6ff);
+}
+
+#holoBar {
+    background: linear-gradient(90deg, #ffeb3b, #ffff72);
+}
+
+#metaBar {
+    background: linear-gradient(90deg, #66bb6a, #98ee99);
+}
+
+/* Output Section */
+.output-container {
+    background-color: var(--surface);
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+#output {
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    border-radius: 4px;
+    min-height: 150px;
+    max-height: 300px;
+    overflow-y: auto;
+    font-family: 'Courier New', Courier, monospace;
+    line-height: 1.4;
+}
+
+#output .placeholder {
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}
+
+.concept-node {
+    color: var(--primary-light);
+    font-weight: bold;
+}
+
+.connection-node {
+    color: var(--secondary);
+    font-style: italic;
+}
+
+/* Animation Classes */
+@keyframes pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+}
+
+.pulsing {
+    animation: pulse 2s infinite;
+}
+
+@keyframes evolve {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.evolving {
+    animation: evolve 1s ease-in-out;
+}
+
+@keyframes recursion {
+    0% { transform: scale(1) rotate(0deg); }
+    50% { transform: scale(1.05) rotate(180deg); }
+    100% { transform: scale(1) rotate(360deg); }
+}
+
+.recursing {
+    animation: recursion 3s infinite linear;
+}
+
+/* Collaborative Features */
+.collaborative-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.collab-btn {
+    background-color: var(--secondary);
+    color: var(--on-secondary);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    flex: 1;
+}
+
+.collab-btn:hover {
+    background-color: var(--secondary-dark);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.user-presence {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--secondary);
+}
+
+.researchers-list {
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 0.5rem;
+    border-radius: 4px;
+    max-height: 100px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+}
+
+.researcher {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.3rem;
+}
+
+.researcher-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+}
+
+.researcher-name {
+    flex: 1;
+}
+
+.shared-analyses {
+    margin-top: 2rem;
+}
+
+.shared-list {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 0.5rem;
+}
+
+.shared-analysis {
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+}
+
+.shared-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
+    font-size: 0.9rem;
+    color: var(--secondary);
+}
+
+.shared-content {
+    padding: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    margin-top: 0.3rem;
+}
+
+.user-cursor {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 100;
+}
+
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    background-color: var(--notification-bg);
+    color: var(--notification-text);
+    border-radius: 4px;
+    z-index: 1000;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.notification.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .container {
+        padding: 0.5rem;
+    }
+    
+    h1 {
+        font-size: 1.8rem;
+    }
+    
+    h2 {
+        font-size: 1rem;
+    }
+    
+    .controls {
+        flex-direction: column;
+    }
+    
+    #visualization {
+        height: 200px;
+    }
+    
+    .control-panel, .info-panel {
+        width: 100%;
+    }
+    
+    .collaborative-controls {
+        flex-direction: column;
+    }
+    
+    .shared-analyses {
+        max-height: 150px;
+    }
+}