Hugging Face's logo

Spaces:
faizanmumtaz
/
faizan
Running

App Files Community
faizanmumtaz commited on
Commit
d7de3e7
·
verified ·
1 Parent(s): 8d26ce7

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +111 -19
index.html CHANGED
@@ -1,19 +1,111 @@
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>For Bushra 🌹</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @keyframes sparkle {
10
+ 0%, 100% { opacity: 1; }
11
+ 50% { opacity: 0.5; }
12
+ }
13
+ @keyframes float {
14
+ 0% { transform: translateY(0px) rotate(0deg); }
15
+ 50% { transform: translateY(-10px) rotate(5deg); }
16
+ 100% { transform: translateY(0px) rotate(0deg); }
17
+ }
18
+ .name-animation {
19
+ background: linear-gradient(45deg, #9f7aea, #667eea, #764ba2);
20
+ background-size: 200% 200%;
21
+ -webkit-background-clip: text;
22
+ background-clip: text;
23
+ color: transparent;
24
+ animation: gradient 5s ease infinite;
25
+ }
26
+ @keyframes gradient {
27
+ 0% { background-position: 0% 50%; }
28
+ 50% { background-position: 100% 50%; }
29
+ 100% { background-position: 0% 50%; }
30
+ }
31
+ .sparkle {
32
+ animation: sparkle 1.5s infinite;
33
+ }
34
+ .floating {
35
+ animation: float 3s infinite ease-in-out;
36
+ }
37
+ .letter {
38
+ display: inline-block;
39
+ transition: transform 0.3s;
40
+ }
41
+ .letter:hover {
42
+ transform: translateY(-10px) rotate(10deg);
43
+ color: #9f7aea;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-purple-50">
48
+ <div class="min-h-screen flex flex-col items-center justify-center p-4">
49
+ <!-- Main Card -->
50
+ <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
51
+ <!-- Animated Name -->
52
+ <div class="mb-8">
53
+ <h1 class="text-6xl font-bold name-animation mb-2" id="nameContainer">
54
+ <span class="letter">B</span>
55
+ <span class="letter">U</span>
56
+ <span class="letter">S</span>
57
+ <span class="letter">H</span>
58
+ <span class="letter">R</span>
59
+ <span class="letter">A</span>
60
+ </h1>
61
+ <div class="text-2xl sparkle">✨ My Everything ✨</div>
62
+ </div>
63
+
64
+ <!-- Message -->
65
+ <h2 class="text-3xl font-bold text-purple-600 mb-4">I'm Sorry</h2>
66
+ <p class="text-gray-700 mb-6">My dearest Bushra, I know I made a mistake and I truly regret it. You're the most precious person in my life, as beautiful as the morning star. Please forgive me.</p>
67
+
68
+ <!-- Reasons -->
69
+ <div class="space-y-4 mb-8">
70
+ <div class="text-purple-500 font-semibold">Why Bushra is Special ✨</div>
71
+ <ul class="text-gray-600" id="loveList">
72
+ <li class="hover:transform hover:scale-105 transition-all duration-300">Your beautiful name means 'Good News' 🌟</li>
73
+ <li class="hover:transform hover:scale-105 transition-all duration-300">Your eyes sparkle like stars ✨</li>
74
+ <li class="hover:transform hover:scale-105 transition-all duration-300">Your smile lights up my world 🌸</li>
75
+ <li class="hover:transform hover:scale-105 transition-all duration-300">Every moment with you is magical ⭐</li>
76
+ </ul>
77
+ </div>
78
+
79
+ <!-- Button -->
80
+ <button id="forgiveMeBtn" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
81
+ Forgive Me, Bushra? 🌹
82
+ </button>
83
+ </div>
84
+ </div>
85
+
86
+ <script>
87
+ const btn = document.getElementById('forgiveMeBtn');
88
+ btn.addEventListener('click', () => {
89
+ const messages = [
90
+ "Bushra, you're my shining star ⭐",
91
+ "You make my world beautiful 🌸",
92
+ "Your smile is my favorite view ✨",
93
+ "You mean everything to me 🌹",
94
+ "Can't imagine life without you 🌺"
95
+ ];
96
+ const message = messages[Math.floor(Math.random() * messages.length)];
97
+ alert(message + "\nI promise to make it up to you!");
98
+ });
99
+
100
+ // Add hover effect to each letter
101
+ document.querySelectorAll('.letter').forEach(letter => {
102
+ letter.addEventListener('mouseover', () => {
103
+ letter.style.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
104
+ });
105
+ letter.addEventListener('mouseout', () => {
106
+ letter.style.color = '';
107
+ });
108
+ });
109
+ </script>
110
+ </body>
111
+ </html>