Skip to content

feat: Add waiting room DO and courses flows across learner and host journeys #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lakshya-2440 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Add waiting room DO and courses flows across learner and host journeys #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b05d86
Add waiting room and courses flows across learner and host journeys.
Lakshya-2440 Apr 20, 2026
ac6be22
Merge branch 'main' into feat/waitingroom-courses-clean
A1L13N Jul 21, 2026
07a1e24
fixes
Lakshya-2440 Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
296 changes: 296 additions & 0 deletions public/course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Activity - Alpha One Labs</title>
<link rel="icon" type="image/png" href="/images/logo.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { theme: { extend: { colors: { brand:{ DEFAULT:'#4F46E5', dark:'#3730A3' } } } } };</script>
<style>
.hidden { display: none !important; }
.gradient-hero { background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#2563EB 100%); }
.badge { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
.danger-btn { border:1px solid #fca5a5; color:#b91c1c; background:#fff; }
.danger-btn:hover { background:#fef2f2; }
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans">

<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="/" class="flex items-center gap-2">
<img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
<span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
</a>
<div id="nav-auth" class="flex items-center gap-3"></div>
</div>
</nav>

<div class="gradient-hero text-white py-12 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-indigo-200 text-sm mb-3">
<a href="/" class="hover:text-white">Activities</a> &rsaquo; <span id="crumb-title">Loading...</span>
</div>
<h1 id="act-title" class="text-3xl font-extrabold mb-2">Loading...</h1>
<p class="text-indigo-200 text-sm mb-4" id="act-meta"></p>
<div id="act-badges" class="flex flex-wrap gap-2 mb-5"></div>
<div id="act-action"></div>
</div>
</div>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col lg:flex-row gap-8">

<!-- Sidebar: details + sessions -->
<aside class="lg:w-80 shrink-0 space-y-4">
<!-- About card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="font-bold text-slate-800 text-sm mb-4">About this Activity</h2>
<p id="act-description" class="text-slate-500 text-sm leading-relaxed">Loading...</p>
<div class="mt-4 space-y-2 text-sm" id="act-details"></div>
<div id="act-tags" class="flex flex-wrap gap-1.5 mt-4"></div>
</div>

<!-- Sessions list -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden" id="sessions-card">
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
<h2 class="font-bold text-slate-800 text-sm">Sessions</h2>
<span id="sessions-count" class="text-xs text-slate-400"></span>
</div>
<ul id="sessions-list" class="divide-y divide-slate-50 max-h-[50vh] overflow-y-auto">
<li class="px-5 py-4 text-sm text-slate-400">Loading...</li>
</ul>
</div>
</aside>

<!-- Main content -->
<div class="flex-1 min-w-0">

<!-- Not joined CTA -->
<div id="join-cta" class="hidden bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-100 rounded-2xl p-8 text-center mb-6">
<p class="text-4xl mb-3">&#128274;</p>
<h3 class="font-bold text-slate-800 text-lg mb-2">Join to access session details</h3>
<p class="text-slate-500 text-sm mb-4">Session locations and descriptions are encrypted and only revealed to participants.</p>
<button id="btn-join" onclick="joinActivity()"
class="bg-brand text-white font-bold px-8 py-2.5 rounded-xl hover:bg-brand-dark transition text-sm">Join Activity - Free</button>
</div>

<!-- Participation card (shown when enrolled) -->
<div id="member-card" class="hidden bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-6">
<h2 class="font-bold text-slate-800 text-base mb-3">Your Participation</h2>
<div class="flex flex-wrap gap-3 text-sm" id="enr-details"></div>
</div>

<!-- Welcome card -->
<div id="welcome-card" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
<h2 class="font-bold text-slate-800 text-lg mb-3">Welcome!</h2>
<p class="text-slate-500 text-sm leading-relaxed" id="welcome-text">Select an activity and join to see full details including session locations and descriptions.</p>
</div>
</div>

</div>
</main>

<footer class="bg-slate-800 text-slate-400 py-6 text-center text-sm mt-8">
<p>&copy; 2024&ndash;2026 Alpha One Labs &middot; Session details encrypted at rest &middot; <a href="/" class="hover:text-white">Home</a></p>
</footer>

<script>
const API = '';
function readAuthValue(key) {
const fromSession = sessionStorage.getItem(key);
if (fromSession) return fromSession;
const fromLocal = localStorage.getItem(key);
if (fromLocal) {
sessionStorage.setItem(key, fromLocal);
localStorage.removeItem(key);
}
return fromLocal;
}
function clearAuth() {
sessionStorage.removeItem('edu_token');
sessionStorage.removeItem('edu_user');
localStorage.removeItem('edu_token');
localStorage.removeItem('edu_user');
}
const token = readAuthValue('edu_token');
const user = JSON.parse(readAuthValue('edu_user') || 'null');
Comment thread
Lakshya-2440 marked this conversation as resolved.
function esc(s) {
return String(s)
.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
.replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}
function logout() { clearAuth(); window.location.href = '/login.html'; }

// Nav
const nav = document.getElementById('nav-auth');
if (token && user) {
nav.innerHTML =
'<span class="text-slate-600 text-sm hidden sm:block">Hi, ' + esc(user.username) + '</span>' +
'<a href="/dashboard.html" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Dashboard</a>' +
'<button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500">Logout</button>';
} else {
nav.innerHTML =
'<a href="/login.html" class="text-slate-600 text-sm font-medium hover:text-brand">Login</a>' +
'<a href="/login.html?tab=register" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Register</a>';
}

const typeIcon = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
const fmtLabel = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
const fmtColor = { live:'bg-red-100 text-red-700', self_paced:'bg-emerald-100 text-emerald-700', hybrid:'bg-purple-100 text-purple-700' };
const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };

const params = new URLSearchParams(location.search);
const actId = params.get('id');

async function deleteCourse() {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this course and all its sessions? This cannot be undone.')) return;
Comment thread
Lakshya-2440 marked this conversation as resolved.
try {
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
} catch (e) {
alert(e.message || 'Failed to delete course');
}
}

async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
try {
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
} catch (e) {
alert(e.message || 'Failed to delete session');
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

async function loadActivity() {
const headers = token ? { Authorization: 'Bearer ' + token } : {};
const res = await fetch('/api/activities/' + actId, { headers });
const data = await res.json();
if (!res.ok) { document.getElementById('act-title').textContent = 'Activity not found'; return; }

const a = data.activity;
document.title = a.title + ' - Alpha One Labs';
document.getElementById('crumb-title').textContent = a.title;
document.getElementById('act-title').textContent = a.title;
document.getElementById('act-description').textContent = a.description;
document.getElementById('act-meta').textContent =
'by ' + a.host_name + ' · ' + a.participant_count + ' participants · ' +
(data.sessions.length) + ' sessions';

const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600';
const fc = fmtColor[a.format] || 'bg-slate-100 text-slate-600';
const ic = typeIcon[a.type] || '✨';
document.getElementById('act-badges').innerHTML =
'<span class="badge ' + tc + '">' + ic + ' ' + esc(a.type) + '</span>' +
'<span class="badge ' + fc + '">' + fmtLabel[a.format] + '</span>' +
'<span class="badge bg-white/20 text-white">' + schedLabel[a.schedule_type] + '</span>';

document.getElementById('act-details').innerHTML =
'<div class="flex items-center gap-2 text-slate-600"><span>📋</span><span><strong>Type:</strong> ' + esc(a.type) + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>📡</span><span><strong>Format:</strong> ' + fmtLabel[a.format] + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>🗓</span><span><strong>Schedule:</strong> ' + schedLabel[a.schedule_type] + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>👥</span><span><strong>Participants:</strong> ' + a.participant_count + '</span></div>';

if (a.tags && a.tags.length) {
document.getElementById('act-tags').innerHTML =
a.tags.map(t => '<span class="badge bg-slate-100 text-slate-600">' + esc(t) + '</span>').join('');
}

// Sessions
const sessCard = document.getElementById('sessions-card');
document.getElementById('sessions-count').textContent = data.sessions.length + ' sessions';
const ul = document.getElementById('sessions-list');
if (!data.sessions.length) {
sessCard.classList.add('hidden');
} else {
ul.innerHTML = data.sessions.map(s => {
const locked = !data.is_enrolled && !data.is_host;
const hostDelete = data.is_host
? '<button class="mt-2 text-xs px-2 py-1 rounded danger-btn" onclick="deleteSession(\'' + esc(s.id) + '\')">Delete Session</button>'
: '';
return '<li class="px-5 py-3">' +
'<p class="font-semibold text-slate-800 text-sm">' + esc(s.title || 'Session') + '</p>' +
(s.start_time ? '<p class="text-xs text-slate-500 mt-0.5">&#128197; ' + esc(s.start_time) + (s.end_time ? ' – ' + esc(s.end_time) : '') + '</p>' : '') +
(locked ? '<p class="text-xs text-slate-400 mt-0.5">&#128274; Join to see location and details</p>' :
(s.location ? '<p class="text-xs text-emerald-600 mt-0.5">&#128205; ' + esc(s.location) + '</p>' : '') +
(s.description ? '<p class="text-xs text-slate-500 mt-0.5">' + esc(s.description) + '</p>' : '')) +
hostDelete +
'</li>';
}).join('');
}

// Actions + member card
if (data.is_host) {
document.getElementById('act-action').innerHTML =
'<div class="flex flex-wrap gap-2">' +
'<a href="/teach.html?activity_id=' + esc(a.id) + '" class="bg-white text-brand font-bold px-6 py-2.5 rounded-xl shadow hover:bg-indigo-50 transition text-sm">Manage Activity</a>' +
'<button onclick="deleteCourse()" class="bg-white text-red-700 border border-red-200 font-bold px-6 py-2.5 rounded-xl shadow hover:bg-red-50 transition text-sm">Delete Course</button>' +
'</div>';
document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
'You are the host of this activity. Use the Manage button to add sessions and update details.';
} else if (data.is_enrolled) {
document.getElementById('join-cta').classList.add('hidden');
document.getElementById('member-card').classList.remove('hidden');
const enr = data.enrollment;
const rc = { participant:'bg-slate-100 text-slate-600', instructor:'bg-purple-100 text-purple-700', organizer:'bg-amber-100 text-amber-700' };
const sc = { active:'bg-emerald-100 text-emerald-700', cancelled:'bg-red-100 text-red-700', completed:'bg-blue-100 text-blue-700' };
document.getElementById('enr-details').innerHTML =
'<span class="badge ' + (rc[enr.role]||'bg-slate-100 text-slate-600') + '">' + esc(enr.role) + '</span>' +
'<span class="badge ' + (sc[enr.status]||'bg-slate-100 text-slate-600') + '">' + esc(enr.status) + '</span>' +
'<span class="text-slate-500">You have full access to session details.</span>';
document.getElementById('act-action').innerHTML = '<span class="text-indigo-200 text-sm">✅ Joined</span>';
document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
'You are participating in this activity. Session locations and details are visible above.';
} else {
if (token) {
document.getElementById('join-cta').classList.remove('hidden');
} else {
document.getElementById('act-action').innerHTML =
'<a href="/login.html" class="bg-white text-brand font-bold px-6 py-2.5 rounded-xl shadow hover:bg-indigo-50 transition text-sm">Login to Join</a>';
}
}
}

async function joinActivity() {
if (!token) { window.location.href = '/login.html'; return; }
const btn = document.getElementById('btn-join');
btn.textContent = 'Joining...'; btn.disabled = true;
try {
const res = await fetch('/api/join', {
method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed');
window.location.reload();
} catch (e) {
alert(e.message);
btn.textContent = 'Join Activity - Free'; btn.disabled = false;
}
}

if (!actId) {
document.getElementById('act-title').textContent = 'No activity selected';
} else {
loadActivity().catch(e => { document.getElementById('act-title').textContent = 'Error: ' + e.message; });
}
</script>
</body>
</html>
88 changes: 88 additions & 0 deletions public/courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Courses — Alpha One Labs</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/waitingroom.css"/>
<style>
.page-inner{max-width:1100px;}
.page-header h1{font-size:24px;}
.courses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.course-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px 16px 14px;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.course-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.course-title{font-size:16px;font-weight:700;color:#111827;margin:0;}
.course-meta{margin-top:6px;color:#6b7280;font-size:13px;display:flex;gap:10px;flex-wrap:wrap;}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #e5e7eb;border-radius:999px;padding:2px 10px;font-size:12px;color:#374151;background:#f9fafb;}
.course-actions{display:flex;gap:8px;align-items:center;margin-top:12px;}
.btn-small{border:1px solid #0d9488;background:transparent;color:#0d9488;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-small:hover{background:#0d9488;color:#fff;}
.btn-ghost{border:1px solid #e5e7eb;color:#374151;background:#fff;}
.btn-ghost:hover{background:#f9fafb;color:#111827;border-color:#d1d5db;}
details{margin-top:12px;border-top:1px solid #eef2f7;padding-top:10px;}
summary{cursor:pointer;color:#111827;font-weight:700;font-size:13px;list-style:none;}
summary::-webkit-details-marker{display:none;}
.sessions{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.session{border:1px solid #e5e7eb;border-radius:8px;padding:10px 10px;background:#fff;}
.session-title{font-weight:700;font-size:13px;color:#111827;margin:0 0 4px;}
.session-sub{color:#6b7280;font-size:12px;}
.highlight{outline:3px solid rgba(99,102,241,.35);border-color:rgba(99,102,241,.5);}
.empty{color:#6b7280;font-size:14px;padding:18px;background:#fff;border:1px dashed #e5e7eb;border-radius:10px;}
@media(max-width:900px){.courses-grid{grid-template-columns:1fr;}}
</style>
</head>
<body>

<!-- NAV (same family as waitingroom.html) -->
<nav>
<a href="#" class="nav-logo">
<img class="nav-logo-box" alt="Alpha One Labs logo" src="/images/logo.png"/>
Alpha One Labs
</a>
<div class="nav-links">
<a href="#">LEARN ▾</a>
<a href="/courses.html">COURSES</a>
<a href="#">COMMUNITY ▾</a>
<a href="#">RESOURCES ▾</a>
<a href="#">ABOUT ▾</a>
</div>
<div class="nav-search">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" aria-label="Search courses" placeholder="What do you want to learn?"/>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<div class="nav-icons">
<button class="icon-btn" type="button">💬</button>
<button class="icon-btn" type="button" style="position:relative">🛒<span class="cart-badge">1</span></button>
<button class="icon-btn" type="button">🔔</button>
<button class="icon-btn" type="button">🌐</button>
<button class="icon-btn" type="button">🌙</button>
</div>
Comment thread
Lakshya-2440 marked this conversation as resolved.
<div class="nav-user" id="nav-user-menu" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">
<div class="avatar-nav" id="nav-avatar">L</div>
<span id="nav-uname">...</span> ▾
<div class="nav-user-dropdown" id="nav-user-dropdown">
<button type="button" id="logout-btn">Logout</button>
</div>
</div>
</nav>

<div class="page">
<div class="page-inner">
<div class="page-header">
<h1>Courses</h1>
<a class="btn-create" href="/teach.html">Create New Course</a>
</div>
<div class="explainer">
<h2>Browse created courses</h2>
<p>All published courses appear here. Expand a course to see its sessions.</p>
</div>
<div id="courses" class="courses-grid"></div>
<div id="empty" class="empty" style="display:none;">No courses yet. Create one from a waiting room or the Host flow.</div>
</div>
</div>

<script src="/js/auth.js"></script>
<script src="/courses.js"></script>
</body>
</html>
Loading