I'll expand the platform with user authentication, page builder, and directory features. Here's the updated version: NeoWeb

CONNECTING TO NEOWEB...

:root { --neon-green: #39ff14; --neon-blue: #00f7ff; --neon-pink: #ff00ff; --dark-bg: #0a0a0a; --darker-bg: #050505; --terminal-text: #e0e0e0; --modal-bg: rgba(10, 10, 10, 0.95); } body { margin: 0; padding: 0; background-color: var(--dark-bg); color: var(--terminal-text); font-family: 'Courier New', monospace; height: 100vh; display: flex; justify-content: center; align-items: center; } .terminal-ui { width: 90%; max-width: 1000px; border: 1px solid var(--neon-green); box-shadow: 0 0 10px var(--neon-green); border-radius: 5px; overflow: hidden; } .browser-window { display: flex; flex-direction: column; height: 80vh; } .address-bar { background-color: var(--darker-bg); padding: 8px; display: flex; align-items: center; border-bottom: 1px solid var(--neon-blue); } .controls { display: flex; gap: 8px; margin-right: 15px; } .control-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .close { background-color: #ff5f56; } .minimize { background-color: #ffbd2e; } .maximize { background-color: #27c93f; } .url-input { flex-grow: 1; background-color: rgba(0, 0, 0, 0.3); padding: 5px 10px; border-radius: 3px; border: 1px solid var(--neon-pink); color: var(--neon-blue); font-size: 14px; font-family: inherit; outline: none; } .url-input:focus { box-shadow: 0 0 5px var(--neon-blue); } .nav-btn { background-color: var(--neon-blue); color: var(--dark-bg); border: none; padding: 5px 10px; margin-left: 5px; border-radius: 3px; cursor: pointer; } .nav-btn:hover { background-color: var(--neon-green); } .toolbar { display: flex; background-color: var(--darker-bg); padding: 5px; border-bottom: 1px solid var(--neon-pink); } .toolbar-btn { background-color: transparent; color: var(--terminal-text); border: 1px solid var(--neon-green); padding: 5px 10px; margin-right: 5px; border-radius: 3px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 5px; } .toolbar-btn:hover { background-color: rgba(57, 255, 20, 0.1); } .toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; } .content-area { flex-grow: 1; background-color: var(--darker-bg); position: relative; overflow: auto; } .loading-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: var(--dark-bg); z-index: 10; } .scanlines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 50% ); background-size: 100% 4px; pointer-events: none; } .loading-text { color: var(--neon-green); font-size: 1.5rem; text-shadow: 0 0 5px var(--neon-green); animation: pulse 1.5s infinite alternate; } .page-content { padding: 20px; } /* Modal styles */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 100; justify-content: center; align-items: center; } .modal-content { background-color: var(--modal-bg); border: 1px solid var(--neon-blue); padding: 20px; border-radius: 5px; width: 400px; max-width: 90%; position: relative; } .modal-content.wide { width: 700px; } .close-modal { position: absolute; top: 10px; right: 10px; color: var(--neon-pink); font-size: 20px; cursor: pointer; } .auth-forms { position: relative; } .auth-form { display: none; } .auth-form.active { display: block; } .auth-form input { display: block; width: 100%; padding: 10px; margin-bottom: 10px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--neon-green); color: var(--terminal-text); font-family: inherit; } .auth-form button { width: 100%; padding: 10px; background-color: var(--neon-blue); color: var(--dark-bg); border: none; cursor: pointer; font-family: inherit; } .auth-switch { text-align: center; margin-top: 10px; } .auth-switch a { color: var(--neon-green); cursor: pointer; } /* Editor styles */ .editor-container { display: flex; height: 400px; } .editor-toolbar { width: 150px; border-right: 1px solid var(--neon-pink); padding-right: 10px; } .editor-btn { display: block; width: 100%; padding: 8px; margin-bottom: 5px; background-color: transparent; color: var(--terminal-text); border: 1px solid var(--neon-green); cursor: pointer; font-family: inherit; text-align: left; } .editor-btn:hover { background-color: rgba(57, 255, 20, 0.1); } .editor-preview { flex-grow: 1; padding: 10px; overflow-y: auto; } .save-btn { display: block; width: 100%; padding: 10px; margin-top: 10px; background-color: var(--neon-green); color: var(--dark-bg); border: none; cursor: pointer; font-family: inherit; } /* Directory styles */ .user-list { margin-top: 15px; max-height: 400px; overflow-y: auto; } .user-item { padding: 10px; border-bottom: 1px solid var(--neon-pink); cursor: pointer; } .user-item:hover { background-color: rgba(0, 247, 255, 0.1); } .search-box { margin-bottom: 10px; } .search-box input { width: 100%; padding: 8px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--neon-green); color: var(--terminal-text); font-family: inherit; } @keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } } @keyframes glow { 0% { box-shadow: 0 0 5px var(--neon-green); } 50% { box-shadow: 0 0 20px var(--neon-green); } 100% { box-shadow: 0 0 5px var(--neon-green); } } // Main application state const state = { currentUser: null, currentPage: 'welcome', pages: { welcome: { title: 'Welcome to NeoWeb', content: '

Welcome to NeoWeb

The retro-futuristic web platform

Browse users or sign in to create your own page.

', owner: 'system' } }, users: { 'admin': { password: 'admin123', pages: { 'admin': { title: 'Admin Page', content: '

Admin Space

This is the admin page.

' } } } } }; // DOM elements const app = document.getElementById('app'); const urlInput = document.querySelector('.url-input'); const goBtn = document.querySelector('.go-btn'); const authBtn = document.getElementById('auth-btn'); const editBtn = document.getElementById('edit-btn'); const directoryBtn = document.getElementById('directory-btn'); // Modal elements const authModal = document.getElementById('auth-modal'); const editorModal = document.getElementById('editor-modal'); const directoryModal = document.getElementById('directory-modal'); // Auth form elements const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const showRegister = document.getElementById('show-register'); const showLogin = document.getElementById('show-login'); const loginBtn = document.getElementById('login-btn'); const registerBtn = document.getElementById('register-btn'); // Editor elements const editorPreview = document.getElementById('editor-preview'); const savePageBtn = document.getElementById('save-page-btn'); // Directory elements const userList = document.getElementById('user-list'); const userSearch = document.getElementById('user-search'); // Initialize the app function init() { renderPage(state.currentPage); setTimeout(() => { document.querySelector('.loading-screen').style.opacity = '0'; setTimeout(() => { document.querySelector('.loading-screen').style.display = 'none'; }, 500); }, 1500); setupEventListeners(); } // Set up event listeners function setupEventListeners() { // Navigation goBtn.addEventListener('click', navigateToUrl); urlInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') navigateToUrl(); }); // Auth authBtn.addEventListener('click', () => { if (state.currentUser) { logout(); } else { showModal(authModal); showAuthForm('login'); } }); showRegister.addEventListener('click', (e) => { e.preventDefault(); showAuthForm('register'); }); showLogin.addEventListener('click', (e) => { e.preventDefault(); showAuthForm('login'); }); loginBtn.addEventListener('click', handleLogin); registerBtn.addEventListener('click', handleRegister); // Editor editBtn.addEventListener('click', () => { if (state.currentUser) { loadEditor(); showModal(editorModal); } }); savePageBtn.addEventListener('click', savePage); // Directory directoryBtn.addEventListener('click', () => { loadDirectory(); showModal(directoryModal); }); userSearch.addEventListener('input', filterUsers); // Close modals document.querySelectorAll('.close-modal').forEach(btn => { btn.addEventListener('click', () => { hideAllModals(); }); }); // Close modals when clicking outside window.addEventListener('click', (e) => { if (e.target === authModal || e.target === editorModal || e.target === directoryModal) { hideAllModals(); } }); } // Navigation functions function navigateToUrl() { const url = urlInput.value.trim(); if (url.startsWith('neo://~')) { const username = url.substring(7); renderPage(username); } else { renderPage('welcome'); } } // Render a page by username function renderPage(username) { let page; if (username === 'welcome') { page = state.pages.welcome; } else if (state.users[username] && state.users[username].pages[username]) { page = state.users[username].pages[username]; } else { page = { title: 'Page Not Found', content: '

404

This page does not exist.

' }; } app.innerHTML = `

${page.content}

`; urlInput.value = `neo://~${username}`; state.currentPage = username; // Enable edit button if this is the current user's page editBtn.disabled = !(state.currentUser && username === state.currentUser); } // Auth functions function I'll continue with the remaining JavaScript code for the application: // ... (previous code continues) function showAuthForm(formType) { loginForm.classList.remove('active'); registerForm.classList.remove('active'); if (formType === 'login') { loginForm.classList.add('active'); } else { registerForm.classList.add('active'); } } function handleLogin() { const username = document.getElementById('login-username').value; const password = document.getElementById('login-password').value; if (!username || !password) { alert('Please enter both username and password'); return; } if (state.users[username] && state.users[username].password === password) { state.currentUser = username; authBtn.innerHTML = ' Sign Out'; hideAllModals(); renderPage(state.currentPage); } else { alert('Invalid username or password'); } } function handleRegister() { const username = document.getElementById('register-username').value; const password = document.getElementById('register-password').value; if (!username || !password) { alert('Please enter both username and password'); return; } if (state.users[username]) { alert('Username already exists'); return; } // Create new user state.users[username] = { password: password, pages: { [username]: { title: `${username}'s Page`, content: '

Welcome to my NeoWeb page!

Edit this page to make it your own.

' } } }; state.currentUser = username; authBtn.innerHTML = ' Sign Out'; hideAllModals(); renderPage(username); } function logout() { state.currentUser = null; authBtn.innerHTML = ' Sign In'; editBtn.disabled = true; renderPage('welcome'); } // Editor functions function loadEditor() { const username = state.currentUser; const page = state.users[username].pages[username]; editorPreview.innerHTML = page.content; } function savePage() { const username = state.currentUser; state.users[username].pages[username].content = editorPreview.innerHTML; hideAllModals(); renderPage(username); } // Directory functions function loadDirectory() { userList.innerHTML = ''; Object.keys(state.users).forEach(username => { if (username !== 'admin') { // Skip admin in directory const userItem = document.createElement('div'); userItem.className = 'user-item'; userItem.textContent = `~${username}`; userItem.addEventListener('click', () => { hideAllModals(); renderPage(username); }); userList.appendChild(userItem); } }); } function filterUsers() { const searchTerm = userSearch.value.toLowerCase(); const items = userList.querySelectorAll('.user-item'); items.forEach(item => { const username = item.textContent.substring(1).toLowerCase(); if (username.includes(searchTerm)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } // Modal functions function showModal(modal) { hideAllModals(); modal.style.display = 'flex'; } function hideAllModals() { authModal.style.display = 'none'; editorModal.style.display = 'none'; directoryModal.style.display = 'none'; } // Initialize the app when DOM is loaded document.addEventListener('DOMContentLoaded', init); // Add block editor functionality document.querySelectorAll('.editor-btn').forEach(btn => { btn.addEventListener('click', () => { const type = btn.dataset.type; let html = ''; switch(type) { case 'text': html = '

New text block

'; break; case 'image': html = '

https://example.com/image.jpg

'; break; case 'link': html = '

New link

'; break; case 'embed': html = '

'; break; } editorPreview.insertAdjacentHTML('beforeend', html); }); }); This completes the retro-futuristic web platform with: - User authentication (login/register) - Virtual address bar navigation - Page editor with text, image, link and embed blocks - User directory browsing - Neon cyberpunk aesthetic - All pages accessible via virtual URLs (neo://~username) The platform now allows users to: 1. Create accounts and log in 2. Edit their personal pages with various content blocks 3. Browse other users' pages through the directory 4. Navigate using the virtual address bar 5. Share pages via their unique virtual URLs

Sign In

Register

Page Editor

User Directory

Welcome to NeoWeb

Admin Space

404

Welcome to my NeoWeb page!