studyup 1.0.2 → 1.0.4

package/index.html

@@ -4,12 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>StudyUp - Student Portal</title>
-    <!-- Material Design 1 / Roboto Typography & Icons -->
+    <!-- Material Design / Roboto Typography & Icons -->
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    
     <style>
-        /* Material Design 1 Core Variables & Palette */
         :root {
             --primary-color: #3f51b5; /* Indigo */
             --primary-dark: #303f9f;
@@ -19,10 +17,11 @@
             --text-primary: rgba(0, 0, 0, 0.87);
             --text-secondary: rgba(0, 0, 0, 0.54);
             --error-color: #d32f2f;
+            --success-color: #388e3c;
+            --warning-color: #f57c00;
             --shadow-elevation-2: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
             --shadow-elevation-4: 0 4px 5px -2px rgba(0,0,0,0.2), 0 7px 10px 1px rgba(0,0,0,0.14), 0 2px 16px 1px rgba(0,0,0,0.12);
         }
-
         body {
             font-family: 'Roboto', sans-serif;
             background-color: var(--background-color);
@@ -34,8 +33,6 @@
             min-height: 100vh;
             justify-content: space-between;
         }
-
-        /* Material Toolbar (Header) */
         header {
             background-color: var(--primary-color);
             color: white;
@@ -45,15 +42,18 @@
             align-items: center;
             justify-content: space-between;
         }
-
         header h1 {
             margin: 0;
             font-size: 20px;
             font-weight: 500;
             letter-spacing: 0.5px;
+            cursor: pointer;
+        }
+        .header-actions {
+            display: flex;
+            gap: 12px;
+            align-items: center;
         }
-
-        /* View Switching (Login vs Portal Dashboard) */
         .view {
             display: none;
             flex: 1;
@@ -62,8 +62,6 @@
         .view.active {
             display: flex;
         }
-
-        /* Main Container & Login Card */
         .container {
             max-width: 420px;
             width: 100%;
@@ -75,7 +73,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -88,7 +85,6 @@
             width: 100%;
             box-sizing: border-box;
         }
-
         .card-icon-wrapper {
             background-color: rgba(63, 81, 181, 0.1);
             color: var(--primary-color);
@@ -100,33 +96,27 @@
             justify-content: center;
             margin-bottom: 20px;
         }
-
         .card-icon-wrapper i {
             font-size: 32px;
         }
-
         .card-title {
             font-size: 24px;
             font-weight: 500;
             margin: 0 0 8px 0;
             color: var(--text-primary);
         }
-
         .card-subtitle {
             font-size: 14px;
             color: var(--text-secondary);
             margin: 0 0 24px 0;
             line-height: 1.4;
         }
-
-        /* Material Floating Label Input Field */
         .input-container {
             position: relative;
             margin-bottom: 24px;
             width: 100%;
             text-align: left;
         }
-
         .input-container input {
             width: 100%;
             padding: 12px;
@@ -139,13 +129,11 @@
             background: transparent;
             transition: border-color 0.2s;
         }
-
         .input-container input:focus {
             border-color: var(--primary-color);
             border-width: 2px;
             padding: 11px;
         }
-
         .input-container label {
             position: absolute;
             left: 12px;
@@ -157,7 +145,6 @@
             background: white;
             padding: 0 4px;
         }
-
         .input-container input:focus ~ label,
         .input-container input:not(:placeholder-shown) ~ label {
             top: -10px;
@@ -165,8 +152,6 @@
             color: var(--primary-color);
             font-weight: 500;
         }
-
-        /* Error Message */
         #error-msg {
             color: var(--error-color);
             font-size: 13px;
@@ -174,8 +159,6 @@
             display: none;
             font-weight: 500;
         }
-
-        /* Material Raised Button */
         .btn-raised {
             background-color: var(--primary-color);
             color: white;
@@ -192,25 +175,33 @@
             transition: background-color 0.2s, box-shadow 0.2s;
             letter-spacing: 0.5px;
         }
-
         .btn-raised:hover {
             background-color: var(--primary-dark);
             box-shadow: var(--shadow-elevation-4);
         }
-
-        /* Portal Dashboard Grid */
+        .btn-danger {
+            background-color: var(--error-color);
+        }
+        .btn-danger:hover {
+            background-color: #b71c1c;
+        }
+        .btn-warning {
+            background-color: var(--warning-color);
+        }
+        .btn-warning:hover {
+            background-color: #e65100;
+        }
         .portal-container {
-            max-width: 900px;
+            max-width: 1000px;
             width: 100%;
             margin: 40px auto;
             padding: 0 16px;
             box-sizing: border-box;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 24px;
             flex: 1;
         }
-
         .portal-card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -220,44 +211,38 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .portal-card:hover {
             box-shadow: var(--shadow-elevation-4);
         }
-
         .card-media {
-            height: 140px;
+            height: 120px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
         }
-
         .card-content {
             padding: 24px;
             flex: 1;
         }
-
         .portal-card-title {
             font-size: 20px;
             font-weight: 500;
             margin: 0 0 8px 0;
             color: var(--text-primary);
         }
-
         .card-text {
             font-size: 14px;
             color: var(--text-secondary);
             line-height: 1.4;
             margin: 0;
         }
-
         .card-actions {
             padding: 8px 16px 16px 16px;
             display: flex;
             justify-content: flex-end;
+            gap: 8px;
         }
-
         .btn-flat {
             background: transparent;
             border: none;
@@ -273,12 +258,53 @@
             transition: background-color 0.2s;
             letter-spacing: 0.5px;
         }
-
         .btn-flat:hover {
             background-color: rgba(63, 81, 181, 0.08);
         }
-
-        /* Modal / Window Overlay */
+        .admin-section {
+            background: white;
+            padding: 24px;
+            border-radius: 2px;
+            box-shadow: var(--shadow-elevation-2);
+            margin-bottom: 24px;
+        }
+        .admin-section h2 {
+            margin-top: 0;
+            font-size: 18px;
+            color: var(--primary-color);
+            border-bottom: 2px solid var(--background-color);
+            padding-bottom: 8px;
+        }
+        .code-list-item {
+            display: flex;
+            flex-direction: column;
+            background: #fafafa;
+            padding: 16px;
+            margin-bottom: 12px;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+            gap: 12px;
+        }
+        @media(min-width: 600px) {
+            .code-list-item {
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+        .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            font-size: 14px;
+            align-items: center;
+        }
+        .checkbox-group label {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+        }
         #game-modal {
             display: none;
             position: fixed;
@@ -292,7 +318,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .modal-content {
             width: 90vw;
             height: 85vh;
@@ -303,7 +328,6 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .modal-header {
             background-color: #212121;
             color: white;
@@ -311,21 +335,17 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            font-family: 'Roboto', sans-serif;
         }
-
         .modal-title {
             margin: 0;
             font-size: 16px;
             font-weight: 500;
         }
-
         .modal-header-actions {
             display: flex;
             align-items: center;
             gap: 8px;
         }
-
         .modal-btn {
             background: transparent;
             border: none;
@@ -339,38 +359,62 @@
             border-radius: 50%;
             transition: background-color 0.2s;
         }
-
         .modal-btn:hover {
             background-color: rgba(255, 255, 255, 0.1);
         }
-
         .modal-body {
             flex: 1;
             width: 100%;
             background: #fff;
         }
-
         .modal-body iframe {
             width: 100%;
             height: 100%;
             border: none;
         }
-
-        /* Footer */
         footer {
             text-align: center;
             padding: 16px;
             color: var(--text-secondary);
             font-size: 12px;
         }
+        
+        /* Custom modal notification box */
+        #notification-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+        .notification-box {
+            background: white;
+            padding: 24px;
+            border-radius: 4px;
+            box-shadow: var(--shadow-elevation-4);
+            max-width: 350px;
+            width: 90%;
+            text-align: center;
+        }
+        .notification-message {
+            margin-bottom: 20px;
+            font-size: 15px;
+            color: var(--text-primary);
+        }
     </style>
 </head>
 <body>
-
-    <!-- Material Design Toolbar -->
     <header>
-        <h1>StudyUp</h1>
-        <i class="material-icons">school</i>
+        <h1 onclick="logout()">StudyUp</h1>
+        <div class="header-actions">
+            <span id="current-user-badge" style="font-size: 13px; font-weight: 500;"></span>
+            <i class="material-icons" style="cursor:pointer;" onclick="logout()">exit_to_app</i>
+        </div>
     </header>
 
     <!-- VIEW 1: Login Screen -->
@@ -388,8 +432,7 @@
                     <label for="class-code-input">Class Code</label>
                 </div>
 
-                <div id="error-msg">Invalid class code. Please check with your teacher or instructor.</div>
-
+                <div id="error-msg">Invalid class code or system currently locked.</div>
                 <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
         </main>
@@ -397,61 +440,47 @@
 
     <!-- VIEW 2: Portal Dashboard -->
     <div id="portal-view" class="view">
-        <div class="portal-container">
-            <!-- Card 1: Sandboxels -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #00897b;">
-                    <i class="material-icons">science</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">Sandboxels</h2>
-                    <p class="card-text">A falling sand and physics sandbox game where you can mix elements, trigger chemical reactions, and experiment on a grid. Great for life science.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('Sandboxels', 'sandboxels-package/sandboxels-1.13.2/index.html')">Launch App</button>
-                </div>
+        <div class="portal-container" id="student-games-grid"></div>
+    </div>
+
+    <!-- VIEW 3: Admin Management Panel View -->
+    <div id="admin-view" class="view">
+        <div style="max-width: 1000px; width: 100%; margin: 30px auto; padding: 0 16px; box-sizing: border-box; flex:1;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <h2 style="margin: 0; color: var(--primary-color);">Admin Dashboard</h2>
+                <button class="btn-raised" style="width: auto; padding: 8px 16px;" onclick="switchView('portal-view')">&larr; Back to Portal</button>
             </div>
 
-            <!-- Card 2: HexGL -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #e53935;">
-                    <i class="material-icons">speed</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">HexGL</h2>
-                    <p class="card-text">A futuristic 3D WebGL racing game built with HTML5 where you pilot a high-speed craft through complex tracks. Great for testing your shape naming skills.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('HexGL', 'hexgl-package/HexGL-master/index.html')">Launch App</button>
+            <!-- Global Control Section -->
+            <div class="admin-section">
+                <h2>Global System Controls</h2>
+                <p style="font-size: 14px; color: var(--text-secondary);">Manage global availability for all student class codes.</p>
+                <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
+                    <div>
+                        <strong>Maintenance / Lockdown Mode:</strong>
+                        <div id="global-status-text" style="font-size: 13px; color: var(--success-color); font-weight: 500;">All student codes are currently ACTIVE.</div>
+                    </div>
+                    <button id="global-toggle-btn" class="btn-raised btn-warning" onclick="toggleGlobalBlock()">Temporarily Block All Codes</button>
                 </div>
             </div>
 
-            <!-- Card 3: ClassiCube -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #00acc1;">
-                    <i class="material-icons">terrain</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">ClassiCube</h2>
-                    <p class="card-text">A lightweight multiplayer-compatible classic block building sandbox game. Great for architecture and spatial visualization exercises.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('ClassiCube', 'classicube-package/index.html')">Launch App</button>
+            <!-- Create Code Section -->
+            <div class="admin-section">
+                <h2>Create New Class Code</h2>
+                <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
+                    <div class="input-container" style="flex: 1; min-width: 200px; margin-bottom: 0;">
+                        <input type="text" id="new-code-input" placeholder="e.g. 654321" maxlength="6">
+                        <label for="new-code-input">New Code (Digits)</label>
+                    </div>
+                    <button class="btn-raised" onclick="createNewCode()" style="height: 48px; width: auto; padding: 0 24px;">Create Code</button>
                 </div>
+                <div id="admin-error-msg" style="color: var(--error-color); font-size: 13px; margin-top: 8px; display: none;"></div>
             </div>
 
-            <!-- Card 4: 2048 -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #ffb300;">
-                    <i class="material-icons">grid_on</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">2048</h2>
-                    <p class="card-text">A classic sliding tile puzzle game where you combine matching numbers to reach the 2048 tile. Great for math logic and strategic thinking.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('2048', '2048-package/index.html')">Launch App</button>
-                </div>
+            <!-- Manage Codes Section -->
+            <div class="admin-section">
+                <h2>Manage Existing Codes & Game Permissions</h2>
+                <div id="codes-management-list"></div>
             </div>
         </div>
     </div>
@@ -476,12 +505,174 @@
         </div>
     </div>
 
+    <!-- Custom Notification Modal -->
+    <div id="notification-modal">
+        <div class="notification-box">
+            <div id="notification-text" class="notification-message">Message here</div>
+            <button class="btn-raised" onclick="closeNotification()">OK</button>
+        </div>
+    </div>
+
     <footer>
         StudyUp &bull; Student Resource Portal &bull; 2026
     </footer>
 
     <script>
-        // Allow pressing 'Enter' to submit code
+        const AVAILABLE_GAMES = [
+            { id: 'Sandboxels', name: 'Sandboxels', desc: 'A falling sand and physics sandbox game where you can mix elements and trigger chemical reactions.', url: 'https://cdn.jsdelivr.net/gh/RuneScape/sandboxels@master/index.html', color: '#00897b', icon: 'science' },
+            { id: 'HexGL', name: 'HexGL', desc: 'A futuristic 3D WebGL racing game built with HTML5 where you pilot a high-speed craft through complex tracks.', url: 'https://hexgl.bkcore.com/play/', color: '#e53935', icon: 'speed' },
+            { id: 'ClassiCube', name: 'ClassiCube', desc: 'A lightweight multiplayer-compatible classic block building sandbox game for spatial visualization.', url: 'https://www.classicube.net/play/', color: '#00acc1', icon: 'terrain' },
+            { id: '2048', name: '2048', desc: 'A classic sliding tile puzzle game where you combine matching numbers to reach the 2048 tile.', url: 'https://play2048.co/', color: '#ffb300', icon: 'grid_on' }
+        ];
+
+        const ADMIN_APP = {
+            id: 'AdminPanel',
+            name: 'Admin Panel',
+            desc: 'Manage global locks, create or delete class codes, and control individual student app permissions.',
+            color: '#3f51b5',
+            icon: 'admin_panel_settings',
+            isCustomAction: true,
+            action: function() {
+                switchView('admin-view');
+                loadAdminDashboard();
+            }
+        };
+
+        const STORAGE_KEY = 'studyup_portal_config_v2';
+        const BROADCAST_CHANNEL_NAME = 'studyup_sync_channel';
+
+        // Session state tracking for current browser tab/window
+        let currentSession = {
+            isLoggedIn: false,
+            code: null,     // null, '814212', or student class code
+            isAdmin: false
+        };
+
+        let broadcastChannel = null;
+        try {
+            if (window.BroadcastChannel) {
+                broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
+                broadcastChannel.onmessage = (event) => {
+                    handleSyncEvent(event.data);
+                };
+            }
+        } catch (e) {
+            console.warn("BroadcastChannel not supported in this environment.", e);
+        }
+
+        // Listen to storage events across tabs/devices
+        window.addEventListener('storage', (event) => {
+            if (event.key === STORAGE_KEY || event.key === STORAGE_KEY + '_timestamp') {
+                const config = getConfig();
+                evaluateCurrentSession(config);
+            }
+        });
+
+        // Periodic polling interval to guarantee instant updates across all open tabs/devices
+        setInterval(() => {
+            const config = getConfig();
+            evaluateCurrentSession(config);
+        }, 1000);
+
+        function showNotification(msg) {
+            document.getElementById('notification-text').innerText = msg;
+            document.getElementById('notification-modal').style.display = 'flex';
+        }
+
+        function closeNotification() {
+            document.getElementById('notification-modal').style.display = 'none';
+        }
+
+        function getConfig() {
+            try {
+                const stored = localStorage.getItem(STORAGE_KEY);
+                if (stored) {
+                    return JSON.parse(stored);
+                }
+            } catch (err) {
+                console.error("Failed to read from localStorage:", err);
+            }
+            
+            const defaultConfig = {
+                globalBlock: false,
+                timestamp: Date.now(),
+                codes: {
+                    "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] }
+                }
+            };
+            saveConfig(defaultConfig, false);
+            return defaultConfig;
+        }
+
+        function saveConfig(configObj, broadcast = true) {
+            try {
+                configObj.timestamp = Date.now();
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(configObj));
+                localStorage.setItem(STORAGE_KEY + '_timestamp', configObj.timestamp.toString());
+
+                if (broadcast && broadcastChannel) {
+                    broadcastChannel.postMessage({ type: 'CONFIG_UPDATED', config: configObj });
+                }
+            } catch (err) {
+                console.error("Failed to save to localStorage:", err);
+                showNotification("Error saving update to local storage.");
+            }
+        }
+
+        function handleSyncEvent(data) {
+            if (data && data.type === 'CONFIG_UPDATED') {
+                evaluateCurrentSession(data.config);
+            }
+        }
+
+        // Evaluate whether the logged-in user is still valid based on latest config
+        function evaluateCurrentSession(config) {
+            const loginViewActive = document.getElementById('login-view').classList.contains('active');
+            if (!currentSession.isLoggedIn || loginViewActive) {
+                return;
+            }
+
+            // Master Admin is never automatically kicked out unless global lock happens and they choose to log out,
+            // but let's check if regular student code is valid or globally blocked.
+            if (config.globalBlock && !currentSession.isAdmin) {
+                forceLogout("System is temporarily locked by administrator.");
+                return;
+            }
+
+            if (currentSession.isAdmin) {
+                // Admin dashboard might be open, update dashboard if view is active
+                if (document.getElementById('admin-view').classList.contains('active')) {
+                    loadAdminDashboard();
+                }
+                return;
+            }
+
+            // Student session validation
+            const code = currentSession.code;
+            if (!config.codes || !config.codes[code]) {
+                forceLogout("Your class code has been modified or revoked.");
+                return;
+            }
+
+            // Update student dashboard games dynamically in real time
+            const allowedGames = config.codes[code].games || [];
+            if (document.getElementById('portal-view').classList.contains('active')) {
+                loadStudentDashboard(allowedGames, false);
+            }
+        }
+
+        function forceLogout(reason) {
+            currentSession = { isLoggedIn: false, code: null, isAdmin: false };
+            closeGame();
+            switchView('login-view');
+            document.getElementById('current-user-badge').innerText = '';
+            const errorMsg = document.getElementById('error-msg');
+            errorMsg.innerText = reason;
+            errorMsg.style.display = 'block';
+            document.getElementById('class-code-input').value = '';
+            document.getElementById('class-code-input').focus();
+        }
+
         document.getElementById('class-code-input').addEventListener('keypress', function (e) {
             if (e.key === 'Enter') {
                 verifyCode();
@@ -491,17 +682,230 @@
         function verifyCode() {
             const inputVal = document.getElementById('class-code-input').value.trim();
             const errorMsg = document.getElementById('error-msg');
+            const config = getConfig();
+
+            if (config.globalBlock && inputVal !== '814212') {
+                errorMsg.innerText = "System is temporarily locked by administrator.";
+                errorMsg.style.display = 'block';
+                document.getElementById('class-code-input').focus();
+                return;
+            }
 
             if (inputVal === '814212') {
                 errorMsg.style.display = 'none';
-                document.getElementById('login-view').classList.remove('active');
-                document.getElementById('portal-view').classList.add('active');
+                document.getElementById('class-code-input').value = '';
+                currentSession = { isLoggedIn: true, code: '814212', isAdmin: true };
+                switchView('portal-view');
+                document.getElementById('current-user-badge').innerText = 'Master Admin Mode';
+
+                const allGameIds = AVAILABLE_GAMES.map(g => g.id);
+                loadStudentDashboard(allGameIds, true);
+            } else if (config.codes && config.codes[inputVal]) {
+                errorMsg.style.display = 'none';
+                document.getElementById('class-code-input').value = '';
+                currentSession = { isLoggedIn: true, code: inputVal, isAdmin: false };
+                switchView('portal-view');
+                document.getElementById('current-user-badge').innerText = `Class Code: ${inputVal}`;
+                loadStudentDashboard(config.codes[inputVal].games || [], false);
             } else {
+                errorMsg.innerText = "Invalid class code. Please check with your teacher or instructor.";
                 errorMsg.style.display = 'block';
                 document.getElementById('class-code-input').focus();
             }
         }
 
+        function switchView(viewId) {
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById(viewId).classList.add('active');
+        }
+
+        function logout() {
+            currentSession = { isLoggedIn: false, code: null, isAdmin: false };
+            closeGame();
+            switchView('login-view');
+            document.getElementById('current-user-badge').innerText = '';
+            document.getElementById('class-code-input').focus();
+        }
+
+        function loadStudentDashboard(allowedGameIds, isAdminUser) {
+            const grid = document.getElementById('student-games-grid');
+            grid.innerHTML = '';
+
+            const permittedGames = AVAILABLE_GAMES.filter(g => allowedGameIds.includes(g.id));
+            const displayCards = [];
+            if (isAdminUser) displayCards.push(ADMIN_APP);
+            permittedGames.forEach(g => displayCards.push(g));
+
+            if (displayCards.length === 0) {
+                grid.innerHTML = `<div style="grid-column: 1/-1; text-align: center; padding: 40px; background: white; border-radius: 4px; box-shadow: var(--shadow-elevation-2);">
+                    <i class="material-icons" style="font-size: 48px; color: var(--text-secondary);">block</i>
+                    <h3 style="margin: 12px 0 4px 0;">No Apps Available</h3>
+                    <p style="color: var(--text-secondary); margin: 0;">There are currently no apps assigned or permitted for this class code.</p>
+                </div>`;
+                return;
+            }
+
+            displayCards.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'portal-card';
+
+                if (item.isCustomAction) {
+                    card.innerHTML = `
+                        <div class="card-media" style="background-color: ${item.color};">
+                            <i class="material-icons">${item.icon}</i>
+                        </div>
+                        <div class="card-content">
+                            <h2 class="portal-card-title">${item.name}</h2>
+                            <p class="card-text">${item.desc}</p>
+                        </div>
+                        <div class="card-actions">
+                            <button class="btn-flat" id="admin-panel-launch-btn">Open Panel</button>
+                        </div>
+                    `;
+                    card.querySelector('#admin-panel-launch-btn').addEventListener('click', item.action);
+                } else {
+                    card.innerHTML = `
+                        <div class="card-media" style="background-color: ${item.color};">
+                            <i class="material-icons">${item.icon}</i>
+                        </div>
+                        <div class="card-content">
+                            <h2 class="portal-card-title">${item.name}</h2>
+                            <p class="card-text">${item.desc}</p>
+                        </div>
+                        <div class="card-actions">
+                            <button class="btn-flat" onclick="openGame('${item.name}', '${item.url}')">Launch App</button>
+                        </div>
+                    `;
+                }
+                grid.appendChild(card);
+            });
+        }
+
+        function loadAdminDashboard() {
+            const config = getConfig();
+            const isBlocked = config.globalBlock;
+
+            const statusText = document.getElementById('global-status-text');
+            const toggleBtn = document.getElementById('global-toggle-btn');
+            if (isBlocked) {
+                statusText.innerText = "System is LOCKED. All student codes are temporarily blocked.";
+                statusText.style.color = "var(--error-color)";
+                toggleBtn.innerText = "Unblock All Codes";
+                toggleBtn.className = "btn-raised";
+            } else {
+                statusText.innerText = "All student codes are currently ACTIVE.";
+                statusText.style.color = "var(--success-color)";
+                toggleBtn.innerText = "Temporarily Block All Codes";
+                toggleBtn.className = "btn-raised btn-warning";
+            }
+
+            const listContainer = document.getElementById('codes-management-list');
+            listContainer.innerHTML = '';
+
+            const studentCodes = Object.keys(config.codes || {});
+
+            if (studentCodes.length === 0) {
+                listContainer.innerHTML = `<p style="color: var(--text-secondary); font-style: italic;">No active student codes found. Create one above.</p>`;
+                return;
+            }
+
+            studentCodes.forEach(code => {
+                const codeObj = config.codes[code];
+                const assignedGames = codeObj.games || [];
+
+                const item = document.createElement('div');
+                item.className = 'code-list-item';
+
+                let checkboxesHtml = AVAILABLE_GAMES.map(g => {
+                    const checked = assignedGames.includes(g.id) ? 'checked' : '';
+                    return `<label><input type="checkbox" value="${g.id}" ${checked} onchange="updateCodePermission('${code}', '${g.id}', this.checked)"> ${g.name}</label>`;
+                }).join('');
+
+                item.innerHTML = `
+                    <div>
+                        <strong style="font-size: 16px; color: var(--primary-color);">Code: ${code}</strong>
+                    </div>
+                    <div class="checkbox-group">
+                        ${checkboxesHtml}
+                    </div>
+                    <div style="display: flex; gap: 8px;">
+                        <button class="btn-raised" style="padding: 6px 12px; font-size: 12px;" onclick="allowAllForCode('${code}')">Allow All</button>
+                        <button class="btn-raised btn-danger" style="padding: 6px 12px; font-size: 12px;" onclick="deleteCode('${code}')">Delete</button>
+                    </div>
+                `;
+                listContainer.appendChild(item);
+            });
+        }
+
+        function toggleGlobalBlock() {
+            const config = getConfig();
+            config.globalBlock = !config.globalBlock;
+            saveConfig(config);
+            loadAdminDashboard();
+        }
+
+        function createNewCode() {
+            const input = document.getElementById('new-code-input');
+            const err = document.getElementById('admin-error-msg');
+            const val = input.value.trim();
+
+            if (!/^\d{6}$/.test(val)) {
+                err.innerText = "Code must be exactly 6 digits.";
+                err.style.display = 'block';
+                return;
+            }
+            if (val === '814212') {
+                err.innerText = "814212 is reserved as the Master Admin code.";
+                err.style.display = 'block';
+                return;
+            }
+
+            const config = getConfig();
+            if (!config.codes) config.codes = {};
+
+            if (config.codes[val]) {
+                err.innerText = "This code already exists.";
+                err.style.display = 'block';
+                return;
+            }
+
+            err.style.display = 'none';
+            config.codes[val] = { games: AVAILABLE_GAMES.map(g => g.id) };
+            saveConfig(config);
+            input.value = '';
+            loadAdminDashboard();
+        }
+
+        function deleteCode(code) {
+            if (confirm(`Are you sure you want to delete code ${code}?`)) {
+                const config = getConfig();
+                delete config.codes[code];
+                saveConfig(config);
+                loadAdminDashboard();
+            }
+        }
+
+        function updateCodePermission(code, gameId, isChecked) {
+            const config = getConfig();
+            if (!config.codes[code].games) config.codes[code].games = [];
+
+            if (isChecked) {
+                if (!config.codes[code].games.includes(gameId)) {
+                    config.codes[code].games.push(gameId);
+                }
+            } else {
+                config.codes[code].games = config.codes[code].games.filter(id => id !== gameId);
+            }
+            saveConfig(config);
+        }
+
+        function allowAllForCode(code) {
+            const config = getConfig();
+            config.codes[code].games = AVAILABLE_GAMES.map(g => g.id);
+            saveConfig(config);
+            loadAdminDashboard();
+        }
+
         function openGame(gameName, gameUrl) {
             document.getElementById('modal-game-title').innerText = gameName;
             document.getElementById('game-iframe').src = gameUrl;
@@ -509,7 +913,6 @@
         }
 
         function closeGame() {
-            // Exit fullscreen if active when closing
             if (document.fullscreenElement) {
                 document.exitFullscreen();
             }
@@ -523,7 +926,7 @@
 
             if (!document.fullscreenElement) {
                 modalBox.requestFullscreen().catch(err => {
-                    alert(`Error attempting to enable fullscreen: ${err.message}`);
+                    showNotification(`Error attempting to enable fullscreen: ${err.message}`);
                 });
                 icon.innerText = 'fullscreen_exit';
             } else {
@@ -532,7 +935,6 @@
             }
         }
 
-        // Keep fullscreen icon updated if user exits via keyboard (Esc)
         document.addEventListener('fullscreenchange', () => {
             const icon = document.getElementById('fullscreen-icon');
             if (!document.fullscreenElement) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "studyup",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "StudyUp Game Portal",
   "main": "index.html",
   "scripts": {