archive.html.tmpl 16.4 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>.nav-tabs li a:hover,.nav-tabs li.active a,.nav-tabs li.active a:hover,.we_current .whitebg h4,.whitebg h3,body.info .whitebg .whitebg h4{background:$Extras.theme_color_summer_light}.nav-tabs li a{background:$Extras.theme_color_summer_dark}body.month01 .nav-tabs li a:hover,body.month01 .nav-tabs li.active a,body.month01 .we_current .whitebg h4,body.month01 .whitebg h3,body.month01.info .whitebg .whitebg h4,body.month02 .nav-tabs li a:hover,body.month02 .nav-tabs li.active a,body.month02 .we_current .whitebg h4,body.month02 .whitebg h3,body.month02.info .whitebg .whitebg h4,body.month11 .nav-tabs li a:hover,body.month11 .nav-tabs li.active a,body.month11 .we_current .whitebg h4,body.month11 .whitebg h3,body.month11.info .whitebg .whitebg h4,body.month12 .nav-tabs li a:hover,body.month12 .nav-tabs li.active a,body.month12 .we_current .whitebg h4,body.month12 .whitebg h3,body.month12.info .whitebg .whitebg h4{background:$Extras.theme_color_winter_light}body.month01 .nav-tabs li a,body.month02 .nav-tabs li a,body.month11 .nav-tabs li a,body.month12 .nav-tabs li a{background:$Extras.theme_color_winter_dark}</style></head><body class="dx-viewport archive 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">$Extras.site_title</a></div><div class="collapse navbar-collapse navbar-right" id="navbar"><ul class="nav navbar-main navbar-nav"><li><a href="index.html">Courant</a></li><li class="active"><a href="#">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"><div class="whitebg jshide"><p class="alert alert-danger"><strong>Il faut javascript pour voir les compteurs live. (ex: desactivation NoScript addon.)</strong></p></div><div class="whitebg jshidden"><h3>Archive</h3><div class="row"><div class="col-xs-6 col-md-8"><a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-lg btn-default btn-block" id="dropdown-period" role="button" aria-haspopup="true" aria-expanded="false"><span class="title">Choisir la periode...</span><span class="caret"></span></a><ul class="dropdown-menu" id="period" aria-labelledby="period"><li><a href="#day">Jour</a></li><li><a href="#week">Semaine</a></li><li><a href="#month">Mois</a></li><li><a href="#year">Annee</a></li></ul></div><div class="col-xs-6 col-md-4 datetime_container"><div class="input-group input-group-lg"><div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div><input type="text" class="form-control" value="" id="datetime" size="10"></div></div></div><div class="clear"><br></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Temperature <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_temp"></div></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Humidite <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_hum"></div></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Pression atmospherique <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_press"></div></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Precipitation <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_rain"></div></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Vitesse vent <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_wspeed"></div></div><div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Direction vent <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_wdir"></div></div>
4
#if $day.PM25.has_data
5
<div class="chart_container"><div class="btn-group" role="group"><button type="button" class="btn btn-secondary" value="l"><span class="glyphicon glyphicon-chevron-left"></span></button> <button type="button" class="btn btn-secondary" value="r"><span class="glyphicon glyphicon-chevron-right"></span></button></div><h4>Poussieres fines <span class="chart_datetime">($current.dateTime.format('%Y-%n-%d'))</span></h4><div id="chart_pm"></div></div>
6
#end if
7
</div></div><div class="col-md-3"><div class="whitebg we_current"><h3>Courant</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>Exterieur</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>Tendance</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>Barometre</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>Tendance</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>Vent vit.</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>Vent 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>Humidite</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>Pluie</h4><span id="we_rain-value">$day.rain.sum.formatted</span><span class="sup we_rainunit">$unit.label.rain</span></div></div></div>
8 9 10 11 12
#if $current.PM25.has_data
<div class="row"><div class="col-xs-6"><div class="whitebg current_pm25"><h4>Poussiere 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>Poussiere 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')
Philipp's avatar
Philipp committed
13
<div class="whitebg"><h3>Regenradar</h3><a href="$Extras.radar_url" target="_blank"><img alt="Regenradar" class="img-responsive" src="$Extras.radar_img"></a><br>
14
#if $varExists('Extras.radar_url')
15
 <span>Source</span>: <a href="$Extras.radar_url" target="_blank">$Extras.radar_title</a> 
16 17 18
#end if
</div>
#end if
19
#if $varExists('Extras.radar_iframe')
20
<div class="whitebg"><h3>Radar pluie</h3><iframe allowfullscreen frameborder="0" src="$Extras.radar_iframe" style="border:0;height:225px;width:100%"></iframe><br>
21 22 23 24 25
#if $varExists('Extras.radar_url')
 <span>Source</span>: <a href="$Extras.radar_url" target="_blank">$Extras.radar_title</a> 
#end if
</div>
#end if
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
#if $varExists('Extras.webcam1_lapses') or $varExists('Extras.webcam2_lapses')
<div class="whitebg lapses"><h3>Timelapse 24h</h3>
#if $varExists('Extras.webcam1_lapses') and $varExists('Extras.webcam2_lapses')
<ul class="nav nav-tabs" id="lapse24Tabs" role="tablist">
#if $varExists('Extras.webcam1_lapses')
<li role="presentation" class="active"><a href="#daily1tab" data-toggle="tab" aria-controls="home" role="tab">$Extras.webcam1_title</a></li>
#end if
#if $varExists('Extras.webcam2_lapses')
<li role="presentation"><a href="#daily2tab" data-toggle="tab" aria-controls="home" role="tab">$Extras.webcam2_title</a></li>
#end if
</ul>
#end if
<div class="tab-content">
#if $varExists('Extras.webcam1_lapses')
<div class="active fade in tab-pane" id="daily1tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="daily1" poster="$Extras.webcam1_lapses$yesterday.dateTime.format('%y%m%d.png')" preload="none"><source id="daily1mp4" src="$Extras.webcam1_lapses$yesterday.dateTime.format('%y%m%d.mp4')" type="video/mp4"></video></div>
#end if
#if $varExists('Extras.webcam2_lapses')
#if $varExists('Extras.webcam1_lapses')
<div class="fade tab-pane in" id="daily2tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="daily2" poster="$Extras.webcam2_lapses$yesterday.dateTime.format('%y%m%d.png')" preload="none"><source id="daily2mp4" src="$Extras.webcam2_lapses$yesterday.dateTime.format('%y%m%d.mp4')" type="video/mp4"></video></div>
#else
<div class="active fade in tab-pane" id="daily2tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="daily2" poster="$Extras.webcam2_lapses$yesterday.dateTime.format('%y%m%d.png')" preload="none"><source id="daily2mp4" src="$Extras.webcam2_lapses$yesterday.dateTime.format('%y%m%d.mp4')" type="video/mp4"></video></div>
#end if
#end if
<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><div class="whitebg lapses"><h3>Timelapse 365d</h3>
#if $varExists('Extras.webcam1_lapses') and $varExists('Extras.webcam2_lapses')
<ul class="nav nav-tabs" id="lapse365Tabs" role="tablist">
#if $varExists('Extras.webcam1_lapses')
<li role="presentation" class="active"><a href="#yearly1tab" data-toggle="tab" aria-controls="home" role="tab">$Extras.webcam1_title</a></li>
#end if
#if $varExists('Extras.webcam2_lapses')
<li role="presentation"><a href="#yearly2tab" data-toggle="tab" aria-controls="home" role="tab">$Extras.webcam2_title</a></li>
#end if
</ul>
#end if
<div class="tab-content">
#if $varExists('Extras.webcam1_lapses')
<div class="active fade in tab-pane" id="yearly1tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="yearly1" poster="$Extras.webcam1_lapses$year($years_ago=1).dateTime.format('%Y.png')" preload="none"><source id="yearly1mp4" src="$Extras.webcam1_lapses$year($years_ago=1).dateTime.format('%Y.mp4')" type="video/mp4"></video></div>
#end if
#if $varExists('Extras.webcam2_lapses')
#if $varExists('Extras.webcam1_lapses')
<div class="fade tab-pane" id="yearly2tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="yearly2" poster="$Extras.webcam2_lapses$year($years_ago=1).dateTime.format('%Y.png')" preload="none"><source id="yearly2mp4" src="$Extras.webcam2_lapses$year($years_ago=1).dateTime.format('%Y.mp4')" type="video/mp4"></video></div>
#else
<div class="active fade in tab-pane" id="yearly2tab" role="tabpanel"><video class="img-responsive video" controls="controls" id="yearly2" poster="$Extras.webcam2_lapses$year($years_ago=1).dateTime.format('%Y.png')" preload="none"><source id="yearly2mp4" src="$Extras.webcam2_lapses$year($years_ago=1).dateTime.format('%Y.mp4')" type="video/mp4"></video></div>
#end if
#end if
<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></div>
72 73
#end if
#if $varExists('almanac')
Philipp's avatar
Philipp committed
74
<div class="whitebg"><h3>Soleil</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>Lune</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>
75
#end if
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
</div></div><footer class="footer"><div class="container">&copy; $current.dateTime.format("%Y") <a href="$Extras.site_link" target="_blank">$Extras.site_owner</a> (<a href="contact.html">Imprint</a>)<br>Powered by <a href="http://weewx.com/" target="_blank">weeWX</a> with <a href="https://www.rabenwetter.de" target="_blank">Rabenwetter Template</a></div></footer>
    <script type="text/javascript">
#if $varExists('Extras.webcam1_img')
      var cam1url = "$Extras.webcam1_img";
#end if
#if $varExists('Extras.webcam2_img')
      var cam2url = "$Extras.webcam2_img";
#end if
#if $varExists('Extras.webcam1_interval')
      var cam1interval = $Extras.webcam1_interval;
#end if
#if $varExists('Extras.webcam2_interval')
      var cam2interval = $Extras.webcam2_interval;
#end if
#if $varExists('Extras.webcam1_lapses')
      var cam1lapses = "$Extras.webcam1_lapses";
#end if
#if $varExists('Extras.webcam2_lapses')
      var cam2lapses = "$Extras.webcam2_lapses";
#end if
    </script>
<script src="assets/js/complete.min.js"></script></body></html>