studyup 1.0.0 → 1.0.2

package/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>StudyUp</title>
+    <title>StudyUp - Student Portal</title>
     <!-- Material Design 1 / 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">
@@ -13,10 +13,12 @@
         :root {
             --primary-color: #3f51b5; /* Indigo */
             --primary-dark: #303f9f;
+            --accent-color: #ff4081;
             --background-color: #eeeeee;
             --card-background: #ffffff;
             --text-primary: rgba(0, 0, 0, 0.87);
             --text-secondary: rgba(0, 0, 0, 0.54);
+            --error-color: #d32f2f;
             --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);
         }
@@ -30,6 +32,7 @@
             display: flex;
             flex-direction: column;
             min-height: 100vh;
+            justify-content: space-between;
         }
 
         /* Material Toolbar (Header) */
@@ -50,8 +53,153 @@
             letter-spacing: 0.5px;
         }
 
-        /* Main Container & Grid */
+        /* View Switching (Login vs Portal Dashboard) */
+        .view {
+            display: none;
+            flex: 1;
+            flex-direction: column;
+        }
+        .view.active {
+            display: flex;
+        }
+
+        /* Main Container & Login Card */
         .container {
+            max-width: 420px;
+            width: 100%;
+            margin: auto;
+            padding: 16px;
+            box-sizing: border-box;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .card {
+            background-color: var(--card-background);
+            border-radius: 2px;
+            box-shadow: var(--shadow-elevation-4);
+            padding: 32px 24px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .card-icon-wrapper {
+            background-color: rgba(63, 81, 181, 0.1);
+            color: var(--primary-color);
+            width: 64px;
+            height: 64px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            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;
+            font-size: 16px;
+            font-family: 'Roboto', sans-serif;
+            border: 1px solid rgba(0, 0, 0, 0.2);
+            border-radius: 2px;
+            outline: none;
+            box-sizing: border-box;
+            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;
+            top: 14px;
+            color: var(--text-secondary);
+            font-size: 16px;
+            pointer-events: none;
+            transition: 0.2s ease all;
+            background: white;
+            padding: 0 4px;
+        }
+
+        .input-container input:focus ~ label,
+        .input-container input:not(:placeholder-shown) ~ label {
+            top: -10px;
+            font-size: 12px;
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+
+        /* Error Message */
+        #error-msg {
+            color: var(--error-color);
+            font-size: 13px;
+            margin-bottom: 16px;
+            display: none;
+            font-weight: 500;
+        }
+
+        /* Material Raised Button */
+        .btn-raised {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 500;
+            font-size: 14px;
+            text-transform: uppercase;
+            padding: 12px 24px;
+            border-radius: 2px;
+            cursor: pointer;
+            width: 100%;
+            box-shadow: var(--shadow-elevation-2);
+            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 */
+        .portal-container {
             max-width: 900px;
             width: 100%;
             margin: 40px auto;
@@ -63,8 +211,7 @@
             flex: 1;
         }
 
-        /* Material Card Component */
-        .card {
+        .portal-card {
             background-color: var(--card-background);
             border-radius: 2px;
             box-shadow: var(--shadow-elevation-2);
@@ -74,7 +221,7 @@
             overflow: hidden;
         }
 
-        .card:hover {
+        .portal-card:hover {
             box-shadow: var(--shadow-elevation-4);
         }
 
@@ -91,7 +238,7 @@
             flex: 1;
         }
 
-        .card-title {
+        .portal-card-title {
             font-size: 20px;
             font-weight: 500;
             margin: 0 0 8px 0;
@@ -105,7 +252,6 @@
             margin: 0;
         }
 
-        /* Material Action Area & Flat Button */
         .card-actions {
             padding: 8px 16px 16px 16px;
             display: flex;
@@ -174,7 +320,13 @@
             font-weight: 500;
         }
 
-        .btn-close {
+        .modal-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .modal-btn {
             background: transparent;
             border: none;
             color: white;
@@ -183,12 +335,12 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 4px;
+            padding: 6px;
             border-radius: 50%;
             transition: background-color 0.2s;
         }
 
-        .btn-close:hover {
+        .modal-btn:hover {
             background-color: rgba(255, 255, 255, 0.1);
         }
 
@@ -221,59 +373,135 @@
         <i class="material-icons">school</i>
     </header>
 
-    <!-- Content Grid -->
-    <main class="container">
-        
-        <!-- Card 1: Sandboxels -->
-        <div class="card">
-            <div class="card-media" style="background-color: #00897b;">
-                <i class="material-icons">science</i>
-            </div>
-            <div class="card-content">
-                <h2 class="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>
+    <!-- VIEW 1: Login Screen -->
+    <div id="login-view" class="view active">
+        <main class="container">
+            <div class="card">
+                <div class="card-icon-wrapper">
+                    <i class="material-icons">lock_outline</i>
+                </div>
+                <h2 class="card-title">Welcome Student</h2>
+                <p class="card-subtitle">Please enter your class code to access your study materials and interactive guides.</p>
+                
+                <div class="input-container">
+                    <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. Please check with your teacher or instructor.</div>
+
+                <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
-            <div class="card-actions">
-                <button class="btn-flat" onclick="openGame('Sandboxels', 'sandboxels-package/sandboxels-1.13.2/index.html')">Launch App</button>
+        </main>
+    </div>
+
+    <!-- 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>
-        </div>
 
-        <!-- Card 2: HexGL -->
-        <div class="card">
-            <div class="card-media" style="background-color: #e53935;">
-                <i class="material-icons">speed</i>
+            <!-- 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>
+                </div>
             </div>
-            <div class="card-content">
-                <h2 class="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>
+
+            <!-- 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>
+                </div>
             </div>
-            <div class="card-actions">
-                <button class="btn-flat" onclick="openGame('HexGL', 'hexgl-package/HexGL-master/index.html')">Launch App</button>
+
+            <!-- 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>
             </div>
         </div>
-
-    </main>
+    </div>
 
     <!-- Game Modal Window Overlay -->
     <div id="game-modal">
-        <div class="modal-content">
+        <div class="modal-content" id="modal-box">
             <div class="modal-header">
                 <h3 id="modal-game-title" class="modal-title">Game Window</h3>
-                <button class="btn-close" onclick="closeGame()" title="Close Window">
-                    <i class="material-icons">close</i>
-                </button>
+                <div class="modal-header-actions">
+                    <button class="modal-btn" onclick="toggleFullScreen()" title="Toggle Fullscreen">
+                        <i class="material-icons" id="fullscreen-icon">fullscreen</i>
+                    </button>
+                    <button class="modal-btn" onclick="closeGame()" title="Close Window">
+                        <i class="material-icons">close</i>
+                    </button>
+                </div>
             </div>
             <div class="modal-body">
-                <iframe id="game-iframe" src="" title="Game View"></iframe>
+                <iframe id="game-iframe" src="" title="Game View" sandbox="allow-scripts allow-same-origin allow-modals allow-pointer-lock allow-downloads"></iframe>
             </div>
         </div>
     </div>
 
     <footer>
-        StudyUp &bull; Powered by Knowlage &bull; Material Design 1
+        StudyUp &bull; Student Resource Portal &bull; 2026
     </footer>
 
     <script>
+        // Allow pressing 'Enter' to submit code
+        document.getElementById('class-code-input').addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                verifyCode();
+            }
+        });
+
+        function verifyCode() {
+            const inputVal = document.getElementById('class-code-input').value.trim();
+            const errorMsg = document.getElementById('error-msg');
+
+            if (inputVal === '814212') {
+                errorMsg.style.display = 'none';
+                document.getElementById('login-view').classList.remove('active');
+                document.getElementById('portal-view').classList.add('active');
+            } else {
+                errorMsg.style.display = 'block';
+                document.getElementById('class-code-input').focus();
+            }
+        }
+
         function openGame(gameName, gameUrl) {
             document.getElementById('modal-game-title').innerText = gameName;
             document.getElementById('game-iframe').src = gameUrl;
@@ -281,11 +509,38 @@
         }
 
         function closeGame() {
+            // Exit fullscreen if active when closing
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
             document.getElementById('game-modal').style.display = 'none';
-            // Clear iframe src so the game stops running in the background when closed
             document.getElementById('game-iframe').src = '';
         }
-    </script>
 
+        function toggleFullScreen() {
+            const modalBox = document.getElementById('modal-box');
+            const icon = document.getElementById('fullscreen-icon');
+
+            if (!document.fullscreenElement) {
+                modalBox.requestFullscreen().catch(err => {
+                    alert(`Error attempting to enable fullscreen: ${err.message}`);
+                });
+                icon.innerText = 'fullscreen_exit';
+            } else {
+                document.exitFullscreen();
+                icon.innerText = 'fullscreen';
+            }
+        }
+
+        // Keep fullscreen icon updated if user exits via keyboard (Esc)
+        document.addEventListener('fullscreenchange', () => {
+            const icon = document.getElementById('fullscreen-icon');
+            if (!document.fullscreenElement) {
+                icon.innerText = 'fullscreen';
+            } else {
+                icon.innerText = 'fullscreen_exit';
+            }
+        });
+    </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "studyup",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "StudyUp Game Portal",
   "main": "index.html",
   "scripts": {
@@ -12,4 +12,4 @@
   ],
   "author": "",
   "license": "ISC"
-}
+}