tyler/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke synced 2025-05-30 02:59:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix stuff stuff

Browse Source
This commit is contained in:
ashley 2025-04-26 23:36:34 +00:00
parent 777e8522b2
commit 3076fb9393
1 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
html/gamehub.ejs
View File

@ -77,28 +77,36 @@
src: url("https://p.poketube.fun/.../robotoflex.ttf"); src: url("https://p.poketube.fun/.../robotoflex.ttf");
font-display: swap; font-display: swap;
} }
/* Emoji particle background */
/* FULL-PAGE EMOJI GRID */
.emoji-bg { .emoji-bg {
position: fixed; top:0; left:0; position: fixed; top: 0; left: 0;
width:100%; height:100%; width: 100vw; height: 100vh;
pointer-events:none; display: grid;
z-index:0; /* make a responsive grid of ~25 columns */
display:flex; flex-wrap: wrap; align-content:start; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
font-size:2rem; grid-auto-rows: 3rem;
pointer-events: none;
z-index: 0;
font-size: 2.5rem;
} }
.emoji-bg span { .emoji-bg span {
opacity:0.1; display: flex;
margin:0.3rem; align-items: center;
justify-content: center;
opacity: 0.08;
animation: float var(--dur) ease-in-out infinite alternate; animation: float var(--dur) ease-in-out infinite alternate;
} }
.emoji-bg span:nth-child(odd) { --dur:7s; } /* randomize durations a bit */
.emoji-bg span:nth-child(even){ --dur:10s; } .emoji-bg span:nth-child(odd) { --dur: 6s; }
.emoji-bg span:nth-child(even) { --dur: 9s; }
@keyframes float { @keyframes float {
to { transform: translateY(-25px) rotate(15deg); } to { transform: translateY(-20px) rotate(15deg); }
} }
/* Main container */ /* Main container */
.wrapper { .wrapper {
position: relative; z-index:1; position: relative; z-index: 1;
max-width: 1000px; margin: 3rem auto; max-width: 1000px; margin: 3rem auto;
padding: 2rem; padding: 2rem;
background: var(--card-bg); background: var(--card-bg);
@ -107,9 +115,9 @@
box-shadow: 0 8px 32px var(--shadow); box-shadow: 0 8px 32px var(--shadow);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
animation: fadeIn 1s ease forwards; animation: fadeIn 1s ease forwards;
opacity:0; opacity: 0;
} }
@keyframes fadeIn { to { opacity:1; } } @keyframes fadeIn { to { opacity: 1; } }
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
text-align: center; text-align: center;
@ -139,43 +147,35 @@
content: ''; content: '';
position: absolute; top:0; left:0; width:100%; height:100%; 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%); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 70%);
opacity:0; transition: opacity 0.3s; opacity: 0; transition: opacity 0.3s;
} }
.game:hover { .game:hover {
transform: translateY(-8px) rotate(-1deg); transform: translateY(-8px) rotate(-1deg);
box-shadow: 0 12px 48px var(--shadow); box-shadow: 0 12px 48px var(--shadow);
background: var(--card-hover); background: var(--card-hover);
} }
.game:hover::before { .game:hover::before { opacity: 1; }
opacity:1;
}
.game .icon { .game .icon {
font-size: 3rem; font-size: 3rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
animation: popIn 0.5s ease forwards; animation: popIn 0.5s ease forwards;
opacity:0; opacity: 0;
} }
@keyframes popIn { to { opacity:1; transform: scale(1); } } @keyframes popIn { to { opacity:1; transform: scale(1); } }
.game h2 { .game h2 {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
text-shadow: 1px 1px 4px var(--shadow); text-shadow: 1px 1px 4px var(--shadow);
} }
/* Hide unselected game UIs */ /* hide game UIs until selected */
canvas, .board { display:none; } canvas, .board { display: none; }
</style> </style>
</head> </head>
<body> <body>
<div class="emoji-bg"> <!-- empty grid; JS will populate -->
<span>🎮</span><span>🕹️</span><span>👾</span><span>🎧</span><span>🖥️</span> <div class="emoji-bg"></div>
<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 class="wrapper"> <div class="wrapper">
<h1>Poke! Games Hub</h1> <h1>Poke! Games Hub</h1>
@ -208,6 +208,17 @@
</div> </div>
<script src="/static/data-mobile.js?v=6000"></script> <script src="/static/data-mobile.js?v=6000"></script>
<script>
const emojis = ['🎮','🕹️','👾','🎧','🖥️','🎲','🏆','🎯','🔥','💥','🧩','⭐','⚔️','🛡️','🚀','🎉','🌟','⚡','💣'];
const bg = document.querySelector('.emoji-bg');
for (let i = 0; i < 400; i++) {
const span = document.createElement('span');
span.textContent = emojis[i % emojis.length];
// randomize animation speed slightly
span.style.setProperty('--dur', `${6 + Math.random()*4}s`);
bg.appendChild(span);
}
</script>
</body> </body>
</html> </html>
<% } %> <% } %>
@ -215,6 +226,7 @@
<% if (game === "snake") { %> <% if (game === "snake") { %>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">