-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
125 lines (117 loc) · 3.94 KB
/
index.html
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
122
123
124
125
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="bg-secondary">
<div class="container bg-light text-dark py-4">
<form>
<div class="row mb-3">
<div class="col-2">
<label for="username" class="col-form-label">username:</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="username" placeholder="channelname" required>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label for="oauth" class="col-form-label">oauth:</label>
</div>
<div class="col-4">
<input type="password" class="form-control" name="oauth" placeholder="oauth:..." required>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label for="oauth" class="col-form-label">channel:</label>
</div>
<div class="col-4">
<input type="text" class="form-control" name="channel" placeholder="channelname" required>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label for="type" class="col-form-label">type:</label>
</div>
<div class="col-4">
<select class="form-select" name="type">
<option value="chat">chat</option>
<option value="emote-wall">emote wall</option>
</select>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" name="remember">
<label for="remember" class="form-check-label">remember?</label>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
<div class="row mt-5 mb-3 d-none" id="directions">
<div class="col-auto">
<label for="url" class="col-form-label">copy this to a browser scene</label>
</div>
<div class="col-auto">
<input type="text" name="url" class="form-control" readonly>
</div>
</div>
</div>
<script>
(() => {
let KEY = 'overlay-creds';
let uE = document.querySelector('[name=username]');
let oE = document.querySelector('[name=oauth]');
let cE = document.querySelector('[name=channel]');
let tE = document.querySelector('[name=type]');
let rE = document.querySelector('[name=remember]');
let d = localStorage.getItem(KEY);
if (d) {
let data = JSON.parse(d);
uE.value = data.username;
oE.value = data.oauth;
cE.value = data.channel;
tE.value = data.type;
rE.checked = true;
}
let form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
let username = uE.value;
let oauth = oE.value;
let channel = cE.value;
let type = tE.value;
let remember = rE.checked;
if (remember) {
localStorage.setItem(KEY, JSON.stringify({username, oauth, channel, type}));
} else {
localStorage.removeItem(KEY);
}
let css = await (await fetch(`overlays/${type}/main.css?${+Date.now()}`)).text();
let js = await (await fetch(`overlays/${type}/main.js?${+Date.now()}`)).text();
let input = (k, v) => {
let ret = document.createElement('input');
ret.type = 'hidden';
ret.id = k;
ret.value = v;
return ret.outerHTML;
};
let html = `
<!doctype html>
<html>
<head><meta charset="utf-8"><style>${css}</style></head>
<body>
${input('u', username)}
${input('c', channel)}
${input('o', oauth)}
<script>${js}</scrip${'t'}>
</body>
</html>
`;
document.querySelector('[name=url]').value = `data:text/html;base64,${btoa(html)}`;
document.getElementById('directions').classList.remove('d-none');
});
})();
</script>
</body>
</html>