pixies

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html lang="en">
3<head>
4    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
5    <meta name="viewport" content="width=device-width"/>
6    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23232835'/%3E%3Cpath d='M15 63H33L45 23L59 77L69 52' fill='none' stroke='%2335E0A0' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='66' y='34' width='16' height='16' rx='6' fill='%2335E0A0'/%3E%3Crect x='78' y='19' width='9' height='9' rx='3' fill='%2335E0A0'/%3E%3C/svg%3E" type="image/svg+xml"/>
7    <title>Pixies [Dev Mode]</title>
8    <style type="text/css">
9        body, html {
10            font-family: sans-serif;
11            color: #FEFEFE;
12            background-color: #232835;
13            padding: 0;
14            margin: 0;
15            height: 100vh;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            flex-direction: column;
20            text-align: center;
21            gap: 1rem;
22        }
23
24        .logo {
25            display: flex;
26            gap: 1rem;
27            align-items: center;
28            user-select: none;
29        }
30
31        .logo svg {
32            width: 2.5rem;
33            height: 2.5rem;
34        }
35
36        .logo span {
37            color: #3EA95A;
38        }
39
40        code {
41            background-color: #1d2128;
42            padding: 0.5rem;
43            border-radius: 0.4rem;
44        }
45
46        p {
47            margin: 0.5rem;
48            font-size: 16pt;
49        }
50
51        button {
52            background-color: #3EA95A;
53            border: none;
54            border-radius: 0.4rem;
55            padding: 0.5rem 1rem;
56            color: #1d2128;
57            font-weight: bold;
58            font-size: 13pt;
59            cursor: pointer;
60            transition: 0.2s;
61        }
62
63        button:hover {
64            transform: rotate(-1deg);
65        }
66
67        button:active {
68            transform: scale(0.95);
69        }
70
71        .hidden {
72            display: none;
73        }
74    </style>
75</head>
76<body>
77
78<div class="logo">
79    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40" role="img" aria-label="Pixies">
80        <path d="M15 63H33L45 23L59 77L69 52" fill="none" stroke="#35E0A0" stroke-width="10"
81              stroke-linecap="round" stroke-linejoin="round"/>
82        <rect x="66" y="34" width="16" height="16" rx="6" fill="#35E0A0"/>
83        <rect x="78" y="19" width="9" height="9" rx="3" fill="#35E0A0"/>
84    </svg>
85    <h1>Pixies <span>Dev Mode</span></h1>
86</div>
87
88<div class="explanation">
89    <p>Your Pixies instance is currently in development mode.</p>
90    <p>Please build the client or use a production binary,</p>
91    <p>if this is a production environment or go to the development</p>
92    <p>environment.</p>
93</div>
94
95<button onclick="window.location.href = 'http://localhost:5173';" class="hidden">Go to development environment</button>
96
97</body>
98<script type="text/javascript">
99    fetch("http://localhost:5173").then(res => {
100        if (res.status === 200)
101            document.querySelector("button").classList.remove("hidden");
102    }).catch(err => {
103        console.error(err);
104    });
105</script>
106</html>