Hugging Face's logo

Spaces:
Judemon
/
muduf
Running

App Files Community
Judemon commited on
Commit
f1efac4
·
verified ·
1 Parent(s): dcd017a

create a hacking web app to hack victim when they click on the generated link - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +18 -265
index.html CHANGED
@@ -1,267 +1,20 @@
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>Interactive UI with Tailwind</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
- /* Custom CSS for elements that need more precise control */
11
- .gradient-bg {
12
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
- }
14
- .card-hover:hover {
15
- transform: translateY(-5px);
16
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
- }
18
- .transition-all {
19
- transition: all 0.3s ease;
20
- }
21
- </style>
22
- </head>
23
- <body class="font-sans bg-gray-50">
24
- <header class="gradient-bg text-white">
25
- <div class="container mx-auto px-6 py-12">
26
- <div class="flex justify-between items-center">
27
- <div class="text-2xl font-bold">TailUI</div>
28
- <nav class="hidden md:block">
29
- <ul class="flex space-x-8">
30
- <li><a href="#" class="hover:text-gray-200 transition-all">Home</a></li>
31
- <li><a href="#" class="hover:text-gray-200 transition-all">Features</a></li>
32
- <li><a href="#" class="hover:text-gray-200 transition-all">Pricing</a></li>
33
- <li><a href="#" class="hover:text-gray-200 transition-all">Contact</a></li>
34
- </ul>
35
- </nav>
36
- <button class="md:hidden text-2xl">
37
- <i class="fas fa-bars"></i>
38
- </button>
39
- </div>
40
- <div class="mt-16 text-center">
41
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Build Beautiful UIs</h1>
42
- <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Create responsive, modern interfaces with Tailwind CSS and a touch of JavaScript magic.</p>
43
- <div class="flex flex-col sm:flex-row justify-center gap-4">
44
- <button class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all">Get Started</button>
45
- <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition-all">Learn More</button>
46
- </div>
47
- </div>
48
- </div>
49
- </header>
50
-
51
- <main class="container mx-auto px-6 py-16">
52
- <section class="mb-20">
53
- <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
54
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
55
- <!-- Feature Card 1 -->
56
- <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
57
- <div class="text-purple-600 text-4xl mb-4">
58
- <i class="fas fa-bolt"></i>
59
- </div>
60
- <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
61
- <p class="text-gray-600">Optimized for performance with minimal CSS footprint and maximum rendering speed.</p>
62
- </div>
63
-
64
- <!-- Feature Card 2 -->
65
- <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
66
- <div class="text-purple-600 text-4xl mb-4">
67
- <i class="fas fa-mobile-alt"></i>
68
- </div>
69
- <h3 class="text-xl font-bold mb-3">Fully Responsive</h3>
70
- <p class="text-gray-600">Looks great on all devices from mobile phones to large desktop screens.</p>
71
- </div>
72
-
73
- <!-- Feature Card 3 -->
74
- <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
75
- <div class="text-purple-600 text-4xl mb-4">
76
- <i class="fas fa-cog"></i>
77
- </div>
78
- <h3 class="text-xl font-bold mb-3">Customizable</h3>
79
- <p class="text-gray-600">Easily customize colors, spacing, typography and more with Tailwind's config.</p>
80
- </div>
81
- </div>
82
- </section>
83
-
84
- <section class="mb-20">
85
- <h2 class="text-3xl font-bold text-center mb-12">Interactive Demo</h2>
86
- <div class="bg-white rounded-xl shadow-md p-8 max-w-2xl mx-auto">
87
- <div class="flex justify-between items-center mb-6">
88
- <h3 class="text-xl font-semibold">Theme Customizer</h3>
89
- <button id="resetBtn" class="text-sm text-purple-600 hover:text-purple-800">Reset</button>
90
- </div>
91
-
92
- <div class="space-y-6">
93
- <div>
94
- <label class="block text-gray-700 mb-2">Primary Color</label>
95
- <div class="flex space-x-2">
96
- <button data-color="purple" class="color-btn w-8 h-8 rounded-full bg-purple-600 border-2 border-transparent hover:border-gray-300"></button>
97
- <button data-color="blue" class="color-btn w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-gray-300"></button>
98
- <button data-color="green" class="color-btn w-8 h-8 rounded-full bg-green-600 border-2 border-transparent hover:border-gray-300"></button>
99
- <button data-color="red" class="color-btn w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-gray-300"></button>
100
- </div>
101
- </div>
102
-
103
- <div>
104
- <label class="block text-gray-700 mb-2">Dark Mode</label>
105
- <label class="relative inline-flex items-center cursor-pointer">
106
- <input type="checkbox" id="darkModeToggle" class="sr-only peer">
107
- <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
108
- <span class="ml-3 text-sm font-medium text-gray-700">Toggle</span>
109
- </label>
110
- </div>
111
-
112
- <div>
113
- <label class="block text-gray-700 mb-2">Rounded Corners</label>
114
- <input type="range" id="radiusSlider" min="0" max="20" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
115
- <div class="flex justify-between text-xs text-gray-500 mt-1">
116
- <span>Sharp</span>
117
- <span>Rounded</span>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- </section>
123
-
124
- <section class="bg-white rounded-xl shadow-md p-8 text-center">
125
- <h2 class="text-3xl font-bold mb-6">Ready to Get Started?</h2>
126
- <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Join thousands of developers building beautiful interfaces with our tools and resources.</p>
127
- <button class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition-all">Sign Up Free</button>
128
- </section>
129
- </main>
130
-
131
- <footer class="bg-gray-800 text-white py-12">
132
- <div class="container mx-auto px-6">
133
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
134
- <div>
135
- <h3 class="text-xl font-bold mb-4">TailUI</h3>
136
- <p class="text-gray-400">Building beautiful interfaces with Tailwind CSS since 2023.</p>
137
- </div>
138
- <div>
139
- <h4 class="font-semibold mb-4">Resources</h4>
140
- <ul class="space-y-2">
141
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Documentation</a></li>
142
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Tutorials</a></li>
143
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Blog</a></li>
144
- </ul>
145
- </div>
146
- <div>
147
- <h4 class="font-semibold mb-4">Company</h4>
148
- <ul class="space-y-2">
149
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">About</a></li>
150
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Careers</a></li>
151
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
152
- </ul>
153
- </div>
154
- <div>
155
- <h4 class="font-semibold mb-4">Connect</h4>
156
- <div class="flex space-x-4">
157
- <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-twitter"></i></a>
158
- <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-github"></i></a>
159
- <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-discord"></i></a>
160
- <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-youtube"></i></a>
161
- </div>
162
- </div>
163
- </div>
164
- <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
165
- <p>&copy; 2023 TailUI. All rights reserved.</p>
166
- </div>
167
- </div>
168
- </footer>
169
-
170
- <script>
171
- // Interactive elements functionality
172
- document.addEventListener('DOMContentLoaded', function() {
173
- // Color theme switcher
174
- const colorButtons = document.querySelectorAll('.color-btn');
175
- const header = document.querySelector('header');
176
- const primaryButtons = document.querySelectorAll('.gradient-bg');
177
-
178
- colorButtons.forEach(button => {
179
- button.addEventListener('click', function() {
180
- const color = this.getAttribute('data-color');
181
-
182
- // Update header gradient
183
- if(color === 'purple') {
184
- header.className = 'gradient-bg text-white';
185
- } else {
186
- header.className = `bg-${color}-600 text-white`;
187
- }
188
-
189
- // Update buttons
190
- primaryButtons.forEach(btn => {
191
- if(color === 'purple') {
192
- btn.className = btn.className.replace(/bg-(purple|blue|green|red)-600/g, 'gradient-bg');
193
- } else {
194
- btn.className = btn.className.replace(/gradient-bg|bg-(purple|blue|green|red)-600/g, `bg-${color}-600`);
195
- }
196
- });
197
-
198
- // Update dark mode toggle color
199
- const darkModeToggle = document.getElementById('darkModeToggle');
200
- const darkModeDiv = darkModeToggle.nextElementSibling;
201
- darkModeDiv.className = darkModeDiv.className.replace(/peer-checked:bg-(purple|blue|green|red)-600/, `peer-checked:bg-${color}-600`);
202
- });
203
- });
204
-
205
- // Dark mode toggle
206
- const darkModeToggle = document.getElementById('darkModeToggle');
207
- darkModeToggle.addEventListener('change', function() {
208
- if(this.checked) {
209
- document.body.classList.add('bg-gray-900', 'text-white');
210
- document.body.classList.remove('bg-gray-50');
211
- } else {
212
- document.body.classList.remove('bg-gray-900', 'text-white');
213
- document.body.classList.add('bg-gray-50');
214
- }
215
- });
216
-
217
- // Radius slider
218
- const radiusSlider = document.getElementById('radiusSlider');
219
- radiusSlider.addEventListener('input', function() {
220
- const value = this.value;
221
- const cards = document.querySelectorAll('.card-hover');
222
- const buttons = document.querySelectorAll('button');
223
-
224
- cards.forEach(card => {
225
- card.style.borderRadius = `${value}px`;
226
- });
227
-
228
- buttons.forEach(button => {
229
- if(button.id !== 'resetBtn') {
230
- button.style.borderRadius = `${value}px`;
231
- }
232
- });
233
- });
234
-
235
- // Reset button
236
- const resetBtn = document.getElementById('resetBtn');
237
- resetBtn.addEventListener('click', function() {
238
- // Reset color
239
- header.className = 'gradient-bg text-white';
240
- primaryButtons.forEach(btn => {
241
- btn.className = btn.className.replace(/bg-(blue|green|red)-600/g, 'gradient-bg');
242
- });
243
-
244
- // Reset dark mode
245
- darkModeToggle.checked = false;
246
- document.body.classList.remove('bg-gray-900', 'text-white');
247
- document.body.classList.add('bg-gray-50');
248
-
249
- // Reset radius
250
- radiusSlider.value = 8;
251
- const cards = document.querySelectorAll('.card-hover');
252
- const buttons = document.querySelectorAll('button');
253
-
254
- cards.forEach(card => {
255
- card.style.borderRadius = '';
256
- });
257
-
258
- buttons.forEach(button => {
259
- if(button.id !== 'resetBtn') {
260
- button.style.borderRadius = '';
261
- }
262
- });
263
- });
264
- });
265
- </script>
266
- <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=Judemon/muduf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
267
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>My app</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
+ <div class="w-full">
11
+ <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
+ <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
+ <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
+ Ask me anything.
15
+ </h1>
16
+ </div>
17
+ <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
+ <script></script>
19
+ <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=Judemon/muduf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
20
+ </html>