From 851c37ffdf540a749dd66a1341d643f46eff22a7 Mon Sep 17 00:00:00 2001 From: Bobby Date: Mon, 20 Oct 2025 05:10:35 +0530 Subject: add js and css files --- static/css/main.css | 361 ++++++++++++++++++++++++++++++++++++++++++++++++++++ static/js/app.js | 285 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 646 insertions(+) create mode 100644 static/css/main.css create mode 100644 static/js/app.js (limited to 'static') 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 diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..5cde1b7 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,285 @@ +let editor; +let currentLanguage = 'javascript'; +let chart = null; +let loadingInterval = null; +let loadingMessageIndex = 0; + +const loadingMessages = [ + "Parsing code structure...", + "Analyzing algorithm patterns...", + "Detecting time complexity...", + "Identifying nested loops...", + "Checking for recursion...", + "Examining data structures...", + "Loading execution environment...", + "Compiling test cases...", + "Generating test data...", + "Running performance benchmarks...", + "Measuring execution time...", + "Testing with small inputs...", + "Testing with large inputs...", + "Analyzing growth patterns...", + "Calculating complexity metrics...", + "Fitting complexity curves...", + "Validating results...", + "Finalizing analysis..." +]; + +const irregularIntervals = [2400, 3800, 4500, 1000, 2900, 4300, 1100, 3400, 950, 2250, 850, 3200, 2050, 1200, 1400, 1800, 900, 1300]; + +require.config({ + paths: { + vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' + } +}); + +require(['vs/editor/editor.main'], function () { + editor = monaco.editor.create(document.getElementById('editor'), { + value: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}', + language: 'javascript', + theme: 'vs-dark', + fontSize: 14, + minimap: { enabled: false }, + scrollBeyondLastLine: false, + automaticLayout: true, + lineNumbers: 'on', + roundedSelection: false, + scrollbar: { + vertical: 'visible', + horizontal: 'visible' + } + }); + + setupEventListeners(); +}); + +function setupEventListeners() { + // Language selector + document.getElementById('languageSelect').addEventListener('change', (e) => { + currentLanguage = e.target.value; + monaco.editor.setModelLanguage(editor.getModel(), currentLanguage); + + // default code template + const templates = { + javascript: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}', + python: '# Write your algorithm here\ndef algorithm(arr):\n # Your code\n return arr', + go: '// Write your algorithm here\nfunc algorithm(arr []int) []int {\n // Your code\n return arr\n}' + }; + editor.setValue(templates[currentLanguage]); + }); + + // Analyze button + document.getElementById('analyzeBtn').addEventListener('click', analyzeCode); +} + +function startDynamicLoading() { + loadingMessageIndex = 0; + const loadingText = document.querySelector('#loadingState p'); + + function updateMessage() { + if (loadingMessageIndex < loadingMessages.length) { + loadingText.textContent = loadingMessages[loadingMessageIndex]; + + if (loadingMessageIndex < loadingMessages.length - 1) { + const nextInterval = irregularIntervals[loadingMessageIndex]; + loadingMessageIndex++; + loadingInterval = setTimeout(updateMessage, nextInterval); + } else { + loadingMessageIndex++; + } + } + } + + updateMessage(); +} + +function stopDynamicLoading() { + if (loadingInterval) { + clearTimeout(loadingInterval); + loadingInterval = null; + } +} + +async function analyzeCode() { + const code = editor.getValue(); + + if (!code.trim()) { + alert('Please enter code to analyze'); + return; + } + + showLoading(); + startDynamicLoading(); + + const analyzeBtn = document.getElementById('analyzeBtn'); + analyzeBtn.disabled = true; + + try { + const response = await fetch('/api/analyze', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + code: code, + language: currentLanguage + }) + }); + + const result = await response.json(); + + if (!response.ok) { + throw new Error(result.error || 'Analysis failed'); + } + + displayResults(result); + } catch (error) { + displayError(error.message); + } finally { + stopDynamicLoading(); + analyzeBtn.disabled = false; + } +} + +function showLoading() { + document.getElementById('resultsContent').style.display = 'none'; + document.getElementById('loadingState').classList.add('active'); +} + +function displayResults(result) { + stopDynamicLoading(); + document.getElementById('loadingState').classList.remove('active'); + document.getElementById('resultsContent').style.display = 'block'; + + const resultsHTML = ` +
+

Detected Complexity

+
${result.complexity}
+

+ Confidence: ${result.confidence.toFixed(1)}% +

+
+ +
+

Static Analysis

+ +
+ +
+

Performance Graph

+
+ +
+
+ +
+

Execution Timings

+ +
+ `; + + document.getElementById('resultsContent').innerHTML = resultsHTML; + + renderChart(result.performanceData, result.complexity); +} + +function renderChart(data, complexity) { + if (typeof Chart === 'undefined') { + console.error('Chart.js is not available'); + return; + } + + const ctx = document.getElementById('performanceChart'); + + // Destroy previous chart if exists + if (chart) { + chart.destroy(); + } + + chart = new Chart(ctx, { + type: 'line', + data: { + labels: data.map(d => d.size), + datasets: [{ + label: `Execution Time (${complexity})`, + data: data.map(d => d.time), + borderColor: '#667eea', + backgroundColor: 'rgba(102, 126, 234, 0.1)', + borderWidth: 2, + pointRadius: 4, + pointBackgroundColor: '#667eea', + tension: 0.4 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + labels: { color: '#d4d4d4' } + }, + tooltip: { + backgroundColor: '#252526', + titleColor: '#fff', + bodyColor: '#d4d4d4', + borderColor: '#3e3e42', + borderWidth: 1 + } + }, + scales: { + x: { + title: { + display: true, + text: 'Input Size (n)', + color: '#d4d4d4' + }, + ticks: { color: '#858585' }, + grid: { color: '#3e3e42' } + }, + y: { + title: { + display: true, + text: 'Time (ms)', + color: '#d4d4d4' + }, + ticks: { color: '#858585' }, + grid: { color: '#3e3e42' } + } + } + } + }); +} + +function displayError(message) { + stopDynamicLoading(); + document.getElementById('loadingState').classList.remove('active'); + document.getElementById('resultsContent').style.display = 'block'; + document.getElementById('resultsContent').innerHTML = ` +
+

Error

+
+ ${message} +
+
+ `; +} + +// Initialize app when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initApp); +} else { + initApp(); +} + +function initApp() { + if (typeof Chart === 'undefined') { + console.error('Chart.js failed to load'); + alert('Failed to load required libraries. Please refresh the page.'); + } +} \ No newline at end of file -- cgit v1.2.3