Spaces:
Running
Running
| <html class="dark"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | |
| <meta name="description" content="Discover amazing ML apps made by the community" /> | |
| <!-- Existing meta tags remain the same --> | |
| <title>AI Web Scraper Chat - Hugging Face Space</title> | |
| <!-- Custom CSS --> | |
| <style> | |
| :root { | |
| --primary-color: #4F46E5; | |
| --secondary-color: #6B7280; | |
| --background-color: #1F2937; | |
| --text-color: #F9FAFB; | |
| --border-color: #374151; | |
| --hover-color: #6366F1; | |
| } | |
| /* Base styles */ | |
| body { | |
| font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header styles */ | |
| .main-header { | |
| background: linear-gradient(to bottom, #2D3748, var(--background-color)); | |
| padding: 1rem 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .site-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--text-color); | |
| text-decoration: none; | |
| } | |
| /* Navigation styles */ | |
| .main-nav { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-link { | |
| color: var(--text-color); | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link:hover { | |
| background-color: var(--hover-color); | |
| } | |
| /* Button styles */ | |
| .btn { | |
| background-color: var(--primary-color); | |
| color: var(--text-color); | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .btn:hover { | |
| background-color: var(--hover-color); | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Main content area */ | |
| .main-content { | |
| flex: 1; | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* Iframe container */ | |
| .space-iframe-container { | |
| background-color: #ffffff; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| margin-top: 2rem; | |
| } | |
| .space-iframe { | |
| width: 100%; | |
| height: calc(100vh - 200px); | |
| border: none; | |
| } | |
| /* Loading spinner */ | |
| .spinner-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| /* Back to top button */ | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background-color: var(--primary-color); | |
| color: var(--text-color); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| border: none; | |
| } | |
| .back-to-top.visible { | |
| opacity: 1; | |
| } | |
| /* Mobile styles */ | |
| @media (max-width: 768px) { | |
| .main-nav { | |
| display: none; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .main-content { | |
| padding: 1rem; | |
| } | |
| .space-iframe { | |
| height: calc(100vh - 150px); | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="main-header"> | |
| <div class="header-container"> | |
| <div class="logo-section"> | |
| <img src="/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="logo"> | |
| <a href="/" class="site-title">AI Web Scraper Chat</a> | |
| </div> | |
| <nav class="main-nav"> | |
| <a href="#" class="nav-link">Home</a> | |
| <a href="#" class="nav-link">Documentation</a> | |
| <a href="#" class="nav-link">Community</a> | |
| <button class="btn">Get Started</button> | |
| </nav> | |
| <button class="mobile-menu-btn" aria-label="Toggle mobile menu"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 12h18M3 6h18M3 18h18"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main content --> | |
| <main class="main-content"> | |
| <div class="space-iframe-container"> | |
| <iframe | |
| src="https://elevatics-ai-web-scraper-chat.hf.space/" | |
| class="space-iframe" | |
| allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr; wake-lock; xr-spatial-tracking" | |
| sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-storage-access-by-user-activation" | |
| scrolling="no"> | |
| </iframe> | |
| </div> | |
| </main> | |
| <!-- Loading spinner --> | |
| <div class="spinner-overlay" id="loading-spinner" style="display: none;"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Back to top button --> | |
| <button class="back-to-top" id="backToTop" aria-label="Back to top"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 19V5M5 12l7-7 7 7"></path> | |
| </svg> | |
| </button> | |
| <!-- JavaScript --> | |
| <script> | |
| // Loading spinner | |
| window.addEventListener('load', () => { | |
| document.getElementById('loading-spinner').style.display = 'none'; | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 300) { | |
| backToTopButton.classList.add('visible'); | |
| } else { | |
| backToTopButton.classList.remove('visible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Mobile menu | |
| const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); | |
| const mainNav = document.querySelector('.main-nav'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mainNav.style.display = mainNav.style.display === 'flex' ? 'none' : 'flex'; | |
| }); | |
| // Responsive iframe height | |
| function adjustIframeHeight() { | |
| const iframe = document.querySelector('.space-iframe'); | |
| const viewportHeight = window.innerHeight; | |
| const headerHeight = document.querySelector('.main-header').offsetHeight; | |
| iframe.style.height = `${viewportHeight - headerHeight - 40}px`; | |
| } | |
| window.addEventListener('resize', adjustIframeHeight); | |
| adjustIframeHeight(); | |
| </script> | |
| </body> | |
| </html> |