Scribd
Upload
6 views26 pages

Code HTML

The document outlines the structure and design of the AI MedDiagnostics web application, focusing on health diagnostics and symptom checking. It includes details on the layout, styling, and interactive elements such as buttons and forms. The application aims to provide users with a user-friendly interface for health assessments and assistance.

Uploaded by

zcc7j9ccg2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views26 pages

Code HTML

The document outlines the structure and design of the AI MedDiagnostics web application, focusing on health diagnostics and symptom checking. It includes details on the layout, styling, and interactive elements such as buttons and forms. The application aims to provide users with a user-friendly interface for health assessments and assistance.

Uploaded by

zcc7j9ccg2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 26

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI MedDiagnostics - Ultimate Health Diagnostic Web App</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
<style>
/* Reset */
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
html {
font-size: 16px;
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #d6e9f7, #f9fbfd);
color: #2e3a59;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, #app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
color: #007aff;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
outline:none;
}
button {
font-family: 'Inter', sans-serif;
}
/* Utility */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Container */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 24px 48px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Header */
header {
position: sticky;
top: 0;
z-index: 10000;
background: rgba(255 255 255 / 0.85);
backdrop-filter: saturate(180%) blur(14px);
box-shadow: 0 2px 10px rgb(0 0 0 / 0.05);
user-select: none;
}
.header-container {
max-width: 960px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-weight: 700;
font-size: 1.6rem;
color: #007aff;
user-select: text;
letter-spacing: 0.02em;
}
nav {
display: flex;
gap: 24px;
}
nav a {
font-weight: 600;
font-size: 1rem;
padding: 8px 14px;
border-radius: 14px;
color: #007aff;
display: flex;
align-items: center;
gap: 6px;
transition: background-color 0.3s ease, color 0.3s ease;
user-select: none;
}
nav a.active,
nav a:hover,
nav a:focus {
background: #007aff;
color: white;
outline-offset: 2px;
outline: 2px solid #005bb5;
}
nav a .material-icons {
font-size: 20px;
}
/* Main content */
main {
flex-grow: 1;
width: 100%;
}
/* Footer */
footer {
background: rgba(255 255 255 / 0.9);
text-align: center;
font-size: 0.875rem;
padding: 16px 24px;
color: #555d73;
user-select: none;
border-top: 1px solid #e0e6f2;
}
/* Pages */
.page {
display: none;
animation: fadeIn 0.4s ease forwards;
outline: none;
}
.page.active {
display: block;
}
@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
/* Home Page */
#home .hero-section {
text-align: center;
margin-top: 72px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
#home h1 {
font-weight: 900;
font-size: 3.3rem;
margin-bottom: 12px;
color: #0047cc;
line-height: 1.1;
letter-spacing: 0.01em;
}
#home p {
font-size: 1.15rem;
color: #515a7d;
line-height: 1.6;
margin-bottom: 36px;
}
#start-checker-btn {
background: linear-gradient(135deg, #007aff 0%, #00c6ff 100%);
color: white;
border: none;
padding: 18px 48px;
font-size: 1.15rem;
font-weight: 700;
border-radius: 24px;
box-shadow: 0 12px 28px rgba(0,122,255,0.42);
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
#start-checker-btn:hover,
#start-checker-btn:focus {
box-shadow: 0 20px 40px rgba(0,198,255,0.6);
transform: translateY(-3px);
outline: none;
}
/* Symptom Checker Page */
#symptom-checker {
margin-top: 48px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
#symptom-checker h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 24px;
color: #1a2a6c;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
}
label {
font-weight: 600;
font-size: 1rem;
color: #374172;
}
input[type="text"] {
padding: 14px 18px;
font-size: 1rem;
border-radius: 20px;
border: 1.5px solid #b1b7d1;
transition: border-color 0.3s ease;
outline-offset: 3px;
outline-color: #007aff;
}
input[type="text"]:focus {
border-color: #007aff;
outline: none;
}
#get-diagnosis-btn {
background: linear-gradient(135deg, #007aff, #00c6ff);
border: none;
color: white;
padding: 16px 40px;
font-weight: 700;
font-size: 1.1rem;
border-radius: 24px;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0,122,255,0.45);
align-self: flex-start;
user-select: none;
transition: all 0.3s ease;
}
#get-diagnosis-btn:hover,
#get-diagnosis-btn:focus {
box-shadow: 0 18px 38px rgba(0,198,255,0.65);
transform: translateY(-3px);
outline: none;
}
/* Diagnosis Result Panel */
#diagnosis-result {
margin-top: 40px;
background: rgba(255 255 255 / 0.7);
border-radius: 24px;
box-shadow: 0 6px 28px rgba(0 122 255 / 0.22);
padding: 28px 36px;
user-select: text;
opacity: 0;
transform: translateY(60px);
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
}
#diagnosis-result.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#diagnosis-result h3 {
font-size: 1.8rem;
font-weight: 700;
color: #007aff;
margin-bottom: 18px;
user-select: text;
}
#diagnosis-result p {
font-size: 1.15rem;
margin-bottom: 12px;
color: #4a5e95;
line-height: 1.5;
user-select: text;
}
#diagnosis-result p strong {
color: #0047cc;
}
/* Health Assistant Page */
#health-assistant {
margin-top: 48px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
height: calc(90vh);
}
#health-assistant h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #1a2a6c;
}
#assistant-chat {
flex-grow: 1;
background: white;
border-radius: 24px;
box-shadow: 0 12px 38px rgba(0 122 255 / 0.3);
display: flex;
flex-direction: column;
padding: 20px 24px;
user-select: none;
}
#assistant-messages {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
user-select: text;
}
.msg-bubble {
max-width: 82%;
padding: 14px 20px;
border-radius: 24px;
font-size: 1rem;
line-height: 1.3;
word-break: break-word;
white-space: pre-wrap;
user-select: text;
}
.msg-user {
background: #007aff;
color: white;
align-self: flex-end;
border-bottom-right-radius: 6px;
box-shadow: 0 8px 14px rgb(0 122 255 / 0.45);
animation: slideInRight 0.25s ease forwards;
}
.msg-bot {
background: #f1f6ff;
color: #2c3a59;
align-self: flex-start;
border-bottom-left-radius: 6px;
animation: slideInLeft 0.25s ease forwards;
}
@keyframes slideInRight {
from {opacity: 0; transform: translateX(60px);}
to {opacity: 1; transform: translateX(0);}
}
@keyframes slideInLeft {
from {opacity: 0; transform: translateX(-60px);}
to {opacity: 1; transform: translateX(0);}
}
#assistant-input-area {
margin-top: 16px;
display: flex;
gap: 16px;
}
#assistant-input {
flex-grow: 1;
padding: 14px 18px;
font-size: 1rem;
border-radius: 24px;
border: 1.5px solid #b1b7d1;
outline-offset: 3px;
outline-color: #007aff;
min-height: 44px;
resize: none;
font-family: 'Inter', sans-serif;
}
#assistant-input:focus {
border-color: #007aff;
outline: none;
}
#assistant-send-btn {
background: linear-gradient(135deg, #007aff 0%, #00c6ff 100%);
border: none;
border-radius: 24px;
color: white;
padding: 0 24px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0,122,255,0.42);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#assistant-send-btn:hover,
#assistant-send-btn:focus {
box-shadow: 0 18px 38px rgba(0,198,255,0.65);
transform: translateY(-2px);
outline: none;
}
/* Typing indicator for assistant */
#assistant-typing-indicator {
display: flex;
gap: 10px;
margin-top: 12px;
align-items: center;
user-select: none;
}
.typing-dot {
width: 10px;
height: 10px;
background: #007aff;
border-radius: 50%;
animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingBounce {
0%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
}

/* Modal Overlay for Notes and Reminders */


.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0 0 0 / 0.28);
display: none;
justify-content: center;
align-items: center;
z-index: 15000;
}
.modal-overlay.active {
display: flex;
}
.modal-content {
background: white;
border-radius: 24px;
max-width: 480px;
width: 90vw;
padding: 28px 32px;
box-shadow: 0 12px 48px rgba(0 122 255 / 0.3);
display: flex;
flex-direction: column;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.modal-header h3 {
font-weight: 700;
font-size: 1.5rem;
color: #0047cc;
}
.modal-close-btn {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #007aff;
user-select: none;
padding: 0;
line-height: 1;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
color: #0047cc;
outline: none;
}
.modal-body textarea,
.modal-body input[type="text"] {
width: 100%;
font-size: 1rem;
padding: 12px 18px;
border: 1.5px solid #b1b7d1;
border-radius: 20px;
outline-offset: 3px;
outline-color: #007aff;
resize: vertical;
min-height: 80px;
font-family: 'Inter', sans-serif;
}
.modal-body textarea:focus,
.modal-body input[type="text"]:focus {
border-color: #007aff;
outline: none;
}
.modal-footer {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 14px;
}
.btn-secondary {
padding: 12px 28px;
background: #e2e8f0;
border-radius: 24px;
border: none;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: background-color 0.3s ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: #cbd5e0;
outline: none;
}
.btn-primary {
padding: 12px 28px;
background: linear-gradient(135deg, #007aff 0%, #00c6ff 100%);
border-radius: 24px;
border: none;
font-weight: 700;
color: white;
cursor: pointer;
user-select: none;
transition: box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: 0 10px 28px rgba(0,122,255,0.45);
}
.btn-primary:hover,
.btn-primary:focus {
box-shadow: 0 18px 38px rgba(0,198,255,0.65);
transform: translateY(-3px);
outline: none;
}

/* Tab Interface for additional functions on Health Assistant page */


.tab-buttons {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.tab-button {
cursor: pointer;
padding: 10px 18px;
border-radius: 20px;
border: none;
font-weight: 600;
background: rgba(0, 122, 255, 0.15);
color: #007aff;
flex: 1 1 140px;
white-space: nowrap;
user-select: none;
transition: background-color 0.3s ease;
}
.tab-button.active {
background: #007aff;
color: white;
box-shadow: 0 8px 28px rgba(0,122,255,0.5);
}
.tab-button:hover:not(.active),
.tab-button:focus:not(.active) {
background: rgba(0, 122, 255, 0.3);
outline: none;
}
.tab-content {
display: none;
animation: fadeIn 0.4s ease forwards;
}
.tab-content.active {
display: block;
}

/* Tracker input and logs */


.tracker-inputs {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 18px;
align-items: flex-end;
}
.tracker-inputs label {
flex-grow: 1;
min-width: 140px;
font-weight: 600;
color: #374172;
}
.tracker-inputs input[type="number"],
.tracker-inputs input[type="date"] {
padding: 10px 14px;
border-radius: 16px;
border: 1.5px solid #b1b7d1;
font-size: 1rem;
outline-offset: 3px;
outline-color: #007aff;
flex-grow: 2;
}
.tracker-inputs input[type="number"]:focus,
.tracker-inputs input[type="date"]:focus {
border-color: #007aff;
outline: none;
}
.tracker-log {
margin-top: 16px;
max-height: 180px;
overflow-y: auto;
background: #f1f6ff;
border-radius: 20px;
padding: 12px 18px;
color: #2c3a59;
font-size: 0.92rem;
}
.tracker-log-item {
padding: 6px 0;
border-bottom: 1px solid #c2d1fc;
}
.tracker-log-item:last-child {
border-bottom: none;
}

/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #a2a7bb;
border-radius: 8px;
}
/* Responsive */
@media (max-width: 600px) {
nav {
gap: 12px;
}
nav a {
font-size: 0.95rem;
padding: 6px 12px;
border-radius: 16px;
}
#home h1 {
font-size: 2.5rem;
}
#symptom-checker, #health-assistant {
margin-top: 32px;
max-width: 90vw;
}
#assistant-input-area {
gap: 12px;
}
.tracker-inputs {
flex-direction: column;
}
.tracker-inputs label,
.tracker-inputs input[type="number"],
.tracker-inputs input[type="date"] {
flex-grow: unset;
width: 100%;
}
.tab-buttons {
gap: 8px;
}
.tab-button {
flex: 1 1 auto;
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<header role="banner" aria-label="Main Navigation">
<div class="header-container">
<a href="#home" class="logo" aria-label="AI MedDiagnostics Home - Made by
Shreyansh Saraswati">AI MedDiagnostics</a>
<nav role="navigation" aria-label="Primary navigation">
<a href="#home" class="nav-link active" id="nav-home" tabindex="0" aria-
current="page" role="link">
<span class="material-icons" aria-hidden="true">home</span> Home
</a>
<a href="#symptom-checker" class="nav-link" id="nav-symptom-checker"
tabindex="0" role="link">
<span class="material-icons" aria-hidden="true">healing</span> Symptom
Checker
</a>
<a href="#health-assistant" class="nav-link" id="nav-health-assistant"
tabindex="0" role="link">
<span class="material-icons" aria-hidden="true">smart_toy</span> Health
Assistant
</a>
</nav>
</div>
</header>

<main id="app" role="main" tabindex="-1">


<!-- Home Page -->
<section id="home" class="page active" aria-label="Home page" tabindex="0">
<div class="container hero-section">
<h1>Welcome to AI MedDiagnostics</h1>
<p>Your trusted AI-powered health diagnostic web app, designed to run
entirely offline with professional-grade features inspired by mobile health
solutions.</p>
<p>Explore symptom checking, medical advice, health tracking, medication
reminders, BMI calculation, mental wellness support, emergency guides, and more —
all from your browser without the need for internet.</p>
<button id="start-checker-btn" aria-label="Start Symptom Checker">Get
Started</button>
</div>
</section>

<!-- Symptom Checker Page -->


<section id="symptom-checker" class="page" aria-label="Symptom Checker page"
tabindex="0">
<div class="container">
<h2>Symptom Checker</h2>
<form id="symptom-form" aria-describedby="symptom-desc" novalidate>
<label for="symptom-input">Enter your symptoms (comma separated):</label>
<input
type="text"
id="symptom-input"
name="symptom-input"
placeholder="e.g. fever, sore throat"
autocomplete="off"
aria-required="true"
/>
<div id="symptom-desc" class="sr-only">Input symptoms separated by commas
to get an AI diagnosis with recommendations.</div>
<button type="submit" id="get-diagnosis-btn" aria-label="Get
diagnosis">Diagnose</button>
</form>
<section id="diagnosis-result" aria-live="polite" aria-atomic="true"
role="region" tabindex="0"></section>
</div>
</section>

<!-- Health Assistant Page -->


<section id="health-assistant" class="page" aria-label="Health Assistant page"
tabindex="0">
<div class="container">
<h2>AI Health Assistant</h2>

<!-- Tabs for additional functions -->


<div class="tab-buttons" role="tablist" aria-label="Additional Health
Functions Tabs">
<button class="tab-button active" data-tab="chat" role="tab" aria-
selected="true" tabindex="0" aria-controls="tab-chat">Chatbot</button>
<button class="tab-button" data-tab="bmi" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-bmi">BMI Calculator</button>
<button class="tab-button" data-tab="reminders" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-reminders">Medication
Reminders</button>
<button class="tab-button" data-tab="tracker" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-tracker">Health Tracker</button>
<button class="tab-button" data-tab="firstAid" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-firstAid">First Aid
Guide</button>
<button class="tab-button" data-tab="mental" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-mental">Mental Wellness
Tips</button>
<button class="tab-button" data-tab="nutrition" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-nutrition">Nutrition
Planner</button>
<button class="tab-button" data-tab="exercise" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-exercise">Exercise
Suggestions</button>
<button class="tab-button" data-tab="faq" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-faq">FAQ</button>
<button class="tab-button" data-tab="notes" role="tab" aria-
selected="false" tabindex="-1" aria-controls="tab-notes">Notes</button>
</div>

<!-- Tab Contents -->


<div id="tab-chat" class="tab-content active" role="tabpanel" aria-
labelledby="chat" tabindex="0" >
<div id="assistant-chat" role="region" aria-live="polite" aria-
atomic="false" aria-label="Health assistant chat conversation">
<div id="assistant-messages" tabindex="0"></div>
<div id="assistant-typing-indicator" class="sr-only" aria-live="off"
aria-atomic="false">
<span>Dr. MedBot is typing...</span>
</div>
<form id="assistant-form" aria-label="Chat input area"
autocomplete="off" novalidate>
<div id="assistant-input-area">
<textarea
id="assistant-input"
rows="2"
placeholder="Ask me anything health related..."
aria-autocomplete="list"
aria-multiline="true"
spellcheck="false"
required
></textarea>
<button type="submit" id="assistant-send-btn" aria-label="Send
message">
<span class="material-icons" aria-hidden="true">send</span>
</button>
</div>
</form>
</div>
</div>

<div id="tab-bmi" class="tab-content" role="tabpanel" aria-labelledby="bmi"


tabindex="0" >
<h3>BMI Calculator</h3>
<form id="bmi-form" novalidate aria-describedby="bmi-desc" style="max-
width: 360px; margin-top: 14px;">
<p id="bmi-desc" class="sr-only">Enter your height and weight to
calculate body mass index</p>
<label for="bmi-height" style="display:block; margin-bottom: 6px; font-
weight: 600;">Height (cm):</label>
<input type="number" id="bmi-height" name="bmi-height" min="50"
max="300" required aria-required="true" autocomplete="off" />
<label for="bmi-weight" style="display:block; margin-top: 14px; margin-
bottom: 6px; font-weight: 600;">Weight (kg):</label>
<input type="number" id="bmi-weight" name="bmi-weight" min="10"
max="600" required aria-required="true" autocomplete="off" />
<button type="submit" class="btn-primary" style="margin-top:
18px;">Calculate BMI</button>
</form>
<div id="bmi-result" style="margin-top: 24px; font-weight: 700; font-
size: 1.2rem; color: #0047cc;"></div>
</div>

<div id="tab-reminders" class="tab-content" role="tabpanel" aria-


labelledby="reminders" tabindex="0" >
<h3>Medication Reminders</h3>
<form id="reminder-form" aria-label="Add Medication Reminder" style="max-
width: 480px; margin-top: 14px;">
<label for="med-name" style="display:block; font-weight:600; margin-
bottom:6px;">Medication Name:</label>
<input id="med-name" type="text" autocomplete="off" required
placeholder="Paracetamol" />
<label for="med-dose" style="display:block; font-weight:600; margin-
bottom:6px; margin-top:14px;">Dosage / Notes:</label>
<input id="med-dose" type="text" autocomplete="off" placeholder="500mg
every 8 hrs" />
<label for="reminder-time" style="display:block; font-weight:600;
margin-bottom:6px; margin-top:14px;">Reminder Time:</label>
<input id="reminder-time" type="time" required />
<button type="submit" class="btn-primary" style="margin-top: 18px;">Add
Reminder</button>
</form>
<div id="reminders-list" style="margin-top: 24px; max-height: 180px;
overflow-y: auto; background: #f1f6ff; padding: 12px 18px; border-radius: 20px;
color: #2c3a59;"></div>
</div>

<div id="tab-tracker" class="tab-content" role="tabpanel" aria-


labelledby="tracker" tabindex="0" >
<h3>Health Tracker</h3>
<form id="tracker-form" aria-label="Log Health Data" style="max-width:
480px; margin-top: 14px;">
<label for="track-date" style="display:block; font-weight:600; margin-
bottom:6px;">Date:</label>
<input id="track-date" type="date" required />
<label for="body-temp" style="display:block; font-weight:600; margin-
bottom:6px; margin-top:14px;">Body Temperature (°C):</label>
<input id="body-temp" type="number" step="0.1" min="30" max="45"
placeholder="e.g. 37.0" />
<label for="systolic" style="display:block; font-weight:600; margin-
bottom:6px; margin-top:14px;">Blood Pressure (Systolic mmHg):</label>
<input id="systolic" type="number" min="50" max="250" placeholder="e.g.
120" />
<label for="diastolic" style="display:block; font-weight:600; margin-
bottom:6px; margin-top:14px;">Blood Pressure (Diastolic mmHg):</label>
<input id="diastolic" type="number" min="30" max="150"
placeholder="e.g. 80" />
<label for="tracker-notes" style="display:block; font-weight:600;
margin-bottom:6px; margin-top:14px;">Notes / Symptoms:</label>
<textarea id="tracker-notes" rows="3" placeholder="Optional: headache,
fatigue..."></textarea>
<button type="submit" class="btn-primary" style="margin-top: 18px;">Add
Log Entry</button>
</form>
<div id="tracker-logs" style="margin-top: 24px; max-height: 180px;
overflow-y: auto; background: #f1f6ff; padding: 12px 18px; border-radius: 20px;
color: #2c3a59;"></div>
</div>

<div id="tab-firstAid" class="tab-content" role="tabpanel" aria-


labelledby="firstAid" tabindex="0" >
<h3>First Aid Guide</h3>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Burns</summary>
<p>Cool the burn area under running cold water for at least 10 minutes.
Cover with sterile non-adhesive dressing. Do not use creams or ice directly.</p>
</details>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Cuts and
Bleeding</summary>
<p>Apply direct pressure with clean cloth to stop bleeding. Clean wound
with water. Apply sterile dressing. Seek medical help if bleeding persists.</p>
</details>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Choking</summary>
<p>Perform effective back blows or Heimlich maneuver. If unconscious,
call emergency services immediately.</p>
</details>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Fractures</summary>
<p>Immobilize the limb, apply ice pack, and seek immediate medical
care. Avoid moving injured person if possible.</p>
</details>
<details>
<summary style="font-weight:700; cursor:pointer;">Shock</summary>
<p>Lay the person down, elevate legs if no injury, keep warm, and call
emergency services immediately.</p>
</details>
</div>

<div id="tab-mental" class="tab-content" role="tabpanel" aria-


labelledby="mental" tabindex="0" >
<h3>Mental Wellness Tips</h3>
<ul style="padding-left: 20px; color: #374172;">
<li>Practice deep breathing exercises for 5 minutes daily.</li>
<li>Maintain a consistent sleep schedule.</li>
<li>Take breaks from screens and practice mindfulness.</li>
<li>Maintain social connections with family or friends.</li>
<li>Engage in light physical activity to boost mood.</li>
<li>Consider journaling your thoughts – a great mental outlet.</li>
<li>Seek professional counseling if persistent anxiety or depression
impacts daily life.</li>
</ul>
</div>

<div id="tab-nutrition" class="tab-content" role="tabpanel" aria-


labelledby="nutrition" tabindex="0" >
<h3>Nutrition Planner</h3>
<p>Eating a balanced diet improves your overall health. Here are some
quick tips:</p>
<ul style="padding-left: 20px; color: #374172;">
<li>Include a variety of fruits and vegetables daily.</li>
<li>Choose whole grains over refined grains.</li>
<li>Limit sugar and salt intake.</li>
<li>Stay hydrated with plenty of water.</li>
<li>Balance protein sources – both plant and animal-based.</li>
<li>Moderate your fat intake, favor healthy fats like olive oil.</li>
</ul>
<p>Ask me for personalized meal suggestions!</p>
</div>

<div id="tab-exercise" class="tab-content" role="tabpanel" aria-


labelledby="exercise" tabindex="0" >
<h3>Exercise Suggestions</h3>
<ul style="padding-left: 20px; color: #374172;">
<li>Start your day with 10 minutes of stretching.</li>
<li>Try brisk walking or jogging 3-4 times a week.</li>
<li>Incorporate strength training twice weekly.</li>
<li>Practice yoga or pilates for balance and mental calm.</li>
<li>Always warm up before physical activities and cool down
afterward.</li>
</ul>
<p>Tell me your preferences for custom workout ideas!</p>
</div>

<div id="tab-faq" class="tab-content" role="tabpanel" aria-labelledby="faq"


tabindex="0" >
<h3>Frequently Asked Questions</h3>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">How do I know if I
should see a doctor?</summary>
<p>If you have severe, persistent, or worsening symptoms, difficulty
breathing, chest pain, sudden weakness, or confusion, seek medical care
promptly.</p>
</details>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Can AI replace
doctors?</summary>
<p>AI tools assist with information and guidance but cannot replace a
licensed healthcare professional’s diagnosis or treatment advice.</p>
</details>
<details style="margin-bottom:12px;">
<summary style="font-weight:700; cursor:pointer;">Is my data stored
securely?</summary>
<p>This app runs entirely offline, and your data is stored locally in
your browser for privacy and security.</p>
</details>
<details>
<summary style="font-weight:700; cursor:pointer;">How to use medication
reminders?</summary>
<p>You can add medication names, dosage info, and set reminder times in
the Medication Reminders tab to help manage your medications.</p>
</details>
</div>

<div id="tab-notes" class="tab-content" role="tabpanel" aria-


labelledby="notes" tabindex="0" >
<h3>Personal Notes</h3>
<p>Use this section to keep health-related notes, thoughts, or
appointment reminders.</p>
<form id="notes-form" style="max-width: 480px; margin-top: 14px;">
<label for="note-title" style="display:block; font-weight:600; margin-
bottom:6px;">Title:</label>
<input id="note-title" type="text" autocomplete="off" aria-
required="true" />
<label for="note-content" style="display:block; font-weight:600;
margin-bottom:6px; margin-top:14px;">Content:</label>
<textarea id="note-content" rows="5" aria-required="true"></textarea>
<button type="submit" class="btn-primary" style="margin-top: 18px;">Add
Note</button>
</form>
<div id="notes-list" style="margin-top: 24px; max-height: 180px;
overflow-y: auto; background: #f1f6ff; padding: 12px 18px; border-radius: 20px;
color: #2c3a59;"></div>
</div>

</div>
</section>
</main>

<footer role="contentinfo">
Made with care by <strong>Shreyansh Saraswati</strong> © 2024 AI MedDiagnostics
</footer>

<script>
(() => {
/* Utility for localStorage persistence */
function saveToStorage(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
function loadFromStorage(key) {
const json = localStorage.getItem(key);
if(!json) return null;
try {
return JSON.parse(json);
} catch {
return null;
}
}

/* SPA Navigation */
const pages = {
home: document.getElementById('home'),
symptomChecker: document.getElementById('symptom-checker'),
healthAssistant: document.getElementById('health-assistant'),
};
const navLinks = {
home: document.getElementById('nav-home'),
symptomChecker: document.getElementById('nav-symptom-checker'),
healthAssistant: document.getElementById('nav-health-assistant'),
};
function switchPage(target) {
Object.entries(pages).forEach(([key, el]) => {
if (key === target) {
el.classList.add('active');
el.setAttribute('aria-hidden', 'false');
navLinks[key].classList.add('active');
navLinks[key].setAttribute('aria-current', 'page');
el.focus();
} else {
el.classList.remove('active');
el.setAttribute('aria-hidden', 'true');
navLinks[key].classList.remove('active');
navLinks[key].removeAttribute('aria-current');
}
});
}
navLinks.home.addEventListener('click', e => { e.preventDefault();
switchPage('home'); });
navLinks.symptomChecker.addEventListener('click', e => { e.preventDefault();
switchPage('symptomChecker'); });
navLinks.healthAssistant.addEventListener('click', e => { e.preventDefault();
switchPage('healthAssistant'); });
document.getElementById('start-checker-btn').addEventListener('click', () =>
{ switchPage('symptomChecker'); document.getElementById('symptom-
input').focus(); });

/* --- Symptom Checker --- */


const diagnosisResult = document.getElementById('diagnosis-result');
const symptomInput = document.getElementById('symptom-input');
const symptomForm = document.getElementById('symptom-form');

const diagnosisDB = [
{name: "Common Cold", symptoms: ['cough', 'sneezing', 'runny nose', 'sore
throat'], explanation: "A viral infection affecting your nose and throat.",
recommendation: "Rest, stay hydrated, and use over-the-counter cold remedies if
necessary.", keywords: ['cough', 'sneezing', 'runny nose', 'sore throat'],
confidenceBase: 80},
{name: "Influenza (Flu)", symptoms: ['fever', 'muscle pain', 'chills',
'fatigue'], explanation: "A contagious respiratory illness caused by influenza
viruses.", recommendation: "Rest, drink fluids, and consult a doctor if symptoms
worsen or persist more than a few days.", keywords: ['fever', 'muscle pain',
'chills', 'fatigue'], confidenceBase: 85},
{name: "Tonsillitis", symptoms: ['sore throat', 'fever', 'difficulty
swallowing'], explanation: "Inflammation of the tonsils, typically due to viral or
bacterial infection.", recommendation: "Warm liquids, rest, and see a doctor if
symptoms worsen.", keywords: ['sore throat', 'fever', 'difficulty swallowing'],
confidenceBase: 87},
{name: "Food Poisoning", symptoms: ['nausea', 'vomiting', 'stomach ache',
'diarrhea'], explanation: "Illness caused by eating contaminated food or drinks.",
recommendation: "Stay hydrated, rest, and seek medical attention if symptoms are
severe or persist.", keywords: ['nausea', 'vomiting', 'stomach ache', 'diarrhea'],
confidenceBase: 90},
{name: "Migraine", symptoms: ['headache', 'nausea', 'sensitivity to light',
'pulsating pain'], explanation: "A neurological condition causing intense
headaches.", recommendation: "Rest in a quiet dark room and consider pain-relief
medications; consult a neurologist if frequent.", keywords: ['headache', 'nausea',
'sensitivity to light', 'pulsating pain'], confidenceBase: 75},
{name: "Anxiety", symptoms: ['restlessness', 'fatigue', 'difficulty
concentrating', 'irritability'], explanation: "A mental health disorder causing
excessive worry.", recommendation: "Practice relaxation techniques and consult a
mental health professional if persistent.", keywords: ['restlessness', 'fatigue',
'difficulty concentrating', 'irritability'], confidenceBase: 70},
];

function diagnoseSymptoms(input) {
const userSymptoms = input.toLowerCase()
.split(',')
.map(s => s.trim())
.filter(Boolean);

if (userSymptoms.length === 0) return null;

let bestMatch = null;


let bestScore = 0;
diagnosisDB.forEach(condition => {
const matchedSymptoms = condition.keywords.filter(key =>
userSymptoms.includes(key));
const matchScore = matchedSymptoms.length / condition.keywords.length;
if (matchScore > 0 && matchScore > bestScore) {
bestScore = matchScore;
bestMatch = { ...condition };
}
});
if (!bestMatch) {
return {
diagnosis: "Unknown Condition",
explanation: "Your symptoms do not closely match common conditions in the
database.",
recommendation: "Please consult with a healthcare professional for further
evaluation.",
confidence: 50,
};
}
const confidence = Math.round(bestMatch.confidenceBase * bestScore);
return { diagnosis: bestMatch.name, explanation: bestMatch.explanation,
recommendation: bestMatch.recommendation, confidence };
}
symptomForm.addEventListener('submit', e => {
e.preventDefault();
const inputVal = symptomInput.value.trim();
if (!inputVal) {
diagnosisResult.classList.remove('visible');
diagnosisResult.innerHTML = '';
return;
}
diagnosisResult.setAttribute('tabindex', '-1');
const diagnosis = diagnoseSymptoms(inputVal);
diagnosisResult.innerHTML = `
<h3>Diagnosis: <strong>${diagnosis.diagnosis || 'N/A'}</strong></h3>
<p><strong>Confidence:</strong> ${diagnosis.confidence ?? 0}%</p>
<p><strong>Explanation:</strong> ${diagnosis.explanation}</p>
<p><strong>Recommendation:</strong> ${diagnosis.recommendation}</p>
`;
diagnosisResult.classList.add('visible');
diagnosisResult.focus();
});

/* --- Health Assistant Tabs --- */


const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetTab = button.dataset.tab;
tabButtons.forEach(btn=>{
btn.classList.toggle('active', btn === button);
btn.setAttribute('aria-selected', btn === button ? 'true' : 'false');
btn.tabIndex = btn === button ? 0 : -1;
});
tabContents.forEach(content=>{
content.classList.toggle('active', content.id === 'tab-'+targetTab);
});
});
});

/* --- Assistant Chatbot --- */


const assistantMessages = document.getElementById('assistant-messages');
const assistantForm = document.getElementById('assistant-form');
const assistantInput = document.getElementById('assistant-input');
const typingIndicator = document.getElementById('assistant-typing-indicator');

function addMessage(content, sender='bot') {


const msg = document.createElement('div');
msg.classList.add('msg-bubble', sender === 'user' ? 'msg-user' : 'msg-bot');
msg.textContent = content;
assistantMessages.appendChild(msg);
assistantMessages.scrollTop = assistantMessages.scrollHeight;
}
function showTyping() {
typingIndicator.classList.remove('sr-only');
}
function hideTyping() {
typingIndicator.classList.add('sr-only');
}

// Basic simulated AI response expanded for new features:


function generateAssistantReply(query) {
query = query.toLowerCase();

// Exit early if empty


if(!query.trim()) return "Please type a health-related question or command.";

// Keywords and canned responses for expanded features


const keywords = {
bmi: /bmi|body mass index|weight.*height|calculate.*bmi/,
reminder: /reminder|medication schedule|medicine alarm|pill time|meds
notification/,
tracker: /track|log health|temperature log|blood pressure log|health
history/,
firstaid: /first aid|emergency steps|burn treatment|choking procedure/,
mental: /stress|anxiety|depression|mental health|mindfulness|calm/,
nutrition: /meal plan|nutrition|diet|healthy eating|calories|vitamins|
protein/,
exercise: /workout|exercise|fitness|yoga|cardio|strength training/,
faq: /faq|common questions|help/,
notes: /note|reminder|memo|appointment/,
symptom: /symptom|fever|cough|headache|nausea|pain|rash/,
medicine: /medication|drug|paracetamol|ibuprofen|antibiotic|allergy|side
effects/,
hello: /^(hi|hello|hey)/,
thanks: /(thanks|thank you|thx)/,
};

// Replies for each keyword category


if(keywords.hello.test(query)) return "Hello! How can I assist you with your
health today?";
if(keywords.thanks.test(query)) return "You're welcome! Let me know if you have
more health questions.";
if(keywords.bmi.test(query)){
return "You can use the BMI Calculator tab to enter your height and weight to
find your body mass index.";
}
if(keywords.reminder.test(query)){
return "Use the Medication Reminders tab to add reminders and never miss your
meds.";
}
if(keywords.tracker.test(query)){
return "Track your vital health stats like body temperature and blood
pressure with the Health Tracker tab.";
}
if(keywords.firstaid.test(query)){
return "For first aid guidance, check the First Aid Guide tab for quick
instructions on common emergencies.";
}
if(keywords.mental.test(query)){
return "For mental wellness, try deep breathing exercises, maintain sleep
hygiene, and stay connected. I can share tips anytime.";
}
if(keywords.nutrition.test(query)){
return "Nutrition is key to health. The Nutrition Planner tab offers balanced
diet tips and recommendations.";
}
if(keywords.exercise.test(query)){
return "Regular exercise improves your health. Visit the Exercise Suggestions
tab for routines and guidance.";
}
if(keywords.faq.test(query)){
return "Check out the FAQ tab for answers to common health questions and
guidance.";
}
if(keywords.notes.test(query)){
return "You can jot down personal health notes or appointments in the Notes
tab.";
}
if(keywords.symptom.test(query)){
return "For symptom diagnosis, use the Symptom Checker page or describe your
symptoms here for advice.";
}
if(keywords.medicine.test(query)){
return "I can provide info about common medicines, side effects, and
interactions. Ask me any medication-related question.";
}

// Fallback: simulate empathetic comprehensive answer


let fallbackReplies = [
"Thanks for your question! As an offline AI assistant, I provide general
health info and advice, but always consult a healthcare professional for
diagnosis.",
"I'm here to help! Please be sure to provide symptoms or specify the health
topic you'd like info on.",
"Health is important. Would you like information on symptoms, medications,
nutrition, exercise, or mental wellness?",
"I can assist with health tracking, reminders, nutrition, first aid, and
more. Ask me about any of these features!",
];

// Random fallback if no match


const idx = Math.floor(Math.random() * fallbackReplies.length);
return fallbackReplies[idx];
}

assistantForm.addEventListener('submit', e => {
e.preventDefault();
let userInput = assistantInput.value.trim();
if(!userInput) return;
assistantInput.value = '';
addMessage(userInput, 'user');
showTyping();

setTimeout(() => {
hideTyping();
let reply = generateAssistantReply(userInput);
addMessage(reply, 'bot');
}, 1200);
});

/* --- BMI Calculator --- */


const bmiForm = document.getElementById('bmi-form');
const bmiHeightInput = document.getElementById('bmi-height');
const bmiWeightInput = document.getElementById('bmi-weight');
const bmiResult = document.getElementById('bmi-result');

bmiForm.addEventListener('submit', e => {
e.preventDefault();
const height = parseFloat(bmiHeightInput.value);
const weight = parseFloat(bmiWeightInput.value);

if(!height || height < 50 || height > 300 || isNaN(height)){


bmiResult.textContent = "Please enter a valid height in cm (50-300).";
return;
}
if(!weight || weight < 10 || weight > 600 || isNaN(weight)){
bmiResult.textContent = "Please enter a valid weight in kg (10-600).";
return;
}
const heightMeters = height / 100;
const bmi = (weight / (heightMeters * heightMeters)).toFixed(1);
let category = "";
if(bmi < 18.5) category = "underweight";
else if(bmi < 25) category = "normal weight";
else if(bmi < 30) category = "overweight";
else category = "obese";
bmiResult.textContent = `Your BMI is ${bmi} which is considered ${category}.
For personalized advice consult your healthcare provider.`;
});

/* --- Medication Reminders --- */


const reminderForm = document.getElementById('reminder-form');
const medNameInput = document.getElementById('med-name');
const medDoseInput = document.getElementById('med-dose');
const reminderTimeInput = document.getElementById('reminder-time');
const remindersList = document.getElementById('reminders-list');

let reminders = loadFromStorage('medReminders') || [];

function renderReminders(){
if(reminders.length === 0){
remindersList.innerHTML = "<p>No reminders added yet.</p>";
return;
}
remindersList.innerHTML = '';
reminders.forEach((r,i)=>{
const div = document.createElement('div');
div.className = 'tracker-log-item';
div.textContent = `${r.medName} - ${r.medDose || 'No dosage info'} at $
{r.time}`;
const btn = document.createElement('button');
btn.textContent = 'Delete';
btn.type = 'button';
btn.style.marginLeft = '12px';
btn.style.color = '#ff4d4d';
btn.style.background = 'none';
btn.style.border = 'none';
btn.style.cursor = 'pointer';
btn.style.fontWeight = '700';
btn.title = 'Delete reminder';
btn.addEventListener('click', () => {
reminders.splice(i, 1);
saveToStorage('medReminders', reminders);
renderReminders();
});
div.appendChild(btn);
remindersList.appendChild(div);
});
}
renderReminders();

reminderForm.addEventListener('submit', e => {
e.preventDefault();
const medName = medNameInput.value.trim();
const medDose = medDoseInput.value.trim();
const time = reminderTimeInput.value;

if(!medName){
alert('Please enter medication name.');
medNameInput.focus();
return;
}
if(!time){
alert('Please select reminder time.');
reminderTimeInput.focus();
return;
}

reminders.push({medName, medDose, time});


saveToStorage('medReminders', reminders);
renderReminders();
medNameInput.value = '';
medDoseInput.value = '';
reminderTimeInput.value = '';
});

/* --- Health Tracker --- */


const trackerForm = document.getElementById('tracker-form');
const trackDateInput = document.getElementById('track-date');
const bodyTempInput = document.getElementById('body-temp');
const systolicInput = document.getElementById('systolic');
const diastolicInput = document.getElementById('diastolic');
const trackerNotesInput = document.getElementById('tracker-notes');
const trackerLogs = document.getElementById('tracker-logs');

let healthLogs = loadFromStorage('healthLogs') || [];

function renderHealthLogs(){
if(healthLogs.length === 0){
trackerLogs.innerHTML = "<p>No health logs added yet.</p>";
return;
}
trackerLogs.innerHTML = '';
healthLogs.slice().reverse().forEach(log=>{
const div = document.createElement('div');
div.className = 'tracker-log-item';
const dateStr = new Date(log.date).toLocaleDateString();
div.innerHTML = `<strong>${dateStr}</strong> - Temp: ${log.bodyTemp || 'N/A'}
°C, BP: ${log.systolic || 'N/A'}/${log.diastolic || 'N/A'} mmHg<br/>Notes: $
{log.notes || 'None'}`;
trackerLogs.appendChild(div);
});
}
renderHealthLogs();

trackerForm.addEventListener('submit', e => {
e.preventDefault();
const dateVal = trackDateInput.value;
if(!dateVal){
alert('Please select a date.');
trackDateInput.focus();
return;
}
const bodyTemp = bodyTempInput.value ? parseFloat(bodyTempInput.value) : null;
if(bodyTemp !== null && (bodyTemp < 30 || bodyTemp > 45)){
alert('Please enter a realistic body temperature between 30 and 45 °C.');
bodyTempInput.focus();
return;
}
const systolic = systolicInput.value ? parseInt(systolicInput.value) : null;
const diastolic = diastolicInput.value ? parseInt(diastolicInput.value) : null;
if((systolic !== null && (systolic < 50 || systolic > 250)) || (diastolic !==
null && (diastolic < 30 || diastolic > 150))){
alert('Please enter realistic blood pressure values.');
return;
}
const notes = trackerNotesInput.value.trim();

healthLogs.push({date: dateVal, bodyTemp, systolic, diastolic, notes});


saveToStorage('healthLogs', healthLogs);
renderHealthLogs();

// Reset inputs except date (keep for sequential data)


bodyTempInput.value = '';
systolicInput.value = '';
diastolicInput.value = '';
trackerNotesInput.value = '';
});

/* --- Personal Notes --- */


const notesForm = document.getElementById('notes-form');
const noteTitleInput = document.getElementById('note-title');
const noteContentInput = document.getElementById('note-content');
const notesList = document.getElementById('notes-list');

let personalNotes = loadFromStorage('personalNotes') || [];

function renderNotes(){
if(personalNotes.length === 0){
notesList.innerHTML = "<p>No notes added yet.</p>";
return;
}
notesList.innerHTML = '';
personalNotes.slice().reverse().forEach(note=>{
const div = document.createElement('div');
div.className = 'tracker-log-item';
div.style.paddingBottom = '8px';
const dateStr = new Date(note.created).toLocaleString();
div.innerHTML = `<strong>${note.title}</strong> <small style="color:#555;
font-size: 0.8rem;">(${dateStr})</small><br/>${note.content}`;
notesList.appendChild(div);
});
}
renderNotes();

notesForm.addEventListener('submit', e => {
e.preventDefault();
const title = noteTitleInput.value.trim();
const content = noteContentInput.value.trim();

if(!title){
alert('Please enter a title for your note.');
noteTitleInput.focus();
return;
}
if(!content){
alert('Please enter some content for your note.');
noteContentInput.focus();
return;
}

const newNote = {title, content, created: new Date().toISOString()};


personalNotes.push(newNote);
saveToStorage('personalNotes', personalNotes);
renderNotes();

noteTitleInput.value = '';
noteContentInput.value = '';
});

/* Accessibility: Keyboard shortcuts */


// Navigate pages with H, S, A keys
document.addEventListener('keydown', e => {
if(e.metaKey || e.ctrlKey) return;
switch(e.key.toLowerCase()){
case 'h': switchPage('home'); break;
case 's': switchPage('symptomChecker'); break;
case 'a': switchPage('healthAssistant'); break;
}
});

// Initialize chatbot greeting message


const assistantMessages = document.getElementById('assistant-messages');
function initAssistantChat(){
assistantMessages.innerHTML = '';
addMessage("Hello! I'm Dr. MedBot. You can ask me about symptoms, medications,
nutrition, mental health, fitness, first aid, or request calculators and
reminders.", 'bot');
}
initAssistantChat();

})();
</script>
</body>
</html>

You might also like