1221 lines
58 KiB
HTML
1221 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIS 2026 - Advanced Course Registration Portal</title>
|
|
<style>
|
|
/* === CSS Variables System === */
|
|
:root {
|
|
/* Light Mode */
|
|
--primary: #2c3e50;
|
|
--primary-hover: #34495e;
|
|
--accent: #3498db;
|
|
--accent-hover: #2980b9;
|
|
--success: #27ae60;
|
|
--warning: #f1c40f;
|
|
--danger: #e74c3c;
|
|
--info: #1abc9c;
|
|
|
|
--bg-body: #f4f6f9;
|
|
--bg-card: #ffffff;
|
|
--bg-sidebar: #ffffff;
|
|
|
|
--text-main: #2c3e50;
|
|
--text-secondary: #7f8c8d;
|
|
--text-light: #bdc3c7;
|
|
|
|
--border-color: #e0e6ed;
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
|
|
--shadow-md: 0 4px 6px rgba(0,0,0,0.05);
|
|
|
|
/* Layout */
|
|
--header-height: 70px;
|
|
--sidebar-width: 280px;
|
|
}
|
|
|
|
body[data-theme='dark'] {
|
|
--primary: #3498db;
|
|
--primary-hover: #2980b9;
|
|
--bg-body: #1a1a1a;
|
|
--bg-card: #2c2c2c;
|
|
--bg-sidebar: #242424;
|
|
--text-main: #ecf0f1;
|
|
--text-secondary: #bdc3c7;
|
|
--text-light: #7f8c8d;
|
|
--border-color: #444;
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* === Reset & Base === */
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
a { text-decoration: none; color: var(--accent); transition: 0.2s; }
|
|
a:hover { color: var(--accent-hover); text-decoration: underline; }
|
|
ul { list-style: none; padding: 0; margin: 0; }
|
|
|
|
/* Legacy Override */
|
|
table, tbody, tr, td { display: block; width: 100% !important; border: none !important; background: transparent !important; }
|
|
center { text-align: left; max-width: 1400px; margin: 0 auto; padding: 0 20px; display: block; }
|
|
hr { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }
|
|
font { color: inherit !important; }
|
|
|
|
/* === Top Alert Bar === */
|
|
.system-alert {
|
|
background: linear-gradient(90deg, #c0392b, #e74c3c);
|
|
color: white;
|
|
padding: 8px 0;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.system-alert span { animation: blink 2s infinite; font-weight: bold; background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 4px; }
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
|
|
|
|
/* === Header Area === */
|
|
.header-wrapper {
|
|
background: var(--bg-card);
|
|
border-bottom: 1px solid var(--border-color);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 15px 0;
|
|
position: sticky;
|
|
top: 36px; /* Alert height */
|
|
z-index: 900;
|
|
}
|
|
.header-content {
|
|
max-width: 1400px; margin: 0 auto; padding: 0 20px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.logo-area h1 { margin: 0; font-size: 24px; color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
|
.logo-icon { background: var(--accent); color: white; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
|
|
|
|
.user-profile { display: flex; align-items: center; gap: 20px; font-size: 13px; }
|
|
.user-info { text-align: right; }
|
|
.user-name { font-weight: bold; font-size: 15px; color: var(--text-main); }
|
|
.user-meta { color: var(--text-secondary); font-size: 12px; }
|
|
.avatar { width: 40px; height: 40px; background: #ddd; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); }
|
|
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
/* === Navigation Bar === */
|
|
.nav-bar {
|
|
background: var(--primary);
|
|
color: rgba(255,255,255,0.9);
|
|
padding: 0;
|
|
}
|
|
.nav-menu {
|
|
max-width: 1400px; margin: 0 auto; padding: 0 20px;
|
|
display: flex; gap: 5px;
|
|
}
|
|
.nav-link {
|
|
padding: 15px 20px;
|
|
color: rgba(255,255,255,0.8);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
border-bottom: 3px solid transparent;
|
|
transition: 0.2s;
|
|
text-decoration: none !important;
|
|
}
|
|
.nav-link:hover, .nav-link.active {
|
|
background: rgba(255,255,255,0.1);
|
|
color: white;
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
.nav-link.has-badge { position: relative; }
|
|
.badge {
|
|
position: absolute; top: 8px; right: 8px;
|
|
background: var(--danger); color: white;
|
|
font-size: 10px; padding: 2px 5px; border-radius: 10px; line-height: 1;
|
|
}
|
|
|
|
/* === Main Layout (Grid) === */
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr 340px;
|
|
gap: 25px;
|
|
max-width: 1400px;
|
|
margin: 30px auto;
|
|
padding: 0 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* View Specific Layout overrides */
|
|
#view-schedule, #view-grades, #view-generic {
|
|
display: block; /* Override default block, but handled by JS to toggle */
|
|
grid-template-columns: 1fr !important; /* Single column for full width views */
|
|
}
|
|
|
|
/* === Cards & Panels === */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
.card-header {
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
.card-body { padding: 20px; }
|
|
|
|
/* === Filter Section === */
|
|
.filter-group { margin-bottom: 20px; border-bottom: 1px dashed var(--border-color); padding-bottom: 15px; }
|
|
.filter-group:last-child { border: none; margin: 0; padding: 0; }
|
|
.filter-title { font-size: 13px; font-weight: bold; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 10px; display: block; }
|
|
.filter-option { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; cursor: pointer; color: var(--text-main); }
|
|
.filter-option:hover { color: var(--accent); }
|
|
.filter-option input[type="checkbox"], .filter-option input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
|
|
|
|
/* === Course List === */
|
|
.course-card {
|
|
display: grid;
|
|
grid-template-columns: 8px 1fr 140px;
|
|
gap: 0;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
margin-bottom: 15px;
|
|
transition: 0.2s;
|
|
position: relative;
|
|
}
|
|
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
|
|
.status-bar { border-radius: 6px 0 0 6px; }
|
|
.status-open { background: var(--success); }
|
|
.status-waitlist { background: var(--warning); }
|
|
.status-closed { background: var(--danger); text-decoration: line-through; opacity: 0.5; }
|
|
|
|
.course-main { padding: 15px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
|
|
.course-header { grid-column: span 2; display: flex; justify-content: space-between; align-items: flex-start; }
|
|
.course-code { font-weight: 800; color: var(--accent); font-size: 16px; }
|
|
.course-title { font-size: 16px; font-weight: 600; color: var(--text-main); margin-left: 10px; }
|
|
.course-meta { font-size: 13px; color: var(--text-secondary); display: flex; gap: 15px; align-items: center; }
|
|
.meta-icon { opacity: 0.6; margin-right: 4px; }
|
|
|
|
.course-action {
|
|
border-left: 1px solid var(--border-color);
|
|
padding: 15px;
|
|
display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: center;
|
|
background: rgba(0,0,0,0.01);
|
|
}
|
|
.btn {
|
|
padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; text-align: center; width: 100%; transition: 0.2s;
|
|
}
|
|
.btn-primary { background: var(--accent); color: white; }
|
|
.btn-primary:hover { background: var(--accent-hover); }
|
|
.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
|
|
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
|
|
.btn-danger { background: rgba(231, 76, 60, 0.1); color: var(--danger); }
|
|
.btn-danger:hover { background: var(--danger); color: white; }
|
|
|
|
/* === Tooltips & Modals === */
|
|
.tag { display: inline-block; padding: 2px 6px; background: #eee; border-radius: 4px; font-size: 11px; color: #666; font-weight: bold; margin-right: 5px; }
|
|
.tag-blue { background: rgba(52, 152, 219, 0.1); color: #3498db; }
|
|
.tag-purple { background: rgba(155, 89, 182, 0.1); color: #9b59b6; }
|
|
|
|
/* === Theme Toggle === */
|
|
.theme-float {
|
|
position: fixed; bottom: 30px; right: 30px;
|
|
width: 50px; height: 50px;
|
|
background: var(--primary); color: white;
|
|
border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 24px; cursor: pointer; z-index: 9999;
|
|
transition: 0.3s;
|
|
}
|
|
.theme-float:hover { transform: scale(1.1) rotate(15deg); }
|
|
|
|
/* Hide legacy tags */
|
|
body > table, body > table > tbody, body > table > tr, body > table > td { display: block !important; }
|
|
</style>
|
|
</head>
|
|
<body bgcolor="#ffffff" text="#000000">
|
|
|
|
<!-- Dark Mode Toggle -->
|
|
<div class="theme-float" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</div>
|
|
|
|
<!-- System Alert -->
|
|
<div class="system-alert">
|
|
<span>⚠️ ALERT</span> High traffic volume detected. Do not refresh the page to maintain your queue position.
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="header-wrapper">
|
|
<div class="header-content">
|
|
<div class="logo-area">
|
|
<h1><div class="logo-icon">S</div> SIS Portal <small style="font-size:12px; font-weight:normal; opacity:0.6; margin-left:10px;">v5.2.0</small></h1>
|
|
</div>
|
|
<div class="user-profile">
|
|
<div class="user-info">
|
|
<div class="user-name">Alex Chen (ID: 9928122)</div>
|
|
<div class="user-meta">Computer Science | Senior | GPA: 3.85</div>
|
|
</div>
|
|
<div class="avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Alex+Chen&background=random" alt="User">
|
|
</div>
|
|
<a href="javascript:void(0)" onclick="alert('Logging out...')" class="btn btn-outline" style="width:auto;">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="nav-bar">
|
|
<div class="nav-menu">
|
|
<a href="javascript:void(0)" class="nav-link active" onclick="switchView('registration', this)">Course Registration</a>
|
|
<a href="javascript:void(0)" class="nav-link" onclick="switchView('schedule', this)">My Schedule</a>
|
|
<a href="javascript:void(0)" class="nav-link has-badge" onclick="switchView('grades', this)">Grades <span class="badge">NEW</span></a>
|
|
<a href="javascript:void(0)" class="nav-link" onclick="switchView('generic', this)">Financial Aid</a>
|
|
<a href="javascript:void(0)" class="nav-link" onclick="switchView('generic', this)">Degree Audit</a>
|
|
<a href="javascript:void(0)" class="nav-link" onclick="switchView('generic', this)">Transcripts</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div id="main-viewport">
|
|
|
|
<!-- VIEW: Course Registration (Default) -->
|
|
<div id="view-registration" class="grid-container view-section">
|
|
|
|
<!-- Sidebar Filters -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>🔍 Filter Courses</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<form onsubmit="event.preventDefault(); window.searchCourses()">
|
|
<div class="filter-group">
|
|
<label class="filter-title">Subject</label>
|
|
<select style="width:100%; padding:8px; border:1px solid var(--border-color); border-radius:4px; font-family:inherit;">
|
|
<option>CS - Computer Science</option>
|
|
<option>MATH - Mathematics</option>
|
|
<option>ENG - English</option>
|
|
<option>PHYS - Physics</option>
|
|
<option>BIO - Biology</option>
|
|
<option>HIST - History</option>
|
|
<option>PSY - Psychology</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-title">Course Level</label>
|
|
<label class="filter-option"><input type="checkbox"> 100-299 (Lower Div)</label>
|
|
<label class="filter-option"><input type="checkbox" checked> 300-499 (Upper Div)</label>
|
|
<label class="filter-option"><input type="checkbox"> 500+ (Graduate)</label>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-title">Schedule</label>
|
|
<label class="filter-option"><input type="checkbox"> Mon / Wed / Fri</label>
|
|
<label class="filter-option"><input type="checkbox"> Tue / Thu</label>
|
|
<label class="filter-option"><input type="checkbox"> Evening / Weekend</label>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-title">Availability</label>
|
|
<label class="filter-option"><input type="radio" name="status" checked> Open Classes Only</label>
|
|
<label class="filter-option"><input type="radio" name="status"> Include Waitlist</label>
|
|
</div>
|
|
|
|
<input type="submit" value="Apply Filters" class="btn btn-primary" style="margin-top:10px;">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar News -->
|
|
<div class="card">
|
|
<div class="card-header">Campus Alerts</div>
|
|
<div class="card-body" style="font-size:13px;">
|
|
<div style="margin-bottom:15px; border-left:3px solid var(--accent); padding-left:10px;">
|
|
<strong>Financial Aid Disbursement</strong><br>
|
|
<span style="color:var(--text-secondary)">Spring 2026 funds will be released on Jan 20th.</span>
|
|
</div>
|
|
<div style="margin-bottom:15px; border-left:3px solid var(--danger); padding-left:10px;">
|
|
<strong>System Maintenance</strong><br>
|
|
<span style="color:var(--text-secondary)">SIS will be offline this Sunday from 2am-4am.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Main Course List -->
|
|
<div>
|
|
<div style="margin-bottom: 20px; display:flex; justify-content:space-between; align-items:center;">
|
|
<div>
|
|
<h2 style="margin:0; font-size:20px; color:var(--primary);">Spring 2026 Course Schedule</h2>
|
|
<div style="font-size:13px; color:var(--text-secondary); margin-top:5px;">Showing results for: <strong>Computer Science</strong> (25 found)</div>
|
|
</div>
|
|
<div style="display:flex; gap:10px;">
|
|
<button class="btn btn-outline" style="width:auto;">Print View</button>
|
|
<button class="btn btn-outline" style="width:auto;">Exclude Conflicts</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 1 -->
|
|
<div class="course-card">
|
|
<div class="status-bar status-open" title="Open"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);">
|
|
<div>
|
|
<span class="course-code">CS 301.01</span>
|
|
<span class="course-title">Algorithms & Data Structures</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-blue">4.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Smith, J.</strong></span>
|
|
<span>⭐ 4.5/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>📍 Bldg A, Rm 101</span>
|
|
<span>🗓️ MWF 10:00 - 10:50 AM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 50</div>
|
|
<div>Enrolled: 48</div>
|
|
<div style="font-weight:bold; color:var(--success);">Remaining: 2</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-primary" onclick="addToCart('CS 301.01')">Add</button>
|
|
<button class="btn btn-outline">Watch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 2 -->
|
|
<div class="course-card">
|
|
<div class="status-bar status-waitlist" title="Waitlist"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);" disabled>
|
|
<div>
|
|
<span class="course-code">CS 301.02</span>
|
|
<span class="course-title">Algorithms & Data Structures</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-blue">4.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Smith, J.</strong></span>
|
|
<span>⭐ 4.5/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>📍 Bldg A, Rm 101</span>
|
|
<span>🗓️ MWF 11:00 - 11:50 AM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 50</div>
|
|
<div>Enrolled: 50</div>
|
|
<div style="font-weight:bold; color:var(--warning);">Waitlist: 5</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-primary" style="background:#f39c12; color:white; border:none;" onclick="showToast('Added to waitlist position #6', 'var(--warning)')">Waitlist</button>
|
|
<button class="btn btn-outline">Watch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Msg -->
|
|
<div style="background:rgba(231, 76, 60, 0.1); border:1px solid var(--danger); color:var(--danger); padding:15px; border-radius:6px; margin-bottom:15px; display:flex; align-items:center; gap:10px;">
|
|
<span style="font-size:20px;">👮</span>
|
|
<div>
|
|
<strong>Hold on Registration:</strong> You must complete the mandatory assignment "Sexual Harassment Prevention Training" before adding more than 12 credits.
|
|
<a href="#" style="text-decoration:underline; font-weight:bold;">[Complete Now]</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 3 -->
|
|
<div class="course-card">
|
|
<div class="status-bar status-open" title="Open"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);">
|
|
<div>
|
|
<span class="course-code">CS 350.01</span>
|
|
<span class="course-title">Operating Systems</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-blue">4.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Linux, T.</strong></span>
|
|
<span>⭐ 4.9/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>📍 Engr Hall, 300</span>
|
|
<span>🗓️ MWF 13:00 - 13:50 PM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 100</div>
|
|
<div>Enrolled: 98</div>
|
|
<div style="font-weight:bold; color:var(--success);">Remaining: 2</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-primary" onclick="addToCart('CS 350.01')">Add</button>
|
|
<button class="btn btn-outline">Watch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 4 -->
|
|
<div class="course-card">
|
|
<div class="status-bar status-open" title="Open"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);">
|
|
<div>
|
|
<span class="course-code">CS 420.01</span>
|
|
<span class="course-title">Database Management Systems</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-purple">3.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Codd, E.</strong></span>
|
|
<span>⭐ 4.2/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>📍 Sci Center, 101</span>
|
|
<span>🗓️ TR 11:00 - 12:15 PM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 40</div>
|
|
<div>Enrolled: 35</div>
|
|
<div style="font-weight:bold; color:var(--success);">Remaining: 5</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-primary" onclick="addToCart('CS 420.01')">Add</button>
|
|
<button class="btn btn-outline">Watch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 5 (Closed) -->
|
|
<div class="course-card" style="opacity:0.75;">
|
|
<div class="status-bar status-closed" title="Closed"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);" disabled>
|
|
<div>
|
|
<span class="course-code">CS 410.01</span>
|
|
<span class="course-title">Software Engineering</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-purple">3.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Brooks, F.</strong></span>
|
|
<span>⭐ 3.8/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>💻 Online / Remote</span>
|
|
<span>🗓️ W 18:00 - 20:50 PM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 30</div>
|
|
<div>Enrolled: 30</div>
|
|
<div style="font-weight:bold; color:var(--danger);">CLOSED</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-outline" disabled style="cursor:not-allowed;">Full</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course 6 (Math) -->
|
|
<div class="course-card">
|
|
<div class="status-bar status-open" title="Open"></div>
|
|
<div class="course-main">
|
|
<div class="course-header">
|
|
<div style="display:flex; align-items:center;">
|
|
<input type="checkbox" style="margin-right:15px; transform:scale(1.2);">
|
|
<div>
|
|
<span class="course-code">MATH 330.01</span>
|
|
<span class="course-title">Linear Algebra</span>
|
|
</div>
|
|
</div>
|
|
<span class="tag tag-purple">3.0 Credits</span>
|
|
</div>
|
|
|
|
<div class="course-details">
|
|
<div class="course-meta" style="margin-bottom:6px;">
|
|
<span>👨🏫 <strong>Prof. Gauss, K.</strong></span>
|
|
<span>⭐ 5.0/5.0</span>
|
|
</div>
|
|
<div class="course-meta">
|
|
<span>📍 Math Hall, 2B</span>
|
|
<span>🗓️ MWF 08:00 - 08:50 AM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="course-stats" style="text-align:right; font-size:13px; color:var(--text-secondary);">
|
|
<div>Capacity: 60</div>
|
|
<div>Enrolled: 55</div>
|
|
<div style="font-weight:bold; color:var(--success);">Remaining: 5</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-action">
|
|
<button class="btn btn-primary" onclick="addToCart('MATH 330.01')">Add</button>
|
|
<button class="btn btn-outline">Watch</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Pagination -->
|
|
<div style="display:flex; justify-content:center; gap:10px; margin-top:30px;">
|
|
<button class="btn btn-outline" disabled>Previous</button>
|
|
<button class="btn btn-primary" style="width:auto;">1</button>
|
|
<button class="btn btn-outline" style="width:auto;">2</button>
|
|
<button class="btn btn-outline" style="width:auto;">3</button>
|
|
<button class="btn btn-outline">Next</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Sidebar (Cart) -->
|
|
<div>
|
|
<!-- Cart Widget -->
|
|
<div class="card" id="cart-widget">
|
|
<div class="card-header" style="background:var(--secondary); color:white;">
|
|
<span>🛒 My Cart (<span id="cart-count">3</span>)</span>
|
|
</div>
|
|
<!-- Cart Items Container -->
|
|
<div id="cart-items-wrapper">
|
|
<div id="cart-item-CS301" class="cart-item" style="border-bottom:1px solid var(--border-color); padding:15px;">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
|
|
<strong>CS 301.01</strong>
|
|
<a href="javascript:void(0)" onclick="removeFromCart('cart-item-CS301')" style="color:var(--danger); font-size:12px;">✕</a>
|
|
</div>
|
|
<div style="font-size:12px; opacity:0.8;">Alg & Data Struct</div>
|
|
<div style="font-size:12px; margin-top:5px; color:var(--success);">MWF 10:00-10:50</div>
|
|
</div>
|
|
|
|
<div id="cart-item-MATH330" class="cart-item" style="border-bottom:1px solid var(--border-color); padding:15px;">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
|
|
<strong>MATH 330.01</strong>
|
|
<a href="javascript:void(0)" onclick="removeFromCart('cart-item-MATH330')" style="color:var(--danger); font-size:12px;">✕</a>
|
|
</div>
|
|
<div style="font-size:12px; opacity:0.8;">Linear Algebra</div>
|
|
<div style="font-size:12px; margin-top:5px; color:var(--success);">MWF 08:00-08:50</div>
|
|
</div>
|
|
|
|
<!-- Waitlisted Item -->
|
|
<div id="cart-item-CS350" class="cart-item" style="border-bottom:1px solid var(--border-color); padding:15px; background:rgba(243, 156, 18, 0.1);">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
|
|
<strong>CS 350.02</strong>
|
|
<a href="javascript:void(0)" onclick="removeFromCart('cart-item-CS350')" style="color:var(--danger); font-size:12px;">✕</a>
|
|
</div>
|
|
<div style="font-size:12px; opacity:0.8;">Operating Systems</div>
|
|
<div style="font-size:12px; margin-top:5px; color:var(--warning); font-weight:bold;">Waitlist Position: #3</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding:15px; background:var(--bg-card-secondary);">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:10px; font-weight:bold;">
|
|
<span>Total Units:</span>
|
|
<span id="cart-total">7.0</span>
|
|
</div>
|
|
<button id="btn-submit-reg" class="btn btn-primary" onclick="submitRegistration()">Submit Registration</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conflict Warning -->
|
|
<div class="card" style="border-color:var(--danger);">
|
|
<div class="card-header" style="background:rgba(231, 76, 60, 0.1); color:var(--danger);">
|
|
<span>⚠️ Schedule Conflict</span>
|
|
</div>
|
|
<div class="card-body" style="font-size:13px; color:#c0392b;">
|
|
<strong>CS 301.01</strong> overlaps with <strong>PHYS 202.04</strong> on Mondays.
|
|
<div style="margin-top:10px;">
|
|
<a href="#">[Resolve Conflict]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="card">
|
|
<div class="card-header">Quick Links</div>
|
|
<div class="card-body">
|
|
<ul style="font-size:13px;">
|
|
<li style="margin-bottom:10px;"><a href="#">📅 Academic Calendar</a></li>
|
|
<li style="margin-bottom:10px;"><a href="#">💰 Pay Tuition Online</a></li>
|
|
<li style="margin-bottom:10px;"><a href="#">🗺️ Campus Maps</a></li>
|
|
<li style="margin-bottom:10px;"><a href="#">📚 Bookstore</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> <!-- End view-registration -->
|
|
|
|
<!-- VIEW: Schedule -->
|
|
<div id="view-schedule" class="view-section" style="display:none; max-width:1400px; margin:30px auto; padding:0 20px;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>Weekly Schedule - Spring 2026</span>
|
|
<div style="display:flex; gap:10px;">
|
|
<button class="btn btn-outline" style="padding:4px 10px; font-size:12px;">Export iCal</button>
|
|
<button class="btn btn-outline" style="padding:4px 10px; font-size:12px;">Print</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<style>
|
|
.schedule-grid { display: grid; grid-template-columns: 80px repeat(5, 1fr); gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); }
|
|
.sched-header { background: var(--bg-body); padding: 10px; text-align: center; font-weight: bold; font-size: 14px; }
|
|
.sched-time { background: var(--bg-card); padding: 10px; text-align: center; font-size: 12px; color: var(--text-secondary); height: 80px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); }
|
|
.sched-cell { background: var(--bg-card); height: 80px; position: relative; padding: 2px; }
|
|
.sched-block {
|
|
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 2px;
|
|
border-radius: 4px; padding: 5px; font-size: 11px; color: white; overflow: hidden;
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
}
|
|
.block-blue { background: rgba(52, 152, 219, 0.9); border-left: 4px solid #2980b9; }
|
|
.block-green { background: rgba(39, 174, 96, 0.9); border-left: 4px solid #219150; }
|
|
.block-orange { background: rgba(243, 156, 18, 0.9); border-left: 4px solid #d35400; }
|
|
</style>
|
|
<div class="schedule-grid">
|
|
<!-- Headers -->
|
|
<div class="sched-header">Time</div>
|
|
<div class="sched-header">Mon</div>
|
|
<div class="sched-header">Tue</div>
|
|
<div class="sched-header">Wed</div>
|
|
<div class="sched-header">Thu</div>
|
|
<div class="sched-header">Fri</div>
|
|
|
|
<!-- 08:00 Block -->
|
|
<div class="sched-time">08:00 AM</div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-green">
|
|
<strong>MATH 330</strong><br>Math Hall 2B
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-green">
|
|
<strong>MATH 330</strong><br>Math Hall 2B
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-green">
|
|
<strong>MATH 330</strong><br>Math Hall 2B
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 09:00 Block -->
|
|
<div class="sched-time">09:00 AM</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
|
|
<!-- 10:00 Block -->
|
|
<div class="sched-time">10:00 AM</div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-blue">
|
|
<strong>CS 301</strong><br>Bldg A, 101
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-blue">
|
|
<strong>CS 301</strong><br>Bldg A, 101
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-blue">
|
|
<strong>CS 301</strong><br>Bldg A, 101
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 11:00 Block -->
|
|
<div class="sched-time">11:00 AM</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-orange" style="height:156px; z-index:10;">
|
|
<strong>CS 420</strong><br>Sci Ctr 101<br>11:00-12:15
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell">
|
|
<div class="sched-block block-orange" style="height:156px; z-index:10;">
|
|
<strong>CS 420</strong><br>Sci Ctr 101<br>11:00-12:15
|
|
</div>
|
|
</div>
|
|
<div class="sched-cell"></div>
|
|
|
|
<!-- 12:00 Block -->
|
|
<div class="sched-time">12:00 PM</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div> <!-- Skip for overlap -->
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div> <!-- Skip for overlap -->
|
|
<div class="sched-cell"></div>
|
|
|
|
<!-- 13:00 Block -->
|
|
<div class="sched-time">01:00 PM</div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
<div class="sched-cell"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW: Grades -->
|
|
<div id="view-grades" class="view-section" style="display:none; max-width:1400px; margin:30px auto; padding:0 20px;">
|
|
<div style="display:grid; grid-template-columns: 1fr 340px; gap:25px;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>Academic History</span>
|
|
<button class="btn btn-outline" style="padding:4px 10px; font-size:12px;">Download Unofficial Transcript</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 style="margin-top:0; color:var(--text-secondary); text-transform:uppercase; font-size:12px; letter-spacing:1px;">Fall 2025</h4>
|
|
<table style="width:100%; border-collapse:collapse; margin-bottom:30px;">
|
|
<thead>
|
|
<tr style="border-bottom:2px solid var(--border-color); text-align:left; color:var(--text-secondary); font-size:12px; text-transform:uppercase;">
|
|
<th style="padding:10px;">Course</th>
|
|
<th style="padding:10px;">Title</th>
|
|
<th style="padding:10px;">Credits</th>
|
|
<th style="padding:10px;">Grade</th>
|
|
<th style="padding:10px;">Points</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">CS 201</td>
|
|
<td style="padding:12px 10px;">Intro to Programming II</td>
|
|
<td style="padding:12px 10px;">4.0</td>
|
|
<td style="padding:12px 10px; color:var(--success); font-weight:bold;">A</td>
|
|
<td style="padding:12px 10px;">16.0</td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">MATH 101</td>
|
|
<td style="padding:12px 10px;">Calculus I</td>
|
|
<td style="padding:12px 10px;">4.0</td>
|
|
<td style="padding:12px 10px; color:var(--success); font-weight:bold;">A-</td>
|
|
<td style="padding:12px 10px;">14.8</td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">ENG 105</td>
|
|
<td style="padding:12px 10px;">Academic Writing</td>
|
|
<td style="padding:12px 10px;">3.0</td>
|
|
<td style="padding:12px 10px; color:var(--primary); font-weight:bold;">B+</td>
|
|
<td style="padding:12px 10px;">9.9</td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">HIST 100</td>
|
|
<td style="padding:12px 10px;">World History</td>
|
|
<td style="padding:12px 10px;">3.0</td>
|
|
<td style="padding:12px 10px; color:var(--success); font-weight:bold;">A</td>
|
|
<td style="padding:12px 10px;">12.0</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr style="background:var(--bg-body); font-weight:bold;">
|
|
<td colspan="2" style="padding:10px; text-align:right;">Term GPA:</td>
|
|
<td colspan="3" style="padding:10px;">3.85</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<h4 style="margin-top:0; color:var(--text-secondary); text-transform:uppercase; font-size:12px; letter-spacing:1px;">Spring 2025</h4>
|
|
<table style="width:100%; border-collapse:collapse;">
|
|
<thead>
|
|
<tr style="border-bottom:2px solid var(--border-color); text-align:left; color:var(--text-secondary); font-size:12px; text-transform:uppercase;">
|
|
<th style="padding:10px;">Course</th>
|
|
<th style="padding:10px;">Title</th>
|
|
<th style="padding:10px;">Credits</th>
|
|
<th style="padding:10px;">Grade</th>
|
|
<th style="padding:10px;">Points</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">CS 101</td>
|
|
<td style="padding:12px 10px;">Intro to Programming I</td>
|
|
<td style="padding:12px 10px;">4.0</td>
|
|
<td style="padding:12px 10px; color:var(--success); font-weight:bold;">A</td>
|
|
<td style="padding:12px 10px;">16.0</td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid var(--border-color);">
|
|
<td style="padding:12px 10px; font-weight:bold;">PSY 101</td>
|
|
<td style="padding:12px 10px;">Intro Psychology</td>
|
|
<td style="padding:12px 10px;">3.0</td>
|
|
<td style="padding:12px 10px; color:var(--primary); font-weight:bold;">B</td>
|
|
<td style="padding:12px 10px;">9.0</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr style="background:var(--bg-body); font-weight:bold;">
|
|
<td colspan="2" style="padding:10px; text-align:right;">Term GPA:</td>
|
|
<td colspan="3" style="padding:10px;">3.57</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">GPA Summary</div>
|
|
<div class="card-body">
|
|
<div style="text-align:center; padding:20px 0; border-bottom:1px solid var(--border-color);">
|
|
<div style="font-size:12px; color:var(--text-secondary); text-transform:uppercase;">Cumulative GPA</div>
|
|
<div style="font-size:3rem; font-weight:bold; color:var(--primary);">3.78</div>
|
|
<div style="display:flex; justify-content:center; gap:5px; margin-top:5px;">
|
|
<span>⭐⭐⭐⭐</span><span style="opacity:0.3">⭐</span>
|
|
</div>
|
|
</div>
|
|
<ul style="margin-top:20px; font-size:13px;">
|
|
<li style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
|
<span>Total Units Attempted:</span>
|
|
<strong>45.0</strong>
|
|
</li>
|
|
<li style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
|
<span>Total Units Earned:</span>
|
|
<strong>45.0</strong>
|
|
</li>
|
|
<li style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
|
<span>Class Rank:</span>
|
|
<strong>Top 15%</strong>
|
|
</li>
|
|
<li style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
|
<span>Academic Standing:</span>
|
|
<span class="tag tag-blue">Good Standing</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW: Generic Placeholder -->
|
|
<div id="view-generic" class="grid-container view-section" style="display:none; grid-template-columns: 1fr;">
|
|
<div class="card">
|
|
<div class="card-header">System Module</div>
|
|
<div class="card-body">
|
|
<p>This module is currently being updated for the Spring 2026 term. Please check back later or contact the registrar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- End main-viewport -->
|
|
|
|
<!-- Mega Footer -->
|
|
<div style="background:var(--bg-card); border-top:1px solid var(--border-color); padding:40px 0; margin-top:50px;">
|
|
<div style="max-width:1400px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:30px;">
|
|
<div>
|
|
<h4 style="margin-top:0;">University Registrar</h4>
|
|
<p style="font-size:13px; color:var(--text-secondary);">
|
|
Building 42, Room 100<br>
|
|
1234 University Ave<br>
|
|
College Town, ST 90210
|
|
</p>
|
|
<p style="font-size:13px; color:var(--text-secondary);">Phone: (555) 0199-8800</p>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin-top:0;">Registration Help</h4>
|
|
<ul style="font-size:13px; line-height:2;">
|
|
<li><a href="#" style="color:var(--text-secondary);">How to Register</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Waitlist Policy</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Permission Numbers</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Withdrawal Deadlines</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin-top:0;">Systems</h4>
|
|
<ul style="font-size:13px; line-height:2;">
|
|
<li><a href="#" style="color:var(--text-secondary);">Canvas LMS</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Student Email</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Library Database</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">IT Support Ticket</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin-top:0;">Legal</h4>
|
|
<ul style="font-size:13px; line-height:2;">
|
|
<li><a href="#" style="color:var(--text-secondary);">Privacy Policy</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Accessibility</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">FERPA Rights</a></li>
|
|
<li><a href="#" style="color:var(--text-secondary);">Title IX</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:center; margin-top:40px; font-size:12px; color:var(--text-light);">
|
|
© 2026 Board of Regents. All Rights Reserved. | Server Time: <span id="server-time">Loading...</span> | Node: REG-04
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// -------------------------------------------------------------------------
|
|
// Data & State
|
|
// -------------------------------------------------------------------------
|
|
const COURSE_DB = {
|
|
'CS 301.01': { title: 'Algorithms & Data Structures', code: 'CS 301.01', time: 'MWF 10:00-10:50', units: 4.0 },
|
|
'CS 301.02': { title: 'Algorithms & Data Structures', code: 'CS 301.02', time: 'MWF 11:00-11:50', units: 4.0 },
|
|
'CS 350.01': { title: 'Operating Systems', code: 'CS 350.01', time: 'MWF 13:00-13:50', units: 4.0 },
|
|
'CS 420.01': { title: 'Database Management Systems', code: 'CS 420.01', time: 'TR 11:00-12:15', units: 3.0 },
|
|
'MATH 330.01': { title: 'Linear Algebra', code: 'MATH 330.01', time: 'MWF 08:00-08:50', units: 3.0 },
|
|
};
|
|
|
|
let cart = [
|
|
COURSE_DB['CS 301.01'],
|
|
COURSE_DB['MATH 330.01'],
|
|
{ ...COURSE_DB['CS 301.02'], waitlisted: true, position: 3, code: 'CS 350.02', title: 'Operating Systems' } // Mock waitlist item manually
|
|
];
|
|
|
|
// -------------------------------------------------------------------------
|
|
// View Management
|
|
// -------------------------------------------------------------------------
|
|
function switchView(viewId, navElement) {
|
|
// Toggle Active Class
|
|
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
if(navElement) navElement.classList.add('active');
|
|
|
|
// Hide all views
|
|
document.querySelectorAll('.view-section').forEach(el => el.style.display = 'none');
|
|
|
|
// Show target view
|
|
const target = document.getElementById(`view-${viewId}`);
|
|
if (target) {
|
|
// Determine display type based on ID
|
|
if (viewId === 'registration') {
|
|
target.style.display = 'grid'; // Grid for the 3-column registration view
|
|
} else {
|
|
target.style.display = 'block'; // Block for others to allow internal flow
|
|
}
|
|
|
|
// Simple animation
|
|
target.style.opacity = 0;
|
|
target.style.transform = 'translateY(10px)';
|
|
setTimeout(() => {
|
|
target.style.transition = 'all 0.3s ease';
|
|
target.style.opacity = 1;
|
|
target.style.transform = 'translateY(0)';
|
|
}, 10);
|
|
} else {
|
|
console.error("Target View Not Found:", viewId);
|
|
// Fallback to avoid blank screen
|
|
document.getElementById('view-generic').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Cart/Waitlist Logic
|
|
// -------------------------------------------------------------------------
|
|
function addToCart(courseId) {
|
|
// Check if already in cart
|
|
if (cart.find(c => c.code === courseId)) {
|
|
showToast(`⚠️ ${courseId} is already in your cart`, 'var(--warning)');
|
|
return;
|
|
}
|
|
|
|
const course = COURSE_DB[courseId];
|
|
if (!course) return;
|
|
|
|
cart.push(course);
|
|
renderCart();
|
|
showToast(`✅ Added ${courseId} to cart`, 'var(--success)');
|
|
|
|
// Disable the Add button visually
|
|
const btns = Array.from(document.querySelectorAll('button'));
|
|
const targetBtn = btns.find(b => b.onclick && b.onclick.toString().includes(courseId));
|
|
if (targetBtn) {
|
|
targetBtn.innerText = 'Added';
|
|
targetBtn.disabled = true;
|
|
targetBtn.classList.add('btn-outline');
|
|
targetBtn.classList.remove('btn-primary');
|
|
}
|
|
}
|
|
|
|
function removeFromCart(id) {
|
|
// Handle DOM ID "cart-item-XXX" or pure Code "CS 301.01"
|
|
const cleanId = id.replace('cart-item-', '').replace('CS3', 'CS 3').replace('MATH3', 'MATH 3'); // Simple hack for demo ID matching
|
|
|
|
// Remove from array (rough match)
|
|
const idx = cart.findIndex(c => id.includes(c.code.replace(/[\s.]/g, '')) || c.code === id);
|
|
if (idx !== -1) {
|
|
cart.splice(idx, 1);
|
|
renderCart();
|
|
} else {
|
|
// Fallback for the static initial items if IDs don't match perfectly
|
|
const itemEl = document.getElementById(id) || document.getElementById('cart-item-' + id);
|
|
if(itemEl) itemEl.remove();
|
|
updateCartTotals();
|
|
}
|
|
}
|
|
|
|
function renderCart() {
|
|
const container = document.getElementById('cart-items-wrapper');
|
|
container.innerHTML = '';
|
|
|
|
cart.forEach(item => {
|
|
const safeId = item.code.replace(/[\s.]/g, '');
|
|
const div = document.createElement('div');
|
|
div.id = `cart-item-${safeId}`;
|
|
div.className = 'cart-item';
|
|
div.style.cssText = `border-bottom:1px solid var(--border-color); padding:15px; ${item.waitlisted ? 'background:rgba(243, 156, 18, 0.1);' : ''}`;
|
|
|
|
div.innerHTML = `
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
|
|
<strong>${item.code}</strong>
|
|
<a href="javascript:void(0)" onclick="removeFromCart('${safeId}')" style="color:var(--danger); font-size:12px;">✕</a>
|
|
</div>
|
|
<div style="font-size:12px; opacity:0.8;">${item.title}</div>
|
|
<div style="font-size:12px; margin-top:5px; color:${item.waitlisted ? 'var(--warning)' : 'var(--success)'}; font-weight:${item.waitlisted ? 'bold' : 'normal'};">
|
|
${item.waitlisted ? 'Waitlist Position: #' + item.position : item.time}
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
updateCartTotals();
|
|
}
|
|
|
|
function updateCartTotals() {
|
|
const count = cart.length;
|
|
const totalUnits = cart.reduce((acc, item) => acc + (item.units || 0), 0);
|
|
|
|
document.getElementById('cart-count').innerText = count;
|
|
document.getElementById('cart-total').innerText = totalUnits.toFixed(1);
|
|
|
|
const btn = document.getElementById('btn-submit-reg');
|
|
if (count === 0) {
|
|
btn.disabled = true;
|
|
btn.style.opacity = 0.5;
|
|
btn.innerText = 'Cart Empty';
|
|
} else {
|
|
btn.disabled = false;
|
|
btn.style.opacity = 1;
|
|
btn.innerText = 'Submit Registration';
|
|
}
|
|
}
|
|
|
|
function submitRegistration() {
|
|
const btn = document.getElementById('btn-submit-reg');
|
|
const originalText = btn.innerText;
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '⏳ Processing...';
|
|
|
|
setTimeout(() => {
|
|
btn.style.background = 'var(--success)';
|
|
btn.innerText = '✔ Registered!';
|
|
showToast('Registration successful! Confirmation email sent.', 'var(--success)');
|
|
|
|
setTimeout(() => {
|
|
cart = []; // Clear cart
|
|
renderCart();
|
|
btn.style.background = 'var(--primary)';
|
|
}, 1000);
|
|
}, 1500);
|
|
}
|
|
|
|
// Mock Search
|
|
window.searchCourses = function() {
|
|
showToast('🔍 Applying filters...', 'var(--secondary)');
|
|
setTimeout(() => {
|
|
showToast('Found 25 courses matching your criteria.', 'var(--primary)');
|
|
}, 800);
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Utilities
|
|
// -------------------------------------------------------------------------
|
|
function showToast(msg, color) {
|
|
const toast = document.createElement('div');
|
|
toast.innerHTML = msg;
|
|
toast.style.cssText = `
|
|
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
|
background: ${color || '#333'}; color: white; padding: 12px 24px; border-radius: 50px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000; font-size: 14px;
|
|
display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;
|
|
`;
|
|
document.body.appendChild(toast);
|
|
// Trigger reflow
|
|
void toast.offsetWidth;
|
|
toast.style.opacity = '1';
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const isDark = document.body.getAttribute('data-theme') === 'dark';
|
|
if (isDark) {
|
|
document.body.removeAttribute('data-theme');
|
|
} else {
|
|
document.body.setAttribute('data-theme', 'dark');
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Simulation Loops
|
|
// -------------------------------------------------------------------------
|
|
setInterval(() => {
|
|
document.getElementById('server-time').innerText = new Date().toUTCString();
|
|
}, 1000);
|
|
|
|
// Initial Render
|
|
renderCart(); // Hydrate IDs
|
|
console.log("SIS v5.2.0 Logic Ready");
|
|
</script>
|
|
|
|
</body>
|
|
</html> |