index.html.tmpl 12.8 KB
Newer Older
1 2
#errorCatcher Echo
#encoding UTF-8
3
<!DOCTYPE html><html lang="de-DE"><head><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width,initial-scale=1" name="viewport"><title>$Extras.site_title</title><meta content="$Extras.site_description" name="description"><meta content="$Extras.site_owner" name="author"><meta content="$Extras.site_title" property="og:title"><meta content="website" property="og:type"><meta content="$station.station_url" property="og:url"><meta content="$Extras.webcam1_img" property="og:image"><meta content="$Extras.site_title" property="og:site_name"><meta content="$Extras.site_description" property="og:description"><meta content="$station.latitude[0].$station.latitude[1].replace('.', '')" property="og:latitude"><meta content="$station.longitude[0].$station.longitude[1].replace('.', '')" property="og:longitude"><meta content="$station.location" property="og:locality"><link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link href="/site.webmanifest" rel="manifest"><link href="/safari-pinned-tab.svg" rel="mask-icon" color="#f7931e"><meta content="#2b5797" name="msapplication-TileColor"><meta content="#00738c" name="theme-color"><link href="assets/css/complete.min.css" rel="stylesheet"><style>#camTabs li a:hover,#camTabs li.active a,#camTabs li.active a:hover,.we_current .whitebg h4,.whitebg h3,body.info .whitebg .whitebg h4{background:$Extras.theme_color_light}#camTabs li a{background:$Extras.theme_color_dark}</style></head><body class="current dx-viewport month$current.dateTime.format('%m')"><nav class="navbar navbar-fixed-top navbar-inverse"><div class="container"><div class="navbar-header"><button aria-controls="navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a href="index.html" class="navbar-brand">Rabenwetter</a></div><div class="collapse navbar-collapse navbar-right" id="navbar"><ul class="nav navbar-main navbar-nav"><li class="active"><a href="#">Current</a></li><li><a href="archive.html">Archive</a></li><li><a href="info.html">Info</a></li><li><a href="contact.html">Contact</a></li></ul></div></div></nav><div class="container"><div class="col-md-9">
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
#if $varExists('Extras.webcam1_img')
<div class="whitebg"><ul class="nav nav-tabs" id="camTabs" role="tablist"><li class="active" role="presentation"><a href="#cam1" data-toggle="tab" aria-controls="home" role="tab">$Extras.webcam1_title</a></li>
#if $varExists('Extras.webcam2_img')
<li role="presentation"><a href="#cam2" data-toggle="tab" aria-controls="profile" role="tab">$Extras.webcam2_title</a></li>
#end if
</ul><div class="tab-content"><div class="active fade in tab-pane" id="cam1" role="tabpanel"><a href="$Extras.webcam1_url" data-toggle="tooltip" data-placement="bottom" title="Move to zoom,<br />click to enlarge" class="camlink"><span class="zoomwrapper"><img alt="rabenwetter.de" class="img-responsive" src="$Extras.webcam2_img" id="we_campic1"></span></a><div class="camdescription">$Extras.webcam1_description <a href="#fullscreen" data-toggle="tooltip" data-placement="left" title="Fullscreen"><span class="glyphicon glyphicon-fullscreen"></span></a></div></div>
#if $varExists('Extras.webcam2_img')
<div class="fade tab-pane" id="cam2" role="tabpanel"><a href="$Extras.webcam2_url" data-toggle="tooltip" data-placement="bottom" title="Move to zoom,<br />click to enlarge" class="camlink"><span class="zoomwrapper"><img alt="rabenwetter.de" class="img-responsive" src="$Extras.webcam2_img" id="we_campic2"></span></a><div class="camdescription">$Extras.webcam2_description <a href="#fullscreen" data-toggle="tooltip" data-placement="left" title="Fullscreen"><span class="glyphicon glyphicon-fullscreen"></span></a></div></div>
#end if
</div></div>
#end if
#if $varExists('Extras.news')
<div class="whitebg container-news"><h3>News</h3>$Extras.news</div>
#end if
<div class="whitebg jshide"><p class="alert alert-danger"><strong>You need javascript to see the live instruments. (e.g. disable NoScript addon.)</strong></p></div><div class="whitebg container-gauges jshidden"><h3>Weather</h3><div class="container-fluid">
#if $current.forecastRule.has_data
<div class="col-md-12"><div class="gauge_container"><h4>Forecast</h4><p id="we_forecast">&nbsp;</p></div></div>
#end if
22
<div class="col-xs-6 col-md-3"><div class="gauge_container linear"><h4>Temperature</h4><div><div id="gauge_temp"></div><div class="value_container"><span class="value" id="value_temp">$current.outTemp.formatted</span><span class="sup">$unit.label.outTemp</span></div><div class="temp_checkbox"><input type="checkbox" data-height="35" data-off="Außen" data-on="Innen" data-size="large" data-toggle="toggle" data-width="100" id="tempInOut"></div></div></div></div><div class="col-xs-6 col-md-3"><div class="gauge_container linear"><h4>Precipitation</h4><div><div id="gauge_rain"></div><div class="value_container"><span class="value" id="value_rain">$day.rain.sum.formatted</span><span class="sup">$unit.label.rain</span></div><div class="dummy_checkbox">&nbsp;</div></div></div></div><div class="col-md-6"><div class="gauge_container circular"><h4>Wind speed</h4><div><div id="gauge_wspeed"></div><div class="value_container"><span class="value" id="value_wspeed">$current.windSpeed.formatted</span><span class="sup">$unit.label.windSpeed</span></div></div></div></div><div class="col-md-6"><div class="gauge_container rose"><h4>Wind direction</h4><div><div id="gauge_wdir"></div><div class="value_container"><span class="value" id="value_wdir">$current.windDir.ordinal_compass</span></div></div></div></div><div class="col-md-6"><div class="gauge_container circular"><h4>Humidity</h4><div><div id="gauge_hum"></div><div class="value_container"><span class="value" id="value_hum">$current.outHumidity.formatted</span><span class="sup">$unit.label.outHumidity</span></div></div></div></div><div class="col-md-6"><div class="gauge_container circular"><h4>Air pressure</h4><div><div id="gauge_press"></div><div class="value_container"><span class="value" id="value_press">$current.barometer.formatted</span><span class="sup">$unit.label.barometer</span></div></div></div></div>
23 24 25
#if $day.PM25.has_data
<div class="col-md-6"><div class="gauge_container circular"><h4>Fine dust 2,5μm</h4><div><div id="gauge_pm25"></div><div class="value_container"><span class="value" id="value_pm25">$current.PM25.format("%.1f")</span><span class="sup">μg/m³</span></div></div></div></div><div class="col-md-6"><div class="gauge_container circular"><h4>Fine dust 10μm</h4><div><div id="gauge_pm10"></div><div class="value_container"><span class="value" id="value_pm10">$current.PM10.format("%.1f")</span><span class="sup">μg/m³</span></div></div></div></div>
#end if
26
</div></div></div><div class="col-md-3"><div class="whitebg we_current"><h3>Current</h3><div class="row"><div class="col-md-12 current_meta"><h5>$station.location</h5><em><span id="we_lastupdate">$current.dateTime.format('%Y-%m-%d %H:%M')</span></em></div></div><div class="row"><div class="col-xs-8"><div class="whitebg current_temp"><h4>Temperature <span>Outside</span></h4><span id="we_temp-value">$current.outTemp.formatted</span><span class="sup we_tempunit">$unit.label.outTemp</span></div></div><div class="col-xs-4"><div class="whitebg current_temptrend"><h4>Trend</h4><span class="glyphicon glyphicon-arrow-right" id="we_temp-trend"></span></div></div></div><div class="row"><div class="col-xs-8"><div class="whitebg current_baro"><h4>Barometer</h4><span id="we_barometer-value">$current.barometer.formatted</span><span class="sup we_pressunit">$unit.label.barometer</span></div></div><div class="col-xs-4"><div class="whitebg current_barotrend"><h4>Trend</h4><span class="glyphicon glyphicon-arrow-right" id="we_barometer-trend"></span></div></div></div><div class="row"><div class="col-sm-6 col-xs-7"><div class="whitebg current_windspeed"><h4>Wind spd.</h4><span id="we_windspeed-value">$current.windSpeed.formatted</span><span class="sup we_windunit">$unit.label.windSpeed</span></div></div><div class="col-sm-6 col-xs-5"><div class="whitebg current_winddir"><h4>Wind dir.</h4><span id="we_winddir-value" data-toggle="tooltip" title="$current.windDir.ordinal_compass"><span class="glyphicon glyphicon-arrow-down"></span></span></div></div></div><div class="row"><div class="col-xs-6"><div class="whitebg current_hum"><h4>Humidity</h4><span id="we_humidity-value">$current.outHumidity.formatted</span><span class="sup we_humunit">$unit.label.outHumidity</span></div></div><div class="col-xs-6"><div class="whitebg current_rain"><h4>Rain</h4><span id="we_rain-value">$day.rain.sum.formatted</span><span class="sup we_rainunit">$unit.label.rain</span></div></div></div>
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
#if $day.PM25.has_data
<div class="row"><div class="col-xs-6"><div class="whitebg current_pm25"><h4>Dust 2,5μm</h4><span id="we_pm25-value">$current.PM25.format("%.1f")</span><span class="sup we_pmunit">µg/m³</span></div></div><div class="col-xs-6"><div class="whitebg current_pm10"><h4>Dust 10μm</h4><span id="we_pm10-value">$current.PM10.format("%.1f")</span><span class="sup we_pmunit">µg/m³</span></div></div></div>
#end if
</div>
#if $varExists('Extras.radar_img')
<div class="whitebg"><h3>Rain radar</h3><a href="$Extras.radar_url" target="_blank"><img alt="Regenradar" class="img-responsive" src="$Extras.radar_img"></a><br>
#if $varExists('Extras.radar_url')
 <span>Source</span>: <a href="$Extras.radar_url" target="_blank">$Extras.radar_title</a> 
#end if
</div>
#end if
#if $varExists('Extras.lapses_url')
<div class="whitebg lapses"><h3>Timelapse 24h</h3><video class="img-responsive video" controls="controls" id="daily" poster="$Extras.lapses_url/lapse-$yesterday.dateTime.format('%y%m%d.png')" preload="none"><source id="dailymp4" src="$Extras.lapses_url/lapse-$yesterday.dateTime.format('%y%m%d.mp4')" type="video/mp4"></video><div class="date input-group day"><input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div><div class="whitebg lapses"><h3>Timelapse 365d</h3><video class="img-responsive video" controls="controls" id="yearly" poster="$Extras.lapses_url/lapse-$year($years_ago=1).dateTime.format('%Y.png')" preload="none"><source id="yearlymp4" src="$Extras.lapses_url/lapse-$year($years_ago=1).dateTime.format('%Y.mp4')" type="video/mp4"></video><div class="date input-group year"><input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div>
#end if
#if $varExists('almanac')
<div class="whitebg"><h3>Sun</h3><div class="container-fluid dsdigi" id="we_sun"><div class="row"><div class="col-xs-6"><img alt="Sun" class="img-responsive" src="assets/img/sun.svg"></div><div class="col-xs-6"><p><span class="glyphicon glyphicon-chevron-up"></span> $almanac.sunrise</p><p><span class="glyphicon glyphicon-chevron-down"></span> $almanac.sunset</p></div></div></div></div><div class="whitebg"><h3>Moon</h3><div class="container-fluid dsdigi" id="we_moon"><div class="row"><div class="col-xs-6"><img alt="Moon" class="img-responsive" src="assets/img/moon.svg"></div><div class="col-xs-6"><p><span class="glyphicon glyphicon-chevron-up"></span> $almanac.moon.rise</p><p><span class="glyphicon glyphicon-chevron-down"></span> $almanac.moon.set</p></div></div><div class="row"><div class="col-md-3 center percent">$almanac.moon_fullness%</div><div class="center col-md-9 phase">$almanac.moon_phase</div></div></div></div>
#end if
</div></div><div class="container"><div class="col-md-4"><div class="whitebg"><a href="https://www.wfc-schotten.de/wetter" target="_blank"><img alt="Niddastausee" class="img-responsive" src="external/wfc.jpg"></a></div></div><div class="col-md-4"><div class="whitebg"><a href="http://www.wetter.ortenberg.net/" target="_blank"><img alt="Ortenberg" class="img-responsive" src="external/ortenberg1.jpg"></a></div></div><div class="col-md-4"><div class="whitebg"><a href="http://www.wetter.ortenberg.net/" target="_blank"><img alt="Ortenberg" class="img-responsive" src="external/ortenberg2.jpg"></a></div></div></div><footer class="footer"><div class="container">&copy; 2008-$current.dateTime.format("%Y") <a href="https://www.ambnet.biz" target="_blank">ambNET</a> (<a href="contact.html">Impressum</a>)<br>Powered by <a href="http://weewx.com/" target="_blank">weeWX</a> using <a href="https://rabenwetter.de" target="_blank">Rabenwetter Template</a></div></footer><script type="text/javascript">var cam1url="$Extras.webcam1_img",cam2url="$Extras.webcam2_img",cam1interval=$Extras.webcam1_interval,cam2interval=$Extras.webcam2_interval,lapsesurl="$Extras.lapses_url"</script><script src="assets/js/complete.min.js"></script></body></html>