| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NASA Ka Nasha</title> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <link href="style.css" rel="stylesheet"> |
| |
| |
| |
| |
| |
| |
| |
| </head> |
| <body> |
| |
| <div class="grid-bg"></div> |
| <div class="gradient-overlay"></div> |
| <div class="scanlines"></div> |
|
|
| |
| <div class="shapes-container"> |
| <div class="shape shape-circle"></div> |
| <div class="shape shape-triangle"></div> |
| <div class="shape shape-square"></div> |
| </div> |
|
|
| |
| <div id="particles"></div> |
|
|
| |
| <nav id="navbar"> |
| <div class="nav-container"> |
| <a href="#home" class="logo-link"> |
| <svg class="logo-svg" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#FF5E00;stop-opacity:1" /> |
| <stop offset="100%" style="stop-color:#00B2FF;stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| <polygon points="20,2 38,14 38,26 20,38 2,26 2,14" fill="none" stroke="url(#logoGradient)" stroke-width="2"/> |
| <polygon points="20,8 32,16 32,24 20,32 8,24 8,16" fill="url(#logoGradient)" opacity="0.3"/> |
| <circle cx="20" cy="20" r="3" fill="url(#logoGradient)"/> |
| </svg> |
| <span class="logo-text">NASA Ka Nasha</span> |
| </a> |
| <ul class="nav-links" id="navLinks"> |
| <li><a href="#home" class="nav-link">Home</a></li> |
| <li><a href="#features" class="nav-link">Features</a></li> |
| <li><a href="#about" class="nav-link">About</a></li> |
| <li><a href="#contact" class="nav-link">Contact</a></li> |
| </ul> |
| <div class="menu-toggle" id="menuToggle"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero" id="home"> |
| <div class="hero-content"> |
| <div class="text-rotator"> |
| <div class="text-set active"> |
| <h1 class="glitch-text" data-text="Explore NASA Research">Explore NTRS</h1> |
| <p class="subtitle">Search and chat with NASA bioscience papers.</p> |
| </div> |
| <div class="text-set"> |
| <h1 class="glitch-text" data-text="Ask Anything">Ask Anything</h1> |
| <p class="subtitle">Get answers grounded in scientific literature.</p> |
| </div> |
| <div class="text-set"> |
| <h1 class="glitch-text" data-text="AI-Powered">AI-Powered</h1> |
| <p class="subtitle">Your personal research assistant chatbot.</p> |
| </div> |
| </div> |
| </div> |
| <div class="cta-container"> |
| <a href="#features" class="cta-button cta-primary">Click me 👈</a> |
| <a href="#about" class="cta-button cta-secondary">Don't click me ;)</a> |
| </div> |
| </section> |
|
|
| |
| <section class="features" id="features"> |
| <h2 class="section-title">Start Here 👇</h2> |
| |
| <div class="features-search-bar" style="display: flex; justify-content: center; margin-bottom: 32px;"> |
| <input type="text" id="nasaSearchInput" placeholder="Step 1 : Search something here..." style="width: 420px; padding: 12px 20px; border-radius: 24px; border: 1px solid #222; font-size: 1rem; background: #181c24; color: #fff; outline: none;"> |
| <button id="nasaSearchBtn" style="margin-left: 8px; padding: 12px 24px; border-radius: 24px; border: none; background: linear-gradient(90deg,#FF5E00,#00B2FF); color: #fff; font-weight: bold; cursor: pointer;">Search</button> |
| </div> |
| <div id="main-app-container" class="main-container"> |
| |
| <div id="search-results-container"> |
| <div id="search-panel"> |
| <h3 style="font-family: 'Orbitron', monospace; font-size: 1.5rem; margin-bottom: 20px; color: #00B2FF;">Search Results</h3> |
| <div id="search-results-list" style="max-height: 360px; overflow-y: auto; padding-right: 10px;"> |
| <p>Step 2 : Search results will appear here.</p> |
| </div> |
| <button id="trainChatbotBtn" style="width: 100%; margin-top: 20px; padding: 12px 24px; border-radius: 24px; border: none; background: linear-gradient(90deg,#FF5E00,#00B2FF); color: #fff; font-weight: bold; cursor: pointer; display: none;">Start Training</button> |
| </div> |
| <div id="selected-papers-panel" style="display: none;"> |
| <h3 style="font-family: 'Orbitron', monospace; font-size: 1.5rem; margin-bottom: 20px; color: #00B2FF;">Remember these ?</h3> |
| <div id="selected-papers-list" style="max-height: 400px; overflow-y: auto; padding-right: 10px;"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="knowledge-map-container"> |
| <h3 style="font-family: 'Orbitron', monospace; font-size: 1.5rem; margin-bottom: 20px; color: #00B2FF;">Incomplete Knowledge Map</h3> |
| <div id="knowledge-map-grid"></div> |
| </div> |
|
|
| |
| <div id="chatbot-wrapper"> |
| |
| <div id="chatbot-container"> |
| <div id="chat-history"> |
| <div class="chat-message bot" style="margin-bottom: 12px;"><strong>Bot:</strong> First select your papers rookie 😒. This is step 3.</div> |
| </div> |
| <div style="display: flex;"> |
| <input type="text" id="chat-input" placeholder="Ask here..." style="flex: 1; padding: 10px 16px; border-radius: 24px; border: 1px solid #222; font-size: 1rem; background: #181c24; color: #fff; outline: none;"> |
| <button id="chat-send" style="margin-left: 8px; padding: 10px 20px; border-radius: 24px; border: none; background: linear-gradient(90deg,#FF5E00,#00B2FF); color: #fff; font-weight: bold; cursor: pointer;">💘</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
|
|
| |
| <section class="about" id="about"> |
| <h2 class="section-title">About Bio_Search_Engine</h2> |
| <div class="about-content"> |
| <div class="about-text"> |
| <h2>Your AI Research Assistant</h2> |
| <p>Bio-Explorer was created to make complex scientific literature available on NTRS website more accessible. It allows researchers🧑🔬, students🧑🎓, and the curious public💀 to dive into NASA's vast library of bioscience papers without getting lost in jargon and endless pages.</p> |
| <p>Instead of manually reading dozens of PDFs, you can use our AI-powered chatbot to ask natural language questions and receive precise, synthesized answers grounded directly in the scientific papers📜you select.</p> |
| <p>This tool aims to accelerate research, enhance learning, and bring the fascinating world of NASA's biological science to a wider audience.</p> |
| </div> |
| <div class="about-visual"> |
| <div class="about-graphic"></div> |
| </div> |
| </div> |
| |
| |
| <div class="about-content" style="margin-top: 80px;"> |
| <div class="about-visual"> |
| <div class="about-graphic-alt"> |
| <div class="hexagon"></div> |
| <div class="hexagon"></div> |
| <div class="hexagon"></div> |
| </div> |
| </div> |
| <div class="about-text"> |
| <h2>How It Works</h2> |
| <p><strong>0. :</strong> You are needing it because you are lazy. You are shame on yourself. Thank god that you can atleast follow the following steps🤦.</p> |
| <p><strong>1. Search:</strong> Use keywords to find relevant papers from the NASA Technical Reports Server (NTRS).</p> |
| <p><strong>2. Train:</strong> Select the papers you're interested in. Our backend downloads them, breaks them into understandable chunks, and creates a searchable knowledge base using vector embeddings.</p> |
| <p><strong>3. Ask:</strong> Chat with a local, private AI model that uses this knowledge base to answer your questions. It will only use information from the papers you selected, ensuring every answer is accurate and citable.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="contact" id="contact"> |
| <h2 class="section-title">Let's Connect</h2> |
| <div class="contact-container"> |
| <div class="contact-form"> |
| <form id="contactForm"> |
| <div class="form-group"> |
| <label for="name">Your Preferred Title:</label> |
| <input type="text" placeholder="I'll call you by it when we're alone" id="name" name="name" required> |
| </div> |
| <div class="form-group"> |
| <label for="email">Do you have something like :</label> |
| <input type="email" placeholder="i.want.you@my.heart" id="email" name="email" required> |
| </div> |
| <div class="form-group"> |
| <label for="subject">Tell your type</label> |
| <input type="text" id="subject" placeholder="eg., me, me, me, etc." name="subject" required> |
| </div> |
| <div class="form-group"> |
| <label for="message">Are you afraid of something ?</label> |
| <textarea id="message" placeholder="Like your parents won't agree, etc." name="message" required></textarea> |
| </div> |
| <button type="submit" class="submit-btn">Don't think; just click</button> |
|
|
| </form> |
| </div> |
| <div class="contact-info"> |
| <h3>Want contact ?</h3> |
| <div class="info-item"> |
| <div class="info-icon">📧</div> |
| <div class="info-details"> |
| <h4>Secret Email:</h4> |
| <p>your.heart@me.want</p> |
| </div> |
| </div> |
| <div class="info-item"> |
| <div class="info-icon">📱</div> |
| <div class="info-details"> |
| <h4>Phone</h4> |
| <p>+91 You already have.</p> |
| </div> |
| </div> |
| <div class="info-item"> |
| <div class="info-icon">📍</div> |
| <div class="info-details"> |
| <h4>Location</h4> |
| <p>You'll find me in your heart.</p> |
| </div> |
| </div> |
|
|
| <div class="map-container"> |
| <div class="map-placeholder"> |
| <p>Are you lost ?</p> |
| <p style="font-size: 0.9rem; margin-top: 10px;">Because I've been searching you for years.</p> |
| </div> |
| <div class="map-overlay"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="footer-content"> |
| <div class="footer-links"> |
| <a href="#privacy"></a> |
| <a href="#terms">If you hover on it, and it turned blue. Means you love me too.</a> |
| <a href="#careers"></a> |
| </div> |
| <p class="copyright">© 2025 Bio_Search_Engine. You are reserved. | A mission to find you. |
| </div> |
| </footer> |
| <script src="script.js" defer></script> |
| </body> |
| </html> |
