| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>mRetina AI</title> |
| | <style> |
| | body { |
| | font-family: Arial, sans-serif; |
| | font-size: 16px; |
| | line-height: 1.6; |
| | margin: 0; |
| | padding: 0; |
| | background-color: #f2f2f2; |
| | color: #333; |
| | } |
| | header { |
| | background-color: #fff; |
| | padding: 0px; |
| | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); |
| | text-align: center; |
| | } |
| | |
| | .HEADER-image { |
| | width: 100px; |
| | height: auto; |
| | margin-right: 15px; |
| | cursor: pointer; |
| | } |
| | .container { |
| | width: 100%; |
| | max-width: 1000px; |
| | margin: 0 auto; |
| | padding: 20px; |
| | box-sizing: border-box; |
| | background-color: #f2f2f2; |
| | color: #333; |
| | } |
| | h1, h2 { |
| | font-weight: bold; |
| | font-size: 24px; |
| | margin-top: 0; |
| | } |
| | .main-content { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | } |
| | .large-button { |
| | display: inline-block; |
| | padding: 14px 24px; |
| | font-size: 20px; |
| | font-weight: bold; |
| | text-decoration: none; |
| | color: #fff; |
| | background-color: #007bff; |
| | border: 2px solid #007bff; |
| | border-radius: 8px; |
| | margin: 10px; |
| | cursor: pointer; |
| | transition: background-color 0.3s ease; |
| | width: 250px; |
| | height: 50px; |
| | line-height: 50px; |
| | text-align: center; |
| | } |
| | .large-button:hover { |
| | background-color: #0056b3; |
| | } |
| | #instructions { |
| | display: none; |
| | text-align: left; |
| | padding: 20px; |
| | } |
| | footer { |
| | text-align: center; |
| | background-color: #fff; |
| | padding: 20px; |
| | box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <header> |
| | <a href="https://ameenmarashi-mretinaai.static.hf.space"> |
| | <img src="MretinaAILogo.png" alt="Grayscale Example" class="HEADER-image"> |
| | </a> |
| | <h1>mRetina AI</h1> |
| | <p>Telemedicine reimagined</p> |
| | </header> |
| |
|
| | <div class="container"> |
| | <div class="main-content"> |
| | <a href="mRetinaGPT.html" class="large-button">mRetinaGPT</a> |
| | <a href="AI case generator.html" class="large-button">AI Case Generator</a> |
| | <a href="imageclassifier.html" class="large-button">OCT Classifier</a> |
| | <a href="feedback.html" class="large-button" id="instructionsBtn">Feedback</a> |
| | <a href="aboutus.html" class="large-button" id="instructionsBtn">About Us</a> |
| | |
| | <footer> |
| | <p>© 2024 mRetina AI. All rights reserved. Created and designed by Ameen Marashi, M.D.</p> |
| | </footer> |
| |
|
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const instructionsBtn = document.getElementById('instructionsBtn'); |
| | const instructionsDiv = document.getElementById('instructions'); |
| | instructionsBtn.addEventListener('click', function() { |
| | instructionsDiv.style.display = (instructionsDiv.style.display === 'none') ? 'block' : 'none'; |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
