Scribd
Upload
24 views9 pages

HTML Css Code

The document outlines a prescription interface for a medical application, featuring sections for doctor and patient information, medical history, previous test records, and prescription details. It includes input fields for patient data such as age, weight, height, and BMI, with a script to calculate BMI automatically. The interface also contains buttons for saving and printing the prescription, along with a footer providing hospital contact information.

Uploaded by

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

HTML Css Code

The document outlines a prescription interface for a medical application, featuring sections for doctor and patient information, medical history, previous test records, and prescription details. It includes input fields for patient data such as age, weight, height, and BMI, with a script to calculate BMI automatically. The interface also contains buttons for saving and printing the prescription, along with a footer providing hospital contact information.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Prescription Interface</title> <!--
Browser tab title -->
<link rel="stylesheet" href="style.css" /> <!-- Linking
-->
</head>
<body class="body-bg">
<!-- Header -->
<!-- Doctor Information -->
<div class="header">
<div class="header-flex">
<div>
<h1 class="doctor-name">Prof. Dr. MD. Billal Alam</h1> <!-- For
Doctor Name -->
<p class="doctor-details">MBBS, FCPS (Medicine) MD (Internal Medicine),
FACP (USA), FRCP (England)</p>
<p class="doctor-details">Medicine Specialist. Ex. Principle & Head of
the Department Medicine</p> <!-- For Doctor Details -->
<p class="doctor-details">Sir Salimullah Medical College & Hospital,
Dhaka.</p>
<p class="doctor-details">Ex. Professor & Head of the Dept. of Medicine -
Dhaka Medical College & Hospital, Dhaka.</p>
</div>
<!-- Patients Information -->
<div class="patient-info">
<div class="info-row">
<label class="info-label">Reg. No.:</label><input type="text"
class="info-input" />
</div>
<div class="info-row">
<label class="info-label">Name:</label><input type="text" class="info-
input wide" /> <!-- The last classes name for Style.css name -->
</div>
<div class="info-row-group">
<!-- For Age , Height , Weight in one row. -->
<div class="info-sub-row">
<!-- For part part -->
<label class="info-label">Age:</label><input type="number"
class="info-input small" />
</div>
<!-- Input Patients Information -->
<div class="info-sub-row">
<label class="info-label">Weight:</label><input id="weight"
type="number" class="info-input small" />
</div>
<div class="info-sub-row">
<label class="info-label">Height:</label><input id="height"
type="number" class="info-input small" />
</div>
</div>
<div class="info-row-group">
<!-- For Date & BMI in one row. -->
<div class="info-sub-row">
<!-- For part part -->
<label class="info-label">Date:</label><input type="date"
class="info-input date" />
</div>
<div class="info-sub-row">
<label class="info-label">BMI:</label><input id="bmi" type="text"
readonly class="info-input small" /> <!-- readoly – It’s calculate the BMI
Automatically.From Height & Weight -->
</div>
</div>
</div>
</div>
</div>

<!-- Main Section -->


<div class="main-section"> <!-- For dividing 2 parts.
-->
<!-- Sidebar -->
<div class="sidebar">
<div>
<label class="section-label">History:</label>
<textarea class="text-area"></textarea>
</div>
<div>
<label class="section-label">Previous Test Record:</label>
<textarea class="text-area"></textarea>
</div>
<div>
<label class="section-label">Adv.:</label>
<textarea class="text-area"></textarea>
</div>
</div>

<!-- Prescription -->


<div class="prescription">
<div class="prescription-header">
<h2 class="prescription-title">Rx.</h2>
<div class="button-group">
<!-- For Save & Print button -->
<button class="btn">Save</button>
<button class="btn" onclick="window.print()">Print</button>
<!-- For print the page.-->
</div>
</div>
<textarea class="prescription-text" placeholder="Prescription
details..."></textarea> <!-- When I strat writting it will be gone. -->
</div>
</div>

<!-- Footer -->


<div class="footer">
<p class="footer-text">Uttara Crescent Hospital & Diagnostic Centre</p>
<p class="footer-text"># Do not need any serial for report within 7 days.</p>
<p class="footer-text">For Appointment: Hotline: 10665 / 09666710665</p>
</div>
</body>

<script>
const weightInput = document.getElementById('weight');
const heightInput = document.getElementById('height'); // refers
Height & Weight input will be take from Patients Information.
const bmiInput = document.getElementById('bmi');

function calculateBMI() {
const weight = parseFloat(weightInput.value); // kg
const heightFeet = parseFloat(heightInput.value); // feet

if (!isNaN(weight) && !isNaN(heightFeet) && heightFeet > 0) {


const heightM = heightFeet * 0.3048;
// convert feet to meters
const bmi = weight / (heightM * heightM);
//BMI Formula
bmiInput.value = bmi.toFixed(2);
// Round to 2 decimal places
} else {
bmiInput.value = ''; //
clear BMI if input invalid.
}
}

weightInput.addEventListener('input', calculateBMI);
heightInput.addEventListener('input', calculateBMI); //When any
time I want to change the inputs.
</script>

</html>

body {
background-color: white;
color: black;
position: relative;
min-height: 100vh;
margin: 0;
font-family:Arial, Helvetica, sans-serif;
overflow: hidden;
width: 100%;
}
/* Header */
.header {
background-color: #06b6d4;
padding: 1rem;
color: black;
border-bottom: 1px solid #ccc;
}

.header-flex {
display: flex;
justify-content: space-between;
}

.doctor-name {
font-size: 1.875rem;
font-weight: bold;
font-style: italic;
margin: 0;
}

.doctor-details {
font-size: 0.87rem;
font-style: italic;
font-weight: 500;
margin: 2px 0;
}

/* Patient Info */
.patient-info {
font-size: 0.875rem;
display: left left;
flex-direction: column;
gap: 0.3rem;
}

.info-row, .info-sub-row {
display: flex;
align-items: center;
gap: 0.5rem;
}

.info-row-group {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}

.info-label {
width: 4rem;
font-weight: 500;
}

.info-input {
padding: 0.25rem;
border: 1px solid gray;
border-radius: 0.25rem;
color: black;
}

.info-input.wide {
width: 9rem;
}

.info-input.small {
width: 4rem;
}

.info-input.date {
width: 7rem;
}

/* Main Section */
.main-section {
display: flex;
width: 100%;
overflow: hidden;
}

/* Sidebar */
.sidebar {
width: 25%;
border-right: 1px solid #ccc;
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}

.section-label {
font-weight: bold;
display: block;
margin-bottom: 0.25rem;
}

.text-area {
width: 90%;
height: 6rem;
padding: 0.5rem;
border: 2px solid #ccc;
border-radius: 0.25rem;
resize: none;
}

/* Prescription Section */
.prescription {
flex: 1;
padding: 1rem;
}

.prescription-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.prescription-title {
font-size: 1.25rem;
font-weight: bold;
font-style: italic;
margin-bottom: 0.5rem;
}

.button-group {
display: flex;
gap: 0.5rem;
}
.btn {
background-color: #e5e7eb;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border: none;
cursor: pointer;
}

.prescription-text {
width: 95%;
height: 500px;
padding: 1rem;
border: 2px solid #ccc;
border-radius: 0.25rem;
font-size: 1.125rem;
resize: none;
}

/* Footer */
.footer {
background-color: #f3f4f6;
font-size: 0.75rem;
padding: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
position: absolute;
bottom: 0;
width: 98.5%;
}

.footer-text {
font-weight: 500;
}

You might also like