<!-- Index.html file -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href="sim.css">
	<script src="webdata.js"></script>
    <title>Simulation portal | Mechatronics for the resolute
    </title>
</head>

<body onload="myFunction()">



<!-------------------------------Encryption-start----------------------------------->

<!-------------------------------Encryption-start----------------------------------->


<div class="flex-container">
<!-------------------------------Header-start----------------------------------->
    <!--<div class="containerA">	-->
		<a>
		<img src="imgs/header.png" class="header" style="width: 100%; alt=""/>
		</a> <br> <br> <br> <br> <br>
	<!--	</div> -->
<!-------------------------------Header-end------------------------------------->


<!-----------------------------Menu-start--------------------------------------->
	<div class="topics">
		<!--menu icon-->
		<!--<div class="header2">	-->	
		<div  class="container" onclick= "myFunction(this); HideFunc()">
		<div class="bar1"></div>
		<div class="bar2"></div>
		<div class="bar3"></div>
		</div>
		
		<!--menu-->
		<div id="myDIV"class="btn-group">
		<a 
		href="Lect.html" style= "text-decoration: none;">
		<button>Lectures</button> </a>
		<a 
		href="#" style="text-decoration: none;">
		<button align="left" >&nbspTutorials</button> </a>
		<a 
		href="game.html" style="text-decoration: none;">
		<button align="left" >Educational&nbspgames</button> </a>
		
				<a 
		href="readme.txt" style="text-decoration: none;">
		<button>Manual</button> </a>
		
		<a 
		href="books.html" style="text-decoration: none;">
		<button>Submit&nbspa&nbspreview</button> </a>

		<a 
		href="Cont.html" style="text-decoration: none;">
		<button>Contact&nbspus</button> </a>
		</div></div>

	<script> 
	
		<!--js code for menu icon-->
	 function myFunction(x) {
			x.classList.toggle("change");
		}
	
	
		<!--js code for hiding menu-->
		function HideFunc() {
			var y =
			document.getElementById("myDIV");
			if (y.style.display == "block") {
			y.style.display = "none";
			} else {
			y.style.display = "block";
			}
			}</script>

<!-----------------------------menu-end------------------------------------------->

<!-------------------------------Heading-start------------------------------------>
    <!--<div class="containerA">	-->
		<a>
		<img src="imgs/heading.svg" style="width: 100%; alt=""/>
		</a>
	<!--	</div> -->
<!-------------------------------Heading-end-------------------------------------->



<!-----------------------------Chapter array-start-------------------------------->
	<div class="chapters">
	

<!--Chapter 1-->
<div class="containerX">
  <img src="imgs/chap1.jpg" alt="chapter 1" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Introduction</b></button>
	<div class="dropdown-content">
	</div>
	</div> 
  </div>
 </div>
 
 <!--Chapter 2-->
<div class="containerX">
  <img src="imgs/chap2.jpg" alt="chapter 2" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Mechanics</b></button>
	<div class="dropdown-content">
    <a href="anim/1factory.mp4.html">Factory page.13</a>
    <a href="anim/2drillPress.html">Drill press page.19</a>
    <a href="anim/3LandingGear.html">Landing gear page.27</a>
    <a href="anim/4PressureSequence.html">Pressure sequence page.28</a>
    <a href="anim/5Roller.html">Roller lever page.29</a>
	</div>
	</div> 
  </div>
 </div>
 
  <!--Chapter 3-->
<div class="containerX">
  <img src="imgs/chap3.jpg" alt="chapter 3" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Electrical power technology</b></button>
	<div class="dropdown-content">
    <a href="anim/6LightBulb.html">Alternating current page.35</a>
    <a href="anim/7hoist.html">Hoist page.44</a>
    <a href="anim/8forwnRev.html">Forward reverse page.?</a>
    <a href="anim/9softStart.html">Soft start page.50</a>
	</div>
	</div> 
  </div>
 </div>

  <!--Chapter 4-->
<div class="containerX">
  <img src="imgs/chap4.jpg" alt="chapter 4" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Electrical control circuits</b></button>
	<div class="dropdown-content">
    <a href="anim/11xOr.html">OR Logic gate page.59</a>
    <a href="anim/11xOr.html">Exlcusive OR gate page.62</a>
    <a href="anim/12SR.html">Set reset logic gate page.63</a>
    <a href="anim/13wing.html">Aircraft wing page.59</a>
    <a href="#">Electro-pneumatic page.66</a>
    <a href="anim/14TwoPumpControl.html">Two pump control page.70</a>
    <a href="anim/15Chart3motor.pdf">Three motor control worksheet page.78</a>
    <a href="anim/16ChartPLC.pdf">PLC worksheet page.80</a>
	</div>
	</div> 
  </div>
 </div>
 
   <!--Chapter 5-->
<div class="containerX">
  <img src="imgs/chap5.jpg" alt="chapter 5" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Electronics</b></button>
	<div class="dropdown-content">
    <a href="anim/17Bridgerectifier.html">Bridge rectifier page.84</a>
    <a href="anim/18Transistor.html">Transistor page.86</a>
	</div>
	</div> 
  </div>
 </div>
 
 
   <!--Chapter 6-->
<div class="containerX">
  <img src="imgs/chap6.jpg" alt="chapter 6" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Programmable Logic Controller</b></button>
	<div class="dropdown-content">
    <a href="anim/19Ladderlogic.html">Ladder logic page.104</a>
    <a href="anim/20SFC.html">Sequencial function chart page.106</a>
    <a href="anim/21FBD.html">Function block diagram page.108</a>
    <a href="anim/23Structure text.html">Structure text gate page.110</a>
    <a href="anim/24VesselPackaging.html">Vessel packaging page.113</a>
    <a href="anim/25RimSorting.html">Rim sorting.114</a>
	</div>
	</div> 
  </div>
 </div>
 
 
   <!--Chapter 7-->
<div class="containerX">
  <img src="imgs/chap7.jpg" alt="chapter 7" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Networking</b></button>
	<div class="dropdown-content">
	</div>
	</div> 
  </div>
 </div>
 
 
   <!--Chapter 8-->
<div class="containerX">
  <img src="imgs/chap8.jpg" alt="chapter 8" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Computer Science</b></button>
	<div class="dropdown-content">
	</div>
	</div> 
  </div>
 </div>
 
    <!--Chapter 9-->
<div class="containerX">
  <img src="imgs/chap9.jpg" alt="chapter 9" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Robotics</b></button>
	<div class="dropdown-content">
    <a href="anim/26RobotArm.html">Robot programming page.128</a>
	</div>
	</div> 
  </div>
 </div>


   <!--Chapter 10-->
<div class="containerX">
  <img src="imgs/chap10.jpg" alt="chapter 10" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Design projects</b></button>
	<div class="dropdown-content">
    <a href="anim/27HydraulicPress.html">Hydraulic press page.135</a>
    <a href="anim/27HydraulicPress3d.html">Hydraulic press 3D page.135</a>
    <a href="anim/28PneumaticRobot.html">Electro-pneumatic robot page.139</a>
    <a href="anim/29hoist.html">Hoist page.145</a>
	</div>
	</div> 
  </div>
 </div>
 
 
   <!--Solutions-->
<div class="containerX">
  <img src="imgs/chap11.jpg" alt="Solutions" class="image">
  <div class="overlay">

	<div class="dropdown">
	<button class="dropbtn"><b>Answers</b></button>
	<div class="dropdown-content">
    <a href="anim/30ExSol223Brake.html">Brake page.153</a>
    <a href="anim/31ExSol224Doorlock.html">Door lock page.153</a>
    <a href="anim/32ExSol225Clamppress.html">Clamp press page.154</a>
    <a href="#">Soft starter page.158</a>
    <a href="#">Soft start control circuit page.163</a>
    <a href="#">Three motor aswer poster page.164</a>
    <a href="#">PLC answer sheet page.165</a>
	</div>
	</div> 
  </div>
 </div>

		
</div>
<!-----------------------------chapter array-end--------------------------------->




<!-----------------------------Footer-start-------------------------------------->
<div class="footer">
		<a href="https://x.com/t_mokgohloa?t=hbs9I2tF2RpsSafU55GXnQ&s=08">
		<img src="imgs/X.png" style="width: 2%;" alt=""/>
		</a>
		
		<a href="https://www.facebook.com/profile.php?id=61557402093549">
		<img src="imgs/F.png"  style="width: 2%;" alt=""/>
		</a>
		
		<a href="https://www.youtube.com/channel/UCMKg1zoNrx3ehQ0CJvdKETw">
		<img src="imgs/yb.png"  style="width: 3%;" alt=""/>
		</a>
		
		<div class="footext">			
		<footer><a>
		©COPYRIGHT 2024 TLOU TRESSURE MOKGOHLOA. ALL RIGHTS RESERVED.
		</a></footer></div>	
</div> 
<!----------------------------------footer-end----------------------------------->

</div> 


</body>

</html>
