Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>NeuralNomadAI — Gemini Share Embed Demo</title> | |
| <!-- Google fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind utilities CDN --> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms"></script> | |
| <!-- Local CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="font-display bg-gradient-to-b from-[#071017] to-[#07121a] text-gray-100"> | |
| <!-- Simple header --> | |
| <header class="site-header"> | |
| <div class="container nav-inner"> | |
| <div class="brand"> | |
| <div class="logo" aria-hidden="true"></div> | |
| <span class="brand-name">NeuralNomadAI</span> | |
| </div> | |
| <nav class="nav-links" aria-label="Primary Navigation"> | |
| <a href="#home" class="nav-link active">Home</a> | |
| <a href="#services" class="nav-link">Services</a> | |
| <a href="#portfolio" class="nav-link">Portfolio</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </nav> | |
| <div class="nav-cta"> | |
| <button class="btn btn-outline">Login</button> | |
| <button class="btn btn-primary">Get Started</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- HERO --> | |
| <section id="home" class="hero-section"> | |
| <div class="hero-overlay"></div> | |
| <div class="container hero-inner"> | |
| <h1 class="hero-title">Unleash Your Creative Vision with AI</h1> | |
| <p class="hero-sub">NeuralNomadAI empowers creators with cutting-edge AI tools for imagery and automation.</p> | |
| <div class="hero-ctas mt-6"> | |
| <a href="#contact" class="btn btn-primary large">Get Started</a> | |
| <a href="#services" class="btn btn-muted large">Explore Features</a> | |
| </div> | |
| <!-- Gemini share preview card (centered under CTAs) --> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="gemini-card" id="geminiCard" role="region" aria-labelledby="geminiTitle" aria-describedby="geminiDesc"> | |
| <div class="gemini-thumb" aria-hidden="true"> | |
| <!-- stylized thumbnail or icon --> | |
| <svg width="64" height="64" viewBox="0 0 24 24" fill="none" class="text-sky-400" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="24" height="24" rx="6" fill="currentColor" opacity="0.12"/> | |
| <path d="M8 12h8M8 8h8M8 16h8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| <div class="gemini-meta"> | |
| <h3 id="geminiTitle" class="gemini-title">View Gemini Share</h3> | |
| <p id="geminiDesc" class="gemini-desc">Interactive preview — opens an in-page viewer that mirrors the shared Gemini conversation.</p> | |
| <div class="gemini-actions"> | |
| <button id="openGeminiBtn" class="btn btn-primary small">Open Preview</button> | |
| <a id="openGeminiNewTab" class="btn btn-outline small" target="_blank" rel="noopener">Open in new tab</a> | |
| <button id="copyGeminiLink" class="btn btn-muted small">Copy Link</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <main> | |
| <!-- rest of the page content simplified for the demo --> | |
| <section class="container section text-center"> | |
| <h2 class="section-title">Quick Pitch</h2> | |
| <p class="lead">NeuralNomadAI — modern interface, Gemini share preview embedded for demonstration.</p> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="site-footer"> | |
| <div class="container footer-row"> | |
| <div>© 2025 NeuralNomadAI. All rights reserved.</div> | |
| <div class="footer-links"> | |
| <a>Terms</a> | |
| <a>Privacy</a> | |
| <a>Contact</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal for Gemini iframe --> | |
| <div id="geminiModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true"> | |
| <div class="modal-backdrop" data-close="true"></div> | |
| <div class="modal-panel" role="document"> | |
| <header class="modal-header"> | |
| <h3 id="modalTitle">Gemini Share Preview</h3> | |
| <div class="modal-controls"> | |
| <button id="copyLinkModal" class="btn btn-muted small">Copy Link</button> | |
| <a id="openNewTabModal" class="btn btn-outline small" target="_blank" rel="noopener">Open in new tab</a> | |
| <button id="closeModal" class="btn btn-outline small" aria-label="Close preview">Close</button> | |
| </div> | |
| </header> | |
| <div class="modal-body"> | |
| <!-- lazy-loaded iframe --> | |
| <div id="iframeContainer" class="iframe-container" aria-live="polite"> | |
| <div class="iframe-fallback"> | |
| Loading preview... If the preview cannot be shown, you can open it in a new tab. | |
| </div> | |
| <!-- iframe element will be created dynamically on demand --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // ==== Gemini share integration script ==== | |
| (function () { | |
| const GEMINI_URL = 'https://g.co/gemini/share/4388c23581b0'; // provided share URL | |
| const openGeminiBtn = document.getElementById('openGeminiBtn'); | |
| const openGeminiNewTab = document.getElementById('openGeminiNewTab'); | |
| const copyGeminiLink = document.getElementById('copyGeminiLink'); | |
| const geminiModal = document.getElementById('geminiModal'); | |
| const iframeContainer = document.getElementById('iframeContainer'); | |
| const closeModalBtn = document.getElementById('closeModal'); | |
| const copyLinkModal = document.getElementById('copyLinkModal'); | |
| const openNewTabModal = document.getElementById('openNewTabModal'); | |
| // Set the anchor hrefs | |
| openGeminiNewTab.href = GEMINI_URL; | |
| openNewTabModal.href = GEMINI_URL; | |
| // Copy helper | |
| async function copyToClipboard(text) { | |
| try { | |
| await navigator.clipboard.writeText(text); | |
| return true; | |
| } catch (err) { | |
| console.warn('Clipboard copy failed:', err); | |
| return false; | |
| } | |
| } | |
| // Create iframe lazily and inject to container | |
| function createIframe(url) { | |
| // remove any previous iframe | |
| iframeContainer.querySelectorAll('iframe').forEach(n => n.remove()); | |
| const iframe = document.createElement('iframe'); | |
| iframe.className = 'gemini-iframe'; | |
| // set src only when creating (lazy) | |
| iframe.src = url; | |
| // sandbox to reduce risk; allow-same-origin if Gemini needs it | |
| // You can adjust sandbox flags if needed. | |
| iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups'); | |
| iframe.setAttribute('loading', 'lazy'); | |
| iframe.setAttribute('referrerpolicy', 'no-referrer'); | |
| iframe.setAttribute('title', 'Gemini share preview'); | |
| // optional: handle load / error states | |
| iframe.addEventListener('load', () => { | |
| // hide fallback message | |
| const fb = iframeContainer.querySelector('.iframe-fallback'); | |
| if (fb) fb.style.display = 'none'; | |
| }); | |
| iframe.addEventListener('error', () => { | |
| const fb = iframeContainer.querySelector('.iframe-fallback'); | |
| if (fb) fb.textContent = 'Preview failed to load. You can open the share in a new tab.'; | |
| // remove iframe to avoid confusion | |
| iframe.remove(); | |
| }); | |
| iframeContainer.appendChild(iframe); | |
| return iframe; | |
| } | |
| // Open modal (creates iframe if needed) | |
| function openModal() { | |
| // show modal | |
| geminiModal.classList.remove('hidden'); | |
| geminiModal.setAttribute('aria-hidden', 'false'); | |
| // Focus management: focus the close button quickly | |
| closeModalBtn.focus(); | |
| // If there's no iframe yet, create it lazily | |
| if (!iframeContainer.querySelector('iframe')) { | |
| createIframe(GEMINI_URL); | |
| } | |
| // add key listener for Esc | |
| document.addEventListener('keydown', onKeyDown); | |
| trapFocus(geminiModal); | |
| } | |
| // Close modal and clean up | |
| function closeModal() { | |
| geminiModal.classList.add('hidden'); | |
| geminiModal.setAttribute('aria-hidden', 'true'); | |
| // Optionally keep the iframe for faster reopen, or remove to free memory: | |
| // iframeContainer.querySelectorAll('iframe').forEach(i => i.remove()); | |
| document.removeEventListener('keydown', onKeyDown); | |
| releaseFocusTrap(); | |
| } | |
| function onKeyDown(e) { | |
| if (e.key === 'Escape') closeModal(); | |
| } | |
| // Basic focus trap for accessibility | |
| let previousActive = null; | |
| function trapFocus(modal) { | |
| previousActive = document.activeElement; | |
| const focusable = modal.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'); | |
| const first = focusable[0]; | |
| const last = focusable[focusable.length - 1]; | |
| function handleTrap(e) { | |
| if (e.key !== 'Tab') return; | |
| if (e.shiftKey && document.activeElement === first) { | |
| e.preventDefault(); | |
| last.focus(); | |
| } else if (!e.shiftKey && document.activeElement === last) { | |
| e.preventDefault(); | |
| first.focus(); | |
| } | |
| } | |
| modal._trapHandler = handleTrap; | |
| modal.addEventListener('keydown', handleTrap); | |
| } | |
| function releaseFocusTrap() { | |
| const modal = geminiModal; | |
| if (modal && modal._trapHandler) { | |
| modal.removeEventListener('keydown', modal._trapHandler); | |
| modal._trapHandler = null; | |
| } | |
| if (previousActive && previousActive.focus) previousActive.focus(); | |
| } | |
| // clicking the backdrop closes modal | |
| document.querySelectorAll('.modal-backdrop').forEach(b => { | |
| b.addEventListener('click', closeModal); | |
| }); | |
| // Event bindings | |
| openGeminiBtn.addEventListener('click', openModal); | |
| closeModalBtn.addEventListener('click', closeModal); | |
| copyGeminiLink.addEventListener('click', async () => { | |
| const ok = await copyToClipboard(GEMINI_URL); | |
| const btn = copyGeminiLink; | |
| const orig = btn.textContent; | |
| btn.textContent = ok ? 'Copied!' : 'Copy failed'; | |
| setTimeout(() => btn.textContent = orig, 1600); | |
| }); | |
| copyLinkModal.addEventListener('click', async () => { | |
| const ok = await copyToClipboard(GEMINI_URL); | |
| const btn = copyLinkModal; | |
| const orig = btn.textContent; | |
| btn.textContent = ok ? 'Copied!' : 'Copy failed'; | |
| setTimeout(() => btn.textContent = orig, 1600); | |
| }); | |
| // If iframe is blocked by X-Frame-Options/CSP, the iframe will error and fallback message will show. | |
| // The "Open in new tab" link remains available as a reliable fallback. | |
| // Small enhancement: try to preconnect to the domain to reduce latency (non-blocking) | |
| (function preconnect() { | |
| try { | |
| const l = document.createElement('link'); | |
| l.rel = 'preconnect'; | |
| l.href = 'https://g.co'; | |
| l.crossOrigin = 'anonymous'; | |
| document.head.appendChild(l); | |
| } catch (e) { /* noop */ } | |
| })(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |