Spaces:

humza7656
/

sorry

Running

App Files Files Community

humza7656 commited on Feb 2

Commit

9662fcc

verified ·

1 Parent(s): 6d68c5c

Update index.html

Browse files

Files changed (1) hide show

index.html +171 -496

index.html CHANGED Viewed

@@ -3,543 +3,218 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>QuizCollab | Pro AI Quiz Platform</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/lucide@0.263.1/dist/umd/lucide.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-            --slate-950: #020617;
-            --slate-900: #0f172a;
-            --slate-800: #1e293b;
-            --sky-500: #0ea5e9;
-            --emerald-500: #10b981;
         }
-        body {
-            font-family: 'Plus Jakarta Sans', sans-serif;
-            background-color: var(--slate-950);
-            color: #f8fafc;
-            overflow: hidden;
         }
-        .glass-panel {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.05);
         }
-        .sidebar-item {
-            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        .sidebar-item.active {
-            background: rgba(14, 165, 233, 0.1);
-            color: var(--sky-500);
-            border-right: 3px solid var(--sky-500);
         }
-        .code-font { font-family: 'JetBrains Mono', monospace; }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
-        ::-webkit-scrollbar-thumb:hover { background: #475569; }
-        @keyframes slideIn {
-            from { transform: translateX(20px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
         }
-        .animate-slide { animation: slideIn 0.4s ease-out forwards; }
-        .loader {
-            width: 20px;
-            height: 20px;
-            border: 2px solid rgba(255,255,255,0.1);
-            border-top: 2px solid white;
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
         }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .toast {
             position: fixed;
-            top: 2rem;
-            right: 2rem;
-            z-index: 9999;
-            transform: translateY(-100px);
-            transition: transform 0.3s ease;
         }
-        .toast.show { transform: translateY(0); }
     </style>
 </head>
-<body class="h-screen w-screen flex">
-    <!-- Global Components -->
-    <div id="toast" class="toast flex items-center gap-3 bg-slate-800 border border-slate-700 px-6 py-4 rounded-xl shadow-2xl">
-        <div class="p-2 bg-emerald-500/20 rounded-full text-emerald-400" id="toast-icon">
-            <i data-lucide="check-circle" class="w-5 h-5"></i>
-        </div>
-        <div>
-            <p class="font-bold text-sm text-white" id="toast-title">Success</p>
-            <p class="text-xs text-slate-400" id="toast-msg">Operation completed.</p>
-        </div>
     </div>
-    <!-- Auth Overlay (Full Screen) -->
-    <div id="view-login" class="absolute inset-0 z-[100] bg-slate-950 flex items-center justify-center p-6">
-        <div class="max-w-md w-full glass-panel p-8 rounded-3xl border border-white/5 shadow-2xl">
-            <div class="flex flex-col items-center mb-10">
-                <div class="w-16 h-16 bg-sky-500/10 text-sky-500 rounded-2xl flex items-center justify-center mb-4">
-                    <i data-lucide="brain-circuit" class="w-10 h-10"></i>
-                </div>
-                <h1 class="text-3xl font-extrabold tracking-tight">QuizCollab</h1>
-                <p class="text-slate-500 mt-2 text-center">The professional grade AI quiz orchestrator</p>
-            </div>
-            <div class="space-y-4">
-                <div class="space-y-1.5">
-                    <label class="text-[10px] uppercase font-black text-slate-500 tracking-wider">Username</label>
-                    <input type="text" id="login-name" placeholder="Enter your display name" class="w-full bg-slate-900/50 border border-slate-700/50 rounded-xl px-4 py-3 text-sm focus:border-sky-500 focus:outline-none transition-all">
-                </div>
-                <div class="space-y-1.5">
-                    <label class="text-[10px] uppercase font-black text-slate-500 tracking-wider">Access Token / Password</label>
-                    <input type="password" id="login-pass" placeholder="••••••••" class="w-full bg-slate-900/50 border border-slate-700/50 rounded-xl px-4 py-3 text-sm focus:border-sky-500 focus:outline-none transition-all">
-                </div>
-                <button onclick="handleLogin()" id="btn-login" class="w-full bg-sky-500 hover:bg-sky-400 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-sky-500/20 flex items-center justify-center gap-2 mt-6">
-                    <span>Enter Workspace</span>
-                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
-                </button>
-            </div>
-            <!-- Connection Config Toggle -->
-            <button onclick="toggleConfig()" class="mt-8 w-full text-[10px] text-slate-600 uppercase tracking-widest font-bold hover:text-slate-400">
-                Configure API Gateway
-            </button>
-            <div id="config-panel" class="hidden mt-4 p-4 bg-slate-900 rounded-xl border border-slate-800">
-                <input type="text" id="base-url" value="https://circus-jake-guarantees-kurt.trycloudflare.com" class="w-full bg-black border border-slate-700 rounded p-2 text-[10px] text-sky-400 code-font">
-            </div>
-        </div>
-    </div>
-    <!-- Sidebar Navigation (Desktop) -->
-    <aside id="main-sidebar" class="hidden w-72 bg-slate-900 border-r border-slate-800 flex flex-col">
-        <div class="p-8">
-            <div class="flex items-center gap-3 text-sky-500 font-extrabold text-xl">
-                <i data-lucide="zap" class="w-6 h-6 fill-sky-500"></i>
-                QuizCollab
-            </div>
-        </div>
-        <nav class="flex-1 px-4 space-y-2">
-            <button onclick="switchView('view-dashboard')" id="nav-dashboard" class="sidebar-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-400 hover:text-white hover:bg-slate-800">
-                <i data-lucide="layout-grid" class="w-5 h-5"></i> Dashboard
-            </button>
-            <button onclick="switchView('view-create')" id="nav-create" class="sidebar-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-400 hover:text-white hover:bg-slate-800">
-                <i data-lucide="plus-circle" class="w-5 h-5"></i> Create Room
-            </button>
-            <button onclick="switchView('view-join')" id="nav-join" class="sidebar-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-400 hover:text-white hover:bg-slate-800">
-                <i data-lucide="key-round" class="w-5 h-5"></i> Join Session
-            </button>
-        </nav>
-        <div class="p-6 border-t border-slate-800">
-            <div class="flex items-center gap-3 bg-slate-950/50 p-4 rounded-2xl border border-slate-800">
-                <div class="w-10 h-10 bg-gradient-to-br from-sky-500 to-indigo-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg" id="user-initial">
-                    U
-                </div>
-                <div class="flex-1 min-w-0">
-                    <p class="text-xs font-bold text-white truncate" id="display-user-name">User Name</p>
-                    <p class="text-[10px] text-slate-500 truncate" id="display-user-id">ID: ....</p>
-                </div>
-                <button onclick="location.reload()" class="text-slate-600 hover:text-red-400 transition">
-                    <i data-lucide="log-out" class="w-4 h-4"></i>
-                </button>
-            </div>
-        </div>
-    </aside>
-    <!-- Main Workspace -->
-    <main class="flex-1 h-full overflow-hidden flex flex-col relative">
-        <!-- Dashboard View -->
-        <section id="view-dashboard" class="hidden flex-1 overflow-y-auto p-12 animate-slide">
-            <header class="mb-12">
-                <h2 class="text-4xl font-extrabold tracking-tight mb-2">Workspace Overview</h2>
-                <p class="text-slate-500">Welcome back. Ready to orchestrate a new learning session?</p>
-            </header>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl">
-                <div onclick="switchView('view-create')" class="group p-8 glass-panel rounded-3xl border border-white/5 hover:border-sky-500/50 cursor-pointer transition-all hover:shadow-2xl hover:shadow-sky-500/10">
-                    <div class="w-14 h-14 bg-sky-500 text-white rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-sky-500/30">
-                        <i data-lucide="sparkles" class="w-7 h-7"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">AI Quiz Builder</h3>
-                    <p class="text-slate-400 leading-relaxed mb-6">Describe a topic and let our Groq-powered engine synthesize a high-quality assessment instantly.</p>
-                    <div class="flex items-center text-sky-400 font-bold text-sm gap-2">
-                        Start Building <i data-lucide="arrow-right" class="w-4 h-4"></i>
-                    </div>
-                </div>
-                <div onclick="switchView('view-join')" class="group p-8 glass-panel rounded-3xl border border-white/5 hover:border-emerald-500/50 cursor-pointer transition-all hover:shadow-2xl hover:shadow-emerald-500/10">
-                    <div class="w-14 h-14 bg-emerald-500 text-white rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-emerald-500/30">
-                        <i data-lucide="users" class="w-7 h-7"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Join Session</h3>
-                    <p class="text-slate-400 leading-relaxed mb-6">Have a Share ID from a colleague? Enter the workspace to participate in the assessment.</p>
-                    <div class="flex items-center text-emerald-400 font-bold text-sm gap-2">
-                        Connect Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- Create Room View -->
-        <section id="view-create" class="hidden flex-1 flex items-center justify-center p-12 animate-slide">
-            <div class="max-w-xl w-full">
-                <div class="mb-10 text-center">
-                    <h2 class="text-3xl font-bold mb-4">Initialize New Room</h2>
-                    <p class="text-slate-500">Define the knowledge domain for your AI generation</p>
-                </div>
-                <div class="space-y-6">
-                    <div class="space-y-2">
-                        <label class="text-[10px] uppercase font-black text-slate-500 tracking-wider">Subject Area</label>
-                        <input type="text" id="quiz-topic" placeholder="e.g. Quantum Mechanics, Digital Marketing..." class="w-full bg-slate-900 border border-slate-700 rounded-2xl px-6 py-5 text-lg font-medium focus:border-sky-500 focus:outline-none transition-all">
-                    </div>
-                    <button onclick="handleCreateAndGenerate()" id="btn-create" class="w-full bg-sky-500 hover:bg-sky-400 text-white font-black py-5 rounded-2xl transition-all shadow-xl flex items-center justify-center gap-3">
-                        <i data-lucide="wand-2" class="w-5 h-5"></i>
-                        <span>Synthesize Assessment</span>
-                    </button>
-                </div>
-            </div>
-            <!-- Generation Overlay -->
-            <div id="creation-loader" class="hidden absolute inset-0 z-50 bg-slate-950/90 backdrop-blur-md flex flex-col items-center justify-center">
-                <div class="relative w-24 h-24 mb-8">
-                    <div class="absolute inset-0 border-4 border-sky-500/20 rounded-full"></div>
-                    <div class="absolute inset-0 border-4 border-sky-500 border-t-transparent rounded-full animate-spin"></div>
-                    <div class="absolute inset-0 flex items-center justify-center">
-                        <i data-lucide="cpu" class="w-10 h-10 text-sky-400 animate-pulse"></i>
-                    </div>
-                </div>
-                <h3 class="text-2xl font-bold text-white mb-2">Synthesizing Questions</h3>
-                <p class="text-slate-400 animate-pulse">Consulting the Groq LLM Knowledge Base...</p>
-            </div>
-        </section>
-        <!-- Join Room View -->
-        <section id="view-join" class="hidden flex-1 flex items-center justify-center p-12 animate-slide">
-            <div class="max-w-md w-full glass-panel p-10 rounded-3xl">
-                <h2 class="text-2xl font-bold mb-8 flex items-center gap-3">
-                    <i data-lucide="command" class="w-6 h-6 text-emerald-400"></i> Access Session
-                </h2>
-                <div class="space-y-6">
-                    <div class="space-y-2">
-                        <label class="text-[10px] uppercase font-black text-slate-500 tracking-wider">Share Token</label>
-                        <input type="text" id="join-share-id" placeholder="Paste Token..." class="w-full bg-black border border-slate-700 rounded-xl px-4 py-4 code-font text-emerald-400 text-center tracking-widest text-xl focus:border-emerald-500 focus:outline-none transition-all">
-                    </div>
-                    <button onclick="handleJoin()" id="btn-join" class="w-full bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-4 rounded-xl transition-all shadow-lg flex items-center justify-center gap-2">
-                        <span>Initialize Link</span>
-                        <i data-lucide="chevron-right" class="w-4 h-4"></i>
-                    </button>
-                </div>
-            </div>
-        </section>
-        <!-- Quiz View (Collab Workspace) -->
-        <section id="view-quiz" class="hidden flex-1 flex flex-col overflow-hidden animate-slide">
-            <!-- Workspace Header -->
-            <div class="px-8 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-900/50">
-                <div class="flex items-center gap-6">
-                    <div class="flex flex-col">
-                        <span class="text-[10px] uppercase font-black text-slate-500 tracking-widest">Active Session</span>
-                        <h3 class="font-bold text-white flex items-center gap-2">
-                            <i data-lucide="folder" class="w-4 h-4 text-sky-400"></i>
-                            <span id="active-topic">Assessment</span>
-                        </h3>
-                    </div>
-                    <div class="h-8 w-px bg-slate-800"></div>
-                    <div class="flex flex-col">
-                        <span class="text-[10px] uppercase font-black text-slate-500 tracking-widest">Share Token</span>
-                        <button onclick="copyShareToken()" class="group font-mono text-xs text-sky-400 flex items-center gap-2 hover:text-white transition">
-                            <span id="display-share-id">TOKEN</span>
-                            <i data-lucide="copy" class="w-3 h-3 group-hover:scale-125 transition"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="flex items-center gap-3">
-                    <button onclick="copyInviteLink()" class="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-xs font-bold transition">
-                        <i data-lucide="link" class="w-4 h-4"></i> Invite Link
-                    </button>
-                    <button onclick="switchView('view-dashboard')" class="p-2 text-slate-500 hover:text-white transition">
-                        <i data-lucide="x" class="w-5 h-5"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="flex-1 flex overflow-hidden">
-                <!-- Left: Question Content -->
-                <div class="flex-[3] p-8 overflow-y-auto border-r border-slate-800">
-                    <div class="max-w-3xl mx-auto space-y-8">
-                        <div class="flex items-center gap-4 text-sky-500 bg-sky-500/10 w-fit px-4 py-1.5 rounded-full text-xs font-bold mb-6">
-                            <i data-lucide="info" class="w-4 h-4"></i>
-                            AI Generated Content
-                        </div>
-                        <div id="questions-content" class="text-xl leading-relaxed text-slate-300 whitespace-pre-wrap font-medium">
-                            <!-- Questions Load Here -->
-                        </div>
-                    </div>
-                </div>
-                <!-- Right: Submission Panel -->
-                <div class="flex-[2] bg-slate-900/30 p-8 flex flex-col">
-                    <div class="flex-1 space-y-6">
-                        <div class="space-y-2">
-                            <label class="text-[10px] uppercase font-black text-slate-400 tracking-widest">Workspace Response</label>
-                            <textarea id="quiz-answer" placeholder="Formulate your structured response here..." class="w-full h-80 bg-slate-900/50 border border-slate-700 rounded-2xl p-6 text-sm text-slate-200 focus:outline-none focus:border-sky-500 focus:ring-4 focus:ring-sky-500/10 transition-all resize-none"></textarea>
-                        </div>
-                        <div class="bg-amber-500/5 border border-amber-500/20 p-4 rounded-xl flex gap-3">
-                            <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-500 flex-shrink-0"></i>
-                            <p class="text-[10px] text-amber-500/80 leading-relaxed font-bold uppercase tracking-tight">
-                                Submission is permanent. Ensure all questions are addressed before transmitting to the AI grading engine.
-                            </p>
-                        </div>
-                    </div>
-                    <button onclick="handleSubmitAnswers()" id="btn-submit" class="w-full bg-sky-500 hover:bg-sky-400 text-white font-black py-5 rounded-2xl transition-all shadow-xl flex items-center justify-center gap-3">
-                        <span>Transmit Submission</span>
-                        <i data-lucide="send" class="w-5 h-5"></i>
-                    </button>
-                </div>
-            </div>
-        </section>
-        <!-- Results View -->
-        <section id="view-results" class="hidden flex-1 flex items-center justify-center p-12 animate-slide">
-            <div class="max-w-2xl w-full text-center">
-                <div class="inline-flex p-5 bg-emerald-500/20 rounded-3xl mb-10">
-                    <i data-lucide="award" class="w-16 h-16 text-emerald-400"></i>
-                </div>
-                <h2 class="text-5xl font-black mb-4 tracking-tighter">Grading Successful</h2>
-                <p class="text-slate-500 mb-12">The AI has analyzed your submission. Evaluation result below:</p>
-                <div class="bg-slate-900/50 border border-slate-800 p-12 rounded-[3rem] mb-12 flex flex-col items-center">
-                    <span class="text-[10px] uppercase font-black text-slate-500 tracking-[0.3em] mb-4">Calculated Score</span>
-                    <div class="text-9xl font-black text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-emerald-400 tracking-tighter" id="score-display">--</div>
-                    <div class="h-1 w-24 bg-slate-800 my-8 rounded-full"></div>
-                    <p class="text-slate-400 font-medium">Competency Metric Transmitted to Database</p>
-                </div>
-                <button onclick="switchView('view-dashboard')" class="bg-white text-slate-950 font-black py-4 px-10 rounded-2xl hover:scale-105 transition shadow-2xl">
-                    Return to Hub
-                </button>
-            </div>
-        </section>
-    </main>
-    <script>
-        const appState = {
-            user: { name: '', id: '', password: '' },
-            room: { id: '', shareId: '', topic: '' },
-            questions: '',
-            currentView: 'view-login'
-        };
-        function refreshIcons() {
-            try { if (window.lucide) window.lucide.createIcons(); } catch (e) {}
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            refreshIcons();
-            const urlParams = new URLSearchParams(window.location.search);
-            const invite = urlParams.get('invite');
-            if (invite) {
-                document.getElementById('join-share-id').value = invite;
-            }
-        });
-        function showToast(title, msg, type = 'success') {
-            const toast = document.getElementById('toast');
-            document.getElementById('toast-title').textContent = title;
-            document.getElementById('toast-msg').textContent = msg;
-            toast.classList.add('show');
-            setTimeout(() => toast.classList.remove('show'), 3500);
-        }
-        function toggleConfig() {
-            document.getElementById('config-panel').classList.toggle('hidden');
-        }
-        function switchView(viewId) {
-            // Update UI
-            document.querySelectorAll('section, #view-login').forEach(el => el.classList.add('hidden'));
-            document.getElementById(viewId).classList.remove('hidden');
-            // Sidebar display
-            document.getElementById('main-sidebar').style.display = (viewId === 'view-login') ? 'none' : 'flex';
-            // Active Nav state
-            document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
-            const navBtn = document.getElementById('nav-' + viewId.replace('view-', ''));
-            if (navBtn) navBtn.classList.add('active');
-            appState.currentView = viewId;
-            refreshIcons();
-        }
-        async function apiCall(endpoint, method = 'GET', body = null) {
-            const baseUrl = document.getElementById('base-url').value.trim().replace(/\/$/, '');
-            const url = `${baseUrl}${endpoint.startsWith('/') ? endpoint : '/' + endpoint}`;
-            const options = {
-                method,
-                headers: { 'Content-Type': 'application/json' }
-            };
-            if (body) options.body = JSON.stringify(body);
-            try {
-                const res = await fetch(url, options);
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                return await res.json();
-            } catch (err) {
-                console.error("API Error:", err);
-                showToast("Connection Failure", err.message, "error");
-                throw err;
-            }
-        }
-        async function handleLogin() {
-            const name = document.getElementById('login-name').value;
-            const pass = document.getElementById('login-pass').value;
-            const btn = document.getElementById('btn-login');
-            if (!name || !pass) return showToast("Required", "Credentials missing", "error");
-            btn.innerHTML = '<div class="loader"></div>';
-            try {
-                // Using corrected path //QuizzCollab/new_user -> /QuizzCollab/new_user
-                const data = await apiCall('/QuizzCollab/new_user', 'POST', { name, password: pass });
-                if (data.User_id) {
-                    appState.user = { name, password: pass, id: data.User_id };
-                    document.getElementById('display-user-name').textContent = name;
-                    document.getElementById('display-user-id').textContent = `ID: ${data.User_id.slice(0, 8)}...`;
-                    document.getElementById('user-initial').textContent = name.charAt(0).toUpperCase();
-                    switchView('view-dashboard');
-                    showToast("Workspace Active", `Welcome, ${name}`);
-                }
-            } catch (e) {
-                console.error(e);
-            } finally {
-                btn.innerHTML = '<span>Enter Workspace</span> <i data-lucide="arrow-right" class="w-4 h-4"></i>';
-                refreshIcons();
-            }
-        }
-        async function handleCreateAndGenerate() {
-            const topic = document.getElementById('quiz-topic').value;
-            if (!topic) return showToast("Incomplete", "Enter a subject area", "error");
-            document.getElementById('creation-loader').classList.remove('hidden');
-            try {
-                // 1. Create Room
-                const r = await apiCall(`/QuizzCollab/room_create?user_id=${appState.user.id}`, 'GET');
-                appState.room = { id: r.Room_id, shareId: r.Share_id, topic };
-                // 2. Generate Quiz
-                const q = await apiCall('/QuizzCollab/quizz', 'POST', {
-                    room_id: r.Room_id,
-                    share_id: r.Share_id,
-                    user_id: appState.user.id,
-                    field_name: topic
-                });
-                // Normalizing response key (QuizzColab typo fix)
-                appState.questions = q.QuizzCollab || q.QuizzColab || "Generated content empty.";
-                document.getElementById('active-topic').textContent = topic;
-                document.getElementById('display-share-id').textContent = r.Share_id;
-                document.getElementById('questions-content').textContent = appState.questions;
-                switchView('view-quiz');
-                showToast("Session Initialized", "AI synthesized assessment successfully.");
-            } catch (e) {
-                console.error(e);
-            } finally {
-                document.getElementById('creation-loader').classList.add('hidden');
-            }
-        }
-        async function handleJoin() {
-            const sid = document.getElementById('join-share-id').value.trim();
-            if (!sid) return showToast("Required", "Share Token missing", "error");
-            const btn = document.getElementById('btn-join');
-            btn.innerHTML = '<div class="loader"></div>';
-            try {
-                const data = await apiCall(`/QuizzCollab/join/${sid}`, 'GET');
-                if (data && data[0]) {
-                    const row = data[0];
-                    appState.questions = row.questions;
-                    appState.room = { id: row.room_id, shareId: sid, topic: "Collaborative Session" };
-                    document.getElementById('active-topic').textContent = "Collaborative Session";
-                    document.getElementById('display-share-id').textContent = sid;
-                    document.getElementById('questions-content').textContent = appState.questions;
-                    switchView('view-quiz');
-                    showToast("Session Joined", "Workspace sync complete.");
                 } else {
-                    showToast("Invalid Token", "Session not found", "error");
                 }
-            } catch (e) {
-                console.error(e);
-            } finally {
-                btn.innerHTML = '<span>Initialize Link</span> <i data-lucide="chevron-right" class="w-4 h-4"></i>';
-                refreshIcons();
-            }
         }
-        async function handleSubmitAnswers() {
-            const responseText = document.getElementById('quiz-answer').value.trim();
-            if (!responseText) return showToast("Required", "No response provided", "error");
-            const btn = document.getElementById('btn-submit');
-            btn.innerHTML = '<div class="loader"></div>';
-            try {
-                const res = await apiCall('/QuizzCollab/join/marks', 'POST', {
-                    room_id: appState.room.id,
-                    share_id: appState.room.shareId,
-                    user_id: appState.user.id,
-                    field_name: appState.room.topic,
-                    data: { student_response: responseText }
-                });
-                document.getElementById('score-display').textContent = res.QuizzCollab ?? "N/A";
-                switchView('view-results');
-            } catch (e) {
-                console.error(e);
-            } finally {
-                btn.innerHTML = '<span>Transmit Submission</span> <i data-lucide="send" class="w-5 h-5"></i>';
-                refreshIcons();
             }
-        }
-        function copyShareToken() {
-            const token = appState.room.shareId;
-            navigator.clipboard.writeText(token);
-            showToast("Copied", "Share Token saved to clipboard");
-        }
-        function copyInviteLink() {
-            const url = new URL(window.location.href);
-            url.searchParams.set('invite', appState.room.shareId);
-            navigator.clipboard.writeText(url.toString());
-            showToast("Link Copied", "Invite URL saved to clipboard");
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A Little Surprise for You</title>
     <style>
         :root {
+            --bg-color: #020617;
+            --text-color: #f1f5f9;
+            --accent-color: #22c55e;
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            user-select: none;
         }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background-image:
+                radial-gradient(circle at 50% 50%, #1e293b 0%, #020617 100%);
         }
+        .container {
+            text-align: center;
+            z-index: 10;
+            pointer-events: none;
         }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #4ade80 0%, #2dd4bf 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            opacity: 0;
+            animation: fadeIn 2s forwards;
+            filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.3));
         }
+        p {
+            font-size: 1.2rem;
+            color: #94a3b8;
+            opacity: 0;
+            animation: fadeIn 2s forwards 0.5s;
+        }
+        .hint {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            color: #334155;
+            font-style: italic;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+        .lizard {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            pointer-events: none;
+            z-index: 5;
+            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
         }
+        /* Message Box */
+        #message-box {
             position: fixed;
+            bottom: 30px;
+            background: rgba(15, 23, 42, 0.9);
+            padding: 12px 24px;
+            border-radius: 9999px;
+            border: 1px solid rgba(74, 222, 128, 0.2);
+            backdrop-filter: blur(8px);
+            display: none;
+            color: #4ade80;
+            font-weight: 500;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        @keyframes slideUp {
+            from { transform: translateY(100px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
         }
     </style>
 </head>
+<body>
+    <div class="container">
+        <h1>Hey, I hope this makes you smile</h1>
+        <p>Just a screen full of friends for you.</p>
+        <div class="hint">(Click anywhere on the screen)</div>
     </div>
+    <div id="message-box"></div>
+    <script>
+        const lizardColors = ['#4ade80', '#2dd4bf', '#84cc16', '#10b981', '#fbbf24', '#f87171'];
+        const messages = [
+            "You're absolutely wonderful! 🦎",
+            "Keep that beautiful smile going.",
+            "The lizards are here to cheer you up!",
+            "Sending you so much positive energy.",
+            "You are stronger than you think. ✨",
+            "I'm always rooting for you!",
+            "Just keep crawling forward! 🦎"
+        ];
+        // Creates a detailed SVG Lizard
+        function getLizardSVG(color) {
+            return `
+            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <!-- Tail -->
+                <path d="M50 90 Q45 70 50 50" stroke="${color}" stroke-width="4" fill="none" stroke-linecap="round" />
+                <!-- Body -->
+                <ellipse cx="50" cy="40" rx="8" ry="15" fill="${color}" />
+                <!-- Head -->
+                <ellipse cx="50" cy="20" rx="6" ry="8" fill="${color}" />
+                <!-- Eyes -->
+                <circle cx="47" cy="18" r="1.5" fill="black" />
+                <circle cx="53" cy="18" r="1.5" fill="black" />
+                <!-- Legs -->
+                <path d="M42 35 L30 30 M58 35 L70 30" stroke="${color}" stroke-width="3" stroke-linecap="round" />
+                <path d="M42 50 L30 55 M58 50 L70 55" stroke="${color}" stroke-width="3" stroke-linecap="round" />
+            </svg>`;
+        }
+        function createLizard(x, y) {
+            const lizard = document.createElement('div');
+            lizard.className = 'lizard';
+            const color = lizardColors[Math.floor(Math.random() * lizardColors.length)];
+            lizard.innerHTML = getLizardSVG(color);
+            const startX = x !== undefined ? x - 40 : Math.random() * window.innerWidth;
+            const startY = y !== undefined ? y - 40 : Math.random() * window.innerHeight;
+            lizard.style.left = startX + 'px';
+            lizard.style.top = startY + 'px';
+            const angle = Math.random() * Math.PI * 2;
+            const rotation = (angle * 180 / Math.PI) + 90; // Align SVG to movement
+            lizard.style.transform = `rotate(${rotation}deg)`;
+            document.body.appendChild(lizard);
+            const velocity = 3 + Math.random() * 4;
+            let curX = startX;
+            let curY = startY;
+            // Wiggle movement simulation
+            let frame = 0;
+            const animate = () => {
+                frame++;
+                const wiggle = Math.sin(frame * 0.2) * 2;
+                curX += Math.cos(angle) * velocity;
+                curY += Math.sin(angle) * velocity;
+                // Add a little organic movement
+                lizard.style.left = (curX + Math.cos(angle + Math.PI/2) * wiggle) + 'px';
+                lizard.style.top = (curY + Math.sin(angle + Math.PI/2) * wiggle) + 'px';
+                if (curX < -150 || curX > window.innerWidth + 150 ||
+                    curY < -150 || curY > window.innerHeight + 150) {
+                    lizard.remove();
                 } else {
+                    requestAnimationFrame(animate);
                 }
+            };
+            requestAnimationFrame(animate);
         }
+        function showMessage() {
+            const box = document.getElementById('message-box');
+            box.innerText = messages[Math.floor(Math.random() * messages.length)];
+            box.style.display = 'block';
+            clearTimeout(window.msgTimeout);
+            window.msgTimeout = setTimeout(() => {
+                box.style.display = 'none';
+            }, 3000);
+        }
+        document.addEventListener('mousedown', (e) => {
+            // Burst of lizards on click
+            for (let i = 0; i < 6; i++) {
+                setTimeout(() => {
+                    createLizard(e.clientX, e.clientY);
+                }, i * 60);
             }
+            showMessage();
+        });
+        // Background wanderers for ambiance
+        setInterval(() => {
+            if (document.querySelectorAll('.lizard').length < 12) {
+                createLizard();
+            }
+        }, 1500);
     </script>
 </body>
 </html>