<!DOCTYPE html>
<html lang='en'>
<head>
        <title>Aurora</title>
        <META HTTP-EQUIV="Refresh" CONTENT="60">
        <meta charset="UTF-8">
        <meta name="author" content="Arnau Busom i Vidal">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
    <div style="text-align: center;">
        <h1>Data from IRF Kiruna</h1>
        <div style="display: inline-block; padding: 10px;">
            <h3>Latest image from the All Sky camera</h3>
            <img src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'>
        </div>
        <div style="display: inline-block; padding: 10px;">
            <h3>Latest movie from the All Sky camera</h3>
            <video autoplay loop src='https://www.irf.se/alis/allsky/krn/latest_movie.mp4'></video>
        </div>
    </div>
    <div style="text-align: center;">
        <h1>Aurora Forecast</h1>
        <div style="display: inline-block; padding: 10px;">
            <h3>Kp index now</h3>
            <span id="kp_now"></span>
        </div>
        <div style="display: inline-block; padding: 10px;">
            <h3>Kp index in 3 hours</h3>
            <span id="kp_3"></span>
        </div>
        <h2>Advanced data</h2>
        <img src='https://www.spaceweather.se/content/irf-kp.png'>
    </div>
    <footer style="text-align: center;">
        All data has been obtained from <a href="https://www.irf.se/">IRF</a>, any use or distribution of the data has to comply with <a href="https://www.irf.se/wp-content/uploads/2020/02/License-agreement.pdf">this</a> license.
        <br>
        This site has been created by Arnau Busom Vidal. The source code and the license for the site can be found <a href="">here</a>.
    </footer>
</body>

<script>
    async function api(){
        const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json');
        const data = await res.json();
        var kp_now = data.kp[6];
        var kp_3 = data.kp[7];
        document.getElementById('kp_now').textContent = Number(kp_now.toFixed(2));
        document.getElementById('kp_3').textContent = Number(kp_3.toFixed(2));
    }

    window.onload = api;
</script>
</html>