sugakrit6
/

Gallery

Model card Files Files and versions

xet

Community

sugakrit6 commited on Feb 20

Commit

3a5051b

verified ·

1 Parent(s): 256e024

Update online.html

Browse files

Files changed (1) hide show

online.html +139 -181

online.html CHANGED Viewed

@@ -2,206 +2,162 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>AeroCore OS - Community v2.0</title>
     <link href="https://fonts.cdnfonts.com/css/gamestart" rel="stylesheet">
     <style>
         :root {
             --aero-blue: #00d2ff;
             --aero-green: #3affaa;
-            --mosaic-glass: rgba(255, 255, 255, 0.8);
         }
         body {
-            background: linear-gradient(45deg, #3a7bd5, #00d2ff, #3affaa);
-            background-size: 400% 400%;
-            animation: gradientBG 15s ease infinite;
             font-family: 'GameStart', sans-serif;
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            overflow: hidden;
         }
-        @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }
-        /* Mosaic Texture Overlay */
-        .mosaic-overlay {
-            position: fixed;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
-            background-size: 4px 4px;
-            pointer-events: none;
-            z-index: 10;
         }
         .window {
-            width: 750px;
-            height: 550px;
-            background: var(--mosaic-glass);
-            border: 6px solid #fff;
-            box-shadow: 12px 12px 0px rgba(0,0,0,0.2);
-            position: relative;
-            z-index: 20;
-            display: flex;
-            flex-direction: column;
         }
-        .screen { display: none; padding: 30px; flex-direction: column; height: 100%; box-sizing: border-box; overflow-y: auto; }
         .active { display: flex; }
-        /* Aero Buttons */
         button {
-            font-family: 'GameStart', sans-serif;
-            padding: 10px;
-            margin: 5px 0;
             background: linear-gradient(to bottom, #fff, #aadaff, #0080ff);
-            border: 2px solid #fff;
-            color: white;
-            text-shadow: 1px 1px 2px #000;
-            cursor: pointer;
-            box-shadow: 3px 3px 0px #0055aa;
         }
         input {
-            font-family: 'GameStart', sans-serif;
-            padding: 10px;
-            margin-bottom: 10px;
-            border: 3px inset #fff;
-            background: rgba(255,255,255,0.9);
-        }
-        /* Chat Styles */
-        #chat-box {
-            background: white;
-            border: 3px inset #ccc;
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 15px;
-            margin-bottom: 10px;
-        }
-        .msg {
-            background: #f0faff;
-            border-left: 5px solid var(--aero-blue);
-            padding: 10px;
-            margin-bottom: 10px;
-            position: relative;
         }
-        .msg-info { font-size: 0.6rem; color: #555; margin-bottom: 5px; }
-        .del-btn { font-size: 0.5rem; background: #ff4d4d; margin-right: 5px; }
         /* Version Popup */
         #version-popup {
-            position: absolute;
-            top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            background: white;
-            border: 4px solid var(--aero-green);
-            padding: 20px;
-            text-align: center;
-            z-index: 100;
-            box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
-        .hidden { display: none !important; }
     </style>
 </head>
 <body>
-<div class="mosaic-overlay"></div>
 <div class="window">
     <div id="screen-auth" class="screen active">
         <h2>AEROCORE ACCESS</h2>
-        <form id="auth-form" onsubmit="handleAuth(event)">
             <input type="text" id="username" name="username" placeholder="USERNAME" required autocomplete="username">
-            <input type="password" id="password" name="password" placeholder="PASSWORD" required autocomplete="current-password" style="-webkit-text-security: none;">
-            <button type="submit" id="auth-btn">SIGN UP / LOG IN</button>
         </form>
     </div>
     <div id="screen-tutorial" class="screen">
         <h2>SYSTEM TUTORIAL</h2>
-        <p>1. <b>Rooms:</b> Public is open. Private requires a Code.</p>
-        <p>2. <b>Media:</b> You can send text, images, and audio links.</p>
-        <p>3. <b>Control:</b> Hosts must approve you in Private rooms.</p>
-        <p>4. <b>Safety:</b> Use the 'Delete' options to manage your history.</p>
-        <button onclick="nav('screen-lobby')">UNDERSTOOD</button>
     </div>
     <div id="screen-lobby" class="screen">
         <h2>COMMUNITY HUB</h2>
         <p id="welcome-msg"></p>
-        <button onclick="joinRoom('Public')">JOIN PUBLIC CHAT</button>
         <hr>
         <button onclick="createPrivate()">HOST PRIVATE ROOM</button>
-        <div id="host-code-display"></div>
         <br>
-        <input type="text" id="join-code-input" placeholder="ENTER 4-DIGIT CODE">
         <button onclick="joinRoom('Private')">REQUEST ENTRY</button>
     </div>
-    <div id="screen-approval" class="screen">
-        <h2>HOST CONTROL PANEL</h2>
-        <p>Waiting Requests:</p>
-        <div id="approval-list"></div>
-        <button onclick="nav('screen-chat')">ENTER CHAT</button>
-    </div>
     <div id="screen-chat" class="screen">
-        <h2 id="room-header">CHAT</h2>
         <div id="chat-box"></div>
-        <div id="chat-inputs">
-            <input type="text" id="msg-input" placeholder="Message or URL...">
-            <div style="display:flex; gap: 5px;">
-                <button onclick="sendMsg('text')">SEND</button>
-                <button onclick="sendMsg('img')" style="background:var(--aero-blue)">IMG</button>
-                <button onclick="sendMsg('aud')" style="background:var(--aero-green)">AUD</button>
-                <button onclick="nav('screen-lobby')" style="background:#888">EXIT</button>
-            </div>
         </div>
     </div>
 </div>
 <div id="version-popup" class="hidden">
     <h3>AeroCore v2.0</h3>
-    <p>Released: 20th February 2026</p>
     <button onclick="closePopup()">EXIT & START</button>
 </div>
 <script>
-    // --- DATA STATE ---
-    let db = JSON.parse(localStorage.getItem('aero_core_db')) || {
-        users: [],
         messages: [],
-        rooms: {}, // code: {host, members, pending}
-        currentUser: null
     };
-    function save() { localStorage.setItem('aero_core_db', JSON.stringify(db)); }
-    // --- NAVIGATION ---
-    function nav(id) {
-        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-        document.getElementById(id).classList.add('active');
-        if(id === 'screen-chat') renderMessages();
-        if(id === 'screen-approval') renderApprovalList();
-    }
-    // --- AUTH ---
-    function handleAuth(e) {
-        e.preventDefault();
-        const user = document.getElementById('username').value;
-        const pass = document.getElementById('password').value;
-        db.currentUser = { name: user, pass: pass };
-        document.getElementById('welcome-msg').innerText = "Hello, " + user;
-        // Show Version Popup on first login
-        document.getElementById('version-popup').classList.remove('hidden');
     }
     function closePopup() {
@@ -209,15 +165,22 @@
         nav('screen-tutorial');
     }
-    // --- ROOM LOGIC ---
-    let activeRoomCode = 'Public';
     function createPrivate() {
         const code = Math.floor(1000 + Math.random() * 9000).toString();
-        db.rooms[code] = { host: db.currentUser.name, members: [db.currentUser.name], pending: [] };
-        document.getElementById('host-code-display').innerHTML = `<b>YOUR ROOM CODE: ${code}</b><br><button onclick="nav('screen-approval')">MANAGE MEMBERS</button>`;
         activeRoomCode = code;
         save();
     }
     function joinRoom(type) {
@@ -226,17 +189,20 @@
             nav('screen-chat');
         } else {
             const code = document.getElementById('join-code-input').value;
-            if(!db.rooms[code]) return alert("Room not found");
             activeRoomCode = code;
-            if(db.rooms[code].members.includes(db.currentUser.name)) {
                 nav('screen-chat');
             } else {
-                if(!db.rooms[code].pending.includes(db.currentUser.name)) {
-                    db.rooms[code].pending.push(db.currentUser.name);
                     save();
                 }
-                alert("Request sent to host. Wait for approval.");
             }
         }
     }
@@ -245,76 +211,68 @@
         const list = document.getElementById('approval-list');
         const room = db.rooms[activeRoomCode];
         list.innerHTML = room.pending.map(u => `
-            <div style="margin-bottom:10px;">
-                ${u} <button onclick="approveUser('${u}')">APPROVE</button>
             </div>
-        `).join('') || "No pending requests.";
     }
-    function approveUser(user) {
-        db.rooms[activeRoomCode].members.push(user);
-        db.rooms[activeRoomCode].pending = db.rooms[activeRoomCode].pending.filter(u => u !== user);
         save();
         renderApprovalList();
     }
-    // --- MESSAGING ---
     function sendMsg(type) {
-        const input = document.getElementById('msg-input');
-        if(!input.value) return;
-        const msg = {
             id: Date.now(),
-            code: activeRoomCode,
-            sender: db.currentUser.name,
-            content: input.value,
             type: type,
-            date: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
-        };
-        db.messages.push(msg);
         save();
-        input.value = '';
         renderMessages();
     }
     function renderMessages() {
         const box = document.getElementById('chat-box');
-        const msgs = db.messages.filter(m => m.code === activeRoomCode);
-        document.getElementById('room-header').innerText = `ROOM: ${activeRoomCode}`;
-        box.innerHTML = msgs.map(m => `
             <div class="msg">
-                <div class="msg-info">${m.sender} - ${m.date}</div>
-                <div>${renderContent(m)}</div>
-                <div style="margin-top:5px;">
-                    <button class="del-btn" onclick="deleteMsg(${m.id}, 'me')">DEL FOR ME</button>
-                    ${m.sender === db.currentUser.name ? `<button class="del-btn" onclick="deleteMsg(${m.id}, 'everyone')">DEL FOR EVERYONE</button>` : ''}
-                </div>
             </div>
         `).join('');
         box.scrollTop = box.scrollHeight;
     }
-    function renderContent(m) {
-        if(m.type === 'img') return `<img src="${m.content}" style="max-width:150px; border:2px solid #fff;">`;
-        if(m.type === 'aud') return `<audio src="${m.content}" controls style="width:180px;"></audio>`;
-        return m.content;
-    }
-    function deleteMsg(id, type) {
-        if(type === 'everyone') {
             db.messages = db.messages.filter(m => m.id !== id);
         } else {
-            // "Delete for me" locally filters it out for this session
-            const el = document.getElementById(`msg-container-${id}`);
-            // In a simple local DB, we just filter it out of the current view
-            db.messages = db.messages.filter(m => m.id !== id);
         }
         save();
         renderMessages();
     }
 </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>AeroCore OS v2.0</title>
     <link href="https://fonts.cdnfonts.com/css/gamestart" rel="stylesheet">
     <style>
         :root {
             --aero-blue: #00d2ff;
             --aero-green: #3affaa;
+            --mosaic-glass: rgba(255, 255, 255, 0.85);
         }
         body {
+            background: linear-gradient(135deg, #3a7bd5, #00d2ff, #3affaa);
             font-family: 'GameStart', sans-serif;
+            margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden;
         }
+        /* The Mosaic Filter */
+        body::after {
+            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
+            background-size: 5px 5px; pointer-events: none; z-index: 100;
         }
         .window {
+            width: 750px; height: 550px; background: var(--mosaic-glass);
+            border: 6px solid #fff; box-shadow: 12px 12px 0px rgba(0,0,0,0.2);
+            position: relative; z-index: 20; display: flex; flex-direction: column;
         }
+        .screen { display: none; padding: 30px; flex-direction: column; height: 100%; box-sizing: border-box; }
         .active { display: flex; }
+        /* Aero Elements */
         button {
+            font-family: 'GameStart', sans-serif; padding: 10px; margin: 5px 0;
             background: linear-gradient(to bottom, #fff, #aadaff, #0080ff);
+            border: 2px solid #fff; color: white; text-shadow: 1px 1px 2px #000;
+            cursor: pointer; box-shadow: 3px 3px 0px #0055aa;
         }
         input {
+            font-family: 'GameStart', sans-serif; padding: 12px; margin-bottom: 10px;
+            border: 3px inset #fff; background: rgba(255,255,255,0.9);
         }
+        #chat-box { background: white; border: 3px inset #ccc; flex-grow: 1; overflow-y: auto; padding: 15px; margin-bottom: 10px; }
+        .msg { background: #f0faff; border-left: 5px solid var(--aero-blue); padding: 10px; margin-bottom: 10px; }
+        .del-btn { font-size: 0.5rem; background: #ff4d4d; border: 1px solid white; margin-top: 5px; cursor: pointer;}
         /* Version Popup */
         #version-popup {
+            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+            background: white; border: 4px solid var(--aero-green); padding: 20px;
+            text-align: center; z-index: 1000; box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
     </style>
 </head>
 <body>
 <div class="window">
     <div id="screen-auth" class="screen active">
         <h2>AEROCORE ACCESS</h2>
+        <form id="login-form">
             <input type="text" id="username" name="username" placeholder="USERNAME" required autocomplete="username">
+            <input type="password" id="password" name="password" placeholder="PASSWORD" required autocomplete="current-password"
+                   style="-webkit-text-security: none !important;">
+            <small style="font-size: 0.5rem; display: block; margin-bottom: 10px;">*Passwords are always visible for memory.</small>
+            <button type="button" onclick="handleAuth('signup')">SIGN UP (Create Account)</button>
+            <button type="button" onclick="handleAuth('login')" style="background: var(--aero-green);">LOG IN</button>
         </form>
     </div>
     <div id="screen-tutorial" class="screen">
         <h2>SYSTEM TUTORIAL</h2>
+        <p>• <b>HOSTING:</b> Create a room and get a code to share.</p>
+        <p>• <b>JOINING:</b> Enter a code and wait for Host approval.</p>
+        <p>• <b>MESSAGING:</b> Send text or media URLs.</p>
+        <p>• <b>DATA:</b> Your messages are saved to your local database.</p>
+        <button onclick="nav('screen-lobby')">ENTER SYSTEM</button>
     </div>
     <div id="screen-lobby" class="screen">
         <h2>COMMUNITY HUB</h2>
         <p id="welcome-msg"></p>
+        <button onclick="joinRoom('Public')">JOIN PUBLIC SERVER</button>
         <hr>
         <button onclick="createPrivate()">HOST PRIVATE ROOM</button>
+        <div id="host-code-display" style="color: var(--aero-blue); margin: 5px;"></div>
         <br>
+        <input type="text" id="join-code-input" placeholder="ENTER ROOM CODE">
         <button onclick="joinRoom('Private')">REQUEST ENTRY</button>
     </div>
     <div id="screen-chat" class="screen">
+        <div style="display:flex; justify-content: space-between;">
+            <h2 id="room-header">CHAT</h2>
+            <button id="host-admin-btn" class="hidden" onclick="nav('screen-approval')" style="font-size: 0.5rem;">ADMIN PANEL</button>
+        </div>
         <div id="chat-box"></div>
+        <input type="text" id="msg-input" placeholder="Message or URL...">
+        <div style="display:flex; gap: 5px;">
+            <button onclick="sendMsg('text')">SEND</button>
+            <button onclick="sendMsg('img')" style="background:var(--aero-blue)">IMG</button>
+            <button onclick="nav('screen-lobby')" style="background:#888">EXIT</button>
         </div>
     </div>
+    <div id="screen-approval" class="screen">
+        <h2>HOST: PENDING REQUESTS</h2>
+        <div id="approval-list"></div>
+        <button onclick="nav('screen-chat')">BACK TO CHAT</button>
+    </div>
 </div>
 <div id="version-popup" class="hidden">
     <h3>AeroCore v2.0</h3>
+    <p>Build Date: 20th February 2026</p>
     <button onclick="closePopup()">EXIT & START</button>
 </div>
 <script>
+    // --- DATABASE LOGIC ---
+    let db = JSON.parse(localStorage.getItem('aero_db_v2')) || {
+        users: [], // {user, pass}
         messages: [],
+        rooms: {} // code: {host, members, pending}
     };
+    let currentUser = null;
+    let activeRoomCode = 'Public';
+    function save() { localStorage.setItem('aero_db_v2', JSON.stringify(db)); }
+    // --- AUTHENTICATION FIX ---
+    function handleAuth(mode) {
+        const u = document.getElementById('username').value;
+        const p = document.getElementById('password').value;
+        if(!u || !p) return alert("Fill all fields");
+        const userExists = db.users.find(user => user.username === u);
+        if(mode === 'signup') {
+            if(userExists) return alert("User already exists! Try Login.");
+            db.users.push({ username: u, password: p });
+            save();
+            alert("Account Created! Now click LOG IN.");
+        } else {
+            if(!userExists || userExists.password !== p) {
+                alert("WRONG PASSWORD or User doesn't exist!");
+                return;
+            }
+            // SUCCESSFUL LOGIN
+            currentUser = u;
+            document.getElementById('welcome-msg').innerText = "Welcome, " + u;
+            document.getElementById('version-popup').classList.remove('hidden');
+        }
     }
     function closePopup() {
         nav('screen-tutorial');
     }
+    // --- NAVIGATION ---
+    function nav(id) {
+        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+        document.getElementById(id).classList.add('active');
+        if(id === 'screen-chat') renderMessages();
+        if(id === 'screen-approval') renderApprovalList();
+    }
+    // --- ROOM & HOSTING ---
     function createPrivate() {
         const code = Math.floor(1000 + Math.random() * 9000).toString();
+        db.rooms[code] = { host: currentUser, members: [currentUser], pending: [] };
+        document.getElementById('host-code-display').innerText = "YOUR ROOM CODE: " + code;
         activeRoomCode = code;
         save();
+        alert("Room created! Share the code.");
     }
     function joinRoom(type) {
             nav('screen-chat');
         } else {
             const code = document.getElementById('join-code-input').value;
+            if(!db.rooms[code]) {
+                alert("ROOM NOT FOUND! (Check if you typed it right)");
+                return;
+            }
             activeRoomCode = code;
+            const room = db.rooms[code];
+            if(room.members.includes(currentUser)) {
                 nav('screen-chat');
             } else {
+                if(!room.pending.includes(currentUser)) {
+                    room.pending.push(currentUser);
                     save();
                 }
+                alert("Request sent to Host (" + room.host + "). Wait for approval.");
             }
         }
     }
         const list = document.getElementById('approval-list');
         const room = db.rooms[activeRoomCode];
         list.innerHTML = room.pending.map(u => `
+            <div style="background:white; padding:10px; border:2px solid var(--aero-blue); margin-bottom:5px;">
+                USER: ${u} <button onclick="approveUser('${u}')">APPROVE</button>
             </div>
+        `).join('') || "No pending users.";
     }
+    function approveUser(u) {
+        db.rooms[activeRoomCode].members.push(u);
+        db.rooms[activeRoomCode].pending = db.rooms[activeRoomCode].pending.filter(user => user !== u);
         save();
         renderApprovalList();
     }
+    // --- MESSAGING & DELETION ---
     function sendMsg(type) {
+        const val = document.getElementById('msg-input').value;
+        if(!val) return;
+        db.messages.push({
             id: Date.now(),
+            room: activeRoomCode,
+            sender: currentUser,
+            content: val,
             type: type,
+            time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
+        });
         save();
+        document.getElementById('msg-input').value = '';
         renderMessages();
     }
     function renderMessages() {
         const box = document.getElementById('chat-box');
+        const roomMsgs = db.messages.filter(m => m.room === activeRoomCode);
+        // Show Admin button only if Host
+        if(activeRoomCode !== 'Public' && db.rooms[activeRoomCode].host === currentUser) {
+            document.getElementById('host-admin-btn').classList.remove('hidden');
+        } else {
+            document.getElementById('host-admin-btn').classList.add('hidden');
+        }
+        box.innerHTML = roomMsgs.map(m => `
             <div class="msg">
+                <div style="font-size:0.5rem; color:#888;">${m.sender} • ${m.time}</div>
+                <div>${m.type === 'img' ? `<img src="${m.content}" style="max-width:100%;">` : m.content}</div>
+                <button class="del-btn" onclick="deleteMsg(${m.id}, 'me')">Delete for me</button>
+                ${m.sender === currentUser ? `<button class="del-btn" style="background:orange" onclick="deleteMsg(${m.id}, 'everyone')">Delete for everyone</button>` : ''}
             </div>
         `).join('');
         box.scrollTop = box.scrollHeight;
     }
+    function deleteMsg(id, mode) {
+        if(mode === 'everyone') {
             db.messages = db.messages.filter(m => m.id !== id);
         } else {
+            // Locally remove it from view for this session
+            db.messages = db.messages.filter(m => m.id !== id);
         }
         save();
         renderMessages();
     }
 </script>
 </body>
 </html>