commit 5fbe2d73901efb01586cf15c47dd95b954b80f75
parent 1d03ede7793674dcf485a47429e73b8a8a509824
Author: Anders Damsgaard <anders@adamsgaard.dk>
Date: Thu, 5 Dec 2019 14:07:08 +0100
Rewrite weather page to javascript
Diffstat:
| A | output/weather.html | | | 110 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | output/weather.php | | | 74 | -------------------------------------------------------------------------- |
2 files changed, 110 insertions(+), 74 deletions(-)
diff --git a/output/weather.html b/output/weather.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <script type="text/javascript">
+ function getUrlVars() {
+ var vars = {};
+ var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
+ function(m,key,value) {
+ vars[key] = value; });
+ return vars;
+ }
+
+ var zip = getUrlVars()["z"];
+ if (zip == "" || zip == undefined) {
+ zip = 9520;
+ }
+ var lon, lat;
+ if (zip == 1000) {
+ lon = "55.68";
+ lat = "12.57";
+ } else if (zip == 7700) {
+ lon = "56.96";
+ lat = "8.70";
+ } else if (zip == 8000) {
+ lon = "56.16";
+ lat = "10.20";
+ } else if (zip == 9520) {
+ lon = "56.84";
+ lat = "9.89";
+ }
+ </script>
+
+ <title id="pagetitle"></title>
+
+ <style>
+ body{
+ margin:1em auto;
+ max-width:40em;
+ padding:0 .62em;
+ font:1.2em/1.62 sans-serif;
+ color:#4d4d4c;
+ }
+ h1,h2,h3 {
+ color:#333;
+ line-height:1.2;
+ }
+ a {
+ color:#126b8c;
+ text-decoration:none;
+ }
+ img {
+ max-width:100%;
+ }
+ @media print {
+ body{
+ max-width:none
+ }
+ }
+ </style>
+</head>
+<body>
+<article>
+<header>
+<h1 id="demo"></h1>
+<aside>
+ <center>
+ <p>
+ <a href="?z=1000">København</a>,
+ <a href="?z=7700">Thisted</a>,
+ <a href="?z=8000">Aarhus</a>,
+ <a href="?z=9520">Skørping</a>
+ </p>
+ </center>
+</aside>
+</header>
+
+<p>
+<img src="#" id="dmi-0-2" alt="0-2 days">
+<br>
+<img src="#" id="dmi-3-9" alt="3-9 days">
+</p>
+<p>
+<img src="#" id="clearoutside" alt="Clear Outside forecast">
+</p>
+
+</article>
+
+<script>
+ document.getElementById("demo").innerHTML = "Weather forecast for " + zip;
+
+ document.getElementById("dmi-0-2").setAttribute("src",
+ "https://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by="+zip+"&mode=long&eps=true");
+
+ document.getElementById("dmi-3-9").setAttribute("src",
+ "https://servlet.dmi.dk/byvejr/servlet/byvejr?by="+zip+"&tabel=dag3_9&eps=true");
+
+ if (lon && lat) {
+ document.getElementById("clearoutside").style.visibility = "visible";
+ document.getElementById("clearoutside").setAttribute("src",
+ "https://clearoutside.com/forecast_image_large/"+lon+"/"+lat+"/forecast.png");
+ } else {
+ document.getElementById("clearoutside").style.visibility = "hidden";
+ }
+</script>
+
+</body>
+</html>
diff --git a/output/weather.php b/output/weather.php
@@ -1,74 +0,0 @@
-<?php
- $zip = $_GET["z"];
- if ($zip == "") {
- $zip = 9520;
- }
-?>
-<!DOCTYPE html>
-<html lang="en">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Weather in <?php echo $zip; ?></title>
-<style>
- body{
- margin:1em auto;
- max-width:40em;
- padding:0 .62em;
- font:1.2em/1.62 sans-serif;
- color:#4d4d4c;
- }
- h1,h2,h3 {
- color:#333;
- line-height:1.2;
- }
- a {
- color:#126b8c;
- text-decoration:none;
- }
- img {
- max-width:100%;
- }
- @media print {
- body{
- max-width:none
- }
- }
-</style>
-<article>
-<header>
-<h1>Weather in <?php echo $zip; ?></h1>
-<aside>
- <center>
- <p>
- <a href="?z=1000">København</a>,
- <a href="?z=7700">Thisted</a>,
- <a href="?z=8000">Aarhus</a>,
- <a href="?z=9520">Skørping</a>
- </p>
- </center>
-</aside>
-</header>
-<img src="https://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by=<?php echo $zip; ?>&mode=long&eps=true" alt="0-2 days">
-<br>
-<img src="https://servlet.dmi.dk/byvejr/servlet/byvejr?by=<?php echo $zip; ?>&tabel=dag3_9&eps=true" alt="3-9 days">
-<?php
- $lon = "";
- $lat = "";
- if ($zip == 1000) {
- $lon = "55.68";
- $lat = "12.57";
- } elseif ($zip == 7700) {
- $lon = "56.96";
- $lat = "8.70";
- } elseif ($zip == 8000) {
- $lon = "56.16";
- $lat = "10.20";
- } elseif ($zip == 9520) {
- $lon = "56.84";
- $lat = "9.89";
- }
- if ($lon != "") {
- echo "<br><p><img src=\"https://clearoutside.com/forecast_image_large/{$lon}/{$lat}/forecast.png\" alt=\"Clear Outside forecast\"></p>";
- }
-?>
-</article>
