-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (99 loc) · 4.73 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Twitch Farts Bot</title>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap452.min.css">
<link rel="stylesheet" href="assets/css/dark.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
</head>
<style>
.hide {
display: none;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="h3 pt-4 pl-lg-4 text-center">Twitch Chat Farts Bot</h1>
</div>
<div class="col-2 text-center">
<img src="assets/images/robot.gif" style="width: 60px;" alt="">
</div>
</div>
<br>
<div class="form-label-group mb-2">
<label for="mainAccount">Twitch Account</label>
<input type="text" id="mainAccount" class="form-control">
</div>
<div class="form-label-group mb-2 range-slider">
<label for="coolDown">Cool Down</label>
<input type="range" max="3600" min="1" step="1" class="form-control range-slider-range" id="coolDown"
value="5" style="height: 0;">
<small class="text-muted range-slider-value"></small><small class="text-muted range-slider-value"> Seconds</small>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="modsonly">
<label class="form-check-label" for="modsonly">
Mods Only
</label>
</div>
<br>
<button class="btn btn-lg btn-success btn-block" id="generate_button" type="button">Generate Overlay Link</button>
<br>
<div id="overlaylink" class="hide"></div>
</div>
<script>
$(document).ready(function () {
let rangeSlider = function rangeSlider() {
let slider = $('.range-slider'),
range = $('.range-slider-range'),
value = $('.range-slider-value');
slider.each(function () {
value.each(function () {
let value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function () {
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
document.getElementById("generate_button").addEventListener("click", function (e) {
let mainAccount = document.getElementById("mainAccount").value;
let coolDown = document.getElementById("coolDown").value;
coolDown = coolDown + '000'; // convert seconds to milliseconds
let modsonly = document.getElementById("modsonly").checked;
if (!mainAccount) {
alert('Twitch username is not set');
}
//build overlay url
if (mainAccount) {
let srcURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
let fullUrl = srcURL + "farts.html?channel=" + mainAccount.toLowerCase() + "&modsonly=" + modsonly + "&cooldown=" + coolDown;
document.getElementById("overlaylink").classList.remove("hide");
document.getElementById("overlaylink").innerHTML = "<p>Add this link as a browser source in OBS.<br>" +
"<a href='" + fullUrl + "' target='_blank'>" + fullUrl + "</a></p>";
}
});
});
</script>
<div class="text-right m-4"><a class="btn btn-link" href="https://github.com/teklynk/twitch_fart_bot" target="_blank">Github</a></div>
</body>
</html>