mirrors/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2025-06-07 13:53:00 -04:00
Code Issues Activity

Update html/gamehub.ejs

Browse source
This commit is contained in:
ashley 2025-04-26 23:32:25 +00:00
parent efe0f7d758
commit 777e8522b2
1 changed files with 80 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

140
html/gamehub.ejs
View file

@ -56,13 +56,14 @@
<title>Poke! Games Hub</title> <title>Poke! Games Hub</title>
<style> <style>
:root { :root {
--bg-start: #2c3e50; --bg-start: #1a1a2e;
--bg-end: #34495e; --bg-end: #16213e;
--accent: #ffabcc; --accent: #e94560;
--font-main: 'PokeTube Flex', sans-serif; --font-main: 'PokeTube Flex', sans-serif;
--card-bg: rgba(255,255,255,0.1); --card-bg: rgba(255,255,255,0.1);
--card-border: rgba(255,255,255,0.6); --card-border: rgba(255,255,255,0.5);
--card-hover: rgba(255,255,255,0.3); --card-hover: rgba(255,255,255,0.2);
--shadow: rgba(0,0,0,0.4);
} }
* { box-sizing: border-box; margin:0; padding:0; } * { box-sizing: border-box; margin:0; padding:0; }
body { body {
@ -76,114 +77,132 @@
src: url("https://p.poketube.fun/.../robotoflex.ttf"); src: url("https://p.poketube.fun/.../robotoflex.ttf");
font-display: swap; font-display: swap;
} }
/* Animated emoji background */ /* Emoji particle background */
.emoji-bg { .emoji-bg {
position: fixed; position: fixed; top:0; left:0;
top: 0; left: 0; width:100%; height:100%;
width: 100%; height: 100%; pointer-events:none;
pointer-events: none; z-index:0;
display: flex; display:flex; flex-wrap: wrap; align-content:start;
flex-wrap: wrap; font-size:2rem;
align-content: start;
font-size: 2rem;
} }
.emoji-bg span { .emoji-bg span {
margin: 0.5rem; opacity:0.1;
opacity: 0.15; margin:0.3rem;
animation: float 8s ease-in-out infinite alternate; animation: float var(--dur) ease-in-out infinite alternate;
} }
.emoji-bg span:nth-child(odd) { --dur:7s; }
.emoji-bg span:nth-child(even){ --dur:10s; }
@keyframes float { @keyframes float {
to { transform: translateY(-20px) rotate(10deg); } to { transform: translateY(-25px) rotate(15deg); }
} }
/* Main content wrapper */ /* Main container */
.wrapper { .wrapper {
position: relative; position: relative; z-index:1;
z-index: 1; max-width: 1000px; margin: 3rem auto;
max-width: 1000px;
margin: 2rem auto;
padding: 2rem; padding: 2rem;
background: var(--card-bg); background: var(--card-bg);
border-radius: 15px;
border: 2px solid var(--card-border); border: 2px solid var(--card-border);
box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-radius: 20px;
backdrop-filter: blur(10px); box-shadow: 0 8px 32px var(--shadow);
backdrop-filter: blur(12px);
animation: fadeIn 1s ease forwards;
opacity:0;
} }
@keyframes fadeIn { to { opacity:1; } }
h1 { h1 {
font-weight: 900; font-size: 3.5rem;
font-stretch: ultra-expanded;
font-style: italic;
color: var(--accent);
text-align: center; text-align: center;
font-size: 3rem; margin-bottom: 2rem;
margin-bottom: 1.5rem; background: linear-gradient(90deg, #ff2e63, #08d9d6);
text-shadow: 2px 2px 8px rgba(0,0,0,0.7); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.game-container { .game-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem; gap: 1.5rem;
} }
.game { .game {
background: rgba(255,255,255,0.2); position: relative;
background: var(--card-bg);
border: 2px solid var(--card-border); border: 2px solid var(--card-border);
border-radius: 12px; border-radius: 16px;
text-decoration: none; padding: 1.5rem;
color: #fff;
padding: 1.5rem 1rem;
text-align: center; text-align: center;
transition: transform 0.2s, background 0.3s; color: #fff;
text-decoration: none;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.game::before {
content: '';
position: absolute; top:0; left:0; width:100%; height:100%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 70%);
opacity:0; transition: opacity 0.3s;
} }
.game:hover { .game:hover {
transform: translateY(-8px) rotate(-1deg);
box-shadow: 0 12px 48px var(--shadow);
background: var(--card-hover); background: var(--card-hover);
transform: scale(1.05);
} }
.game:hover::before {
opacity:1;
}
.game .icon {
font-size: 3rem;
margin-bottom: 0.5rem;
animation: popIn 0.5s ease forwards;
opacity:0;
}
@keyframes popIn { to { opacity:1; transform: scale(1); } }
.game h2 { .game h2 {
margin-bottom: 0.75rem; font-size: 1.4rem;
font-size: 1.5rem; margin-bottom: 0.3rem;
text-shadow: 1px 1px 4px rgba(0,0,0,0.7); text-shadow: 1px 1px 4px var(--shadow);
} }
/* Hide canvas and boards until active */ /* Hide unselected game UIs */
canvas, .board { display: none; } canvas, .board { display:none; }
</style> </style>
</head> </head>
<body> <body>
<div class="emoji-bg"> <div class="emoji-bg">
<span>🎮</span><span>🕹️</span><span>👾</span><span>🎧</span><span>🖥️</span> <span>🎮</span><span>🕹️</span><span>👾</span><span>🎧</span><span>🖥️</span>
<span>🎲</span><span>🏆</span><span>🎯</span><span>🔥</span><span>💥</span> <span>🎲</span><span>🏆</span><span>🎯</span><span>🔥</span><span>💥</span>
<span>🧩</span><span>🎮</span><span>🕹️</span><span>👾</span><span>🎧</span> <span>🧩</span><span>⭐</span><span>⚔️</span><span>🛡️</span><span>🚀</span>
<span>🖥️</span><span>🎲</span><span>🏆</span><span>🎯</span><span>🔥</span> <span>🧩</span><span>⭐</span><span>⚔️</span><span>🛡️</span><span>🚀</span>
<span>💥</span><span>🧩</span><span>🎮</span><span>🕹️</span><span>👾</span> <span>🎉</span><span>🌟</span><span>🎯</span><span>⚡</span><span>💣</span>
<span>🎧</span><span>🖥️</span><span>🎲</span><span>🏆</span><span>🎯</span> <span>🧩</span><span>⭐</span><span>⚔️</span><span>🛡️</span><span>🚀</span>
<span>🧩</span><span>⭐</span><span>⚔️</span><span>🛡️</span><span>🚀</span>
<span>🎉</span><span>🌟</span><span>🎯</span><span>⚡</span><span>💣</span>
</div> </div>
<!-- main hub -->
<div class="wrapper"> <div class="wrapper">
<h1>Poke! Games Hub</h1> <h1>Poke! Games Hub</h1>
<div class="game-container"> <div class="game-container">
<a href="?game=snake" class="game"> <a href="?game=snake" class="game">
<div class="icon">🐍</div>
<h2>Snake</h2> <h2>Snake</h2>
<canvas id="snakeCanvas"></canvas>
</a> </a>
<a href="?game=tic-tac-toe" class="game"> <a href="?game=tic-tac-toe" class="game">
<div class="icon">❌⭕</div>
<h2>Tic-Tac-Toe</h2> <h2>Tic-Tac-Toe</h2>
<div id="message"></div>
<div class="board" id="board"></div>
</a> </a>
<a href="?game=sudoku" class="game"> <a href="?game=sudoku" class="game">
<div class="icon">🧮</div>
<h2>Sudoku</h2> <h2>Sudoku</h2>
<div class="board" id="sudokuBoard"></div>
</a> </a>
<a href="?game=pong" class="game"> <a href="?game=pong" class="game">
<div class="icon">🏓</div>
<h2>Ping-Pong</h2> <h2>Ping-Pong</h2>
<canvas id="pongCanvas"></canvas>
</a> </a>
<a href="?game=minesweeper" class="game"> <a href="?game=minesweeper" class="game">
<div class="icon">💣</div>
<h2>Minesweeper</h2> <h2>Minesweeper</h2>
<div class="board" id="minesweeperBoard"></div>
</a> </a>
<a href="?game=breakout" class="game"> <a href="?game=breakout" class="game">
<div class="icon">🧱</div>
<h2>Breakout</h2> <h2>Breakout</h2>
<canvas id="breakoutCanvas"></canvas>
</a> </a>
</div> </div>
</div> </div>
@ -195,6 +214,7 @@
<% if (game === "snake") { %> <% if (game === "snake") { %>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">