Doccure- Progressive Web App Template Documentation

1. Introduction

Doccure offers you the best template created by the latest version of HTML and CSS with super responsive web design with Progressive Web App.

A progressive web app basically means you can "Install" the website to your home screen, There is an expectation from users that installed apps will always have a baseline experience if they're offline.

2. Template Installation

FTP Upload:

Step 1: Open up your FTP manager and connect to your hosting

Step 2: Upload the files inside Your Hosting folder.

Local Host:

Step 1: You must run with localhost web server like XAMPP, WampServer, AMPPS, and other eg : localhost:8000

3. Font

@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppinsmedium';
    src: url('../fonts/poppins-medium-webfont.woff2') format('woff2'),
         url('../fonts/poppins-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

4. File Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

Doccure/ 
│
└── node_modules/ 
	│
	└── .bin/           
		│
		└── accepts/   
		│
		└── rest of modules/   
	│
	└── assets/           
		│
		└── css/               
		│
		└── fonts/        
		│
		└── img/                 
		│
		└── js/                

		index.html/  

		manifest.json/  

		rest of the html pages/ 

		server.js/  

		documentation/

5. Pages

  • index.html
  • appointments.html
  • booking-success.html
  • change-password.html
  • chat.html
  • chat-view.html
  • doctor-dashboard.html
  • doctor-profile.html
  • favourites.html
  • forgot-password.html
  • invoices.html
  • invoice-view.html
  • login.html
  • notifications.html
  • pages.html
  • patient-date-time.html
  • patient-profile-settings.html
  • patients-list.html
  • profile-settings.html
  • register.html
  • schedule-timings.html
  • search-doctor.html
  • social-media.html
  • video-call.html
  • voice-call.html

6. Customization

1. How to Change Site Title


<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover">
    	<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="#3a57c4">
    	<title>Doccure - PWA Mobile Template</title>
    	<link rel="manifest" href="manifest.json">
    	<link rel="apple-touch-icon" href="assets/images/icons/icon-152x152.png">
    	<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    	<link rel="stylesheet" href="assets/plugins/swiper/css/swiper.min.css">
    	<link rel="stylesheet" href="assets/css/circle.css">
    	<link rel="stylesheet" href="assets/css/style.css">
    </head>
    <body>
    	<div class="main-wrapper">
    	    <div class="side-menu" id="sidebar-menu">
    	    </div>
    	    <div class="home">
    	    </div>
    	</div> 
    	<script src="assets/js/jquery-3.6.0.min.js"></script>
    	<script src="assets/js/bootstrap-bundle.min.js"></script>
    	<script src="assets/plugins/swiper/js/swiper.min.js"></script>
    	<script src="assets/js/install.js"></script>  
    	<script src="assets/js/script.js"></script>
    </body>
</html>

2. How to Change Side Panels Directions and Effects


<div class="navbar-inner d-flex align-items-center">
    <div class="left">
    	<a href="#" class="link icon-only">
    	   <i class="custom-hamburger"></i>
    	   <span><b</b></span>
    	</a>
    </div>
</div>

3. How to Change Your Menu Title


<class="side-menu" id="sidebar-menu">
    <ul>
    	<li>
    	    <a href="index.html">
    		<span class="material-icons">dashboard</span>
		Dashboard
    	    </a>
    	</li>
    </ul>
</div>

7. Important Notes

Need a help, How to configure the Doccure HTML Progressive Web App Template into Android and iOS platform? Get reference on Progressive Web App

8. Credits

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

Plugin Link
Bootstrap5 https://getbootstrap.com/
Jquery https://jquery.com/
Font Awesome https://fontawesome.com/

9. Support

If you have any queries please contact us through email: [email protected]

10. Thank You

Thank you so much for using this template

Dreamguy's Technologies Pvt Ltd,