Merge pull request #13 from Hive-Academy/feature/TSK-026-refactor-ai-magic-generator

Feature/tsk 026 refactor ai magic generator

Author: Abdallah-khalil

.roomodes

@@ -45,7 +45,7 @@
         [
           "edit",
           {
-            "fileRegex": "\\.(json|md|js|ts|jsx|tsx|css|scss|html|vue|svelte|php|py|rb|java|c|cpp|h|go|rs|cs|swift|kt|sh|sql)$",
+            "fileRegex": "\\.(mjs|json|md|js|ts|jsx|tsx|css|scss|html|vue|svelte|php|py|rb|java|c|cpp|h|go|rs|cs|swift|kt|sh|sql)$",
             "description": "Code files for implementation"
           }
         ],
@@ -83,7 +83,7 @@
         [
           "edit",
           {
-            "fileRegex": "\\.(md|js|ts|jsx|tsx|css|scss|html|vue|svelte|php|py|rb|java|c|cpp|h|go|rs|cs|swift|kt)$",
+            "fileRegex": "\\.(json|md|js|ts|jsx|tsx|css|scss|html|vue|svelte|php|py|rb|java|c|cpp|h|go|rs|cs|swift|kt)$",
             "description": "Implementation code files only"
           }
         ],

docs/css/styles.css

@@ -0,0 +1,121 @@
+/* Main styles for RooCode Orchestrator Presentation */
+
+/* Slide layout */
+.slide {
+  min-height: 100vh;
+  scroll-snap-align: start;
+}
+.scroll-container {
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+/* Role cards and animations */
+.role-card {
+  transition: all 0.3s ease;
+}
+.role-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Role-specific gradient backgrounds */
+.memory-bank {
+  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+}
+.boomerang {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+}
+.architect {
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+.senior-developer {
+  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
+}
+.junior-coder {
+  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
+}
+.junior-tester {
+  background: linear-gradient(135deg, #ccfbff 0%, #ef96c5 100%);
+}
+.code-reviewer {
+  background: linear-gradient(135deg, #e2b0ff 0%, #9f44d3 100%);
+}
+.researcher {
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+/* Animation styles */
+.highlight-pulse {
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
+  }
+}
+.appear-animation {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+.appear-animation.active {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+
+/* Mermaid diagram styles */
+.mermaid {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Comparison charts */
+.bar-chart {
+  display: flex;
+  flex-direction: column;
+  height: 200px;
+  justify-content: flex-end;
+}
+.bar-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 180px;
+}
+.bar {
+  width: 40px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  color: white;
+  font-weight: bold;
+  font-size: 12px;
+  padding-top: 5px;
+}
+.bar-label {
+  text-align: center;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+/* Benefits section */
+.benefit-card {
+  transition: all 0.3s ease;
+}
+.benefit-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}