studyup 1.0.3 → 1.1.0

package/index.html

@@ -7,7 +7,6 @@
     <!-- 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>
         :root {
             --primary-color: #3f51b5; /* Indigo */
@@ -23,7 +22,6 @@
             --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);
@@ -35,7 +33,6 @@
             min-height: 100vh;
             justify-content: space-between;
         }
-
         header {
             background-color: var(--primary-color);
             color: white;
@@ -45,7 +42,6 @@
             align-items: center;
             justify-content: space-between;
         }
-
         header h1 {
             margin: 0;
             font-size: 20px;
@@ -53,13 +49,11 @@
             letter-spacing: 0.5px;
             cursor: pointer;
         }
-
         .header-actions {
             display: flex;
             gap: 12px;
             align-items: center;
         }
-
         .view {
             display: none;
             flex: 1;
@@ -68,7 +62,6 @@
         .view.active {
             display: flex;
         }
-
         .container {
             max-width: 420px;
             width: 100%;
@@ -80,7 +73,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -93,7 +85,6 @@
             width: 100%;
             box-sizing: border-box;
         }
-
         .card-icon-wrapper {
             background-color: rgba(63, 81, 181, 0.1);
             color: var(--primary-color);
@@ -105,32 +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;
         }
-
         .input-container {
             position: relative;
             margin-bottom: 24px;
             width: 100%;
             text-align: left;
         }
-
         .input-container input {
             width: 100%;
             padding: 12px;
@@ -143,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;
@@ -161,7 +145,6 @@
             background: white;
             padding: 0 4px;
         }
-
         .input-container input:focus ~ label,
         .input-container input:not(:placeholder-shown) ~ label {
             top: -10px;
@@ -169,7 +152,6 @@
             color: var(--primary-color);
             font-weight: 500;
         }
-
         #error-msg {
             color: var(--error-color);
             font-size: 13px;
@@ -177,7 +159,6 @@
             display: none;
             font-weight: 500;
         }
-
         .btn-raised {
             background-color: var(--primary-color);
             color: white;
@@ -194,26 +175,22 @@
             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);
         }
-
         .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: 1000px;
             width: 100%;
@@ -225,7 +202,6 @@
             gap: 24px;
             flex: 1;
         }
-
         .portal-card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -235,11 +211,9 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .portal-card:hover {
             box-shadow: var(--shadow-elevation-4);
         }
-
         .card-media {
             height: 120px;
             display: flex;
@@ -247,33 +221,28 @@
             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;
@@ -289,11 +258,9 @@
             transition: background-color 0.2s;
             letter-spacing: 0.5px;
         }
-
         .btn-flat:hover {
             background-color: rgba(63, 81, 181, 0.08);
         }
-
         .admin-section {
             background: white;
             padding: 24px;
@@ -301,7 +268,6 @@
             box-shadow: var(--shadow-elevation-2);
             margin-bottom: 24px;
         }
-
         .admin-section h2 {
             margin-top: 0;
             font-size: 18px;
@@ -309,7 +275,6 @@
             border-bottom: 2px solid var(--background-color);
             padding-bottom: 8px;
         }
-
         .code-list-item {
             display: flex;
             flex-direction: column;
@@ -320,7 +285,6 @@
             border: 1px solid #e0e0e0;
             gap: 12px;
         }
-
         @media(min-width: 600px) {
             .code-list-item {
                 flex-direction: row;
@@ -328,7 +292,6 @@
                 justify-content: space-between;
             }
         }
-
         .checkbox-group {
             display: flex;
             flex-wrap: wrap;
@@ -336,14 +299,12 @@
             font-size: 14px;
             align-items: center;
         }
-
         .checkbox-group label {
             display: flex;
             align-items: center;
             gap: 4px;
             cursor: pointer;
         }
-
         #game-modal {
             display: none;
             position: fixed;
@@ -357,7 +318,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .modal-content {
             width: 90vw;
             height: 85vh;
@@ -368,7 +328,6 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .modal-header {
             background-color: #212121;
             color: white;
@@ -377,19 +336,16 @@
             align-items: center;
             justify-content: space-between;
         }
-
         .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;
@@ -403,23 +359,19 @@
             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 {
             text-align: center;
             padding: 16px;
@@ -429,7 +381,6 @@
     </style>
 </head>
 <body>
-
     <header>
         <h1 onclick="logout()">StudyUp</h1>
         <div class="header-actions">
@@ -452,9 +403,7 @@
                     <input type="text" id="class-code-input" placeholder="e.g. 123456" maxlength="6" autofocus>
                     <label for="class-code-input">Class Code</label>
                 </div>
-
                 <div id="error-msg">Invalid class code or system currently locked.</div>
-
                 <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
         </main>
@@ -472,7 +421,6 @@
                 <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>
-
             <!-- Global Control Section -->
             <div class="admin-section">
                 <h2>Global System Controls</h2>
@@ -485,7 +433,6 @@
                     <button id="global-toggle-btn" class="btn-raised btn-warning" onclick="toggleGlobalBlock()">Temporarily Block All Codes</button>
                 </div>
             </div>
-
             <!-- Create Code Section -->
             <div class="admin-section">
                 <h2>Create New Class Code</h2>
@@ -498,7 +445,6 @@
                 </div>
                 <div id="admin-error-msg" style="color: var(--error-color); font-size: 13px; margin-top: 8px; display: none;"></div>
             </div>
-
             <!-- Manage Codes Section -->
             <div class="admin-section">
                 <h2>Manage Existing Codes & Game Permissions</h2>
@@ -522,7 +468,7 @@
                 </div>
             </div>
             <div class="modal-body">
-                <iframe id="game-iframe" src="" title="Game View" sandbox="allow-scripts allow-same-origin allow-modals allow-pointer-lock allow-downloads"></iframe>
+                <iframe id="game-iframe" src="" title="Game View" sandbox="allow-scripts allow-same-origin allow-modals allow-pointer-lock allow-downloads allow-forms allow-popups"></iframe>
             </div>
         </div>
     </div>
@@ -604,7 +550,7 @@
                 document.getElementById('class-code-input').value = '';
                 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]) {
@@ -653,7 +599,7 @@
             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};">
@@ -689,7 +635,7 @@
         async function loadAdminDashboard() {
             const config = await getConfig();
             const isBlocked = config.globalBlock;
-            
+
             const statusText = document.getElementById('global-status-text');
             const toggleBtn = document.getElementById('global-toggle-btn');
             if (isBlocked) {
@@ -708,7 +654,6 @@
             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;
@@ -720,7 +665,7 @@
 
                 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>`;

package/package.json

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

package/server.js

@@ -1,50 +0,0 @@
-const express = require('express');
-const fs = require('fs');
-const path = require('path');
-
-const app = express();
-const PORT = process.env.PORT || 3000;
-const DATA_FILE = path.join(__dirname, 'data.json');
-
-app.use(express.json());
-// Serve static files from the same root folder where server.js lives
-app.use(express.static(__dirname));
-
-// Helper to read data
-function getData() {
-    if (!fs.existsSync(DATA_FILE)) {
-        const defaultData = {
-            globalBlock: false,
-            codes: {
-                "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] }
-            }
-        };
-        fs.writeFileSync(DATA_FILE, JSON.stringify(defaultData, null, 2));
-        return defaultData;
-    }
-    return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
-}
-
-// Helper to write data
-function saveData(data) {
-    fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2));
-}
-
-// API: Get current config
-app.get('/api/config', (req, res) => {
-    res.json(getData());
-});
-
-// API: Save/Update config (Admin actions)
-app.post('/api/config', (req, res) => {
-    try {
-        saveData(req.body);
-        res.json({ success: true });
-    } catch (err) {
-        res.status(500).json({ success: false, error: err.message });
-    }
-});
-
-app.listen(PORT, () => {
-    console.log(`StudyUp server running on port ${PORT}`);
-});