This is a Twitch Subathon Countdown originally by JayexDesigns.
-
The CSS Code is updated by Johnnycyan. The JS Files are updated by leabdd and danilotitato to add functionalities.
-
+# Improved Twitch Subathon Countdown
+This is a Twitch Subathon Countdown originally by JayexDesigns.
-
Description
-
A subathon timer that increases when someone subscribes, donates money, donates bits or purchases streamloots chests.
-
Added is a Timer that gets saved (in localStorage) and can be reset.
-
When you open the index.html you get to chose between "Reset" or "Start".
-
+The CSS Code is updated by Johnnycyan.
-
Shortcuts
-
To pause the Timer: CTRL+ALT+P
-
To enable/disable Happy Hour: CTRL+ALT+H
-
To enable/disable Random Hour: CTRL+ALT+R
-
Shortcuts can be changed in config.js
-
+The JS Files have been re-written by SugoiDogo.
-
Preview
-
-
+## Description
+A subathon timer that increases when someone subscribes, donates to your charity, donates bits, follows or raids.
-
Usage
-
After cloning this repository you'll have to edit the "config.js" file with any plain text editor, then change the value of the variables according to what you want:
+## Usage
+Go to the [config page](https://sugoidogo.github.io/twitch-subathon-countdown/config.html), authorize the timer, and configure to your liking.
-
Twitch
-
To get your Subs and Bits you just have to add your Channel Name.
+## Support
+See [my github profile](https://github.com/sugoidogo)
-
Streamlabs Token
-
To get the token you'll have to go to the API settings tab of your Streamlabs dashboard then click on API Tokens, copy your socket API token and finally paste the code on the "streamlabs_token" variable in the "config.js" file.
-
-
-
StreamElements Token
-
To get the token you'll have to go to your StreamElements channels dashboard, then click on show secrets, copy the Overlay token and paste the code on the "streamelements_token" variable in the "config.js" file.
-
-
-
Streamloots Token
-
To get the token you'll have to go to your Streamloots creator dashboard, then to alerts & widgets, then go to alerts, then copy the last part of the alerts url and finally paste the code on the "streamloots_token" variable in the "config.js" file.
-
-
-
Initial Time
-
You can set the initial time of the timer by setting the hours, minutes and seconds to be added when the timer is created.
-
-
Random Happy Hour
-
If this is true, you can turn enable Happy or Random Hour with the Shortcut. If it is false, the feature is disabled and cant be enabled.
-
You have to set the Happy Hour time values manually.
-
Random Hour has a bell curve which can be edited in the config. It multiplies the normal time by a random amount for each sub.
-
If enabled randHappy it can randomly activate the Happy Hour. It will last for one hour, but can be turned off manually with the Shortkey.
-
In the Config you can set a specific Date and Time. At that a Happy Hour will happen. scheduleHappy needs to be turned on.
-
-
Bulk
-
This enables that multiple Subs get added to the timer at once.
-
For Example when a user gifts 10 Subs.
-
-
Full control on what to use
-
You can enable and disable if you want to add time for Subscriptions, Bits, Donations or Chests.
-
-
Other Values
-
Change the other values to set the amount of seconds that will be added for the subscriptions, donations... And the minimum donation amounts to trigger the countdown increase.
-
-
Add To OBS
-
To add it to OBS you just have to drag the "index.html" file to the sources section or add a browser source that points to the "index.html" file.
-
-
Known Problems
-Only Streamelements Token in config.js does not add time for Subscriptions. Emulate with the Overlay Editor does work.
+## Missing Features
+The original version of this overlay included support for events from StreamElements, StreamLabs, and Streamloots,
+and the version this is forked from included additional features by leabdd and danilotitato,
+such as Random Happy Hour and Bulk Events.
+This fork is an almost total re-write of the core JS code behind the timer,
+so those features will also have to be re-written to be included in this fork.
+Future versions of this timer will include a plug-in loader,
+allowing additional features and event sources to be added without additional forking.
\ No newline at end of file
diff --git a/auth_streamelements.png b/auth_streamelements.png
deleted file mode 100644
index 2a53a16..0000000
Binary files a/auth_streamelements.png and /dev/null differ
diff --git a/auth_streamlabs.png b/auth_streamlabs.png
deleted file mode 100644
index 1241813..0000000
Binary files a/auth_streamlabs.png and /dev/null differ
diff --git a/auth_streamloots.png b/auth_streamloots.png
deleted file mode 100644
index 22e2d56..0000000
Binary files a/auth_streamloots.png and /dev/null differ
diff --git a/config.js b/config.js
deleted file mode 100644
index c2cdb2e..0000000
--- a/config.js
+++ /dev/null
@@ -1,80 +0,0 @@
-// Happy Hour
-var happy_hour = true // set to true or false, to enable/disable the happy hours function
-var random_hour = true
-var randHappy = false // only works if happy_hour = true
-var scheduleHappy = false // only works if happy_hour = true
-
-// needs scheduleHappy to be true
-var scheduleHappyDay = 5 // Weekdays from 0 to 6 from Sunday to Saturday | Default 5 is Friday
-var scheduleHappyHour = 18 // Hours in 24 format UTC Time | Default 18 is 20:00 CEST
-
-// Bulk (if you want multiple subs to add to a big sum or each alone)
-var bulk_enabled = false
-
-//Shortcuts
-var pauseShort = "ctrl+alt+p"
-var happyHourShort = "ctrl+alt+h"
-var randomHourShort = "ctrl+alt+r"
-
-// Login Data
-var twitch_channel_name = ""
-var streamlabs_token = ""
-var streamelements_token = ""
-var streamloots_token = ""
-
-// Initial Counter Config
-var initialHoursConfig = 2
-var initialMinutesConfig = 0
-var initialSecondsConfig = 0
-
-// Sync Time, amount of seconds it waits after the timer hit 0 to stop it. Useful for last Second Subs.
-var syncTime = 2 // Default 2 seconds.
-
-// Enable/Disable Subs, Bits, Donations, Chests
-var subEnable = true
-var bitEnable = false
-var donationEnable = false
-var chestEnable = false
-
-// General Twitch, Streamlabs And StreamElements Config
-var seconds_added_per_sub_prime = 60
-var seconds_added_per_sub_tier1 = 60
-var seconds_added_per_sub_tier2 = 180
-var seconds_added_per_sub_tier3 = 480
-
-var seconds_added_per_resub_prime = 60
-var seconds_added_per_resub_tier1 = 60
-var seconds_added_per_resub_tier2 = 180
-var seconds_added_per_resub_tier3 = 480
-
-var seconds_added_per_giftsub_tier1 = 60
-var seconds_added_per_giftsub_tier2 = 180
-var seconds_added_per_giftsub_tier3 = 480
-
-var min_amount_of_bits = 50
-var seconds_added_per_bits = 30
-
-// Streamlabs And StreamElements Config
-var min_donation_amount = 1
-var seconds_added_per_donation = 30
-
-// Streamloots Config
-var min_amount_of_chests = 1
-var seconds_added_per_chests = 30
-
-
-// General Twitch, Streamlabs And StreamElements Config for Happy Hour
-var factor_t1 = 1.5
-var factor_t2 = 1.75
-var factor_t3 = 2.0
-var factor_bits = 1.5
-var factor_donations = 1.5
-
-
-// General Twitch, Streamlabs And StreamElements Config for Random Hour
-// [min, max, skew]
-var range_t1 = [0.1, 3, 1]
-var range_t2 = [0.1, 3, 2]
-var range_t3 = [0.1, 3, 3]
-var range_bits = [0.1, 3, 1]
-var range_donations = [0.1, 3, 1]
diff --git a/css/style.css b/css/style.css
index 144cb1d..bdd42b3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,7 +2,8 @@
font-family: 'Ubuntu', sans-serif !important;
}
-body, body * {
+body,
+body * {
padding: 0;
margin: 0;
font-family: 'Manrope', sans-serif;
@@ -13,16 +14,12 @@ body {
height: 100vh;
}
-
-
:root {
--background-color: #A020F0;
--shadow-color: #00000090;
--text-color: #FFFFFF;
}
-
-
#container {
position: absolute;
top: 50%;
@@ -30,63 +27,17 @@ body {
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);
+ -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;
- visibility: hidden;
-}
-
-#SpecialHourText {
- opacity: 0;
- font-size: 2.5rem;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
-}
-
-/* #HappyHourDeactive {
- visibility: hidden;
- font-size: 3rem;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
-}
-
-#HappyHourError {
- visibility: hidden;
- font-size: 3rem;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
-} */
-
-#SpecialHourHTML {
- top:-200px;
- position: relative;
-}
-
-#startPage {
- position: absolute;
- align-items: center;
- top: 75%;
- left: 50%;
- transform: translate(-50%, -50%);
- /*background-color: var(--background-color);*/
- width: 150px;
- height: 50px;
- border-radius: 30px;
- background:none;
}
#textDiv {
@@ -96,79 +47,6 @@ body {
height: 100%;
}
-.button {
- border-radius: 30px;
- box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
- justify-content: center;
- align-items: center;
- display: flex;
- height: 100%;
- width: 150px;
- height: 50px;
- top: 50%;
- left: 50%;
- color:white;
- /*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);*/
- background:none;
-}
-
-#firstButtonDiv, #secondButtonDiv {
- 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);
- width: 150px;
- height: 50px;
- display: inline-block;
-}
-
-#firstButtonDiv:hover, #secondButtonDiv:hover {
- 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, #0061ac, #8e00ad)!important;
-}
-
-#firstButtonDiv, #secondButtonDiv {
- border-radius: 30px;
- justify-content: center;
- align-items: center;
- display: flex;
- height: 100%;
- width: 150px;
- height: 50px;
- top: 50%;
- left: 50%;
- color:white;
- 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);
-}
-
-#secondButtonDiv {
- margin-top:10px;
-}
-
p {
color: var(--text-color);
font-size: 5.8rem;
@@ -176,54 +54,26 @@ p {
text-shadow: 0px 0px 10px var(--shadow-color);
}
-img {
- position: absolute;
- top: 0;
- bottom: 0;
-}
-
-canvas {
- width: 500px;
- height: 180px;
- border-radius: 20px;
- position: absolute;
- top: 0;
- bottom: 0;
- z-index: 2;
-}
-
-
-
.addedTime {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- opacity: 0;
- display: none;
z-index: 5;
font-weight: 400;
font-size: 3.25rem;
- /*color: var(--background-color);*/
- color:white;
- transition: top 1s ease-out, opacity .5s ease-out;
+ color: white;
+ animation: slidefadeout 2s ease-out;
+ opacity: 0;
}
-.gold {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- opacity: 0;
- display: none;
- z-index: 5;
- font-weight: 400;
- font-size: 3.25rem;
- /*color: var(--background-color);*/
- color:gold;
- background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- transition: top 1s ease-out, opacity .5s ease-out;
- text-shadow:none !important;
-}
+@keyframes slidefadeout {
+ 0% {
+ opacity: 1;
+ top: 50%;
+ }
+ 100% {
+ opacity: 0;
+ top: 25%;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 2b092e7..f895255 100644
--- a/index.html
+++ b/index.html
@@ -11,41 +11,11 @@
Subathon Timer
-
-
-
-
-
-
-