ZoneOut/ban.html at main · hackclub/ZoneOut · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/themes.css">

<script>
// theme, read before the first paint
try {
    var zoTheme = localStorage.getItem("zoneoutTheme") || "fnaf";
    if (zoTheme !== "default" && /^[a-z0-9-]{1,24}$/.test(zoTheme)) {
        document.documentElement.setAttribute("data-theme", zoTheme);
        var zoMeta = document.querySelector('meta[name="theme-color"]');
        if (zoMeta) zoMeta.content = { bw: "#0a0a0a", fnaf: "#000000", halloween: "#080402" }[zoTheme] || "#000000";
    }
} catch (e) {}
</script>
<title>Banned</title>

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<style>

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Courier New",monospace;
}

body{
background:rgb(var(--bg));
color:rgb(var(--fg));
line-height:1.6;
min-height:100vh;
min-height:100dvh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:22px;
padding:24px;
text-align:center;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

/* BAN NOTICE */
.banTitle{
font-size:clamp(28px,8vw,54px);
letter-spacing:6px;
font-weight:bold;
}

.banReason{
max-width:min(640px, 100%);
font-size:clamp(14px,3.4vw,18px);
line-height:1.7;
letter-spacing:1px;
color:rgb(var(--dangerBan));
word-break:break-word;

min-height:1.7em;
}

.banFoot{
margin-top:10px;
font-size:13px;
letter-spacing:2px;
opacity:0.4;
}

</style>
</head>

<body>

<div class="banTitle glitchText" data-text="YOU'VE BEEN BANNED!">YOU'VE BEEN BANNED!</div>

<div class="banReason" id="banReason" role="status" aria-live="polite"></div>

<div class="banFoot">ZONEOUT</div>

<script>

// the reason is fetched, never passed in the url
var reasonEl = document.getElementById("banReason");

fetch("/api/auth/ban", { credentials: "same-origin" })
    .then(function (response) {
        if (!response.ok) return null;
        return response.json();
    })
    .then(function (payload) {
        if (!payload) {
            reasonEl.textContent = "";
            return;
        }

        if (!payload.banned) {
            window.location.replace("/");
            return;
        }

        reasonEl.textContent = payload.reason;
    })
    .catch(function () {
        reasonEl.textContent = "";
    });

</script>

</body>
</html>