<!DOCTYPE html>
<html lang="hu">

<head>
	<title>Locsoló automatika</title>
	<link rel="icon" type="image/x-icon" href="favicon.png">
	<meta name="viewport" content="width=device-width, initial-scale=1", charset="utf-8">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet" href="font-awesome.min.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="highcharts.js"></script>
	<script type="text/javascript" src="main.js"></script>
<!--	<script type="text/javascript" src="irr.js"></script>-->

</head>

	






<body>

<nav>

	<ul>
		<li data-rel="1"  class="active"><a href="#"><i class="fa fa-fw fa-home"></i>Főmenü</a></li>
		<li data-rel="2"><a href="#"><i class="fa fa-fw fa-wrench"></i>Beállítások</a></li> 
		<li data-rel="3"><a href="#"><i class="fa fa-fw fa-hand-o-left"></i>Kézi üzem</a></li>
		<li data-rel="4"><a href="#"><i class="fa fa-fw fa-hand-o-up"></i>Teszt üzem</a></li>
		<li data-rel="5"><a href="#"><i class="fa fa-fw fa-info-circle"></i>Info</a></li>
	</ul>
	<div class="spacer"></div>
	<ul>	
		<table>
	
		<colgroup>
			<col span="1" style="width: 50%;">
			<col span="2" style="width: 50%;">
		</colgroup>
		<tbody>
			<tr>
				<th id="ESP_Date">Dátum: 2021.06.18</th>
				<th id="ESP_Time">Idő: 22:33:15</th>
			</tr>  
		</tbody>
	</table>
	</ul>
	
	
</nav>

<div class="wrapper" sytle="left:10px">

<!-- Főmenü -->
<section>
	
    <article>
       <h2>Vízszint</h2>
	   <div class="gaugecont">
			<div class="scalenum__body">
				<div id="scalenum_container" >
					<div class="text_container" id="needle" style="transform: rotate(-90deg)">
						<div class="inline_scale" id="otn">&#x25BC</div>
						<div class="inline_scale" id="itn">&#x25B2</div>
					</div>
				</div>
			</div>
			<div class="gauge" id="Water_level">
				<div class="gauge__body">
			<div id="scale_container" >
			</div>
				<div class="o_circle"></div>
				<div class="i_circle"></div>
					<div class="gauge__fill">
						

					</div>

					<div class="gauge__cover"></div>
					<div class="gauge__box">	
						<div id="gauge_box1">[%]</div>
						<div id="gauge_box2">[m]</div>
					</div>	


				</div>
			
		</div>
		</div>
		<div></div>
		
	   
<!-- Főmenü/inaktív -->
		<div id="irr_idle" hidden>

			<div><h2>Locsolási info</h2></div>
			<div style="overflow-x:auto;">
				<table>
					<colgroup>
						<col span="1" style="width: 50%;">
						<col span="2" style="width: 50%;">
					</colgroup>
	
					<tbody>
						<tr>
							<th>Locsolás kezdete</th>
							<th style="text-align:center"class="times" id="Start_time">-- óra -- perc</th>
						</tr> 
					</tbody>
				</table>
			</div>
		</div>


<!-- Főmenü/aktív -->
		<div id="irr_active">
	
			<div><h2>Vízfogyás</h2></div>

			<div id="chart-water" class="container" style= "max-width: 500px; height:250px;"></div>
			<div class="spacer"></div>

			<div><h2>Locsolási info</h2></div>
			<div style="overflow-x:auto;">
				<table>
				
					<colgroup>
						<col span="1" style="width: 50%;">
						<col span="2" style="width: 50%;">
					</colgroup>
	
					<tbody>
						<tr>
							<th>Aktív kör</th>
							<th style="text-align:center"class="times" id="Active_zone">xxx</th>
						</tr> 
						<tr>
							<th>Eltelt idő</th>
							<th style="text-align:center"class="times" id="Elapsed_time">-- perc</th>
						</tr> 
						<tr>
							<th>Hátralévő idő</th>
							<th style="text-align:center"class="times" id="Remaining_time">-- perc</th>
						</tr> 
						<tr>
							<th>Kút állapot</th>
							<th style="text-align:center"class="times" id="Water_state">szívattyúzás</th>
						</tr> 
						<tr>
							<th>Szivattyú</th>
							<th style="text-align:center">
								<div class="led-box">
									<div id="pump_led" class="led-off"></div>
								</div>	
							</th>
						</tr> 
						<tr>
							<th>Vízszelep</th>
							<th style="text-align:center"> 
								<div class="led-box">
									<div id="valve_led" class="led-off" ></div>
								</div>	
							</th>
						</tr> 
					</tbody>
				</table>

			</div>
		</div>
	   
    </article>
 </section>



<!-- Beállítások -->
<section>
    <article>
	
		<h2>Locsolási folyamat</h2>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Locsolás engedélyezve</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="Enable_irr" >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
	</tbody>
</table>
</div>


<div><h2>Aktív körök</h2></div>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Első rész</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox"  class="seqon" id="Enable_front"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr> 
			<tr>
        	<th>Középső rész</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="Enable_middle"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
			<tr>
        	<th>Hátsó rész</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="Enable_back"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
			
    	</tr>  
	</tbody>
</table>
</div>


<div><h2>Szűrőtisztítás</h2></div>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Homokleválasztó</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="Enable_sandclean"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr> 
			<tr>
        	<th>Finomszűrő</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="Enable_filterclean"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
					
    	</tr>  
	</tbody>
</table>
</div>


<div><h2>Aktív napok</h2></div>

<div style="overflow-x:auto;">
<table>
	<colgroup>
		<col span="1" style="width: 75%;">
        <col span="2" align="center" style="width: 25%;">
    </colgroup>
	<tbody>
    		
    
		<tr>
        	<th>Hétfő</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_mon"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
    	<tr>
        	<th>Kedd</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_tue"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>
        <tr>
        	<th>Szerda</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_wed"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
        <tr>
        	<th>Csütörtök</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_thu"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
        <tr>
        	<th>Péntek</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_fri"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
        <tr>
        	<th>Szombat</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_sat"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
        <tr>
        	<th>Vasárnap</th>
			<th style="text-align:center">
        		<label class="switch">
  					<input type="checkbox" class="seqon" id="enable_sun"  >
  					<span class="slider round"></span>
	        	</label>
    		</th>
    	</tr>  
	</tbody>    
</table>

<div><h2>Locsolás kezdete</h2></div>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Locsolás indítása</th>
			<th style="text-align:center">
        		<input class="intervall" type="time" id="time_irr" name="time_irr">
    		</th>
    	</tr>  
	</tbody>
</table>
</div>

<div><h2>Locsolási intervallum</h2></div>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Első rész</th>
			<th style="text-align:center">
        		<input class="intervall" type="number" id="intervall_front" name="intervall_front" size="2" min="1" max="60"> perc
    		</th>
    	</tr> 
			<tr>
        	<th>Középső rész</th>
			<th style="text-align:center">
        		<input class="intervall" type="number" id="intervall_middle" name="intervall_middle" size="2" min="1" max="60"> perc
				
    		</th>
			<tr>
        	<th>Hátsó rész</th>
			<th style="text-align:center">
        		<input class="intervall" type="number" id="intervall_back" name="intervall_back" size="2" min="1" max="60"> perc
    		</th>
    	</tr>  
			
    	</tr>  
	</tbody>
</table>
</div>

<div><h2>Tisztítási intervallum</h2></div>
<div style="overflow-x:auto;">
<table>
	<colgroup>
        <col span="1" style="width: 75%;">
        <col span="2" style="width: 25%;">
    </colgroup>
	<tbody>
   		<tr>
        	<th>Homokleválasztó</th>
			<th style="text-align:center">
        		<input class="intervall" type="number" id="intervall_sand" name="intervall_sand" size="2" min="1" max="60"> perc
    		</th>
    	</tr> 
			<tr>
        	<th>Finomszűrő</th>
			<th style="text-align:center">
        		<input class="intervall" type="number" id="intervall_filter" name="intervall_filter" size="2" min="1" max="60"> perc
    		</th>
					
    	</tr>  
	</tbody>
</table>
</div>
</div>
   </article>
  </section>

<!-- Kézi üzem -->
<section>
    <article>
       <div><h2>Folyamat indítása</h2></div>
		<div class="btnframe">
		<button class="button startbtn" onclick="btnclick(this)" id="man_start">START</button>
		<button class="button stopbtn"  onclick="btnclick(this)" id="man_stop">STOP</button>
		</div>
    </article>
  </section>

<!-- Teszt üzem -->
<section>
    <article>
       <div><h2>Aktív körök</h2></div>
		<div style="overflow-x:auto;">
			<table>
				<colgroup>
					<col span="1" style="width: 75%;">
					<col span="2" style="width: 25%;">
				</colgroup>
				<tbody>
					<tr>
						<th>Első rész</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_front">
								<span class="slider round"></span>
							</label>
						</th>
					</tr> 
						<tr>
						<th>Középső rész</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_middle">
								<span class="slider round"></span>
							</label>
						</th>
						<tr>
						<th>Hátsó rész</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_back">
								<span class="slider round"></span>
							</label>
						</th>
					</tr>  
					<tr>
						<th>Homokleválasztó</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_sandclean">
								<span class="slider round"></span>
							</label>
						</th>
					</tr> 
						<tr>
						<th>Finomszűrő</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_filterclean">
								<span class="slider round"></span>
							</label>
						</th>
								
					</tr>  	
					  
				</tbody>
			</table>	
		</div>
		<div><h2>Locsolási intervallum</h2></div>
		<div style="overflow-x:auto;">
			<table>
				<colgroup>
					<col span="1" style="width: 75%;">
					<col span="2" style="width: 25%;">
				</colgroup>
				<tbody>
					<tr>
						<th>Időkorlát engedélyezve</th>
						<th style="text-align:center">
							<label class="switch">
								<input type="checkbox" class="seqon" id="test_timer"  >
								<span class="slider round"></span>
							</label>
						</th>
					</tr>  
					<tr>
						<th>Időkorlát</th>
						<th style="text-align:center">
							<input class="intervall" type="number" id="test_intervall" name="test_intervall" size="2" min="1" max="60"> perc
						</th>
					</tr>  
						
					</tr>  
				</tbody>
			</table>
		</div>
		
		<div class="spacer"></div>
		<div class="spacer"></div>
		<div><h2>Indítás</h2></div>
		<div class="btnframe">
			<button class="button startbtn" onclick="btnclick(this)" id="test_start">START</button>
			<button class="button stopbtn" onclick="btnclick(this)" id="test_stop">STOP</button>
		</div>
    </article>
  </section>

<!-- Info -->
<section>
    <article>
       <div><h2>Készítette:</h2></div>
	   <div><h3>Ruskovics család</h3></div>

<div><h3>Version 1.3</h3></div>

<div><h3>Utolsó frissítés: 2022.07.31</h3></div>

    </article>
  </section>
</div>

	</body>
</html> 

<script>



</script>







Here is a html code for an irrigation website, create a css file for it.