src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IP Info</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
    <link rel="manifest" href="./icons/site.webmanifest">
    <style>
        html {
            background: #212121;
            color: #d7d7d7;
        }

        #data {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 25px;
            font-family: sans-serif;
            font-size: 45px;
        }

        #data.error {
            color: #ff5858;
        }
    </style>
    <script src="./api.js"></script>
</head>
<body>
<div id="data"></div>
</body>
</html>