sugakrit6
/

Gallery

Model card Files Files and versions

xet

Community

sugakrit6 commited on Feb 20

Commit

256e024

verified ·

1 Parent(s): 4e28ec5

Update online.html

Browse files

Files changed (1) hide show

online.html +218 -161

online.html CHANGED Viewed

@@ -2,261 +2,318 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AeroCore OS - Community Hub</title>
     <link href="https://fonts.cdnfonts.com/css/gamestart" rel="stylesheet">
     <style>
         :root {
-            --aero-blue: #0080ff;
-            --aero-green: #40ffaa;
-            --mosaic-bg: rgba(255, 255, 255, 0.85);
-            --gloss-top: rgba(255, 255, 255, 0.5);
         }
         body {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%),
-                        url('https://www.transparenttextures.com/patterns/cubes.png');
             font-family: 'GameStart', sans-serif;
-            color: #003366;
             margin: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
         }
         .window {
-            width: 700px;
             height: 550px;
-            background: var(--mosaic-bg);
-            border: 5px solid #fff;
-            box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.15);
             display: flex;
             flex-direction: column;
-            position: relative;
         }
-        /* Screen Management */
-        .screen { display: none; padding: 20px; flex-direction: column; height: 100%; box-sizing: border-box; }
         .active { display: flex; }
-        h1, h2 { text-shadow: 2px 2px #fff; margin-top: 0; }
-        /* Frutiger Buttons */
         button {
             font-family: 'GameStart', sans-serif;
-            padding: 8px 12px;
-            margin: 5px;
-            background: linear-gradient(to bottom, #ffffff 0%, #aadaff 50%, #4facfe 100%);
             border: 2px solid #fff;
-            border-radius: 4px;
             cursor: pointer;
-            color: #003366;
-            font-size: 0.8rem;
-            box-shadow: 2px 2px 0px #0055aa;
         }
-        button:active { transform: translate(2px, 2px); box-shadow: 0px 0px; }
-        /* Chat Display */
-        #chat-display {
-            background: rgba(255,255,255,0.5);
             border: 3px inset #fff;
             flex-grow: 1;
             overflow-y: auto;
-            padding: 10px;
             margin-bottom: 10px;
         }
-        .message {
-            background: rgba(255,255,255,0.8);
-            border-left: 4px solid var(--aero-blue);
-            padding: 8px;
-            margin-bottom: 8px;
-            font-size: 0.7rem;
             position: relative;
         }
-        .msg-meta { font-size: 0.5rem; color: #666; margin-bottom: 4px; }
-        .msg-tools { margin-top: 5px; display: flex; gap: 5px; }
-        .btn-del { background: linear-gradient(#ff8888, #aa0000); color: white; font-size: 0.5rem; }
-        input {
-            font-family: 'GameStart', sans-serif;
-            padding: 8px;
-            border: 2px solid var(--aero-blue);
         }
-        .media-btn-row { display: flex; gap: 5px; margin-bottom: 5px; }
-        /* Hidden Inputs */
-        input[type="file"] { display: none; }
     </style>
 </head>
 <body>
 <div class="window">
-    <div id="screen-home" class="screen active">
-        <h1>AEROCORE v2.0</h1>
-        <p>SYSTEM STATUS: ONLINE</p>
-        <button onclick="nav('screen-chat')">ENTER COMMUNITY HUB</button>
-        <button onclick="nav('screen-settings')">FILTERS & DATA</button>
     </div>
-    <div id="screen-chat" class="screen">
         <h2>COMMUNITY HUB</h2>
-        <div id="lobby-ui">
-            <button onclick="initChat('Public')">JOIN PUBLIC SERVER</button>
-            <hr>
-            <button onclick="createPrivate()">HOST PRIVATE ROOM</button>
-            <div id="private-code-box" style="margin: 10px 0; color: var(--aero-blue);"></div>
-            <input type="text" id="join-code" placeholder="ENTER ROOM CODE">
-            <button onclick="initChat('Private')">JOIN PRIVATE</button>
-        </div>
-        <div id="chat-ui" style="display:none; flex-direction:column; flex-grow:1; height:80%;">
-            <div id="chat-display"></div>
-            <div class="media-btn-row">
-                <button onclick="triggerFile('img')">IMG</button>
-                <button onclick="triggerFile('aud')">AUD</button>
-                <button onclick="triggerFile('vid')">VID</button>
-            </div>
-            <input type="file" id="fileInput" onchange="handleFileUpload()">
-            <input type="text" id="chatInput" placeholder="TYPE MESSAGE...">
-            <div style="display:flex; margin-top:10px;">
-                <button onclick="sendMessage()" style="flex:2">SEND</button>
-                <button onclick="exitChat()" style="flex:1; background: linear-gradient(#40ffaa, #008844);">DONE</button>
             </div>
         </div>
-        <button onclick="nav('screen-home')" id="back-home">BACK</button>
     </div>
-    <div id="screen-settings" class="screen">
-        <h2>SYSTEM CONFIG</h2>
-        <label>CENSORSHIP:</label>
-        <select id="censor-toggle">
-            <option value="on">ENABLED (STRICT)</option>
-            <option value="off">DISABLED</option>
-        </select>
-        <br><br>
-        <button onclick="clearData()" style="background: red; color: white;">WIPE DATA</button>
-        <button onclick="nav('screen-home')">SAVE & EXIT</button>
-    </div>
 </div>
 <script>
-    // --- DATABASE & STATE ---
-    let db = JSON.parse(localStorage.getItem('aero_db')) || { messages: [], filter: 'on' };
-    let currentRoom = "Public";
-    let pendingFileType = '';
     function nav(id) {
         document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
         document.getElementById(id).classList.add('active');
     }
-    // --- CHAT LOGIC ---
-    function createPrivate() {
-        const code = Math.floor(1000 + Math.random() * 9000);
-        document.getElementById('private-code-box').innerText = "GENERATED CODE: " + code;
     }
-    function initChat(mode) {
-        if(mode === 'Private' && !document.getElementById('join-code').value) return alert("Code Required");
-        currentRoom = mode;
-        document.getElementById('lobby-ui').style.display = 'none';
-        document.getElementById('back-home').style.display = 'none';
-        document.getElementById('chat-ui').style.display = 'flex';
-        renderMessages();
     }
-    function exitChat() {
-        document.getElementById('lobby-ui').style.display = 'block';
-        document.getElementById('back-home').style.display = 'block';
-        document.getElementById('chat-ui').style.display = 'none';
-    }
-    function triggerFile(type) {
-        pendingFileType = type;
-        document.getElementById('fileInput').click();
     }
-    function handleFileUpload() {
-        const file = document.getElementById('fileInput').files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => addMessage(e.target.result, pendingFileType);
-            reader.readAsDataURL(file);
         }
     }
-    function sendMessage() {
-        const txt = document.getElementById('chatInput').value;
-        if(txt) {
-            addMessage(txt, 'text');
-            document.getElementById('chatInput').value = '';
-        }
     }
-    function addMessage(content, type) {
-        const isCensor = document.getElementById('censor-toggle').value === 'on';
-        let safeContent = content;
-        if(type === 'text' && isCensor) {
-            const badWords = ["bad", "rude"];
-            badWords.forEach(w => safeContent = safeContent.replace(new RegExp(w, 'gi'), '***'));
-        }
-        const msgObj = {
             id: Date.now(),
-            room: currentRoom,
-            body: safeContent,
             type: type,
-            date: new Date().toLocaleString()
         };
-        db.messages.push(msgObj);
         save();
         renderMessages();
     }
     function renderMessages() {
-        const container = document.getElementById('chat-display');
-        const roomMsgs = db.messages.filter(m => m.room === currentRoom);
-        container.innerHTML = roomMsgs.map(m => `
-            <div class="message" id="msg-${m.id}">
-                <div class="msg-meta">${m.date} | Room: ${m.room}</div>
-                <div class="msg-body">
-                    ${renderBody(m)}
-                </div>
-                <div class="msg-tools">
-                    <button class="btn-del" onclick="deleteMsg(${m.id})">DELETE FOR ME</button>
                 </div>
             </div>
         `).join('');
-        container.scrollTop = container.scrollHeight;
     }
-    function renderBody(m) {
-        if(m.type === 'img') return `<img src="${m.body}" style="max-width:100px;">`;
-        if(m.type === 'aud') return `<audio src="${m.body}" controls style="width:150px;"></audio>`;
-        if(m.type === 'vid') return `<video src="${m.body}" controls style="width:150px;"></video>`;
-        return m.body;
     }
-    function deleteMsg(id) {
-        db.messages = db.messages.filter(m => m.id !== id);
         save();
         renderMessages();
     }
-    function save() { localStorage.setItem('aero_db', JSON.stringify(db)); }
-    function clearData() { localStorage.removeItem('aero_db'); location.reload(); }
 </script>
 </body>

 <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() {
+        document.getElementById('version-popup').classList.add('hidden');
+        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) {
+        if(type === 'Public') {
+            activeRoomCode = 'Public';
+            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.");
+            }
         }
     }
+    function renderApprovalList() {
+        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>