Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Perplexity AI Clone - Floating Card</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'neutral-50': '#FEFEFE', | |
| 'neutral-100': '#F9F8F4', | |
| 'neutral-200': '#F0EFEB', | |
| 'neutral-300': '#E5E4E0', | |
| 'teal-600': '#1D7874', | |
| 'charcoal': '#2D2D2D', | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| background-color: #F9F8F4; /* neutral-100 */ | |
| } | |
| .sidebar-icon { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-icon:hover { | |
| background-color: #F0EFEB; /* neutral-200 */ | |
| transform: translateY(-1px); | |
| } | |
| .floating-card { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| bottom: 8px; | |
| left: 78px; /* 70px sidebar + 8px gap */ | |
| background-color: #F9F8F4; /* neutral-100 */ | |
| border-radius: 24px; | |
| overflow: hidden; | |
| } | |
| .card-content { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| background-color: #FEFEFE; /* neutral-50 */ | |
| border-radius: 20px; | |
| border: 1px solid rgba(226, 232, 240, 0.3); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); | |
| overflow-y: auto; | |
| } | |
| .search-container { | |
| background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(226, 232, 240, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .search-container:hover { | |
| box-shadow: 0 12px 40px rgba(29, 120, 116, 0.08); | |
| transform: translateY(-1px); | |
| } | |
| .search-input { | |
| transition: all 0.3s ease; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: #1D7874; /* teal-600 */ | |
| box-shadow: 0 0 0 3px rgba(29, 120, 116, 0.1); | |
| } | |
| .info-card { | |
| transition: all 0.2s ease; | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(226, 232, 240, 0.3); | |
| } | |
| .info-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); | |
| border-color: rgba(29, 120, 116, 0.2); | |
| } | |
| .pulse-dot { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.4; } | |
| 50% { opacity: 1; } | |
| } | |
| .perplexity-logo { | |
| font-size: 1.75rem; | |
| font-weight: 400; | |
| letter-spacing: -0.02em; | |
| color: #2D2D2D; /* charcoal */ | |
| } | |
| .sidebar-label { | |
| font-size: 0.65rem; | |
| letter-spacing: 0.5px; | |
| margin-top: 4px; | |
| color: #2D2D2D; /* charcoal */ | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <!-- Sidebar - Now 70px wide (10px narrower than before) with no background/border --> | |
| <div class="fixed left-0 top-0 h-full w-[70px] flex flex-col items-center py-6 z-10"> | |
| <!-- Logo --> | |
| <div class="mb-8"> | |
| <div class="w-8 h-8 flex items-center justify-center"> | |
| <div class="w-6 h-6 bg-teal-600 rounded-sm flex items-center justify-center"> | |
| <div class="w-3 h-3 bg-white rounded-sm transform rotate-45"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add button --> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mb-6"> | |
| <i class="fas fa-plus text-sm"></i> | |
| </button> | |
| <!-- Navigation Icons --> | |
| <div class="flex flex-col space-y-3"> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal bg-neutral-200"> | |
| <i class="fas fa-home text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center">Home</span> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4"> | |
| <i class="fas fa-compass text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center">Discover</span> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4"> | |
| <i class="fas fa-layer-group text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center">Spaces</span> | |
| </div> | |
| <!-- Bottom Icons --> | |
| <div class="mt-auto flex flex-col space-y-3"> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal"> | |
| <i class="fas fa-user text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center">Account</span> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-teal-600 mt-4"> | |
| <i class="fas fa-arrow-up text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center">Upgrade</span> | |
| <button class="sidebar-icon w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:text-charcoal mt-4"> | |
| <i class="fas fa-download text-sm"></i> | |
| </button> | |
| <span class="sidebar-label text-center mb-4">Install</span> | |
| </div> | |
| </div> | |
| <!-- Floating Card Container --> | |
| <div class="floating-card"> | |
| <!-- Card Content --> | |
| <div class="card-content p-8"> | |
| <!-- Logo/Title --> | |
| <div class="text-center mb-16 pt-8"> | |
| <h1 class="perplexity-logo">perplexity</h1> | |
| </div> | |
| <!-- Search Container --> | |
| <div class="search-container rounded-2xl p-8 mb-16 max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| class="search-input w-full px-4 py-4 text-lg border border-neutral-300 rounded-xl bg-white/50 placeholder-charcoal/50" | |
| placeholder="Ask anything..." | |
| > | |
| <!-- Status dot --> | |
| <div class="absolute right-4 top-1/2 transform -translate-y-1/2"> | |
| <div class="w-2 h-2 bg-teal-600 rounded-full pulse-dot"></div> | |
| </div> | |
| </div> | |
| <!-- Action buttons --> | |
| <div class="flex items-center space-x-4 mt-8"> | |
| <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"> | |
| <i class="fas fa-search text-sm"></i> | |
| <span>Search</span> | |
| </button> | |
| <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"> | |
| <i class="fas fa-microscope text-sm text-charcoal"></i> | |
| <span>Research</span> | |
| </button> | |
| <!-- Right side icons --> | |
| <div class="flex items-center space-x-3 ml-auto"> | |
| <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition"> | |
| <i class="fas fa-paperclip text-sm"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition"> | |
| <i class="fas fa-globe text-sm"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition"> | |
| <i class="fas fa-link text-sm"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg flex items-center justify-center text-charcoal hover:bg-neutral-200 transition"> | |
| <i class="fas fa-microphone text-sm"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg bg-teal-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-chart-bar text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Cards --> | |
| <div class="grid grid-cols-3 gap-6 max-w-4xl mx-auto mb-16"> | |
| <!-- Weather Card --> | |
| <div class="info-card rounded-xl p-6"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="text-2xl">☀️</div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="font-semibold text-charcoal text-lg">22°C</div> | |
| <div class="text-sm text-charcoal/70">Mostly cloudy</div> | |
| <div class="text-xs text-charcoal/50 mt-2">Ronald Ngala...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Card 1 --> | |
| <div class="info-card rounded-xl p-6"> | |
| <div class="flex items-start space-x-3"> | |
| <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" | |
| alt="News" class="w-8 h-8 rounded"> | |
| <div class="flex-1 min-w-0"> | |
| <div class="font-medium text-charcoal text-sm leading-tight">North Korea arrests 3 over failed destroyer...</div> | |
| <div class="text-xs text-charcoal/50 mt-2">H: 26° L: 15°</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Card 2 --> | |
| <div class="info-card rounded-xl p-6"> | |
| <div class="flex items-start space-x-3"> | |
| <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" | |
| alt="News" class="w-8 h-8 rounded"> | |
| <div class="flex-1 min-w-0"> | |
| <div class="font-medium text-charcoal text-sm leading-tight">US to let Chevron's license to operate in...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="text-center pb-8"> | |
| <div class="flex items-center justify-center space-x-8 text-sm text-charcoal/70"> | |
| <a href="#" class="hover:text-charcoal transition">Pro</a> | |
| <a href="#" class="hover:text-charcoal transition">Enterprise</a> | |
| <a href="#" class="hover:text-charcoal transition">API</a> | |
| <a href="#" class="hover:text-charcoal transition">Blog</a> | |
| <a href="#" class="hover:text-charcoal transition">Privacy</a> | |
| <a href="#" class="hover:text-charcoal transition">Careers</a> | |
| <a href="#" class="hover:text-charcoal transition">Store</a> | |
| <a href="#" class="hover:text-charcoal transition">Finance</a> | |
| <div class="flex items-center space-x-1"> | |
| <span>English</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| <button class="text-charcoal/70 hover:text-charcoal transition"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add focus effects to search input | |
| const searchInput = document.querySelector('.search-input'); | |
| const searchContainer = document.querySelector('.search-container'); | |
| searchInput.addEventListener('focus', function() { | |
| searchContainer.style.boxShadow = '0 20px 50px rgba(29, 120, 116, 0.1)'; | |
| searchContainer.style.transform = 'translateY(-2px)'; | |
| }); | |
| searchInput.addEventListener('blur', function() { | |
| searchContainer.style.boxShadow = ''; | |
| searchContainer.style.transform = ''; | |
| }); | |
| // Add click handlers for sidebar icons | |
| const sidebarButtons = document.querySelectorAll('.sidebar-icon'); | |
| sidebarButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Remove active class from all buttons | |
| sidebarButtons.forEach(btn => { | |
| btn.classList.remove('bg-neutral-200', 'text-charcoal'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.add('bg-neutral-200', 'text-charcoal'); | |
| }); | |
| }); | |
| // Simulate typing in search input | |
| const placeholders = [ | |
| "Ask anything...", | |
| "What's the weather like today?", | |
| "Explain quantum computing", | |
| "Write a Python function", | |
| "Latest news about AI" | |
| ]; | |
| let currentIndex = 0; | |
| setInterval(() => { | |
| if (searchInput !== document.activeElement) { | |
| currentIndex = (currentIndex + 1) % placeholders.length; | |
| searchInput.placeholder = placeholders[currentIndex]; | |
| } | |
| }, 3000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |