Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Print Certificate</title>
	<meta charset="UTF-8">
	<meta name="view-port" content="initial-scale=1.0 width=device-width"/>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<style type="text/css">
		.right{
			min-height:70vh;
			}
	</style>
	<script src="js/print.js" type="text/javascript"></script>

</head>
<body onload="loadHim();">
<!--navigation header-->
	<div class="header">
		<nav>
			<ul>
				<li><a href='index.html'>My School Online Results</a></li></a></li>
				<li class='menu_left'>
					<div class="form">
						<input type="button" value="Print Certificate" class="button" onclick="printPage();"/>
					</div>
				</li>
			</ul>
		</nav>
	</div>
	<!--page body-->
	<div class="body">
		<div class="page-content">
			<div class="left">
				<div class="mPic">
					<h3>New record</h3>
					<div class="form">
						<input type="button" value="New student" class="button" onclick="openModal();"/>
					</div>

					<!-- new record form -->
					<div id="newStudent" class="newStudent">
					  <!-- content -->
					  <div class="studentContent">
					    <span class="close">&times;</span>
					    <p style="text-align:center;">New Student</p>
					    <form class="form">
					    	<table border="0" width="100%">
					    		<tr>
					    			<td><input type="text" class="text" id="s_name" placeholder="Full Name"  required/></td>
					    			<td><input type="text" class="text" id="s_id" placeholder="Student Id"  required/></td>
					    			<td><input type="text" class="text" id="s_gender" placeholder="Gender"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" class="text" id="s_one" placeholder="Subject one" required/></td>
					    			<td><input type="text" class="text" id="g_one" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" class="text" id="s_two" placeholder="Subject Two" required/></td>
					    			<td><input type="text" class="text" id="g_two" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" id="s_three" class="text" placeholder="Subject Three" required/></td>
					    			<td><input type="text" class="text" id="g_three" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" id="s_four" class="text" placeholder="Subject Four" required/></td>
					    			<td><input type="text" class="text" id="g_four" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" id="s_five" class="text" placeholder="Subject Five" required/></td>
					    			<td><input type="text" class="text" id="g_five" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<td colspan="2"><input type="text" id="s_six" class="text" placeholder="Subject Six" required/></td>
					    			<td><input type="text" class="text" id="g_six" placeholder="Grade"  required/></td>
					    		</tr>
					    		<tr>
					    			<th>Teacher's comments</th>
					    			<td colspan="2">
					    				<textarea type="text" class="text" id="t_comments" required></textarea>
					    			</td>
					    		</tr>
					    		<tr>
					    			<td>
					    				<input type="reset" value="Reset" class="button"/>
					    			</td>
					    			<td>
					    				<input type="button" value="Submit" class="button" onclick="loadStudent();"/>
					    			</td>
					    		</tr>

					    	</table>

					    </form>
					  </div>

					</div>

				</div>
			</div>
			<div class="right">
				<h3>Student Certificate</h3>
				<div class="dtails" id="dtails">
					<div class="printArea" id="printArea">
						<div class="s_logo">
							<img src="images/school_logo.png" width="60px" height="60px"/><br/>
							<h3>My School</h3>
						</div>
						<div class="student">
							<img src="images/student.png" width="40px" height="40px">
							<div class="kyc">
								Name:   <span id="std_name">John Doe</span><br/>
								Gender: <span id="std_gender">M</span></br>
								ID:     <span id="std_id">00000000</span> <br/>
							</div>
						</div>

						<div class="grades">
							<table border="1" width="100%">
								<tr>
									<th colspan="3" style="text-align:center;">
										Subjects Taken
									</th>
								</tr>
								<tr>
									<th>Subject No.</th>
									<th>Subject Name</th>
									<th>Grade</th>
								</tr>
								<tr>
									<td>1</td>
									<td id="subject_1">Subject one</td>
									<td id="1">0</td>
								</tr>
								<tr>
									<td>2</td>
									<td id="subject_2">Subject Two</td>
									<td id="2">0</td>
								</tr>
								<tr>
									<td>3</td>
									<td id="subject_3">Subject Three</td>
									<td id="3">0</td>
								</tr>
								<tr>
									<td>4</td>
									<td id="subject_4">Subject Four</td>
									<td id="4">0</td>
								</tr>
								<tr>
									<td>5</td>
									<td id="subject_5">Subject Five</td>
									<td id="5">0</td>
								</tr>
								<tr>
									<td>6</td>
									<td id="subject_6">Subject Six</td>
									<td id="6">0</td>
								</tr>
							</table>
							<h4>Average Grade</h4>
							<p id="average">

							</p>
						</div>

						<div class="comments">
							<h3>Teachers Comments</h3>
							<span id="comments">
								click add new student
							</span>
							<h4>Teacher's Signature</h4>
							<img src="images/teacher.png" width="100px" height="30px">
							<h4>Principal's Signature</h4>
							<img src="images/principal.png" width="100px" height="30px">
						</div>
						<div class="p_footer">
							<div class="footer-item">
								My School. Reach us on email: no9o@yahoo.com or tel : +972586180834
							</div>
						</div>


					</div>

				</div>
				<div class="form">
					<input type="button" value="Print Certificate" class="button" onclick="printPage();"/>
				</div>
			</div>
		</div>
		<footer>
			<div class="footer-item">
				Copyrights are reserved to Aloushberg &copy 2017
			</div>
		</footer>
	</div>

</body>
</html>