This commit is contained in:
Vendored
+98
@@ -0,0 +1,98 @@
|
||||
<h1>Sugoi Streamathon Timer</h1>
|
||||
<div id="status">Loading...</div>
|
||||
<br>
|
||||
<form id="config">
|
||||
<label>
|
||||
Starting Time:
|
||||
<input type="text" name="start-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="8:00:00" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="max-time-enabled" checked>
|
||||
Maximum Time:
|
||||
<input type="text" name="max-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="12:00:00" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="sub1000-time-enabled" checked>
|
||||
Time Per T1 Sub:
|
||||
<input type="text" name="sub1000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="500" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="sub2000-time-enabled" checked>
|
||||
Time Per T2 Sub:
|
||||
<input type="text" name="sub2000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1000" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="sub3000-time-enabled" checked>
|
||||
Time Per T3 Sub:
|
||||
<input type="text" name="sub3000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="2500" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="bit-time-enabled" checked>
|
||||
Time Per Bit:
|
||||
<input type="text" name="bit-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="follow-time-enabled" checked>
|
||||
Time Per Follow:
|
||||
<input type="text" name="follow-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1:00" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="raid-time-enabled" checked>
|
||||
Time Per Raid:
|
||||
<input type="text" name="raid-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="10:00" required>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="charity-time-enabled" checked>
|
||||
Time Per Charity Cent:
|
||||
<input type="text" name="charity-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1" required>
|
||||
</label>
|
||||
<br>
|
||||
<br>
|
||||
<label>
|
||||
StreamElements Overlay Token:
|
||||
<input type="text" name="streamelements-token">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" name="tip-time-enabled" checked>
|
||||
Time Per Tip Cent:
|
||||
<input type="text" name="tip-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1">
|
||||
</label>
|
||||
<br>
|
||||
<br>
|
||||
<button type="submit">Save</button>
|
||||
<button type="reset">Defaults</button>
|
||||
<a id="timer-link" href="index.html" target="_blank">Browser Source</a>
|
||||
<div>
|
||||
<h3>Chat Commands for Moderators:</h3>
|
||||
!subathon start <br>
|
||||
!subathon pause <br>
|
||||
!subathon add 1:0:0 <br>
|
||||
!subathon reset
|
||||
</div>
|
||||
</form>
|
||||
<style>
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
::placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
iframe {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<script type="module" src="js/config.js"></script>
|
||||
Vendored
+79
@@ -0,0 +1,79 @@
|
||||
* {
|
||||
font-family: 'Ubuntu', sans-serif !important;
|
||||
}
|
||||
|
||||
body,
|
||||
body * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #A020F0;
|
||||
--shadow-color: #00000090;
|
||||
--text-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*background-color: var(--background-color);*/
|
||||
background-image:
|
||||
-webkit-linear-gradient(-45deg,
|
||||
transparent 33%, rgba(0, 0, 0, .1) 33%,
|
||||
rgba(0, 0, 0, .1) 66%, transparent 66%),
|
||||
-webkit-linear-gradient(top,
|
||||
rgba(255, 255, 255, .25),
|
||||
rgba(0, 0, 0, .25)),
|
||||
-webkit-linear-gradient(left, #0074cc, #a700cc);
|
||||
box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
|
||||
width: 500px;
|
||||
height: 180px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#textDiv {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-color);
|
||||
font-size: 5.8rem;
|
||||
z-index: 1;
|
||||
text-shadow: 0px 0px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.addedTime {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
font-weight: 400;
|
||||
font-size: 3.25rem;
|
||||
color: white;
|
||||
animation: slidefadeout 2s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes slidefadeout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
top: 50%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
top: 25%;
|
||||
}
|
||||
}
|
||||
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<title>Subathon Timer</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" class="timer">
|
||||
<div id="textDiv">
|
||||
<p id="timeText">00:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user