0x5t4l1n/OpenLearnX
1
0
Fork 0
mirror of https://github.com/th30d4y/OpenLearnX.git synced 2026-05-26 19:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: unify real activity tracking, admin monitoring, and error UX

Browse Source
This commit is contained in:
Stalin
2026-04-19 17:50:53 +05:30
parent cfc159d105
commit 9115fc5ffd
86 changed files with 9002 additions and 2838 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/coding/[problemId]/page.tsx
+208 -172
View File
@@ -1,7 +1,7 @@
'use client'
import React, { useState, useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { Play, Clock, CheckCircle, XCircle, ArrowLeft, Trophy } from 'lucide-react'
import { Play, Clock, CheckCircle, XCircle, ArrowLeft } from 'lucide-react'
interface TestCase {
input: string
@@ -33,8 +33,10 @@ export default function ProblemPage() {
const [testResults, setTestResults] = useState<any[]>([])
const [isRunning, setIsRunning] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [showHints, setShowHints] = useState(false)
const [activeTab, setActiveTab] = useState<'description' | 'examples' | 'constraints'>('description')
const [activeTab, setActiveTab] = useState<'description' | 'editorial' | 'solutions' | 'submissions'>('description')
const [detailTab, setDetailTab] = useState<'examples' | 'constraints' | 'hints'>('examples')
const [bottomTab, setBottomTab] = useState<'testcase' | 'result'>('testcase')
const [customInput, setCustomInput] = useState('')
useEffect(() => {
loadProblem(problemId)
@@ -121,6 +123,7 @@ export default function ProblemPage() {
if (selectedProblem) {
setProblem(selectedProblem)
setCode(selectedProblem.starter_code)
setCustomInput(selectedProblem.examples[0]?.input || '')
} else {
// Problem not found
router.push('/coding')
@@ -205,72 +208,72 @@ export default function ProblemPage() {
if (!problem) {
return (
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
<div className="min-h-screen bg-background text-foreground flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
<p className="mt-2 text-gray-400">Loading problem...</p>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="mt-2 text-muted-foreground">Loading problem...</p>
</div>
</div>
)
}
const passedCount = testResults.filter((result) => result.passed).length
const allPassed = testResults.length > 0 && passedCount === testResults.length
return (
<div className="min-h-screen bg-gray-900 text-white">
{/* Header */}
<div className="bg-gray-800 border-b border-gray-700 p-4">
<div className="max-w-7xl mx-auto flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="min-h-screen bg-background text-foreground">
<header className="border-b border-border bg-card px-4 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<button
onClick={() => router.back()}
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
onClick={() => router.push('/coding')}
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
>
<ArrowLeft className="h-5 w-5" />
<ArrowLeft className="h-4 w-4" />
</button>
<div>
<h1 className="text-2xl font-bold">{problem.title}</h1>
<div className="flex items-center space-x-3 mt-1">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getDifficultyColor(problem.difficulty)}`}>
<h1 className="text-lg font-semibold">{problem.id}. {problem.title}</h1>
<div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
<span className={`rounded px-2 py-0.5 font-medium ${getDifficultyColor(problem.difficulty)}`}>
{problem.difficulty}
</span>
<span className="text-gray-400 text-sm">{problem.category}</span>
<span>{problem.category}</span>
{allPassed && <span className="text-emerald-600 dark:text-emerald-400">Solved</span>}
</div>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="flex items-center gap-2">
<button
onClick={() => setShowHints(!showHints)}
className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm transition-colors"
onClick={runCode}
disabled={isRunning || !code.trim()}
className="rounded-md border border-border bg-secondary px-3 py-2 text-sm text-secondary-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-60"
>
{showHints ? 'Hide Hints' : 'Show Hints'}
{isRunning ? 'Running...' : 'Run'}
</button>
<button
onClick={() => router.push('/coding/exam')}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors flex items-center space-x-2"
onClick={submitSolution}
disabled={isSubmitting || !code.trim()}
className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
>
<Trophy className="h-4 w-4" />
<span>Join Exam</span>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</div>
</div>
</div>
</header>
<div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Problem Description */}
<div className="space-y-6">
{/* Navigation Tabs */}
<div className="bg-gray-800 rounded-lg">
<div className="flex border-b border-gray-700">
{(['description', 'examples', 'constraints'] as const).map((tab) => (
<main className="h-[calc(100vh-73px)] p-3">
<div className="grid h-full grid-cols-1 gap-3 lg:grid-cols-2">
<section className="flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
<div className="flex border-b border-border text-sm">
{(['description', 'editorial', 'solutions', 'submissions'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`px-6 py-3 font-medium capitalize transition-colors ${
className={`px-4 py-3 capitalize ${
activeTab === tab
? 'bg-gray-700 text-white border-b-2 border-blue-500'
: 'text-gray-400 hover:text-white'
? 'border-b-2 border-primary text-foreground'
: 'text-muted-foreground hover:text-foreground'
}`}
>
{tab}
@@ -278,164 +281,197 @@ export default function ProblemPage() {
))}
</div>
<div className="p-6">
<div className="flex items-center gap-2 border-b border-border px-4 py-2 text-xs">
<button
onClick={() => setDetailTab('examples')}
className={`rounded px-2 py-1 ${detailTab === 'examples' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
Examples
</button>
<button
onClick={() => setDetailTab('constraints')}
className={`rounded px-2 py-1 ${detailTab === 'constraints' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
Constraints
</button>
<button
onClick={() => setDetailTab('hints')}
className={`rounded px-2 py-1 ${detailTab === 'hints' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
Hints
</button>
</div>
<div className="min-h-0 flex-1 overflow-y-auto p-4">
{activeTab === 'description' && (
<div className="prose prose-invert max-w-none">
<p className="text-gray-300 leading-relaxed">{problem.description}</p>
</div>
)}
<div className="space-y-4 text-sm text-muted-foreground">
<p className="leading-7">{problem.description}</p>
{activeTab === 'examples' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Examples:</h3>
{problem.examples.map((example, index) => (
<div key={index} className="bg-gray-900 p-4 rounded-lg">
<div className="mb-2">
<span className="text-blue-400">Input:</span>
<code className="ml-2 text-green-400">"{example.input}"</code>
</div>
<div className="mb-2">
<span className="text-blue-400">Output:</span>
<code className="ml-2 text-green-400">"{example.expected}"</code>
</div>
<div className="text-gray-400 text-sm">{example.description}</div>
{detailTab === 'examples' && (
<div className="space-y-3">
{problem.examples.map((example, index) => (
<div key={index} className="rounded-lg border border-border bg-secondary/40 p-3">
<p className="font-medium text-foreground">Example {index + 1}</p>
<p className="mt-2"><span className="text-muted-foreground">Input:</span> <code className="text-primary">{example.input}</code></p>
<p><span className="text-muted-foreground">Output:</span> <code className="text-primary">{example.expected}</code></p>
<p className="mt-1 text-xs text-muted-foreground">{example.description}</p>
</div>
))}
</div>
))}
)}
{detailTab === 'constraints' && (
<ul className="space-y-2 text-muted-foreground">
{problem.constraints.map((constraint, index) => (
<li key={index} className="rounded border border-border bg-secondary/40 px-3 py-2">
{constraint}
</li>
))}
</ul>
)}
{detailTab === 'hints' && (
<ul className="space-y-2">
{problem.hints.map((hint, index) => (
<li key={index} className="rounded border border-amber-300 bg-amber-100/70 px-3 py-2 text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200">
{index + 1}. {hint}
</li>
))}
</ul>
)}
</div>
)}
{activeTab === 'constraints' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Constraints:</h3>
<ul className="space-y-2">
{problem.constraints.map((constraint, index) => (
<li key={index} className="flex items-start space-x-2">
<span className="text-blue-400 mt-1">•</span>
<span className="text-gray-300">{constraint}</span>
</li>
))}
</ul>
{activeTab === 'editorial' && (
<div className="rounded-lg border border-border bg-secondary/40 p-4 text-sm text-muted-foreground">
<p className="font-medium text-foreground">Editorial</p>
<p className="mt-2">Approach: Use the Python string method that transforms text to uppercase and return it directly from <code className="text-primary">{problem.function_name}</code>.</p>
</div>
)}
{activeTab === 'solutions' && (
<div className="rounded-lg border border-border bg-secondary/40 p-4 text-sm text-muted-foreground">
<p className="font-medium text-foreground">Community Solutions</p>
<p className="mt-2">Your submitted solutions will appear here after running Submit.</p>
</div>
)}
{activeTab === 'submissions' && (
<div className="rounded-lg border border-border bg-secondary/40 p-4 text-sm text-muted-foreground">
<p className="font-medium text-foreground">Submissions</p>
<p className="mt-2">No submissions yet. Run and submit your code to populate this section.</p>
</div>
)}
</div>
</div>
</section>
{/* Hints Section */}
{showHints && (
<div className="bg-yellow-900 border border-yellow-600 rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4 text-yellow-300">💡 Hints:</h3>
<ul className="space-y-2">
{problem.hints.map((hint, index) => (
<li key={index} className="flex items-start space-x-2">
<span className="text-yellow-400 mt-1">{index + 1}.</span>
<span className="text-yellow-100">{hint}</span>
</li>
))}
</ul>
<section className="flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
<div className="flex items-center justify-between border-b border-border px-4 py-2 text-sm">
<span className="text-foreground">Code</span>
<span className="text-xs text-muted-foreground">Python</span>
</div>
)}
</div>
{/* Code Editor & Results */}
<div className="space-y-6">
{/* Code Editor */}
<div className="bg-gray-800 rounded-lg p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-bold">Code Editor</h3>
<span className="text-sm text-gray-400">Python</span>
<div className="min-h-0 flex-1 border-b border-border">
<textarea
value={code}
onChange={(e) => setCode(e.target.value)}
className="h-full w-full resize-none bg-background p-4 font-mono text-sm text-foreground outline-none"
spellCheck={false}
/>
</div>
<textarea
value={code}
onChange={(e) => setCode(e.target.value)}
className="w-full h-80 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
spellCheck={false}
/>
<div className="flex justify-between items-center mt-4">
<div className="text-sm text-gray-400">
Function: <code className="text-blue-400">{problem.function_name}</code>
</div>
<div className="flex space-x-3">
<div className="h-[38%] min-h-[220px]">
<div className="flex border-b border-border text-sm">
<button
onClick={runCode}
disabled={isRunning || !code.trim()}
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
onClick={() => setBottomTab('testcase')}
className={`px-4 py-2 ${bottomTab === 'testcase' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
<Play className="h-4 w-4" />
<span>{isRunning ? 'Running...' : 'Run Code'}</span>
Testcase
</button>
<button
onClick={submitSolution}
disabled={isSubmitting || !code.trim()}
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
onClick={() => setBottomTab('result')}
className={`px-4 py-2 ${bottomTab === 'result' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
<CheckCircle className="h-4 w-4" />
<span>{isSubmitting ? 'Submitting...' : 'Submit'}</span>
Test Result
</button>
</div>
</div>
</div>
{/* Output & Test Results */}
<div className="bg-gray-800 rounded-lg p-6">
<h3 className="text-lg font-bold mb-4">Output & Test Results</h3>
{/* Console Output */}
{output && (
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-400 mb-2">Console Output:</h4>
<div className="bg-black p-4 rounded font-mono text-sm">
<pre className="text-green-400 whitespace-pre-wrap">{output}</pre>
</div>
</div>
)}
{/* Test Results */}
{testResults.length > 0 && (
<div>
<h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
<div className="space-y-2">
{testResults.map((result, index) => (
<div
key={index}
className={`p-3 rounded flex items-center justify-between ${
result.passed ? 'bg-green-900 border border-green-600' : 'bg-red-900 border border-red-600'
}`}
>
<div className="flex items-center space-x-2">
{result.passed ? (
<CheckCircle className="h-4 w-4 text-green-400" />
) : (
<XCircle className="h-4 w-4 text-red-400" />
)}
<span className="text-sm">Test {index + 1}</span>
</div>
<div className="text-right text-sm">
{result.passed ? (
<span className="text-green-400">Passed</span>
) : (
<span className="text-red-400">Failed: {result.error}</span>
)}
</div>
<div className="h-[calc(100%-41px)] overflow-y-auto p-4">
{bottomTab === 'testcase' && (
<div className="space-y-3">
<label className="text-xs font-medium text-muted-foreground">Custom Input</label>
<textarea
value={customInput}
onChange={(e) => setCustomInput(e.target.value)}
className="h-24 w-full rounded border border-border bg-secondary/40 p-3 font-mono text-sm text-foreground outline-none"
placeholder="Enter custom testcase input"
/>
<p className="text-xs text-muted-foreground">Function: <code className="text-primary">{problem.function_name}</code></p>
<div className="flex gap-2">
<button
onClick={runCode}
disabled={isRunning || !code.trim()}
className="inline-flex items-center gap-2 rounded bg-secondary px-3 py-2 text-sm text-secondary-foreground hover:bg-accent disabled:opacity-60"
>
<Play className="h-4 w-4" />
{isRunning ? 'Running...' : 'Run'}
</button>
<button
onClick={submitSolution}
disabled={isSubmitting || !code.trim()}
className="inline-flex items-center gap-2 rounded bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
>
<CheckCircle className="h-4 w-4" />
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</div>
))}
</div>
</div>
)}
</div>
)}
{!output && testResults.length === 0 && (
<div className="text-center text-gray-400 py-8">
<Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>Run your code to see output and test results</p>
{bottomTab === 'result' && (
<div className="space-y-3">
{output && (
<div className="rounded border border-border bg-secondary/40 p-3">
<p className="mb-2 text-xs text-muted-foreground">Console</p>
<pre className="whitespace-pre-wrap text-sm text-foreground">{output}</pre>
</div>
)}
{testResults.length > 0 && (
<div className="space-y-2">
<p className="text-xs text-muted-foreground">Passed {passedCount}/{testResults.length} tests</p>
{testResults.map((result, index) => (
<div
key={index}
className={`flex items-center justify-between rounded border px-3 py-2 text-sm ${
result.passed
? 'border-emerald-300 bg-emerald-100 text-emerald-800 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
: 'border-red-300 bg-red-100 text-red-800 dark:border-red-700 dark:bg-red-950/40 dark:text-red-300'
}`}
>
<span className="flex items-center gap-2">
{result.passed ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
Test {index + 1}
</span>
<span>{result.passed ? 'Passed' : `Failed${result.error ? `: ${result.error}` : ''}`}</span>
</div>
))}
</div>
)}
{!output && testResults.length === 0 && (
<div className="py-8 text-center text-muted-foreground">
<Clock className="mx-auto mb-2 h-8 w-8 opacity-60" />
Run your code to see results.
</div>
)}
</div>
)}
</div>
)}
</div>
</div>
</section>
</div>
</div>
</main>
</div>
)
}
frontend/app/coding/exam/[examCode]/page.tsx
+168 -237
View File
@@ -1,7 +1,7 @@
'use client'
import React, { useState, useEffect, useCallback, useRef } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield, TestTube } from 'lucide-react'
import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Shield, TestTube } from 'lucide-react'
interface Participant {
name: string
@@ -54,6 +54,8 @@ export default function EnhancedExamInterface() {
const [hasSubmitted, setHasSubmitted] = useState(false)
const [examStats, setExamStats] = useState<any>({})
const [timerInitialized, setTimerInitialized] = useState(false)
const [leftTab, setLeftTab] = useState<'description' | 'examples' | 'constraints'>('description')
const [rightTab, setRightTab] = useState<'result' | 'leaderboard'>('result')
// ✅ CRITICAL FIX: Use refs to prevent infinite loops
const intervalRef = useRef<NodeJS.Timeout | null>(null)
@@ -62,11 +64,11 @@ export default function EnhancedExamInterface() {
const isInitializedRef = useRef(false)
const languageIcons: {[key: string]: string} = {
python: '🐍',
java: '☕',
javascript: '🟨',
c: '⚡',
bash: '💻'
python: 'Py',
java: 'Java',
javascript: 'JS',
c: 'C',
bash: 'Sh'
}
// ✅ FIXED: Memoized functions to prevent recreation
@@ -199,7 +201,7 @@ export default function EnhancedExamInterface() {
setTimeRemaining(prev => {
const newTime = Math.max(0, prev - 1)
if (newTime === 0) {
alert('⏰ Time is up! Exam has ended.')
alert('Time is up. Exam has ended.')
}
return newTime
})
@@ -255,12 +257,12 @@ export default function EnhancedExamInterface() {
const result = await response.json()
if (result.success) {
setOutput(`✅ Output:\n${result.output}`)
setOutput(`Output:\n${result.output}`)
if (result.execution_time) {
setOutput(prev => prev + `\n⏱️ Execution time: ${result.execution_time}s`)
setOutput(prev => prev + `\nExecution time: ${result.execution_time}s`)
}
} else {
setOutput(`❌ Error:\n${result.error}`)
setOutput(`Error:\n${result.error}`)
}
} catch (error) {
setOutput(`Execution failed: ${(error as Error).message}`)
@@ -313,15 +315,15 @@ export default function EnhancedExamInterface() {
setHasSubmitted(true)
setTestResults(data.result?.test_results || [])
let alertMessage = `🎉 Solution submitted successfully!\n\n`
alertMessage += `📊 Overall Score: ${data.result?.score || 0}%\n`
alertMessage += `✅ Tests Passed: ${data.result?.passed_tests || 0}/${data.result?.total_tests || 1}\n`
let alertMessage = `Solution submitted successfully.\n\n`
alertMessage += `Overall Score: ${data.result?.score || 0}%\n`
alertMessage += `Tests Passed: ${data.result?.passed_tests || 0}/${data.result?.total_tests || 1}\n`
if (data.result?.execution_time) {
alertMessage += `⏱️ Execution Time: ${data.result.execution_time}s\n`
alertMessage += `Execution Time: ${data.result.execution_time}s\n`
}
alertMessage += `\n🏆 Check the leaderboard for your ranking!`
alertMessage += `\nCheck the leaderboard for your ranking.`
alert(alertMessage)
// ✅ FIXED: Controlled refresh sequence - clear previous timeouts
@@ -342,12 +344,12 @@ export default function EnhancedExamInterface() {
refreshTimeoutRefs.current.push(refreshTimeout)
} else {
alert(`❌ Submission failed: ${data.error}`)
alert(`Submission failed: ${data.error}`)
}
} catch (error) {
console.error('❌ Submit network error:', error)
alert('❌ Network error: Could not submit solution. Please try again.')
console.error('Submit network error:', error)
alert('Network error: Could not submit solution. Please try again.')
} finally {
setIsSubmitting(false)
}
@@ -364,9 +366,9 @@ export default function EnhancedExamInterface() {
if (!results || results.length === 0) return null
return (
<div className="mt-6 bg-gray-900 p-4 rounded border border-gray-600">
<h4 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
<TestTube className="h-5 w-5 text-blue-400" />
<div className="mt-6 rounded border border-border bg-secondary/40 p-4">
<h4 className="mb-4 flex items-center space-x-2 text-lg font-semibold text-foreground">
<TestTube className="h-5 w-5 text-primary" />
<span>Test Results</span>
</h4>
@@ -383,9 +385,9 @@ export default function EnhancedExamInterface() {
<div className="flex justify-between items-start mb-2">
<div className="flex items-center space-x-2">
<span className="font-semibold">
Test {index + 1}: {result.passed ? '✅ PASSED' : '❌ FAILED'}
Test {index + 1}: {result.passed ? 'PASSED' : 'FAILED'}
</span>
<span className="text-sm bg-black bg-opacity-30 px-2 py-1 rounded font-bold">
<span className="rounded bg-secondary px-2 py-1 text-sm font-bold text-secondary-foreground">
+{result.points_earned || 0} points
</span>
</div>
@@ -399,7 +401,7 @@ export default function EnhancedExamInterface() {
{result.input && (
<div>
<span className="font-medium">Input:</span>
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
<code className="ml-2 rounded bg-secondary px-2 py-1 text-secondary-foreground">
"{result.input}"
</code>
</div>
@@ -408,7 +410,7 @@ export default function EnhancedExamInterface() {
{result.expected_output && (
<div>
<span className="font-medium">Expected:</span>
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
<code className="ml-2 rounded bg-secondary px-2 py-1 text-secondary-foreground">
"{result.expected_output}"
</code>
</div>
@@ -417,7 +419,7 @@ export default function EnhancedExamInterface() {
{result.actual_output && (
<div>
<span className="font-medium">Your Output:</span>
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
<code className="ml-2 rounded bg-secondary px-2 py-1 text-secondary-foreground">
"{result.actual_output}"
</code>
</div>
@@ -425,7 +427,7 @@ export default function EnhancedExamInterface() {
</div>
{!result.passed && result.error && (
<div className="mt-2 p-2 bg-red-800 bg-opacity-50 rounded text-sm">
<div className="mt-2 rounded bg-red-100 p-2 text-sm text-red-800 dark:bg-red-900/40 dark:text-red-200">
<span className="font-medium">Error:</span> {result.error}
</div>
)}
@@ -455,270 +457,199 @@ export default function EnhancedExamInterface() {
if (!examSession || !problem) {
return (
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
<div className="min-h-screen bg-background text-foreground flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
<p className="mt-2 text-gray-400">Loading exam interface...</p>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="mt-2 text-muted-foreground">Loading exam interface...</p>
</div>
</div>
)
}
return (
<div className="min-h-screen bg-gray-900 text-white">
{/* Header with Timer */}
<div className="bg-gray-800 border-b border-gray-700 p-4">
<div className="max-w-7xl mx-auto flex justify-between items-center">
<div className="min-h-screen bg-background text-foreground">
<header className="border-b border-border bg-card px-4 py-3">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h1 className="text-xl font-bold">{problem.title}</h1>
<p className="text-gray-400">Code: {examCode} | Participant: {examSession.student_name}</p>
<h1 className="text-lg font-semibold">{problem.title}</h1>
<p className="text-xs text-muted-foreground">Code: {examCode} | Participant: {examSession.student_name}</p>
</div>
<div className="flex items-center space-x-4">
{/* Timer */}
<div className="flex items-center gap-3">
{timeRemaining > 0 && (
<div className={`flex items-center space-x-2 px-3 py-1 rounded-lg ${
timeRemaining <= 300 ? 'bg-red-900' : timeRemaining <= 600 ? 'bg-yellow-900' : 'bg-green-900'
<div className={`rounded-md px-3 py-1 text-sm font-mono ${
timeRemaining <= 300 ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' : timeRemaining <= 600 ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
}`}>
<Clock className={`h-5 w-5 ${
timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
}`} />
<span className={`font-mono text-lg ${
timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
}`}>
{formatTime(timeRemaining)}
</span>
<span className="inline-flex items-center gap-1"><Clock className="h-4 w-4" /> {formatTime(timeRemaining)}</span>
</div>
)}
{/* Participant Count */}
<div className="flex items-center space-x-2">
<Users className="h-5 w-5 text-blue-400" />
<span>{examStats.total_participants || 0} participants</span>
<div className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-sm text-muted-foreground">
<Users className="h-4 w-4" /> {examStats.total_participants || 0}
</div>
{/* Submission Status Indicator */}
{hasSubmitted && (
<div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
<Shield className="h-4 w-4 text-green-400" />
<span className="text-green-200 text-sm">✅ Submitted</span>
<div className="inline-flex items-center gap-1 rounded-md bg-emerald-100 px-2 py-1 text-sm text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
<Shield className="h-4 w-4" /> Submitted
</div>
)}
</div>
</div>
</div>
</header>
<div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Problem & Code Editor */}
<div className="lg:col-span-2 space-y-6">
{/* Problem Description */}
<div className="bg-gray-800 rounded-lg p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold">{problem.title}</h2>
{hasSubmitted && (
<div className="flex items-center space-x-1 text-green-400 text-sm">
<Shield className="h-4 w-4" />
<span>Solution Submitted</span>
<main className="h-[calc(100vh-73px)] p-3">
<div className="grid h-full grid-cols-1 gap-3 xl:grid-cols-5">
<section className="xl:col-span-2 flex min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
<div className="flex border-b border-border text-sm">
<button onClick={() => setLeftTab('description')} className={`px-4 py-2 ${leftTab === 'description' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground'}`}>Description</button>
<button onClick={() => setLeftTab('examples')} className={`px-4 py-2 ${leftTab === 'examples' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground'}`}>Examples</button>
<button onClick={() => setLeftTab('constraints')} className={`px-4 py-2 ${leftTab === 'constraints' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground'}`}>Constraints</button>
</div>
<div className="min-h-0 flex-1 overflow-y-auto p-4 text-sm text-muted-foreground">
{leftTab === 'description' && <p className="leading-7">{problem.description}</p>}
{leftTab === 'examples' && (
<div className="space-y-3">
{problem.examples.map((example, index) => (
<div key={index} className="rounded-lg border border-border bg-secondary/40 p-3">
<p className="font-medium text-foreground">Example {index + 1}</p>
<p className="mt-1"><span className="text-muted-foreground">Input:</span> <code className="text-primary">{example.input}</code></p>
<p><span className="text-muted-foreground">Output:</span> <code className="text-primary">{example.expected_output}</code></p>
{example.description ? <p className="mt-1 text-xs text-muted-foreground">{example.description}</p> : null}
</div>
))}
</div>
)}
{leftTab === 'constraints' && (
<ul className="space-y-2">
{problem.constraints.map((constraint, index) => (
<li key={index} className="rounded border border-border bg-secondary/40 px-3 py-2">{constraint}</li>
))}
</ul>
)}
</div>
<div className="prose prose-invert">
<p className="mb-4 text-gray-300">{problem.description}</p>
<h4 className="text-lg font-semibold mb-2">Examples:</h4>
{problem.examples.map((example, index) => (
<div key={index} className="bg-gray-900 p-4 rounded mb-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div>
<span className="text-blue-400">Input:</span>
<code className="ml-2 text-green-400">"{example.input}"</code>
</div>
<div>
<span className="text-blue-400">Output:</span>
<code className="ml-2 text-green-400">"{example.expected_output}"</code>
</div>
</div>
{example.description && (
<div className="mt-2 text-gray-400 text-sm">{example.description}</div>
)}
</div>
))}
</section>
<h4 className="text-lg font-semibold mb-2">Constraints:</h4>
<ul className="list-disc list-inside mb-4 text-gray-300">
{problem.constraints.map((constraint, index) => (
<li key={index}>{constraint}</li>
))}
</ul>
</div>
</div>
{/* Code Editor */}
<div className="bg-gray-800 rounded-lg p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-bold">Your Solution</h3>
{/* Language Selector */}
<div className="flex items-center space-x-2">
<Code className="h-4 w-4 text-gray-400" />
<section className="xl:col-span-3 flex min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-2">
<div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
<Code className="h-4 w-4" />
<select
value={selectedLanguage}
onChange={(e) => handleLanguageChange(e.target.value)}
disabled={hasSubmitted}
className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
className="rounded border border-border bg-secondary px-2 py-1 text-sm text-secondary-foreground"
>
{problem.languages.map(lang => (
<option key={lang} value={lang}>
{languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
</option>
<option key={lang} value={lang}>{languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}</option>
))}
</select>
<span className="text-xs text-muted-foreground">Function: {problem.function_name}</span>
</div>
</div>
<textarea
value={code}
onChange={(e) => setCode(e.target.value)}
className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
disabled={hasSubmitted}
spellCheck={false}
placeholder={hasSubmitted ? 'Solution submitted!' : `Write your ${selectedLanguage} solution here...`}
/>
<div className="flex justify-between items-center mt-4">
<div className="text-sm text-gray-400">
Function: <code className="text-blue-400">{problem.function_name}</code>
{hasSubmitted && (
<span className="ml-4 text-green-400">
✅ Solution submitted successfully!
</span>
)}
</div>
<div className="flex space-x-3">
<div className="flex items-center gap-2">
<button
onClick={runCode}
disabled={isRunning || hasSubmitted || !code.trim()}
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
className="inline-flex items-center gap-1 rounded bg-secondary px-3 py-1.5 text-sm text-secondary-foreground hover:bg-accent disabled:opacity-60"
>
<Play className="h-4 w-4" />
<span>{isRunning ? 'Running...' : 'Test Code'}</span>
<Play className="h-4 w-4" /> {isRunning ? 'Running...' : 'Run'}
</button>
<button
onClick={submitSolution}
onClick={submitSolution}
disabled={isSubmitting || hasSubmitted || !code.trim()}
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
className="inline-flex items-center gap-1 rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
>
<Send className="h-4 w-4" />
<span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted ✅' : 'Submit Solution'}</span>
<Send className="h-4 w-4" /> {isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit'}
</button>
</div>
</div>
{/* Output Display */}
{output && (
<div className="mt-6 bg-gray-900 p-4 rounded">
<h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
<pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
</div>
)}
</div>
{/* Test Results Display */}
{testResults.length > 0 && (
<TestResultsDisplay results={testResults} />
)}
</div>
{/* Enhanced Leaderboard */}
<div className="bg-gray-800 rounded-lg p-6">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-2">
<Trophy className="h-6 w-6 text-yellow-400" />
<h3 className="text-xl font-bold">Live Leaderboard</h3>
<div className="min-h-0 flex-1 border-b border-border">
<textarea
value={code}
onChange={(e) => setCode(e.target.value)}
className="h-full w-full resize-none bg-background p-4 font-mono text-sm text-foreground outline-none"
disabled={hasSubmitted}
spellCheck={false}
placeholder={hasSubmitted ? 'Solution submitted.' : `Write your ${selectedLanguage} solution here...`}
/>
</div>
<button
onClick={manualRefresh}
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
title="Refresh"
>
<RefreshCw className="h-4 w-4" />
</button>
</div>
{/* Stats */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-gray-900 p-3 rounded">
<div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
<div className="text-xs text-gray-400">Submitted</div>
</div>
<div className="bg-gray-900 p-3 rounded">
<div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
<div className="text-xs text-gray-400">Avg Score</div>
</div>
</div>
{/* Leaderboard Display */}
<div className="space-y-2">
<h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
{leaderboard.length > 0 ? (
leaderboard.map((participant) => (
<div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
<div className="flex justify-between items-center">
<div className="flex items-center space-x-3">
<span className="font-bold text-lg">#{participant.rank}</span>
<div>
<div className={`font-medium ${participant.name === examSession.student_name ? 'underline font-bold' : ''}`}>
{participant.name}
{participant.name === examSession.student_name && ' (You) 🎯'}
</div>
<div className="text-xs opacity-75 flex items-center space-x-2">
{participant.language && (
<span>
{languageIcons[participant.language]} {participant.language}
</span>
)}
</div>
</div>
</div>
<div className="text-right">
<span className="font-bold text-lg">{participant.score}%</span>
<div className="text-xs opacity-75">
Submitted ✅
</div>
</div>
</div>
<div className="h-[40%] min-h-[240px]">
<div className="flex items-center justify-between border-b border-border px-2">
<div className="flex text-sm">
<button onClick={() => setRightTab('result')} className={`px-3 py-2 ${rightTab === 'result' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground'}`}>Test Result</button>
<button onClick={() => setRightTab('leaderboard')} className={`px-3 py-2 ${rightTab === 'leaderboard' ? 'border-b-2 border-primary text-foreground' : 'text-muted-foreground'}`}>Leaderboard</button>
</div>
))
) : (
<div className="text-center text-gray-400 py-4">
No submissions yet
{rightTab === 'leaderboard' && (
<button onClick={manualRefresh} className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground" title="Refresh">
<RefreshCw className="h-4 w-4" />
</button>
)}
</div>
)}
</div>
{/* Waiting Participants */}
{waitingParticipants.length > 0 && (
<div className="mt-6">
<h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
<div className="space-y-1">
{waitingParticipants.map((participant) => (
<div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
<span>
{participant.name}
{participant.name === examSession.student_name && ' (You)'}
</span>
<span className="text-yellow-400 text-xs">Working...</span>
<div className="h-[calc(100%-41px)] overflow-y-auto p-4">
{rightTab === 'result' && (
<div className="space-y-3">
{output ? (
<div className="rounded border border-border bg-secondary/40 p-3">
<pre className="whitespace-pre-wrap text-sm text-foreground">{output}</pre>
</div>
) : (
<p className="text-sm text-muted-foreground">Run your code to see output.</p>
)}
{testResults.length > 0 ? <TestResultsDisplay results={testResults} /> : null}
</div>
))}
)}
{rightTab === 'leaderboard' && (
<div className="space-y-4">
<div className="grid grid-cols-2 gap-3">
<div className="rounded border border-border bg-secondary/40 p-3">
<p className="text-xl font-bold text-primary">{examStats.completed_submissions || 0}</p>
<p className="text-xs text-muted-foreground">Submitted</p>
</div>
<div className="rounded border border-border bg-secondary/40 p-3">
<p className="text-xl font-bold text-emerald-600 dark:text-emerald-400">{Math.round(examStats.average_score || 0)}%</p>
<p className="text-xs text-muted-foreground">Average Score</p>
</div>
</div>
<div className="space-y-2">
<h4 className="inline-flex items-center gap-2 text-sm font-semibold text-foreground"><Trophy className="h-4 w-4 text-yellow-500" /> Rankings</h4>
{leaderboard.length > 0 ? leaderboard.map((participant) => (
<div key={participant.name} className={`rounded p-3 ${getRankColor(participant.rank)}`}>
<div className="flex items-center justify-between">
<div>
<p className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
#{participant.rank} {participant.name}{participant.name === examSession.student_name ? ' (You)' : ''}
</p>
<p className="text-xs opacity-80">{participant.language || 'language'} • submitted</p>
</div>
<p className="font-semibold">{participant.score}%</p>
</div>
</div>
)) : <p className="text-sm text-muted-foreground">No submissions yet.</p>}
</div>
{waitingParticipants.length > 0 && (
<div>
<h4 className="mb-2 text-sm font-semibold text-foreground">Still Working</h4>
<div className="space-y-1">
{waitingParticipants.map((participant) => (
<div key={participant.name} className="flex items-center justify-between rounded bg-secondary px-3 py-2 text-sm text-secondary-foreground">
<span>{participant.name}{participant.name === examSession.student_name ? ' (You)' : ''}</span>
<span className="text-xs text-amber-600 dark:text-amber-300">Working...</span>
</div>
))}
</div>
</div>
)}
</div>
)}
</div>
</div>
)}
</section>
</div>
</div>
</main>
</div>
)
}
frontend/app/coding/exam/page.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export default function ExamLandingPage() {
onChange={(e) => setExamCode(e.target.value.toUpperCase())}
onKeyPress={handleKeyPress}
placeholder="Enter exam code (e.g. ABC123)"
className="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-lg text-center text-xl font-mono tracking-widest"
className="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-lg text-center text-xl font-mono tracking-widest text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
maxLength={6}
/>
<button
frontend/app/coding/join/page.tsx
+9 -2
View File
@@ -27,10 +27,16 @@ export default function JoinExam() {
setLoading(true)
try {
const token = localStorage.getItem("openlearnx_jwt_token")
const storedUserRaw = localStorage.getItem("openlearnx_user")
const storedUser = storedUserRaw ? JSON.parse(storedUserRaw) : null
// ✅ CORRECT FIELD NAMES - Must match backend expectations
const payload = {
exam_code: examCode.trim().toUpperCase(), // Backend expects exam_code
student_name: studentName.trim() // Backend expects student_name
student_name: studentName.trim(), // Backend expects student_name
wallet_address: storedUser?.wallet_address,
user_id: storedUser?.id
}
console.log('🚀 Sending payload:', payload)
@@ -39,7 +45,8 @@ export default function JoinExam() {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
'Accept': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {})
},
body: JSON.stringify(payload) // ✅ MUST stringify the payload
})
frontend/app/coding/page.tsx
+48 -48
View File
@@ -289,7 +289,7 @@ Redirecting to exam interface...`)
// Role Selection Screen with Enhanced Animations
if (userRole === 'selector') {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 flex items-center justify-center relative overflow-hidden animate-fade-in">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:bg-gradient-to-br dark:from-[#1b3760] dark:via-[#24467d] dark:to-[#4a2f86] flex items-center justify-center relative overflow-hidden animate-fade-in">
{/* Animated Background Elements */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-white rounded-full animate-float"></div>
@@ -310,7 +310,7 @@ Redirecting to exam interface...`)
<Star className="w-4 h-4 text-white opacity-50 animate-spin-slow" />
</div>
<div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-10 max-w-lg w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group">
<div className="bg-white/95 dark:bg-[#22314a]/95 backdrop-blur-sm rounded-2xl shadow-2xl p-10 max-w-lg w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group border border-gray-200 dark:border-blue-300/20">
{/* Card shine effect */}
<div className="absolute inset-0 -translate-x-full group-hover:translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000"></div>
@@ -319,10 +319,10 @@ Redirecting to exam interface...`)
<div className="flex justify-center mb-4 animate-bounce">
<Code className="h-16 w-16 text-blue-600 animate-pulse" />
</div>
<h1 className="text-3xl font-bold text-gray-800 mb-3 animate-slide-down">
<h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-3 animate-slide-down">
OpenLearnX Coding Exam
</h1>
<p className="text-gray-600 animate-fade-in animate-delay-300">
<p className="text-gray-600 dark:text-gray-300 animate-fade-in animate-delay-300">
Choose your role to get started
</p>
</div>
@@ -330,7 +330,7 @@ Redirecting to exam interface...`)
<div className="space-y-6">
<button
onClick={() => setUserRole('host')}
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-4 px-6 rounded-xl flex items-center justify-center space-x-3 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 animate-slide-up group relative overflow-hidden"
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 dark:from-blue-700 dark:to-blue-800 hover:from-blue-700 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-900 text-white py-4 px-6 rounded-xl flex items-center justify-center space-x-3 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 animate-slide-up group relative overflow-hidden"
style={{ animationDelay: '0.1s' }}
>
{/* Button background animation */}
@@ -349,7 +349,7 @@ Redirecting to exam interface...`)
<button
onClick={() => setUserRole('participant')}
className="w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white py-4 px-6 rounded-xl flex items-center justify-center space-x-3 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 animate-slide-up group relative overflow-hidden"
className="w-full bg-gradient-to-r from-green-600 to-green-700 dark:from-green-700 dark:to-green-800 hover:from-green-700 hover:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900 text-white py-4 px-6 rounded-xl flex items-center justify-center space-x-3 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 animate-slide-up group relative overflow-hidden"
style={{ animationDelay: '0.2s' }}
>
{/* Button background animation */}
@@ -369,7 +369,7 @@ Redirecting to exam interface...`)
{/* Animated footer */}
<div className="mt-8 text-center animate-fade-in animate-delay-500">
<p className="text-sm text-gray-500 hover:text-gray-700 transition-colors duration-300">
<p className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-300">
Secure • Real-time • Professional
</p>
</div>
@@ -382,7 +382,7 @@ Redirecting to exam interface...`)
// Host Setup Screen with Enhanced UI
if (userRole === 'host' && !examId) {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 flex items-center justify-center relative overflow-hidden animate-fade-in">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:bg-gradient-to-br dark:from-[#1b3760] dark:via-[#24467d] dark:to-[#4a2f86] flex items-center justify-center relative overflow-hidden animate-fade-in">
{/* Enhanced background animations */}
<div className="absolute inset-0 opacity-5">
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full mix-blend-overlay animate-blob"></div>
@@ -398,7 +398,7 @@ Redirecting to exam interface...`)
<Zap className="w-6 h-6 text-white opacity-20 animate-bounce" />
</div>
<div className="bg-white/95 backdrop-blur-lg rounded-3xl shadow-2xl p-12 max-w-xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group">
<div className="bg-white/95 dark:bg-[#22314a]/95 backdrop-blur-lg rounded-3xl shadow-2xl p-12 max-w-xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group border border-gray-200 dark:border-blue-300/20">
{/* Enhanced shine effect */}
<div className="absolute inset-0 -translate-x-full group-hover:translate-x-full bg-gradient-to-r from-transparent via-blue-200/30 to-transparent transition-transform duration-1000"></div>
@@ -412,10 +412,10 @@ Redirecting to exam interface...`)
<div className="absolute -top-2 -right-2 w-3 h-3 bg-blue-400 rounded-full animate-ping"></div>
<div className="absolute -bottom-2 -left-2 w-2 h-2 bg-blue-300 rounded-full animate-ping animation-delay-500"></div>
</div>
<h1 className="text-4xl font-bold text-gray-800 mb-4 animate-slide-down">
<h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-4 animate-slide-down">
Host Coding Exam
</h1>
<p className="text-gray-600 text-lg animate-fade-in animate-delay-300">
<p className="text-gray-600 dark:text-gray-300 text-lg animate-fade-in animate-delay-300">
Create a secure coding environment for your participants
</p>
</div>
@@ -427,7 +427,7 @@ Redirecting to exam interface...`)
placeholder="Enter your name"
value={participantName}
onChange={(e) => setParticipantName(e.target.value)}
className="w-full p-4 border-2 border-gray-200 rounded-xl text-lg transition-all duration-300 focus:ring-4 focus:ring-blue-200 focus:border-blue-500 hover:border-blue-300 bg-gray-50 hover:bg-white focus:bg-white group"
className="w-full p-4 border-2 border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 rounded-xl text-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 focus:border-blue-500 dark:focus:border-blue-400 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-white dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-700 group"
/>
{/* Input decoration */}
<div className="absolute right-4 top-1/2 transform -translate-y-1/2 opacity-0 group-focus-within:opacity-100 transition-opacity duration-300">
@@ -438,7 +438,7 @@ Redirecting to exam interface...`)
<button
onClick={createExam}
disabled={!participantName}
className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 disabled:from-gray-400 disabled:to-gray-500 text-white py-4 px-6 rounded-xl text-lg font-semibold transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 disabled:hover:scale-100 animate-slide-up group relative overflow-hidden"
className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700 hover:from-blue-700 hover:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800 disabled:from-gray-400 disabled:to-gray-500 text-white py-4 px-6 rounded-xl text-lg font-semibold transform transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 disabled:hover:scale-100 animate-slide-up group relative overflow-hidden"
style={{ animationDelay: '0.2s' }}
>
{/* Button animation background */}
@@ -455,7 +455,7 @@ Redirecting to exam interface...`)
</div>
{/* Enhanced Debug Info */}
<div className="mt-8 p-6 bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl text-sm text-gray-600 animate-fade-in border border-gray-200 hover:border-blue-300 transition-colors duration-300" style={{ animationDelay: '0.3s' }}>
<div className="mt-8 p-6 bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-800 rounded-xl text-sm text-gray-600 dark:text-gray-300 animate-fade-in border border-gray-200 dark:border-gray-600 hover:border-blue-300 dark:hover:border-blue-500 transition-colors duration-300" style={{ animationDelay: '0.3s' }}>
<div className="flex items-center space-x-2 mb-3">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<span className="font-semibold">System Status</span>
@@ -484,7 +484,7 @@ Redirecting to exam interface...`)
// Join Exam Screen with Enhanced Animations
if (userRole === 'participant' && !examInfo) {
return (
<div className="min-h-screen bg-gradient-to-br from-green-900 via-emerald-900 to-blue-900 flex items-center justify-center relative overflow-hidden animate-fade-in">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-green-50 to-blue-50 dark:bg-gradient-to-br dark:from-[#1b3760] dark:via-[#1f4f63] dark:to-[#274f80] flex items-center justify-center relative overflow-hidden animate-fade-in">
{/* Enhanced background effects */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-40 h-40 bg-white rounded-full animate-float hover:scale-150 transition-transform duration-500"></div>
@@ -499,7 +499,7 @@ Redirecting to exam interface...`)
<div className="absolute top-1/2 left-1/5 w-2.5 h-2.5 bg-white rounded-full animate-pulse animate-delay-700 opacity-50"></div>
</div>
<div className="bg-white/95 backdrop-blur-lg rounded-3xl shadow-2xl p-12 max-w-xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group">
<div className="bg-white/95 dark:bg-[#22314a]/95 backdrop-blur-lg rounded-3xl shadow-2xl p-12 max-w-xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 relative overflow-hidden group border border-gray-200 dark:border-blue-300/20">
{/* Enhanced card effects */}
<div className="absolute inset-0 -translate-x-full group-hover:translate-x-full bg-gradient-to-r from-transparent via-green-200/30 to-transparent transition-transform duration-1000"></div>
@@ -513,10 +513,10 @@ Redirecting to exam interface...`)
<div className="absolute inset-0 border-4 border-green-300 rounded-full animate-ping opacity-30"></div>
<div className="absolute inset-2 border-2 border-green-400 rounded-full animate-ping opacity-40 animation-delay-500"></div>
</div>
<h1 className="text-4xl font-bold text-gray-800 mb-4 animate-slide-down">
<h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-4 animate-slide-down">
Join Coding Exam
</h1>
<p className="text-gray-600 text-lg animate-fade-in animate-delay-300">
<p className="text-gray-600 dark:text-gray-300 text-lg animate-fade-in animate-delay-300">
Enter the exam code to participate in the coding challenge
</p>
</div>
@@ -528,7 +528,7 @@ Redirecting to exam interface...`)
placeholder="Enter exam code (e.g., 3BPIBZ)"
value={examId}
onChange={(e) => setExamId(e.target.value.toUpperCase())}
className="w-full p-4 border-2 border-gray-200 rounded-xl text-center font-mono text-2xl tracking-widest uppercase transition-all duration-300 focus:ring-4 focus:ring-green-200 focus:border-green-500 hover:border-green-300 bg-gray-50 hover:bg-white focus:bg-white relative group"
className="w-full p-4 border-2 border-gray-200 dark:border-gray-600 rounded-xl text-center font-mono text-2xl tracking-widest uppercase text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300 focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 focus:border-green-500 dark:focus:border-green-400 hover:border-green-300 dark:hover:border-green-500 bg-gray-50 dark:bg-gray-700 hover:bg-white dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-700 relative group"
maxLength={6}
/>
{/* Input decorations */}
@@ -546,7 +546,7 @@ Redirecting to exam interface...`)
placeholder="Enter your name"
value={participantName}
onChange={(e) => setParticipantName(e.target.value)}
className="w-full p-4 border-2 border-gray-200 rounded-xl text-lg transition-all duration-300 focus:ring-4 focus:ring-green-200 focus:border-green-500 hover:border-green-300 bg-gray-50 hover:bg-white focus:bg-white group"
className="w-full p-4 border-2 border-gray-200 dark:border-gray-600 rounded-xl text-lg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300 focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 focus:border-green-500 dark:focus:border-green-400 hover:border-green-300 dark:hover:border-green-500 bg-gray-50 dark:bg-gray-700 hover:bg-white dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-700 group"
/>
{/* Name validation indicator */}
{participantName.length > 2 && (
@@ -579,7 +579,7 @@ Redirecting to exam interface...`)
</button>
{/* Enhanced Debug Info */}
<div className="text-sm text-gray-500 p-6 bg-gradient-to-r from-gray-50 to-green-50 rounded-xl animate-fade-in border border-gray-200 hover:border-green-300 transition-colors duration-300" style={{ animationDelay: '0.4s' }}>
<div className="text-sm text-gray-500 dark:text-gray-400 p-6 bg-gradient-to-r from-gray-50 to-green-50 dark:from-gray-700 dark:to-green-800 rounded-xl animate-fade-in border border-gray-200 dark:border-gray-600 hover:border-green-300 dark:hover:border-green-500 transition-colors duration-300" style={{ animationDelay: '0.4s' }}>
<div className="flex items-center space-x-2 mb-3">
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
<span className="font-semibold">Connection Status</span>
@@ -605,7 +605,7 @@ Redirecting to exam interface...`)
// Enhanced System Requirements Check
if (!systemChecked) {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-red-900 to-black text-white flex items-center justify-center relative overflow-hidden animate-fade-in">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:bg-gradient-to-br dark:from-[#1b3760] dark:via-[#3f3b77] dark:to-[#4a2f86] text-gray-900 dark:text-white flex items-center justify-center relative overflow-hidden animate-fade-in">
{/* Animated warning elements */}
<div className="absolute inset-0 opacity-5">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-red-500 rounded-full animate-pulse"></div>
@@ -621,7 +621,7 @@ Redirecting to exam interface...`)
<Shield className="w-6 h-6 text-yellow-400 opacity-40 animate-bounce" />
</div>
<div className="bg-gray-800/95 backdrop-blur-lg rounded-3xl p-12 max-w-2xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 border border-red-500/30 relative overflow-hidden group">
<div className="bg-white dark:bg-[#22314a]/95 backdrop-blur-lg rounded-3xl p-12 max-w-2xl w-full transform animate-scale-in hover:scale-105 transition-all duration-500 border border-red-500/30 dark:border-red-400/30 relative overflow-hidden group">
{/* Security-themed background */}
<div className="absolute inset-0 bg-gradient-to-r from-red-900/20 to-yellow-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@@ -638,7 +638,7 @@ Redirecting to exam interface...`)
<h1 className="text-4xl font-bold mb-6 animate-slide-down">
System Requirements Check
</h1>
<p className="text-xl text-gray-300 animate-fade-in animate-delay-300">
<p className="text-xl text-gray-300 dark:text-gray-300 animate-fade-in animate-delay-300">
Preparing secure exam environment
</p>
</div>
@@ -648,7 +648,7 @@ Redirecting to exam interface...`)
<Shield className="h-8 w-8 text-green-400 animate-pulse" />
<div className="flex-1">
<span className="text-lg font-medium">Fullscreen mode support</span>
<p className="text-sm text-gray-400">Required for secure examination</p>
<p className="text-sm text-gray-400 dark:text-gray-400">Required for secure examination</p>
</div>
<CheckCircle className="h-6 w-6 text-green-400 animate-bounce" />
</div>
@@ -657,7 +657,7 @@ Redirecting to exam interface...`)
<Lock className="h-8 w-8 text-yellow-400 animate-bounce" />
<div className="flex-1">
<span className="text-lg font-medium">Copy/paste will be disabled</span>
<p className="text-sm text-gray-400">Prevents unauthorized assistance</p>
<p className="text-sm text-gray-400 dark:text-gray-400">Prevents unauthorized assistance</p>
</div>
<XCircle className="h-6 w-6 text-yellow-400 animate-pulse" />
</div>
@@ -666,7 +666,7 @@ Redirecting to exam interface...`)
<AlertTriangle className="h-8 w-8 text-red-400 animate-pulse" />
<div className="flex-1">
<span className="text-lg font-medium">Virtual environments will be detected</span>
<p className="text-sm text-gray-400">Ensures exam integrity</p>
<p className="text-sm text-gray-400 dark:text-gray-400">Ensures exam integrity</p>
</div>
<Shield className="h-6 w-6 text-red-400 animate-bounce" />
</div>
@@ -691,12 +691,12 @@ Redirecting to exam interface...`)
</button>
{/* Security notice */}
<div className="mt-6 p-4 bg-yellow-900/30 border border-yellow-500/50 rounded-xl animate-fade-in animate-delay-500">
<div className="mt-6 p-4 bg-yellow-900/30 border border-yellow-500/50 rounded-xl animate-fade-in animate-delay-500 dark:bg-yellow-900/30 dark:border-yellow-500/50">
<div className="flex items-center space-x-2 mb-2">
<AlertTriangle className="w-5 h-5 text-yellow-400 animate-pulse" />
<span className="font-semibold text-yellow-300">Security Notice</span>
</div>
<p className="text-sm text-yellow-200">
<p className="text-sm text-yellow-200 dark:text-yellow-200">
This exam uses advanced security measures. Browser restrictions will be enforced during the examination period.
</p>
</div>
@@ -708,7 +708,7 @@ Redirecting to exam interface...`)
// Enhanced Main Exam Interface
return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-black text-white animate-fade-in relative overflow-hidden">
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:bg-gradient-to-br dark:from-[#1b3760] dark:via-[#24467d] dark:to-[#4a2f86] text-gray-900 dark:text-white animate-fade-in relative overflow-hidden">
{/* Animated background elements */}
<div className="absolute inset-0 opacity-5">
<div className="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full mix-blend-overlay animate-blob"></div>
@@ -772,11 +772,11 @@ Redirecting to exam interface...`)
<div className="flex-1 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
</div>
<p className="mb-6 text-lg text-gray-300 animate-slide-up" style={{ animationDelay: '0.1s' }}>
<p className="mb-6 text-lg text-gray-300 dark:text-gray-300 animate-slide-up" style={{ animationDelay: '0.1s' }}>
Write a function that converts a string to uppercase.
</p>
<div className="bg-black/50 p-6 rounded-xl transform transition-all duration-300 hover:bg-black/60 animate-slide-up border border-gray-600 hover:border-blue-500/50" style={{ animationDelay: '0.2s' }}>
<div className="bg-blue-950/35 p-6 rounded-xl transform transition-all duration-300 hover:bg-blue-900/40 animate-slide-up border border-blue-300/25 hover:border-blue-300/60" style={{ animationDelay: '0.2s' }}>
<pre className="text-green-400 font-mono text-lg">
{`def capitalize_string(text):
# Your code here
@@ -807,11 +807,11 @@ Redirecting to exam interface...`)
{/* Editor status indicators */}
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2 px-3 py-1 bg-green-900/30 rounded-full">
<div className="flex items-center space-x-2 px-3 py-1 bg-green-900/30 rounded-full dark:bg-green-900/30">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span className="text-sm text-green-300">Ready</span>
<span className="text-sm text-green-300 dark:text-green-300">Ready</span>
</div>
<div className="text-sm text-gray-400 font-mono">
<div className="text-sm text-gray-400 dark:text-gray-400 font-mono">
Lines: {code.split('\n').length} | Chars: {code.length}
</div>
</div>
@@ -822,7 +822,7 @@ Redirecting to exam interface...`)
value={code}
onChange={(e) => setCode(e.target.value)}
placeholder="def capitalize_string(text):\n # Your code here\n pass"
className="w-full h-80 bg-black/70 text-green-400 font-mono p-6 rounded-xl border-2 border-gray-600 resize-none transition-all duration-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20 hover:border-gray-500 animate-slide-up backdrop-blur-sm"
className="w-full h-80 bg-blue-950/55 text-green-300 font-mono p-6 rounded-xl border-2 border-blue-300/25 resize-none transition-all duration-300 focus:border-green-400 focus:ring-4 focus:ring-green-500/20 hover:border-blue-300/50 animate-slide-up backdrop-blur-sm"
style={{
userSelect: 'none',
WebkitUserSelect: 'none',
@@ -842,7 +842,7 @@ Redirecting to exam interface...`)
</div>
{/* Line numbers overlay */}
<div className="absolute left-2 top-6 text-gray-500 font-mono text-sm select-none pointer-events-none">
<div className="absolute left-2 top-6 text-gray-500 dark:text-gray-600 font-mono text-sm select-none pointer-events-none">
{Array.from({ length: code.split('\n').length }, (_, i) => (
<div key={i} className="h-6 leading-6">
{i + 1}
@@ -897,14 +897,14 @@ Redirecting to exam interface...`)
</div>
{/* Code statistics */}
<div className="flex items-center space-x-4 text-sm text-gray-400">
<div className="flex items-center space-x-4 text-sm text-gray-400 dark:text-gray-400">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<span>Python 3.9</span>
<div className="w-2 h-2 bg-blue-400 dark:bg-blue-400 rounded-full animate-pulse"></div>
<span className="text-white dark:text-white">Python 3.9</span>
</div>
<div className="flex items-center space-x-2">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>Syntax OK</span>
<CheckCircle className="w-4 h-4 text-green-400 dark:text-green-400" />
<span className="text-white dark:text-white">Syntax OK</span>
</div>
</div>
</div>
@@ -925,18 +925,18 @@ Redirecting to exam interface...`)
<div className="p-3 bg-yellow-600/20 rounded-xl animate-bounce">
<Trophy className="h-8 w-8 text-yellow-400 animate-pulse" />
</div>
<h3 className="text-2xl font-bold">Leaderboard</h3>
<h3 className="text-2xl font-bold dark:text-white">Leaderboard</h3>
<div className="flex-1 h-1 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full animate-pulse"></div>
</div>
{/* Leaderboard stats */}
<div className="mb-6 p-4 bg-black/30 rounded-xl border border-gray-600">
<div className="mb-6 p-4 bg-blue-950/25 rounded-xl border border-blue-300/25 dark:border-blue-300/25">
<div className="flex justify-between items-center mb-2">
<span className="text-sm text-gray-400">Total Participants</span>
<span className="text-sm text-gray-400 dark:text-gray-400">Total Participants</span>
<span className="font-bold text-blue-400">{leaderboard.length}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-400">Completed</span>
<span className="text-sm text-gray-400 dark:text-gray-400">Completed</span>
<span className="font-bold text-green-400">
{leaderboard.filter(p => p.completed).length}
</span>
@@ -1003,7 +1003,7 @@ Redirecting to exam interface...`)
{/* Submission time */}
{participant.submitted_at && (
<div className="text-xs text-gray-400">
<div className="text-xs text-gray-400 dark:text-gray-400">
Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}
</div>
)}
@@ -1013,7 +1013,7 @@ Redirecting to exam interface...`)
<div className="absolute inset-0 -translate-x-full group-hover:translate-x-full bg-gradient-to-r from-transparent via-white/5 to-transparent transition-transform duration-700"></div>
</div>
)) : (
<div className="text-center py-8 text-gray-400 animate-pulse">
<div className="text-center py-8 text-gray-400 dark:text-gray-400 animate-pulse">
<Users className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p>No participants yet</p>
</div>