Spaces:

oldmonk69
/

gemini-ui-redesign

Running

App Files Files Community

Update index.html

by oldmonk69 - opened 28 days ago

base: refs/heads/main

←

from: refs/pr/6

Discussion Files changed

+218

-253

Files changed (1) hide show

index.html +218 -253

index.html CHANGED Viewed

@@ -3,30 +3,31 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>NeuralNomadAI — Creative AI Studio</title>
   <!-- Google fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
-  <!-- Tailwind (utility) + local CSS -->
   <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
   <link rel="stylesheet" href="style.css">
 </head>
-<body class="font-display bg-hero-bg text-gray-100">
-  <!-- NAV -->
   <header class="site-header">
     <div class="container nav-inner">
       <div class="brand">
-        <div class="logo"></div>
         <span class="brand-name">NeuralNomadAI</span>
       </div>
       <nav class="nav-links" aria-label="Primary Navigation">
-        <a data-page="home" class="nav-link active">Home</a>
-        <a data-page="services" class="nav-link">Services</a>
-        <a data-page="portfolio" class="nav-link">Portfolio</a>
-        <a data-page="pricing" class="nav-link">Pricing</a>
-        <a data-page="contact" class="nav-link">Contact</a>
       </nav>
       <div class="nav-cta">
         <button class="btn btn-outline">Login</button>
@@ -40,282 +41,246 @@
     <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, transforming ideas into stunning visuals and streamlined workflows.</p>
-      <div class="hero-ctas">
         <a href="#contact" class="btn btn-primary large">Get Started</a>
         <a href="#services" class="btn btn-muted large">Explore Features</a>
       </div>
     </div>
   </section>
   <main>
-    <!-- QUICK PITCH -->
-    <section class="container section section-compact text-center">
       <h2 class="section-title">Quick Pitch</h2>
-      <p class="lead">NeuralNomadAI offers a suite of AI-powered tools to generate images, automate workflows, and tailor models to your brand style — all with fast turnaround and commercial rights.</p>
     </section>
-    <!-- VISUAL SHOWCASE -->
-    <section class="container section">
-      <h2 class="section-title text-center">Visual Showcase</h2>
-      <div class="grid-3 gap-large mt-8">
-        <article class="feature-card">
-          <img src="assets/showcase-1.jpg" alt="AI-powered sample 1" loading="lazy" />
-          <h3>AI-Powered Image Generation</h3>
-          <p>Create stunning, unique visuals with our advanced AI image models.</p>
-        </article>
-        <article class="feature-card">
-          <img src="assets/showcase-2.jpg" alt="AI-powered sample 2" loading="lazy" />
-          <h3>Automated Workflow Tools</h3>
-          <p>Streamline your process with automated tasks and pipelines.</p>
-        </article>
-        <article class="feature-card">
-          <img src="assets/showcase-3.jpg" alt="AI-powered sample 3" loading="lazy" />
-          <h3>Customizable AI Models</h3>
-          <p>Tune models to match your artistic vision and brand voice.</p>
-        </article>
       </div>
-      <!-- large showcase banner -->
-      <div class="showcase-banner mt-10">
-        <img src="assets/hero-showcase.jpg" alt="Large showcase" loading="lazy"/>
-        <button class="play-btn" aria-label="Play showcase video">▶</button>
-      </div>
-    </section>
-    <!-- TRUSTED / LOGOS -->
-    <section class="container section">
-      <h3 class="section-title text-center">Trusted by Creators</h3>
-      <div class="trusted-logos">
-        <div class="logo-circle"><img src="assets/logo1.png" alt="Company 1"/></div>
-        <div class="logo-circle"><img src="assets/logo2.png" alt="Company 2"/></div>
-        <div class="logo-circle"><img src="assets/logo3.png" alt="Company 3"/></div>
-        <div class="logo-circle"><img src="assets/logo4.png" alt="Company 4"/></div>
       </div>
-    </section>
-    <!-- CTA BANNER -->
-    <section class="cta-banner">
-      <div class="container">
-        <h3>Ready to Transform Your Creative Process?</h3>
-        <a href="#contact" class="btn btn-primary">Get Started Today</a>
-      </div>
-    </section>
-    <!-- CONTACT + FORM -->
-    <section id="contact" class="container section grid-2 gap-large">
-      <div class="contact-card">
-        <h3>Hire Us on Fiverr</h3>
-        <p>For standardized services and quick turnarounds, find us on Fiverr.</p>
-        <a class="btn btn-primary" href="#" target="_blank" rel="noopener">Hire on Fiverr</a>
-        <hr class="divider"/>
-        <h3>Custom Requests</h3>
-        <form id="contact-form" class="contact-form" novalidate>
-          <label>
-            <span>Your Name</span>
-            <input name="name" type="text" placeholder="Enter your name" required>
-          </label>
-          <label>
-            <span>Your Email</span>
-            <input name="email" type="email" placeholder="Enter your email" required>
-          </label>
-          <label>
-            <span>Subject</span>
-            <input name="subject" type="text" placeholder="Enter the subject">
-          </label>
-          <label>
-            <span>Your Message</span>
-            <textarea name="message" rows="6" placeholder="Enter your message" required></textarea>
-          </label>
-          <button type="submit" class="btn btn-primary full">Send Message</button>
-        </form>
-      </div>
-      <aside class="contact-info">
-        <h3>Direct Contact & Info</h3>
-        <div class="info-box">
-          <p><strong>Email:</strong> <a href="mailto:contact@neuralnomad.ai">contact@neuralnomad.ai</a></p>
-          <p><strong>Business Hours:</strong> Mon–Fri, 9 AM – 6 PM (GMT)</p>
-          <p><strong>Availability:</strong> We are currently accepting new projects.</p>
-        </div>
-        <h4>Follow Us</h4>
-        <div class="social-grid">
-          <a class="social">Twitter</a>
-          <a class="social">Instagram</a>
-          <a class="social">LinkedIn</a>
-        </div>
-        <h4>What Happens Next?</h4>
-        <ol class="what-next">
-          <li><strong>Initial Contact:</strong> We review your message and reply within 24 hours.</li>
-          <li><strong>Project Discussion:</strong> We schedule a call to discuss details.</li>
-          <li><strong>Proposal & Quote:</strong> You receive a tailored proposal.</li>
-          <li><strong>Kick-off:</strong> We start after approval and keep you updated.</li>
-        </ol>
-      </aside>
-    </section>
-    <!-- PRICING -->
-    <section id="pricing" class="container section">
-      <h2 class="section-title text-center">Transparent Pricing</h2>
-      <p class="lead text-center">Choose the plan that fits your creative needs. No hidden fees.</p>
-      <div class="pricing-grid mt-8">
-        <div class="pricing-card">
-          <div class="price-top">Basic <span class="price-amount">$29<span class="price-unit">/month</span></span></div>
-          <ul class="price-features">
-            <li>100 AI Image Credits</li>
-            <li>Basic Image Editing Tools</li>
-            <li>Community Support</li>
-          </ul>
-          <button class="btn btn-outline full">Choose Plan</button>
-        </div>
-        <div class="pricing-card featured">
-          <div class="ribbon">Popular</div>
-          <div class="price-top">Pro <span class="price-amount">$99<span class="price-unit">/month</span></span></div>
-          <ul class="price-features">
-            <li>Unlimited AI Image Credits</li>
-            <li>Advanced Editing Tools</li>
-            <li>Priority Support</li>
-          </ul>
-          <button class="btn btn-primary full">Choose Plan</button>
-        </div>
-        <div class="pricing-card">
-          <div class="price-top">Enterprise <span class="price-amount">Custom</span></div>
-          <ul class="price-features">
-            <li>Custom Solutions</li>
-            <li>Dedicated Account Manager</li>
-            <li>Scalable Resources</li>
-          </ul>
-          <button class="btn btn-outline full">Contact Us</button>
-        </div>
-      </div>
-      <div class="package-table mt-10">
-        <h4>Package Comparison</h4>
-        <table>
-          <thead>
-            <tr><th>Feature</th><th>Basic</th><th>Pro</th><th>Enterprise</th></tr>
-          </thead>
-          <tbody>
-            <tr><td>AI Image Credits</td><td>100</td><td>Unlimited</td><td>Custom</td></tr>
-            <tr><td>Image Editing Tools</td><td>Basic</td><td>Advanced</td><td>Advanced</td></tr>
-            <tr><td>Support</td><td>Community</td><td>Priority</td><td>Dedicated</td></tr>
-            <tr><td>Delivery Time</td><td>Instant</td><td>Instant</td><td>Custom</td></tr>
-            <tr><td>Commercial Use</td><td>No</td><td>Yes</td><td>Yes</td></tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-    <!-- TESTIMONIALS -->
-    <section class="container section">
-      <h2 class="section-title text-center">What Our Clients Say</h2>
-      <div class="testimonial-grid mt-8">
-        <blockquote class="testimonial">
-          <div class="avatar">SB</div>
-          <div class="quote">
-            <strong>Sophia Bennett</strong>
-            <p class="date">August 15, 2023</p>
-            <p class="stars">★★★★★</p>
-            <p class="text">"NeuralNomadAI transformed my creative process. The AI imagery is stunning, and the automation tools have saved me countless hours."</p>
-          </div>
-        </blockquote>
-        <blockquote class="testimonial">
-          <div class="avatar">EC</div>
-          <div class="quote">
-            <strong>Ethan Carter</strong>
-            <p class="date">July 22, 2023</p>
-            <p class="stars">★★★★★</p>
-            <p class="text">"Exceptional service and results. NeuralNomadAI's AI tools are a game-changer for content creators."</p>
-          </div>
-        </blockquote>
-        <blockquote class="testimonial">
-          <div class="avatar">OH</div>
-          <div class="quote">
-            <strong>Olivia Hayes</strong>
-            <p class="date">June 10, 2023</p>
-            <p class="stars">★★★★★</p>
-            <p class="text">"I'm blown away by the quality and efficiency of NeuralNomadAI. A must-have for any serious creator."</p>
-          </div>
-        </blockquote>
-      </div>
-    </section>
-    <!-- ABOUT (brief) -->
-    <section class="container section">
-      <h2 class="section-title text-center">About NeuralNomadAI</h2>
-      <p class="lead text-center">We pioneer AI-driven creative solutions — blending art and technology to help creators scale and focus on what matters.</p>
-      <div class="capability-grid mt-8">
-        <div class="cap-card"><h4>AI-Powered Imagery</h4><p>Generate stunning visuals with AI.</p></div>
-        <div class="cap-card"><h4>Automation Tools</h4><p>Automate repetitive tasks for efficiency.</p></div>
-        <div class="cap-card"><h4>Creative Solutions</h4><p>Tailored solutions for diverse needs.</p></div>
-        <div class="cap-card"><h4>Rapid Turnaround</h4><p>Fast delivery without compromising quality.</p></div>
-      </div>
-    </section>
-    <!-- PORTFOLIO -->
-    <section id="portfolio" class="container section">
-      <h2 class="section-title">Featured Work</h2>
-      <p class="lead">Explore our portfolio of AI-driven projects.</p>
-      <div class="portfolio-grid mt-8">
-        <div class="portfolio-item"><img src="assets/portfolio-1.jpg" alt=""><h4>AI-Enhanced Photography</h4></div>
-        <div class="portfolio-item"><img src="assets/portfolio-2.jpg" alt=""><h4>Automated Content Creation</h4></div>
-        <div class="portfolio-item"><img src="assets/portfolio-3.jpg" alt=""><h4>Personalized Marketing</h4></div>
-        <div class="portfolio-item"><img src="assets/portfolio-4.jpg" alt=""><h4>Design Tools</h4></div>
-        <div class="portfolio-item"><img src="assets/portfolio-5.jpg" alt=""><h4>Interactive Installations</h4></div>
-        <div class="portfolio-item"><img src="assets/portfolio-6.jpg" alt=""><h4>Data Visualization</h4></div>
-      </div>
-      <div class="pagination mt-8">‹  <span class="page active">1</span>  2  3  ›</div>
-    </section>
-  </main>
-  <footer class="site-footer">
-    <div class="container">
-      <div class="footer-row">
-        <div>© 2025 NeuralNomadAI. All rights reserved.</div>
-        <div class="footer-links">
-          <a>Terms of Service</a>
-          <a>Privacy Policy</a>
-          <a>Contact Us</a>
-        </div>
-      </div>
-    </div>
-  </footer>
-  <!-- Optional small JS for simple navigation & form -->
-  <script>
-    // Simple single-page switching using data-page attributes
-    (function() {
-      const links = document.querySelectorAll('.nav-link');
-      const pages = document.querySelectorAll('.page-content'); // not used here — we use anchors instead
-      function setActive(link) {
-        links.forEach(l => l.classList.remove('active'));
-        link.classList.add('active');
       }
-      links.forEach(l => {
-        l.addEventListener('click', (e) => {
-          links.forEach(x=>x.classList.remove('active'));
-          l.classList.add('active');
-        });
       });
-      // Contact form simple handler
-      const form = document.getElementById('contact-form');
-      form?.addEventListener('submit', (e) => {
-        e.preventDefault();
-        alert('Thanks! Your message was received (this demo does not send emails).');
-        form.reset();
       });
     })();
   </script>
 </body>

 <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>
     <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>