Hugging Face's logo

Spaces:
Yungbee06
/
haz
Running

App Files Community
Yungbee06 commited on
Commit
dc66a62
·
verified ·
1 Parent(s): 61d7c25

A letter that shoots fire works that a written " Bitch I'm him 😎" - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +161 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Haz
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: haz
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,161 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Fireworks Letter</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
11
+
12
+ .letter {
13
+ transform-style: preserve-3d;
14
+ transition: all 0.5s ease;
15
+ }
16
+
17
+ .letter.flipped {
18
+ transform: rotateY(180deg);
19
+ }
20
+
21
+ .letter-front, .letter-back {
22
+ backface-visibility: hidden;
23
+ position: absolute;
24
+ width: 100%;
25
+ height: 100%;
26
+ }
27
+
28
+ .letter-back {
29
+ transform: rotateY(180deg);
30
+ }
31
+
32
+ .firework {
33
+ position: absolute;
34
+ width: 5px;
35
+ height: 5px;
36
+ border-radius: 50%;
37
+ box-shadow: 0 0 10px 5px;
38
+ animation: explode 1s ease-out forwards;
39
+ opacity: 0;
40
+ }
41
+
42
+ @keyframes explode {
43
+ 0% {
44
+ transform: scale(0.1);
45
+ opacity: 1;
46
+ }
47
+ 100% {
48
+ transform: scale(1.5);
49
+ opacity: 0;
50
+ }
51
+ }
52
+
53
+ .pacifico {
54
+ font-family: 'Pacifico', cursive;
55
+ }
56
+
57
+ .envelope {
58
+ perspective: 1000px;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
63
+ <div class="envelope relative w-full max-w-md">
64
+ <div class="letter relative w-full h-64 bg-yellow-100 rounded-lg shadow-xl cursor-pointer transition-all duration-300 hover:shadow-2xl">
65
+ <div class="letter-front absolute inset-0 flex flex-col p-6">
66
+ <div class="flex-1 flex items-center justify-center">
67
+ <div class="text-center">
68
+ <i class="fas fa-heart text-red-500 text-4xl mb-2 animate-pulse"></i>
69
+ <p class="text-gray-700 font-semibold">Click to open this special message</p>
70
+ </div>
71
+ </div>
72
+ <div class="text-right">
73
+ <p class="text-gray-500 text-sm">To: The One Who's Him</p>
74
+ </div>
75
+ </div>
76
+ <div class="letter-back absolute inset-0 bg-gradient-to-br from-purple-100 to-pink-100 p-6 flex flex-col">
77
+ <div class="flex-1 flex items-center justify-center relative overflow-hidden">
78
+ <h1 id="message" class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 pacifico text-center">
79
+ Bitch I'm him 😎
80
+ </h1>
81
+ </div>
82
+ <div class="text-right">
83
+ <p class="text-gray-500 text-sm">With attitude,</p>
84
+ <p class="text-gray-500 text-sm">The Real One</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div class="absolute -bottom-2 left-0 right-0 h-4 bg-red-600 rounded-b-lg mx-auto w-11/12"></div>
89
+ <div class="absolute -bottom-4 left-0 right-0 h-4 bg-red-700 rounded-b-lg mx-auto w-10/12"></div>
90
+ </div>
91
+
92
+ <script>
93
+ document.addEventListener('DOMContentLoaded', function() {
94
+ const letter = document.querySelector('.letter');
95
+ const message = document.getElementById('message');
96
+ const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
97
+
98
+ letter.addEventListener('click', function() {
99
+ this.classList.toggle('flipped');
100
+
101
+ if (this.classList.contains('flipped')) {
102
+ // Create fireworks when letter is opened
103
+ createFireworks();
104
+
105
+ // Animate the message
106
+ message.style.animation = 'none';
107
+ setTimeout(() => {
108
+ message.style.animation = 'bounce 0.5s ease';
109
+ }, 10);
110
+ }
111
+ });
112
+
113
+ function createFireworks() {
114
+ const container = document.querySelector('.letter-back');
115
+
116
+ for (let i = 0; i < 50; i++) {
117
+ setTimeout(() => {
118
+ const firework = document.createElement('div');
119
+ firework.className = 'firework';
120
+
121
+ // Random position
122
+ const x = Math.random() * 100;
123
+ const y = Math.random() * 100;
124
+
125
+ // Random color
126
+ const color = colors[Math.floor(Math.random() * colors.length)];
127
+
128
+ firework.style.left = `${x}%`;
129
+ firework.style.top = `${y}%`;
130
+ firework.style.color = color;
131
+
132
+ container.appendChild(firework);
133
+
134
+ // Remove firework after animation
135
+ setTimeout(() => {
136
+ firework.remove();
137
+ }, 1000);
138
+ }, i * 100);
139
+ }
140
+ }
141
+
142
+ // Add some confetti when hovering the envelope
143
+ letter.addEventListener('mouseenter', function() {
144
+ if (!this.classList.contains('flipped')) {
145
+ const confetti = document.createElement('div');
146
+ confetti.className = 'absolute w-2 h-2 bg-yellow-300 rounded-full opacity-70';
147
+ confetti.style.left = `${Math.random() * 100}%`;
148
+ confetti.style.top = `${Math.random() * 100}%`;
149
+ confetti.style.transform = 'translate(-50%, -50%)';
150
+
151
+ document.querySelector('.envelope').appendChild(confetti);
152
+
153
+ setTimeout(() => {
154
+ confetti.remove();
155
+ }, 1000);
156
+ }
157
+ });
158
+ });
159
+ </script>
160
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Yungbee06/haz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
161
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ A letter that shoots fire works that a written " Bitch I'm him 😎"