File: /mnt/data/smarthr-co-in/demo/mobile/documentation/index-pwa.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>SmartHR - Progressive Web App Template Documentation</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#sidebar-menu" data-bs-offset="100">
<div class="main-wrapper">
<!-- Header -->
<header>
<nav class="navbar" id="home">
<div class="container-fluid">
<div class="navbar-left">
<a class="navbar-brand" href="index.html">
<img class="logo-dark" src="assets/img/dreamguys-logo.png" alt="logo">
</a>
</div>
<div class="action-list">
<a class="btn btn-primary btn-live" target="_blank" href="https://smarthr-mobile.dreamguystech.com/pwa/template/index.html">Live Demo <i class="fas fa-arrow-right ps-2"></i></a>
<a class="support-btn" target="_blank" href="https://themeforest.net/user/dreamguys"><img class="img-fluid" src="assets/img/headset_mic.png" alt="icon"> Support</a>
</div>
</div>
</nav>
<!-- Mobile Menu Toggle -->
<a class="mobile_btn" id="mobile_btn">
<i class="fas fa-bars"></i>
</a>
<!-- /Mobile Menu Toggle -->
</header>
<!-- Header -->
<!-- Main Wrapper -->
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu sidebar-body">
<h2>Table Of Content</h2>
<ul class="nav nav-sidebar">
<li class="nav-item">
<a class="nav-link" href="#documentation">1. Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#installation">2. Installation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#requirements">3. Requirements</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#styles">4. Styles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#javascripts">5. Javascripts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#file-structure">6. File Structure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#customization">7. Customization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#important-notes">8. Important Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#credits">9. Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#change-log">10. Change Log</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#support">11. Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#thank-you">12. Thank You</a>
</li>
</ul>
</div>
</div>
</div>
<div class="page-wrapper" id="documentation">
<div class="content container-fluid">
<div class="logo">
<a class="main-logo" href="index.html">
<img class="img-fluid" src="assets/img/logo.png" alt="logo">
</a>
</div>
<p>SmartHR - Progressive Web App Template Documentation</p>
<hr>
<div class="page-header">
<h4>1. Introduction</h4>
<ul>
<li>Created on: 11 Jan 2022</li>
<li>Developed by: <a target="_blank" href="https://dreamguys.co.in/">DreamGuy's Technologies</a>
</li>
<li>Support via email: <a href="mailto:[email protected]">[email protected]</a>
</li>
<li>Support via Themeforest: <a target="_blank" href="https://themeforest.net/user/dreamguys/">Take me there</a></li>
</ul>
<p>SmartHR offers you the best template created by the latest version of HTML and css with super responsive web design.</p>
<p>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.</p>
</div>
<hr>
<section id="installation">
<h4>2. Template Installation</h4>
<p>FTP Upload:</p>
<p><strong>Step 1:</strong> Open up your FTP manager and connect to your hosting</p>
<p><strong>Step 2:</strong> Upload the files inside <strong>Your Hosting</strong> folder.</p>
<p>Local Host:</p>
<p><strong>Step 1:</strong> You must run with localhost web server like XAMPP, WampServer, AMPPS, and other <strong>eg : localhost:8000</strong></p>
</section>
<hr>
<section id="requirements">
<h4>3. Requirements</h4>
<p>Working with our SmartHR product, before going to edit all the HTML, CSS and JS files you will need a text editor.</p>
<p>In this case, we recommended the <strong>Sublime Text 3 editor or Notepad++</strong> as it allows you to edit the files efficiently and all the editable files are located in "SmartHr->PWA" folder.</p>
<hr>
<h4>Browser Support</h4>
<p>SmartHR PWA HTML template is built to work best in the latest desktop and mobile and tablet browsers</p>
<ul>
<li>Chrome</li>
<li>FireFox</li>
<li>Safari</li>
<li>Opera</li>
<li>Edge</li>
</ul>
</section>
<hr>
<section id="styles">
<h4>4. Styles</h4>
<pre><code><link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.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/style.css">
</code></pre>
<p class="mt-4">We have used this Css for this template. You can customize the Css files</p>
</section>
<hr>
<section id="javascripts">
<h4>5. Javascripts</h4>
<pre><code><script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/jquery.datepicker2.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.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>
</code></pre>
<p class="mt-4">We have used this javascript for this template. You can customize the script.js</p>
</section>
<hr>
<section id="file-structure">
<h4>6. File Structure</h4>
<p>Extract the zip file you received after purchase and you would find the exact below files and folders:</p>
<p>SmartHR</p>
<div class="file-wrap">
<pre>SmartHR/
├── node_modules // Node modules
│ ├── .bin/ // .Bin module
│ ├── accepts/ // Accepts module
│ ├── rest of modules // Remaining Node modules
├── assets // All fonts into this folder
| ├── css/ // All css into this folder
| ├── fonts/ // All fonts into this folder
| ├── images/ // All images into this folder
| ├── js/ // All js files are here
| ├── plugins/ // All plugins files are here
├── index.html/ // Main index page
├── manifest.json/ // Install manifest
├── rest of the html pages // Remaining html pages
├── server.js/ // Run the server
├── documentation/ // Documentation files
</pre>
</div>
</section>
<hr>
<section id="customization">
<h4>7. Customization</h4>
<p>1. How to Change Site Title</p>
<p><img src="assets/img/img-7.jpg" alt="" class="img-fluid"></p>
<p>2. How to Change Side Panels Directions and Effects</p>
<p><img src="assets/img/img-8.jpg" alt="" class="img-fluid"></p>
</section>
<hr>
<section id="important-notes">
<h4>8. Important Notes</h4>
<p>Need a help, How to configure the SmartHR HTML Progressive Web App Template into Android and iOS platform? Get reference on <a href="https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605" target="_blank">Progressive Web App</a></p>
</section>
<hr>
<section id="credits">
<h4>9. Credits</h4>
<p>We've used the following resources as listed. These are some awesome creation and we are thankful to the community.</p>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Plugin</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jquery</td>
<td><a href="https://jquery.com/" target="_blank">https://jquery.com/</a>
</td>
</tr>
<tr>
<td>Font Awesome</td>
<td><a href="https://fontawesome.com/" target="_blank">https://fontawesome.com/</a>
</td>
</tr>
<tr>
<td>Bootstrap4</td>
<td><a href="https://getbootstrap.com/" target="_blank">https://getbootstrap.com/</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<hr>
<section id="change-log">
<h4>10. Change Log</h4>
<ul>
<li>1.0.1 - 11 Jul, 2025</li>
<li>Version Upgrade</li>
<li>1.0.0 - 11 Jan, 2021</li>
<li>Initial Version</li>
</ul>
</section>
<hr>
<section id="support">
<h4>11. Fupport</h4>
<p class="mb-0">If you have any queries please contact us through email: <strong>[email protected]</strong>
</p>
</section>
<hr>
<section id="thank-you" class="mb-0">
<h4>12. Thank You</h4>
<p>Thank you so much for using this template</p>
<a target="_blank" href="https://themeforest.net/user/dreamguys"><strong>Dreamguy's Technologies Pvt Ltd,</strong></a>
</section>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12">
<p class="mb-0">© 2022 SmartHR. All rights reserved.</p>
</div>
<a href="#" class="top-move"><i class="fas fa-arrow-up"></i></a>
</div>
</div>
</footer>
<!-- /footer -->
</div>
<!-- /Main Wrapper -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>