Front_page

Inspiration

I was attending some family function where I was supposed to stay there , one of our families elderly person was taking meds that has to be taken before the food and they derailed due to some other responsibilities. So I thought of making an web app to help them.

What it does

It helps the user to get information of any medication they use. Reminds the user to take the capsule on time. Explain the process like dosage, side effects and more.

How we built it

We used Calude ai , blackbox ai and chatgpt for the idea and for the design. Used HTML5,CSS3,JavaScript.

Challenges we ran into

The details that we required for the medication like dosage, and stuff . Chatbot for the interactive one on one discussion.

Accomplishments that we're proud of

Custom chatbot for meds , user-friendly UI/UX, MediMate.

What we learned

Learned how to create custom chatbot , how to integrate with API's

What's next for MediMate

Integrate with other AI's and medical related website to get enhanced experience for users.

```<!DOCTYPE html> Mavana-Magalee * { margin: 0; padding: 0; box-sizing: border-box; }</p> <pre class="language-nolang"><code> body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: white; overflow-x: hidden; scroll-behavior: smooth; background-image: url("punith.jpeg"); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Navigation */ nav { position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); z-index: 1000; transition: all 0.3s ease; } nav.scrolled { background: rgba(0, 0, 0, 0.98); box-shadow: 0 5px 20px rgba(255,255,255,0.1); } nav .container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 20px; } .logo { font-size: 1.8rem; font-weight: 700; background: linear-gradient(45deg, #ffffff, #f0f0f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: logoGlow 2s ease-in-out infinite alternate; } @keyframes logoGlow { from { filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); } to { filter: drop-shadow(0 0 15px rgba(255,255,255,0.8)); } } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(45deg, #ffffff, #cccccc); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { transform: translateY(-2px); } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; z-index: 2; } .hero-text h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; background: linear-gradient(45deg, #ffffff, #e0e0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: fadeInUp 1s ease-out; } .hero-text p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.6; animation: fadeInUp 1s ease-out 0.2s both; } .cta-button { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(45deg, #ffffff, #f0f0f0); color: #000000; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(255,255,255,0.2); animation: fadeInUp 1s ease-out 0.4s both; position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s ease; } .cta-button:hover::before { left: 100%; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(255,255,255,0.3); } .hero-visual { position: relative; height: 500px; animation: fadeInRight 1s ease-out 0.3s both; } .pills-container { position: relative; width: 100%; height: 100%; } .pill { position: absolute; width: 140px; height: 55px; border-radius: 30px; animation: float 3s ease-in-out infinite; box-shadow: 0 20px 50px rgba(255,255,255,0.1), 0 8px 20px rgba(0,0,0,0.8); position: relative; overflow: hidden; background: transparent; } .pill::before { content: ''; position: absolute; left: 0; top: 0; width: 70px; height: 55px; background: linear-gradient(135deg, #ff4444 0%, #cc3333 50%, #ff2222 100%); border-radius: 30px 0 0 30px; box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.3), inset -2px 0 4px rgba(0,0,0,0.2); } .pill::after { content: ''; position: absolute; right: 0; top: 0; width: 70px; height: 55px; background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #e8e8e8 100%); border-radius: 0 30px 30px 0; box-shadow: inset 0 3px 6px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(0,0,0,0.1), inset 2px 0 4px rgba(0,0,0,0.1); } .pill .pill-highlight { position: absolute; top: 8px; left: 8px; right: 8px; height: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.8) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.8) 65%, rgba(255,255,255,0.6) 100%); border-radius: 20px; pointer-events: none; } .pill:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; } .pill:nth-child(2) { top: 40%; right: 20%; animation-delay: 1s; } .pill:nth-child(3) { bottom: 30%; left: 30%; animation-delay: 2s; } .leaf { position: absolute; width: 80px; height: 100px; background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 50%, #1B5E20 100%); border-radius: 0 100% 0 100%; animation: sway 4s ease-in-out infinite; box-shadow: 0 8px 25px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.2); } .leaf::before { content: ''; position: absolute; top: 10%; left: 20%; width: 2px; height: 60%; background: linear-gradient(180deg, #66BB6A, #388E3C); border-radius: 2px; } .leaf::after { content: ''; position: absolute; top: 15%; left: 22%; width: 1px; height: 20%; background: rgba(255,255,255,0.3); border-radius: 1px; } .leaf-small { position: absolute; width: 50px; height: 65px; background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 50%, #2E7D32 100%); border-radius: 0 80% 0 80%; animation: swaySmall 3.5s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .leaf:nth-child(4) { top: 10%; right: 10%; animation-delay: 0.5s; } .leaf:nth-child(5) { bottom: 20%; right: 40%; animation-delay: 1.5s; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(-15deg); } 50% { transform: translateY(-30px) rotate(-10deg); } } @keyframes sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } } @keyframes swaySmall { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(8deg) scale(1.05); } 75% { transform: rotate(-8deg) scale(0.95); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Features Section */ .features { padding: 6rem 0; background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(20px); } .features h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; background: linear-gradient(45deg, #ffffff, #e0e0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; animation: fadeInUp 0.8s ease-out; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); background: rgba(255, 255, 255, 0.15); } .feature-icon { width: 60px; height: 60px; background: linear-gradient(45deg, #ffffff, #f0f0f0); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; color: #000000; } .feature-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: white; } .feature-card p { opacity: 0.9; line-height: 1.6; } /* Call to Action Section */ .cta-section { padding: 6rem 0; text-align: center; background: black; } .cta-section h2 { font-size: 2.5rem; margin-bottom: 1.5rem; background: linear-gradient(45deg, #ffffff, #e0e0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cta-section p { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9; } /* Footer */ footer { background: black; padding: 3rem 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Responsive Design */ @media (max-width: 768px) { .nav-links { display: none; } .hero-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; } .hero-text h1 { font-size: 2.5rem; } .features-grid { grid-template-columns: 1fr; } } /* Scroll animations */ .scroll-animate { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .scroll-animate.animate { opacity: 1; transform: translateY(0); } </style> </code></pre> <p></head> <body> <nav id="navbar" style="background-color: transparent"> <div class="container"> <div class="logo">MediMate</div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav></p> <pre class="language-nolang"><code><section class="hero" id="home" > <div class="container"> <div class="hero-content"> <div class="hero-text"> <h1>Never Miss Your Medicine Again</h1> <p>Stay healthy with smart medication reminders. PushMed helps you maintain your medication schedule with intelligent notifications and personalized tracking.</p> <a href="login.html" class="cta-button">Get Started Today</a> </div> <div class="hero-visual"> <div class="pills-container"> </div> </div> </div> </div> </section> <section class="features" id="features"> <div class="container"> <h2 class="scroll-animate">Why Choose PushMed?</h2> <div class="features-grid"> <div class="feature-card scroll-animate"> <div class="feature-icon">🔔</div> <h3>Smart Notifications</h3> <p>Receive timely reminders across all your devices. Never forget a dose with our intelligent notification system that adapts to your schedule.</p> </div> <div class="feature-card scroll-animate"> <div class="feature-icon">📊</div> <h3>Progress Tracking</h3> <p>Monitor your medication adherence with detailed analytics and insights. Track your health journey with comprehensive reports.</p> </div> <div class="feature-card scroll-animate"> <div class="feature-icon">👨‍⚕️</div> <h3>Doctor Integration</h3> <p>Share your medication history with healthcare providers seamlessly. Improve communication with your medical team.</p> </div> <div class="feature-card scroll-animate"> <div class="feature-icon">🔒</div> <h3>Secure & Private</h3> <p>Your health data is encrypted and protected with industry-leading security measures. Your privacy is our priority.</p> </div> <div class="feature-card scroll-animate"> <div class="feature-icon">📱</div> <h3>Multi-Platform</h3> <p>Access PushMed on web, mobile, and desktop. Your medication schedule syncs across all devices automatically.</p> </div> <div class="feature-card scroll-animate"> <div class="feature-icon">🎯</div> <h3>Personalized</h3> <p>Customize reminders, dosages, and schedules to fit your unique needs. PushMed adapts to your lifestyle.</p> </div> </div> </div> </section> <section class="cta-section"> <div class="container"> <h2 class="scroll-animate">Ready to Take Control of Your Health?</h2> <p class="scroll-animate">Join thousands of users who trust PushMed to keep them on track with their medication.</p> <a href="#" class="cta-button scroll-animate">Start Your Free Trial</a> </div> </section> <footer> <div class="container"> <p>&copy; 2024 PushMed. All rights reserved. Your health, our priority.</p> </div> </footer> <script> // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Scroll animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } }); }, observerOptions); // Observe all scroll-animate elements document.querySelectorAll('.scroll-animate').forEach(el => { observer.observe(el); }); // Add staggered animation delays to feature cards document.querySelectorAll('.feature-card').forEach((card, index) => { card.style.animationDelay = `${index * 0.1}s`; }); // Add interactive hover effects to pills document.querySelectorAll('.pill').forEach(pill => { pill.addEventListener('mouseover', () => { pill.style.animationDuration = '1s'; pill.style.transform = 'scale(1.1)'; }); pill.addEventListener('mouseout', () => { pill.style.animationDuration = '3s'; pill.style.transform = 'scale(1)'; }); }); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const heroVisual = document.querySelector('.hero-visual'); if (heroVisual) { heroVisual.style.transform = `translateY(${scrolled * 0.3}px)`; } }); </script> </code></pre> <p></body> </html><code> </code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MediCare AI - Smart Prescription Assistant</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }</p> <pre class="language-nolang"><code>body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column; } .header { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: sticky; top: 0; z-index: 100; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: center; align-items: center; } .logo { font-size: 2rem; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .logo::before { content: "🏥"; margin-right: 0.5rem; } .chat-container { flex: 1; display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; padding: 2rem; width: 100%; } .welcome-section { text-align: center; color: white; margin-bottom: 2rem; } .welcome-section h1 { font-size: 2.5rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .welcome-section p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; } .feature-pills { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .pill { background: rgba(255, 255, 255, 0.2); color: white; padding: 0.5rem 1rem; border-radius: 25px; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .chat-messages { flex: 1; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 1rem; max-height: 500px; overflow-y: auto; padding: 1rem; display: none; } .message { margin-bottom: 1rem; padding: 1rem; border-radius: 15px; max-width: 80%; word-wrap: break-word; } .user-message { background: rgba(102, 126, 234, 0.3); color: white; margin-left: auto; border-bottom-right-radius: 5px; } .bot-message { background: rgba(255, 255, 255, 0.2); color: white; margin-right: auto; border-bottom-left-radius: 5px; } .medication-card { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 1.5rem; margin: 1rem 0; border-left: 4px solid #4CAF50; } .medication-header { display: flex; align-items: center; margin-bottom: 1rem; } .medication-icon { font-size: 2rem; margin-right: 1rem; } .medication-name { font-size: 1.3rem; font-weight: bold; color: #4CAF50; } .medication-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1rem 0; } .detail-section { background: rgba(255, 255, 255, 0.1); padding: 1rem; border-radius: 10px; } .detail-title { font-weight: bold; color: #2196F3; margin-bottom: 0.5rem; font-size: 1rem; } .detail-content { font-size: 0.9rem; line-height: 1.4; } .reminder-section { background: rgba(255, 193, 7, 0.2); border: 1px solid rgba(255, 193, 7, 0.5); border-radius: 10px; padding: 1rem; margin-top: 1rem; } .input-section { display: flex; flex-direction: column; gap: 1rem; } .upload-area { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 2rem; text-align: center; color: white; cursor: pointer; transition: all 0.3s ease; } .upload-area:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); } .upload-area.dragover { background: rgba(76, 175, 80, 0.2); border-color: #4CAF50; } .upload-icon { font-size: 3rem; margin-bottom: 1rem; } .chat-input-container { display: flex; gap: 0.5rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 25px; padding: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); } .chat-input { flex: 1; background: transparent; border: none; padding: 1rem 1.5rem; color: white; font-size: 1rem; outline: none; } .chat-input::placeholder { color: rgba(255, 255, 255, 0.7); } .send-btn, .upload-btn { background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; border: none; padding: 1rem; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; min-width: 50px; display: flex; align-items: center; justify-content: center; } .send-btn:hover, .upload-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(238, 90, 36, 0.4); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .quick-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .quick-action { background: rgba(255, 255, 255, 0.2); color: white; border: none; padding: 0.7rem 1.2rem; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .quick-action:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .typing-indicator { display: none; color: rgba(255, 255, 255, 0.7); font-style: italic; padding: 1rem; } .typing-dots { display: inline-block; } .typing-dots::after { content: ''; animation: dots 1.5s steps(3, end) infinite; } @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } } .file-preview { background: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.5); border-radius: 10px; padding: 1rem; margin: 1rem 0; display: none; } .file-info { display: flex; align-items: center; gap: 1rem; color: white; } .file-icon { font-size: 2rem; } .remove-file { background: rgba(255, 0, 0, 0.3); color: white; border: none; padding: 0.5rem; border-radius: 5px; cursor: pointer; margin-left: auto; } .hidden { display: none !important; } @media (max-width: 768px) { .chat-container { padding: 1rem; } .welcome-section h1 { font-size: 2rem; } .medication-details { grid-template-columns: 1fr; } .quick-actions { flex-direction: column; align-items: stretch; } .feature-pills { flex-direction: column; align-items: center; } } /* Scrollbar styling */ .chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } </code></pre> <p>

MediMate

Your Personal Medication Assistant

Upload your prescription or ask about any medication. Get instant dosage, timing, and safety information.

  <div class="feature-pills">
    <div class="pill">💊 Dosage Calculator</div>
    <div class="pill">⏰ Timing Reminders</div>
    <div class="pill">📋 Prescription Scanner</div>
    <div class="pill">⚠️ Side Effects Info</div>
  </div>
</div>

<div class="chat-messages" id="chatMessages">
  <!-- Messages will appear here -->
</div>

<div class="typing-indicator" id="typingIndicator">
  <span class="typing-dots">AI is thinking</span>
</div>

<div class="file-preview" id="filePreview">
  <div class="file-info">
    <div class="file-icon">📄</div>
    <div>
      <div id="fileName">prescription.jpg</div>
      <div style="font-size: 0.8rem; opacity: 0.7;">Ready to analyze</div>
    </div>
    <button class="remove-file" onclick="removeFile()">✕</button>
  </div>
</div>

<div class="input-section">
  <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
    <div class="upload-icon">📤</div>
    <div><strong>Upload Prescription</strong></div>
    <div style="font-size: 0.9rem; opacity: 0.8; margin-top: 0.5rem;">
      Drop your prescription image here or click to browse
    </div>
  </div>

  <div class="chat-input-container">
    <input type="file" id="fileInput" accept="image/*,.pdf" style="display: none;">
    <input 
      type="text" 
      class="chat-input" 
      id="chatInput" 
      placeholder="Ask about any medication or upload your prescription..."
      onkeypress="handleKeyPress(event)"
    >
    <button class="upload-btn" onclick="document.getElementById('fileInput').click()" title="Upload prescription">
      📎
    </button>
    <button class="send-btn" id="sendBtn" onclick="sendMessage()" title="Send message">
      ➤
    </button>
  </div>

  <div class="quick-actions">
    <button class="quick-action" onclick="sendQuickMessage('What is the dosage for paracetamol for adults?')">
      Paracetamol Dosage
    </button>
    <button class="quick-action" onclick="sendQuickMessage('Side effects of ibuprofen')">
      Ibuprofen Side Effects
    </button>
    <button class="quick-action" onclick="sendQuickMessage('When should I take blood pressure medication?')">
      BP Medication Timing
    </button>
    <button class="quick-action" onclick="sendQuickMessage('Set up medication reminders')">
      Set Reminders
    </button>
  </div>
</div>