Spaces:

triptrap
/

lynx

Running

App Files Files Community

lynx / index.html

triptrap

undefined - Initial Deployment

0415b4f verified 7 months ago

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>