Use openweathermap module in web app.
[chrisu/seepark.git] / web / templates / seepark_web.html
1 <!DOCTYPE html>
2 <html lang="de">
3         <head>
4                 <!-- mobile first, yeah -->
5                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7                 <!-- don't cache; refresh -->
8                 <meta http-equiv="Pragma" content="no-cache" />
9                 <meta http-equiv="Cache-Control" content="no-cache" />
10                 <meta http-equiv="Refresh" content="300" />
11
12                 <!-- Load c3.css -->
13                 <link href="{{url_for('static', filename='c3.css')}}" rel="stylesheet">
14
15                 <!-- Load own css -->
16                 <link href="{{url_for('static', filename='seepark_web.css')}}" rel="stylesheet">
17
18                 <!-- Load d3.js and c3.js -->
19                 <script src="{{url_for('static', filename='d3.js')}}" charset="utf-8"></script>
20                 <script src="{{url_for('static', filename='c3.js')}}"></script>
21
22                 <title>Seepark Obsteig</title>
23         </head>
24         <body>
25                 <h1>Daten zum Seepark Obsteig</h1>
26                 <h2>Aktuelle Werte</h2>
27                 <div id="current">
28                 <p id="currentair">
29                         {% if airvalue is none %}
30                         <strong>Luft: N/A</strong>
31                         {% else %}
32                         <strong>Luft: {{ airvalue }}°C</strong><br />
33                         <small>({{ airtime }})</small>
34                         {% endif %}
35                 </p>
36                 <p id="currentwater">
37                         <strong>Wasser: {{ watervalue }}°C</strong><br />
38                         <small>({{ watertime }})</small>
39                 </p>
40                 </div>
41
42                 <h2>Der See</h2>
43                 <div id="chart1"></div>
44                 <div id="chart7"></div>
45                 <div id="chart31"></div>
46                 <div id="chart365"></div>
47
48                 <!-- openweathermap widget -->
49                 <div id="openweathermap-widget-15"></div>
50                 <script>
51                 window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];
52                 window.myWidgetParam.push({
53                         id: 15,
54                         cityid: '3319578',
55                         appid: '{{ apikey }}',
56                         units: 'metric',
57                         containerid: 'openweathermap-widget-15',
58                         lang: 'de',
59                 });
60                 (function() {
61                         var script = document.createElement('script');
62                         script.async = true;
63                         script.charset = "utf-8";
64                         script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
65                         var s = document.getElementsByTagName('script')[0];
66                         s.parentNode.insertBefore(script, s);
67                 })();
68                 </script>
69
70                 <!-- Load own javascript code -->
71                 <script src="{{url_for('static', filename='seepark_web.js')}}"></script>
72
73         </body>
74 </html>