diff options
| author | Bobby <[email protected]> | 2025-10-20 05:10:35 +0530 |
|---|---|---|
| committer | Bobby <[email protected]> | 2025-10-20 05:10:35 +0530 |
| commit | 851c37ffdf540a749dd66a1341d643f46eff22a7 (patch) | |
| tree | 0c46d465611a9defb4f4ae0462982801a077ddd8 /static/css | |
| parent | 04ec5f2dd1915b62a100aa761419dc99542ea16b (diff) | |
| download | complexity-analyzer-851c37ffdf540a749dd66a1341d643f46eff22a7.tar.xz complexity-analyzer-851c37ffdf540a749dd66a1341d643f46eff22a7.zip | |
add js and css files
Diffstat (limited to 'static/css')
| -rw-r--r-- | static/css/main.css | 361 |
1 files changed, 361 insertions, 0 deletions
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 |