|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Genesis Neo - Cyberpunk RPG MMO</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-pink: #ff2a6d; |
|
|
--neon-blue: #05d9e8; |
|
|
--neon-purple: #d300c5; |
|
|
--dark-bg: #0d0221; |
|
|
--darker-bg: #05010f; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Share Tech Mono', monospace; |
|
|
background-color: var(--dark-bg); |
|
|
color: #fff; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.cyberpunk-scrollbar::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.cyberpunk-scrollbar::-webkit-scrollbar-track { |
|
|
background: var(--darker-bg); |
|
|
} |
|
|
|
|
|
.cyberpunk-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: var(--neon-pink); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.cyberpunk-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--neon-purple); |
|
|
} |
|
|
|
|
|
.neon-text-pink { |
|
|
color: var(--neon-pink); |
|
|
text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); |
|
|
} |
|
|
|
|
|
.neon-text-blue { |
|
|
color: var(--neon-blue); |
|
|
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.neon-border-pink { |
|
|
border: 1px solid var(--neon-pink); |
|
|
box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink); |
|
|
} |
|
|
|
|
|
.neon-border-blue { |
|
|
border: 1px solid var(--neon-blue); |
|
|
box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.terminal-line::before { |
|
|
content: "> "; |
|
|
color: var(--neon-blue); |
|
|
} |
|
|
|
|
|
.blink { |
|
|
animation: blink 1s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
from, to { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
.glow-effect { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glow-effect::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: radial-gradient(circle at center, transparent, var(--neon-blue) 70%); |
|
|
opacity: 0.1; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.scanlines { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.scanlines::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
rgba(255, 255, 255, 0.05) 50%, |
|
|
transparent 50% |
|
|
); |
|
|
background-size: 100% 4px; |
|
|
pointer-events: none; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.command-input { |
|
|
caret-color: var(--neon-blue); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col bg-[#0d0221] p-4"> |
|
|
|
|
|
<header class="mb-4 neon-border-pink p-3 rounded-lg"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold font-['Orbitron'] neon-text-pink"> |
|
|
NETRUNNER ONLINE <span class="text-sm neon-text-blue">v1.0.0</span> |
|
|
</h1> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="text-right"> |
|
|
<div class="neon-text-blue text-sm">CONNECTION</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-24 h-2 bg-gray-800 rounded mr-2"> |
|
|
<div class="h-full bg-green-500 rounded" style="width: 95%"></div> |
|
|
</div> |
|
|
<span class="text-green-500 text-xs">SECURE</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="neon-text-blue text-sm">SERVER LOAD</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-24 h-2 bg-gray-800 rounded mr-2"> |
|
|
<div class="h-full bg-yellow-500 rounded" style="width: 65%"></div> |
|
|
</div> |
|
|
<span class="text-yellow-500 text-xs">MODERATE</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row flex-1 gap-4"> |
|
|
|
|
|
<main class="flex-1 flex flex-col"> |
|
|
<div class="flex mb-2"> |
|
|
<div class="bg-[#05010f] text-white px-4 py-2 rounded-t-lg border-b border-[#ff2a6d] neon-text-pink"> |
|
|
<i class="fas fa-terminal mr-2"></i> MAIN TERMINAL |
|
|
</div> |
|
|
<div class="bg-[#05010f] text-gray-400 px-4 py-2 rounded-t-lg"> |
|
|
<i class="fas fa-chart-network mr-2"></i> NETWORK MAP |
|
|
</div> |
|
|
<div class="bg-[#05010f] text-gray-400 px-4 py-2 rounded-t-lg"> |
|
|
<i class="fas fa-database mr-2"></i> DATA VAULT |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 bg-[#05010f] neon-border-pink rounded-b-lg rounded-tr-lg p-4 h-full flex flex-col scanlines"> |
|
|
|
|
|
<div id="terminal-output" class="flex-1 overflow-y-auto cyberpunk-scrollbar mb-4 font-mono text-sm text-gray-300 leading-relaxed"> |
|
|
<div class="terminal-line neon-text-blue">INITIALIZING NEON NEXUS INTERFACE...</div> |
|
|
<div class="terminal-line">SYSTEM CHECK: COMPLETE</div> |
|
|
<div class="terminal-line">SECURITY PROTOCOLS: ACTIVE</div> |
|
|
<div class="terminal-line">NETWORK CONNECTION: ESTABLISHED</div> |
|
|
<div class="terminal-line">USER AUTHENTICATION: VERIFIED</div> |
|
|
<div class="terminal-line neon-text-pink">WELCOME TO NEON NEXUS, RUNNER</div> |
|
|
<div class="terminal-line">ACTIVE PLAYERS: 2,847</div> |
|
|
<div class="terminal-line">CURRENT SERVER TIME: <span id="server-time" class="neon-text-blue"></span></div> |
|
|
<div class="terminal-line">----------------------------------------</div> |
|
|
<div class="terminal-line neon-text-pink">LAST SYSTEM MESSAGE:</div> |
|
|
<div class="terminal-line">> The megacorp Black ICE has deployed new security drones in the downtown sector.</div> |
|
|
<div class="terminal-line">> Runners report increased NetWatch activity near the old data fortresses.</div> |
|
|
<div class="terminal-line">> A new underground fighting ring has opened in the Red Light district.</div> |
|
|
<div class="terminal-line">----------------------------------------</div> |
|
|
<div class="terminal-line neon-text-pink">YOUR STATUS:</div> |
|
|
<div class="terminal-line">> HANDLE: <span class="neon-text-blue">Ghost</span></div> |
|
|
<div class="terminal-line">> REPUTATION: Street Legend (Tier 4)</div> |
|
|
<div class="terminal-line">> CREDITS: 12,750</div> |
|
|
<div class="terminal-line">> CURRENT LOCATION: Night Market</div> |
|
|
<div class="terminal-line">> ACTIVE QUESTS: 3</div> |
|
|
<div class="terminal-line">> CREW: Razor (Netrunner), Jinx (Tech), Smiley (Solo)</div> |
|
|
<div class="terminal-line">> EQUIPMENT: Cyberdeck MK.3, Smart Pistol, Subdermal Armor</div> |
|
|
<div class="terminal-line">----------------------------------------</div> |
|
|
<div class="terminal-line neon-text-pink">NEARBY PLAYERS:</div> |
|
|
<div class="terminal-line">> Nova (Netrunner) - Rating: 8/10 - Last seen: 2 min ago</div> |
|
|
<div class="terminal-line">> Spectre (Solo) - Rating: 6/10 - Last seen: 5 min ago</div> |
|
|
<div class="terminal-line">> Byte (Tech) - Rating: 7/10 - Last seen: 8 min ago</div> |
|
|
<div class="terminal-line">----------------------------------------</div> |
|
|
<div class="terminal-line neon-text-pink">TYPE 'HELP' FOR COMMAND LIST</div> |
|
|
<div class="terminal-line blink">_</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute left-3 top-3 neon-text-blue">></div> |
|
|
<input type="text" id="command-input" class="w-full bg-black bg-opacity-50 text-white p-2 pl-8 rounded command-input neon-border-blue focus:outline-none focus:ring-2 focus:ring-[#05d9e8]" placeholder="ENTER COMMAND..." autofocus> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<aside class="w-full lg:w-80 flex flex-col"> |
|
|
|
|
|
<div class="bg-[#05010f] neon-border-blue rounded-lg p-4 mb-4 glow-effect"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 bg-[#ff2a6d] bg-opacity-20 rounded-full flex items-center justify-center neon-border-pink"> |
|
|
<i class="fas fa-user-secret text-2xl neon-text-pink"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h2 class="text-xl neon-text-pink">GHOST</h2> |
|
|
<div class="text-xs neon-text-blue">NETRUNNER / TECH</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-3 text-xs mb-4"> |
|
|
<div> |
|
|
<div class="neon-text-blue">LEVEL</div> |
|
|
<div class="text-white">24</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="neon-text-blue">REP</div> |
|
|
<div class="text-white">Street Legend</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="neon-text-blue">CREDITS</div> |
|
|
<div class="text-white">12,750</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="neon-text-blue">LOCATION</div> |
|
|
<div class="text-white">Night Market</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-2"> |
|
|
<div class="flex justify-between text-xs mb-1 neon-text-blue"> |
|
|
<span>CYBERWARE INTEGRITY</span> |
|
|
<span>87%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-[#05d9e8] h-2 rounded-full" style="width: 87%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-2"> |
|
|
<div class="flex justify-between text-xs mb-1 neon-text-blue"> |
|
|
<span>NEURAL STABILITY</span> |
|
|
<span>72%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-[#d300c5] h-2 rounded-full" style="width: 72%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-[#05010f] neon-border-pink rounded-lg p-4 mb-4"> |
|
|
<h3 class="neon-text-pink text-sm mb-3">QUICK ACTIONS</h3> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="bg-[#ff2a6d] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-pink transition"> |
|
|
<i class="fas fa-map-marker-alt mr-1"></i> MAP |
|
|
</button> |
|
|
<button class="bg-[#05d9e8] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-blue transition"> |
|
|
<i class="fas fa-network-wired mr-1"></i> NET |
|
|
</button> |
|
|
<button class="bg-[#ff2a6d] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-pink transition"> |
|
|
<i class="fas fa-briefcase mr-1"></i> INVENTORY |
|
|
</button> |
|
|
<button class="bg-[#05d9e8] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-blue transition"> |
|
|
<i class="fas fa-users mr-1"></i> CREW |
|
|
</button> |
|
|
<button class="bg-[#ff2a6d] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-pink transition"> |
|
|
<i class="fas fa-tasks mr-1"></i> QUESTS |
|
|
</button> |
|
|
<button class="bg-[#05d9e8] bg-opacity-20 hover:bg-opacity-30 text-white p-2 rounded text-xs neon-border-blue transition"> |
|
|
<i class="fas fa-store mr-1"></i> MARKET |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-[#05010f] neon-border-blue rounded-lg p-4 flex-1"> |
|
|
<h3 class="neon-text-blue text-sm mb-3">ACTIVE QUESTS <span class="text-white">(3)</span></h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="bg-black bg-opacity-30 p-2 rounded border-l-4 border-[#ff2a6d]"> |
|
|
<div class="text-xs neon-text-pink">DATA HEIST</div> |
|
|
<div class="text-xs text-gray-300">Infiltrate Arasaka subnet and extract payroll data</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1 mt-1"> |
|
|
<div class="bg-[#ff2a6d] h-1 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-black bg-opacity-30 p-2 rounded border-l-4 border-[#05d9e8]"> |
|
|
<div class="text-xs neon-text-blue">WETWORK</div> |
|
|
<div class="text-xs text-gray-300">Eliminate the rogue AI "Wintermute"</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1 mt-1"> |
|
|
<div class="bg-[#05d9e8] h-1 rounded-full" style="width: 20%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-black bg-opacity-30 p-2 rounded border-l-4 border-[#d300c5]"> |
|
|
<div class="text-xs text-[#d300c5]">SIDE JOB</div> |
|
|
<div class="text-xs text-gray-300">Deliver package to the Red Light district</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1 mt-1"> |
|
|
<div class="bg-[#d300c5] h-1 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-4 text-xs text-gray-500 flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="neon-text-pink">NEON NEXUS</span> - A Cyberpunk Text-Based RPG MMO |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<div>PLAYERS ONLINE: <span class="neon-text-blue">2,847</span></div> |
|
|
<div>UPTIME: <span class="neon-text-blue">99.87%</span></div> |
|
|
<div>LATENCY: <span class="neon-text-blue">32ms</span></div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function updateServerTime() { |
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString('en-US', { |
|
|
hour12: false, |
|
|
hour: '2-digit', |
|
|
minute: '2-digit', |
|
|
second: '2-digit' |
|
|
}); |
|
|
document.getElementById('server-time').textContent = timeString; |
|
|
} |
|
|
|
|
|
setInterval(updateServerTime, 1000); |
|
|
updateServerTime(); |
|
|
|
|
|
|
|
|
const terminalOutput = document.getElementById('terminal-output'); |
|
|
const commandInput = document.getElementById('command-input'); |
|
|
|
|
|
commandInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
const command = commandInput.value.trim(); |
|
|
if (command) { |
|
|
|
|
|
addTerminalLine(`> ${command}`, 'text-gray-400'); |
|
|
|
|
|
|
|
|
processCommand(command); |
|
|
|
|
|
|
|
|
commandInput.value = ''; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
function addTerminalLine(text, colorClass = 'text-gray-300') { |
|
|
const line = document.createElement('div'); |
|
|
line.className = `terminal-line ${colorClass}`; |
|
|
line.textContent = text; |
|
|
terminalOutput.appendChild(line); |
|
|
terminalOutput.scrollTop = terminalOutput.scrollHeight; |
|
|
} |
|
|
|
|
|
function processCommand(command) { |
|
|
const cmd = command.toLowerCase(); |
|
|
|
|
|
|
|
|
if (cmd === 'help') { |
|
|
addTerminalLine('AVAILABLE COMMANDS:', 'neon-text-pink'); |
|
|
addTerminalLine('help - Show this help message'); |
|
|
addTerminalLine('status - Show your character status'); |
|
|
addTerminalLine('map - Show current location map'); |
|
|
addTerminalLine('move [location] - Move to another location'); |
|
|
addTerminalLine('inventory - Show your inventory'); |
|
|
addTerminalLine('quests - List active quests'); |
|
|
addTerminalLine('crew - Show your crew members'); |
|
|
addTerminalLine('scan - Scan for nearby players'); |
|
|
addTerminalLine('chat [message] - Send message to nearby players'); |
|
|
addTerminalLine('clear - Clear the terminal'); |
|
|
} |
|
|
else if (cmd === 'status') { |
|
|
addTerminalLine('CHARACTER STATUS:', 'neon-text-pink'); |
|
|
addTerminalLine('HANDLE: Ghost'); |
|
|
addTerminalLine('CLASS: Netrunner/Tech'); |
|
|
addTerminalLine('LEVEL: 24'); |
|
|
addTerminalLine('REPUTATION: Street Legend (Tier 4)'); |
|
|
addTerminalLine('CREDITS: 12,750'); |
|
|
addTerminalLine('LOCATION: Night Market'); |
|
|
addTerminalLine('CYBERWARE INTEGRITY: 87%'); |
|
|
addTerminalLine('NEURAL STABILITY: 72%'); |
|
|
} |
|
|
else if (cmd === 'scan') { |
|
|
addTerminalLine('SCANNING FOR NEARBY PLAYERS...', 'neon-text-blue'); |
|
|
setTimeout(() => { |
|
|
addTerminalLine('NEARBY PLAYERS:', 'neon-text-pink'); |
|
|
addTerminalLine('> Nova (Netrunner) - Rating: 8/10 - Last seen: 1 min ago'); |
|
|
addTerminalLine('> Spectre (Solo) - Rating: 6/10 - Last seen: 4 min ago'); |
|
|
addTerminalLine('> Byte (Tech) - Rating: 7/10 - Last seen: 7 min ago'); |
|
|
}, 1000); |
|
|
} |
|
|
else if (cmd === 'clear') { |
|
|
terminalOutput.innerHTML = ''; |
|
|
addTerminalLine('TERMINAL CLEARED', 'neon-text-blue'); |
|
|
} |
|
|
else if (cmd.startsWith('move ')) { |
|
|
const location = cmd.substring(5); |
|
|
addTerminalLine(`ATTEMPTING TO MOVE TO ${location.toUpperCase()}...`, 'neon-text-blue'); |
|
|
setTimeout(() => { |
|
|
addTerminalLine(`ARRIVED AT ${location.toUpperCase()}`, 'neon-text-pink'); |
|
|
|
|
|
}, 1500); |
|
|
} |
|
|
else { |
|
|
addTerminalLine(`ERROR: UNKNOWN COMMAND '${command}'`, 'text-red-400'); |
|
|
addTerminalLine('TYPE "HELP" FOR A LIST OF COMMANDS', 'neon-text-blue'); |
|
|
} |
|
|
|
|
|
|
|
|
const cursor = document.createElement('div'); |
|
|
cursor.className = 'terminal-line blink'; |
|
|
cursor.textContent = '_'; |
|
|
terminalOutput.appendChild(cursor); |
|
|
terminalOutput.scrollTop = terminalOutput.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
const initialCursor = document.createElement('div'); |
|
|
initialCursor.className = 'terminal-line blink'; |
|
|
initialCursor.textContent = '_'; |
|
|
terminalOutput.appendChild(initialCursor); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wizdatcodes/a-cyberpunk-text-based-rpg-mmo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
