Khmer Web Library

<!--views/header.php-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><?php echo $blogTitle.' - '.$pageTitle ?></title>
        <script src="public/scripts/jQuery.js"></script>
        <link href="public/fonts/setup.css" rel="stylesheet" ></link>
        <link href="public/images/site_logo.png" rel="icon" ></link>
        <link href="public/styles/global.css" rel="stylesheet"></link>
        <link href="public/styles/header.css" rel="stylesheet"></link>
    </head>
    <body>
    <div class='site region'>

    <div class="Header ">
        <div class='wrapper '>
            <div class='datetime'>
                <div class='date'><?php echo $date ?></div>
                <div class='time' id='kh-clock'>Time</div>
            </div>
            <div class='title'>
                <?php echo $blogTitle ?>
                <div class='description'><?php echo $description ?></div>
            </div>
            <form class='search'>
                <input type='text' />
                <input type='submit' value='ស្វែងរក' />
            </form>
        </div>
    </div>

    <script src='public/scripts/header.js'></script>

.Header{
    background: var(--background-dark);
    padding: 30px 20px;
    border-radius: 4px 4px 0 0;
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 30% auto 30%;
    align-items: center;
    text-align: center;
}

.Header .wrapper form{
    display: grid;
    grid-template-columns: 75% 25%;
}

.Header .wrapper .title{
    font: 45px/1.5 Anton, Moul;
    text-shadow: 0 0 0 #e7e7e7, 1px 1px 0 #d8d8d8, 2px 2px 0 #cacaca, 3px 3px 0 #bbb, 
    4px 4px 0 #adadad, 5px 5px 0 #9e9e9e, 6px 6px 0 #909090, 7px 7px 6px rgb(0 0 0 / 60%), 
    7px 7px 1px rgb(0 0 0 / 50%), 0 0 6px rgb(0 0 0 / 20%);
}

.Header .wrapper .title .description{
    font: bold 22px/1.5 HandWriting;
    text-shadow: none;
    padding-top: 5px;
}

.Header .wrapper input{
    font: var(--body-font);
}

.Header .wrapper .date{
    font: 20px/1.5 Oswald, Bayon;
    padding-bottom: 5px;
}

@media only screen and (max-width: 800px){
    .Header .wrapper{
        grid-template-columns: 100%;
    }

    .Header .wrapper .title{
        padding-bottom: 10px;
    }
}

<?php
//tool.php

class Tool{

    function toKhNum($number) {
        $khNum = ['0'=>'០', '1'=>'១', '2'=>'២', '3'=>'៣', '4'=>'៤', '5'=>'៥', '6'=>'៦', '7'=>'៧', '8'=>'៨', '9'=>'៩'];
        $stringNum = strval($number);
        $khString = '';
        $chars = str_split($stringNum);
 
        foreach ($chars as $char ){
            $khString .= $khNum[$char];
        }
        
        return $khString;
    }

    function getKhDate($rawDate){
        $KhmerDays = ['ច័ន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍', 'អាទិត្យ'];
        $KhmerMonths = ['មករា', 'កុម្ភៈ', 'មិនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ'];
        
        $month = date('m', strtotime($rawDate));
        $day = date("N", strtotime((date('l',strtotime($rawDate)))));
        $daym = $this->toKhNum(date('d', strtotime($rawDate)));
        $year = $this->toKhNum(date('Y', strtotime($rawDate)));
    
        return ('ថ្ងៃ '.$KhmerDays[$day-1].' ទី '.$daym.' '.$KhmerMonths[$month-1].' '.$year);
    }

    function is_localhost() {	
		// set the array for testing the local environment
		$whitelist = array( '127.0.0.1', '::1' );
		
		// check if the server is in the array
		if ( in_array( $_SERVER['REMOTE_ADDR'], $whitelist ) ) {
			// this is a local environment
			return true;
		}
		
	}

}

//public/scripts/header.js

function toKhNum(number) {
    var khNum = {'0':'០', '1':'១', '2':'២', '3':'៣', '4':'៤', '5':'៥', '6':'៦', '7':'៧', '8':'៨', '9':'៩'};
    var stringNum = number.toString();
    var khString = '';

    for(var i in stringNum){
        var char = stringNum.charAt(i);
        khString += khNum[char];
    }

    return khString;
}

function clock(){
    var period = 'ព្រឹក'
    var today = new Date()
    var h = today.getHours()

    if(h>12){
        h = h-12
        period = 'ល្ងាច'
    }

    var m = today.getMinutes()
    var s = today.getSeconds()
    m = toKhNum(checkTime(m))
    s = toKhNum(checkTime(s))
    h = toKhNum(h)

    document.getElementById('kh-clock').innerHTML = 'ម៉ោង '+(h) + " : " + (m) + " : " + (s) +' ' + period
    var t = setTimeout(clock, 500)
}

function checkTime(i) {
    if (i < 10){i = "0" + i}  
    return i
}

clock()

GitHub: https://github.com/Sokhavuth/gazetta

Heroku: https://khmerweb-gazetta.herokuapp.com/