Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>Liquid Fill Gauge Clock</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//bl.ocks.org/brattonc/raw/5e5ce9beee483220e2f6/liquidFillGauge.js"></script>
    <style>
        .liquidFillGaugeText {
            font-family: Helvetica;
            font-weight: bold;
        }
    </style>
</head>
<body>
<svg id="fillgauge" width="100%" height="500"></svg>
<script language="JavaScript">
    var config = liquidFillGaugeDefaultSettings();
    config.minValue = 0;
    config.maxValue = 12;
    config.displayPercent = false;
    config.circleThickness = 0.15;
    config.circleColor = "#808015";
    config.textColor = "#555500";
    config.waveTextColor = "#FFFFAA";
    config.waveColor = "#AAAA39";
    config.textVertPosition = 0.8;
    config.waveAnimateTime = 1000;
    config.waveHeight = 0.05;
    config.waveAnimate = true;
    config.waveRise = true;
    config.waveHeightScaling = false;
    config.waveOffset = 0.25;
    config.textSize = 0.75;
    config.waveCount = 3;

    function newValue() {
        var date = new Date();
        var time = (date.getHours() - 8) + date.getMinutes() / 60 + date.getSeconds() / 3600;
        if (time < 0) {
            time = time + 24;
        }
        if (time > 12) {
            time = time - 12;
        }
        return 12 - time;
    }

    function isDay() {
        var date = new Date();
        var time = (date.getHours() - 8) + date.getMinutes() / 60 + date.getSeconds() / 3600;
        if (time < 0) {
            time = time + 24;
        }
        return time <= 12;
    }

    var v = newValue();
    var gauge = loadLiquidFillGauge("fillgauge", v, config);

    function chooseTheme() {
        if (isDay()) {
            config.circleColor = "#6495ED";
            config.textColor = "#FF7F00";
            config.waveTextColor = "#FFFFAA";
            config.waveColor = "#32CD32";
        } else {
            config.circleColor = "#191970";
            config.textColor = "#9932CC";
            config.waveTextColor = "#9370DB";
            config.waveColor = "#FFF8DC";
        }
        d3.select("svg").select("g").remove();
        gauge = loadLiquidFillGauge("fillgauge", newValue(), config);
    }

    chooseTheme();

    function update() {
        if (newValue() > v) {
            chooseTheme();
        }
        gauge.update(newValue());
    }

    window.setInterval(update, 500);
</script>
</body>
</html>