made this a hell of a lot better
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,102 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Quick Problem Platform</title>
|
||||
<!--<link rel="favicon" href="/favicon/favicon.ico">-->
|
||||
<script src="script.js" async defer></script>
|
||||
<link rel="stylesheet" href="/static/index.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header>
|
||||
<h1>Quick Problem Platform</h1>
|
||||
</header>
|
||||
<div class="content" id="contentContainer">
|
||||
<!-- Problems -->
|
||||
<section class="card problems-list">
|
||||
<div class="search-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="problemSearch"
|
||||
placeholder="Search problems..."
|
||||
/>
|
||||
</div>
|
||||
<h2 style="margin-bottom:6px;font-size:1.1rem">Problems</h2>
|
||||
<div id="problemsContainer">
|
||||
{% for folder, description, test_code, difficulty in problems %}
|
||||
<div class="problem-item" data-name="{{ folder.replace('_',' ').title() }}" data-desc="{{ description }}">
|
||||
<a href="/problem/{{ folder }}">{{ folder.replace('_',' ').title() }}</a>
|
||||
<span class="difficulty" data-difficulty="{{ difficulty|lower }}">{{ difficulty }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="problem-item">No problems yet.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Leaderboard -->
|
||||
<section class="card" id="leaderboardSection">
|
||||
<div class="leaderboard-head">
|
||||
<h2 style="font-size:1.1rem;margin:0">Leaderboard</h2>
|
||||
<button class="btn" id="toggleLeaderboard">Hide</button>
|
||||
</div>
|
||||
<div class="leaderboard-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="userSearch"
|
||||
placeholder="Filter by user..."
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="problemFilter"
|
||||
placeholder="Filter by problem..."
|
||||
/>
|
||||
<select class="filter-select" id="runtimeFilter">
|
||||
<option value="">All runtimes</option>
|
||||
<option value="best">Best runtime</option>
|
||||
<option value="worst">Worst runtime</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="leaderboardContainer">
|
||||
<table class="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" data-sort="rank">Rank</th>
|
||||
<th class="sortable" data-sort="user">User</th>
|
||||
<th class="sortable" data-sort="problem">Problem</th>
|
||||
<th class="sortable" data-sort="runtime">Runtime (s)</th>
|
||||
<th class="sortable" data-sort="memory">Memory (KB)</th>
|
||||
<th>Line</th>
|
||||
<th class="sortable" data-sort="timestamp">Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="leaderboardBody">
|
||||
{% for entry in leaderboard %}
|
||||
<tr data-user="{{ entry[0] }}" data-problem="{{ problem_titles.get(entry[1], 'Unknown') }}"
|
||||
data-runtime="{{ '%.4f'|format(entry[2]) }}" data-memory="{{ entry[3] }}"
|
||||
data-timestamp="{{ entry[5] }}">
|
||||
<td>{{ loop.index }}</td>
|
||||
<td>{{ entry[0] }}</td>
|
||||
<td>{{ problem_titles.get(entry[1], 'Unknown') }}</td>
|
||||
<td>{{ '%.4f'|format(entry[2]) }}</td>
|
||||
<td>{{ entry[3] }}</td>
|
||||
<td>{{ entry[4] if entry[4] else '-' }}</td>
|
||||
<td>{{ entry[5] }}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="7">No leaderboard entries yet.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,296 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ problem.title }} - Coding Problem</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
min-height: 100vh; /* allow content to grow */
|
||||
overflow-y: auto; /* allow vertical scroll */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* wrap on small screens */
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.problem-panel {
|
||||
flex: 1 1 400px; /* grow/shrink with base 400px */
|
||||
min-width: 300px;
|
||||
background: white;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
border-right: 1px solid #eaeaea;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1 1 400px;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
max-height: 100vh;
|
||||
overflow: hidden; /* internal scroll handling */
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 0 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.problem-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.problem-desc {
|
||||
line-height: 1.6;
|
||||
font-size: 15px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.problem-desc pre {
|
||||
background: #f6f8fa;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.problem-desc code {
|
||||
background: #f6f8fa;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-actions button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-actions button:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
min-height: 120px;
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.result-panel h3 {
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-panel pre {
|
||||
background: #f6f8fa;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.main-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.problem-panel, .editor-container {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-height: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
#editor {
|
||||
min-height: 400px;
|
||||
max-height: none;
|
||||
}
|
||||
.result-panel {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="problem-panel">
|
||||
<div class="problem-header">
|
||||
<button class="back-btn" onclick="window.location.href='/'">← Back</button>
|
||||
<h1>{{ problem.title }}</h1>
|
||||
</div>
|
||||
<div class="problem-desc">{{ problem.description | safe | markdown }}</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-container">
|
||||
<div class="editor-header">
|
||||
<h2 style="margin:0;font-size:18px;">Submit Your Solution (Python)</h2>
|
||||
</div>
|
||||
<div class="editor-wrapper">
|
||||
<form method="post">
|
||||
<label for="username">Username (optional):</label>
|
||||
<input type="text" name="username" id="username" placeholder="Anonymous">
|
||||
<div id="editor"></div>
|
||||
<textarea name="user_code" id="user_code" style="display:none;"></textarea>
|
||||
<div class="editor-actions">
|
||||
<button type="submit">Run & Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="result-panel">
|
||||
<h3>Result</h3>
|
||||
{% if result %}
|
||||
<p><b>Runtime:</b> {{ '%.4f'|format(result.runtime) }} seconds</p>
|
||||
<p><b>Output:</b></p>
|
||||
<pre>{{ result.output }}</pre>
|
||||
{% if result.error %}
|
||||
<p><b>Error:</b></p>
|
||||
<pre>{{ result.error }}</pre>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="placeholder">
|
||||
Your code execution results will appear here
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
||||
<script>
|
||||
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
|
||||
require(['vs/editor/editor.main'], function() {
|
||||
var editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
value: '',
|
||||
language: 'python',
|
||||
theme: 'vs-light',
|
||||
fontFamily: 'JetBrains Mono, monospace',
|
||||
fontLigatures: true,
|
||||
automaticLayout: true,
|
||||
fontSize: 16,
|
||||
minimap: { enabled: false }
|
||||
});
|
||||
document.querySelector('form').addEventListener('submit', function(e) {
|
||||
var code = editor.getValue();
|
||||
if (!code.trim()) {
|
||||
alert('Please enter your code before submitting.');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
document.getElementById('user_code').value = code;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,152 +0,0 @@
|
||||
// Toggle leaderboard visibility
|
||||
const toggleBtn = document.getElementById('toggleLeaderboard');
|
||||
const leaderboardSection = document.getElementById('leaderboardSection');
|
||||
const contentContainer = document.getElementById('contentContainer');
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
if (leaderboardSection.style.display === 'none') {
|
||||
leaderboardSection.style.display = '';
|
||||
toggleBtn.textContent = 'Hide';
|
||||
contentContainer.classList.remove('single-column');
|
||||
} else {
|
||||
leaderboardSection.style.display = 'none';
|
||||
toggleBtn.textContent = 'Show';
|
||||
contentContainer.classList.add('single-column');
|
||||
}
|
||||
});
|
||||
|
||||
// Problem search functionality
|
||||
const problemSearch = document.getElementById('problemSearch');
|
||||
const problemsContainer = document.getElementById('problemsContainer');
|
||||
const problemItems = problemsContainer.querySelectorAll('.problem-item');
|
||||
|
||||
problemSearch.addEventListener('input', () => {
|
||||
const searchTerm = problemSearch.value.toLowerCase();
|
||||
problemItems.forEach(item => {
|
||||
const name = item.dataset.name.toLowerCase();
|
||||
const desc = item.dataset.desc?.toLowerCase() || '';
|
||||
if (name.includes(searchTerm) || desc.includes(searchTerm)) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Leaderboard filtering and sorting
|
||||
const userSearch = document.getElementById('userSearch');
|
||||
const problemFilter = document.getElementById('problemFilter');
|
||||
const runtimeFilter = document.getElementById('runtimeFilter');
|
||||
const leaderboardBody = document.getElementById('leaderboardBody');
|
||||
const leaderboardRows = Array.from(leaderboardBody.querySelectorAll('tr'));
|
||||
const sortableHeaders = document.querySelectorAll('.sortable');
|
||||
|
||||
// Current sort state
|
||||
let currentSort = {
|
||||
column: null,
|
||||
direction: 'asc'
|
||||
};
|
||||
|
||||
// Filter leaderboard
|
||||
function filterLeaderboard() {
|
||||
const userTerm = userSearch.value.toLowerCase();
|
||||
const problemTerm = problemFilter.value.toLowerCase();
|
||||
const runtimeType = runtimeFilter.value;
|
||||
|
||||
leaderboardRows.forEach(row => {
|
||||
const user = row.dataset.user.toLowerCase();
|
||||
const problem = row.dataset.problem.toLowerCase();
|
||||
const runtime = parseFloat(row.dataset.runtime);
|
||||
const showUser = user.includes(userTerm);
|
||||
const showProblem = problem.includes(problemTerm);
|
||||
|
||||
let showRuntime = true;
|
||||
if (runtimeType === 'best') {
|
||||
// Find if this is the best runtime for this user+problem combo
|
||||
const userProblemRows = leaderboardRows.filter(r =>
|
||||
r.dataset.user === row.dataset.user &&
|
||||
r.dataset.problem === row.dataset.problem
|
||||
);
|
||||
const bestRuntime = Math.min(...userProblemRows.map(r => parseFloat(r.dataset.runtime)));
|
||||
showRuntime = runtime === bestRuntime;
|
||||
} else if (runtimeType === 'worst') {
|
||||
// Find if this is the worst runtime for this user+problem combo
|
||||
const userProblemRows = leaderboardRows.filter(r =>
|
||||
r.dataset.user === row.dataset.user &&
|
||||
r.dataset.problem === row.dataset.problem
|
||||
);
|
||||
const worstRuntime = Math.max(...userProblemRows.map(r => parseFloat(r.dataset.runtime)));
|
||||
showRuntime = runtime === worstRuntime;
|
||||
}
|
||||
|
||||
if (showUser && showProblem && showRuntime) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sort leaderboard
|
||||
function sortLeaderboard(column, direction) {
|
||||
const rows = Array.from(leaderboardBody.querySelectorAll('tr'));
|
||||
const index = Array.from(document.querySelectorAll('th')).findIndex(th => th.dataset.sort === column);
|
||||
|
||||
rows.sort((a, b) => {
|
||||
let aValue = a.cells[index].textContent;
|
||||
let bValue = b.cells[index].textContent;
|
||||
|
||||
// Special handling for numeric columns
|
||||
if (column === 'runtime' || column === 'memory' || column === 'rank') {
|
||||
aValue = parseFloat(aValue) || 0;
|
||||
bValue = parseFloat(bValue) || 0;
|
||||
return direction === 'asc' ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
// Special handling for timestamps
|
||||
if (column === 'timestamp') {
|
||||
aValue = new Date(aValue).getTime();
|
||||
bValue = new Date(bValue).getTime();
|
||||
return direction === 'asc' ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
// Default string comparison
|
||||
aValue = aValue.toLowerCase();
|
||||
bValue = bValue.toLowerCase();
|
||||
if (aValue < bValue) return direction === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return direction === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Re-append rows in sorted order
|
||||
rows.forEach(row => leaderboardBody.appendChild(row));
|
||||
}
|
||||
|
||||
// Set up event listeners
|
||||
userSearch.addEventListener('input', filterLeaderboard);
|
||||
problemFilter.addEventListener('input', filterLeaderboard);
|
||||
runtimeFilter.addEventListener('change', filterLeaderboard);
|
||||
|
||||
// Set up sorting
|
||||
sortableHeaders.forEach(header => {
|
||||
header.addEventListener('click', () => {
|
||||
const column = header.dataset.sort;
|
||||
|
||||
// Reset all sort indicators
|
||||
sortableHeaders.forEach(h => {
|
||||
h.classList.remove('sort-asc', 'sort-desc');
|
||||
});
|
||||
|
||||
// Determine new sort direction
|
||||
if (currentSort.column === column) {
|
||||
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
currentSort.column = column;
|
||||
currentSort.direction = 'asc';
|
||||
}
|
||||
|
||||
// Apply new sort
|
||||
header.classList.add(`sort-${currentSort.direction}`);
|
||||
sortLeaderboard(column, currentSort.direction);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user