Al-Shafay Dental Care Clinic

Your Smile, Our Priority

Welcome to Al-Shafay Dental Care Clinic

Complete Dental Solutions for Your Family

Patient Record

Manage patient information

Schedule Appointment

Book dental appointments

Dental Details

Treatment and dental info

Location Maps

Find our clinic location

Upload Patient File

Upload medical documents

Patient Record

Schedule Appointment

Dental Details

Dental Checkup

Regular dental examination and cleaning

Teeth Whitening

Professional teeth whitening treatment

Orthodontics

Braces and aligners for teeth straightening

Root Canal

Advanced root canal treatment

Crowns & Bridges

Dental crowns and bridge work

Pediatric Dentistry

Specialized dental care for children

Clinic Location

Al-Shafay Dental Care Clinic

Main Boulevard, Lahore, Pakistan

+92-300-1234567

info@alshafaydental.com

Upload Patient File

Drag & Drop Files Here

or

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } /* Header Styles */ .header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 20px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .header-content { max-width: 1200px; margin: 0 auto; } .logo { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px; } .logo i { font-size: 40px; color: #ffd700; } .logo h1 { font-size: 32px; font-weight: 700; } .tagline { font-size: 16px; opacity: 0.9; letter-spacing: 2px; } /* Container */ .container { max-width: 1200px; margin: 30px auto; padding: 0 20px; } /* Welcome Section */ .welcome-section { margin-bottom: 30px; } .welcome-card { background: white; border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .welcome-card i { font-size: 50px; color: #2a5298; margin-bottom: 15px; } .welcome-card h2 { color: #333; margin-bottom: 10px; } .welcome-card p { color: #666; } /* Navigation Grid */ .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .nav-card { background: white; border-radius: 15px; padding: 25px; text-align: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .nav-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .icon-circle { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; } .icon-circle i { font-size: 30px; color: white; } .blue { background: linear-gradient(135deg, #667eea, #764ba2); } .green { background: linear-gradient(135deg, #43e97b, #38f9d7); } .purple { background: linear-gradient(135deg, #a18cd1, #fbc2eb); } .orange { background: linear-gradient(135deg, #f093fb, #f5576c); } .red { background: linear-gradient(135deg, #fa709a, #fee140); } .nav-card h3 { color: #333; margin-bottom: 8px; font-size: 18px; } .nav-card p { color: #666; font-size: 13px; } /* Sections */ .section { display: none; background: white; border-radius: 15px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: slideIn 0.3s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; } .section-header h2 { color: #2a5298; } .btn-close { background: #f5576c; color: white; border: none; width: 35px; height: 35px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: all 0.3s; } .btn-close:hover { background: #e74c3c; transform: rotate(90deg); } /* Form Styles */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; } input, select, textarea { padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; transition: all 0.3s; } input:focus, select:focus, textarea:focus { outline: none; border-color: #2a5298; box-shadow: 0 0 0 3px rgba(42,82,152,0.1); } textarea { width: 100%; height: 100px; margin-bottom: 20px; resize: vertical; } .btn-submit { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 12px 30px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,0.4); } /* List Container */ .list-container { margin-top: 25px; } .list-item { background: #f8f9fa; border-left: 4px solid #2a5298; padding: 15px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .list-item button { background: #f5576c; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; } /* Dental Info */ .dental-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .info-card { background: #f8f9fa; padding: 25px; border-radius: 10px; text-align: center; transition: all 0.3s; } .info-card:hover { background: #2a5298; color: white; transform: translateY(-5px); } .info-card i { font-size: 40px; margin-bottom: 15px; color: #2a5298; } .info-card:hover i { color: #ffd700; } /* Map Container */ .map-container { position: relative; } .address-card { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-top: 20px; } .address-card h3 { color: #2a5298; margin-bottom: 15px; } .address-card p { margin-bottom: 10px; color: #666; } .address-card i { color: #2a5298; margin-right: 8px; } /* Upload Container */ .upload-area { border: 3px dashed #ccc; border-radius: 15px; padding: 50px 20px; text-align: center; transition: all 0.3s; } .upload-area:hover { border-color: #2a5298; background: #f8f9fa; } .upload-area i { font-size: 60px; color: #2a5298; margin-bottom: 20px; } .btn-upload { background: #2a5298; color: white; border: none; padding: 12px 25px; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 15px; } /* Footer */ .footer { background: #1e3c72; color: white; text-align: center; padding: 20px; margin-top: 50px; } /* Responsive Design */ @media (max-width: 768px) { .nav-grid { grid-template-columns: repeat(2, 1fr); } .logo h1 { font-size: 24px; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .nav-grid { grid-template-columns: 1fr; } .container { padding: 0 10px; } } // Show/Hide Sections function showSection(sectionId) { // Hide all sections const sections = document.querySelectorAll('.section'); sections.forEach(section => { section.style.display = 'none'; }); // Show selected section document.getElementById(sectionId).style.display = 'block'; // Scroll to section document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' }); } function hideSections() { const sections = document.querySelectorAll('.section'); sections.forEach(section => { section.style.display = 'none'; }); } // Patient Record Management let patients = JSON.parse(localStorage.getItem('patients')) || []; document.getElementById('patientForm').addEventListener('submit', function(e) { e.preventDefault(); const patient = { id: Date.now(), name: document.getElementById('patientName').value, age: document.getElementById('patientAge').value, phone: document.getElementById('patientPhone').value, address: document.getElementById('patientAddress').value, date: new Date().toLocaleDateString() }; patients.push(patient); localStorage.setItem('patients', JSON.stringify(patients)); this.reset(); displayPatients(); alert('Patient added successfully!'); }); function displayPatients() { const patientList = document.getElementById('patientList'); if (patients.length === 0) { patientList.innerHTML = '

No patients added yet.

'; return; } patientList.innerHTML = patients.map(patient => `
${patient.name} (Age: ${patient.age})
📞 ${patient.phone} | 📍 ${patient.address || 'N/A'} | 📅 ${patient.date}
`).join(''); } function deletePatient(id) { patients = patients.filter(p => p.id !== id); localStorage.setItem('patients', JSON.stringify(patients)); displayPatients(); } // Appointment Management let appointments = JSON.parse(localStorage.getItem('appointments')) || []; document.getElementById('appointmentForm').addEventListener('submit', function(e) { e.preventDefault(); const appointment = { id: Date.now(), patientName: document.getElementById('apptPatientName').value, phone: document.getElementById('apptPhone').value, date: document.getElementById('apptDate').value, time: document.getElementById('apptTime').value, doctor: document.getElementById('apptDoctor').value, reason: document.getElementById('apptReason').value }; appointments.push(appointment); localStorage.setItem('appointments', JSON.stringify(appointments)); this.reset(); displayAppointments(); alert('Appointment booked successfully!'); }); function displayAppointments() { const appointmentList = document.getElementById('appointmentList'); if (appointments.length === 0) { appointmentList.innerHTML = '

No appointments scheduled.

'; return; } appointmentList.innerHTML = appointments.map(appt => `
${appt.patientName} - ${appt.doctor}
📅 ${appt.date} | ⏰ ${appt.time} | 📞 ${appt.phone} ${appt.reason ? `
📋 ${appt.reason}` : ''}
`).join(''); } function deleteAppointment(id) { appointments = appointments.filter(a => a.id !== id); localStorage.setItem('appointments', JSON.stringify(appointments)); displayAppointments(); } // File Upload let uploadedFiles = []; document.getElementById('fileInput').addEventListener('change', function(e) { const files = e.target.files; for (let file of files) { uploadedFiles.push({ name: file.name, size: (file.size / 1024).toFixed(2) + ' KB', type: file.type, date: new Date().toLocaleDateString() }); } displayFiles(); }); function displayFiles() { const fileList = document.getElementById('fileList'); if (uploadedFiles.length === 0) { fileList.innerHTML = '

No files uploaded.

'; return; } fileList.innerHTML = uploadedFiles.map((file, index) => `
📄 ${file.name}
Size: ${file.size} | Type: ${file.type} | Date: ${file.date}
`).join(''); } function deleteFile(index) { uploadedFiles.splice(index, 1); displayFiles(); } // Drag and Drop functionality const uploadArea = document.getElementById('uploadArea'); uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); this.style.borderColor = '#2a5298'; this.style.background = '#f8f9fa'; }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); this.style.borderColor = '#ccc'; this.style.background = 'white'; }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); this.style.borderColor = '#ccc'; this.style.background = 'white'; const files = e.dataTransfer.files; for (let file of files) { uploadedFiles.push({ name: file.name, size: (file.size / 1024).toFixed(2) + ' KB', type: file.type, date: new Date().toLocaleDateString() }); } displayFiles(); }); // Initialize on page load window.onload = function() { displayPatients(); displayAppointments(); displayFiles(); };