sugakrit6
/

Gallery

Model card Files Files and versions

xet

Community

sugakrit6 commited on Feb 20

Commit

ec621ee

verified ·

1 Parent(s): 3a5051b

Update online.html

Browse files

Files changed (1) hide show

online.html +112 -100

online.html CHANGED Viewed

@@ -2,185 +2,198 @@
 <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() {
-        document.getElementById('version-popup').classList.add('hidden');
         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) {
@@ -189,12 +202,10 @@
             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 {
@@ -202,7 +213,7 @@
                     room.pending.push(currentUser);
                     save();
                 }
-                alert("Request sent to Host (" + room.host + "). Wait for approval.");
             }
         }
     }
@@ -211,20 +222,20 @@
         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;
@@ -234,7 +245,7 @@
             sender: currentUser,
             content: val,
             type: type,
-            time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
         });
         save();
         document.getElementById('msg-input').value = '';
@@ -243,19 +254,20 @@
     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>
@@ -267,7 +279,7 @@
         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();

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>AeroCore OS v2.2</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.9);
         }
         body {
             background: linear-gradient(135deg, #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%;} }
+        /* The Mosaic Filter Overlay */
+        .mosaic-layer {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-image: radial-gradient(rgba(255,255,255,0.2) 1.5px, transparent 1.5px);
+            background-size: 6px 6px; pointer-events: none; z-index: 5;
         }
         .window {
             width: 750px; height: 550px; background: var(--mosaic-glass);
+            border: 6px solid #fff; border-radius: 4px;
+            box-shadow: 15px 15px 0px rgba(0,0,0,0.1);
             position: relative; z-index: 20; display: flex; flex-direction: column;
         }
+        .screen { display: none; padding: 25px; flex-direction: column; height: 100%; box-sizing: border-box; }
         .active { display: flex; }
+        /* Aero Buttons & Inputs */
         button {
+            font-family: 'GameStart', sans-serif; padding: 12px; margin: 5px 0;
+            background: linear-gradient(to bottom, #ffffff 0%, #aadaff 40%, #0080ff 100%);
             border: 2px solid #fff; color: white; text-shadow: 1px 1px 2px #000;
+            cursor: pointer; box-shadow: 3px 3px 0px #0055aa; transition: 0.1s;
         }
+        button:active { transform: translate(2px, 2px); box-shadow: 0px 0px; }
         input {
             font-family: 'GameStart', sans-serif; padding: 12px; margin-bottom: 10px;
+            border: 3px inset #fff; background: rgba(255,255,255,0.9); width: 100%; box-sizing: border-box;
         }
+        #chat-box { background: white; border: 4px inset #eee; flex-grow: 1; overflow-y: auto; padding: 15px; margin-bottom: 10px; }
+        .msg { background: #e6f7ff; border-left: 6px solid var(--aero-blue); padding: 10px; margin-bottom: 10px; position: relative; }
+        .msg-info { font-size: 0.5rem; color: #555; margin-bottom: 4px; }
+        .del-btn { font-size: 0.5rem; background: #ff4d4d; border: 1px solid white; cursor: pointer; padding: 4px; margin-top: 5px;}
+        /* Version Popup Modal */
+        #modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.4); z-index: 1000;
+            display: none; justify-content: center; align-items: center;
         }
+        .modal {
+            background: white; border: 5px solid var(--aero-green);
+            padding: 30px; text-align: center; width: 400px;
+            box-shadow: 0 0 40px rgba(0,0,0,0.3);
+        }
+        .hidden { display: none !important; }
     </style>
 </head>
 <body>
+<div class="mosaic-layer"></div>
+<div id="modal-overlay">
+    <div class="modal">
+        <h3>AeroCore v2.0</h3>
+        <p>Built: 20th February 2026</p>
+        <button onclick="closePopup()" style="background: var(--aero-green); width: 100%;">EXIT & START</button>
+    </div>
+</div>
 <div class="window">
     <div id="screen-auth" class="screen active">
         <h2>AEROCORE ACCESS</h2>
+        <form id="login-form" onsubmit="handleAuth(event, 'login')">
             <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;">
+            <button type="submit">LOG IN</button>
+            <button type="button" onclick="handleAuth(event, 'signup')" style="background: #888;">SIGN UP</button>
         </form>
     </div>
     <div id="screen-tutorial" class="screen">
         <h2>SYSTEM TUTORIAL</h2>
+        <ul style="font-size: 0.8rem; line-height: 1.6;">
+            <li><b>HOST:</b> Create a Room → Share Code → Approve Members.</li>
+            <li><b>CLIENT:</b> Enter Code → Wait for Approval.</li>
+            <li><b>DELETE:</b> 'For Me' (Local) / 'Everyone' (Global).</li>
+        </ul>
+        <button onclick="nav('screen-lobby')">ENTER CHATROOMS</button>
     </div>
     <div id="screen-lobby" class="screen">
         <h2>COMMUNITY HUB</h2>
+        <p id="welcome-msg" style="color: var(--aero-blue);"></p>
         <button onclick="joinRoom('Public')">JOIN PUBLIC SERVER</button>
+        <hr style="border: 1px solid #fff; width: 100%;">
         <button onclick="createPrivate()">HOST PRIVATE ROOM</button>
+        <div id="host-code-display" style="color: #0055aa; font-weight: bold;"></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; align-items: center;">
+            <h2 id="room-header" style="font-size: 0.9rem;">CHAT</h2>
+            <button id="admin-btn" class="hidden" onclick="nav('screen-approval')" style="font-size: 0.6rem; padding: 5px;">ADMIN</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')" style="flex: 1;">SEND</button>
             <button onclick="sendMsg('img')" style="background:var(--aero-blue)">IMG</button>
+            <button onclick="nav('screen-lobby')" style="background:#cc0000">EXIT</button>
         </div>
     </div>
     <div id="screen-approval" class="screen">
+        <h2>PENDING MEMBERS</h2>
         <div id="approval-list"></div>
         <button onclick="nav('screen-chat')">BACK TO CHAT</button>
     </div>
 </div>
 <script>
+    // --- DATABASE ---
+    let db = JSON.parse(localStorage.getItem('aero_v2_data')) || {
+        users: [], messages: [], rooms: {}
     };
     let currentUser = null;
     let activeRoomCode = 'Public';
+    function save() { localStorage.setItem('aero_v2_data', 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();
+    }
+    // --- AUTHENTICATION ---
+    function handleAuth(event, mode) {
+        event.preventDefault();
         const u = document.getElementById('username').value;
         const p = document.getElementById('password').value;
+        if(!u || !p) return;
+        const user = db.users.find(x => x.username === u);
         if(mode === 'signup') {
+            if(user) return alert("User exists! Try Login.");
+            db.users.push({username: u, password: p});
             save();
+            alert("Account created! Now Log In.");
         } else {
+            if(!user || user.password !== p) return alert("Incorrect Username or Password!");
             currentUser = u;
+            document.getElementById('welcome-msg').innerText = "Logged in as: " + u;
+            document.getElementById('modal-overlay').style.display = 'flex'; // Show Version Popup
         }
     }
     function closePopup() {
+        document.getElementById('modal-overlay').style.display = 'none';
         nav('screen-tutorial');
     }
+    // --- ROOMS ---
     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 = "ROOM CODE: " + code;
         activeRoomCode = code;
         save();
     }
     function joinRoom(type) {
             nav('screen-chat');
         } else {
             const code = document.getElementById('join-code-input').value;
             const room = db.rooms[code];
+            if(!room) return alert("Room Not Found! Use the code from the other phone.");
+            activeRoomCode = code;
             if(room.members.includes(currentUser)) {
                 nav('screen-chat');
             } else {
                     room.pending.push(currentUser);
                     save();
                 }
+                alert("Request sent. Tell the Host to approve you on their screen!");
             }
         }
     }
         const list = document.getElementById('approval-list');
         const room = db.rooms[activeRoomCode];
         list.innerHTML = room.pending.map(u => `
+            <div style="background:#fff; padding:10px; margin-bottom:5px; border:2px solid var(--aero-blue);">
+                ${u} <button onclick="approveUser('${u}')">APPROVE</button>
             </div>
+        `).join('') || "No requests.";
     }
     function approveUser(u) {
         db.rooms[activeRoomCode].members.push(u);
+        db.rooms[activeRoomCode].pending = db.rooms[activeRoomCode].pending.filter(x => x !== u);
         save();
         renderApprovalList();
     }
+    // --- CHAT & DELETE ---
     function sendMsg(type) {
         const val = document.getElementById('msg-input').value;
         if(!val) return;
             sender: currentUser,
             content: val,
             type: type,
+            time: new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})
         });
         save();
         document.getElementById('msg-input').value = '';
     function renderMessages() {
         const box = document.getElementById('chat-box');
+        const msgs = db.messages.filter(m => m.room === activeRoomCode);
+        document.getElementById('room-header').innerText = `ROOM: ${activeRoomCode}`;
+        // Show Admin btn if Host
         if(activeRoomCode !== 'Public' && db.rooms[activeRoomCode].host === currentUser) {
+            document.getElementById('admin-btn').classList.remove('hidden');
         } else {
+            document.getElementById('admin-btn').classList.add('hidden');
         }
+        box.innerHTML = msgs.map(m => `
             <div class="msg">
+                <div class="msg-info">${m.sender} • ${m.time}</div>
+                <div>${m.type === 'img' ? `<img src="${m.content}" style="max-width:100px;">` : 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>
         if(mode === 'everyone') {
             db.messages = db.messages.filter(m => m.id !== id);
         } else {
+            // Local-only delete (for demo purposes it filters from array)
             db.messages = db.messages.filter(m => m.id !== id);
         }
         save();