<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous" />
    <title>WeatherStar 4000+</title>
    <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
    <meta name="keywords" content="WeatherStar 4000+" />
    <meta name="author" content="Matt Walsh" />
    <meta name="application-name" content="WeatherStar 4000+" />

    <meta name="viewport" content="width=660,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="manifest" href="manifest.json" />
	<link rel="icon" href="images/Logo192.png" />

	<% if (production) { %>
		<link rel="stylesheet" type="text/css" href="resources/index.min.css?_=<%=production%>" />
		<script type="text/javascript" src="scripts/vendor/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/nosleep.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/jquery.touchSwipe.min.js"></script>
		<script type="text/javascript" src="scripts/index.js"></script>
		<script type="text/javascript" src="scripts/data/states.js"></script>
	<% } else { %>
		<link rel="stylesheet" type="text/css" href="styles/index.css" />
		<script type="text/javascript" src="scripts/vendor/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/nosleep.min.js"></script>
		<script type="text/javascript" src="scripts/vendor/jquery.touchSwipe.min.js"></script>
		<script type="text/javascript" src="scripts/index.js"></script>
		<script type="text/javascript" src="scripts/data/states.js"></script>
	<% } %>

</head>
<body>


    <div id="divQuery">
        <form id="frmGetLatLng">
            <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button>
            <input id="btnGetLatLng" type="submit" value="GO" />
            <input id="btnClearQuery" type="reset" value="Reset" />
        </form>
        <div id="divLat"></div>
        <div id="divLng"></div>
    </div>

    <br />

    <img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png" />
    <img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png" />

    <div id="divTwc">
        <div id="divTwcTop"></div>
        <div id="divTwcMiddle">
            <div id="divTwcLeft">
                <div>
                    <div>
                        <a id="aMenuLeft" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" /></a>
                    </div>
                </div>
                <div>
                    <div>
                        <a id="aPreviousLeft" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" /></a>
                    </div>
                </div>
                <div>
                    <div>
                        <a id="aNextLeft" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" /></a>
                    </div>
                </div>
                <div>
                    <div>
                        <a id="aPlayLeft" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" /></a>
                    </div>
                </div>
            </div>
            <iframe id="iframeTwc" src="twc3.html"></iframe>
            <div id="divTwcRight">
                <div>
                    <div>
                        <a id="aRefreshRight" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" /></a>
                    </div>
                </div>
                <div>
                    <div>
                        <a id="aFullScreenRight" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_2x.png" title="Exit Fullscreen" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div id="divTwcBottom">
            <div id="divTwcBottomLeft">
                <a id="aMenuBottom" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a>
                <a id="aPreviousBottom" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" /></a>
                <a id="aNextBottom" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /></a>
                <a id="aPlayBottom" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /></a>
            </div>
            <div id="divTwcBottomMiddle">
                <a id="aRefreshBottom" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a>
            </div>
            <div id="divTwcBottomRight">
                <a id="aVolumeBottom" href="#" class="ToggleVolume"><img src="images/nav/ic_volume_off_white_24dp_1x.png" title="Mute" /></a>
                <a id="aNarrationBottom" href="#" class="ToggleNarration"><img src="images/nav/ic_no_hearing_white_24dp_1x.png" title="Turn on Narration" /></a>
                <a id="aFullScreenBottom" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" /></a>
            </div>
        </div>
    </div>
    <div id="divTwcNavContainer">
        <div id="divTwcNav">
            <div id="divTwcNavLeft">
                <a id="aMenu" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a>
                <a id="aPrevious" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" /></a>
                <a id="aNext" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /></a>
                <a id="aPlay" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /></a>
            </div>
            <div id="divTwcNavMiddle">
                <a id="aRefresh" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a>
            </div>
            <div id="divTwcNavRight">
                <a id="aFullScreen" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_white_24dp_1x.png" title="Fullscreen" /></a>
            </div>
        </div>
    </div>

	<br />
	
	<div class="info">
		<a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
	</div>

    <div id="divInfo">
        Location: <span id="spanCity"></span> <span id="spanState"></span><br />
        Station Id: <span id="spanStationId"></span><br />
        Radar Id: <span id="spanRadarId"></span><br />
        Zone Id: <span id="spanZoneId"></span><br />
    </div>

    <br />

    <div id="divRefresh">
        Last Update: <span id="spanLastRefresh">(None)</span><br />
        <input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
    </div>

    <br />

    <div id="divUnits">
        Units:
        <input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label>
        <input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label>
    </div>

    <br />

    <div id="divScrollText">
        <form id="frmScrollText">
            <input id="chkScrollText" name="chkScrollText" type="checkbox" /><label id="lblScrollText" for="chkScrollText">Scroll Text: </label><input id="txtScrollText" autocomplete="off" value="" /><input id="btnScrollText" type="submit" value="Set" />
        </form>
    </div>

    <br />

</body>
</html>