john/coursera-ibm-java-developer-course
1
Fork 0
Code Issues 17 Pull Requests Actions Activity

Completed front end pages for Clinic Management System

Browse Source
This commit is contained in:
John Ahlroos
2025-11-06 19:52:26 +01:00
parent 7f968413b3
commit 42efca48ee
10 changed files with 463 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
SmartClinicManagementSystem/app/src/main/resources/static/index.html
View File

@@ -1,115 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart Clinic Management System</title>
<link rel="stylesheet" href="./assets/css/index.css">
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./js/util.js" defer></script>
<script src="./js/render.js" defer></script>
<script src="./js/components/header.js" defer></script>
<script src="./js/components/footer.js" defer></script>
<link rel="icon" type="image/png" href="./assets/images/logo/logo.png" />
</head>
<body>
<div class="container">
<div class="wrapper">
<div id="header"></div>
<main class="main-content">
<h2>Select Your Role:</h2>
<button>Admin</button>
<button>Doctor</button>
<button>Patient</button>
</main>
<div id="footer"></div>
</div>
</div>
<div id="modal" class="modal">
<button id="closeModal">Close</button>
<div id="modal-body"></div>
</div>
<script type="module" src="js/services/index.js" defer></script>
</body>
</html>
<!-- index.html -->
<!--
Step-by-Step Explanation of `index.html`.
This file allows users to select a role (Admin, Patient, Doctor)
and triggers modal-based login functionality.
1. Label the File
* Add a comment at the very top to identify the file as `index.html`. This helps developers stay organized.
2. Declare Document Type
* Use the declaration for HTML5 so browsers know how to render the page correctly.
3. Start the HTML Document
* Begin the HTML structure and set the document language to English to improve accessibility and SEO `lang="en"`.
4. Head Section (Metadata and Resources)
* Open the `<head>` section which contains settings and links that don’t show up visually.
5. Set Character Encoding
* Specify UTF-8 encoding to support most global characters and symbols.
6. Set the Page Title
* Give the page a name (e.g., "Select Role") that appears on the browser tab.
7. Add a Favicon
* Link to an icon (like a logo) that will appear in the browser tab from the address `href="../assets/images/logo/Logo.png"`
8. Link Stylesheets
* Add a page-specific stylesheet for layout and design.
* Also include a global stylesheet for shared site-wide styles.
HINT:
`<link rel="stylesheet" href="../assets/css/index.css">`
`<link rel="stylesheet" href="../assets/css/style.css">`
9. Add JavaScript Files with `defer`
* Link utility and rendering JavaScript files (e.g., `util.js`, `render.js`).
* Include scripts for rendering components like header and footer.
* Use the `defer` attribute so they load after the HTML is parsed.
HINT:
`<script src="../js/util.js" defer></script>`
`<script src="../js/render.js" defer></script>`
`<script src="../js/components/header.js" defer></script>`
`<script src="../js/components/footer.js" defer></script>`
10. Close the Head and Open the Body
* Wrap up metadata and begin the visible page content.
11. Create a Container
* Add a main container to hold all page elements and apply layout constraints.
12. Use a Wrapper for Structure
* Inside the container, add a wrapper to group header, main, and footer sections logically.
13. Insert a Header Placeholder
* Add a `div` that will be dynamically filled by JavaScript with the site’s header.
14. Define the Main Section
* Use a semantic `<main>` tag to hold the central content of the page.
15. Add a Heading for Role Selection
* Display a heading like “Select Your Role” to instruct users.
16. Add Buttons for Roles
* Create buttons for each role: Admin, Patient, and Doctor.
* Assign unique identifiers or `onclick` handlers to them as needed.
17. Insert a Footer Placeholder
* Add a `div` that will be dynamically filled by JavaScript with the site’s footer.
18. Create a Modal Structure
* Add a modal overlay for popups (like login forms).
* Include a close button and an inner container for dynamic content.
19. Load Page-Specific Logic Module
* Use a `<script type="module">` tag to load the role selection logic (e.g., `index.js`).
* Ensure it’s deferred so it doesn’t block HTML rendering.
20. Close the Body and HTML Tags
* Properly close all opened tags to complete the document structure.
-->
</html>