Hugging Face's logo

Spaces:
kamau1
/
perplexity-clone
Running

App Files Community
kamau1 commited on
Commit
467c3c3
·
verified ·
1 Parent(s): 01decb2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +342 -38
index.html CHANGED
@@ -1,41 +1,345 @@
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
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=kamau1/perplexity-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>Perplexity AI Clone - Floating Card</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'neutral-50': '#FEFEFE',
15
+ 'neutral-100': '#F9F8F4',
16
+ 'neutral-200': '#F0EFEB',
17
+ 'neutral-300': '#E5E4E0',
18
+ 'teal-600': '#1D7874',
19
+ 'charcoal': '#2D2D2D',
20
+ },
21
+ fontFamily: {
22
+ 'sans': ['Inter', 'system-ui', 'sans-serif'],
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
  <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
30
+
31
+ body {
32
+ background-color: #F9F8F4; /* neutral-100 */
33
+ }
34
+
35
+ .sidebar-icon {
36
+ transition: all 0.2s ease;
37
+ }
38
+
39
+ .sidebar-icon:hover {
40
+ background-color: #F0EFEB; /* neutral-200 */
41
+ transform: translateY(-1px);
42
+ }
43
+
44
+ .floating-card {
45
+ position: absolute;
46
+ top: 8px;
47
+ right: 8px;
48
+ bottom: 8px;
49
+ left: 78px; /* 70px sidebar + 8px gap */
50
+ background-color: #F9F8F4; /* neutral-100 */
51
+ border-radius: 24px;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .card-content {
56
+ position: relative;
57
+ height: 100%;
58
+ width: 100%;
59
+ background-color: #FEFEFE; /* neutral-50 */
60
+ border-radius: 20px;
61
+ border: 1px solid rgba(226, 232, 240, 0.3);
62
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
63
+ overflow-y: auto;
64
+ }
65
+
66
+ .search-container {
67
+ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
68
+ backdrop-filter: blur(20px);
69
+ border: 1px solid rgba(226, 232, 240, 0.3);
70
+ transition: all 0.3s ease;
71
+ }
72
+
73
+ .search-container:hover {
74
+ box-shadow: 0 12px 40px rgba(29, 120, 116, 0.08);
75
+ transform: translateY(-1px);
76
+ }
77
+
78
+ .search-input {
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .search-input:focus {
83
+ outline: none;
84
+ border-color: #1D7874; /* teal-600 */
85
+ box-shadow: 0 0 0 3px rgba(29, 120, 116, 0.1);
86
+ }
87
+
88
+ .info-card {
89
+ transition: all 0.2s ease;
90
+ background: rgba(255, 255, 255, 0.8);
91
+ backdrop-filter: blur(10px);
92
+ border: 1px solid rgba(226, 232, 240, 0.3);
93
+ }
94
+
95
+ .info-card:hover {
96
+ transform: translateY(-2px);
97
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
98
+ border-color: rgba(29, 120, 116, 0.2);
99
+ }
100
+
101
+ .pulse-dot {
102
+ animation: pulse 2s ease-in-out infinite;
103
+ }
104
+
105
+ @keyframes pulse {
106
+ 0%, 100% { opacity: 0.4; }
107
+ 50% { opacity: 1; }
108
+ }
109
+
110
+ .perplexity-logo {
111
+ font-size: 1.75rem;
112
+ font-weight: 400;
113
+ letter-spacing: -0.02em;
114
+ color: #2D2D2D; /* charcoal */
115
+ }
116
+
117
+ .sidebar-label {
118
+ font-size: 0.65rem;
119
+ letter-spacing: 0.5px;
120
+ margin-top: 4px;
121
+ color: #2D2D2D; /* charcoal */
122
+ }
123
  </style>
124
+ </head>
125
+ <body class="font-sans">
126
+ <!-- Sidebar - Now 70px wide (10px narrower than before) with no background/border -->
127
+ <div class="fixed left-0 top-0 h-full w-[70px] flex flex-col items-center py-6 z-10">
128
+ <!-- Logo -->
129
+ <div class="mb-8">
130
+ <div class="w-8 h-8 flex items-center justify-center">
131
+ <div class="w-6 h-6 bg-teal-600 rounded-sm flex items-center justify-center">
132
+ <div class="w-3 h-3 bg-white rounded-sm transform rotate-45"></div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Add button -->
138
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mb-6">
139
+ <i class="fas fa-plus text-sm"></i>
140
+ </button>
141
+
142
+ <!-- Navigation Icons -->
143
+ <div class="flex flex-col space-y-3">
144
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal bg-neutral-200">
145
+ <i class="fas fa-home text-sm"></i>
146
+ </button>
147
+ <span class="sidebar-label text-center">Home</span>
148
+
149
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4">
150
+ <i class="fas fa-compass text-sm"></i>
151
+ </button>
152
+ <span class="sidebar-label text-center">Discover</span>
153
+
154
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4">
155
+ <i class="fas fa-layer-group text-sm"></i>
156
+ </button>
157
+ <span class="sidebar-label text-center">Spaces</span>
158
+ </div>
159
+
160
+ <!-- Bottom Icons -->
161
+ <div class="mt-auto flex flex-col space-y-3">
162
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal">
163
+ <i class="fas fa-user text-sm"></i>
164
+ </button>
165
+ <span class="sidebar-label text-center">Account</span>
166
+
167
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-teal-600 mt-4">
168
+ <i class="fas fa-arrow-up text-sm"></i>
169
+ </button>
170
+ <span class="sidebar-label text-center">Upgrade</span>
171
+
172
+ <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4">
173
+ <i class="fas fa-download text-sm"></i>
174
+ </button>
175
+ <span class="sidebar-label text-center mb-4">Install</span>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Floating Card Container -->
180
+ <div class="floating-card">
181
+ <!-- Card Content -->
182
+ <div class="card-content p-8">
183
+ <!-- Logo/Title -->
184
+ <div class="text-center mb-16 pt-8">
185
+ <h1 class="perplexity-logo">perplexity</h1>
186
+ </div>
187
+
188
+ <!-- Search Container -->
189
+ <div class="search-container rounded-2xl p-8 mb-16 max-w-4xl mx-auto">
190
+ <div class="relative">
191
+ <input
192
+ type="text"
193
+ class="search-input w-full px-4 py-4 text-lg border border-neutral-300 rounded-xl bg-white/50 placeholder-charcoal/50"
194
+ placeholder="Ask anything..."
195
+ >
196
+
197
+ <!-- Status dot -->
198
+ <div class="absolute right-4 top-1/2 transform -translate-y-1/2">
199
+ <div class="w-2 h-2 bg-teal-600 rounded-full pulse-dot"></div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Action buttons -->
204
+ <div class="flex items-center space-x-4 mt-8">
205
+ <button class="flex items-center space-x-2 bg-teal-600 text-white px-8 py-3 rounded-lg hover:bg-teal-600/90 transition font-medium">
206
+ <i class="fas fa-search text-sm"></i>
207
+ <span>Search</span>
208
+ </button>
209
+ <button class="flex items-center space-x-2 border border-neutral-300 px-8 py-3 rounded-lg hover:bg-neutral-100 transition font-medium">
210
+ <i class="fas fa-microscope text-sm text-charcoal"></i>
211
+ <span>Research</span>
212
+ </button>
213
+
214
+ <!-- Right side icons -->
215
+ <div class="flex items-center space-x-3 ml-auto">
216
+ <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition">
217
+ <i class="fas fa-paperclip text-sm"></i>
218
+ </button>
219
+ <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition">
220
+ <i class="fas fa-globe text-sm"></i>
221
+ </button>
222
+ <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition">
223
+ <i class="fas fa-link text-sm"></i>
224
+ </button>
225
+ <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition">
226
+ <i class="fas fa-microphone text-sm"></i>
227
+ </button>
228
+ <button class="w-10 h-10 rounded-lg bg-teal-600 flex items-center justify-center text-white">
229
+ <i class="fas fa-chart-bar text-sm"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Info Cards -->
236
+ <div class="grid grid-cols-3 gap-6 max-w-4xl mx-auto mb-16">
237
+ <!-- Weather Card -->
238
+ <div class="info-card rounded-xl p-6">
239
+ <div class="flex items-start space-x-3">
240
+ <div class="text-2xl">☀️</div>
241
+ <div class="flex-1 min-w-0">
242
+ <div class="font-semibold text-charcoal text-lg">22°C</div>
243
+ <div class="text-sm text-charcoal/70">Mostly cloudy</div>
244
+ <div class="text-xs text-charcoal/50 mt-2">Ronald Ngala...</div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- News Card 1 -->
250
+ <div class="info-card rounded-xl p-6">
251
+ <div class="flex items-start space-x-3">
252
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%234A90E2'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-size='12' font-family='Arial'%3EKR%3C/text%3E%3C/svg%3E"
253
+ alt="News" class="w-8 h-8 rounded">
254
+ <div class="flex-1 min-w-0">
255
+ <div class="font-medium text-charcoal text-sm leading-tight">North Korea arrests 3 over failed destroyer...</div>
256
+ <div class="text-xs text-charcoal/50 mt-2">H: 26° L: 15°</div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- News Card 2 -->
262
+ <div class="info-card rounded-xl p-6">
263
+ <div class="flex items-start space-x-3">
264
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%23FF6B35'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-size='12' font-family='Arial'%3EUS%3C/text%3E%3C/svg%3E"
265
+ alt="News" class="w-8 h-8 rounded">
266
+ <div class="flex-1 min-w-0">
267
+ <div class="font-medium text-charcoal text-sm leading-tight">US to let Chevron's license to operate in...</div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Footer -->
274
+ <div class="text-center pb-8">
275
+ <div class="flex items-center justify-center space-x-8 text-sm text-charcoal/70">
276
+ <a href="#" class="hover:text-charcoal transition">Pro</a>
277
+ <a href="#" class="hover:text-charcoal transition">Enterprise</a>
278
+ <a href="#" class="hover:text-charcoal transition">API</a>
279
+ <a href="#" class="hover:text-charcoal transition">Blog</a>
280
+ <a href="#" class="hover:text-charcoal transition">Privacy</a>
281
+ <a href="#" class="hover:text-charcoal transition">Careers</a>
282
+ <a href="#" class="hover:text-charcoal transition">Store</a>
283
+ <a href="#" class="hover:text-charcoal transition">Finance</a>
284
+ <div class="flex items-center space-x-1">
285
+ <span>English</span>
286
+ <i class="fas fa-chevron-down text-xs"></i>
287
+ </div>
288
+ <button class="text-charcoal/70 hover:text-charcoal transition">
289
+ <i class="fas fa-question-circle"></i>
290
+ </button>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <script>
297
+ document.addEventListener('DOMContentLoaded', function() {
298
+ // Add focus effects to search input
299
+ const searchInput = document.querySelector('.search-input');
300
+ const searchContainer = document.querySelector('.search-container');
301
+
302
+ searchInput.addEventListener('focus', function() {
303
+ searchContainer.style.boxShadow = '0 20px 50px rgba(29, 120, 116, 0.1)';
304
+ searchContainer.style.transform = 'translateY(-2px)';
305
+ });
306
+
307
+ searchInput.addEventListener('blur', function() {
308
+ searchContainer.style.boxShadow = '';
309
+ searchContainer.style.transform = '';
310
+ });
311
+
312
+ // Add click handlers for sidebar icons
313
+ const sidebarButtons = document.querySelectorAll('.sidebar-icon');
314
+ sidebarButtons.forEach(button => {
315
+ button.addEventListener('click', function(e) {
316
+ e.preventDefault();
317
+ // Remove active class from all buttons
318
+ sidebarButtons.forEach(btn => {
319
+ btn.classList.remove('bg-neutral-200', 'text-charcoal');
320
+ });
321
+ // Add active class to clicked button
322
+ this.classList.add('bg-neutral-200', 'text-charcoal');
323
+ });
324
+ });
325
+
326
+ // Simulate typing in search input
327
+ const placeholders = [
328
+ "Ask anything...",
329
+ "What's the weather like today?",
330
+ "Explain quantum computing",
331
+ "Write a Python function",
332
+ "Latest news about AI"
333
+ ];
334
+
335
+ let currentIndex = 0;
336
+ setInterval(() => {
337
+ if (searchInput !== document.activeElement) {
338
+ currentIndex = (currentIndex + 1) % placeholders.length;
339
+ searchInput.placeholder = placeholders[currentIndex];
340
+ }
341
+ }, 3000);
342
+ });
343
+ </script>
344
+ </body>
345
+ </html>