adamsgaard.dk

my academic webpage
git clone git://src.adamsgaard.dk/adamsgaard.dk # fast
git clone https://src.adamsgaard.dk/adamsgaard.dk.git # slow
Log | Files | Refs | README | LICENSE Back to index

weather.html (2795B)


      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4 	<meta charset="utf-8">
      5 	<meta name="viewport" content="width=device-width, initial-scale=1">
      6 
      7 	<script type="text/javascript">
      8 		function getUrlVars() {
      9 			var vars = {};
     10 			var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
     11 			                                         function(m,key,value) {
     12 			                                             vars[key] = value; });
     13 			return vars;
     14 		}
     15 
     16 		var zip = getUrlVars()["z"];
     17 		if (zip == "" || zip == undefined) {
     18 			zip = 8000;
     19 		}
     20 		var lon, lat;
     21 		if (zip == 1000) {
     22 			lon = "55.68";
     23 			lat = "12.57";
     24 		} else if (zip == 7700) {
     25 			lon = "56.96";
     26 			lat = "8.70";
     27 		} else if (zip == 7730) {
     28 			lon = "57.10";
     29 			lat = "8.72";
     30 		} else if (zip == 8000) {
     31 			lon = "56.16";
     32 			lat = "10.20";
     33 		} else if (zip == 8400) {
     34 			lon = "56.24";
     35 			lat = "10.58";
     36 		} else if (zip == 9520) {
     37 			lon = "56.84";
     38 			lat = "9.89";
     39 		}
     40 	</script>
     41 
     42 	<title id="pagetitle"></title>
     43 
     44 	<style>
     45 		body{
     46 			margin:1em auto;
     47 			max-width:40em;
     48 			padding:0 .62em;
     49 			font:1.2em/1.62 sans-serif;
     50 			color:#4d4d4c;
     51 		}
     52 		h1,h2,h3 {
     53 			text-align:center;
     54 			color:#333;
     55 			line-height:1.2;
     56 		}
     57 		a {
     58 			color:#126b8c;
     59 			text-decoration:none;
     60 		}
     61 		img {
     62 			max-width:100%;
     63 			padding:0.3em 0em;
     64 		}
     65 		@media print {
     66 			body{
     67 				max-width:none
     68 			}
     69 		}
     70 		form {
     71 			text-align:center;
     72 		}
     73 	</style>
     74 </head>
     75 <body>
     76 <article>
     77 <header>
     78 <h1 id="pageheader"></h1>
     79 <aside>
     80 	<center>
     81 		<p>
     82 			<a href="?z=1000">København</a>,
     83 			<a href="?z=7700">Thisted</a>,
     84 			<a href="?z=7730">Hanstholm</a>,
     85 			<a href="?z=8000">Aarhus</a>,
     86 			<a href="?z=8400">Ebeltoft</a>
     87 		</p>
     88 	</center>
     89 </aside>
     90 </header>
     91 
     92 <div style="text-align:center">
     93 	<img src="#" id="dmi-0-2" alt="0-2 days">
     94 	<img src="#" id="dmi-3-9" alt="3-9 days">
     95 	<img src="#" id="clearoutside" alt="Clear Outside forecast">
     96 </div>
     97 
     98 <form action="" method="get">
     99 	<input type="text" placeholder="Postnummer" name="z">
    100 	<input type="submit" value="Gå">
    101 </form>
    102 
    103 </article>
    104 
    105 <script>
    106 	document.getElementById("pagetitle").innerHTML = "Vejrudsigt for " + zip;
    107 	document.getElementById("pageheader").innerHTML = "Vejrudsigt for " + zip;
    108 
    109 	document.getElementById("dmi-0-2").setAttribute("src",
    110 		"https://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by="+zip+"&mode=long&eps=true");
    111 
    112 	document.getElementById("dmi-3-9").setAttribute("src",
    113 		"https://servlet.dmi.dk/byvejr/servlet/byvejr?by="+zip+"&tabel=dag3_9&eps=true");
    114 
    115 	if (lon && lat) {
    116 		document.getElementById("clearoutside").style.visibility = "visible";
    117 		document.getElementById("clearoutside").setAttribute("src",
    118 			"https://clearoutside.com/forecast_image_large/"+lon+"/"+lat+"/forecast.png");
    119 	} else {
    120 		document.getElementById("clearoutside").style.visibility = "hidden";
    121 	}
    122 </script>
    123 
    124 </body>
    125 </html>