Scribd
Upload
5 views7 pages

idk bruh

This document is an HTML template for a navigation layout featuring a title, timer, date, and battery status display. It includes CSS styles for responsive design and animations, as well as JavaScript for real-time updates of time and battery status. Additionally, it creates a starry background animation using a canvas element.

Uploaded by

etaliscool
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views7 pages

idk bruh

This document is an HTML template for a navigation layout featuring a title, timer, date, and battery status display. It includes CSS styles for responsive design and animations, as well as JavaScript for real-time updates of time and battery status. Additionally, it creates a starry background animation using a canvas element.

Uploaded by

etaliscool
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Navigation Layout</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
background-color: #121212;
color: white;
font-family: 'Roboto', sans-serif;
font-weight: bold;
overflow: hidden;
}

#title {
font-size: 100px;
font-family: 'Poppins', sans-serif;
font-weight: bold;
margin-top: 140px;
z-index: 2;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255,
0.6);
}

#timer {
font-size: 40px;
font-weight: bold;
margin-top: 30px;
z-index: 2;
}

#date {
font-size: 30px;
font-weight: bold;
z-index: 2;
}

#battery-status {
font-size: 35px;
font-weight: bold;
margin-top: 20px;
z-index: 2;
display: flex;
align-items: center;
}
#battery-icon {
width: 60px;
height: 30px;
border: 2px solid white;
border-radius: 5px;
position: relative;
margin-right: 10px;
box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

#battery-icon::after {
content: "";
position: absolute;
top: 25%;
right: -8px;
width: 6px;
height: 50%;
background: white;
border-radius: 2px;
}

#battery-fill {
height: 100%;
border-radius: 3px;
background-color: #00ff00;
transition: width 0.5s ease, background-color 0.5s ease;
}

#battery-status span {
font-size: 20px;
}

.nav-links {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
z-index: 3;
}

.nav-links a {
color: white;
text-decoration: underline;
font-size: 16px;
padding: 6px 12px;
font-weight: bold;
margin: 4px;
background-color: transparent;
border: none;
transition: transform 0.2s ease-in-out;
}
.nav-links a:hover {
color: #aaa;
transform: scale(1.2);
}

.sub-nav-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
z-index: 2;
}

.sub-nav-links a {
color: white;
text-decoration: none;
font-size: 35px;
font-weight: bold;
padding: 15px 30px;
margin: 10px;
background-color: transparent;
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: none;
border: 2px solid rgba(255, 255, 255, 0.4);
}

.sub-nav-links a:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255,
0.6);
}

canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

@media (max-width: 600px) {


#title {
font-size: 80px;
}
#timer {
font-size: 40px;
}
#date {
font-size: 30px;
}
.sub-nav-links a {
font-size: 24px;
}
.nav-links a {
font-size: 14px;
}
}

@keyframes pulse {
0% {
box-shadow: 0 0 5px #00ff00;
}
50% {
box-shadow: 0 0 20px #00ff00;
}
100% {
box-shadow: 0 0 5px #00ff00;
}
}
</style>
</head>
<body>
<canvas id="constellationCanvas"></canvas>

<div class="nav-links">
<a href="https://sites.google.com/view/don-3d/more" target="_blank">More</a>
<a href="https://sites.google.com/view/1st-period-math-class"
target="_blank">Sakura Unblock</a>
<a href="https://sites.google.com/view/don-3d/g" target="_blank">Games</a>
<a href="https://sites.google.com/view/don-3d/movies"
target="_blank">Movies</a>
<a href="https://sites.google.com/view/don-3d/page/proxy-blocked"
target="_blank">Proxy</a>
</div>

<div id="title">planet games 4.0</div>


<div id="timer"></div>
<div id="date"></div>

<div id="battery-status">
<div id="battery-icon">
<div id="battery-fill"></div>
</div>
<span id="battery-text"></span>
</div>

<div class="sub-nav-links">
<a href="https://sites.google.com/view/don-3d/g" target="_blank">Games</a>
<a href="https://sites.google.com/view/don-3d/movies"
target="_blank">Movies</a>
<a href="https://sites.google.com/view/don-3d/page/proxy-blocked"
target="_blank">Proxy</a>
</div>
<script>
function updateDateTime() {
const now = new Date();
const options = { weekday: 'long', month: 'long', day: 'numeric' };
document.getElementById('timer').innerText = now.toLocaleTimeString([],
{ hour: '2-digit', minute: '2-digit' });
document.getElementById('date').innerText = now.toLocaleDateString(undefined,
options);
}

function updateBatteryStatus(battery) {
const batteryFill = document.getElementById('battery-fill');
const batteryText = document.getElementById('battery-text');
const level = (battery.level * 100).toFixed(0);
batteryFill.style.width = level + '%';

if (battery.level < 0.2) {


batteryFill.style.backgroundColor = '#ff4d4d';
} else if (battery.level < 0.5) {
batteryFill.style.backgroundColor = '#ffcc00';
} else {
batteryFill.style.backgroundColor = '#00ff00';
}

if (battery.charging) {
batteryFill.style.animation = "pulse 1s infinite";
batteryText.innerText = `Battery: ${level}% | Charging`;
} else {
batteryFill.style.animation = "none";
batteryText.innerText = `Battery: ${level}%`;
}
}

if (navigator.getBattery) {
navigator.getBattery().then(function(battery) {
updateBatteryStatus(battery);
battery.addEventListener('levelchange', function() {
updateBatteryStatus(battery);
});
battery.addEventListener('chargingchange', function() {
updateBatteryStatus(battery);
});
});
} else {
document.getElementById('battery-text').innerText = "Battery API not
supported";
}

setInterval(updateDateTime, 1000);
updateDateTime();

const canvas = document.getElementById("constellationCanvas");


const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let stars = [];


const numStars = 100;

class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 2 + 1;
this.dx = Math.random() * 0.6 - 0.3;
this.dy = Math.random() * 0.6 - 0.3;
}

draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "white";
ctx.fill();
}

update() {
this.x += this.dx;
this.y += this.dy;
if (this.x < 0 || this.x > canvas.width) this.dx *= -1;
if (this.y < 0 || this.y > canvas.height) this.dy *= -1;
}
}

function createStars() {
for (let i = 0; i < numStars; i++) {
stars.push(new Star());
}
}

function drawLines() {
for (let i = 0; i < stars.length; i++) {
for (let j = i + 1; j < stars.length; j++) {
let dx = stars[i].x - stars[j].x;
let dy = stars[i].y - stars[j].y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
ctx.beginPath();
ctx.moveTo(stars[i].x, stars[i].y);
ctx.lineTo(stars[j].x, stars[j].y);
ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
ctx.stroke();
}
}
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => {
star.update();
star.draw();
});
drawLines();
requestAnimationFrame(animate);
}

createStars();
animate();

window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stars = [];
createStars();
});
</script>
</body>
</html>

You might also like