403Webshell
Server IP : 14.225.204.176  /  Your IP : 216.73.216.252
Web Server : nginx/1.24.0
System : Linux nodejs-ybgk 6.8.0-40-generic #40-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul 5 10:34:03 UTC 2024 x86_64
User : root ( 0)
PHP Version : 8.1.34
Disable Function : NONE
MySQL : OFF  |  cURL : ON  |  WGET : ON  |  Perl : ON  |  Python : OFF  |  Sudo : ON  |  Pkexec : OFF
Directory :  /var/www/html/php/zinisoft_vi.net/user-guide/kindie/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :


[ Back ]     

Current File : /var/www/html/php/zinisoft_vi.net/user-guide/kindie/index.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Berkine" />

	<!-- Stylesheets
	============================================= -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800|Poppins:300,400,500,600,700,800,900" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;500;600;700;800&display=swap" rel="stylesheet">  
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" href="style.css" type="text/css" />

	<!-- One Page Module Specific Stylesheet -->
	<link rel="stylesheet" href="onepage.css" type="text/css" />
	<!-- / -->

	<!-- Documentation Module Specific Stylesheet -->
	<link rel="stylesheet" href="docs.css" type="text/css" />
	<!-- / -->

	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons/et/et-line.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons/medical/medical-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons/real-estate/real-estate-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

	<link rel="stylesheet" href="one-page/css/fonts.css" type="text/css" />

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<!-- External JavaScripts
	============================================= -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/plugins.js"></script>

	<!-- Document Title
	============================================= -->
	<title>Documentation | Kindergarten Management Software - Connecting Schools, Teachers, and Parents on the Web and Mobile</title>

</head>

<body class="stretched">

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Header
		============================================= -->
		<header id="header" class="static-sticky">

			<div id="header-wrap">

				<div class="container-fullwidth clearfix">

					<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

					<!-- Logo
					============================================= -->
					<div id="logo">
						<a href="/" class="standard-logo">Kindergarten Management Software - Connecting Schools, Teachers, and Parents on the Web and Mobile</a>					</div><!-- #logo end -->

					<!-- Primary Navigation
					============================================= -->
					<nav id="primary-menu">

						<ul>
							<li><a target="_blank"  href="https://kindie.io/dung-thu" target="_blank"><div>Trial</div></a></li>
							<li><a target="_blank"  href="https://kindie.io/" target="_blank"><div>About Kindie</div></a></li>
						</ul>

					</nav><!-- #primary-menu end -->

				</div>

			</div>

		</header><!-- #header end -->

		<!-- Content
		============================================= -->
		<section id="content">

			<div class="content-wrap nopadding">

				<div id="docs" class="container-fullwidth clearfix">

					<div class="docs-navigation">

						<ul>
							<li><a href="#docs-start">Installation</a>
								<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
									<li><a href="#" data-href="#docs-start-introduction">Introduction</a></li>
									<li><a href="#" data-href="#docs-start-requirements">Requirements</a></li>
									<li><a href="#" data-href="#docs-start-installation">Installation</a></li>
								</ul>
							</li>
							<li><a href="#docs-userguide">User Guide</a>
								<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
									<li><a href="#" data-href="#docs-userguide-website"><b>WEBSITE MANAGEMENT</b></a></li>
										<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
											<li><a href="#" data-href="#docs-userguide-website-login">Login to the software</a></li>
											<li><a href="#" data-href="#docs-userguide-website-school">Update school information</a></li>
											<li><a href="#" data-href="#docs-userguide-website-branch">Create branches</a></li>
											<li><a href="#" data-href="#docs-userguide-website-session">Create academic sessions</a></li>
											<!-- <li><a href="#" data-href="#docs-userguide-website-chuongtrinh">Create programs</a></li> -->
											<li><a href="#" data-href="#docs-userguide-website-groupclass">Create class groups</a></li>
											<li><a href="#" data-href="#docs-userguide-website-class">Create classes</a></li>
											<li><a href="#" data-href="#docs-userguide-website-foods">Create menus</a></li>
											<li><a href="#" data-href="#docs-userguide-website-subject">Create subjects</a></li>                                    
											<li><a href="#" data-href="#docs-userguide-website-student">Add students</a></li>   
											<li><a href="#" data-href="#docs-userguide-website-parent">Add parents</a></li>   
											<li><a href="#" data-href="#docs-userguide-website-medical">Create health checkups</a></li>
											<li><a href="#" data-href="#docs-userguide-website-news">Create articles, news</a></li>
											<li><a href="#" data-href="#docs-userguide-website-album">Create albums</a></li>
											<li><a href="#" data-href="#docs-userguide-website-notification">Send notifications</a></li>    
											<li><a href="#" data-href="#docs-userguide-website-fee">Create tuition fees</a></li>
											<li><a href="#" data-href="#docs-userguide-website-accounting">Accounting</a></li>
											<li><a href="#" data-href="#docs-userguide-website-user">Create staff</a></li>
											<li><a href="#" data-href="#docs-userguide-website-attendance">Attendance management</a></li>
											<li><a href="#" data-href="#docs-userguide-website-bus">Manage school bus transportation</a></li>
											<li><a href="#" data-href="#docs-userguide-website-messengers">Messengers</a></li>                                                     
											<li><a href="#" data-href="#docs-userguide-website-report">Reports</a></li>
											<li><a href="#" data-href="#docs-userguide-website-changeclass">Transfer classes</a></li>
											<li><a href="#" data-href="#docs-userguide-website-medias">Upload medias</a></li>
										</ul>
									<li><a href="#" data-href="#docs-userguide-mobile"><b>MOBILE APPLICATION</b></a></li>
										<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo" data-speed="1250">
											<li><a href="#" data-href="#docs-userguide-mobile-setup"><u><b>Installation, login, and basic setup information.</b></u></a></li>
											<li><a href="#" data-href="#docs-userguide-monile-login">Installation and login</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-account">Change password and update personal information</a></li>
											<li><a href="#" data-href="#docs-userguide-website-parent"><u><b>Parents</b></u></a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-absence">Request leave of absence</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-foods">View menus</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-fee">Check tuition fees</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-payment">Pay tuition fees</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-follow">Track child's activities</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-parent-messengers">Online exchange</a></li>                                        
											<li><a href="#" data-href="#docs-userguide-mobile-teacher"><u><b>Teachers</b></u></a>
											<li><a href="#" data-href="#docs-userguide-mobile-schedule">View timetable</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-attendance">Attendance</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-teacher-messengers">Online exchange</a></li>    
											<li><a href="#" data-href="#docs-userguide-mobile-medical">View health information</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-medias">Manage centralized medias</a></li>
											<li><a href="#" data-href="#docs-userguide-mobile-driver"><u><b>Drivers</b></u></a>
											<li><a href="#" data-href="#docs-userguide-mobile-shuttle">Transporting children</a></li>    
										</ul>                                                                       
								</ul>
								
							</li>							
						</ul>

					</div>

					<div class="docs-content">
						<!-- INTRODUCTION -->
						<div id="docs-start">

							<div id="docs-start-introduction" class="docs-content-inner page-section">

								<h1>Kindie Web - Multi branch kindergarten management software</h1>

								<div>
									<span class="special-label">Version 1.0</span> <span class="special-label">Last Documentation Update - Feb 21, 2024</span>
								</div>

								<div class="row special-row">
									
									<div class="col-md-6">
										<img src="images/banner.png" style="border:1px solid #22376F;">
									</div>
									<div class="col-md-6">
										<h3>Welcome</h3>
										<p>Thank you for purchasing <a target="_blank"  href="https://codecanyon.net/item/kindie-kindergarten-management-software/25257408" target="_blank">Kindie Web - Multi branch kindergarten management software</a> Script. We covered almost everything in this document that how easily you can setup this script. We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better cloud solutions.</p>
										<h5>Author: <a target="_blank"  href="https://codecanyon.net/user/zinisoft" target="_blank">ZiniSoft Team</a></h5>
										<h5>Demo: <a target="_blank"  href="https://codecanyon.net/item/kindie-kindergarten-management-software/25257408" target="_blank">Kindie Web - Multi branch kindergarten management software</a></h5>
									</div>

								</div>

							</div>

							<div class="line"></div>

							<div id="docs-start-requirements" class="docs-content-inner page-section">

								<h1>Requirements</h1>

								<h6>Before installation, your server must have following requirements to run the script properly</h6>

								<ul>
									<li><code>NodeJS v18.x or higher (<b class="text-danger">Note: this is NodeJS App, not PHP app. So you have to ask your hosting provider to double check</b>) </code></li>
									<li><code>MongoDB 5.x or higher</code></li>
									<li><code>NginX Server Recommended (Apache configuration and installation up to you, we don't provide support on that)</code></li>
								</ul>

							</div>

							<div class="line"></div>

							<div id="docs-start-installation" class="docs-content-inner page-section">

								<h1>Installation Instructions</h1>

								<p>This is a general installation overview of the script, there is a deep dive section provided for each part in the left menu bar.</p>
								<p>Follow the steps as explained, and you should be all set. If you face any challenges with installtion steps, reach out to us for a support.</p>

								<h4><i class="icon-buffer special-i"></i> Setup overview:</h4>
								<strong>I - SERVER CONFIG</strong><br/>
								You will need the following software installed in order to properly run Kindie.<br/>
								If you are using hosting: they will provide you all the credentials to access: FTP and Database account.<br/>
								If you are using VPS (Ubuntu 22.x Recommended): login to SSH server and install:<br/>
								Step 1: Install NginX: <a target="_blank" href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04</a><br/>
								Step 2: Install MongoDB: check out Mongo Community installation instructions. Ref: <a target="_blank" href="https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/">https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/</a><br/>
								Step 3: Install NodeJS?: Ref: <a target="_blank" href="https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04</a><br/>
								Double-check to make sure everything is working: <br/>
									<strong>$ node --version</strong> <br/>
									<strong>$ npm --version</strong><br/>
								Now, once Nodejs is installed on your server, next step is to install "forever" using the following command:<br/>
								<strong>$ npm install forever -g</strong><br/>
								Double-check to make sure everything is working <br/>
								<strong>$ forever --version</strong><br/>
								Now, once "forever" is installed your server, we are ready to run our application!<br/><br/>

								<strong>II - SOURCE CODE CONFIG</strong><br/>
								How to upload Kindie files to server?<br/>
								Open file .env.example and rename to .env located inside script folder. It contains below values, you can replace with your data:<br/>
								<strong>MONGO_USER=""</strong><br/>
								<strong>MONGO_PASSWORD=""</strong><br/>
								<strong>MONGO_DB_NAME="kindiedb"</strong><br/>
								*replace "" with your database username, password and database name. <br/><br/>
								<strong>MAIL_AUTH_USER="no-reply@yourdomain.com"</strong><br/>
								<strong>MAIL_AUTH_PASSWORD="xxx"</strong><br/>
								<strong>MAIL_AUTH_HOST="smtp.eu.mailgun.org"</strong><br/>
								<strong>MAIL_AUTH_PORT="587"</strong><br/>
								<strong>MAIL_FROM="no-reply@yourdomain.com"</strong><br/>
								*If you need to send / received email, we support Mailgun service, please replace all the credentials above by your Mailgun server config. Ref: <a target="_blank" href="https://documentation.mailgun.com/">https://documentation.mailgun.com/</a> <br/>
								<strong>Then Upload all files/folders located inside "script" folder to your server.</strong><br/><br/>

								<strong>III - START APPLICATION</strong><br/>
								<strong>How to start our application on dedicated server?</strong><br/>

								Login to your server using command line: 
								<strong>$ cd /path/to/script</strong> <br/>
								<strong>$ cd /path/to/kindie/</strong> <br/>
								<b class="text-danger">Note: You MUST go to working folder have source code to run the following commands</b><br/>
								Before we run our application, you need to install all the dependencies, to do that, run the following command and wait till it finishes.<br/> 
								<strong>$ npm install</strong><br/>
								To start our application, run the following command:<br/>
								<strong>$ sails lift</strong><br/>
								Now your node server is running on PORT 1337.<br/>
								<b class="text-danger">Note: Kindie build on SailsJS Framework, so if you need futher infomation how to config advanced please ref: <a target="_blank" href="https://sailsjs.com/get-started">https://sailsjs.com/get-started</a></b><br/>
								To stop our application, press <strong>CTRL+ C</strong> <br/>
								Run the following command using the server "forever" <strong>$ forever start app.js</strong><br/><br/>
								<strong>How to start our application using cPanel?</strong><br/>
								- Search "Setup Node.js App" from your cPanel account.<br/>
								- Click on "Setup Node.js App" link and then click on <strong>"CREATE APPLICATION"</strong> button<br/>
								- After filling the form click on <strong>"CREATE"</strong>button.<br/>
								- Once the app created open your "File Manager".<br/>
								- In root directory, upload all files/folders located inside "script" folder in this folder.<br/>
								- Once all file uploaded open your node app which we created above.<br/>
								- Now its showing these 2 extra options: Run <strong>NPM Install & Run JS script</strong><br/>
								- First click on "Run NPM Install" button to install all dependencies.<br/>
								- Select "build" option and click on "Run JS script" button.<br/>
								- That's it. Now open your website, you will see kindie installation page.
							</div>


							
						</div>
						<!-- END INTRODUCTION -->
						<!-- HUONG DAN SU DUNG -->
						<div id="docs-userguide">

							<div id="docs-userguide-website" class="docs-content-inner page-section">
								<h2>Instructions for Using the Software on the Website Platform (Management Board)</h2>
								<p><a target="_blank"  href="https://kindie.io/" target="_blank">Kindie</a> helps schools to oversee and manage the activities of staff, parents, and students. It manages teaching programs, information flows, and school reports. Below is a guide for the management board on using the software on the website platform.</p>
							</div>
							<!-- 1/Login -->
							<div id="docs-userguide-website-login" class="docs-content-inner page-section">
								<h3>1. Logging into the Software</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span> Access the software.
										<br>
										Go to the Kindie administration website <a target="_blank"  href="https://v3.kindie.io/backend"><u>Here</u></a>.
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Sign in.
										<br>
										In the Sign-in window, enter your <b>Email</b> and <b>Password</b> provided.
										<br>
										Select <b>Log In</b> to sign in to the software.
										<br>
										<img src="images/web-login.png" class="special-img">
									</li>
								</ul>
							</div>

							<div class="line"></div>
							<!-- 2/Update school information -->
							<div id="docs-userguide-website-school" class="docs-content-inner page-section">

								<h3>2/ Update school information</h3>

								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on the <b>gear icon</b> in the top right corner of the screen.
										<br>
										Select <b>School</b> from the menu.
										<br>
										<img src="images/web-school-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Fill in the information.
										<br>
										In the School window, fill in the school information in the provided form <b>(1)</b>.
										<br>
										Finally, click <b>Update</b> to save the information.
										<br>
										<img src="images/web-school-step2.png" class="special-img">
									</li>									
								</ul>
							</div>

							<div class="line"></div>
							<!-- 3/Create branch -->
							<div id="docs-userguide-website-branch" class="docs-content-inner page-section">

								<h3>3/ Create a branch</h3>
								<p>To create a branch for the school, follow these steps:</p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on the <b>gear icon</b> in the top right corner of the screen.
										<br>
										Select <b>Branch</b> from the menu.
										<br>
										<img src="images/web-branch-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span>
										<br>
										In the right-hand side Branch window, click on <b>Add New</b>.
										<br>										
										<img src="images/web-branch-step2.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span> Branch information.
										<br>
										Fill in the information for the new branch in the provided form <b>(1)</b>.
										<br>
										Finally, click <b>Add</b> to complete the process. You can go to the <b>Management</b> section on the left side of the screen to verify the branch you just created.
										<br>
										<img src="images/web-branch-step3.png" class="special-img">
									</li>									
								</ul>
								
							</div>

							<div class="line"></div>
							<!-- 4/Create session -->
							<div id="docs-userguide-website-session" class="docs-content-inner page-section">

								<h3>4/ Create a new session</h3>
								<p>To create a new session for the school, follow these steps:</p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on <b>Academy</b>.
										<br>
										Select <b>Session</b> from the options.
										<br>
										In the right-hand side Session window, click on <b>Add New</b>.
										<br>
										<img src="images/web-session-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Session information.
										<br>
										Fill in the information for the new session in the provided form <b>(1)</b>.
										<br>
										Finally, click <b>Add</b> to complete the process.
										<br>
										<img src="images/web-session-step2.png" class="special-img">
									</li>	
								</ul>
								
							</div>

							<div class="line"></div>
							<!-- 5/Create group class -->
							<div id="docs-userguide-website-groupclass" class="docs-content-inner page-section">
								<h3>5/ Creating a new group class</h3>
								<p>To create a new group class, follow these steps:</p>
								<ul>
								  <li class="special-li">
									<span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on <b>Academy</b>.
									<br>
									Then select <b>Class Groups</b>.
									<br>
									In the Group Class window on the right side, click on <b>Add New</b>.
									<br>
									<img src="images/web-groupclass-step1.png" class="special-img">
								  </li>
								  <li class="special-li">
									<span class="special-span">Step 2:</span> Group Class Information
									<br>	
									Fill in the information for the new group class in the form <b>(1)</b>.
									<br>
									Finally, click on <b>Add</b> to complete.
									<br>
									<img src="images/web-groupclass-step2.png" class="special-img">
								  </li>
								</ul>
							</div>

							<div class="line"></div>
							<!-- 6/Create class -->
							<div id="docs-userguide-website-class" class="docs-content-inner page-section">
								<h3>6/ Creating a new class</h3>
								<ul>
								  <li class="special-li">
									<span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on <b>Academy</b>.
									<br>
									Then select <b>Classes</b>.										
									<br>
									In the Classes window on the right side, click on <b>Add New</b>.
									<br>
									<img src="images/web-class-step1.png" class="special-img">
								  </li>
								  <li class="special-li">
									<span class="special-span">Step 2:</span> Class Information
									<br>
									Fill in the information for the new class in the form <b>(1)</b>.
									<br>
									Finally, click on <b>Add</b> to complete.
									<br>
									<img src="images/web-class-step2.png" class="special-img">
								  </li>
								</ul>
							</div>

							<div class="line"></div>
							<!-- 7/Create menu -->
							<div id="docs-userguide-website-foods" class="docs-content-inner page-section">
								<h3>7/ Creating a new menu</h3>
								<p>To create a new menu, follow these steps:</p>
								<ul>
								  <li class="special-li">
									<span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on <b>Academy</b>.
									<br>
									Then select <b>Foods</b>.
									<br>
									In the Foods window on the right side, you have two options:
									<ul>
									  <li><b>Add New</b>: Add a single dish at a time</li>
									  <li><b>Import</b>: Upload multiple dishes at once (using the provided template file)</li>
									</ul>
									<br>
									<img src="images/web-foods-step1.png" class="special-img">
								  </li>								  
								  <li class="special-li">
									<span class="special-span">Step 2:</span> Dish Information
									<ul>
									  <li>For <b>Add New</b>: Fill in the information for the new dish in the form <b>(1)</b> and click <b>Add New</b> to add the dish.<br><img src="images/web-foods-step2a.png" class="special-img"></li>
									  <li>For <b>Import</b>:
										<br>
										Choose the English/Vietnamese template file.
										<br>
										<img src="images/web-foods-step2b.png" class="special-img">
										<br>
										You will be directed to a <b>Google Drive</b> page with various sheets, select the <b>MenuSample.xls</b> file.
										<br>
										<img src="images/web-import-menu-step1.png" class="special-img">
										<br>
										Fill in the menu dishes according to the file template. Pay attention to the <b>Class Code</b> field and enter the correct class code for adding the menu.
										<img src="images/web-import-menu-step2.png" class="special-img">
										<br>
										After completing the menu, save the file to your computer. Go to <b>File</b> > <b>Download</b> > <b>Microsoft Excel (.xls)</b>.
										<br>
										<img src="images/web-import-menu-step3.png" class="special-img">
										<br>
										Finally, return to the Kindie software and import the file. Click on <b>Choose File</b>, select the saved <b>MenuSample.xls</b> file, and click <b>Open</b>.
										<br>
										<img src="images/web-import-menu-step4.png" class="special-img">
									  </li>
									</ul>
								  </li>
								</ul>
							</div>							
						
							<div class="line"></div>
							<!-- 8/Create subject -->
							<div id="docs-userguide-website-subject" class="docs-content-inner page-section">
								<h3>8/ Creating a new subject</h3>
								<p>To create a new subject, follow these steps:</p>
								<ul>
								  <li class="special-li">
									<span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on <b>Academy</b>.
									<br>
									Then select <b>Subject</b>.
									<br>
									In the Subject window on the right side, you have two options:
									<ul>
									  <li><b>Add New</b>: Add a single subject at a time</li>
									  <li><b>Import</b>: Upload multiple subjects at once (using the provided template file)</li>
									</ul>
									<br>
									<img src="images/web-subject-step1.png" class="special-img">
								  </li>
								  <li class="special-li">
									<span class="special-span">Step 3:</span> Subject Information
									<ul>
									  <li>For <b>Add New</b>: Fill in the information for the new subject in the form <b>(1)</b> and click <b>Add New</b> to add the subject.<br><img src="images/web-subject-step2a.png" class="special-img"></li>
									  <li>For <b>Import</b>:
										<br>
										Choose the English/Vietnamese template file.
										<br>
										<img src="images/web-subject-step2b.png" class="special-img">
										<br>
										You will be directed to a <b>Google Drive</b> page with various sheets, select the <b>ScheduleSample.xls</b> file.
										<br>
										<img src="images/web-import-schedule-step1.png" class="special-img">
										<br>
										Fill in the subject according to the file template. Pay attention to the <b>Class Code</b> field and enter the correct class code for adding the subject.
										<img src="images/web-import-schedule-step2.png" class="special-img">
										<br>
										After completing the subject, save the file to your computer. Go to <b>File</b> > <b>Download</b> > <b>Microsoft Excel (.xls)</b>.
										<br>
										<img src="images/web-import-schedule-step3.png" class="special-img">
										<br>
										Finally, return to the Kindie software and import the file. Click on <b>Choose File</b>, select the saved <b>ScheduleSample.xls</b> file, and click <b>Open</b>.
										<br>
										<img src="images/web-import-schedule-step4.png" class="special-img">
									  </li>
									</ul>
								  </li>
								</ul>
							</div>
							
							<div class="line"></div>
							<!-- 9/Add student -->
							<div id="docs-userguide-website-student" class="docs-content-inner page-section">
								<h3>9/ Adding new students</h3>
								<p>To add students to a class, follow these steps:</p>
								<ul>
									<li class="special-li">
										<span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on <b>Management</b>.
										<br>
										Select the <b>branch that contains the class</b> where you want to add students (e.g., <b>Default Branch</b>).
										<br>
										In the branch window, click on the <b>class where you want to add students</b> (e.g., <b>Test 2</b>).
										<br>
										<img src="images/web-chooseclass-step1.png" class="special-img">
									</li>
									<li class="special-li">
										<span class="special-span">Step 2:</span>
										<br>
										In the Student window on the right side, you have two options:
										<ul>
										<li><b>Add New</b>: Add a single student at a time</li>
										<li><b>Import</b>: Upload multiple students at once (using the provided template file)</li>
										</ul>
										<br>
										<img src="images/web-student-step2.png" class="special-img">
									</li>
									<li class="special-li">
										<span class="special-span">Step 3:</span> Student Information
										<ul>
											<li>For <b>Add New</b>: Fill in the student's information in both forms <b>Profile</b> and <b>Healthy Info</b> <img src="images/web-student-step3a.png" class="special-img"></li>
											<li>For <b>Import</b>:
														<br>
														Choose the English/Vietnamese template file.
														<br>
														<img src="images/web-student-step3b.png" class="special-img">
														<br>
														You will be directed to a <b>Google Drive</b> page with various sheets, select the <b>StudentSample.xlsx</b> file.
														<br>
														<img src="images/web-import-student-step1.png" class="special-img">
														<br>
														Fill in the student information according to the file template. Pay attention to the <b>Class Code</b> field and enter the correct class code for adding the student.
														<img src="images/web-import-student-step2.png" class="special-img">
														<br>
														After completing the student information, save the file to your computer. Go to <b>File</b> > <b>Download</b> > <b>Microsoft Excel (.xlsx)</b>.
														<br>
														<img src="images/web-import-student-step3.png" class="special-img">
														<br>
														Finally, return to the Kindie software and import the file. Click on <b>Choose File</b>, select the saved <b>StudentSample.xlsx</b> file, and click <b>Open</b>.
														<br>
														<img src="images/web-import-student-step4.png" class="special-img">
											</li>
										
										</ul>										
									</li>			
								</ul>

							</div>
							
							<div class="line"></div>
							<!-- 10/Add parent -->
							<div id="docs-userguide-website-parent" class="docs-content-inner page-section">

								<h3>10/ Adding new parents</h3>
								<p>To add new parents, follow these steps:</p>
								<ul>
									<li class="special-li">
										<span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on <b>Management</b>.
										<br>
										Select the <b>branch that contains the class</b> where you want to add parents (e.g., <b>Default Branch</b>).
										<br>
										In the branch window, click on the <b>class where you want to add parents</b> (e.g., <b>Test 2</b>).
										<br>
										<img src="images/web-chooseclass-step1.png" class="special-img">
									</li>
									<li class="special-li">
										<span class="special-span">Step 2:</span>
										<br>
										Click on the <b>Parents</b> section.
										<br>
										In the Parent window on the right side, you have two options:
										<ul>
										<li><b>Add New</b>: Add a single parent at a time</li>
										<li><b>Import</b>: Upload multiple parents at once (using the provided template file)</li>
										</ul>
										<br>
										<img src="images/web-parent-step2.png" class="special-img">
									</li>
									<li class="special-li">
										<span class="special-span">Step 3:</span> Parent Information
										<ul>
											<li>For <b>Add New</b>: Fill in the parent's information in the form <img src="images/web-parent-step3a.png" class="special-img"></li>
											<li>For <b>Import</b>:
												<br>
												Choose the English/Vietnamese template file.
												<br>
												<img src="images/web-parent-step3b.png" class="special-img">
												<br>
												You will be directed to a <b>Google Drive</b> page with various sheets, select the <b>ParentSample.xlsx</b> file.
												<br>
												<img src="images/web-import-parent-step1.png" class="special-img">
												<br>
												Fill in the parent information according to the file template.
												<br>
												<img src="images/web-import-parent-step2.png" class="special-img">
												<br>
												After completing the parent information, save the file to your computer. Go to <b>File</b> > <b>Download</b> > <b>Microsoft Excel (.xlsx)</b>.
												<br>
												<img src="images/web-import-parent-step3.png" class="special-img">
												<br>
												Finally, return to the Kindie software and import the file. Click on <b>Choose File</b>, select the saved <b>ParentSample.xlsx</b> file, and click <b>Open</b>.
												<br>
												<img src="images/web-import-parent-step4.png" class="special-img">
											</li>
										</ul>										
									</li>			
								</ul>

							</div>

							<div class="line"></div>
							<!-- 11/Create health examination schedule -->
							<div id="docs-userguide-website-medical" class="docs-content-inner page-section">
								<h3>11/ Creating health examination schedule</h3>
								<ul>
									<li class="special-li">
									  <span class="special-span">Step 1:</span>
									  <br>
									  On the main interface of the software, click on <b>Academy</b>.
									  <br>
									  Then select <b>Medical</b>.										
									  <br>
									  In the Medical window on the right side, click on <b>Add New</b>.
									  <br>
									  <img src="images/web-medical-step1.png" class="special-img">
									</li>
									<li class="special-li">
									  <span class="special-span">Step 2:</span> Class Information
									  <br>
									  Fill in the information for the health examination schedule in the form <b>(1)</b>.
									  <br>
									  Finally, click on <b>Add</b> to complete.
									  <br>
									  <img src="images/web-medical-step2.png" class="special-img">
									</li>
								</ul>
							</div>

							<div class="line"></div>
							<!-- 12/Create news -->
							<div id="docs-userguide-website-news" class="docs-content-inner page-section">
								<h3>12/ Posting new articles and news for the school</h3>
								<ul>
									<li class="special-li">
									  <span class="special-span">Step 1:</span>
									  <br>
									  On the main interface of the software, click on <b>News</b>.
									  <br>
									  Then select <b>All News</b>.										
									  <br>
									  In the Post window on the right side, click on <b>Add New</b>.
									  <br>
									  <img src="images/web-news-step1.png" class="special-img">
									</li>
									<li class="special-li">
									  <span class="special-span">Step 2:</span> Class Information
									  <br>
									  Fill in the information for the news in the form <b>(1)</b>.
									  <br>
									  Finally, click on <b>Add New</b> to complete.
									  <br>
									  <img src="images/web-news-step2.png" class="special-img">
									</li>
								</ul>
							</div>

							<div class="line"></div>

							<div id="docs-userguide-website-album" class="docs-content-inner page-section">

								<h3>13/ Create Photo Albums</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on <b>Information Portal</b>.
										<br>
										Next, select the <b>Album</b> section. After the <b>Albums</b> window opens, click on the <b>Add new</b> button to start creating a new album.
										<br>
										<img src="images/web-album-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Create a new photo album.
										<br>
										Fill in the album information in the form <b>(1)</b> and upload the images.
										<br>
										Finally, click <b>Add new</b> to complete the album creation. Now you have successfully created a photo album.
										<br>
										<img src="images/web-album-step2.png" class="special-img">
									</li>            
								</ul>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-website-notification" class="docs-content-inner page-section">

								<h3>14/ Send Notifications to Each Class/Parent/Teacher</h3>
								<p>Steps for the school to create and send notifications to parents and teachers.</p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the main interface of the software, click on <b>Information Portal</b>.
										<br>
										Next, select the <b>Notifications</b> section.
										<br>
										<img src="images/web-notification-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span>
										<br>
										In the Notifications window on the right side, click on <b>Add new</b>.
										<br>                                        
										<img src="images/web-notification-step2.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span> Create content for the notification.
										<br>
										Create a new notification using the form <b>(1)</b> and select the appropriate notification type (scope): <b>All/Parents/Teachers</b>.
										<br>
										Finally, click <b>Add new</b> to send the notification.
										<br>
										<img src="images/web-notification-step3.png" class="special-img">
									</li>            
								</ul>
							</div>
							
							<div class="line"></div>
							<!-- 13/Create fee & notification invoice -->
							<div id="docs-userguide-website-fee" class="docs-content-inner page-section">
								<h3>15/ Creating fees & notification invoice</h3>
								<p><b>First we need to create a list of fees (or fees that need to be collected).</b></p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the software main interface, click <b>Fee</b>.
										<br>
										Select the <b>Fee</b> section.
										<br>																			
										In the Fee window, click <b>Add new</b> on the right side.
										<br>
										<img src="images/web-fee-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Fill in information about the new fee.
										<br>
										Please fill in the information for the new fee such as name, amount,... according to form <b>(1)</b>.
										<br>
										Finally, click <b>Add</b> to add the fee to the list.
										<br>
										<img src="images/web-fee-step2.png" class="special-img">
										<br>
										Once created, the new fee will be displayed in the category as follows:
										<br>
										<img src="images/web-fee-step3.png" class="special-img">
									</li>
								</ul>

								<p><b>Next, we will create invoices for the objects from the created charges:</b></p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										Select the <b>Invoice</b> section.
										<br>																			
										In the Invoice window, click <b>Add new</b> on the right side.
										<br>
										<img src="images/web-invoice-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Add new invoice.
										<br>
										Invoice type options <b>(1)</b>.
										<br>
										Fill in the invoice information in section <b>(2)</b>.
										<br>
										<img src="images/web-invoice-step2.png" class="special-img">
										<br>
										Select the fee categories to collect from the pre-created list <b>(1)</b>. 
										<br>
										Multiple fees can be collected in 1 invoice, select <b>Add new (2)</b> to add other categories to the invoice.
										<br>
										Then select <b>Continue</b> to go to the next step.
										<br>
										<img src="images/web-invoice-step3.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span> Check the newly created invoice.
										<br>
										Check and edit the invoice information in section <b>(1)</b>.
										<br>
										Save the invoice to complete invoice creation <b>(2)</b>.
										<br>
										<img src="images/web-invoice-step4.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 4:</span>  Send invoice notification.
										<br>
										In the <b>Invoice</b> window  there is a list of invoices that have been created. Here, you will select the invoice you want to send notification to.
										<br>
										Select <b>Sent to parent</b> or <b>Sent to parent and notification</b> to send invoice notification to parents.
										<br>
										<img src="images/web-invoice-step5.png" class="special-img">
									</li>												
								</ul>
							</div>		
							
							<div class="line"></div>
							<!-- 14/Accounting -->
							<div id="docs-userguide-website-accounting" class="docs-content-inner page-section">

								<h3>16/ Accounting</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
									  <br>
									  Select the <b>Invoice</b> section.
									  <br>
									  In the Invoices window, in the list of invoices there will be components as noted in the image.
									  <br>
									  <img src="images/web-accounting-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Accounting operations
										<ul>											
											<li>(1) View information: This will tell you information about invoices as well as invoice payment status.
												<br>
												<img src="images/web-accounting-step2a.png" class="special-img"></li>
											<li>(2) Edit: You can change invoice information such as price, payment method, etc. After completing editing, select <b>Save</b> to save the invoice or <b>Send Email Notify Invoice</b> to send the notification. Notify parents of bill changes.
												<br>
												<img src="images/web-accounting-step2b.png" class="special-img"></li>
											<li>(3) Update payment status: Helps accountants update invoices when parents make payments. <b>For example</b>: Nguyen Van Luoi's parents pay 1 million tuition in cash in advance, then the accountant will update the system and note the information as shown below.
												<br>
												<img src="images/web-accounting-step2c.png" class="special-img"></li>
										</ul>																
									</li>
								</ul>

							</div>

							<div class="line"></div>
							<!-- 15/Add user -->
							<div id="docs-userguide-website-user" class="docs-content-inner page-section">
								<h3>17/ Adding new staff members (Teachers, Drivers, Accountants, School Administrators)</h3>
								<ul>
								  <li class="special-li"><span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on the <b>gear icon</b> located in the top-right corner of the screen.
									<br>
									Select <b>Users</b>.
									<br>
									<img src="images/web-user-step1.png" class="special-img">
								  </li>
								  <li class="special-li"><span class="special-span">Step 2:</span>
									<br>
									In the STAFFS window on the right side, click on <b>Add New</b>.
									<br>
									<img src="images/web-class-step2.png" class="special-img">
								  </li>
								  <li class="special-li"><span class="special-span">Step 3:</span> Fill in the information.
									<br>
									In the Staff window, fill in the information and assign the staff member's position according to the form <b>(1)</b>.
									<br>
									Finally, click on <b>Add New</b> to add the staff member.
									<br>
									<img src="images/web-user-step3.png" class="special-img">
								  </li>									
								</ul>
							</div>

							<div class="line"></div>
							<!-- 16/Messengers -->
							<div id="docs-userguide-website-attendance" class="docs-content-inner page-section">

								<h3>18/ Attendance Management</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span> 
										<br>
										On the main interface of the software, click on <b>Management</b>.
										<br>
										Choose the <b>branch containing the class for attendance</b>.
										<br>
										<img src="images/web-student-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span>
										<br>
										In the branch window, click on the <b>class for attendance</b>.
										<br>                                
										<img src="images/web-student-step2.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span>
										<br>
										In the list of students, select the student for attendance.
										<br>
										<img src="images/web-student-step4.png" class="special-img">
									</li>   
									<li class="special-li"><span class="special-span">Step 4:</span>
										<br>
										Continue to click on the <b>Attendance</b> section to view the attendance information of the student.
										<br>
										Here you can view information about the days the student was absent as well as manage the pickup/drop-off times for students.
										<img src="images/web-attendance.png" class="special-img">
									</li>
								</ul>
							
							</div>
														
							<div class="line"></div>

							<div id="docs-userguide-website-bus" class="docs-content-inner page-section">

								<h3>19/ Manage buses and assign students to pick up students</h3>
								<p><b>Create new bus information</b></p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the software main interface, click on <b>the gear icon</b> in the right corner of the screen.
										<br>
										Select <b>the Bus</b> section .
										<br>
										<img src="images/web-addbus-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span>
										In the bus window that appears, select <b> Add new</b>.
										<br>
										<img src="images/web-addbus-step2.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span> Điền thông tin.
										<br>
										Please fill in the new bus information as well as the driver's name<b>(1)</b>.
										<br>
										Finally, click  <b>Add new</b> to add the bus to the system.
										<br>
										<img src="images/web-addbus-step3.png" class="special-img">
									</li>
								</ul>
								<p><b>Assign students to pick up and drop off buses</b></p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										In the list of buses, click on the bus icon of the bus you want to assign.
										<br>
										<img src="images/web-bus-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span>
										In the window a list of students will appear, select <b>(2)</b>students the bus will pick up. We can quickly search for students in the search bar <b>(1)</b>.
										<br>
										Finally, click <b>Update</b> to add students to the list of buses that will pick up.
										<img src="images/web-bus-step2.png" class="special-img">
									</li>
								</ul>

							</div>

							<div class="line"></div>

							<div id="docs-userguide-website-messengers" class="docs-content-inner page-section">

								<h3>20/ Messengers (Exchange Information, Chat with Classes)</h3>
							
								<ul>Messengers
									<li class="special-li"><span class="special-span">Step 1:</span> 
										<br>
										On the main interface of the software, click on <b>Messengers</b>.
										<br>
										<img src="images/web-messengers-step1.png" class="special-img">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> 
										<br>
										In the opened window, choose the conversation you want to exchange information with <b>(1)</b>.
										<br>
										In the chat interface, enter the content you want to discuss in the <b>Input message</b> section and can send images or attached files.
										<br>
										Finally, select the green arrow to send your message.
										<br>
										<img src="images/web-messengers-step2.png" class="special-img">
									</li>    
								</ul>
							</div>
							
							<!-- 18/Change class -->
							<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">

								<h3>21/ Change class</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
									<br>
									On the main interface of the software, click on <b>Academy (1)</b>.
									<br>
									Then select <b>Change Class (2)</b>.
									<br>
									Use the search bar and filter the list to find students faster <b>(3)</b>.
									<br>
									After finding the student you need to transfer, select that student <b>(4)</b>.
									<br>
									Next, in section <b>(5)</b>, select the class the student will be transferred to.
									<br>
									Click <b>Move</b> to complete <b>(6)</b>.
									<br>
										<img src="images/web-changeclass-step1.png" class="special-img">
									</li>										
								</ul>
							</div>

							<div class="line"></div>
							<!-- 19/Upload media -->
							<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">

								<h3>22/ Upload media</h3>
								<ul>
									<li class="special-li">
									  <span class="special-span">Step 1:</span>
									  <br>
									  On the main interface of the software, click on <b>Academy</b>.									
									  <br>
									  In the Medias window on the right side, click on <b>Add New</b>.
									  <br>
									  <img src="images/web-medias-step1.png" class="special-img">
									</li>
									<li class="special-li">
									  <span class="special-span">Step 2:</span> Upload medias
									  <br>
									  Select the file to upload in section. Note that the file has a maximum upload file size 20MB.
									  Enter image caption content in the <b>Caption</b> box.
									  <br>
									  Select <b>Add new (2)</b> to complete the upload.
									  <br>
									  <img src="images/web-medias-step2.png" class="special-img">
									</li>
								</ul>
							</div>

							<div class="line"></div>
							
							


						<!-- Mobile App -->

						<div id="docs-userguide-mobile" class="docs-content-inner page-section">

							<h1>Guide for Mobile App for Parents, Teachers, and Drivers</h1>
							
						</div>

							<div id="docs-userguide-mobile-setting" class="docs-content-inner page-section">

								<h3>1/ Installation & Login to the Kindie App on your mobile device</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span> Install Kindie
										<br>
										You can easily find and download the Kindie app from the App Store and Google Play Store.
										<br>
										<a href=""></a>
										<a href=""></a>
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Login
										<br>
										Open the Kindie app that you have installed.
										<br>
										Choose your role as <b>Parent/Teacher/Driver</b>.
										<br>
										Enter your <b>Username</b> and <b>Password</b> provided by the school.
										<br>
										Click <b>LOGIN</b> to access the app.
										<br>
										<img src="images/app-login.png" class="special-img-iphone">
									</li>
								</ul>							
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-account" class="docs-content-inner page-section">

								<h3>2/ Change Password and Update Personal Information</h3>
								<p>After installing and successfully logging into the Kindie app, we will proceed to change the password for your account and update some information.</p>
								<ul>
									<li class="special-li"><span class="special-span">Step 1:</span>
										<br>
										On the app screen, tap on the <b>3-line icon</b> located on the left side of the screen.
										<br>
										In the menu bar that appears, select <b></b>.
										<br>
										<img src="images/app-gv-home.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 2:</span> Fill in user information
										<br>
										Enter the required information below.
										<br>
										Press <b>SAVE CHANGES</b> to save the information.
										<br>
										<img src="images/app-thongtin1.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 3:</span> Change the password for your account
										<br>
										First, tap on <b>CHANGE PASSWORD</b>
										<br>
										<img src="images/app-thongtin2.png" class="special-img-iphone">
										<br>
										Enter your current password in the <b>Old Password</b> field and enter the new password you want to change in the two <b>New Password</b> and <b>Confirm Password</b> fields.
										<br>
										Finally, press <b>SAVE CHANGES</b> to save the password.
										<br>
										<img src="images/app-password.png" class="special-img-iphone">
									</li>
								</ul>
								
							</div>


							<div id="docs-userguide-mobile-parent" class="docs-content-inner page-section">

								<h2>For Parents</h2>
								
							</div>
							
							
							<div id="docs-userguide-mobile-absence" class="docs-content-inner page-section">

								<h3>1/ Requesting Leave for the Child</h3>
								<p></p>
								<ul>
								  <li class="special-li"><span class="special-span">Step 1:</span> 
									<br>
									On the <b>Home screen</b> of the app, select <b>Request Leave</b>.
									<br>
									<img src="images/app-parent-home.png" class="special-img-iphone">
								  </li>
								  <li class="special-li"><span class="special-span">Step 2:</span> Fill in the leave request information. 
									<br>
									Parents will enter the leave details for their child, including the <b>duration</b> and <b>reason</b>.
									<br>
									Finally, click <b>SEND</b> to submit the leave request to the teacher.
									<br>
									<img src="images/app-parent-xinnghi.png" class="special-img-iphone">
								  </li>
								</ul>								
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-foods" class="docs-content-inner page-section">

								<h3>2/ Viewing the Menu</h3>
								
								<ul>
								  <li class="special-li"><span class="special-span">Step 1:</span> 
									<br>
									On the <b>Home screen</b> of the app, select <b>Menu</b>.
									<br>
									<img src="images/app-parent-home2.png" class="special-img-iphone">
								  </li>
								  <li class="special-li"><span class="special-span">Step 2:</span> 
									<br>
									Parents can view the menu for each meal of the day for their child. They can also review past menus from previous days, helping parents monitor their child's nutrition at school.
									<br>
									<img src="images/app-parent-foods.png" class="special-img-iphone">
								  </li>
								</ul>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-fee" class="docs-content-inner page-section">

								<h3>3/ Checking Tuition Fee</h3>
								<ul>
								  <li class="special-li"><span class="special-span">Step 1:</span> 
									<br>
									On the <b>Home screen</b> of the app, select <b>Tuition Fee</b>.
									<br>
									<img src="images/app-parent-home3.png" class="special-img-iphone">
								  </li>
								  <p>Currently updating.</p>
								</ul>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-payment" class="docs-content-inner page-section">

								<h3>4/ Tuition Fee Payment</h3>
								<p>Updating.</p>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-follow" class="docs-content-inner page-section">

								<h3>5/ Following Children's Activities</h3>
								<ul>
								  <li class="special-li">On the <b>Home screen</b> of the app, select <b>Follow</b>.
									<br>
									<img src="images/app-parent-home5.png" class="special-img-iphone">
								  </li>
								  <li class="special-li">Parents can track the time when their child enters/exits the classroom.
									<br>
									<img src="images/app-parent-follow.png" class="special-img-iphone">
								  </li>
								</ul>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-parent-messengers" class="docs-content-inner page-section">

								<h3>6/ Online Exchange with Teachers</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1: </span>
										On the <b>Home screen</b> of the app, select the <b>Messages</b> section at the bottom.
										<br>
										<img src="images/app-parent-home.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 2: </span>
										Here, choose the conversation you want to engage in.
										<br>
										<img src="images/app-parent-messengers1.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 3: </span>
										In the chat interface, enter the content you want to discuss in the <b>Input message</b> section and can send images or attached files.
										<br>
										Finally, select the green arrow to send your message.
										<br>
										<img src="images/app-parent-messengers2.png" class="special-img-iphone">
									</li>
								</ul>
							</div>
							

							<div class="line"></div>

							<div id="docs-userguide-mobile-teacher" class="docs-content-inner page-section">

								<h2>For Teachers</h2>
								
							</div>
							
							
							<div id="docs-userguide-mobile-schedule" class="docs-content-inner page-section">

								<h3>1/ View Class Schedule</h3>
								<p>With the Kindie app, teachers can view the class schedule for the assigned teaching class and easily check them through the application.</p>
								<ul>
								  <li class="special-li">On the home screen, select the class you want to check the schedule for. Tap on <b>Class Schedule</b>.
									<br>
									<img src="images/app-gv-home1.png" class="special-img-iphone">
								  </li>
								  <li class="special-li">Teachers can view the weekly class schedule with specific time slots and activities.
									<br>
									<img src="images/app-parent-schedule.png" class="special-img-iphone">
								  </li>
								</ul>
								<p></p>
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-attendance" class="docs-content-inner page-section">

								<h3>2/ Attendance</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1: </span>Select the class for attendance
										<br>
										On the Home screen, Teachers should choose the class they want to take attendance for.
										<br>
										Tap on <b>Attendance</b>.
										<br>
										<img src="images/app-teacher-home2.png" class="special-img-iphone">
									</li>									
									<li class="special-li"><span class="special-span">Step 2: </span>Take Attendance
										<ul>											
											<li>Take <b>attendance for arrival</b></li>
												<br>
												In the "In" section, enable the function to confirm that students have arrived in class.
												<br>
												Then confirm who brought the student to class (parent/driver) and select <b>Update</b>.
												<br>
												<img src="images/app-teacher-attendance-in1.png" class="special-img-iphone">												
												<img src="images/app-teacher-attendance-in2.png" class="special-img-iphone">
												<br>
												Finally, select <b>SEND NOTIFICATION</b> to send the attendance notification.
												<br>
												<img src="images/app-teacher-attendance-in3.png" class="special-img-iphone">												
											</li>
											<li>Take <b>attendance for leaving</b></li>
												<br>
												In the "Out" section, enable the function to confirm that students have left class.
												<br>
												Then confirm who picked up the student (parent/driver), add additional notes in the <b>Note</b> section (if any), and select <b>Update</b>.
												<br>
												<img src="images/app-teacher-attendance-out1.png" class="special-img-iphone">												
												<img src="images/app-teacher-attendance-out2.png" class="special-img-iphone">
												<br>
												Finally, select <b>SEND NOTIFICATION</b> to send the attendance notification.
												<br>
												<img src="images/app-teacher-attendance-out3.png" class="special-img-iphone">												
											</li>
										</ul>									
									</li>
								</ul>	
							</div>
							
							<div class="line"></div>

							<div id="docs-userguide-mobile-teacher-messengers" class="docs-content-inner page-section">

								<h3>3/ Online Communication</h3>
								<ul>
									<li class="special-li"><span class="special-span">Step 1: </span>
										On the <b>Home screen</b> of the app, select the <b>Messages</b> section at the bottom.
										<br>
										<img src="images/app-teacher-home4.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 2: </span>
										Choose the Class you want to communicate with.
										<br>
										<img src="images/app-teacher-messengers.png" class="special-img-iphone">
										<img src="images/app-teacher-messengers1.png" class="special-img-iphone">
										<br>
										After selecting the class, Teachers will receive a corresponding list of conversations for that class.
										<br>
										Teachers can also view information about the conversations in the contact section and choose the conversation they want to discuss.
										<br>
										<img src="images/app-contact1.png" class="special-img-iphone">
										<img src="images/app-contact2.png" class="special-img-iphone">
									</li>
									<li class="special-li"><span class="special-span">Step 3: </span>
										In the chat interface, enter the content you want to discuss in the <b>Input message</b> section and can send images or attached files.
										<br>
										Finally, select the green arrow to send your message as a Teacher.
										<br>
										<img src="images/app-teacher-messengers2.png" class="special-img-iphone">
									</li>
								</ul>
							</div>

							<div class="line"></div>

							<div id="docs-userguide-mobile-medical" class="docs-content-inner page-section">

								<h3>4/ View student health information</h3>
								<ul>
								  <li class="special-li"><span class="special-span">Step 1:</span> Select the class to view information
									<br>
									On the home screen, choose the class for which you want to view information.
									<br>
									Tap on <b>Health</b>.
									<br>
									<img src="images/app-teacher-home3.png" class="special-img-iphone">
								  </li>
								  <li class="special-li"><span class="special-span">Step 2:</span> Choose the student to view information
									<br>
									Select the student whose health information you want to view.
									<br>
									<img src="images/app-student.png" class="special-img-iphone">
									<br>
									With the information provided by the system, teachers can have an overview of students' health status to plan and organize suitable activities.
									<br>
									<img src="images/app-medical1.png" class="special-img-iphone">
									<img src="images/app-medical2.png" class="special-img-iphone">
								  </li>
								</ul>								
							</div>
							<div class="line"></div>

							<div id="docs-userguide-mobile-medias" class="docs-content-inner page-section">

								<h3>5/ Centralized Media Management</h3>
								<ul>
									<li class="special-li">								
										On the Home screen, Teachers should select the <b>Notification</b> section in the bottom right corner of the screen.
										<br>
										<img src="images/app-teacher-home5.png" class="special-img-iphone">
									</li>
									<li class="special-li">
										Teachers can interact by liking and commenting on the content.
										<br>
										<img src="images/app-medias.png" class="special-img-iphone">									
										<img src="images/app-medias2.png" class="special-img-iphone">
									</li>
								</ul>
							
							</div>						
							
							<div class="line"></div>
							
							<div id="docs-userguide-mobile-driver" class="docs-content-inner page-section">

								<h2>For Drivers</h2>
								
							</div>
							
							
							<div id="docs-userguide-mobile-shuttle" class="docs-content-inner page-section">

								<h3>Attendance and Status Update When Transporting Students</h3>
							
								<ul>											
									<li class="special-li"><span class="special-span">Check-in at School</span>
										<br>
										In the "In" section, turn on the function to confirm that the student has arrived at school.
										<br>
										Then confirm the person who brought the student to school (parent/driver) and select <b>Update</b>.
										<br>
										<img src="images/app-driver-in1.png" class="special-img-iphone">												
										<img src="images/app-teacher-attendance-in2.png" class="special-img-iphone">
										<br>
										Finally, select <b>SEND NOTIFICATION</b> to send a confirmation notification that the student has been picked up.
										<br>
										<img src="images/app-driver-in3.png" class="special-img-iphone">												
									</li>
									<li class="special-li"><span class="special-span">Check-out from School</span>
										<br>
										In the "Out" section, turn on the function to confirm that the student has left school.
										<br>
										Then confirm the person picking up the student at home, you can add a note in the <b>Note</b> section (if any), and select <b>Update</b>.
										<br>
										<img src="images/app-driver-out1.png" class="special-img-iphone">												
										<img src="images/app-teacher-attendance-out2.png" class="special-img-iphone">
										<br>
										Finally, select <b>SEND NOTIFICATION</b> to send a notification that the student has arrived home.
										<br>
										<img src="images/app-driver-out3.png" class="special-img-iphone">												
									</li>
								</ul>
							</div>
							
						
						</div>
						<!-- END HUONG DAN SU DUNG -->
						
					</div>




				</div>

				<script>
					jQuery(document).ready( function($){

						$( "#docs" ).tabs({
							show: { effect: "fade", duration: 400 },
							activate:function(event,ui){
								$('html,body').stop(true).animate({
									'scrollTop': $('.docs-content').offset().top - 40
								}, 1250, 'easeInOutExpo');
							}
						});

						$('#icons-filter').typing({
							stop: function (event, $elem) {
								var filterValue = $elem.val(),
									count = 0;

								if( $elem.val() ) {

									$(".docs-icons li").each(function(){
										if ($(this).text().search(new RegExp(filterValue, "i")) < 0) {
											$(this).fadeOut();
										} else {
											$(this).show();
											count++
										}
									});

									if( count > 0 ) {
										$('#icons-filter-result').html('<strong>' + count + '</strong> Icons Found.');
									} else {
										$('#icons-filter-result').html('No Icons Found.');
									}

								} else {
									$(".docs-icons li").show();
									$('#icons-filter-result').html('');
								}

								count = 0;
							},
							delay: 500
						});

					});
				</script>

			</div>

		</section><!-- #content end -->

	</div><!-- #wrapper end -->

	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="icon-angle-up"></div>

	<!-- Footer Scripts
	============================================= -->
	<script type="text/javascript" src="js/functions.js"></script>

</body>
</html>

Youez - 2016 - github.com/yon3zu
LinuXploit