Hugging Face's logo

Spaces:
hesiz
/
mami
Running

App Files Community
hesiz commited on
Commit
163328b
·
verified ·
1 Parent(s): c74672d

Quita todo lo del texto, solo deja "No necesito decirte que eres la mejor, porque tú ya lo sabes. Solo quiero que sepas que te amo" - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +273 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mami
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: pink
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: mami
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,273 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Para Grecia, con todo mi amor</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
9
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
10
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
13
+
14
+ body {
15
+ font-family: 'Montserrat', sans-serif;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .dancing-script {
20
+ font-family: 'Dancing Script', cursive;
21
+ }
22
+
23
+ .animated-bg {
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ z-index: -1;
30
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
31
+ overflow: hidden;
32
+ }
33
+
34
+ .heart {
35
+ position: absolute;
36
+ pointer-events: none;
37
+ animation: float 6s ease-in-out infinite;
38
+ }
39
+
40
+ @keyframes float {
41
+ 0%, 100% {
42
+ transform: translateY(0) rotate(0deg);
43
+ }
44
+ 50% {
45
+ transform: translateY(-20px) rotate(5deg);
46
+ }
47
+ }
48
+
49
+ .photo-frame {
50
+ border: 15px solid #fff;
51
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .photo-frame:hover {
56
+ transform: scale(1.05);
57
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
58
+ }
59
+
60
+ .message-box {
61
+ background: rgba(255, 255, 255, 0.9);
62
+ backdrop-filter: blur(10px);
63
+ border-radius: 20px;
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .message-box:hover {
68
+ transform: translateY(-5px);
69
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
70
+ }
71
+
72
+ .floral-border {
73
+ position: relative;
74
+ }
75
+
76
+ .floral-border::before {
77
+ content: "";
78
+ position: absolute;
79
+ top: -10px;
80
+ left: -10px;
81
+ right: -10px;
82
+ bottom: -10px;
83
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23f9a8d4"><path d="M50,0 C60,20 80,20 100,10 C90,30 90,50 100,70 C80,60 60,60 50,80 C40,60 20,60 0,70 C10,50 10,30 0,10 C20,20 40,20 50,0 Z"/></svg>');
84
+ background-size: 50px 50px;
85
+ opacity: 0.3;
86
+ z-index: -1;
87
+ border-radius: 30px;
88
+ }
89
+
90
+ .btn-gift {
91
+ background: linear-gradient(45deg, #f9a8d4, #f472b6);
92
+ transition: all 0.3s ease;
93
+ }
94
+
95
+ .btn-gift:hover {
96
+ transform: translateY(-3px);
97
+ box-shadow: 0 10px 20px rgba(244, 114, 182, 0.3);
98
+ }
99
+
100
+ .floating {
101
+ animation: floating 3s ease-in-out infinite;
102
+ }
103
+
104
+ @keyframes floating {
105
+ 0%, 100% {
106
+ transform: translateY(0);
107
+ }
108
+ 50% {
109
+ transform: translateY(-10px);
110
+ }
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <div id="root"></div>
116
+
117
+ <script type="text/babel">
118
+ const { useState, useEffect } = React;
119
+
120
+ const App = () => {
121
+ const [hearts, setHearts] = useState([]);
122
+ const [showSpecialMessage, setShowSpecialMessage] = useState(false);
123
+ const [showPhoto, setShowPhoto] = useState(false);
124
+ useEffect(() => {
125
+ const handleClick = (e) => {
126
+ const newHeart = {
127
+ id: Date.now(),
128
+ x: e.clientX,
129
+ y: e.clientY,
130
+ size: Math.random() * 20 + 10,
131
+ color: `hsl(${Math.random() * 60 + 330}, 100%, ${Math.random() * 30 + 60}%)`
132
+ };
133
+ setHearts(prev => [...prev, newHeart]);
134
+
135
+ setTimeout(() => {
136
+ setHearts(prev => prev.filter(h => h.id !== newHeart.id));
137
+ }, 3000);
138
+ };
139
+
140
+ window.addEventListener('click', handleClick);
141
+ return () => window.removeEventListener('click', handleClick);
142
+ }, []);
143
+
144
+ return (
145
+ <div className="min-h-screen relative overflow-hidden">
146
+ {/* Animated Background */}
147
+ <div className="animated-bg">
148
+ {Array.from({ length: 20 }).map((_, i) => (
149
+ <div
150
+ key={i}
151
+ className="heart"
152
+ style={{
153
+ left: `${Math.random() * 100}%`,
154
+ top: `${Math.random() * 100}%`,
155
+ width: `${Math.random() * 30 + 10}px`,
156
+ height: `${Math.random() * 30 + 10}px`,
157
+ background: `hsl(${Math.random() * 60 + 330}, 100%, ${Math.random() * 30 + 60}%)`,
158
+ clipPath: 'path("M10,6 Q10,0 15,0 T20,6 Q25,0 30,0 T35,6 Q40,0 45,0 T50,6 L45,20 L40,15 L35,20 L30,15 L25,20 L20,15 L15,20 L10,15 Z")',
159
+ transform: `rotate(${Math.random() * 360}deg)`,
160
+ animationDuration: `${Math.random() * 5 + 3}s`,
161
+ animationDelay: `${Math.random() * 2}s`,
162
+ opacity: Math.random() * 0.5 + 0.3
163
+ }}
164
+ />
165
+ ))}
166
+
167
+ {hearts.map(heart => (
168
+ <div
169
+ key={heart.id}
170
+ className="heart"
171
+ style={{
172
+ left: `${heart.x}px`,
173
+ top: `${heart.y}px`,
174
+ width: `${heart.size}px`,
175
+ height: `${heart.size}px`,
176
+ background: heart.color,
177
+ clipPath: 'path("M10,6 Q10,0 15,0 T20,6 Q25,0 30,0 T35,6 Q40,0 45,0 T50,6 L45,20 L40,15 L35,20 L30,15 L25,20 L20,15 L15,20 L10,15 Z")',
178
+ transform: `rotate(${Math.random() * 360}deg)`,
179
+ opacity: 0.8
180
+ }}
181
+ />
182
+ ))}
183
+ </div>
184
+
185
+ {/* Main Content */}
186
+ <div className="container mx-auto px-4 py-12 relative z-10">
187
+ <header className="text-center mb-12">
188
+ <h1 className="dancing-script text-5xl md:text-6xl font-bold text-pink-600 mb-4 floating">
189
+ te amo mami
190
+ </h1>
191
+ <p className="text-xl text-gray-700">Con todo mi amor</p>
192
+ </header>
193
+
194
+ <main className="max-w-4xl mx-auto">
195
+ {/* Photo Section */}
196
+ <section className="mb-16 flex justify-center">
197
+ <div
198
+ className={`photo-frame w-64 h-64 bg-gray-200 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500 ${showPhoto ? 'opacity-100' : 'opacity-70 hover:opacity-100'}`}
199
+ onClick={() => setShowPhoto(!showPhoto)}
200
+ >
201
+ {showPhoto ? (
202
+ <div className="text-center p-4">
203
+ <p className="dancing-script text-2xl text-pink-600 mb-2">Mi hermosa madre</p>
204
+ <p className="text-gray-700">Eres mi mayor bendición</p>
205
+ </div>
206
+ ) : (
207
+ <div className="text-center">
208
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mx-auto text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
209
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
210
+ </svg>
211
+ <p className="mt-2 text-pink-600">Haz clic para ver un mensaje especial</p>
212
+ </div>
213
+ )}
214
+ </div>
215
+ </section>
216
+
217
+ {/* Special Message */}
218
+ <section className="mb-16">
219
+ <div
220
+ className="message-box p-6 md:p-8 cursor-pointer"
221
+ onClick={() => setShowSpecialMessage(!showSpecialMessage)}
222
+ >
223
+ <h2 className="dancing-script text-3xl text-center text-pink-600 mb-4">
224
+ {showSpecialMessage ? 'Te amo con todo mi corazón' : 'Un mensaje para ti'}
225
+ </h2>
226
+
227
+ {showSpecialMessage ? (
228
+ <div className="text-gray-700 text-lg leading-relaxed">
229
+ <p>No necesito decirte que eres la mejor, porque tú ya lo sabes. Solo quiero que sepas que te amo</p>
230
+ </div>
231
+ ) : (
232
+ <div className="text-center py-4">
233
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mx-auto text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
234
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
235
+ </svg>
236
+ <p className="mt-2 text-pink-600">Haz clic para leer un mensaje especial</p>
237
+ </div>
238
+ )}
239
+ </div>
240
+ </section>
241
+
242
+
243
+ {/* Interactive Gift */}
244
+ <section className="mb-16 text-center">
245
+ <h2 className="dancing-script text-3xl text-pink-600 mb-6">Tu regalo especial</h2>
246
+
247
+ <div className="floral-border inline-block p-2 bg-white rounded-2xl">
248
+ <div className="bg-gradient-to-br from-pink-100 to-purple-100 p-8 rounded-xl">
249
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-24 w-24 mx-auto text-pink-600 mb-4" viewBox="0 0 20 20" fill="currentColor">
250
+ <path fillRule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 010 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clipRule="evenodd" />
251
+ <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
252
+ </svg>
253
+ <p className="text-xl text-gray-700 mb-4">Este es un regalo simbólico de todo mi amor</p>
254
+ <p className="text-lg text-pink-600">Prometo siempre hacerte sentir orgullosa</p>
255
+ </div>
256
+ </div>
257
+ </section>
258
+ </main>
259
+
260
+ <footer className="text-center mt-16">
261
+ <p className="text-gray-600">Hecho con ❤️ para la mejor mamá del mundo</p>
262
+ <p className="dancing-script text-2xl text-pink-600 mt-2">Te amo mami</p>
263
+ </footer>
264
+ </div>
265
+ </div>
266
+ );
267
+ };
268
+
269
+ const root = ReactDOM.createRoot(document.getElementById('root'));
270
+ root.render(<App />);
271
+ </script>
272
+ <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=hesiz/mami" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
273
+ </html>