Spaces:
Sleeping
Sleeping
File size: 4,899 Bytes
1a976d8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Complexity Predictor</title>
<!-- Modern Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Outfit:wght@600;800&display=swap" rel="stylesheet">
<!-- Prism.js for code syntax highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<!-- Custom Styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="background-effects">
<div class="glow-orb orb-1"></div>
<div class="glow-orb orb-2"></div>
</div>
<main class="container">
<header>
<div class="logo-wrapper">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="2" y1="12" x2="22" y2="12" gradientUnits="userSpaceOnUse">
<stop stop-color="#00F0FF" />
<stop offset="1" stop-color="#8000FF" />
</linearGradient>
</defs>
</svg>
<h1>Complexity <span>Predictor</span></h1>
</div>
<p class="subtitle">// AI-powered algorithmic Big-O analysis using CodeBERT</p>
</header>
<div class="app-grid">
<!-- Left Side: Code Input -->
<section class="editor-section">
<div class="card glass-panel">
<div class="card-header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
<span class="filename">algorithm.py</span>
</div>
<div class="editor-wrapper">
<!-- We use a textarea over a pre code block to allow editing,
but styling them to overlap for syntax highlighting -->
<textarea id="codeInput" placeholder="# Paste your Python or Java code here...
def example(arr):
for item in arr:
print(item)"></textarea>
</div>
</div>
<button id="analyzeBtn" class="primary-btn">
<span class="btn-text">⚡ Analyze Complexity</span>
<span class="loader hidden"></span>
</button>
<div class="examples-section">
<h3>Try these examples:</h3>
<div class="example-chips">
<button class="chip" data-example='def get_first(arr):\n return arr[0]'>O(1) Constant</button>
<button class="chip" data-example='def linear_search(arr, target):\n for i in range(len(arr)):\n if arr[i] == target:\n return i\n return -1'>O(n) Linear</button>
<button class="chip" data-example='def bubble_sort(arr):\n n = len(arr)\n for i in range(n):\n for j in range(0, n-i-1):\n if arr[j] > arr[j+1]:\n arr[j], arr[j+1] = arr[j+1], arr[j]'>O(n²) Quadratic</button>
</div>
</div>
</section>
<!-- Right Side: Results -->
<section class="results-section">
<div class="result-card glass-panel">
<h2 class="result-label">Big-O Notation</h2>
<div class="result-value glow-text" id="resNotation">O(?)</div>
</div>
<div class="result-card glass-panel">
<h2 class="result-label">Complexity Class</h2>
<div class="result-value" id="resTitle">-</div>
</div>
<div class="result-card glass-panel desc-card">
<h2 class="result-label">Explanation</h2>
<p class="result-desc" id="resDesc">Awaiting code input to predict complexity.</p>
</div>
</section>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="script.js"></script>
</body>
</html>
|