ws4kp/dist/index.html
2022-11-21 22:01:39 -06:00

389 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<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=device-width,initial-scale=1">
<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">
<link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=5.0.0">
<script type="text/javascript" src="resources/data.min.js?_=5.0.0"></script>
<script type="text/javascript" src="resources/ws.min.js?_=5.0.0"></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="version" style="display:none">5.0.0</div>
<div id="divTwc">
<div id="container">
<div id="loading" width="640" height="480">
<div>
<div class="title">WeatherStar 4000+</div>
<div class="instructions">Enter your location above to continue</div>
</div>
</div>
<div id="progress-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">WeatherStar</div>
<div class="bottom">4000+ v5.0.0</div>
</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-box progress">
<div class="container">
<div class="item template">
<div class="name">Current Conditions</div>
<div class="links loading">
<div class="loading">Loading</div>
<div class="press-here">Press Here</div>
<div class="failed">Failed</div>
<div class="no-data">No Data</div>
<div class="disabled">Disabled</div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="progress-bar-container show">
<div class="progress-bar"></div>
<div class="cover"></div>
</div>
</div>
</div>
<div id="hourly-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title single">Hourly Forecast</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-scroll hourly">
<div class="column-headers">
<div class="temp">TEMP</div>
<div class="like">LIKE</div>
<div class="wind">WIND</div>
</div>
<div class="hourly-lines">
<div class="hourly-row template">
<div class="hour"></div>
<div class="icon"><img></div>
<div class="temp"></div>
<div class="like"></div>
<div class="wind"></div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="travel-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Travel Forecast</div>
<div class="bottom">For</div>
</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-scroll travel">
<div class="column-headers">
<div class="temp low">LOW</div>
<div class="temp high">HIGH</div>
</div>
<div class="travel-lines">
<div class="travel-row template">
<div class="city"></div>
<div class="icon"><img></div>
<div class="temp low"></div>
<div class="temp high"></div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="current-weather-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Current</div>
<div class="bottom">Conditions</div>
</div>
<div class="noaa-logo"><img src="images/noaa5.gif"></div>
</div>
<div class="main has-scroll has-box current-weather">
<div class="weather template">
<div class="left col">
<div class="temp center"></div>
<div class="condition center"></div>
<div class="icon center"><img src=""></div>
<div class="wind-container">
<div class="wind-label">Wind:</div>
<div class="wind"></div>
</div>
<div class="wind-gusts"></div>
</div>
<div class="right col">
<div class="location"></div>
<div class="row">
<div class="label">Humidity:</div>
<div class="humidity value"></div>
</div>
<div class="row">
<div class="label">Dewpoint:</div>
<div class="dewpoint value"></div>
</div>
<div class="row">
<div class="label">Ceiling:</div>
<div class="ceiling value"></div>
</div>
<div class="row">
<div class="label">Visibility:</div>
<div class="visibility value"></div>
</div>
<div class="row">
<div class="label">Pressure:</div>
<div class="pressure value"></div>
</div>
<div class="row">
<div class="heat-index-label label"></div>
<div class="heat-index value"></div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="local-forecast-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Local</div>
<div class="bottom">Forecast</div>
</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
<div class="noaa-logo"><img src="images/noaa5.gif"></div>
</div>
<div class="main has-scroll has-box local-forecast">
<div class="container">
<div class="forecasts">
<div class="forecast template">
<div class="text"></div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="latest-observations-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Latest</div>
<div class="bottom">Observations</div>
</div>
<div class="noaa-logo"><img src="images/noaa5.gif"></div>
</div>
<div class="main has-scroll latest-observations has-box">
<div class="container">
<div class="column-headers">
<div class="temp english">&deg;F</div>
<div class="temp metric">&deg;C</div>
<div class="weather">Weather</div>
<div class="wind">Wind</div>
</div>
<div class="observation-lines">
<div class="observation-row template">
<div class="location"></div>
<div class="temp"></div>
<div class="weather"></div>
<div class="wind"></div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="regional-forecast-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Regional</div>
<div class="bottom">Observations</div>
</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-scroll regional-forecast">
<div class="map"><img src="images/Basemap2.png"></div>
<div class="location-container">
<div class="location template">
<div class="icon"><img src=""></div>
<div class="city"></div>
<div class="temp"></div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="almanac-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title single">Almanac</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-scroll almanac">
<div class="sun">
<div class="days">
<div class="day"></div>
<div class="day day-1">Monday</div>
<div class="day day-2">Tuesday</div>
</div>
<div class="times times-1">
<div class="name">Sunrise:</div>
<div class="sun-time rise-1">6:24 am</div>
<div class="sun-time rise-2">6:25 am</div>
</div>
<div class="times times-2">
<div class="name">Sunset:</div>
<div class="sun-time set-1">6:24 am</div>
<div class="sun-time set-2">6:25 am</div>
</div>
</div>
<div class="moon">
<div class="title">Moon Data:</div>
<div class="days">
<div class="day template">
<div class="type"></div>
<div class="icon"><img></div>
<div class="date"></div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="extended-forecast-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Extended</div>
<div class="bottom">Forecast</div>
</div>
<div class="date-time date"></div>
<div class="date-time time"></div>
</div>
<div class="main has-scroll extended-forecast">
<div class="day-container">
<div class="day template">
<div class="date"></div>
<div class="icon"><img src=""></div>
<div class="condition"></div>
<div class="temperatures">
<div class="temperature-block lo">
<div class="label">Lo</div>
<div class="value value-lo"></div>
</div>
<div class="temperature-block hi">
<div class="label">Hi</div>
<div class="value value-hi"></div>
</div>
</div>
</div>
</div>
</div>
<div class="scroll">
<div class="scrolling template"></div>
<div class="fixed"></div>
</div>
</div>
<div id="radar-html" class="weather-display">
<div class="header">
<div class="logo"><img src="images/Logo3.png"></div>
<div class="title dual">
<div class="top">Local</div>
<div class="bottom">Radar</div>
</div>
<div class="right">
<div class="precip">
<div class="precip-header">PRECIP</div>
<div class="scale">
<div class="text">Light</div>
<div class="scale-table">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-6"></div>
<div class="box box-7"></div>
<div class="box box-7"></div>
</div>
<div class="text">Heavy</div>
</div>
<div class="time"></div>
</div>
</div>
</div>
<div class="main radar">
<div class="container">
<div class="scroll-area">
<div class="frame template">
<div class="map"><img src="images/4000RadarMap2.jpg"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="divTwcBottom">
<div id="divTwcBottomLeft"><img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu"> <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous"> <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next"> <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play"></div>
<div id="divTwcBottomMiddle"><img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh"></div>
<div id="divTwcBottomRight"><img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Enter Fullscreen"></div>
</div>
</div><br>
<div class="info"><a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a></div>
<div class="heading">Selected displays</div>
<div id="enabledDisplays"></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>
<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>
<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>
</body>
</html>