Widget.html

<!--
    MING LS - by @thatMshl, please install XenInfo
-->
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" charset="utf-8" src="Config.js"></script>
    <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta charset="utf-8">
    <link rel="stylesheet" href="Style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <script type="text/javascript" src="js/clock.js"></script>

</head>


<body onload="init()">
    <div class="container">
        <div id="good">Good Morning!</div>
        <div id="time">00:00</div>
        <div id="date">Monday &nbsp;Dec 22</div>
        <div id="icon"><img src="" width="24px"></div>
        <div id="weather">00° &nbsp;Condition</div>
        <div id="battery">00%</div>
    </div>

<script type="text/javascript">
        var doc = document,
          goodDiv = doc.getElementById('good'),
            timeDiv = doc.getElementById('time'),
            dateDiv = doc.getElementById('date'),
            iconDiv = doc.getElementById('icon'),
            weatherDiv = doc.getElementById('weather'),
            batteryDiv = doc.getElementById('battery');


            if (showBattery == false){
                battery.style.opacity = '0';
            }
            if (showWeather == false) {
                weather.style.opacity = '0';
            }

            var sent = "Good Morning!";
            var colorize = primaryColor;
            if (colorizeTitle == false) {
                colorize = secondaryColor;
            }


            clock({
              twentyfour : !!useTwentyFour,
              padzero : true,
              refresh : 2500,
              success: function(clock){
                        timeDiv.innerHTML = '<span style="font-family:GMed">' + clock.hour() + ":" + clock.minute() + '</span>';
                        dateDiv.innerHTML = '<span style="color:'+ primaryColor +'">' + clock.sdaytext() + ' &nbsp;<span style="color:'+ colorize +'">' + clock.smonthtext() + " " + clock.date() + '</span> </span>';

                        if (clock.rawhour() <= 11){
                            sent = '<span style="color:'+ secondaryColor +'">Good</span> <span style="color:'+ primaryColor +'">Morning!</span>';
                        } else if (clock.rawhour() <= 16) {
                            sent = '<span style="color:'+ secondaryColor +'">Good</span> <span style="color:'+ primaryColor +'">Afternoon!</span>';
                        } else if (clock.rawhour() <= 21) {
                            sent = '<span style="color:'+ secondaryColor +'">Good</span> <span style="color:'+ primaryColor +'">Evening!</span>';
                        } else {
                            sent = '<span style="color:'+ secondaryColor +'">Good</span> <span style="color:'+ primaryColor +'">Night!</span>';
                        }

                        goodDiv.innerHTML = sent;
              }
            });
            function mainUpdate(type){
                if(type == "battery"){
                    batteryDiv.innerHTML = '<span style="color:'+ primaryColor +'">' + batteryPercent + '%' + (batteryCharging? ' &nbsp;<span style="font-size:17px;color:'+ secondaryColor +'" class="fas fa-bolt"></span>' : " ") + '</span>';
                }
                if (type == "weather"){
                    var conditionz = ["Tornado", "Tropical Storm", "Hurricane", "Thunderstorm", "Thunderstorm", "Snow", "Sleet", "Sleet", "Freezing Drizzle", "Drizzle", "Freezing Rain", "Showers", "Showers", "Flurries", "Snow", "Snow", "Snow", "Hail", "Sleet", "Dust", "Fog", "Haze", "Smoky", "Blustery", "Windy", "Cold", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Partly Cloudy", "Clear", "Sunny", "Fair", "Fair", "Sleet", "Hot", "Thunderstorms", "Thunderstorms", "Thunderstorms", "Showers", "Heavy Snow", "Light Snow", "Heavy Snow", "Partly Cloudy", "Thunderstorm", "Snow", "Thunderstorm", "blank"];
                    var conCode = weather.conditionCode;
                    var style = "hybridr";

                    iconDiv.innerHTML = '<span> <img src="img/' + style + '/' + conCode + '.png" id="icon"/> </span>';

                    weatherDiv.innerHTML = '<span style="color:'+ colorize +'">' + weather.temperature + '°</span>  <span style="color:'+ primaryColor +'">' + weather.condition + '</span>';

                }
            }

//(conditionz[conCode])

            (function () {
    'use strict';
    if (window.innerWidth === 375) {
        document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=1.18, maximum-scale=1.18, user-scalable=0');
    } else if (window.innerWidth === 414) {
        document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=1.3, maximum-scale=1.3, user-scalable=0');
    }
            }());
    </script>
</body>
</html>