Project Report

SNAPSHOT
CODING
Index.html
<html>
<head>
<title>Amrita Hospital</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="page1" onload="new ElementMaxHeight();">
<div id="main">

<div id="header">
<div class="row-1">
<div class="wrapper">
<div class="logo">
<h1><a href="#">Amrita Hospital</a></h1>
<h3><b>Orthopedic </b></h3><a href="iso.html" <strong>ISO CERTIFICATE</strong></div></div>
<div class="phones"> 90-3223-63-01<br />
90-4463-87-68 </div>
</div>
</div>
<div class="row-2">
<div class="indent">

<div class="header-box">
<div class="inner">
<ul class="nav">
<li><a href="index.html" class="current">Home page</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="patient.html">Patient services</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact1.html">Contact us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div id="content">
<div class="aside maxheight">

<div class="box maxheight">
<div class="inner">
<h3>Reservation:Room</h3>
<form action="#" id="reservation-form">
<fieldset>
<div class="field">
<label>Check In:</label>
<select class="select1">
<option>30</option>
</select>
<option>SEPT 2015</option>
</select>
</div>
<div class="field">
<label>Check Out:</label>
<option>01</option>
</select>
<option>oct 2015</option>
</select>
</div>
<div class="field"> Persons:
<input type="text" value="1"/>
Rooms:
<input type="text" value="1"/>

</div>
<div class="button"><span><span><a href="check.html">Check

Availability</a></span></span></div>
</fieldset>
</form>
</div>
</div>

</div>
<div class="content">
<h2 class="am">Amrita Hosptial</h2>
<img src="C:\Users\abc\Downloads\anjali\d.png" />
<img src="C:\Users\abc\Downloads\anjali\download.jfif" />
<p class="alt-top">When patients are considering having spine surgery, one of the most common
questions they have is,
“Which is better, a neurosurgeon or an orthopedic spine surgeon?” The quick answer is that for most
types of spine surgery,
both specially trained orthopedic surgeons and neurosurgeons may be considered.
<div class="clear"></div>
<div class="line-hor"></div>
<div class="wrapper line-ver">
<div class="col-1">
<h3>Special Treatemant</h3>
<ul>
<li>FREE Chcekup</li>
<li>50% Discount for using first time</li>
<li>free hard check up</li>
<li>luxiry room with AC or NON AC</li>
<li>Exclusive </li>
</ul>
<div class="button"><span><span><a href="contact1.html">contact

Now</a></span></span></div>
</div>
<div class="col-2">
<h3>Location</h3>
<p>National Institute of Technology, Warangal.(A.P)</p>
<dl class="contacts-list">
<dt>India 2015</dt>
<dd>90-3223-63-01</dd>
<dd>90-44-6387-68</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="footer">
<ul class="nav">
<li><a href="#">Home</a>|</li>
<li><a href="#">Services</a>|</li>
<li><a href="#">patient services</a>|</li>
<li><a href="#">clinic services</a>|</li>
<li><a href="#">About us</a>|</li>
<li><a href="#">contact us</a></li>
</ul>
<div class="fleft">Copyright © 2015 <a href="#">Name Here</a>. All Rights Reserved</div>
<div class="fright">Designed by Ghanendra <a href="">website</a> provider</div>
</div>
</div>
</div>
<div align=center>Designed By Ghanendra Yadav <a href=''> website </a></div></body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
.container {
width: 960px;
margin: 0 auto;
.header {
background: #f4f4f4;
padding: 20px 0;
.header h1 {
margin: 0;
padding: 0 20px;
}
.nav {
background: #333;
color: #e42a2a;
height: 40px;
line-height: 40px;
.nav li {
display: inline;
margin-right: 10px;
.nav a {
color: #fff;
text-decoration: none;
.nav a:hover {
color: #ccc;
.content {
padding: 20px;
.indent {
position: relative;
}
.indent h2 {
margin: 0 0 20px 0;
.indent img {
float: left;
margin-right: 20px;
.indent p {
margin: 0 0 20px 0;
.line-hor {
border-top: 1px solid #ccc;
margin: 0 0 20px 0;
.line-ver {
display: flex;
margin: 0 0 20px 0;
.col-1, .col-2 {
padding: 0 20px;
}
.col-1 h3 {
margin: 0 0 20px 0;
.col-1 ul {
list-style: none;
padding: 0;
.col-1 li {
margin-bottom: 10px;
.col-1 .button {
margin-top: 20px;
.col-2 h3 {
margin: 0 0 20px 0;
.col-2 p {
margin: 0 0 20px 0;
.col-2 dl {
margin: 0 0 20px 0;
}
.col-2 dt {
font-weight: bold;
.col-2 dd {
.alt-top{
text-align: center;
.footer {
background: #333;
color: #fff;
padding: 20px 0;
.footer ul {
list-style: none;
padding: 0;
.footer li {
display: inline;
margin-right: 10px;
}
.footer a {
color: #fff;
.footer a:hover {
color: #ccc;
.footer .wrapper {
display: flex;
justify-content: space-between;
Check.html(check available button code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Management System</title>
<link rel="stylesheet" href="check.css">
</head>
<body>
<div class="container">
<h1>Hospital Management System</h1>
<button id="checkAvailabilityBtn">Check Availability</button>
</div>
<div class="availability-container" id="availabilityContainer">


</div>
<script src="check.js"></script>
</body>
</html>
about.html
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="page1" onload="new ElementMaxHeight();">
<div id="main">

<div id="header">
<div class="row-1">
<div class="logo">
90-4463-87-68 </div>
</div>
</div>
<div class="row-2">
<div class="inner">
<ul class="nav">
<li><a href="patient.html">Patient services</a></li>
<li><a href="contact1.html">Contact us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<main>
<section class="about-us">
<h2>Welcome to Our Hospital Management System</h2>
<p>Our hospital management system is designed to provide efficient and effective solutions for
managing hospitals. We offer a range of services, including patient management, appointment
scheduling, billing, and inventory management. Our system is user-friendly and can be easily customized
to meet the specific needs of your hospital.</p>
</section>
<section class="services">
<h2>Our Services</h2>
<ul>
<li>Patient Management</li>
<li>Appointment Scheduling</li>
<li>Billing</li>
<li>Inventory Management</li>
</ul>
</section>
</main>
<footer>
<p>© 2022 Our Hospital Management System. All rights reserved.</p>
</footer>
</body>
</html>
Check.css
body {
margin: 0;
padding: 0;
.container {
text-align: center;
margin-top: 50px;
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
.availability-container {
display: none;
margin-top: 20px;
.availability-slot {
check.js
// Simulated data for doctor availability
var availabilityData = [
{ doctor: "Dr. John Doe", slots: ["9:00 AM", "10:00 AM", "2:00 PM"] },
{ doctor: "Dr. Jane Smith", slots: ["11:00 AM", "1:00 PM", "3:00 PM"] },
// Add more doctor availability data as needed
];
document.getElementById("checkAvailabilityBtn").addEventListener("click", function() {
var availabilityContainer = document.getElementById("availabilityContainer");
availabilityContainer.innerHTML = ""; // Clear previous content
availabilityData.forEach(function(item) {
var doctorAvailability = document.createElement("div");
doctorAvailability.classList.add("availability-slot");
var doctorName = document.createElement("h2");
doctorName.textContent = item.doctor;
doctorAvailability.appendChild(doctorName);
var slotsList = document.createElement("ul");
item.slots.forEach(function(slot) {
var slotItem = document.createElement("li");
slotItem.textContent = slot;
slotsList.appendChild(slotItem);
});
doctorAvailability.appendChild(slotsList);
availabilityContainer.appendChild(doctorAvailability);
});
availabilityContainer.style.display = "block"; // Show availability
});
About.css
body {
line-height: 1.6;
header {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
main {
padding: 20px;
.about-us h2 {
.services ul {
list-style-type: none;
padding: 0;
.services li {
footer {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
Services.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial=1.0" />
<link href="service.css" rel="stylesheet" type="text/css" />
<script src="contact.js" type="text/javascript"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<script src="scripts.js"></script>
<title>Hospital Management System - Services</title>
</head>
<body>

<div id="header">
<div class="row-1">
<div class="logo">
90-4463-87-68 </div>
</div>
</div>
<div class="row-2">
<div class="inner">
<ul class="nav">
<li><a href="patient.html">patient services</a></li>
<li><a href="contact1.html">contous us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

<main class="main--content">
<div class="cards">
<div class="card card-1">
<div class="card--data">
<div class="card--content">
<h5 class="card--title">Emergency Care</h5>
<p>
Our emergency department is staffed 24/7 with experienced healthcare professionals who are
ready to provide urgent care for patients in need. We have the latest medical equipment and technology
to quickly diagnose and treat a wide range of conditions.
</p>
</div>
<i class="ri-ambulance-line card--icon--lg"></i>
</div>
</div>
<h5 class="card--title">Inpatient Services</h5>
<p>
Our inpatient services provide a comfortable and safe environment for patients who require
overnight or extended stays in the hospital. We offer private rooms, personalized care, and a variety of
amenities to make your stay as comfortable as possible.
</p>
</div>
<i class="ri-hospital-line card--icon--lg"></i>
</div>
</div>
<div class="card
````--content">
<h5 class="card--title">Outpatient Services</h5>
<p>
Our outpatient services allow patients to receive medical care without having to stay in the
hospital overnight. We offer a wide range of services, including diagnostic tests, minor procedures, and
follow-up care.
</p>
</div>
<i class="ri-wheelchair-line card--icon--lg"></i>

</div>
</div>
<h5 class="card--title">Surgical Services</h5>
<p>
Our surgical services offer a wide range of procedures, including general surgery, orthopedic
surgery, and neurosurgery. We have a team of experienced surgeons and nurses who are dedicated to
providing the best possible care for our patients.
</p>
</div>
<i class="ri-scalpel-line card--icon--lg"></i>
</div>
</div>
</div>
</main>

<footer>
<p>© 2023 Hospital Management System</p>
</footer>
</body>
</html>
Service.css
/* Reset Styles */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
body {
margin: 0;
padding: 0;
.container {
width: 960px;
margin: 0 auto;
a{
color: #333;
ul {
list-style: none;
button {
cursor: pointer;
background-color: #4CAF50;
color: white;
padding: 10px 20px;

border: none;
border-radius: 5px;
margin: 10px;
button:hover {
background-color: #3e8e41;
.container {
width: 960px;
margin: 0 auto;
/* Header Styles */
.header {
padding: 30px 0;
.header h1 {
margin: 0;
padding: 40 20px;
.nav {
background: #333;
color: #e42a2a;
height: 40px;
line-height: 40px;
.nav li {
display: inline;
margin-right: 10px;
.nav a {
color: #fff;
.nav a:hover {
color: #ccc;
.content {
padding: 20px;
.indent {
position: relative;
.indent h2 {
margin: 0 0 20px 0;
.indent img {
float: left;
margin-right: 20px;
/* Main Content Styles */
.main--content {
padding: 20px;
.cards {
display: flex;
flex-wrap: wrap;
.card {
width: 48%;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
.card--data {
display: flex;
align-items: center;
}
Servie.js
// Get the search bar and button
const searchBar = document.querySelector('.search input[type="text"]');
const searchButton = document.querySelector('.search button');
// Listen for a keyup event on the search bar
searchBar.addEventListener('keyup', (event) => {
// If the key pressed is the "Enter" key
if (event.key === 'Enter') {
// Prevent the default form submission behavior
event.preventDefault();
// Get the search query from the search bar
const searchQuery = searchBar.value.trim();
// If the search query is not empty
if (searchQuery) {
// Redirect the user to the search results page
window.location.href = `search-results.html?q=${searchQuery}`;
});
// Listen for a click event on the search button
searchButton.addEventListener('click', () => {
// Prevent the default form submission behavior
// Get the search query from the search bar
const searchQuery = searchBar.value.trim();
// If the search query is not empty
if (searchQuery) {
// Redirect the user to the search results page
window.location.href = `search-results.html?q=${searchQuery}`;
});
contact.html
<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<h1>Contact Form</h1>
<form id="contactForm" method="post">
<div class="input__container">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
</div>
<button type="submit">Send</button>
</form>
</main>
</body>
</html>
Style1.css
*{
margin: 0;
padding: 0;
html {
font-size: 62.5%;
body {
font-family: "Mulish", sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
main {
width: 40rem;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
margin: 0 auto;
height: 45rem;
border-radius: 2rem;
padding: 2rem;
h1 {
text-align: center;
font-size: 3rem;
padding: 1rem 2rem;
form {
margin: 3rem 0;
display: flex;
flex-direction: column;
row-gap: 2rem;
.input__container {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
.input__container label {
font-size: 1.6rem;
.input__container input,
.input__container textarea {
padding: 1rem 2rem;
border-radius: 5px;
border: 1px solid #555;
resize: none;
button {
align-self: flex-start;
padding: 1rem 2rem;
border-radius: 5px;
border: none;
background: #333;
color: #fff;
cursor: pointer;
Contact.js
const form = document.getElementById("contactForm");
form.addEventListener("submit", function (event) {

const name = document.getElementById("name");
const email = document.getElementById("email");
const message = document.getElementById("message");
if (name.value.trim() === "") {
alert("Name is required.");
return;
if (email.value.trim() === "" || !isValidEmail(email.value)) {
alert("Valid email is required.");
return;
if (message.value.trim() === "") {
alert("Message is required.");
return;
alert("Form submitted successfully!");
name.value = "";
email.value = "";
message.value = "";
});
function isValidEmail(email) {
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return regex.test(email);
Patient.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial=1.0" />
<link href="patient.css" rel="stylesheet" type="text/css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<script src="scripts.js"></script>
<title>Hospital Management System - Services</title>
</head>
<body>

<div id="header">
<div class="row-1">
<div class="logo">

90-4463-87-68 </div>
</div>
</div>
<div class="row-2">
<div class="inner">
<ul class="nav">
<li><a href="patient.html">patient services</a></li>
<li><a href="contact1.html">contous us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> 
<main class="main--content">
<h1>Patient Services</h1>
<p>
Our hospital offers a wide range of services for our patients, including appointment scheduling,
medical records, and billing.
</p>
<h2>Appointment Scheduling</h2>
<p>
Schedule your appointments online or over the phone with our convenient appointment scheduling
system. Our team will work with you to find a time that works best for you.
</p>
<h2>Medical Records</h2>
<p>
Access your medical records online, including test results, medications, and medical history. You can
also update your personal information and communicate with your healthcare provider through our
secure messaging system.
</p>
<h2>Billing</h2>
<p>
View and pay your bills online, including medical bills, insurance payments, and statements. You can
also set up automatic payments and view your payment history.
</p>
</main>

<footer>
<p>© 2023 Hospital Management System</p>
</footer>
</body>
</html>
Patient.css
/* Reset Styles */
*{
margin: 0;
padding: 0;
}
body {
line-height: 1.6;
a{
color: #333;
ul {
list-style: none;
button {
cursor: pointer;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 10px;
button:hover {
background-color: #3e8e41;
}
body {
margin: 0;
padding: 0;
.container {
width: 960px;
margin: 0 auto;
.header {
padding: 20px 0;
.header h1 {
margin: 0;
padding: 0 20px;
.nav {
background: #333;
color: #e42a2a;
height: 40px;
line-height: 40px;
}
.nav li {
display: inline;
margin-right: 10px;
.nav a {
color: #fff;
.nav a:hover {
color: #ccc;
.content {
padding: 20px;
.indent {
position: relative;
.indent h2 {
margin: 0 0 20px 0;
.indent img {
float: left;
margin-right: 20px;
}
.indent p {
margin: 0 0 20px 0;
/* Main Content Styles */
.main--content {
padding: 20px;
max-width: 1200px;
margin: 0 auto;

Project Report

Uploaded by

Copyright:

Available Formats

Project Report

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Report

Uploaded by

Copyright:

Available Formats

SNAPSHOT

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css" />

<link href="layout.css" rel="stylesheet" type="text/css" />

<script src="maxheight.js" type="text/javascript"></script>

<body id="page1" onload="new ElementMaxHeight();">

<h1><a href="#">Amrita Hospital</a></h1>

<h3><b>Orthopedic </b></h3><a href="iso.html" <strong>ISO CERTIFICATE</strong></div></div>

<div class="phones"> 90-3223-63-01<br />

<li><a href="index.html" class="current">Home page</a></li>

<li><a href="patient.html">Patient services</a></li>

<li><a href="about.html">About us</a></li>

<li><a href="contact1.html">Contact us</a></li>

<div class="box maxheight">

<form action="#" id="reservation-form">

<div class="field"> Persons:

<input type="text" value="1"/>

<input type="text" value="1"/>

<div class="button"><span><span><a href="check.html">Check

<h2 class="am">Amrita Hosptial</h2>

<img src="C:\Users\abc\Downloads\anjali\d.png" />

<img src="C:\Users\abc\Downloads\anjali\download.jfif" />

both specially trained orthopedic surgeons and neurosurgeons may be considered.

<div class="wrapper line-ver">

<li>50% Discount for using first time</li>

<li>free hard check up</li>

<li>luxiry room with AC or NON AC</li>

<div class="button"><span><span><a href="contact1.html">contact

<p>National Institute of Technology, Warangal.(A.P)</p>

<li><a href="#">patient services</a>|</li>

<li><a href="#">clinic services</a>|</li>

<li><a href="#">About us</a>|</li>

<li><a href="#">contact us</a></li>

<div class="fright">Designed by Ghanendra <a href="">website</a> provider</div>

<div align=center>Designed By Ghanendra Yadav <a href=''> website </a></div></body>

font-family: Arial, sans-serif;

border-top: 1px solid #ccc;

Check.html(check available button code)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Hospital Management System</title>

<link rel="stylesheet" href="check.css">

<h1>Hospital Management System</h1>

<button id="checkAvailabilityBtn">Check Availability</button>

<div class="availability-container" id="availabilityContainer">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css" />

<link href="layout.css" rel="stylesheet" type="text/css" />

<script src="maxheight.js" type="text/javascript"></script>

<body id="page1" onload="new ElementMaxHeight();">

<h1><a href="#">Amrita Hospital</a></h1>

<h3><b>Orthopedic </b></h3><a href="iso.html" <strong>ISO CERTIFICATE</strong></div></div>

<div class="phones"> 90-3223-63-01<br />

<p>© 2022 Our Hospital Management System. All rights reserved.</p>

<p>© 2023 Hospital Management System</p>