<html>

    <head>
        <title>Han's Covid Speedrun Record</title>
        <meta charset="UTF-8">
        <style>
            body {
                background-color: #333;
                color: #ffffff;
            }
    
            table {
                font-family: monospace;
                color: #fff;
                font-style: bold;
            }
    
            td,
            th {
                text-align: left;
                padding: 8px;
            }
    
            tr:nth-child(even) {
                background-color: #777;
            }
    
            tr:nth-child(odd) {
                background-color: #333;
            }
        </style>
    </head>
    
    <body>
        <table width="100%" height="100%">
            <tbody>
                <tr>
                    <td>
                        <center>
                            <h1>Han's Covid Speedrun Record</h1>
                            <h2>Any% - Omicron Variant</h2>
                            <h4>(Started at 5:51pm EDT on Aug 17 2022)</h4>
                            <table>
                                <tbody id="speedrun">
                                    <tr>
                                        <th>Checkpoint</th>
                                        <th>Time</th>
                                    </tr>
                                </tbody>
                                <tbody id="final"></tbody>
                            </table>
                        </center>
                    </td>
                </tr>
            </tbody>
        </table>
        <script>
            var table = document.getElementById("speedrun");
            var final = document.getElementById("final");
    
            var timeline = { // I actually can't recall that much detail so this is just a rough estimate
                "Possible Exposure": new Date("Aug 14, 2022 22:00:00"),
                "Sore Throat": new Date("Aug 15, 2022 20:01:14.861"),
                "Runny Nose": new Date("Aug 17, 2022 11:18:07.751"),
                "First Positive": new Date("Aug 17, 2022 17:51:10.123"),
                "Highest Temperature (37.7 ℃)": new Date("Aug 17, 2022 21:36:00.000"),
                "Sweating": new Date("Aug 18, 2022 09:32:22.441"),
                "Oxygen Lvl Stays at 96%": new Date("Aug 18, 2022 10:00:00.000"),
                "Headache (Mild)": new Date("Aug 18, 2022 22:11:33.451"),
                "No Symptom (while not talking)": new Date("Aug 19, 2022 10:31:12.516"),
                "Oxygen Lvl back to normal 97%-98%" : new Date("Aug 19, 2022 11:00:00.000"),
                "Wake Up without Symptom": new Date("Aug 20, 2022 09:12:44.915"),
                "Tickly Throat": new Date("Aug 20, 2022 20:27:32.013"),
                "Fully Recovered": new Date("Aug 21, 2022 11:30:00.123"),
            }
    
            for (var event in timeline) {
                var row = table.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = event;
                cell2.innerHTML = timeSince(timeline[event] - timeline["First Positive"]);
                if (event == "First Positive") {
                    cell1.style.color = "#ff0000";
                    cell2.style.color = "#ff0000";
                }
            }
    
            // Last Row
            var row = table.insertRow();
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.style.color = "#00ff00";
            cell2.style.color = "#00ff00";
            // // Still Running
            // cell1.innerHTML = "NOW";
            // function now() {
            //     cell2.innerHTML = timeSince(new Date() - timeline["First Positive"]);
            // }
            // setInterval(now, 10);
            // Win
            cell1.innerHTML = "Tested Negative!";
            cell2.innerHTML = timeSince(new Date("Aug 21, 2022 17:50:57.303") - timeline["First Positive"]);
            var row = final.insertRow();
            var cell = row.insertCell(0);
            cell.colSpan = 2;
            cell.innerHTML = "🏆 3d 23:59:47.180";
            cell.style.color = "#00ff00";
            cell.style.fontSize = "30px";
            cell.style.textAlign = "right";
    
            function timeSince(timestamp) {
                var sign = "+";
                if (timestamp < 0) {
                    sign = "-";
                    timestamp = -timestamp;
                }
                var d = Math.floor(timestamp / 86400000);
                timestamp -= d * 86400000;
                var h = Math.floor(timestamp / 3600000);
                timestamp -= h * 3600000;
                var m = Math.floor(timestamp / 60000);
                timestamp -= m * 60000;
                var s = Math.floor(timestamp / 1000);
                timestamp -= s * 1000;
                var ms = Math.floor(timestamp);
    
                return sign + String(d).padStart(2, '0') + "d " + String(h).padStart(2, '0') + ":" + String(m).padStart(2, '0') + ":" + String(s).padStart(2, '0') + "." + String(ms).padStart(3, '0');
            }
        </script>
    </body>
    
    </html>