cringe-studios.com/T erreser/testat1.html

78 lines
4.5 KiB
HTML
Raw Permalink Normal View History

2022-11-04 16:30:10 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="Weather Data">
<style>
li{display:inline-block;list-style-type:none; margin-right:10%; margin-left:10%;}
body{padding:0px; background-color:yellow;margin:0px;font-family: Courier; text-align:center;}
.fixed{padding:20px;width:100%;position:fixed;margin:0px}
header{border-bottom-style:solid; background-color:Red; top:0;}
footer{border-top-style:solid;background-color:blue;bottom:0;}
button{cursor: not-allowed; opacity: 0.6;border:none; border-radius:25px; padding:16px 32px; display:inline-block;text-decoration:none;text-align:center;background-color:Gainsboro; -webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;}
button:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
/*cursor:pointer;*/
.hor-center{width: 100%; height:100%;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
.center{position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
.left-center{position:absolute;top: 50%;-ms-transform: translate(0%, -50%);transform: translate(0%, -50%); }
.left{width:15%;height:100%;position:absolute;background-color:Orange;border-right-style:solid;}
/* nav{position:absolute; left:0%;}*/
.text_left{text-align:left;}
.text_right{text-align:right;padding-right:10%}
.th{/*margin-right:20%;*/ background-color:turquoise; border-style: double solid solid double; border-radius: 5px; padding: 2px}
article{border-radius:5px; border-style: double solid solid double; cursor:wait; background-color: Lime; padding: 2px}
</style>
<script src="./testat1.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<div class="left">
<div class="left-center">
<nav style="text-align:right;"> Navigation:
<ul style= "text-align:right;">
<li style="text-align:left; margin-right:0%; margin: 2%;"><a href="https://www.hof-university.de">Hofschule Hoch</a></li>
<li style="text-align:left; margin-right:0%; margin: 2%;"><a href="https://moodle.hof-university.de">Moodle</a></li>
</ul>
</nav>
</div>
</div>
<header class="fixed"><h1 style="color:blue;">DAS WETTER IN HOF</h1></header>
<section class="center">
<div>
<table>
<tr><th class ="text_right"><div class="th">Attribut</div></th><th class ="text_left"><div class = "th">Wert</div></th></tr>
<tr><td class="text_right"><article>Uhrzeit der Datenmessung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Temperatur</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Luftfeuchtigkeit</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Luftdruck</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Windgeschwindigkeit</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Windgeschwindigkeit in km/h</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Windrichtung in Grad</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Windrichtung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Sonneneinstrahlung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Niederschlag</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Temperatur der Erde</article></td><td class ="text_left"><article>Loading...</article></td></tr>
<tr><td class="text_right"><article>Feuchtigkeit der Erde</article></td><td class ="text_left"><article>Loading...</article></td></tr>
</table>
</div>
</section>
</div>
<footer class="fixed">
<ul>
<li><button onclick="toggleHeaderVisibility();">Toggle V</button></li>
<li><button onclick="makeArticlesInvisible();">Hide Article</button></li>
<li><button onclick="makeArticlesVisible();">Show Hidden Article</button></li>
</ul>
</footer>
<script>
bottomFunction();
</script>
</body>
</html>