<!-- ____________________________________________________ -->
<!-- ____________________________¶_______________________ -->
<!-- ___________________________¶¶¶______________________ -->
<!-- ___________________________¶¶¶¶_____________________ -->
<!-- ________________________¶¶¶¶¶¶¶¶¶___________________ -->
<!-- _______________________¶¶¶¶¶¶¶¶¶¶¶__________________ -->
<!-- ___________________________¶¶¶______________________ -->
<!-- ____________________________¶¶______________________ -->
<!-- ___________________¶¶¶¶¶¶¶____¶¶¶¶¶¶________________ -->
<!-- _______________¶¶¶¶¶¶¶¶¶¶¶¶¶¶_______¶¶______________ -->
<!-- _____________¶¶____¶¶¶¶¶¶¶¶¶¶¶¶¶_____¶______________ -->
<!-- ___________¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶___¶______________ -->
<!-- __________¶¶____________¶¶¶¶¶¶¶¶¶¶¶_¶¶______________ -->
<!-- _________¶¶¶_____________¶¶¶¶¶¶¶¶¶¶¶¶_______________ -->
<!-- _________¶¶¶_______________¶¶¶¶¶¶¶¶¶________________ -->
<!-- ________¶¶¶¶¶_______________¶¶¶¶¶¶__________________ -->
<!-- ________¶¶¶¶¶¶_______________¶¶¶¶__________¶¶¶¶¶¶___ -->
<!-- _____¶¶_¶¶¶¶¶¶¶¶______________¶¶_________¶¶¶¶¶¶¶¶¶__ -->
<!-- _____¶¶_¶¶¶¶¶¶¶¶¶¶____________¶_________¶___¶¶¶¶¶¶__ -->
<!-- _____¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶_______¶¶________¶'____¶¶¶¶___ -->
<!-- _____¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶________¶_____________ -->
<!-- _____¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_____¶¶_____________ -->
<!-- _____¶¶¶¶____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶______________ -->
<!-- _____¶¶¶¶¶____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶____________ -->
<!-- _____¶¶¶¶¶¶¶____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶________ -->
<!-- ______¶¶¶¶¶¶¶¶¶____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶______ -->
<!-- _______¶¶¶¶¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶____ -->
<!-- ________¶¶¶¶¶¶¶¶¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___ -->
<!-- _________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶______¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__ -->
<!-- __________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶______¶¶¶¶¶¶¶¶¶¶¶¶¶_ -->
<!-- ___________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶ -->
<!-- _____________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶____¶¶¶¶¶¶¶¶ -->
<!-- ________________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶¶¶¶ -->
<!-- ____________________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶¶¶ -->
<!-- _____________________¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶¶ -->
<!-- ____________________¶________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶ -->
<!-- ___________________¶________¶¶____¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶ -->
<!-- ________¶¶¶¶______¶_________¶________¶¶¶¶¶¶¶¶__¶¶¶¶¶ -->
<!-- _______¶¶¶¶¶¶___¶¶_________¶___________¶¶¶¶¶¶__¶¶¶¶_ -->
<!-- _______¶¶¶¶¶¶¶¶¶__________¶_____________¶¶¶¶__¶¶¶¶__ -->
<!-- ________¶¶¶¶¶____________¶______________¶¶¶___¶¶¶___ -->
<!-- ________________________¶_______________¶¶___¶¶¶____ -->
<!-- ___________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___________¶¶___¶¶¶_____ -->
<!-- _______¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___________¶¶_______ -->
<!-- ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_______¶_________ -->
<!-- __¶¶¶¶¶¶______¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶___¶¶__________ -->
<!-- _¶¶¶______________¶¶_¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶____________ -->
<!-- ¶¶_______________¶______¶¶¶¶¶¶¶¶¶¶¶¶¶¶______________ -->
<!-- ¶______________¶¶_________¶¶¶¶¶¶¶¶¶¶________________ -->
<!-- ¶____________¶¶___________¶_¶¶¶¶¶¶__________________ -->
<!-- ¶¶_________¶¶_____________¶___¶¶¶___________________ -->
<!-- _¶¶¶¶¶¶¶¶¶¶_______________¶____¶____________________ -->
<!-- __________________________¶_________________________ -->
<!-- __________________________¶¶________________________ -->
<!-- _________________________¶¶¶¶_______________________ -->
<!-- _________________________¶¶¶¶_______________________ -->


<!-- ░██████╗██╗███╗░░██╗██╗░░██╗░█████╗░██╗░░░░░░█████╗░ -->
<!-- ██╔════╝██║████╗░██║██║░░██║██╔══██╗██║░░░░░██╔══██╗ -->
<!-- ╚█████╗░██║██╔██╗██║███████║███████║██║░░░░░███████║ -->
<!-- ░╚═══██╗██║██║╚████║██╔══██║██╔══██║██║░░░░░██╔══██║ -->
<!-- ██████╔╝██║██║░╚███║██║░░██║██║░░██║███████╗██║░░██║ -->
<!-- ╚═════╝░╚═╝╚═╝░░╚══╝╚═╝░░╚═╝╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝ -->

<!-- ██████╗░███████╗░█████╗░██╗░░░░░░░░░░░████████╗██╗███╗░░░███╗███████╗ -->
<!-- ██╔══██╗██╔════╝██╔══██╗██║░░░░░░░░░░░╚══██╔══╝██║████╗░████║██╔════╝ -->
<!-- ██████╔╝█████╗░░███████║██║░░░░░█████╗░░░██║░░░██║██╔████╔██║█████╗░░ -->
<!-- ██╔══██╗██╔══╝░░██╔══██║██║░░░░░╚════╝░░░██║░░░██║██║╚██╔╝██║██╔══╝░░ -->
<!-- ██║░░██║███████╗██║░░██║███████╗░░░░░░░░░██║░░░██║██║░╚═╝░██║███████╗ -->
<!-- ╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝╚══════╝░░░░░░░░░╚═╝░░░╚═╝╚═╝░░░░░╚═╝╚══════╝ -->

<!-- ██╗░░░██╗███╗░░██╗██╗░█████╗░░█████╗░██████╗░███████╗  ░█████╗░███╗░░██╗██████╗░ -->
<!-- ██║░░░██║████╗░██║██║██╔══██╗██╔══██╗██╔══██╗██╔════╝  ██╔══██╗████╗░██║██╔══██╗ -->
<!-- ██║░░░██║██╔██╗██║██║██║░░╚═╝██║░░██║██║░░██║█████╗░░  ███████║██╔██╗██║██║░░██║ -->
<!-- ██║░░░██║██║╚████║██║██║░░██╗██║░░██║██║░░██║██╔══╝░░  ██╔══██║██║╚████║██║░░██║ -->
<!-- ╚██████╔╝██║░╚███║██║╚█████╔╝╚█████╔╝██████╔╝███████╗  ██║░░██║██║░╚███║██████╔╝ -->
<!-- ░╚═════╝░╚═╝░░╚══╝╚═╝░╚════╝░░╚════╝░╚═════╝░╚══════╝  ╚═╝░░╚═╝╚═╝░░╚══╝╚═════╝░ -->

<!-- ░██████╗██╗███╗░░██╗██╗░░██╗░█████╗░██╗░░░░░░█████╗░  ███████╗░█████╗░███╗░░██╗████████╗ -->
<!-- ██╔════╝██║████╗░██║██║░░██║██╔══██╗██║░░░░░██╔══██╗  ██╔════╝██╔══██╗████╗░██║╚══██╔══╝ -->
<!-- ╚█████╗░██║██╔██╗██║███████║███████║██║░░░░░███████║  █████╗░░██║░░██║██╔██╗██║░░░██║░░░ -->
<!-- ░╚═══██╗██║██║╚████║██╔══██║██╔══██║██║░░░░░██╔══██║  ██╔══╝░░██║░░██║██║╚████║░░░██║░░░ -->
<!-- ██████╔╝██║██║░╚███║██║░░██║██║░░██║███████╗██║░░██║  ██║░░░░░╚█████╔╝██║░╚███║░░░██║░░░ -->
<!-- ╚═════╝░╚═╝╚═╝░░╚══╝╚═╝░░╚═╝╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝  ╚═╝░░░░░░╚════╝░╚═╝░░╚══╝░░░╚═╝░░░ -->

<!-- ░█████╗░░█████╗░███╗░░██╗██╗░░░██╗███████╗██████╗░████████╗███████╗██████╗░ -->
<!-- ██╔══██╗██╔══██╗████╗░██║██║░░░██║██╔════╝██╔══██╗╚══██╔══╝██╔════╝██╔══██╗ -->
<!-- ██║░░╚═╝██║░░██║██╔██╗██║╚██╗░██╔╝█████╗░░██████╔╝░░░██║░░░█████╗░░██████╔╝ -->
<!-- ██║░░██╗██║░░██║██║╚████║░╚████╔╝░██╔══╝░░██╔══██╗░░░██║░░░██╔══╝░░██╔══██╗ -->
<!-- ╚█████╔╝╚█████╔╝██║░╚███║░░╚██╔╝░░███████╗██║░░██║░░░██║░░░███████╗██║░░██║ -->
<!-- ░╚════╝░░╚════╝░╚═╝░░╚══╝░░░╚═╝░░░╚══════╝╚═╝░░╚═╝░░░╚═╝░░░╚══════╝╚═╝░░╚═╝ -->


<!-- ░██████╗██╗░░██╗███████╗██╗░░░██╗░█████╗░███╗░░██╗  ░██████╗░█████╗░███╗░░██╗██╗░░██╗░█████╗░██╗░░░░░██████╗░░█████╗░ -->
<!-- ██╔════╝██║░░██║██╔════╝██║░░░██║██╔══██╗████╗░██║  ██╔════╝██╔══██╗████╗░██║██║░██╔╝██╔══██╗██║░░░░░██╔══██╗██╔══██╗ -->
<!-- ╚█████╗░███████║█████╗░░╚██╗░██╔╝██║░░██║██╔██╗██║  ╚█████╗░███████║██╔██╗██║█████═╝░███████║██║░░░░░██████╔╝███████║ -->
<!-- ░╚═══██╗██╔══██║██╔══╝░░░╚████╔╝░██║░░██║██║╚████║  ░╚═══██╗██╔══██║██║╚████║██╔═██╗░██╔══██║██║░░░░░██╔═══╝░██╔══██║ -->
<!-- ██████╔╝██║░░██║███████╗░░╚██╔╝░░╚█████╔╝██║░╚███║  ██████╔╝██║░░██║██║░╚███║██║░╚██╗██║░░██║███████╗██║░░░░░██║░░██║ -->
<!-- ╚═════╝░╚═╝░░╚═╝╚══════╝░░░╚═╝░░░░╚════╝░╚═╝░░╚══╝  ╚═════╝░╚═╝░░╚═╝╚═╝░░╚══╝╚═╝░░╚═╝╚═╝░░╚═╝╚══════╝╚═╝░░░░░╚═╝░░╚═╝ -->

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="utf-8" />
  <title>Sinhala Real-time Unicode and Sinhala Font Converter</title>
  <meta name="description" content="Sinhala Real-time Unicode and Sinhala Font Converter" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
  <meta name="theme-color" content="#594f8d" />
  <link rel="stylesheet" href="./assests/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="./assests/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="./assests/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="./assests/css/font.css" type="text/css" cache="false" />
  <link rel="stylesheet" href="./assests/css/plugin.css" type="text/css" />
  <link rel="stylesheet" href="./assests/css/app.css" type="text/css" />
  <link rel="icon" type="image/png" href="./assests/images/icon.png"/>
  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js" cache="false"></script>
    <script src="js/ie/html5.js" cache="false"></script>
    <script src="js/ie/fix.js" cache="false"></script>
  <![endif]-->
  
</head>
<body style="background-color: white !important;" onload="startTime()">
  <section class="hbox stretch">
    <!-- .aside -->
    <aside class="bg-black dker aside-sm nav-vertical" id="nav">
      <section class="vbox">
        <header class="bg-black nav-bar">
          <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav">
            <i class="fa fa-bars"></i>
          </a>
          <a href="#" class="nav-brand" data-toggle="fullscreen">෴</a>
          <a class="btn btn-link visible-xs" data-toggle="collapse" data-target=".navbar-collapse">
            <i class="fa fa-comment-o"></i>
          </a>
        </header>
        <section>
          <!-- nav -->
          <nav class="nav-primary hidden-xs">
            <ul class="nav">
              <li class="active">
                <a href="#modal-form" data-toggle="modal">
                  <i class="fa fa-language"></i>
                  <span>සුචිය</span>
                </a>
              </li>              
              
               
              <li>
                <a href="#" >
                  <i class="fa fa-language"></i>
                  <span>Fonts</span>
                </a>
              </li>
              <li>
                <a href="#modal-form1" data-toggle="modal">
                  <i class="fa fa-language"></i>
                  <span>About</span>
                </a>
              </li>
             
            </ul>
          </nav>
          <!-- / nav -->
        </section>
        <footer class="footer bg-gradient hidden-xs">
          <a href="https://google.com" class="btn btn-sm btn-link m-r-n-xs pull-right">
            <i class="fa fa-power-off"></i>
          </a>
          <a href="#nav" data-toggle="class:nav-vertical" class="btn btn-sm btn-link m-l-n-sm">
            <i class="fa fa-bars"></i>
          </a>
        </footer>
      </section>
    </aside>
    
    <section id="content">
      <section class="vbox">
        <header class="header bg-black navbar navbar-inverse">
          <div class="collapse navbar-collapse pull-in">
            <ul class="nav navbar-nav m-l-n">
              <li class="active"><a href="#"><span class="font-bold text-success" id="clock"></span> | <span class="font-bold text-success" id="date"></span></a></li>
             <li class="active"><a href="#">Sinhala Real-time Unicode and Sinhala Font Converter </a></li>
            </ul>
           
            <ul class="nav navbar-nav navbar-right">
              
              <li class="active"><a href="#">Hey <strong class="font-bold text-success" id="lblGreetings"></strong> !</a></li>
            </ul>
          </div>
        </header>
        <section class="scrollable">

          <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                        

</div>
<div class="col-lg-2"></div>
</div>
		  

<form action="save.asp" method="post" name="txtBox" id="txtBox" target="sidePane">
<br>
<textarea placeholder="Type in Singlish Here..." name="box1" rows="5" id="box1" class="form-control rounded" onkeyup="startText();startTextSf();saveLocal();" ></textarea>
<br>

<textarea placeholder="Unicode will appear Here..." readonly="" name="box2" rows="5" id="box2" class="form-control rounded"></textarea>
<br>
<textarea placeholder="Sinhala Font will appear Here..." readonly="" name="box3" rows="5" id="box3" class="form-control rounded"></textarea>


<script src="./assests/js/gisi.js"></script> 
<script src="./assests/js/sfont.js"></script> 


<script language="javascript" type="text/javascript">
			function cancelForm() {
			  var userReply=confirm('Are you sure that you want to clear all?')
			  if (userReply==true) {document.txtBox.box1.value='';document.txtBox.box2.value='';document.txtBox.box3.value=''}
			  }
</script>
		
<script language="javascript" type="text/javascript">
function copyu() {
  let textarea = document.getElementById("box2");
  textarea.select();
  document.execCommand("copy");
}
</script>

<script language="javascript" type="text/javascript">
function copyf() {
  let textarea = document.getElementById("box3");
  textarea.select();
  document.execCommand("copy");
}
</script>
		
<br>	
<center>			
<input name="copy" type="button" class="btn btn-s-md btn-primary btn-rounded" id="copy" onclick="copyu()" value="Copy Unicode">	  
<input name="copy" type="button" class="btn btn-s-md btn-primary btn-rounded" id="copy" onclick="copyf()" value="Copy Font">
<a href="#" onclick="cancelForm()" id="find" class="btn btn-s-md btn-primary btn-rounded">New</a>
</center>

</form> 
		  
          <div style="margin-top: 80px;"></div>
		  <center>
		  <div class="form-group">
		  <img src="./assests/images/123.gif" width="140px" class="img-circle">	 
		  </div> 
		  </center>
          <footer id="footer">
            <div class="text-center padder clearfix">
              <p>
                <small>&copy; 2020 - 2023 Developed by Shevon.one<br>Sinhala Real-time Unicode and Sinhala Font Converter</small>
              </p>
            </div>
          </footer>
         </section>
      </section>
      <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
    </section>
  </section>

  <div class="modal fade" id="modal-form">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
          
            <div class="col-sm-12">                      
              <div class="post-sum">
               <br> <h4>Example: ක</h4>     
               </div>
	
	<table width="100%" border="0" cellspacing="2" cellpadding="0">
																	<tbody>
																		<tr>
																			<td width="16%">ක්</span> k</td>
																			<td width="16%">ක</span> ka</td>
																			<td width="16%">කා</span> kaa</td>
																			<td width="16%">කැ</span> kA</td>
																			<td width="16%">කෑ</span> kAa</td>
																			<td width="16%">කි</span> ki</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">කී</span> kie</td>
																			<td width="16%">කු</span> ku</td>
																			<td width="16%">කූ</span> kuu</td>
																			<td width="16%">කෙ</span> ke</td>
																			<td width="16%">කේ</span> kei</td>
																			<td width="16%">කො</span> ko</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">කෝ</span> koe</td>
																			<td width="16%">කෞ</span> kau</td>
																			<td width="16%">ක්‍ර</span> kra</td>
																			<td width="16%">ක්‍රා</span> kraa</td>
																			<td width="16%">ක්‍රැ</span> krA</td>
																			<td width="16%">ක්‍රෑ</span> krAa</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ක්‍රි</span> kri</td>
																			<td width="16%">ක්‍රී</span> krie</td>
																			<td width="16%">කෘ</span> kru</td>
																			<td width="16%">කෲ</span> kruu</td>
																			<td width="16%">ක්‍රෙ</span> kre</td>
																			<td width="16%">ක්‍රේ</span> krei</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ක්‍රො</span> kro</td>
																			<td width="16%">ක්‍රෝ</span> kroe</td>
																			<td width="16%">ර්‍ක</span> \rka</td>
																			<td width="16%">ක්‍ය</span> kYa</td>
																			<td width="16%">කෛ</span> kI</td>
																			<td width="16%"></td>
																		</tr>       
																	</tbody>
																</table>
	
	
	<div class="post-sum">
    <br> <h4>Wovels</h4>           
    </div>
	
		<table width="100%" border="0" cellspacing="2" cellpadding="0">
																	<tbody>
																		<tr>
																			<td width="16%"><span class="sin-big">අ</span> a</td>
																			<td width="16%"><span class="sin-big">ආ</span> aa</td>
																			<td width="16%"><span class="sin-big">ඇ</span> A</td>
																			<td width="16%"><span class="sin-big">ඈ</span> Aa ae</td>
																			<td width="16%"><span class="sin-big">ඉ</span> i</td>
																			<td width="16%"><span class="sin-big">ඊ</span> ee ie</td>
																		</tr>
																		
																		<tr>
																			<td width="16%"><span class="sin-big">එ</span> e</td>
																			<td width="16%"><span class="sin-big">ඒ</span> ea ei</td>
																			<td width="16%"><span class="sin-big">ඔ</span> o</td>
																			<td width="16%"><span class="sin-big">ඕ</span> oe</td>
																			<td width="16%"><span class="sin-big">උ</span> u</td>
																			<td width="16%"><span class="sin-big">ඌ</span> uu oo</td>
																		</tr>
																		
																	</tbody>
																</table>	
	<div class="post-sum">
    <br> <h4>Letters</h4>           
    </div>
	
				<table width="100%" border="0" cellspacing="2" cellpadding="0">																	
																	    <tbody>
																		<tr>
																			<td width="16%">ක</span> ka</td>
																			<td width="16%">ඛ</span> kha</td>
																			<td width="16%">ග</span> ga</td>
																			<td width="16%">ඝ</span> gha G</td>
																			<td width="16%">ච</span> cha</td>
																			<td width="16%">ඡ</span> Cha</td>
																		</tr>																		
																		<tr>
																			<td width="16%">ජ</span> ja</td>
																			<td width="16%">ට</span> ta</td>
																			<td width="16%">ඨ</span> Ta</td>
																			<td width="16%">ඩ</span> da</td>
																			<td width="16%">ඪ</span> Da</td>
																			<td width="16%">ත</span> tha</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ථ</span> Tha</td>
																			<td width="16%">ද</span> dha</td>
																			<td width="16%">ධ</span> Dha</td>
																			<td width="16%">න</span> na</td>
																			<td width="16%">ණ</span> Na</td>
																			<td width="16%">බ</span> ba</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ම</span> ma</td>
																			<td width="16%">ය</span> ya</td>
																			<td width="16%">ර</span> ra</td>
																			<td width="16%">ල</span> la</td>
																			<td width="16%">ව</span> wa va</td>
																			<td width="16%">ස</span> sa</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">හ</span> ha</td>
																			<td width="16%">ළ</span> La</td>
																			<td width="16%">භ</span> bha</td>
																			<td width="16%">ඹ</span> Ba </td>
																			<td width="16%">ශ</span> sha</td>
																			<td width="16%">ෂ</span> Sha </td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ෆ</span> fa</td>
																			<td width="16%">ඥ</span> GNa</td>
																			<td width="16%">ඤ</span> KNa</td>
																			<td width="16%">ඣ</span> q </td>
																			<td width="16%">ළු</span> Lu</td>
																			<td width="16%">ළූ</span> Luu </td>
																		</tr>
																		
																		<tr>
																			<td width="16%">අං</span> a\n</td>
																			<td width="16%">අඃ</span> a\h</td>
																			<td width="16%">ඬ</span> \N</td>
																			<td width="16%">ඍ</span> \R </td>
																			<td width="16%">ඬ</span> nnda</td>
																			<td width="16%">ඳ</span> nndha</td>
																		</tr>
																		
																		<tr>
																			<td width="16%">ඟ</span> nnga</td>
																			<td width="16%"> </td>
																			<td width="16%"> </td>
																			<td width="16%"> </td>
																			<td width="16%"> </td>
																			<td width="16%"> </td>
																		</tr>
																	</tbody>
																</table>          
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
  
  
   <div class="modal fade" id="modal-form1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
          
              <section class="panel">
                <div class="panel-body">
                  <div class="clearfix text-center m-t">
                    <div class="inline">
                 <center>     <div class="easypiechart easyPieChart" data-percent="100" data-line-width="5" data-loop="false" data-bar-color="#92cf5c" data-track-color="#f5f5f5" data-scale-color="false" data-size="150" style="width: 150px; height: 150px; line-height: 150px;">
                        <div class="thumb-lg">
                          <img src="./assests/images/aboutme.jpg" class="img-circle">
                        </div>
                      <canvas width="150" height="150"></canvas></div> </center>
                      <div class="h4 m-t m-b-xs">Hey I'm Shevon Sankalpa</div>
                      <small class="text-muted m-b">Computer Science & Software Engineering Undergraduate<br>University of Bedfodshire (UK)</small><br>
					  <small class="text-muted m-b"><br>mail@shevon-sankalpa.com</small>
                     <div class="m-t m-b-xs">   
                     <p id="social-buttons">
                        <a href="https://fb.com/shevon.sankalpa" class="btn btn-rounded btn-sm btn-facebook"><i class="fa fa-facebook"></i> </a>
                      </p>
                    </div>
                    </div>                      
                  </div>
                </div>               
              </section>
           
          </div>          
        </div>
      </div>
    </div>
  </div>
  
  
  </div>
  
  <script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var greet;

    if (hrs < 12)
      greet = 'Good Morning';
    else if (hrs >= 12 && hrs <= 17)
      greet = 'Good Afternoon';
    else if (hrs >= 17 && hrs <= 24)
      greet = 'Good Evening';

    document.getElementById('lblGreetings').innerHTML =
      '<b>' + greet + '</b>';
  </script>

  <script>

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
    
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var curWeekDay = days[today.getDay()];
    var curDay = today.getDate();
    var curMonth = months[today.getMonth()];
    var curYear = today.getFullYear();
    var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
    document.getElementById("date").innerHTML = date;
    
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

  </script>
	<script src="./assests/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="./assests/js/bootstrap.js"></script>
  <!-- Sparkline Chart -->
  <script src="./assests/js/charts/sparkline/jquery.sparkline.min.js"></script>
  <!-- App -->
  <script src="./assests/js/app.js"></script>
  <script src="./assests/js/app.plugin.js"></script>
  <script src="./assests/js/app.data.js"></script>
  <script src="./assests/js/libs/jquery.pjax.js" cache="false"></script>
  <!-- Sparkline Chart -->
  <script src="./assests/js/charts/sparkline/jquery.sparkline.min.js"></script>
  <!-- Easy Pie Chart -->
  <script src="./assests/js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
  <!-- Morris -->
  <script src="./assests/js/charts/morris/raphael-min.js" cache="false"></script>
  <script src="./assests/js/charts/morris/morris.min.js" cache="false"></script>
  <script>  
  </script>
</body>
</html>