Spaces:
Running
Running
File size: 1,837 Bytes
d0f5436 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
// VANTA BACKGROUND
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xf97316,
backgroundColor: 0x111827,
points: 10.00,
maxDistance: 25.00,
spacing: 18.00
});
// DUMMY GAMES
const games = [
{
title: "Quantum Holograms",
desc: "Solve mind-bending AR puzzles in your living room.",
img: "http://static.photos/technology/640x360/42",
tags: ["AR", "Puzzle"],
link: "#"
},
{
title: "Sky Drifters VR",
desc: "Fly through neon skies in a fully immersive VR racer.",
img: "http://static.photos/outdoor/640x360/99",
tags: ["VR", "Racing"],
link: "#"
},
{
title: "Echo Chamber",
desc: "A social MR club where music becomes visible.",
img: "http://static.photos/gradient/640x360/11",
tags: ["MR", "Social"],
link: "#"
}
];
// RENDER CARDS
const grid = document.getElementById("game-grid");
games.forEach(g => {
const card = document.createElement("a");
card.href = g.link;
card.className = "block rounded-xl overflow-hidden card-3d bg-gray-800 border border-gray-700";
card.innerHTML = `
<img src="${g.img}" alt="${g.title}" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex gap-2 mb-2">
${g.tags.map(t => `<span class="text-xs px-2 py-1 rounded-full bg-orange-500/20 text-orange-300">${t}</span>`).join("")}
</div>
<h3 class="text-xl font-bold mb-1">${g.title}</h3>
<p class="text-gray-400 text-sm">${g.desc}</p>
</div>
`;
grid.appendChild(card);
});
// UPLOAD FORM
document.getElementById("upload-form").addEventListener("submit", e => {
e.preventDefault();
alert("Upload simulated! In production, we'd POST to the API.");
e.target.reset();
}); |