Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Al-Shafay Dental Care Clinic</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="logo">
<i class="fas fa-tooth"></i>
<h1>Al-Shafay Dental Care</h1>
</div>
<p class="tagline">Your Smile, Our Priority</p>
</div>
</header>
<!-- Main Container -->
<div class="container">
<!-- Welcome Section -->
<div class="welcome-section">
<div class="welcome-card">
<i class="fas fa-user-md"></i>
<h2>Welcome to Al-Shafay Dental Care Clinic</h2>
<p>Complete Dental Solutions for Your Family</p>
</div>
</div>
<!-- Navigation Buttons -->
<div class="nav-grid">
<!-- Patient Record Button -->
<div class="nav-card" onclick="showSection('patientRecord')">
<div class="icon-circle blue">
<i class="fas fa-users"></i>
</div>
<h3>Patient Record</h3>
<p>Manage patient information</p>
</div>
<!-- Schedule Appointment Button -->
<div class="nav-card" onclick="showSection('appointment')">
<div class="icon-circle green">
<i class="fas fa-calendar-check"></i>
</div>
<h3>Schedule Appointment</h3>
<p>Book dental appointments</p>
</div>
<!-- Dental Details Button -->
<div class="nav-card" onclick="showSection('dentalDetails')">
<div class="icon-circle purple">
<i class="fas fa-clipboard-list"></i>
</div>
<h3>Dental Details</h3>
<p>Treatment and dental info</p>
</div>
<!-- Maps Button -->
<div class="nav-card" onclick="showSection('maps')">
<div class="icon-circle orange">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Location Maps</h3>
<p>Find our clinic location</p>
</div>
<!-- Upload Patient File Button -->
<div class="nav-card" onclick="showSection('uploadFile')">
<div class="icon-circle red">
<i class="fas fa-file-upload"></i>
</div>
<h3>Upload Patient File</h3>
<p>Upload medical documents</p>
</div>
</div>
<!-- Sections -->
<div id="patientRecord" class="section">
<div class="section-header">
<h2><i class="fas fa-users"></i> Patient Record</h2>
<button class="btn-close" onclick="hideSections()">×</button>
</div>
<div class="form-container">
<form id="patientForm">
<div class="form-grid">
<input type="text" id="patientName" placeholder="Patient Name" required>
<input type="number" id="patientAge" placeholder="Age" required>
<input type="text" id="patientPhone" placeholder="Phone Number" required>
<input type="text" id="patientAddress" placeholder="Address">
</div>
<button type="submit" class="btn-submit">Add Patient</button>
</form>
<div id="patientList" class="list-container"></div>
</div>
</div>
<div id="appointment" class="section">
<div class="section-header">
<h2><i class="fas fa-calendar-check"></i> Schedule Appointment</h2>
<button class="btn-close" onclick="hideSections()">×</button>
</div>
<div class="form-container">
<form id="appointmentForm">
<div class="form-grid">
<input type="text" id="apptPatientName" placeholder="Patient Name" required>
<input type="tel" id="apptPhone" placeholder="Phone Number" required>
<input type="date" id="apptDate" required>
<select id="apptTime" required>
<option value="">Select Time</option>
<option value="09:00 AM">09:00 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="02:00 PM">02:00 PM</option>
<option value="03:00 PM">03:00 PM</option>
<option value="04:00 PM">04:00 PM</option>
<option value="05:00 PM">05:00 PM</option>
</select>
<select id="apptDoctor" required>
<option value="">Select Doctor</option>
<option value="Dr. Ahmed Khan">Dr. Ahmed Khan</option>
<option value="Dr. Sara Ali">Dr. Sara Ali</option>
<option value="Dr. Muhammad Usman">Dr. Muhammad Usman</option>
</select>
</div>
<textarea id="apptReason" placeholder="Reason for visit (optional)"></textarea>
<button type="submit" class="btn-submit">Book Appointment</button>
</form>
<div id="appointmentList" class="list-container"></div>
</div>
</div>
<div id="dentalDetails" class="section">
<div class="section-header">
<h2><i class="fas fa-clipboard-list"></i> Dental Details</h2>
<button class="btn-close" onclick="hideSections()">×</button>
</div>
<div class="dental-info">
<div class="info-card">
<i class="fas fa-tooth"></i>
<h4>Dental Checkup</h4>
<p>Regular dental examination and cleaning</p>
</div>
<div class="info-card">
<i class="fas fa-teeth"></i>
<h4>Teeth Whitening</h4>
<p>Professional teeth whitening treatment</p>
</div>
<div class="info-card">
<i class="fas fa-braces"></i>
<h4>Orthodontics</h4>
<p>Braces and aligners for teeth straightening</p>
</div>
<div class="info-card">
<i class="fas fa-syringe"></i>
<h4>Root Canal</h4>
<p>Advanced root canal treatment</p>
</div>
<div class="info-card">
<i class="fas fa-crown"></i>
<h4>Crowns & Bridges</h4>
<p>Dental crowns and bridge work</p>
</div>
<div class="info-card">
<i class="fas fa-baby"></i>
<h4>Pediatric Dentistry</h4>
<p>Specialized dental care for children</p>
</div>
</div>
</div>
<div id="maps" class="section">
<div class="section-header">
<h2><i class="fas fa-map-marker-alt"></i> Clinic Location</h2>
<button class="btn-close" onclick="hideSections()">×</button>
</div>
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3400.0!2d74.35!3d31.52!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzHCsDMxJzEyLjAiTiA3NMKwMjEnMDAuMCJF!5e0!3m2!1sen!2s!4v1234567890"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
<div class="address-card">
<i class="fas fa-building"></i>
<h3>Al-Shafay Dental Care Clinic</h3>
<p><i class="fas fa-location-dot"></i> Main Boulevard, Lahore, Pakistan</p>
<p><i class="fas fa-phone"></i> +92-300-1234567</p>
<p><i class="fas fa-envelope"></i> info@alshafaydental.com</p>
</div>
</div>
</div>
<div id="uploadFile" class="section">
<div class="section-header">
<h2><i class="fas fa-file-upload"></i> Upload Patient File</h2>
<button class="btn-close" onclick="hideSections()">×</button>
</div>
<div class="upload-container">
<div class="upload-area" id="uploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<h3>Drag & Drop Files Here</h3>
<p>or</p>
<button class="btn-upload" onclick="document.getElementById('fileInput').click()">
Browse Files
</button>
<input type="file" id="fileInput" multiple hidden>
</div>
<div id="fileList" class="list-container"></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<p>© 2024 Al-Shafay Dental Care Clinic. All Rights Reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
57
Requests
7
Domains
869KB
Transfer Size
2449KB
Content Size
297.0ms
Dom Content Loaded
308.0ms
First Paint
777.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...