Hugging Face's logo

Spaces:
techguy1
/
pretty
Running

App Files Community
techguy1 commited on
Commit
91f45b0
·
verified ·
1 Parent(s): 38f0ee5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +253 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pretty
3
- emoji: 📊
4
  colorFrom: yellow
5
- colorTo: green
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: pretty
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: purple
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,253 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeepSite - AI Website Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Inter', sans-serif;
12
+ }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
22
+ <header class="bg-white dark:bg-gray-800 shadow-sm">
23
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
24
+ <div class="flex items-center space-x-2">
25
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 text-blue-500">
26
+ <path d="M7.809 18.746V24.19H13.254V18.746H7.809z" fill="#FF3270"/>
27
+ <path d="M18.746 18.746V24.19H24.19V18.746H18.746z" fill="#861FFF"/>
28
+ <path d="M7.809 7.81V13.254H13.254V7.81H7.809z" fill="#097EFF"/>
29
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.418C4 5.082 5.082 4 6.418 4H14.646c1.117 0 2.057.757 2.335 1.786 1.17-1.107 2.75-1.786 4.488-1.786 3.607 0 6.532 2.924 6.532 6.532 0 1.738-.679 3.318-1.786 4.488.73.278 1.487 1.218 1.487 2.335v8.228c0 1.335-1.082 2.418-2.418 2.418H17.064H14.937H6.418C5.082 28 4 26.918 4 25.582V15.159V14.937V6.418z" fill="black"/>
30
+ <path d="M21.468 7.81c-1.503 0-2.722 1.218-2.722 2.722 0 1.503 1.219 2.722 2.722 2.722 1.504 0 2.722-1.219 2.722-2.722 0-1.504-1.218-2.722-2.722-2.722z" fill="#FFD702"/>
31
+ </svg>
32
+ <span class="text-xl font-bold">DeepSite</span>
33
+ </div>
34
+ <nav class="hidden md:flex space-x-6">
35
+ <a href="#" class="hover:text-blue-500 transition-colors">Home</a>
36
+ <a href="#" class="hover:text-blue-500 transition-colors">Features</a>
37
+ <a href="#" class="hover:text-blue-500 transition-colors">Examples</a>
38
+ <a href="#" class="hover:text-blue-500 transition-colors">Pricing</a>
39
+ </nav>
40
+ <button class="md:hidden">
41
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
42
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
43
+ </svg>
44
+ </button>
45
+ </div>
46
+ </header>
47
+
48
+ <main class="container mx-auto px-4 py-12">
49
+ <section class="text-center max-w-3xl mx-auto mb-16">
50
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">
51
+ Create Beautiful Websites <span class="gradient-text">With AI</span>
52
+ </h1>
53
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
54
+ DeepSite lets you create and deploy websites using AI without any coding.
55
+ Just provide your ideas, and let DeepSite turn them into a functional website.
56
+ </p>
57
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
58
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors">
59
+ Try It Now
60
+ </button>
61
+ <button class="border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 font-medium py-3 px-6 rounded-lg transition-colors">
62
+ Learn More
63
+ </button>
64
+ </div>
65
+ </section>
66
+
67
+ <section class="mb-16">
68
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
69
+ <div class="p-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
70
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-4">
71
+ <div class="flex items-center justify-between mb-4">
72
+ <div class="flex items-center space-x-2">
73
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
74
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
75
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
76
+ </div>
77
+ <div class="text-sm text-gray-500">index.html</div>
78
+ </div>
79
+ <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded overflow-x-auto">
80
+ <pre class="text-sm font-mono text-gray-800 dark:text-gray-200"><code>&lt;!DOCTYPE html&gt;
81
+ &lt;html lang="en"&gt;
82
+ &lt;head&gt;
83
+ &lt;meta charset="UTF-8"&gt;
84
+ &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
85
+ &lt;title&gt;My AI-Generated Website&lt;/title&gt;
86
+ &lt;link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"&gt;
87
+ &lt;/head&gt;
88
+ &lt;body class="bg-gray-50"&gt;
89
+ &lt;header class="bg-white shadow-sm"&gt;
90
+ &lt;div class="container mx-auto px-4 py-6"&gt;
91
+ &lt;h1 class="text-3xl font-bold text-blue-600"&gt;Welcome to My Site&lt;/h1&gt;
92
+ &lt;/div&gt;
93
+ &lt;/header&gt;
94
+ &lt;main class="container mx-auto px-4 py-12"&gt;
95
+ &lt;section class="text-center"&gt;
96
+ &lt;h2 class="text-2xl font-semibold mb-4"&gt;Generated by DeepSite AI&lt;/h2&gt;
97
+ &lt;p class="text-gray-600 max-w-2xl mx-auto"&gt;
98
+ This entire website was created automatically based on my simple description.
99
+ &lt;/p&gt;
100
+ &lt;/section&gt;
101
+ &lt;/main&gt;
102
+ &lt;/body&gt;
103
+ &lt;/html&gt;</code></pre>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <section class="grid md:grid-cols-3 gap-8 mb-16">
111
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
112
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
113
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
114
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
115
+ </svg>
116
+ </div>
117
+ <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
118
+ <p class="text-gray-600 dark:text-gray-300">
119
+ Generate complete websites in seconds with our powerful AI technology.
120
+ </p>
121
+ </div>
122
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
123
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
124
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
125
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
126
+ </svg>
127
+ </div>
128
+ <h3 class="text-xl font-semibold mb-2">No Coding Required</h3>
129
+ <p class="text-gray-600 dark:text-gray-300">
130
+ Create professional websites without writing a single line of code.
131
+ </p>
132
+ </div>
133
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
134
+ <div class="w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-full flex items-center justify-center mb-4">
135
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
136
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
137
+ </svg>
138
+ </div>
139
+ <h3 class="text-xl font-semibold mb-2">Responsive Design</h3>
140
+ <p class="text-gray-600 dark:text-gray-300">
141
+ All generated websites work perfectly on any device, from mobile to desktop.
142
+ </p>
143
+ </div>
144
+ </section>
145
+
146
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-8 text-white mb-16">
147
+ <div class="max-w-2xl mx-auto text-center">
148
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to Build Your Website?</h2>
149
+ <p class="mb-6 opacity-90">
150
+ Join thousands of creators who are building websites faster than ever before.
151
+ </p>
152
+ <button class="bg-white text-blue-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-colors">
153
+ Get Started for Free
154
+ </button>
155
+ </div>
156
+ </section>
157
+ </main>
158
+
159
+ <footer class="bg-gray-100 dark:bg-gray-800 py-12">
160
+ <div class="container mx-auto px-4">
161
+ <div class="flex flex-col md:flex-row justify-between items-center">
162
+ <div class="mb-6 md:mb-0">
163
+ <div class="flex items-center space-x-2">
164
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 text-blue-500">
165
+ <path d="M7.809 18.746V24.19H13.254V18.746H7.809z" fill="#FF3270"/>
166
+ <path d="M18.746 18.746V24.19H24.19V18.746H18.746z" fill="#861FFF"/>
167
+ <path d="M7.809 7.81V13.254H13.254V7.81H7.809z" fill="#097EFF"/>
168
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.418C4 5.082 5.082 4 6.418 4H14.646c1.117 0 2.057.757 2.335 1.786 1.17-1.107 2.75-1.786 4.488-1.786 3.607 0 6.532 2.924 6.532 6.532 0 1.738-.679 3.318-1.786 4.488.73.278 1.487 1.218 1.487 2.335v8.228c0 1.335-1.082 2.418-2.418 2.418H17.064H14.937H6.418C5.082 28 4 26.918 4 25.582V15.159V14.937V6.418z" fill="black"/>
169
+ <path d="M21.468 7.81c-1.503 0-2.722 1.218-2.722 2.722 0 1.503 1.219 2.722 2.722 2.722 1.504 0 2.722-1.219 2.722-2.722 0-1.504-1.218-2.722-2.722-2.722z" fill="#FFD702"/>
170
+ </svg>
171
+ <span class="text-xl font-bold">DeepSite</span>
172
+ </div>
173
+ <p class="mt-2 text-gray-600 dark:text-gray-300">
174
+ AI-powered website generation
175
+ </p>
176
+ </div>
177
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
178
+ <div>
179
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3>
180
+ <ul class="space-y-2">
181
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Features</a></li>
182
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Pricing</a></li>
183
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Examples</a></li>
184
+ </ul>
185
+ </div>
186
+ <div>
187
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3>
188
+ <ul class="space-y-2">
189
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">About</a></li>
190
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Blog</a></li>
191
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Careers</a></li>
192
+ </ul>
193
+ </div>
194
+ <div>
195
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3>
196
+ <ul class="space-y-2">
197
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Privacy</a></li>
198
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Terms</a></li>
199
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">Cookie Policy</a></li>
200
+ </ul>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center">
205
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
206
+ © 2023 DeepSite. All rights reserved.
207
+ </p>
208
+ <div class="flex space-x-6">
209
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
210
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
211
+ <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
212
+ </svg>
213
+ </a>
214
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
215
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
216
+ <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
217
+ </svg>
218
+ </a>
219
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
220
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
221
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
222
+ </svg>
223
+ </a>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </footer>
228
+
229
+ <script>
230
+ // Toggle dark mode
231
+ function toggleDarkMode() {
232
+ const html = document.documentElement;
233
+ html.classList.toggle('dark');
234
+ localStorage.setItem('darkMode', html.classList.contains('dark'));
235
+ }
236
+
237
+ // Check for saved dark mode preference
238
+ if (localStorage.getItem('darkMode') === 'true') {
239
+ document.documentElement.classList.add('dark');
240
+ } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
241
+ document.documentElement.classList.add('dark');
242
+ }
243
+
244
+ // Mobile menu toggle
245
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
246
+ const mobileMenu = document.querySelector('nav');
247
+
248
+ mobileMenuButton.addEventListener('click', () => {
249
+ mobileMenu.classList.toggle('hidden');
250
+ });
251
+ </script>
252
+ <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=techguy1/pretty" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
253
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ clean up index.html