| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Poki-Style Game Hub</title>
|
| <style>
|
|
|
| body {
|
| font-family: Arial, sans-serif;
|
| background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #533483);
|
| background-size: 400% 400%;
|
| animation: bgAnimation 8s infinite alternate ease-in-out;
|
| color: white;
|
| margin: 0;
|
| padding: 0;
|
| text-align: center;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| min-height: 100vh;
|
| transition: background 0.5s ease;
|
| }
|
|
|
| @keyframes bgAnimation {
|
| 0% { background-position: 0% 50%; }
|
| 100% { background-position: 100% 50%; }
|
| }
|
|
|
|
|
| .game-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
| gap: 20px;
|
| width: 90%;
|
| max-width: 600px;
|
| margin-top: 20px;
|
| }
|
|
|
|
|
| .game-card {
|
| background: rgba(255, 255, 255, 0.1);
|
| padding: 15px;
|
| border-radius: 12px;
|
| cursor: pointer;
|
| transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| backdrop-filter: blur(5px);
|
| border: 2px solid transparent;
|
| position: relative;
|
| }
|
|
|
| .game-card:hover {
|
| background: rgba(255, 255, 255, 0.2);
|
| transform: scale(1.1) rotate(-2deg);
|
| box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
|
| border-color: white;
|
| }
|
|
|
| .game-card:active {
|
| transform: scale(0.95);
|
| }
|
|
|
| .game-card img {
|
| width: 100px;
|
| height: 100px;
|
| border-radius: 12px;
|
| transition: transform 0.3s ease;
|
| }
|
|
|
| .game-card:hover img {
|
| transform: scale(1.1);
|
| }
|
|
|
| .game-card p {
|
| margin: 8px 0 0;
|
| font-size: 18px;
|
| font-weight: bold;
|
| }
|
|
|
|
|
| #game-frame {
|
| width: 100%;
|
| height: 90vh;
|
| border: none;
|
| display: none;
|
| opacity: 0;
|
| transition: opacity 0.5s ease-in-out;
|
| }
|
|
|
|
|
| .full-view {
|
| width: 100%;
|
| height: 100vh;
|
| }
|
|
|
|
|
| .back-btn {
|
| display: none;
|
| position: absolute;
|
| top: 15px;
|
| left: 15px;
|
| background: rgba(255, 255, 255, 0.8);
|
| color: black;
|
| border: none;
|
| padding: 12px 18px;
|
| border-radius: 8px;
|
| font-size: 18px;
|
| cursor: pointer;
|
| transition: all 0.3s ease-in-out;
|
| opacity: 0;
|
| }
|
|
|
| .back-btn.show {
|
| opacity: 1;
|
| display: block;
|
| animation: pulse 1.5s infinite alternate;
|
| }
|
|
|
| .back-btn:hover {
|
| background: white;
|
| transform: scale(1.1);
|
| }
|
|
|
| @keyframes pulse {
|
| 0% { transform: scale(1); }
|
| 100% { transform: scale(1.05); }
|
| }
|
|
|
|
|
| @media (max-width: 600px) {
|
| .game-grid {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
|
|
| .game-card img {
|
| width: 80px;
|
| height: 80px;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <h1>🎮 Poki-Style Game Hub</h1>
|
|
|
|
|
| <div id="game-grid" class="game-grid">
|
| <div class="game-card" onclick="openGame('media-pipe-pong.html')">
|
| <img src="game1.png" alt="Game 1">
|
| <p>MediaPipe Pong</p>
|
| </div>
|
| <div class="game-card" onclick="openGame('gt.html')">
|
| <img src="game2.png" alt="Game 2">
|
| <p>Hong Game</p>
|
| </div>
|
| <div class="game-card" onclick="openGame('media-pipe-pong.html')">
|
| <img src="game3.png" alt="Game 3">
|
| <p>PONG</p>
|
| </div>
|
| <div class="game-card" onclick="openGame('profile.html')">
|
| <img src="profile.png" alt="Profile">
|
| <p>Profile</p>
|
| </div>
|
| <div class="game-card" onclick="openGame('mk.html')">
|
| <img src="game5.png" alt="Game 5">
|
| <p>MK</p>
|
| </div>
|
| <div class="game-card" onclick="openGame('mk2.html')">
|
| <img src="game6.png" alt="Game 6">
|
| <p>MK2</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <iframe id="game-frame"></iframe>
|
|
|
|
|
| <button class="back-btn" onclick="goBack()">🔙 Back</button>
|
|
|
| <script>
|
| function openGame(gameUrl) {
|
| document.getElementById("game-grid").style.display = "none";
|
| document.getElementById("game-frame").src = gameUrl;
|
| document.getElementById("game-frame").classList.add("full-view");
|
| document.getElementById("game-frame").style.display = "block";
|
| setTimeout(() => document.getElementById("game-frame").style.opacity = "1", 100);
|
| document.querySelector(".back-btn").classList.add("show");
|
| }
|
|
|
| function goBack() {
|
| document.getElementById("game-grid").style.display = "grid";
|
| document.getElementById("game-frame").classList.remove("full-view");
|
| document.getElementById("game-frame").style.opacity = "0";
|
| setTimeout(() => document.getElementById("game-frame").style.display = "none", 500);
|
| document.querySelector(".back-btn").classList.remove("show");
|
| }
|
| </script>
|
|
|
| </body>
|
| </html>
|
|
|
