sugakrit6
/

Gallery

Model card Files Files and versions

xet

Community

sugakrit6 commited on Feb 20

Commit

4e28ec5

verified ·

1 Parent(s): 5b1d2a2

Update online.html

Browse files

Files changed (1) hide show

online.html +189 -130

online.html CHANGED Viewed

@@ -2,203 +2,262 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>AeroCore OS</title>
     <link href="https://fonts.cdnfonts.com/css/gamestart" rel="stylesheet">
     <style>
         :root {
-            --aero-blue: #00aaff;
-            --aero-green: #33ff99;
-            --mosaic-bg: rgba(255, 255, 255, 0.7);
         }
         body {
-            background: url('https://e0.pxfuel.com/wallpapers/312/820/desktop-wallpaper-frutiger-aero-aesthetic.jpg');
-            background-size: cover;
             font-family: 'GameStart', sans-serif;
             color: #003366;
-            overflow: hidden;
-            height: 100vh;
             margin: 0;
             display: flex;
             justify-content: center;
             align-items: center;
         }
-        /* Mosaic Effect instead of Blur */
-        .screen {
-            width: 90%;
-            max-width: 600px;
-            height: 450px;
             background: var(--mosaic-bg);
-            border: 4px solid white;
-            border-radius: 0px; /* Mosaic style often uses sharper edges */
-            box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
-            padding: 20px;
-            display: none; /* Controlled by JS */
             flex-direction: column;
             position: relative;
         }
         .active { display: flex; }
-        /* Glossy Buttons */
         button {
             font-family: 'GameStart', sans-serif;
-            padding: 10px;
             margin: 5px;
-            background: linear-gradient(to bottom, #fff 0%, #00aaff 50%, #004488 100%);
-            border: 2px solid white;
-            color: white;
-            text-shadow: 2px 2px #000;
             cursor: pointer;
         }
-        .navbar {
-            position: absolute;
-            bottom: 10px;
-            width: 90%;
-            display: flex;
-            justify-content: space-around;
         }
         input {
             font-family: 'GameStart', sans-serif;
-            background: rgba(255,255,255,0.8);
             border: 2px solid var(--aero-blue);
-            padding: 5px;
         }
-        #chat-display {
-            background: white;
-            flex-grow: 1;
-            overflow-y: auto;
-            margin-bottom: 10px;
-            border: 2px inset #ccc;
-            padding: 10px;
-        }
     </style>
 </head>
 <body>
-<div id="screen-home" class="screen active">
-    <h1>AERO CORE v1.0</h1>
-    <p>Welcome, User. Select a module:</p>
-    <button onclick="nav('screen-music')">AUDIO PLAYER</button>
-    <button onclick="nav('screen-chat')">COMMUNITY HUB</button>
-    <button onclick="nav('screen-settings')">SYSTEM SETTINGS</button>
-</div>
-<div id="screen-music" class="screen">
-    <h2>🎵 PLAYLIST</h2>
-    <input type="text" id="musicUrl" placeholder="Enter .mp3 link">
-    <button onclick="saveMusic()">Add to Data</button>
-    <div id="playlist-box"></div>
-    <div class="navbar">
-        <button onclick="nav('screen-home')">BACK</button>
     </div>
-</div>
-<div id="screen-chat" class="screen">
-    <h2 id="chat-title">COMMUNITY</h2>
-    <div id="chat-display"></div>
-    <input type="text" id="chatInput" placeholder="Message...">
-    <button onclick="handleChat()">SEND</button>
-    <div class="navbar">
-        <button onclick="nav('screen-home')">HOME</button>
     </div>
-</div>
-<div id="screen-settings" class="screen">
-    <h2>⚙️ SETTINGS</h2>
-    <label>Content Filter:</label>
-    <select id="filterSetting" onchange="saveSettings()">
-        <option value="strict">STRICT (Censor On)</option>
-        <option value="none">OFF (Danger)</option>
-    </select>
-    <br><br>
-    <button onclick="clearAllData()" style="background: red;">WIPE DATA</button>
-    <div class="navbar">
-        <button onclick="nav('screen-home')">BACK</button>
     </div>
 </div>
 <script>
-    // --- NAVIGATION LOGIC ---
-    function nav(screenId) {
         document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-        document.getElementById(screenId).classList.add('active');
     }
-    // --- DATA SAVE LOGIC (LocalStorage) ---
-    let appData = JSON.parse(localStorage.getItem('aeroData')) || {
-        playlist: [],
-        settings: { filter: 'strict' },
-        chatHistory: []
-    };
-    function updateStorage() {
-        localStorage.setItem('aeroData', JSON.stringify(appData));
     }
-    // --- CONTENT FILTER LOGIC ---
-    const bannedWords = ["bad", "mean", "toxic"];
-    function filterText(text) {
-        if (appData.settings.filter === 'none') return text;
-        let censored = text;
-        bannedWords.forEach(word => {
-            const rel = new RegExp(word, "gi");
-            censored = censored.replace(rel, "###");
-        });
-        return censored;
     }
-    // --- MUSIC FUNCTIONS ---
-    function saveMusic() {
-        const url = document.getElementById('musicUrl').value;
-        if(url) {
-            appData.playlist.push(url);
-            updateStorage();
-            renderPlaylist();
-        }
     }
-    function renderPlaylist() {
-        const box = document.getElementById('playlist-box');
-        box.innerHTML = appData.playlist.map(i => `<div>- ${i.substring(0,20)}...</div>`).join('');
     }
-    // --- CHAT FUNCTIONS ---
-    function handleChat() {
-        const input = document.getElementById('chatInput');
-        const cleanMsg = filterText(input.value);
-        appData.chatHistory.push(cleanMsg);
-        updateStorage();
-        renderChat();
-        input.value = "";
     }
-    function renderChat() {
-        const display = document.getElementById('chat-display');
-        display.innerHTML = appData.chatHistory.map(m => `<div>> ${m}</div>`).join('');
     }
-    function saveSettings() {
-        appData.settings.filter = document.getElementById('filterSetting').value;
-        updateStorage();
-        alert("Settings Saved!");
     }
-    function clearAllData() {
-        localStorage.removeItem('aeroData');
-        location.reload();
     }
-    // Initial Load
-    renderPlaylist();
-    renderChat();
-    document.getElementById('filterSetting').value = appData.settings.filter;
 </script>
 </body>
 </html>

 <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>