Hugging Face's logo

Spaces:
triptrap
/
lynx
Running

App Files Community
lynx / index.html
triptrap's picture
triptrap
undefined - Initial Deployment
0415b4f verified
Raw History Blame Contribute Delete
9.15 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lynx Balloons</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
.balloon {
animation: float 4s ease-in-out infinite;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
z-index: 10;
}
.balloon:hover {
transform: scale(1.1);
}
.balloon:nth-child(1) { animation-delay: 0s; }
.balloon:nth-child(2) { animation-delay: 0.5s; }
.balloon:nth-child(3) { animation-delay: 1s; }
.balloon:nth-child(4) { animation-delay: 1.5s; }
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0;
z-index: 5;
}
</style>
</head>
<body class="bg-gradient-to-b from-blue-100 to-purple-100 min-h-screen overflow-hidden relative">
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl md:text-6xl font-bold text-center text-purple-800 mb-12">Balloon Lynx</h1>
<p class="text-center text-gray-600 mb-8">Click on the balloons to turn them into confetti!</p>
<div id="balloons-container" class="relative w-full h-[70vh]">
<!-- Balloons will be added here by JavaScript -->
</div>
<div class="text-center mt-8">
<button id="reset-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all">
Reset Balloons
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('balloons-container');
const resetBtn = document.getElementById('reset-btn');
const colors = ['bg-red-500', 'bg-yellow-400', 'bg-green-400', 'bg-blue-400', 'bg-purple-400', 'bg-pink-400'];
const letters = ['L', 'y', 'n', 'x'];
let balloons = [];
function createBalloons() {
// Clear existing balloons
container.innerHTML = '';
balloons = [];
// Create balloon for each letter
letters.forEach((letter, index) => {
const balloon = document.createElement('div');
const color = colors[index % colors.length];
balloon.className = `balloon w-20 h-24 ${color} rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg`;
balloon.textContent = letter;
balloon.style.left = `${20 + index * 20}%`;
balloon.style.top = `${30 + Math.random() * 40}%`;
// Add string
const string = document.createElement('div');
string.className = 'absolute w-1 h-16 bg-gray-300 bottom-[-4rem] left-1/2 transform -translate-x-1/2';
balloon.appendChild(string);
balloon.addEventListener('click', function(e) {
e.stopPropagation();
popBalloon(balloon);
});
container.appendChild(balloon);
balloons.push(balloon);
});
}
function popBalloon(balloon) {
// Get position
const rect = balloon.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
// Create confetti effect
confetti({
particleCount: 100,
angle: 270,
spread: 180,
origin: { x: x / window.innerWidth, y: y / window.innerHeight },
colors: ['#ff0000', '#ffff00', '#00ff00', '#0000ff', '#ff00ff']
});
// Remove balloon
balloon.style.display = 'none';
// Play pop sound
const popSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-balloon-pop-with-delay-2350.mp3');
popSound.play();
}
function handleBackgroundClick(e) {
// Create random balloon where clicked
if (e.target === container) {
const balloon = document.createElement('div');
const color = colors[Math.floor(Math.random() * colors.length)];
balloon.className = `balloon w-20 h-24 ${color} rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg`;
balloon.textContent = letters[Math.floor(Math.random() * letters.length)];
// Position at click location
const x = e.clientX - container.getBoundingClientRect().left - 40;
const y = e.clientY - container.getBoundingClientRect().top - 40;
balloon.style.left = `${x}px`;
balloon.style.top = `${y}px`;
// Add string
const string = document.createElement('div');
string.className = 'absolute w-1 h-16 bg-gray-300 bottom-[-4rem] left-1/2 transform -translate-x-1/2';
balloon.appendChild(string);
balloon.addEventListener('click', function(e) {
e.stopPropagation();
popBalloon(balloon);
});
container.appendChild(balloon);
balloons.push(balloon);
}
}
// Initialize
createBalloons();
// Event listeners
container.addEventListener('click', handleBackgroundClick);
resetBtn.addEventListener('click', createBalloons);
// Make balloons draggable
balloons.forEach(balloon => {
makeDraggable(balloon);
});
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
element.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// Get initial position
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// Calculate new position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set new position
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// Stop moving when mouse button is released
document.onmouseup = null;
document.onmousemove = null;
}
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=triptrap/lynx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>