Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Drug Side Effect Checker</title> | |
| <link rel="stylesheet" href="/static/css/homeStyle.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <div class="logo">MedScope</div> | |
| <ul> | |
| <li><a href="/home/{{ user.uid }}" class="active">Home</a></li> | |
| <li><a href="/assistant/{{ user.uid }}">Assistant</a></li> | |
| <li><a href="/alternatives/{{ user.uid }}">Alternatives</a></li> | |
| <li><a href="/chat/{{ user.uid }}">Chatbot</a></li> | |
| <li><a href="/profile/{{ user.uid }}">Profile</a></li> | |
| <li><a href="/logout">Logout</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <h1>Know Your Medicine</h1> | |
| <p>Enter your profile and drug details to check for potential risks and side effects.</p> | |
| <form id="drug-search-form"> | |
| <fieldset> | |
| <legend>Your Profile</legend> | |
| <div> | |
| <label for="age_grp">Age Group</label> | |
| <select id="age_grp" required> | |
| <option value="Neonate">Neonate (0-1 month)</option> | |
| <option value="Infant">Infant (1 month-2 years)</option> | |
| <option value="Child">Child (2-12 years)</option> | |
| <option value="Adolescent">Adolescent (12-18 years)</option> | |
| <option value="Adult" selected>Adult (18-65 years)</option> | |
| <option value="Elderly">Elderly (65+ years)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="sex">Sex</label> | |
| <select id="sex"> | |
| <option value="M">Male</option> | |
| <option value="F">Female</option> | |
| <option value="UNK" selected>Unknown</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="is_hcp">Are you a Health Professional?</label> | |
| <select id="is_hcp"> | |
| <option value="False">No</option> | |
| <option value="True">Yes</option> | |
| </select> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Drug Details</legend> | |
| <div> | |
| <label for="active_chemical">Drug Name (Active Chemical)</label> | |
| <div class="autocomplete-container"> | |
| <input type="text" id="active_chemical" placeholder="e.g., DIDANOSINE" required autocomplete="off"> | |
| <div class="suggestions-box" id="chemical_suggestions"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="drug_role">Drug Role</label> | |
| <select id="drug_role"> | |
| <option value="PS">Primary Suspect (PS)</option> | |
| <option value="SS">Secondary Suspect (SS)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="route">Route of Administration</label> | |
| <div class="autocomplete-container"> | |
| <input type="text" id="route" placeholder="e.g., Oral" required autocomplete="off" value="Oral"> | |
| <div class="suggestions-box" id="route_suggestions"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="indication_for_use">Reason for Use</label> | |
| <div class="autocomplete-container"> | |
| <input type="text" id="indication_for_use" placeholder="e.g., Headache" required autocomplete="off" value="Unknown"> | |
| <div class="suggestions-box" id="indication_suggestions"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="dechallenge">Did reaction stop if drug was stopped?</label> | |
| <select id="dechallenge"> | |
| <option value="Unknown" selected>Unknown</option> | |
| <option value="Yes">Yes</option> | |
| <option value="No">No</option> | |
| <option value="Not applicable">Not applicable</option> | |
| </select> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Location</legend> | |
| <div> | |
| <label for="country">Country</label> | |
| <div class="autocomplete-container"> | |
| <input type="text" id="country" placeholder="e.g., US" required autocomplete="off" value="COUNTRY NOT SPECIFIED"> | |
| <div class="suggestions-box" id="country_suggestions"></div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <button type="submit">Check</button> | |
| </form> | |
| </section> | |
| <section id="results-section" class="results-container hidden"> | |
| <div class="result-box"> | |
| <h3>Predicted Risk Profile</h3> | |
| <div id="risk-profile-list"></div> | |
| </div> | |
| <div class="result-box"> | |
| <h3>Predicted Side Effects</h3> | |
| <div id="side-effects-list"></div> | |
| </div> | |
| <div class="result-box" id="alternatives-box" style="display: none;"> | |
| <h3>Possible Alternatives</h3> | |
| <p>For <strong id="alt-indication"></strong>, but without the predicted side effects:</p> | |
| <div id="alternatives-list"></div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2025 MediAware. All rights reserved.</p> | |
| </footer> | |
| <script src="/static/js/home.js"></script> | |
| </body> | |
| </html> |