Hugging Face's logo

Spaces:
neerajkalyank
/
new_112
Sleeping

App Files Community
neerajkalyank commited on
Commit
26d5831
•
1 Parent(s): e0f4934

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +174 -0
app.py ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Happy New Year 2025</title>
7
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ /* Background styling */
10
+ body {
11
+ background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
12
+ background-size: 400% 400%;
13
+ animation: gradientBG 10s ease infinite;
14
+ color: #fff;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ height: 100vh;
19
+ overflow: hidden;
20
+ font-family: 'Arial', sans-serif;
21
+ text-align: center;
22
+ }
23
+
24
+ @keyframes gradientBG {
25
+ 0% { background-position: 0% 50%; }
26
+ 50% { background-position: 100% 50%; }
27
+ 100% { background-position: 0% 50%; }
28
+ }
29
+
30
+ /* Gift box styling */
31
+ .gift-box {
32
+ width: 150px;
33
+ height: 150px;
34
+ position: relative;
35
+ background-color: #ff4e50;
36
+ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
37
+ border-radius: 5px;
38
+ animation: popUp 1s ease;
39
+ cursor: pointer;
40
+ }
41
+
42
+ /* Box top styling and animation */
43
+ .box-top {
44
+ width: 150px;
45
+ height: 75px;
46
+ background-color: #f9d423;
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ border-radius: 5px 5px 0 0;
51
+ transform-origin: top;
52
+ transition: transform 0.5s;
53
+ }
54
+
55
+ .gift-box.open .box-top {
56
+ transform: rotateX(-90deg);
57
+ }
58
+
59
+ /* Box ribbon */
60
+ .ribbon {
61
+ position: absolute;
62
+ background-color: #fff;
63
+ }
64
+ .ribbon.vertical {
65
+ width: 10px;
66
+ height: 100%;
67
+ left: 50%;
68
+ transform: translateX(-50%);
69
+ }
70
+ .ribbon.horizontal {
71
+ width: 100%;
72
+ height: 10px;
73
+ top: 50%;
74
+ transform: translateY(-50%);
75
+ }
76
+
77
+ /* New Year message */
78
+ .message {
79
+ font-size: 2rem;
80
+ opacity: 0;
81
+ transition: opacity 1s;
82
+ color: #ff4e50;
83
+ }
84
+
85
+ /* Fireworks styling */
86
+ .rocket {
87
+ position: absolute;
88
+ width: 5px;
89
+ height: 15px;
90
+ background-color: #fff;
91
+ bottom: 0;
92
+ animation: launch 2s ease-out infinite;
93
+ opacity: 0;
94
+ }
95
+
96
+ .firework-explosion {
97
+ position: absolute;
98
+ width: 10px;
99
+ height: 10px;
100
+ background-color: transparent;
101
+ border-radius: 50%;
102
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
103
+ animation: explode 1.5s ease-out infinite;
104
+ opacity: 0;
105
+ }
106
+
107
+ /* Animation keyframes */
108
+ @keyframes popUp {
109
+ 0% { transform: scale(0); }
110
+ 100% { transform: scale(1); }
111
+ }
112
+
113
+ @keyframes launch {
114
+ 0% { bottom: 0; opacity: 1; }
115
+ 80% { bottom: 70%; opacity: 1; }
116
+ 100% { bottom: 70%; opacity: 0; }
117
+ }
118
+
119
+ @keyframes explode {
120
+ 0% { transform: scale(0); opacity: 1; }
121
+ 50% { transform: scale(1.5); opacity: 1; }
122
+ 100% { transform: scale(2); opacity: 0; }
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+
128
+ <!-- Gift Box Structure -->
129
+ <div class="gift-box" onclick="openGiftBox()">
130
+ <div class="box-top"></div>
131
+ <div class="ribbon vertical"></div>
132
+ <div class="ribbon horizontal"></div>
133
+ </div>
134
+
135
+ <!-- New Year Message -->
136
+ <div class="message" id="newYearMessage">Happy New Year 2025!</div>
137
+
138
+ <!-- Fireworks Animation -->
139
+ <div class="rocket" style="left: 20%;"></div>
140
+ <div class="rocket" style="left: 40%;"></div>
141
+ <div class="rocket" style="left: 60%;"></div>
142
+ <div class="rocket" style="left: 80%;"></div>
143
+
144
+ <div class="firework-explosion" style="top: 20%; left: 15%;"></div>
145
+ <div class="firework-explosion" style="top: 20%; left: 35%;"></div>
146
+ <div class="firework-explosion" style="top: 20%; left: 55%;"></div>
147
+ <div class="firework-explosion" style="top: 20%; left: 75%;"></div>
148
+
149
+ <!-- JavaScript to control animations -->
150
+ <script>
151
+ function openGiftBox() {
152
+ const giftBox = document.querySelector('.gift-box');
153
+ const message = document.getElementById('newYearMessage');
154
+ const rockets = document.querySelectorAll('.rocket');
155
+ const explosions = document.querySelectorAll('.firework-explosion');
156
+
157
+ // Open the box
158
+ giftBox.classList.add('open');
159
+
160
+ // Show message after box opens
161
+ setTimeout(() => {
162
+ message.style.opacity = '1';
163
+ }, 500);
164
+
165
+ // Launch fireworks after message is shown
166
+ setTimeout(() => {
167
+ rockets.forEach(rocket => rocket.style.opacity = '1');
168
+ explosions.forEach(explosion => explosion.style.opacity = '1');
169
+ }, 1000);
170
+ }
171
+ </script>
172
+
173
+ </body>
174
+ </html>