🎮 HTML GAME CODING HUB 💻🔥

// Wall collision
if (
head.x < 0 ||
head.x >= grid ||
head.y < 0 ||
head.y >= grid
) {
gameOver();
return;
}

// Self collision
if (
snake.some(part =>
part.x === head.x &&
part.y === head.y
)
) {
gameOver();
return;
}

snake.unshift(head);

// Food
if (
head.x === food.x &&
head.y === food.y
) {

score++;

scoreDisplay.textContent = score;

if (score > best) {
best = score;
bestDisplay.textContent = best;
localStorage.setItem("snakeBest", best);
}

food = createFood();

} else {

snake.pop();

}

draw();
}

function draw() {

ctx.fillStyle = "#050912";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Grid
ctx.strokeStyle = "#14213d";
ctx.lineWidth = 1;

for (let i = 0; i <= grid; i++) {

ctx.beginPath();
ctx.moveTo(i * cell, 0);
ctx.lineTo(i * cell, canvas.height);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0, i * cell);
ctx.lineTo(canvas.width, i * cell);
ctx.stroke();
}

// Food
ctx.font = ${cell * 0.8}px Arial;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(
"🍎",
food.x * cell + cell / 2,
food.y * cell + cell / 2
);

// Snake
snake.forEach((part, index) => {

ctx.fillStyle =
index === 0 ? "#00eaff" : "#18b878";

ctx.beginPath();

ctx.roundRect(
part.x * cell + 2,
part.y * cell + 2,
cell - 4,
cell - 4,
5
);

ctx.fill();
});
}

function gameOver() {

clearInterval(gameTimer);

gameRunning = false;

message.textContent =
"💥 Game Over! Score: " + score;

startBtn.textContent = "🚀 Play Again";

draw();
}

function changeDirection(newDirection) {

if (!gameRunning) return;

if (
newDirection === "up" &&
direction !== "down"
) {
nextDirection = "up";
}

if (
newDirection === "down" &&
direction !== "up"
) {
nextDirection = "down";
}

if (
newDirection === "left" &&
direction !== "right"
) {
nextDirection = "left";
}

if (
newDirection === "right" &&
direction !== "left"
) {
nextDirection = "right";
}
}

// Keyboard controls
document.addEventListener("keydown", event => {

if (event.key === "ArrowUp")
changeDirection("up");

if (event.key === "ArrowDown")
changeDirection("down");

if (event.key === "ArrowLeft")
changeDirection("left");

if (event.key === "ArrowRight")
changeDirection("right");
});

startBtn.addEventListener("click", startGame);

// Initial screen
snake = [
{ x: 9, y: 9 },
{ x: 8, y: 9 },
{ x: 7, y: 9 }
];

food = createFood();

draw();
</script>

</body>
</html>

4 views16:27

5 views16:27

🎮 HTML GAME CODING HUB 💻🔥

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Shooter</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: #030712;
color: white;
}

.game {
width: 94%;
max-width: 430px;
padding: 20px;
text-align: center;
border-radius: 25px;
background: #0b1224;
box-shadow: 0 0 35px #00eaff55;
}

h1 {
margin: 0 0 12px;
color: #00eaff;
}

.stats {
display: flex;
justify-content: space-around;
margin-bottom: 12px;
padding: 10px;
border-radius: 12px;
background: #151f38;
}

.stats b {
color: #00eaff;
}

canvas {
width: 100%;
max-width: 360px;
height: auto;
display: block;
margin: auto;
background: #02050d;
border: 2px solid #00eaff;
border-radius: 15px;
touch-action: none;
}

.message {
min-height: 24px;
margin: 12px 0;
color: #ddd;
}

button {
border: 0;
border-radius: 20px;
padding: 11px 20px;
margin: 4px;
background: #00eaff;
color: #061018;
font-weight: bold;
cursor: pointer;
}

.controls {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 8px;
}

.controls button {
width: 65px;
height: 45px;
padding: 0;
font-size: 20px;
}

.small {
font-size: 12px;
color: #888;
}
</style>
</head>

<body>

<div class="game">

<h1>🚀 SPACE SHOOTER</h1>

<div class="stats">
<span>Score: <b id="score">0</b></span>
<span>Lives: <b id="lives">3</b></span>
<span>Best: <b id="best">0</b></span>
</div>

<canvas id="gameCanvas" width="360" height="520"></canvas>

<div id="message" class="message">
Defeat the enemy ships!
</div>

<button id="startBtn">🚀 Start Game</button>

<div class="controls">
<button onclick="moveLeft()">⬅️</button>
<button onclick="shoot()">🔥</button>
<button onclick="moveRight()">➡️</button>
</div>

<p class="small">
Keyboard: ← → to move • SPACE to shoot
</p>

</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const scoreEl = document.getElementById("score");
const livesEl = document.getElementById("lives");
const bestEl = document.getElementById("best");
const messageEl = document.getElementById("message");
const startBtn = document.getElementById("startBtn");

let player;
let bullets = [];
let enemies = [];
let stars = [];

let score = 0;
let lives = 3;
let best = Number(localStorage.getItem("spaceBest")) || 0;

let running = false;
let animationId;
let enemyTimer = 0;
let shootCooldown = 0;

bestEl.textContent = best;

function createStars() {
stars = [];

for (let i = 0; i < 60; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
speed: 0.5 + Math.random() * 1.5,
size: 1 + Math.random() * 2
});
}
}

function startGame() {
cancelAnimationFrame(animationId);

score = 0;
lives = 3;

scoreEl.textContent = score;
livesEl.textContent = lives;

player = {
x: canvas.width / 2 - 18,
y: canvas.height - 60,
width: 36,
height: 28,
speed: 6
};

bullets = [];
enemies = [];

enemyTimer = 0;
shootCooldown = 0;

createStars();

running = true;

messageEl.textContent =
"🔥 Destroy the enemy ships!";

startBtn.textContent = "🔄 Restart";

gameLoop();
}

function moveLeft() {
if (!running) return;

player.x -= player.speed;

if (player.x < 0) {
player.x = 0;
}
}

function moveRight() {
if (!running) return;

player.x += player.speed;

if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
}

function shoot() {
if (!running || shootCooldown > 0) return;

bullets.push({
x: player.x + player.width / 2 - 2,
y: player.y,
width: 4,
height: 14,
speed: 8
});

shootCooldown = 10;
}

function createEnemy() {
const size = 30;

5 views15:49

🎮 HTML GAME CODING HUB 💻🔥

enemies.push({
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: 1.5 + Math.random() * 1.5
});
}

function collision(a, b) {
return (
a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y
);
}

function update() {

// Stars
stars.forEach(star => {
star.y += star.speed;

if (star.y > canvas.height) {
star.y = 0;
star.x = Math.random() * canvas.width;
}
});

// Cooldown
if (shootCooldown > 0) {
shootCooldown--;
}

// Bullets
bullets.forEach(bullet => {
bullet.y -= bullet.speed;
});

bullets = bullets.filter(
bullet => bullet.y + bullet.height > 0
);

// Enemies
enemyTimer++;

if (enemyTimer > 45) {
createEnemy();
enemyTimer = 0;
}

enemies.forEach(enemy => {
enemy.y += enemy.speed;
});

// Bullet vs enemy
for (let i = enemies.length - 1; i >= 0; i--) {

let destroyed = false;

for (let j = bullets.length - 1; j >= 0; j--) {

if (collision(enemies[i], bullets[j])) {

enemies.splice(i, 1);
bullets.splice(j, 1);

score += 10;

scoreEl.textContent = score;

if (score > best) {
best = score;
bestEl.textContent = best;
localStorage.setItem(
"spaceBest",
best
);
}

destroyed = true;
break;
}
}

if (destroyed) continue;
}

// Enemy reaches bottom
for (let i = enemies.length - 1; i >= 0; i--) {

if (enemies[i].y > canvas.height) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}

// Enemy hits player
for (let i = enemies.length - 1; i >= 0; i--) {

if (collision(enemies[i], player)) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}
}

function draw() {

ctx.fillStyle = "#02050d";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Stars
stars.forEach(star => {
ctx.fillStyle = "white";
ctx.fillRect(
star.x,
star.y,
star.size,
star.size
);
});

// Player
ctx.fillStyle = "#00eaff";

ctx.beginPath();
ctx.moveTo(
player.x + player.width / 2,
player.y
);
ctx.lineTo(
player.x,
player.y + player.height
);
ctx.lineTo(
player.x + player.width,
player.y + player.height
);
ctx.closePath();
ctx.fill();

// Bullets
bullets.forEach(bullet => {

ctx.fillStyle = "#ffe600";

ctx.fillRect(
bullet.x,
bullet.y,
bullet.width,
bullet.height
);
});

// Enemies
enemies.forEach(enemy => {

ctx.fillStyle = "#ff315c";

ctx.beginPath();
ctx.moveTo(
enemy.x + enemy.width / 2,
enemy.y + enemy.height
);
ctx.lineTo(
enemy.x,
enemy.y
);
ctx.lineTo(
enemy.x + enemy.width,
enemy.y
);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.fillRect(
enemy.x + 8,
enemy.y + 9,
5,
5
);

ctx.fillRect(
enemy.x + 17,
enemy.y + 9,
5,
5
);
});
}

function gameLoop() {

if (!running) return;

update();
draw();

animationId =
requestAnimationFrame(gameLoop);
}

function gameOver() {

running = false;

cancelAnimationFrame(animationId);

messageEl.textContent =
"💥 GAME OVER! Final Score: " + score;

startBtn.textContent = "🚀 Play Again";

draw();
}

startBtn.addEventListener(
"click",
startGame
);

// Keyboard controls
document.addEventListener(
"keydown",
event => {

if (event.key === "ArrowLeft") {
moveLeft();
}

if (event.key === "ArrowRight") {
moveRight();
}

if (event.code === "Space") {
event.preventDefault();
shoot();
}
}
);

3 views15:49

🎮 HTML GAME CODING HUB 💻🔥

// Initial screen
player = {
x: canvas.width / 2 - 18,
y: canvas.height - 60,
width: 36,
height: 28,
speed: 6
};

createStars();
draw();
</script>

</body>
</html>

3 views15:49

🎮 HTML GAME CODING HUB 💻🔥

🚀🔥 DAY 6 — SPACE SHOOTER! 👾

The ultimate space battle is here! 🌌

🚀 Control your spaceship
🔥 Shoot enemy ships
🏆 Increase your score
❤️ 3 Lives
💾 Best Score Saved
📱 Mobile Controls
⌨️ Keyboard Controls

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

🏆 CHALLENGE:
How high can you score before losing all 3 lives? 😈

💬 Apna highest score batao!

❤️ Like | 🔄 Share | 📢 Forward

⚡ CodeForge Gaming Community

#Day6 #SpaceShooter #HTML #CSS #JavaScript #GameCoding

4 views15:50

🎮 HTML GAME CODING HUB 💻🔥

❤1

3 views15:51

🎮 HTML GAME CODING HUB 💻🔥

🚨🔥 BIG UPDATE — CODE RUNNER 2.0 IS LIVE! 🔥🚨

Ab coding karna aur bhi EASY! 😎💻

🎮 Game banao
🌐 Website banao
⚡ HTML + CSS + JS code run karo
⛶ Full Screen me chalao
💾 Project Save karo
📂 Project Load karo
⬇️ Apna project Download karo

Sab kuch ek hi jagah! 🚀

👇 TRY NOW — FREE CODE RUNNER 👇

🔗 https://anadverma956989936-lab.github.io/Code2Game-/

💡 Code Paste Karo → RUN Dabao → Apna Project Live Dekho! 🔥

👨‍💻 Beginners ke liye bhi Easy!

❤️ Like/React karo
📤 Apne coding friends ke saath Share karo
🔥 Aur aise hi HTML Games & Projects ke liye Channel Join rakho!

#Coding #HTML #CSS #JavaScript #GameDevelopment #WebDevelopment #CodeRunner #HTMLGames #CodingProjects

❤1

3 views18:32

🎮 HTML GAME CODING HUB 💻🔥

4 views18:35

🎮 HTML GAME CODING HUB 💻🔥

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Mini Game</title>

<style>
*{
box-sizing:border-box;
}

body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial,sans-serif;
background:#050816;
color:white;
}

.game{
width:94%;
max-width:450px;
padding:22px;
text-align:center;
border-radius:25px;
background:#10182d;
box-shadow:0 0 35px #00eaff55;
}

h1{
margin:0 0 5px;
color:#00eaff;
}

.subtitle{
color:#aaa;
margin-top:5px;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:20px 0;
}

.stat{
padding:10px 5px;
border-radius:12px;
background:#192541;
font-size:13px;
}

.stat b{
display:block;
margin-top:5px;
color:#00eaff;
font-size:21px;
}

#arena{
position:relative;
width:100%;
height:360px;
overflow:hidden;
border:2px solid #00eaff;
border-radius:18px;
background:
radial-gradient(circle at 20% 20%,#12315c 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#12315c 0 2px,transparent 3px),
#050a18;
}

#target{
position:absolute;
width:65px;
height:65px;
display:none;
justify-content:center;
align-items:center;
border:0;
border-radius:50%;
background:#ff315c;
color:white;
font-size:25px;
cursor:pointer;
box-shadow:0 0 25px #ff315c88;
animation:pulse .7s infinite alternate;
}

@keyframes pulse{
from{transform:scale(.9);}
to{transform:scale(1.08);}
}

.message{
min-height:25px;
margin:14px 0;
color:#ddd;
}

button.start{
padding:12px 28px;
border:0;
border-radius:25px;
background:#00eaff;
color:#061018;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

button.start:disabled{
opacity:.5;
cursor:not-allowed;
}

.small{
color:#777;
font-size:12px;
}
</style>
</head>

<body>

<div class="game">

<h1>🏆 ULTIMATE MINI GAME</h1>

<p class="subtitle">
Hit the target before time runs out!
</p>

<div class="stats">

<div class="stat">
SCORE
<b id="score">0</b>
</div>

<div class="stat">
TIME
<b id="time">30</b>
</div>

<div class="stat">
BEST
<b id="best">0</b>
</div>

</div>

<div id="arena">

<button id="target">
🎯
</button>

</div>

<div id="message" class="message">
Ready for the ultimate challenge?
</div>

<button id="startBtn" class="start">
🚀 START GAME
</button>

<p class="small">
Hit 🎯 as many times as possible in 30 seconds!
</p>

</div>

<script>

const arena =
document.getElementById("arena");

const target =
document.getElementById("target");

const scoreEl =
document.getElementById("score");

const timeEl =
document.getElementById("time");

const bestEl =
document.getElementById("best");

const messageEl =
document.getElementById("message");

const startBtn =
document.getElementById("startBtn");

let score = 0;
let time = 30;
let playing = false;
let timer = null;

let best =
Number(localStorage.getItem("ultimateBest")) || 0;

bestEl.textContent = best;

function moveTarget(){

const maxX =
arena.clientWidth - target.offsetWidth;

const maxY =
arena.clientHeight - target.offsetHeight;

const x =
Math.random() * maxX;

const y =
Math.random() * maxY;

target.style.left = x + "px";
target.style.top = y + "px";
}

function startGame(){

clearInterval(timer);

score = 0;
time = 30;
playing = true;

scoreEl.textContent = score;
timeEl.textContent = time;

target.style.display = "flex";

startBtn.disabled = true;

messageEl.textContent =
"🔥 GO! Hit the target!";

moveTarget();

timer = setInterval(() => {

time--;

timeEl.textContent = time;

if(time <= 0){

endGame();

}

},1000);

}

target.addEventListener("click", () => {

if(!playing) return;

score++;

scoreEl.textContent = score;

moveTarget();

});

function endGame(){

clearInterval(timer);

2 views15:02

🎮 HTML GAME CODING HUB 💻🔥

playing = false;

target.style.display = "none";

startBtn.disabled = false;

startBtn.textContent =
"🔄 PLAY AGAIN";

if(score > best){

best = score;

localStorage.setItem(
"ultimateBest",
best
);

bestEl.textContent = best;

messageEl.textContent =
"🏆 NEW HIGH SCORE! " +
score +
" hits!";

}else{

messageEl.textContent =
"🎮 TIME UP! Your score: " +
score;

}

}

startBtn.addEventListener(
"click",
startGame
);

</script>

</body>
</html>

2 views15:02

🎮 HTML GAME CODING HUB 💻🔥

🏆🔥 DAY 7 — ULTIMATE MINI GAME! 🎮

THE FINAL CHALLENGE IS HERE! 🚀

🎯 Hit the target
⏱️ 30 Second Challenge
🏆 Beat your HIGH SCORE
📱 Mobile Friendly
⚡ Fast & Addictive Gameplay
💻 HTML + CSS + JavaScript

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-/]

🔥 FINAL CHALLENGE:
How many targets can YOU hit in 30 seconds? 😈

💬 Apna highest score batao!

❤️ Like | 🔄 Share | 📢 Forward

⚡ CodeForge Gaming Community

#Day7 #UltimateGame #HTML #CSS #JavaScript #GameCoding

❤1

3 views15:02

🎮 HTML GAME CODING HUB 💻🔥

❤1

3 views15:03

🎮 HTML GAME CODING HUB 💻🔥

🎉🔥 7-DAY HTML GAME CODING SERIES — COMPLETED! 🏆

7 Days ✅
7 Games 🎮
Hundreds of lines of code 💻
And now… WE LEVEL UP! 🚀

🧠 From simple games to advanced projects!

🔥 NEXT SERIES: ADVANCED HTML GAMES
🏎️ Car Racing
🧱 Brick Breaker
🏃 Endless Runner
👾 Alien Attack
🏆 Mega Game
Stay connected… The next level starts soon! ⚡

❤️ Like | 🔄 Share | 📢 Forward
CodeForge Gaming Community

#HTML #JavaScript #GameDevelopment #Coding #WebGames

❤1

4 views15:01

🎮 HTML GAME CODING HUB 💻🔥

🎮 HTML GAME CODING HUB 💻🔥 pinned «🚀🔥 NEW HTML PROJECT DROPPING! 🔥🚀 Aaj ka project sirf HTML code nahi hai... Ye ek 🔥 INTERACTIVE WEB GAME hai! 🎮 💻 HTML + CSS + JavaScript ⚡ Mobile Friendly 🎨 Attractive UI 🧠 Beginner Friendly 📦 Full Source Code FREE 👀 Pehle DEMO dekho... 👇 Code next message…»

16:57

🎮 HTML GAME CODING HUB 💻🔥

🇮🇳✨ THIS INDEPENDENCE DAY, DON'T JUST CELEBRATE… EXPERIENCE IT. ✨🇮🇳

🚨 FREEDOM FEST 2047 IS LIVE! 🚨

🎙️ Apni VOICE share karo
✍️ Apni STORY likho
📸 Apni MEMORIES upload karo
❤️ Likes collect karo
🏆 TOP CREATOR bano
🎁 Aur jeeto SPECIAL REWARDS!

👀 But wait…
Ye koi normal website nahi hai.

🔥 Ek poora Independence Day experience tumhara wait kar raha hai.

👇 OPEN IT NOW & SEE WHAT'S WAITING FOR YOU 👇

🔗 [https://anadverma956989936-lab.github.io/Freedom-fest-/]

⚡ OPEN • EXPLORE • PARTICIPATE • WIN

🇮🇳 YOUR VOICE • YOUR STORY • YOUR INDIA 🇮🇳

JAI HIND ❤️🇮🇳

❤1

2 views07:31

🎮 HTML GAME CODING HUB 💻🔥

❤1

2 views07:31

🎮 HTML GAME CODING HUB 💻🔥

❤1

2 views07:31

🎮 HTML GAME CODING HUB 💻🔥

🔥 ANAND HUB — INDIA 2047 SECRET MISSION 🇮🇳

🛰️ Code Copy Karo → Run Karo → Mission Start Karo!

⚡ Login karo
🧠 Questions solve karo
🔐 Secret levels unlock karo
🎯 Missions complete karo
🏆 Apna final rank discover karo

👀 Normal code nahi hai… ek baar run karke dekho!

👇 HOW TO PLAY:
📋 Code Copy Karo
▶️ Run/Preview Karo
🚀 Mission Start Karo

ANAND HUB × INDIA 2047 🇮🇳🔥

⚠️ Challenge: Kya tum final level tak pahunch paoge? 😈

❤1

2 viewsedited 09:00

🎮 HTML GAME CODING HUB 💻🔥

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#030712">
<title>ANAND HUB — INDIA 2047</title>

<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#02050b;color:#fff}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{
--orange:#ff9933;
--green:#19b83f;
--cyan:#48e8ff;
--blue:#3478ff;
--red:#ff4260;
--glass:rgba(255,255,255,.055);
--line:rgba(255,255,255,.13);
}

#app{
min-height:100vh;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% -10%,rgba(255,153,51,.22),transparent 30%),
radial-gradient(circle at 0 70%,rgba(19,136,8,.15),transparent 28%),
radial-gradient(circle at 100% 45%,rgba(72,232,255,.12),transparent 28%),
linear-gradient(180deg,#02050b,#050b14 50%,#02050a);
}

canvas#space{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}

.grid{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:.15;
background-image:
linear-gradient(rgba(72,232,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(72,232,255,.12) 1px,transparent 1px);
background-size:45px 45px;
transform:perspective(500px) rotateX(55deg) scale(1.8) translateY(25%);
transform-origin:center bottom;
}

.screen{
position:relative;
z-index:2;
min-height:100vh;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}

.screen.active{display:flex}

.panel{
width:min(94%,760px);
border:1px solid var(--line);
border-radius:28px;
background:rgba(5,12,22,.78);
backdrop-filter:blur(18px);
box-shadow:0 30px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
}

.login{
padding:30px 20px;
text-align:center;
}

.logo{
font-size:13px;
font-weight:1000;
letter-spacing:4px;
color:var(--cyan);
}

.tricolor{
width:130px;
height:4px;
margin:15px auto;
display:flex;
border-radius:10px;
overflow:hidden;
}
.tricolor i{flex:1}
.tricolor i:nth-child(1){background:var(--orange)}
.tricolor i:nth-child(2){background:#fff}
.tricolor i:nth-child(3){background:var(--green)}

.login h1{
margin:12px 0 4px;
font-size:clamp(42px,12vw,78px);
line-height:.9;
letter-spacing:-4px;
background:linear-gradient(#ffb15b 15%,#fff 48%,#4bc75a 85%);
-webkit-background-clip:text;
color:transparent;
}

.sub{
color:#7e91a7;
font-size:9px;
letter-spacing:3px;
line-height:1.8;
}

.terminal{
margin:24px auto 16px;
padding:13px;
width:min(100%,500px);
text-align:left;
border:1px solid rgba(72,232,255,.18);
border-radius:14px;
background:#01050a;
color:#63eaff;
font-family:monospace;
font-size:9px;
line-height:1.8;
min-height:100px;
}

.input{
width:100%;
padding:14px;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
background:#02070d;
color:#fff;
outline:none;
margin-top:8px;
}

.input:focus{border-color:var(--cyan)}

.btn{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:13px;
padding:14px;
margin-top:9px;
color:#fff;
background:rgba(255,255,255,.06);
font-weight:1000;
transition:.2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
color:#041016;
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
}
.btn.cyan{
background:linear-gradient(135deg,#0b6c86,#163d83);
border-color:#43ddff66;
}

.boot{
padding:28px 20px;
text-align:center;
}

.boot h2{
font-size:27px;
letter-spacing:2px;
}

.loader{
height:6px;
border-radius:10px;
background:#101b27;
overflow:hidden;
margin:20px 0 10px;
}

.loader span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),#fff,var(--green),var(--cyan));
animation:load 3s linear forwards;
}

@keyframes load{to{width:100%}}

.bootLog{
min-height:100px;
color:#73eaff;
font:9px monospace;
line-height:1.8;
text-align:left;
}

#command{
width:min(96%,1000px);
margin:auto;
padding:18px 0 40px;
}

2 views09:04

About

Blog

Apps

Platform