From 851c37ffdf540a749dd66a1341d643f46eff22a7 Mon Sep 17 00:00:00 2001
From: Bobby <bobbyskhs@gmail.com>
Date: Mon, 20 Oct 2025 05:10:35 +0530
Subject: add js and css files

---
 static/css/main.css | 361 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 361 insertions(+)
 create mode 100644 static/css/main.css

(limited to 'static/css/main.css')

diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..655f0c4
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,361 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #1e1e1e;
+    color: #d4d4d4;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header {
+    background: #252526;
+    padding: 16px 24px;
+    border-bottom: 1px solid #3e3e42;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+h1 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo {
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+}
+
+.main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.editor-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #3e3e42;
+    min-width: 0;
+}
+
+.toolbar {
+    background: #252526;
+    padding: 12px 16px;
+    border-bottom: 1px solid #3e3e42;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+}
+
+.language-select {
+    padding: 8px 16px;
+    background: #3e3e42;
+    border: 1px solid #505050;
+    border-radius: 6px;
+    color: #d4d4d4;
+    font-size: 14px;
+    cursor: pointer;
+    outline: none;
+}
+
+.language-select:hover {
+    background: #4e4e52;
+}
+
+.analyze-btn {
+    margin-left: auto;
+    padding: 8px 24px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.analyze-btn:hover {
+    transform: translateY(-1px);
+}
+
+.analyze-btn:active {
+    transform: translateY(0);
+}
+
+.analyze-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#editor {
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+}
+
+.results-panel {
+    width: 400px;
+    min-width: 400px;
+    max-width: 400px;
+    flex-shrink: 0;
+    background: #252526;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.results-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #3e3e42;
+}
+
+.results-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+}
+
+.results-content {
+    padding: 20px;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #858585;
+}
+
+.result-section {
+    margin-bottom: 24px;
+}
+
+.result-section h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 12px;
+}
+
+.complexity-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 6px;
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+    font-family: 'Courier New', monospace;
+}
+
+.info-list {
+    list-style: none;
+    padding: 0;
+}
+
+.info-list li {
+    padding: 8px 12px;
+    background: #1e1e1e;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.chart-container {
+    background: #1e1e1e;
+    padding: 16px;
+    border-radius: 8px;
+    height: 300px;
+    position: relative;
+}
+
+.loading {
+    display: none;
+    padding: 20px;
+    text-align: center;
+}
+
+.loading.active {
+    display: block;
+}
+
+.spinner {
+    border: 3px solid #3e3e42;
+    border-top: 3px solid #667eea;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 12px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Tablet */
+@media (max-width: 1024px) {
+    .results-panel {
+        width: 350px;
+        min-width: 350px;
+        max-width: 350px;
+    }
+
+    header {
+        padding: 12px 16px;
+    }
+
+    h1 {
+        font-size: 18px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .main-content {
+        flex-direction: column;
+    }
+
+    .editor-panel {
+        border-right: none;
+        border-bottom: 1px solid #3e3e42;
+        min-height: 50vh;
+        max-height: 50vh;
+    }
+
+    .results-panel {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        flex: 1;
+    }
+
+    header {
+        padding: 12px 16px;
+    }
+
+    h1 {
+        font-size: 16px;
+    }
+
+    .logo {
+        width: 28px;
+        height: 28px;
+        font-size: 14px;
+    }
+
+    .toolbar {
+        padding: 8px 12px;
+        gap: 8px;
+    }
+
+    .language-select {
+        padding: 6px 12px;
+        font-size: 13px;
+    }
+
+    .analyze-btn {
+        padding: 6px 16px;
+        font-size: 13px;
+        margin-left: auto;
+    }
+
+    .results-content {
+        padding: 16px;
+    }
+
+    .result-section {
+        margin-bottom: 20px;
+    }
+
+    .complexity-badge {
+        font-size: 16px;
+        padding: 4px 10px;
+    }
+
+    .info-list li {
+        font-size: 12px;
+        padding: 6px 10px;
+    }
+
+    .chart-container {
+        height: 200px;
+        padding: 12px;
+    }
+
+    .empty-state {
+        padding: 40px 16px;
+        font-size: 14px;
+    }
+}
+
+/* Small mobile */
+@media (max-width: 480px) {
+    header {
+        padding: 10px 12px;
+    }
+
+    h1 {
+        font-size: 14px;
+        gap: 8px;
+    }
+
+    .logo {
+        width: 24px;
+        height: 24px;
+        font-size: 12px;
+    }
+
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .analyze-btn {
+        margin-left: 0;
+        width: 100%;
+    }
+
+    .editor-panel {
+        min-height: 40vh;
+        max-height: 40vh;
+    }
+
+    .chart-container {
+        height: 180px;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3