code editor page

src/scss/page/_code_editor.scss

@@ -0,0 +1,97 @@
+// Code Editor Page Styling
+
+@use "../base/settings" as *;
+
+.code-editor-page {
+  display: flex;
+  height: calc(100vh - 120px); // Adjust based on your header/footer heights
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+
+  .editor-container,
+  .preview-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .editor-container {
+    border-right: 1px solid $grey;
+  }
+
+  .editor-tabs {
+    display: flex;
+    background-color: #1e1e1e;
+    border-bottom: 1px solid #333;
+
+    .tab {
+      padding: 8px 16px;
+      background: none;
+      border: none;
+      color: #ddd;
+      cursor: pointer;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #2a2a2a;
+      }
+
+      &.active {
+        color: $yellow;
+        border-bottom: 2px solid $yellow;
+      }
+    }
+  }
+
+  .editor-content {
+    flex: 1;
+    overflow: hidden;
+
+    // Ensure CodeMirror fills the container
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .preview-header {
+    background-color: #f5f5f5;
+    padding: 8px 16px;
+    border-bottom: 1px solid $grey;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: $dark;
+    }
+  }
+
+  .preview-content {
+    flex: 1;
+    background-color: white;
+    overflow: auto;
+
+    iframe {
+      border: none;
+      display: block;
+    }
+  }
+
+  // Responsive layout for smaller screens
+  @media (max-width: 768px) {
+    flex-direction: column;
+
+    .editor-container,
+    .preview-container {
+      height: 50%;
+      width: 100%;
+    }
+
+    .editor-container {
+      border-right: none;
+      border-bottom: 1px solid $grey;
+    }
+  }
+}