what abot the drug iteractuion and other stuff /

components/drug-interaction.js

@@ -0,0 +1,135 @@
+class DrugInteractionChecker extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 1rem;
+          background: white;
+          border-radius: 0.5rem;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .container {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .input-group {
+          display: flex;
+          gap: 0.5rem;
+        }
+        input {
+          flex: 1;
+          padding: 0.5rem;
+          border: 1px solid #ccc;
+          border-radius: 0.25rem;
+        }
+        button {
+          background: #3b82f6;
+          color: white;
+          border: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.25rem;
+          cursor: pointer;
+        }
+        .results {
+          margin-top: 1rem;
+          border-top: 1px solid #eee;
+          padding-top: 1rem;
+        }
+        .interaction {
+          padding: 0.5rem;
+          margin-bottom: 0.5rem;
+          border-radius: 0.25rem;
+        }
+        .severe { background: #fee2e2; border-left: 3px solid #ef4444; }
+        .moderate { background: #fef3c7; border-left: 3px solid #f59e0b; }
+        .minor { background: #ecfdf5; border-left: 3px solid #10b981; }
+      </style>
+      <div class="container">
+        <h3>Drug Interaction Checker</h3>
+        <div class="input-group">
+          <input type="text" id="drug1" placeholder="Enter first drug name">
+          <input type="text" id="drug2" placeholder="Enter second drug name">
+          <button id="check-btn">Check</button>
+        </div>
+        <div class="results" id="results"></div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('check-btn').addEventListener('click', this.checkInteractions.bind(this));
+  }
+
+  async checkInteractions() {
+    const drug1 = this.shadowRoot.getElementById('drug1').value;
+    const drug2 = this.shadowRoot.getElementById('drug2').value;
+    
+    if (!drug1 || !drug2) {
+      this.showError('Please enter both drug names');
+      return;
+    }
+
+    // Simulate API call with mock data
+    this.showLoading();
+    
+    setTimeout(() => {
+      const mockResults = this.getMockInteractions(drug1, drug2);
+      this.displayResults(mockResults);
+    }, 1000);
+  }
+
+  showLoading() {
+    this.shadowRoot.getElementById('results').innerHTML = '<p>Checking interactions...</p>';
+  }
+
+  showError(message) {
+    this.shadowRoot.getElementById('results').innerHTML = `<p class="error">${message}</p>`;
+  }
+
+  getMockInteractions(drug1, drug2) {
+    // This would be replaced with actual API calls in production
+    const mockData = {
+      "drug1": drug1,
+      "drug2": drug2,
+      "interactions": [
+        {
+          "severity": "severe",
+          "description": `${drug1} may increase the hypotensive activities of ${drug2}.`,
+          "action": "Monitor blood pressure and consider alternative therapy."
+        },
+        {
+          "severity": "moderate",
+          "description": `${drug1} may decrease the effectiveness of ${drug2}.`,
+          "action": "Consider dose adjustment or alternative therapy."
+        }
+      ]
+    };
+    return mockData;
+  }
+
+  displayResults(data) {
+    const resultsEl = this.shadowRoot.getElementById('results');
+    
+    if (data.interactions.length === 0) {
+      resultsEl.innerHTML = `<p>No significant interactions found between ${data.drug1} and ${data.drug2}.</p>`;
+      return;
+    }
+
+    let html = `<h4>Interactions between ${data.drug1} and ${data.drug2}:</h4>`;
+    
+    data.interactions.forEach(interaction => {
+      html += `
+        <div class="interaction ${interaction.severity}">
+          <p><strong>Severity:</strong> ${interaction.severity.toUpperCase()}</p>
+          <p><strong>Description:</strong> ${interaction.description}</p>
+          <p><strong>Recommendation:</strong> ${interaction.action}</p>
+        </div>
+      `;
+    });
+
+    resultsEl.innerHTML = html;
+  }
+}
+
+customElements.define('drug-interaction-checker', DrugInteractionChecker);

components/navbar.js

@@ -182,6 +182,7 @@ class CustomNavbar extends HTMLElement {
                     </a>
                     <div class="nav-links">
                     <a href="features.html">Features</a>
+                    <a href="interactions.html">Drug Interactions</a>
                     <a href="pricing.html">Pricing</a>
                     <a href="resources.html">Resources</a>
                     <a href="about.html">About</a>
@@ -197,10 +198,11 @@ class CustomNavbar extends HTMLElement {
                 </div>
                 <div class="mobile-menu">
                     <a href="features.html">Features</a>
+                    <a href="interactions.html">Drug Interactions</a>
                     <a href="pricing.html">Pricing</a>
                     <a href="resources.html">Resources</a>
                     <a href="about.html">About</a>
-                    <div class="divider"></div>
+<div class="divider"></div>
                     <a href="login.html" class="button">Log in</a>
                     <a href="register.html" class="button">Sign up</a>
 </div>

interactions.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drug Interactions - CureLens AI</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/drug-interaction.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl font-bold text-gray-800 mb-6">Drug Interaction Checker</h1>
+            <p class="text-gray-600 mb-8">
+                Check for potential interactions between medications. Our AI analyzes thousands of drug combinations
+                to help you make safer prescribing decisions.
+            </p>
+            
+            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                <drug-interaction-checker></drug-interaction-checker>
+            </div>
+            
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Common Drug Interactions</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="p-4 border rounded-lg">
+                        <h3 class="font-semibold mb-2">Warfarin + NSAIDs</h3>
+                        <p class="text-sm text-gray-600">Increased risk of bleeding</p>
+                    </div>
+                    <div class="p-4 border rounded-lg">
+                        <h3 class="font-semibold mb-2">SSRIs + MAOIs</h3>
+                        <p class="text-sm text-gray-600">Risk of serotonin syndrome</p>
+                    </div>
+                    <div class="p-4 border rounded-lg">
+                        <h3 class="font-semibold mb-2">Statins + Grapefruit</h3>
+                        <p class="text-sm text-gray-600">Increased statin levels</p>
+                    </div>
+                    <div class="p-4 border rounded-lg">
+                        <h3 class="font-semibold mb-2">Digoxin + Diuretics</h3>
+                        <p class="text-sm text-gray-600">Risk of hypokalemia</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

style.css

@@ -11,6 +11,13 @@ body {
 .hero {
     background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
 }
+/* Drug Interaction Styles */
+.error {
+  color: #ef4444;
+  padding: 0.5rem;
+  background: #fee2e2;
+  border-radius: 0.25rem;
+}
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {