Spaces:
Sleeping
Sleeping
File size: 4,017 Bytes
0ba2a2d 26d5831 0ba2a2d 26d5831 46613ed 26d5831 46613ed 26d5831 46613ed 26d5831 46613ed 26d5831 46613ed 26d5831 0ba2a2d 46613ed 0ba2a2d 46613ed 26d5831 0ba2a2d 26d5831 46613ed 26d5831 46613ed 0ba2a2d 46613ed 0ba2a2d 26d5831 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 26d5831 0ba2a2d 46613ed 26d5831 46613ed 0ba2a2d 46613ed 0ba2a2d 46613ed 26d5831 0ba2a2d |
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
import gradio as gr
html_code = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year 2025 Celebration</title>
<style>
/* General styling */
body {
background-color: #1A1A2E;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
color: #fff;
}
/* Gift Box styling */
.gift-box {
position: relative;
width: 150px;
height: 150px;
background: #E94560;
border-radius: 10px;
overflow: hidden;
animation: pop-in 1s ease-out forwards;
}
.lid {
position: absolute;
width: 100%;
height: 70px;
background: #F5C32C;
top: -70px;
border-radius: 10px 10px 0 0;
transform-origin: bottom;
animation: open-lid 2s 1s forwards;
}
.ribbon {
position: absolute;
top: 0;
left: 50%;
width: 10px;
height: 100%;
background: #1B9C85;
transform: translateX(-50%);
animation: ribbon-off 1s 1.5s forwards;
}
/* Fireworks animation */
.fireworks {
display: none;
position: absolute;
width: 100vw;
height: 100vh;
background: url('https://i.gifer.com/original/fireworks.gif') center/cover no-repeat;
animation: fade-in 2s ease-out forwards;
}
/* Confetti styling */
.confetti {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: url('https://i.pinimg.com/originals/02/cc/20/02cc202e8b5f49fc3a6e19f601d6c58c.gif') center/cover no-repeat;
animation: fade-in 2s ease-out forwards;
}
/* Message styling */
.message {
display: none;
position: absolute;
font-size: 2em;
text-align: center;
animation: slide-up 1.5s ease-out forwards;
bottom: 30px;
}
/* Animations */
@keyframes pop-in {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes open-lid {
0% { transform: rotate(0); }
100% { transform: rotate(-100deg) translateY(-80px); }
}
@keyframes ribbon-off {
to { transform: translateX(-50%) translateY(200%); }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide-up {
0% { opacity: 0; transform: translateY(50px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="gift-box">
<div class="lid"></div>
<div class="ribbon"></div>
</div>
<div class="message">🎉 Happy New Year 2025! 🎉</div>
<div class="fireworks"></div>
<div class="confetti"></div>
<script>
// Start the sequence after the gift box animation
setTimeout(() => {
// Display message, fireworks, and confetti
document.querySelector('.message').style.display = 'block';
document.querySelector('.fireworks').style.display = 'block';
document.querySelector('.confetti').style.display = 'block';
}, 2500); // Delay for lid and ribbon animations
</script>
</body>
</html>
"""
def new_year_celebration():
return html_code
# Define Gradio interface
interface = gr.Interface(fn=new_year_celebration, inputs=[], outputs="html", title="New Year 2025 Celebration")
interface.launch()
|