454 lines
18 KiB
PHP
454 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Live Assessment Room - {{ $interview->candidate_name }} | SingleLogin</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
<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=Fira+Code:wght@400;500;600&family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
<!-- Monaco Code Editor Loader -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #080c14;
|
|
--card-bg: #0f172a;
|
|
--card-border: rgba(255, 255, 255, 0.15);
|
|
--accent-primary: #6366f1;
|
|
}
|
|
|
|
/* Modern Custom Scrollbars */
|
|
html, body, *, ::-webkit-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: white;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ide-header {
|
|
height: 60px;
|
|
background: #0d1322;
|
|
border-bottom: 1px solid var(--card-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.ide-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 340px;
|
|
height: calc(100vh - 60px);
|
|
width: 100%;
|
|
}
|
|
|
|
.editor-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--card-border);
|
|
height: 100%;
|
|
}
|
|
|
|
#monaco-editor-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.terminal-section {
|
|
height: 220px;
|
|
background: #050811;
|
|
border-top: 1px solid var(--card-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.terminal-header {
|
|
height: 36px;
|
|
background: #090e1a;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#terminal-output {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 0.8rem;
|
|
color: #34d399;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.proctor-sidebar {
|
|
background: #0d1322;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.webcam-box {
|
|
width: 100%;
|
|
height: 180px;
|
|
background: #000;
|
|
border-radius: 12px;
|
|
border: 2px solid var(--card-border);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#webcam {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.btn-ide {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
border: 1px solid var(--card-border);
|
|
background: rgba(255,255,255,0.05);
|
|
color: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-ide-primary {
|
|
background: #10b981;
|
|
border-color: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.btn-ide-run {
|
|
background: #6366f1;
|
|
border-color: #6366f1;
|
|
color: white;
|
|
}
|
|
|
|
/* Warning Popup Overlay */
|
|
#warning-banner {
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(239, 68, 68, 0.95);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5);
|
|
z-index: 9999;
|
|
display: none;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Silent Warning Banner -->
|
|
<div id="warning-banner">
|
|
🚨 ATTENTION: <span id="warning-text">Please keep your eyes on the screen during the assessment.</span>
|
|
</div>
|
|
|
|
<!-- IDE Header Bar -->
|
|
<header class="ide-header">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div style="font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: white;">
|
|
Candidate Assessment Room
|
|
</div>
|
|
<code style="background: rgba(255,255,255,0.06); padding: 4px 10px; border-radius: 6px; color: #38bdf8; font-size: 0.75rem;">
|
|
ID: {{ $interview->submission_unique_id }}
|
|
</code>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 14px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<label style="font-size: 0.75rem; color: #94a3b8; font-weight: 500;">Language:</label>
|
|
<select id="language-select" class="btn-ide" style="background: #151b2c;">
|
|
<option value="python" {{ strtolower($interview->language) === 'python' ? 'selected' : '' }}>Python 3</option>
|
|
<option value="cpp" {{ strtolower($interview->language) === 'cpp' ? 'selected' : '' }}>C++ (GCC)</option>
|
|
<option value="c" {{ strtolower($interview->language) === 'c' ? 'selected' : '' }}>C (GCC)</option>
|
|
<option value="java" {{ strtolower($interview->language) === 'java' ? 'selected' : '' }}>Java 15</option>
|
|
<option value="php" {{ strtolower($interview->language) === 'php' ? 'selected' : '' }}>PHP 8.2 / Laravel</option>
|
|
<option value="javascript" {{ strtolower($interview->language) === 'javascript' ? 'selected' : '' }}>JavaScript (Node.js)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button onclick="runCode()" class="btn-ide btn-ide-run">
|
|
▶ Run Code
|
|
</button>
|
|
|
|
<button onclick="submitSolution()" class="btn-ide btn-ide-primary">
|
|
✓ Submit Final Solution
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- IDE Room Layout -->
|
|
<div class="ide-layout">
|
|
<!-- Main Editor & Terminal Area -->
|
|
<div class="editor-section">
|
|
<div id="monaco-editor-container"></div>
|
|
|
|
<div class="terminal-section">
|
|
<div class="terminal-header">
|
|
<span>EXECUTION OUTPUT TERMINAL (STDOUT / STDERR)</span>
|
|
<span id="run-status" style="color: #94a3b8;">Ready</span>
|
|
</div>
|
|
<div id="terminal-output">// Press 'Run Code' to execute candidate solution live...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar: Proctored Video Feed & Candidate Info -->
|
|
<div class="proctor-sidebar">
|
|
<div class="webcam-box">
|
|
<video id="webcam" autoplay muted playsinline></video>
|
|
<div style="position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; color: #34d399; font-weight: 600;">
|
|
● PROCTORED REC
|
|
</div>
|
|
</div>
|
|
<canvas id="proctor-canvas" style="display: none;" width="320" height="240"></canvas>
|
|
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; font-size: 0.8rem;">
|
|
<div style="font-weight: 700; color: white; margin-bottom: 6px;">Candidate Profile</div>
|
|
<div style="color: #94a3b8;">Name: <strong style="color: white;">{{ $interview->candidate_name }}</strong></div>
|
|
<div style="color: #94a3b8;">Email: <span style="color: white;">{{ $interview->candidate_email }}</span></div>
|
|
<div style="color: #94a3b8; margin-top: 6px;">Access Expires: <span style="color: #fca5a5;">{{ $interview->expires_at->format('H:i:s T') }}</span></div>
|
|
</div>
|
|
|
|
<div style="background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); border-radius: 12px; padding: 14px; font-size: 0.75rem; color: #fca5a5;">
|
|
<strong>🛡️ Proctored Assessment Rules:</strong>
|
|
<ul style="margin-top: 6px; padding-left: 16px; line-height: 1.5;">
|
|
<li>Do not switch tabs or minimize the browser window.</li>
|
|
<li>Ensure your face is clearly visible in the camera.</li>
|
|
<li>External AI overlays or screen sharing will trigger an alert.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let editor;
|
|
let interviewId = {{ $interview->id }};
|
|
let mediaRecorder;
|
|
let recordedChunks = [];
|
|
let previousFrameData = null;
|
|
|
|
// Default Code Snippets for Languages
|
|
const defaultCode = {
|
|
python: `# Python 3 Assessment Solution\ndef main():\n print("Hello from SingleLogin Assessment!")\n num = 42\n print(f"Computed Result: {num * 2}")\n\nif __name__ == "__main__":\n main()`,
|
|
cpp: `// C++ Assessment Solution\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << "Hello from SingleLogin Assessment!" << endl;\n return 0;\n}`,
|
|
c: `// C Assessment Solution\n#include <stdio.h>\n\nint main() {\n printf("Hello from SingleLogin Assessment!\\n");\n return 0;\n}`,
|
|
java: `// Java Assessment Solution\npublic class Solution {\n public static void main(String[] args) {\n System.out.println("Hello from SingleLogin Assessment!");\n }\n}`,
|
|
php: `<?php\n// PHP / Laravel Assessment Solution\necho "Hello from SingleLogin Assessment!\\n";\n$data = [1, 2, 3, 4, 5];\necho "Sum: " . array_sum($data);`,
|
|
javascript: `// JavaScript (Node.js) Solution\nconsole.log("Hello from SingleLogin Assessment!");\nconst nums = [10, 20, 30];\nconsole.log("Total:", nums.reduce((a, b) => a + b, 0));`
|
|
};
|
|
|
|
// Initialize Monaco Editor
|
|
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } });
|
|
require(['vs/editor/editor.main'], function () {
|
|
const initialLang = '{{ strtolower($interview->language) }}';
|
|
const initialCode = {!! json_encode($interview->submitted_code) !!} || defaultCode[initialLang] || defaultCode.python;
|
|
|
|
editor = monaco.editor.create(document.getElementById('monaco-editor-container'), {
|
|
value: initialCode,
|
|
language: initialLang === 'cpp' ? 'cpp' : (initialLang === 'c' ? 'c' : initialLang),
|
|
theme: 'vs-dark',
|
|
fontSize: 14,
|
|
fontFamily: 'Fira Code, monospace',
|
|
automaticLayout: true,
|
|
minimap: { enabled: true }
|
|
});
|
|
});
|
|
|
|
// Handle Language Switch
|
|
document.getElementById('language-select').addEventListener('change', function () {
|
|
const lang = this.value;
|
|
const monacoLang = lang === 'cpp' ? 'cpp' : (lang === 'c' ? 'c' : lang);
|
|
monaco.editor.setModelLanguage(editor.getModel(), monacoLang);
|
|
if (!editor.getValue() || editor.getValue() === defaultCode[lang]) {
|
|
editor.setValue(defaultCode[lang] || '');
|
|
}
|
|
});
|
|
|
|
// Execute Code live via Piston API
|
|
function runCode() {
|
|
document.getElementById('run-status').innerText = 'Running...';
|
|
document.getElementById('terminal-output').innerText = 'Executing solution on code engine...';
|
|
|
|
const lang = document.getElementById('language-select').value;
|
|
const code = editor.getValue();
|
|
|
|
fetch('{{ route("interview.execute") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ language: lang, code: code })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('run-status').innerText = 'Ready';
|
|
if (data.success) {
|
|
document.getElementById('terminal-output').innerText = data.output;
|
|
} else {
|
|
document.getElementById('terminal-output').innerText = 'Error: ' + data.output;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('run-status').innerText = 'Error';
|
|
document.getElementById('terminal-output').innerText = 'Failed to reach code runner service.';
|
|
});
|
|
}
|
|
|
|
// Submit Solution
|
|
function submitSolution() {
|
|
const code = editor.getValue();
|
|
const lang = document.getElementById('language-select').value;
|
|
const output = document.getElementById('terminal-output').innerText;
|
|
|
|
fetch(`{{ route('interview.submit', $interview->id) }}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ code: code, language: lang, output: output })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
alert('✓ ' + data.message);
|
|
});
|
|
}
|
|
|
|
// --- ANTI-CHEAT & PROCTORING ENGINE ---
|
|
|
|
// 1. Tab Switch Detection
|
|
document.addEventListener('visibilitychange', function () {
|
|
if (document.hidden) {
|
|
logViolation('tab_switch', 'Candidate switched browser tab or minimized window');
|
|
}
|
|
});
|
|
|
|
// 2. Window Focus Loss / External Screen Overlap Detection
|
|
window.addEventListener('blur', function () {
|
|
logViolation('focus_lost', 'Window lost focus (possible external AI overlay or screen overlap)');
|
|
});
|
|
|
|
// 3. Code Copy-Paste Detection
|
|
document.addEventListener('paste', function (e) {
|
|
logViolation('paste_event', 'Candidate pasted content into editor window');
|
|
});
|
|
|
|
function logViolation(type, details) {
|
|
fetch(`{{ route('interview.violation', $interview->id) }}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ type: type, details: details })
|
|
});
|
|
}
|
|
|
|
// 4. WebRTC Camera Setup & Eye Gaze Analysis
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
|
|
.then(stream => {
|
|
const videoEl = document.getElementById('webcam');
|
|
videoEl.srcObject = stream;
|
|
|
|
// MediaRecorder silent video recording
|
|
try {
|
|
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
|
|
mediaRecorder.ondataavailable = e => {
|
|
if (e.data.size > 0) recordedChunks.push(e.data);
|
|
};
|
|
mediaRecorder.start(10000); // 10s chunks
|
|
} catch (err) {}
|
|
|
|
// Client-side Eye Gaze & Camera Absence Motion Analysis
|
|
setInterval(analyzeCameraFrame, 3000);
|
|
})
|
|
.catch(err => {
|
|
logViolation('gaze_anomaly', 'Camera permission denied or video stream disabled');
|
|
});
|
|
|
|
function analyzeCameraFrame() {
|
|
const video = document.getElementById('webcam');
|
|
const canvas = document.getElementById('proctor-canvas');
|
|
if (!video || !canvas || video.readyState !== 4) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
|
// Compute brightness / pixel motion difference
|
|
let sum = 0;
|
|
for (let i = 0; i < imgData.data.length; i += 4) {
|
|
sum += (imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3;
|
|
}
|
|
const avgBrightness = sum / (imgData.data.length / 4);
|
|
|
|
if (avgBrightness < 15) {
|
|
logViolation('gaze_anomaly', 'Camera lens covered or room completely dark');
|
|
}
|
|
}
|
|
|
|
// 5. Silent Warning Polling
|
|
setInterval(() => {
|
|
fetch(`{{ route('interview.poll', $interview->id) }}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.warnings && data.warnings.length > 0) {
|
|
const lastWarn = data.warnings[data.warnings.length - 1];
|
|
document.getElementById('warning-text').innerText = lastWarn.message;
|
|
const banner = document.getElementById('warning-banner');
|
|
banner.style.display = 'block';
|
|
setTimeout(() => { banner.style.display = 'none'; }, 6000);
|
|
}
|
|
});
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|