Home
<title>New Tab</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
:root {
--background: hsl(210, 30%, 8%);
--foreground: hsl(200, 20%, 95%);
--muted-foreground: hsl(200, 10%, 60%);
--accent: hsl(210, 80%, 70%);
--primary: hsl(220, 100%, 60%);
--font-mono: 'Orbitron', 'Menlo', monospace;
--font-sans: 'Rajdhani', 'Open Sans', sans-serif;
}
body {
font-family: var(--font-sans);
background-color: var(--background);
color: var(--foreground);
overflow-x: hidden;
min-height: 100vh;
}
/* =================== STARFIELD =================== */
.starfield {position: fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none;}
.star {position:absolute; background:white; border-radius:50%; animation:twinkle 3s infinite;}
.star:nth-child(odd){animation-delay:1.5s;}
.star:nth-child(3n){animation-delay:0.5s;}
@keyframes twinkle{0%,100%{opacity:0.3; transform:scale(0.8);}50%{opacity:1; transform:scale(1.2);}}
.gradient-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at center, rgba(0, 128, 255, 0.1) 0%, transparent 70%); pointer-events:none; z-index:2;}
/* =================== CONTAINER =================== */
.page-content {position:relative; z-index:10; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6rem 2rem 5rem; box-sizing:border-box;}
.container {max-width:60rem; width:100%; border-radius:16px; padding:2px; position:relative; z-index:1; overflow:hidden; background:transparent; display:flex; flex-direction:column; margin-bottom:2rem;}
.container::before,.container::after {content:''; position:absolute; z-index:-2; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(transparent 0% 85%, var(--accent) 98%, var(--primary) 100%); animation: rotate 4s linear infinite;}
.container::after {animation-delay:-2s;}
@keyframes rotate {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
.container-inner {width:100%; border-radius:15px; padding:3rem 2rem 2rem; display:flex; flex-direction:column; align-items:center; background-color:var(--background); background-image: linear-gradient(rgba(0 128 255 / 0.05), rgba(0 128 255 / 0.05)); border:2px solid rgba(0,128,255,0.3); box-shadow:0 0 20px rgba(0,128,255,0.4), inset 0 0 10px rgba(0,128,255,0.2); box-sizing:border-box;}
/* =================== NEON TITLE =================== */
.neon-title {
font-family: var(--font-mono);
font-weight: 900;
text-transform: uppercase;
letter-spacing:0.2em;
font-size: clamp(3rem, 15vw, 7rem);
text-align:center;
margin-bottom:0.5rem;
color: #fff;
text-shadow:
0 0 20px #5f00ff,
0 0 40px #5f00ff,
0 0 60px #5f00ff,
0 0 80px #5f00ff,
0 0 100px #5f00ff,
0 0 120px #5f00ff,
0 0 150px #5f00ff,
0 0 200px #5f00ff;
animation: neonShift 3s infinite alternate;
}
@keyframes neonShift {
0% { text-shadow:0 0 20px #5f00ff,0 0 40px #5f00ff,0 0 60px #5f00ff,0 0 80px #5f00ff,0 0 100px #5f00ff,0 0 120px #5f00ff,0 0 150px #5f00ff,0 0 200px #5f00ff; }
50% { text-shadow:0 0 20px #00f,0 0 40px #00f,0 0 60px #00f,0 0 80px #00f,0 0 100px #00f,0 0 120px #00f,0 0 150px #00f,0 0 200px #00f; }
100% { text-shadow:0 0 20px #a100ff,0 0 40px #a100ff,0 0 60px #a100ff,0 0 80px #a100ff,0 0 100px #a100ff,0 0 120px #a100ff,0 0 150px #a100ff,0 0 200px #a100ff; }
}
.subtitle {color:var(--muted-foreground); font-size:clamp(1rem,3vw,1.5rem); font-family:var(--font-mono); opacity:0.8; text-align:center; margin-bottom:3rem;}
/* =================== MENU BAR (Credits page style) =================== */
.main-nav {
font-family: var(--font-sans);
background-color: rgba(10,15,50,0.85);
backdrop-filter: blur(10px);
border-bottom:2px solid rgba(0,128,255,0.3);
box-shadow:0 4px 30px rgba(0,0,0,0.4);
width:100%;
position:fixed;
top:0;
left:0;
z-index:1000;
transition: top 0.5s cubic-bezier(0.25,0.1,0.25,1);
padding:0.5rem 0;
}
.nav-content {display:flex; align-items:center; padding:0 2rem; max-width:1200px; margin:0 auto; flex-wrap:nowrap;}
.nav-logo-title {display:flex; align-items:center; gap:1rem; text-decoration:none; white-space:nowrap;}
.nav-logo-title img{height:40px;}
.nav-logo-title .site-title {font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--foreground); text-shadow:0 0 8px var(--primary); white-space:nowrap;}
.nav-links {list-style:none; margin:0; padding:0; display:flex; gap:0.5rem; margin-left:auto; overflow-x: visible; white-space:nowrap;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links{-ms-overflow-style:none; scrollbar-width:none;}
.nav-links li{position:relative;}
.nav-links a{display:flex; align-items:center; color:var(--muted-foreground); text-decoration:none; padding:0.8rem 1rem; font-size:1rem; font-weight:600; border-radius:8px; transition: all 0.3s ease; white-space:nowrap;}
.nav-links a:hover, .nav-links a.active{color:var(--foreground); background-color:rgba(0,128,255,0.1); text-shadow:0 0 5px var(--primary);}
.nav-links a i:not(.fa-caret-down){margin-right:8px;}
.nav-links a i.fa-caret-down{margin-left:0.3rem;}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: rgba(20,20,70,0.95);
border: 1px solid rgba(0,128,255,0.3);
border-radius: 0 0 8px 8px;
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
z-index: 10000;
padding: 0.5rem 0;
white-space: nowrap;
}
.dropdown:hover .dropdown-content{display:block;}
.nav-toggle-btn {position:fixed; top:1rem; right:2rem; z-index:1001; background: rgba(10,15,50,0.85); border:2px solid var(--muted-foreground); color:var(--muted-foreground); border-radius:8px; width:40px; height:40px; cursor:pointer; font-size:1.2rem; transition:all 0.3s ease;}
.nav-toggle-btn:hover {border-color:var(--primary); color:var(--primary); box-shadow:0 0 10px var(--primary);}
.nav-toggle-btn .arrow-up{display:none;}
.nav-toggle-btn.active .arrow-up{display:inline;}
.nav-toggle-btn.active .arrow-down{display:none;}
/* =================== WIDGETS, TEXTAREA, BUTTONS =================== */
textarea#textInput {width:100%; background: rgba(0,128,255,0.1); border:2px solid rgba(0,128,255,0.3); border-radius:12px; color:#ffffff; font-family:var(--font-mono); font-size:1rem; padding:1rem; resize:none; box-shadow:inset 0 0 10px rgba(0,128,255,0.2); transition:border-color 0.3s ease, box-shadow 0.3s ease; min-height:150px;}
textarea#textInput:hover {border-color:var(--primary); box-shadow:inset 0 0 10px rgba(0,128,255,0.2),0 0 10px var(--primary);}
.all-widgets-wrapper {display:flex; flex-direction:column; gap:2rem; width:100%; margin-top:2rem;}
.widgets-container {display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; width:100%;}
.battery-widget, .datetime-widget, .visits-widget, .daily-widget {flex:1 1 200px; background: rgba(0,128,255,0.1); border:2px solid rgba(0,128,255,0.3); border-radius:12px; padding:1.5rem 2rem; text-align:center; box-shadow:inset 0 0 10px rgba(0,128,255,0.2); min-width:12rem; max-width:22rem; transition:border-color 0.3s ease, box-shadow 0.3s ease; display:flex; flex-direction:column;}
.battery-widget:hover, .datetime-widget:hover, .visits-widget:hover, .daily-widget:hover {border-color:var(--primary); box-shadow:inset 0 0 10px rgba(0,128,255,0.2),0 0 10px var(--primary);}
.battery-widget>div:first-child, .datetime-widget>div:first-child, .visits-widget>div:first-child, .daily-widget>div:first-child {font-family:var(--font-mono); font-weight:700; font-size:1.2rem; margin-bottom:0.75rem; color:var(--primary);}
#batteryPercent {font-size:2rem; font-weight:900;}
#batteryTime {font-size:0.9rem; color:var(--muted-foreground);}
#dateDisplay {font-size:1rem; font-weight:600;}
#timeDisplay {font-size:1.5rem; font-weight:900;}
#daily-textarea {flex-grow:1; background: rgba(255 255 255 / 0.05); border:1px solid rgba(255 255 255 / 0.1); border-radius:6px; color:var(--foreground); font-family:var(--font-mono); font-size:0.9rem; padding:0.5rem; resize:none; min-height:80px;}
.terminal-typing::after {content:'_'; animation: blink-caret .75s step-end infinite;}
.discord-button {position:fixed; bottom:2rem; right:2rem; width:60px; height:60px; border-radius:50%; background-color:var(--background); border:2px solid var(--primary); display:flex; justify-content:center; align-items:center; box-shadow:0 0 15px rgba(0,128,255,0.7), inset 0 0 8px rgba(0,128,255,0.4); cursor:pointer; transition:all 0.3s ease; z-index:1000;}
.discord-button:hover {background-color:var(--background); box-shadow:0 0 25px rgba(0,128,255,0.9), inset 0 0 12px rgba(0,128,255,0.6); transform:scale(1.05);}
.discord-button i {color:var(--primary); font-size:2rem; transition:color 0.3s ease;}
.discord-button:hover i {color:var(--accent);}
.copyright {margin-top:3rem; font-size:0.9rem; color:var(--muted-foreground); text-align:center; position:relative; z-index:2;}
.particle {position: fixed; background-color: var(--primary); border-radius:50%; opacity:1; pointer-events:none; animation:particle-effect 1s forwards; z-index:999;}
@keyframes particle-effect {from{transform:translate(0,0); opacity:1;}to{transform:var(--transform-end); opacity:0;}}
</style>
Alex's Game Hub
<!-- METHODS LINK -->
<li><a href="Alexsgamehub-methods"><i class="fas fa-thumbs-up"></i>Methods</a></li>
<li class="dropdown">
<a href="javascript:void(0)"><i class="fas fa-rocket"></i>Proxies<i class="fas fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="https://alexsgamehub-proxy-info-16942324.codehs.me">Proxies Info</a>
<a href="https://alexsgamehub-proxys-16942330.codehs.me ">Proxies</a>
<a href="https://alexsgamehub-proxydrops-16942331.codehs.me ">Proxy Link Drops</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)"><i class="fas fa-gamepad"></i>Game Sites<i class="fas fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="https://alexsgamehub-gamesites-16942334.codehs.me">Game Sites</a>
<a href="https://alexsgamehub-gamelinks-16942338.codehs.me ">Game Site Link Drops</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)"><i class="fas fa-tools"></i>Tools<i class="fas fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="https://alexsgamehub-dataurlgen-16942347.codehs.me ">Data URL Gen</a>
<a href="https://alexsgamehub-aboutblank-16942353.codehs.me">About:blank tab opener</a>
<a href="https://alexsgamehub-htmlviewer-16942356.codehs.me">HTML viewer</a>
<a href="https://alexsgamehub-translator-16942358.codehs.me">Translator</a>
<a href="https://alexsgamehub-unitconvert-16942359.codehs.me">Unit Converter</a>
<a href="https://alexsgamehub-stopwatch-16942361.codehs.me ">Stopwatch</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)"><i class="fas fa-info-circle"></i>Important<i class="fas fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="https://alexsgamehub-staff-16942364.codehs.me ">Staff</a>
<a href="https://alexsgaminghub-updatelog-16942367.codehs.me">Update Log</a>
<a href="https://alexsgaminghub-partners-16942369.codehs.me">Partners</a>
<a href="https://alexsgaminghub-credits-16942373.codehs.me">Credits</a>
<a href="https://alexsgaminghub-contact-16942375.codehs.me ">Contact Form</a>
</div>
</li>
</ul>
HOME
<textarea id="textInput" rows="7" readonly class="terminal-typing"></textarea>
<div class="all-widgets-wrapper">
<div class="widgets-container">
<div class="battery-widget">
<div>Your Battery</div>
<div id="batteryPercent">%</div>
<div id="batteryTime">Calculating...</div>
</div>
<div class="datetime-widget">
<div>Date & Time</div>
<div id="dateDisplay">--</div>
<div id="timeDisplay">--:--:--</div>
</div>
</div>
<div class="widgets-container">
<div class="daily-widget">
<div>Daily News</div>
<textarea id="daily-textarea" readonly class="terminal-typing"></textarea>
</div>
<div class="visits-widget">
<div>Site Visits</div>
<script type="text/javascript" src="https://www.stat-counter.org/count/j0xb"></script><br>
</div>
</div>
</div>
</div>
© Alex's Game Hub 2025
<script>
document.addEventListener('DOMContentLoaded', function(){
const mainNav = document.getElementById('mainNav');
const navToggle = document.getElementById('navToggle');
navToggle.addEventListener('click',()=>{mainNav.classList.toggle('visible'); navToggle.classList.toggle('active');});
setTimeout(()=>{mainNav.classList.add('visible'); navToggle.classList.add('active');},100);
});
window.addEventListener('load', () => {
createStarfield();
updateBatteryStatus();
updateDateTime();
setInterval(updateDateTime,1000);
initTypewriter('textInput', "Welcome to Alex's Game Hub. If you're looking to suggest games, go to the contact form, I worked really hard on this webpage so please enjoy it :3. Once we reach 500 visits, for one day, ill do anything that you say in contact form :3");
initTypewriter('daily-textarea', "v1.4 out! go check out the new colors and the A.I Chatbot is fixed! - alex");
});
function createStarfield(){
const starfield = document.getElementById('starfield'); if(!starfield) return;
const numberOfStars=150; for(let i=0;i
{document.getElementById('batteryPercent').textContent=`${Math.round(battery.level*100)}%`; let timeText=battery.charging?'Charging':'On Battery'; if(!battery.charging && battery.dischargingTime!==Infinity){const hours=Math.floor(battery.dischargingTime/3600); const mins=Math.floor((battery.dischargingTime%3600)/60); timeText=`Discharging: ${hours>0?hours+'h ':''}${mins}m left`;} document.getElementById('batteryTime').textContent=timeText;}; updateAll(); battery.addEventListener('levelchange',updateAll); battery.addEventListener('chargingchange',updateAll); battery.addEventListener('dischargingtimechange',updateAll);} catch(e){console.error('Battery status failed:',e);}}
function updateDateTime(){const now=new Date(); const options={weekday:'long', year:'numeric', month:'long', day:'numeric'}; document.getElementById('dateDisplay').textContent=now.toLocaleDateString(undefined,options); document.getElementById('timeDisplay').textContent=now.toLocaleTimeString();}
function initTypewriter(id,msg){const el=document.getElementById(id); if(!el)return; let i=0; el.value=''; el.classList.add('terminal-typing'); function type(){if(i