Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Uni-Vision AI Suite</title> | |
| <style> | |
| :root { | |
| --primary-gradient: linear-gradient(120deg, #2b4162 0%, #12100e 100%); | |
| --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --shadow-color: rgba(0, 0, 0, 0.2); | |
| --text-primary: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.8); | |
| --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| body { | |
| background: var(--primary-gradient); | |
| min-height: 100vh; | |
| padding: 2rem; | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| padding: 3rem 2rem; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 20px 40px var(--shadow-color); | |
| transform: translateZ(0); | |
| } | |
| .header h1 { | |
| font-size: 3.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: -0.02em; | |
| } | |
| .header p { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| line-height: 1.6; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| justify-content: center; | |
| perspective: 1000px; | |
| } | |
| .tab { | |
| padding: 1rem 2.5rem; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 1.1rem; | |
| font-weight: 500; | |
| backdrop-filter: blur(10px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--accent-gradient); | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: -1; | |
| } | |
| .tab:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .tab:hover::before { | |
| opacity: 0.1; | |
| } | |
| .tab.active { | |
| background: var(--accent-gradient); | |
| box-shadow: 0 15px 30px rgba(102, 126, 234, 0.25); | |
| transform: translateY(-5px); | |
| } | |
| .iframe-container { | |
| background: var(--glass-bg); | |
| padding: 1.5rem; | |
| border-radius: 24px; | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 30px 60px var(--shadow-color); | |
| backdrop-filter: blur(20px); | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transition: var(--transition); | |
| } | |
| .iframe-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| background: var(--accent-gradient); | |
| border-radius: 24px; | |
| z-index: -1; | |
| opacity: 0.1; | |
| transition: var(--transition); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 700px; | |
| border-radius: 16px; | |
| transition: var(--transition); | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.98); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| iframe.active { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| .loading { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: var(--text-primary); | |
| font-size: 1.2rem; | |
| display: none; | |
| z-index: 10; | |
| } | |
| .loading.active { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .loading::after { | |
| content: ''; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--text-secondary); | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .footer { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| margin-top: 3rem; | |
| padding: 1.5rem; | |
| font-size: 1rem; | |
| opacity: 0.8; | |
| background: var(--glass-bg); | |
| border-radius: 16px; | |
| backdrop-filter: blur(10px); | |
| } | |
| /* Modern Grid Layout for larger screens */ | |
| @media (min-width: 1200px) { | |
| .container { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .tabs { | |
| position: sticky; | |
| top: 2rem; | |
| z-index: 100; | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| } | |
| .tabs { | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .tab { | |
| flex: 1 1 calc(50% - 0.5rem); | |
| padding: 0.8rem; | |
| font-size: 0.9rem; | |
| } | |
| iframe { | |
| height: 500px; | |
| } | |
| } | |
| /* Modern Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--accent-gradient); | |
| border-radius: 4px; | |
| } | |
| /* Animation Keyframes */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>Domain-Vision AI Suite</h1> | |
| <p>Experience the future of AI-powered analysis across legal, technical, academic, and financial domains</p> | |
| </header> | |
| <div class="tabs"> | |
| <button class="tab active" data-tab="legal"> | |
| Legal Vision | |
| </button> | |
| <button class="tab" data-tab="tech"> | |
| Tech Vision | |
| </button> | |
| <button class="tab" data-tab="scholar"> | |
| Scholar Vision | |
| </button> | |
| <button class="tab" data-tab="fin"> | |
| Fin Vision | |
| </button> | |
| </div> | |
| <div class="iframe-container"> | |
| <div class="loading">Loading Vision Interface...</div> | |
| <iframe id="vision-frame" | |
| src="https://cosmickvisions-legal-visions.hf.space" | |
| frameborder="0" | |
| class="active" | |
| allow="accelerometer; camera; microphone"> | |
| </iframe> | |
| </div> | |
| <footer class="footer"> | |
| <p>© 2024 Calvin Allen Crawford | Powered by Advanced AI Technology</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const tabs = document.querySelectorAll('.tab'); | |
| const iframe = document.getElementById('vision-frame'); | |
| const loading = document.querySelector('.loading'); | |
| const urls = { | |
| legal: 'https://cosmickvisions-legal-visions.hf.space', | |
| tech: 'https://cosmickvisions-tech-vision.hf.space', | |
| scholar: 'https://cosmickvisions-scholar-vision.hf.space', | |
| fin: 'https://cosmickvisions-fin-vision.hf.space' | |
| }; | |
| // Add hover effect to iframe container | |
| const iframeContainer = document.querySelector('.iframe-container'); | |
| iframeContainer.addEventListener('mousemove', (e) => { | |
| const { left, top, width, height } = iframeContainer.getBoundingClientRect(); | |
| const x = (e.clientX - left) / width; | |
| const y = (e.clientY - top) / height; | |
| iframeContainer.style.transform = ` | |
| perspective(1000px) | |
| rotateX(${(y - 0.5) * 2}deg) | |
| rotateY(${(x - 0.5) * 2}deg) | |
| `; | |
| }); | |
| iframeContainer.addEventListener('mouseleave', () => { | |
| iframeContainer.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'; | |
| }); | |
| function switchTab(tabName) { | |
| // Update active tab with animation | |
| tabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| if(tab.dataset.tab === tabName) { | |
| tab.classList.add('active'); | |
| tab.style.animation = 'pulse 0.4s ease'; | |
| setTimeout(() => tab.style.animation = '', 400); | |
| } | |
| }); | |
| // Show loading state | |
| iframe.classList.remove('active'); | |
| loading.classList.add('active'); | |
| // Change iframe source | |
| iframe.src = urls[tabName]; | |
| // Handle iframe load completion | |
| iframe.onload = () => { | |
| loading.classList.remove('active'); | |
| iframe.classList.add('active'); | |
| }; | |
| } | |
| // Add click handlers to tabs | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const tabName = tab.dataset.tab; | |
| switchTab(tabName); | |
| }); | |
| }); | |
| // Add keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.altKey) { | |
| switch(e.key) { | |
| case '1': switchTab('legal'); break; | |
| case '2': switchTab('tech'); break; | |
| case '3': switchTab('scholar'); break; | |
| case '4': switchTab('fin'); break; | |
| } | |
| } | |
| }); | |
| // Handle iframe loading errors | |
| iframe.onerror = () => { | |
| loading.textContent = 'Error loading content. Please try again.'; | |
| }; | |
| // Add initial animation | |
| document.querySelector('.header').style.animation = 'fadeIn 0.8s ease-out forwards'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |