Spaces:

victor
/

hello

Running

App Files Files Community

hello / index.html

victor HF Staff

Add index.html

e258993 verified about 1 year ago

raw

history blame contribute delete

13.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Interactive Greeting</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	}

	body {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	}

	.greeting-card {
	position: relative;
	width: 90%;
	max-width: 500px;
	background: white;
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
	padding: 40px;
	text-align: center;
	transform-style: preserve-3d;
	transition: transform 0.5s;
	overflow: hidden;
	cursor: pointer;
	}

	.greeting-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: rotate(45deg);
	transition: 0.5s;
	}

	.greeting-card:hover::before {
	left: 100%;
	}

	.card-content {
	position: relative;
	z-index: 1;
	}

	h1 {
	color: #444;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.2rem;
	transition: all 0.3s;
	}

	p {
	color: #666;
	line-height: 1.6;
	margin-bottom: 30px;
	font-size: 1.1rem;
	}

	.btn {
	display: inline-block;
	padding: 12px 30px;
	background: linear-gradient(45deg, #667eea, #764ba2);
	color: white;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
	transition: all 0.3s;
	border: none;
	cursor: pointer;
	}

	.btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
	}

	.bubbles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
	}

	.bubble {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	animation: float 15s infinite linear;
	}

	@keyframes float {
	0% {
	transform: translateY(0) rotate(0deg);
	opacity: 1;
	}
	100% {
	transform: translateY(-1000px) rotate(720deg);
	opacity: 0;
	}
	}

	.emoji-container {
	font-size: 3rem;
	margin: 20px 0;
	height: 80px;
	position: relative;
	}

	.emoji {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.hidden {
	opacity: 0;
	transform: translateX(-50%) scale(0.5);
	}

	.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	}

	.star {
	position: absolute;
	background: white;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	animation: twinkle 4s infinite;
	}

	@keyframes twinkle {
	0% { opacity: 0.2; }
	50% { opacity: 1; }
	100% { opacity: 0.2; }
	}
	</style>
	</head>
	<body>
	<div class="greeting-card" id="card">
	<div class="bubbles"></div>
	<div class="stars"></div>
	<div class="card-content">
	<div class="emoji-container">
	<div class="emoji" id="hello-emoji">👋</div>
	<div class="emoji hidden" id="smile-emoji">😊</div>
	<div class="emoji hidden" id="heart-emoji">❤️</div>
	</div>
	<h1 id="greeting-text">Hello!</h1>
	<p id="message-text">Thanks for stopping by! Click me to see some magic happen.</p>
	<button class="btn" id="action-btn">Surprise Me!</button>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const card = document.getElementById('card');
	const greetingText = document.getElementById('greeting-text');
	const messageText = document.getElementById('message-text');
	const actionBtn = document.getElementById('action-btn');
	const helloEmoji = document.getElementById('hello-emoji');
	const smileEmoji = document.getElementById('smile-emoji');
	const heartEmoji = document.getElementById('heart-emoji');
	const bubblesContainer = document.querySelector('.bubbles');
	const starsContainer = document.querySelector('.stars');

	// Create bubbles
	for (let i = 0; i < 20; i++) {
	createBubble();
	}

	// Create stars
	for (let i = 0; i < 50; i++) {
	createStar();
	}

	// Current state
	let state = 0;
	const messages = [
	{ greeting: "Hello!", message: "Thanks for stopping by! Click me to see some magic happen.", emoji: "👋" },
	{ greeting: "Have a wonderful day!", message: "I hope your day is filled with joy and happiness.", emoji: "😊" },
	{ greeting: "You're awesome!", message: "Just wanted to remind you how amazing you are!", emoji: "❤️" },
	{ greeting: "Hello again!", message: "The magic continues! Click the button for another surprise.", emoji: "✨" }
	];

	// Card click event
	card.addEventListener('click', function() {
	state = (state + 1) % 4;
	updateCard();
	animateCard();
	});

	// Button click event
	actionBtn.addEventListener('click', function(e) {
	e.stopPropagation();
	createConfetti();
	});

	function updateCard() {
	const currentMessage = messages[state];
	greetingText.textContent = currentMessage.greeting;
	messageText.textContent = currentMessage.message;

	// Hide all emojis
	[helloEmoji, smileEmoji, heartEmoji].forEach(emoji => {
	emoji.classList.add('hidden');
	});

	// Show the appropriate emoji
	switch(state) {
	case 0:
	helloEmoji.classList.remove('hidden');
	break;
	case 1:
	smileEmoji.classList.remove('hidden');
	break;
	case 2:
	heartEmoji.classList.remove('hidden');
	break;
	case 3:
	// For the 4th state, show all briefly
	[helloEmoji, smileEmoji, heartEmoji].forEach((emoji, index) => {
	setTimeout(() => {
	emoji.classList.remove('hidden');
	setTimeout(() => {
	emoji.classList.add('hidden');
	}, 500);
	}, index * 300);
	});
	break;
	}
	}

	function animateCard() {
	card.style.transform = 'rotateY(10deg)';
	setTimeout(() => {
	card.style.transform = 'rotateY(-10deg)';
	setTimeout(() => {
	card.style.transform = 'rotateY(0)';
	}, 150);
	}, 150);
	}

	function createBubble() {
	const bubble = document.createElement('div');
	bubble.classList.add('bubble');

	const size = Math.random() * 40 + 10;
	const posX = Math.random() * 100;
	const delay = Math.random() * 15;
	const duration = Math.random() * 10 + 10;

	bubble.style.width = `${size}px`;
	bubble.style.height = `${size}px`;
	bubble.style.left = `${posX}%`;
	bubble.style.bottom = `-${size}px`;
	bubble.style.animationDuration = `${duration}s`;
	bubble.style.animationDelay = `${delay}s`;

	bubblesContainer.appendChild(bubble);

	// Remove bubble after animation completes
	setTimeout(() => {
	bubble.remove();
	createBubble(); // Create new bubble
	}, (duration + delay) * 1000);
	}

	function createStar() {
	const star = document.createElement('div');
	star.classList.add('star');

	const posX = Math.random() * 100;
	const posY = Math.random() * 100;
	const delay = Math.random() * 4;
	const size = Math.random() * 2 + 1;

	star.style.left = `${posX}%`;
	star.style.top = `${posY}%`;
	star.style.width = `${size}px`;
	star.style.height = `${size}px`;
	star.style.animationDelay = `${delay}s`;

	starsContainer.appendChild(star);
	}

	function createConfetti() {
	// Clear any existing confetti
	const existingConfetti = document.querySelectorAll('.confetti');
	existingConfetti.forEach(el => el.remove());

	// Create 50 confetti pieces
	for (let i = 0; i < 50; i++) {
	const confetti = document.createElement('div');
	confetti.classList.add('confetti');

	// Random properties
	const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1', '#f368e0'];
	const color = colors[Math.floor(Math.random() * colors.length)];
	const size = Math.random() * 10 + 5;
	const posX = Math.random() * 100;
	const rotation = Math.random() * 360;
	const animationDuration = Math.random() * 3 + 2;

	// Position absolutely within the card
	confetti.style.position = 'absolute';
	confetti.style.width = `${size}px`;
	confetti.style.height = `${size}px`;
	confetti.style.backgroundColor = color;
	confetti.style.left = `${posX}%`;
	confetti.style.top = '20%';
	confetti.style.borderRadius = '50%';
	confetti.style.transform = `rotate(${rotation}deg)`;
	confetti.style.zIndex = '10';

	// Animation - falls down with varying timing
	confetti.style.animation = `confetti-fall ${animationDuration}s forwards`;

	card.appendChild(confetti);

	// Remove after animation
	setTimeout(() => {
	confetti.remove();
	}, animationDuration * 1000);
	}

	// Add CSS for animation
	const style = document.createElement('style');
	style.innerHTML = `
	@keyframes confetti-fall {
	0% {
	transform: translateY(0) rotate(0deg);
	opacity: 1;
	}
	100% {
	transform: translateY(300px) rotate(720deg);
	opacity: 0;
	}
	}
	`;
	document.head.appendChild(style);
	}

	// Automatic greeting change every 8 seconds
	setInterval(() => {
	state = (state + 1) % 4;
	updateCard();
	animateCard();
	}, 8000);
	});
	</script>
	</body>
	</html>