<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wetter</title>
<style>
@import url( "https://fonts.googleapis.com/css2?family=Lato&display=swap" );
body,
html {
margin: 0;
height: 100%;
color: white;
font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}
.front {
height: 100%;
}
.left-container {
width: 100%;
height: 100%;
background-image: url( 'bg.mp4' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg {
width: 100%;
height: 100%;
background-image: linear-gradient( 333deg, rgba(34, 193, 195, 1) 0%, rgba(224, 45, 253, 1) 100%) ;
opacity: 0.38;
}
.date-container {
position: absolute;
top: 25px;
left: 35px;
}
.day {
display: block;
font-size: 60px;
font-weight: 900;
}
.date {
display: block;
font-size: 25px;
font-weight: 100;
}
.weather {
position: absolute;
left: 35px;
bottom: 40px;
}
.degrees {
display: block;
font-size: 110px;
font-weight: 900;
}
.desc {
font-size: 30px;
}
</style>
</head>
<body>
<div class="front">
<div class="left-container">
<div class="bg"></div>
<div class="date-container">
<span class="day"><span id="day"></span><span id="date" class="date"></span></span>
</div>
<div class="weather">
<span class="degrees"><span id="temp"></span>°C</span> <span id="desc" class="desc"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
const API_KEY = "7ef3a27bfd60cfd79f025e3a30c2f46b";
const city = "hameln";
const unit = "C";
const unit_map = "metric"
const monthNames = [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ];
const dayNames = [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ];
function updateDateInfo() {
var d = new Date;
var year = d.getFullYear();
var month = monthNames[ d.getMonth() ];
var date = d.getDate();
var day = dayNames[ d.getDay() ];
var dateSting = month + ' ' + date + ', ' + year;
document.getElementById( 'day' ).innerHTML = day;
document.getElementById( 'date' ).innerHTML = dateSting;
}
function updateWeatherInfo() {
fetch( `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${unit_map}&APPID=${API_KEY}&lang=de` )
.then( response => response.json() ).then( data => {
document.getElementById( 'desc' ).innerHTML = data['weather'][0]['description'];
document.getElementById( 'temp' ).innerHTML = Math.round( data['main']['temp'] );
} )
}
updateDateInfo();
updateWeatherInfo();
setTimeout( updateDateInfo, 30 * 60 * 1000 );
setTimeout( updateWeatherInfo, 5 * 60 * 1000 );
</script>
评论1