mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
Ported 'Twitch Ad Countdown Timer'
This commit is contained in:
nuttylmao
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css" />
|
||||
<script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="statusContainer">Connecting...</div>
|
||||
<div id="mainContainer">
|
||||
<div id="timer-bar"></div>
|
||||
<div id="timer-label">
|
||||
<span id="ad-label">Ad</span>
|
||||
|
||||
<span id="ads-remaining-label">1 of 3 • </span>
|
||||
<span id="time-remaining-label">1:20</span>
|
||||
</div>
|
||||
<div id="upcoming-ad-warning-container">
|
||||
<div>Ads starting in...</div>
|
||||
<div id="countdown-label">69</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
@@ -0,0 +1,397 @@
|
||||
////////////////
|
||||
// PARAMETERS //
|
||||
////////////////
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
|
||||
let sbDebugMode = true;
|
||||
const sbServerAddress = urlParams.get("address") || "127.0.0.1";
|
||||
const sbServerPort = urlParams.get("port") || "8080";
|
||||
|
||||
///////////////////
|
||||
// PAGE ELEMENTS //
|
||||
///////////////////
|
||||
|
||||
const timerBar = document.getElementById('timer-bar');
|
||||
const adLabel = document.getElementById('ad-label');
|
||||
const timerLabel = document.getElementById('timer-label');
|
||||
const adsRemainingLabel = document.getElementById('ads-remaining-label');
|
||||
const timeRemainingLabel = document.getElementById('time-remaining-label');
|
||||
const upcomingAdWarningContainer = document.getElementById('upcoming-ad-warning-container');
|
||||
const countdownLabel = document.getElementById('countdown-label');
|
||||
|
||||
/////////////
|
||||
// OPTIONS //
|
||||
/////////////
|
||||
|
||||
// Appearance
|
||||
const barColor = urlParams.get("barColor") || "#FFCC00";
|
||||
const barThickness = GetIntParam("barThickness", 4);
|
||||
const barPosition = urlParams.get("barPosition") || "bottom";
|
||||
const timerColor = urlParams.get("timerColor") || "#FFCC00";
|
||||
const timerPosition = urlParams.get("timerPosition") || "top-left";
|
||||
|
||||
// General
|
||||
const showUpcomingAdWarning = GetBooleanParam("showUpcomingAdWarning", true);
|
||||
const warningSeconds = GetIntParam("warningSeconds", 10);
|
||||
|
||||
/////////////////
|
||||
// GLOBAL VARS //
|
||||
/////////////////
|
||||
|
||||
let singleAdLength = 30;
|
||||
let timerBarLocked = false;
|
||||
let timerLabelLocked = false;
|
||||
let upcomingAdWarningLocked = false;
|
||||
|
||||
/////////////////
|
||||
// PAGEE SETUP //
|
||||
/////////////////
|
||||
|
||||
// Set the colors
|
||||
timerBar.style.background = barColor;
|
||||
adLabel.style.background = timerColor;
|
||||
|
||||
// Set the position of the bar
|
||||
switch (barPosition) {
|
||||
case "none":
|
||||
timerBar.style.display = "none";
|
||||
break;
|
||||
case "bottom":
|
||||
timerBar.style.height = barThickness + "px";
|
||||
timerBar.style.bottom = "0px";
|
||||
timerBar.style.left = "0px";
|
||||
break;
|
||||
|
||||
case "top":
|
||||
timerBar.style.height = barThickness + "px";
|
||||
timerBar.style.top = "0px";
|
||||
timerBar.style.left = "0px";
|
||||
break;
|
||||
|
||||
case "left":
|
||||
timerBar.style.width = barThickness + "px";
|
||||
timerBar.style.bottom = "0px";
|
||||
timerBar.style.left = "0px";
|
||||
break;
|
||||
|
||||
case "right":
|
||||
timerBar.style.width = barThickness + "px";
|
||||
timerBar.style.bottom = "0px";
|
||||
timerBar.style.right = "0px";
|
||||
break;
|
||||
}
|
||||
|
||||
// Set the position of the timer
|
||||
switch (timerPosition) {
|
||||
case "none":
|
||||
timerLabel.style.display = "none";
|
||||
break;
|
||||
case "top-left":
|
||||
timerLabel.style.top = "0px";
|
||||
timerLabel.style.left = "0px";
|
||||
break;
|
||||
case "top-right":
|
||||
timerLabel.style.top = "0px";
|
||||
timerLabel.style.right = "0px";
|
||||
break;
|
||||
case "bottom-left":
|
||||
timerLabel.style.bottom = "0px";
|
||||
timerLabel.style.left = "0px";
|
||||
break;
|
||||
case "bottom-right":
|
||||
timerLabel.style.bottom = "0px";
|
||||
timerLabel.style.right = "0px";
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/////////////////////////
|
||||
// STREAMER.BOT CLIENT //
|
||||
/////////////////////////
|
||||
|
||||
const client = new StreamerbotClient({
|
||||
host: sbServerAddress,
|
||||
port: sbServerPort,
|
||||
|
||||
onConnect: (data) => {
|
||||
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
|
||||
console.debug(data);
|
||||
SetConnectionStatus(true);
|
||||
},
|
||||
|
||||
onDisconnect: () => {
|
||||
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
|
||||
SetConnectionStatus(false);
|
||||
}
|
||||
});
|
||||
|
||||
client.on('Twitch.AdRun', (response) => {
|
||||
console.debug(response.data);
|
||||
TwitchAdRun(response.data);
|
||||
})
|
||||
|
||||
client.on('Twitch.UpcomingAd', (response) => {
|
||||
console.debug(response.data);
|
||||
TwitchUpcomingAd(response.data);
|
||||
})
|
||||
|
||||
|
||||
|
||||
/////////////////////
|
||||
// TWITCH AD TIMER //
|
||||
/////////////////////
|
||||
|
||||
function TwitchAdRun(data) {
|
||||
const duration = data.length_seconds;
|
||||
|
||||
TimerBarAnimation(duration);
|
||||
TimerLabelAnimation(duration);
|
||||
}
|
||||
|
||||
function TwitchUpcomingAd(data) {
|
||||
// TODO: Need to scrape UpcomingAd data to continue this
|
||||
const warningMinute = 5;
|
||||
|
||||
const delayStart = warningMinute * 60 - warningSeconds;
|
||||
|
||||
setTimeout(() => {
|
||||
UpcomingAdWarning(warningSeconds);
|
||||
}, delayStart * 1000);
|
||||
}
|
||||
|
||||
function TimerBarAnimation(duration) {
|
||||
// Check if the widget is in the middle of an animation
|
||||
if (timerBarLocked)
|
||||
return;
|
||||
|
||||
timerBarLocked = true;
|
||||
|
||||
// If the bar is top/bottom, animate horizontally
|
||||
// If the bar is left/right, animate vertically
|
||||
switch (barPosition) {
|
||||
case "bottom":
|
||||
case "top":
|
||||
timerBar.style.transition = 'width 0.5s ease-in-out';
|
||||
timerBar.style.width = '100%';
|
||||
setTimeout(() => {
|
||||
timerBar.style.transition = `width ${duration}s linear`;
|
||||
timerBar.style.width = '0%';
|
||||
}, 500);
|
||||
break;
|
||||
|
||||
case "left":
|
||||
case "right":
|
||||
timerBar.style.transition = 'height 0.5s ease-in-out';
|
||||
timerBar.style.height = '100%';
|
||||
setTimeout(() => {
|
||||
timerBar.style.transition = `height ${duration}s linear`;
|
||||
timerBar.style.height = '0%';
|
||||
}, 500);
|
||||
break;
|
||||
}
|
||||
|
||||
// Unlock the widget
|
||||
setTimeout(() => {
|
||||
timerBarLocked = false;
|
||||
}, duration * 1000);
|
||||
}
|
||||
|
||||
function TimerLabelAnimation(duration) {
|
||||
// Check if the widget is in the middle of an animation
|
||||
if (timerLabelLocked)
|
||||
return;
|
||||
|
||||
timerLabelLocked = true;
|
||||
|
||||
// Calculate starting time
|
||||
let startingTime = duration % singleAdLength;
|
||||
if (startingTime == 0)
|
||||
startingTime = singleAdLength;
|
||||
|
||||
// Estimate how many ads there should be
|
||||
let adsTotal = Math.ceil(duration / singleAdLength);
|
||||
let adsRemaining = 1;
|
||||
|
||||
function updateTimer() {
|
||||
// Show the labels BEFORE decrementing
|
||||
adsRemainingLabel.innerText = `${adsRemaining} of ${adsTotal} • `;
|
||||
timeRemainingLabel.innerText = startingTime.toString().toHHMMSS();
|
||||
timerLabel.style.opacity = 1;
|
||||
|
||||
// Decrement time
|
||||
startingTime--;
|
||||
|
||||
// Check for transitions
|
||||
if (startingTime < 0 && adsRemaining < adsTotal) {
|
||||
adsRemaining++;
|
||||
startingTime = singleAdLength - 1; // -1 since 1 second has already passed
|
||||
}
|
||||
|
||||
if (startingTime < 0 && adsRemaining === adsTotal) {
|
||||
clearInterval(timerThingy);
|
||||
timerLabel.style.opacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Run immediately
|
||||
updateTimer();
|
||||
|
||||
// Then every second
|
||||
var timerThingy = setInterval(updateTimer, 1000);
|
||||
|
||||
// Unlock the widget
|
||||
setTimeout(() => {
|
||||
timerLabelLocked = false;
|
||||
}, duration * 1000);
|
||||
}
|
||||
|
||||
function UpcomingAdWarning(warningSeconds) {
|
||||
if (!showUpcomingAdWarning)
|
||||
return;
|
||||
|
||||
// Check if the widget is in the middle of an animation
|
||||
if (upcomingAdWarningLocked)
|
||||
return;
|
||||
|
||||
upcomingAdWarningLocked = true;
|
||||
|
||||
let width = upcomingAdWarningContainer.getBoundingClientRect().width;
|
||||
|
||||
// Set the starting position of the countdown box
|
||||
upcomingAdWarningContainer.style.right = -width + "px";
|
||||
countdownLabel.innerHTML = warningSeconds;
|
||||
|
||||
// Slide the countdown box on screen
|
||||
upcomingAdWarningContainer.style.right = "0px";
|
||||
|
||||
// Start the countdown timer
|
||||
let startingTime = warningSeconds;
|
||||
|
||||
var timerThingy = setInterval(function () {
|
||||
startingTime--;
|
||||
countdownLabel.innerText = startingTime;
|
||||
if (startingTime == 0) {
|
||||
clearInterval(timerThingy);
|
||||
upcomingAdWarningContainer.style.right = -width + "px";
|
||||
return;
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
// Unlock the widget
|
||||
setTimeout(() => {
|
||||
upcomingAdWarningLocked = false;
|
||||
}, warningSeconds * 1000);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//////////////////////
|
||||
// HELPER FUNCTIONS //
|
||||
//////////////////////
|
||||
|
||||
function GetBooleanParam(paramName, defaultValue) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const paramValue = urlParams.get(paramName);
|
||||
|
||||
if (paramValue === null) {
|
||||
return defaultValue; // Parameter not found
|
||||
}
|
||||
|
||||
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
|
||||
|
||||
if (lowercaseValue === 'true') {
|
||||
return true;
|
||||
} else if (lowercaseValue === 'false') {
|
||||
return false;
|
||||
} else {
|
||||
return paramValue; // Return original string if not 'true' or 'false'
|
||||
}
|
||||
}
|
||||
|
||||
function GetIntParam(paramName, defaultValue) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const paramValue = urlParams.get(paramName);
|
||||
|
||||
if (paramValue === null) {
|
||||
return defaultValue; // or undefined, or a default value, depending on your needs
|
||||
}
|
||||
|
||||
console.log(paramValue);
|
||||
|
||||
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
|
||||
|
||||
if (isNaN(intValue)) {
|
||||
return null; // or handle the error in another way, e.g., throw an error
|
||||
}
|
||||
|
||||
return intValue;
|
||||
}
|
||||
|
||||
String.prototype.toHHMMSS = function () {
|
||||
var sec_num = parseInt(this, 10); // don't forget the second param
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) { hours = "0" + hours; }
|
||||
//if (minutes < 10) {minutes = "0"+minutes;}
|
||||
if (seconds < 10) { seconds = "0" + seconds; }
|
||||
//return hours+':'+minutes+':'+seconds;
|
||||
return minutes + ':' + seconds;
|
||||
}
|
||||
|
||||
function IsNullOrWhitespace(str) {
|
||||
return /^\s*$/.test(str);
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// TEST FUNCTIONS //
|
||||
////////////////////
|
||||
|
||||
function testAd() {
|
||||
const data = {
|
||||
"length_seconds": 15,
|
||||
"timestamp": "0001-01-01T00:00:00",
|
||||
"is_automatic": true,
|
||||
"requester_user_id": "54983562",
|
||||
"requester_user_login": "nutty",
|
||||
"requester_user_name": "nutty",
|
||||
"is_test": false
|
||||
}
|
||||
|
||||
TwitchAdRun(data)
|
||||
}
|
||||
|
||||
function testUpcomingAdWarning() {
|
||||
UpcomingAdWarning(10);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// STREAMER.BOT WEBSOCKET STATUS //
|
||||
///////////////////////////////////
|
||||
|
||||
// This function sets the visibility of the Streamer.bot status label on the overlay
|
||||
function SetConnectionStatus(connected) {
|
||||
let statusContainer = document.getElementById("statusContainer");
|
||||
if (connected) {
|
||||
statusContainer.style.background = "#2FB774";
|
||||
statusContainer.innerText = "Connected!";
|
||||
statusContainer.style.opacity = 1;
|
||||
setTimeout(() => {
|
||||
statusContainer.style.transition = "all 2s ease";
|
||||
statusContainer.style.opacity = 0;
|
||||
}, 10);
|
||||
}
|
||||
else {
|
||||
statusContainer.style.background = "#D12025";
|
||||
statusContainer.innerText = "Connecting...";
|
||||
statusContainer.style.transition = "";
|
||||
statusContainer.style.opacity = 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../../.resources/logo.png" type="image/png">
|
||||
<title>nutty</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
#widgetContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe id="widgetContainer"></iframe>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
const widgetContainer = document.getElementById('widgetContainer');
|
||||
|
||||
const settingsPageURL = '../../.utilities/settings-page-builder';
|
||||
|
||||
const currentURL = window.location.href;
|
||||
|
||||
let settingsJSON;
|
||||
let baseURL = currentURL;
|
||||
|
||||
if (baseURL.endsWith("index.html"))
|
||||
baseURL = baseURL.replace("index.html", "");
|
||||
|
||||
settingsJSON = "?settingsJson=" + baseURL + "settings.json";
|
||||
|
||||
const lastSlashIndex = baseURL.lastIndexOf("/");
|
||||
let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
|
||||
|
||||
console.debug("Window Ref: " + window.location.href);
|
||||
console.debug("Base URL: " + baseURL);
|
||||
console.debug("Settings JSON: " + settingsJSON);
|
||||
console.debug("Widget URL: " + widgetURL);
|
||||
|
||||
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
|
||||
@@ -0,0 +1,140 @@
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"id": "testAd",
|
||||
"label": "Send Test Ad",
|
||||
"description": "",
|
||||
"type": "button",
|
||||
"callFunction": "testAd",
|
||||
"group": ""
|
||||
},
|
||||
{
|
||||
"id": "testUpcomingAdWarning",
|
||||
"label": "Send Test Upcoming Ad Warning",
|
||||
"description": "",
|
||||
"type": "button",
|
||||
"callFunction": "testUpcomingAdWarning",
|
||||
"group": ""
|
||||
},
|
||||
{
|
||||
"id": "barColor",
|
||||
"label": "Bar Color",
|
||||
"description": "",
|
||||
"type": "color",
|
||||
"defaultValue": "#FFCC00",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "barThickness",
|
||||
"label": "Bar Thickness",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"defaultValue": "4",
|
||||
"min": 1,
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "barPosition",
|
||||
"label": "Bar Position",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "None"
|
||||
},
|
||||
{
|
||||
"value": "bottom",
|
||||
"label": "Bottom"
|
||||
},
|
||||
{
|
||||
"value": "top",
|
||||
"label": "Top"
|
||||
},
|
||||
{
|
||||
"value": "left",
|
||||
"label": "Left"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "Right"
|
||||
}
|
||||
],
|
||||
"defaultValue": "bottom",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "timerColor",
|
||||
"label": "Timer Color",
|
||||
"description": "",
|
||||
"type": "color",
|
||||
"defaultValue": "#FFCC00",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "timerPosition",
|
||||
"label": "Timer Position",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "None"
|
||||
},
|
||||
{
|
||||
"value": "top-left",
|
||||
"label": "Top Left"
|
||||
},
|
||||
{
|
||||
"value": "top-right",
|
||||
"label": "Top Right"
|
||||
},
|
||||
{
|
||||
"value": "bottom-left",
|
||||
"label": "Bottom Left"
|
||||
},
|
||||
{
|
||||
"value": "bottom-right",
|
||||
"label": "Bottom Right"
|
||||
}
|
||||
],
|
||||
"defaultValue": "top-left",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "showUpcomingAdWarning",
|
||||
"label": "Show Upcoming Ad Warning",
|
||||
"description": "",
|
||||
"type": "checkbox",
|
||||
"defaultValue": true,
|
||||
"group": "General"
|
||||
},
|
||||
{
|
||||
"id": "warningSeconds",
|
||||
"label": "Warning Time",
|
||||
"description": "Warn X seconds before ad",
|
||||
"type": "number",
|
||||
"defaultValue": "10",
|
||||
"min": 1,
|
||||
"max": 300,
|
||||
"showIf": "showUpcomingAdWarning",
|
||||
"group": "General"
|
||||
},
|
||||
{
|
||||
"id": "address",
|
||||
"label": "Address",
|
||||
"description": "Streamer.bot Websocket Server Address",
|
||||
"type": "text",
|
||||
"defaultValue": "127.0.0.1",
|
||||
"group": "Advanced"
|
||||
},
|
||||
{
|
||||
"id": "port",
|
||||
"label": "Port",
|
||||
"description": "Streamer.bot Websocket Server Port",
|
||||
"type": "text",
|
||||
"defaultValue": "8080",
|
||||
"group": "Advanced"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
/* color: white;
|
||||
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
overflow-wrap: break-word; */
|
||||
}
|
||||
|
||||
#statusContainer {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
background-color: #D12025;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#timer-bar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background-color: #ffcc00;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#timer-label {
|
||||
font-family: 'Metropolis';
|
||||
font-weight: bold;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
margin: 50px;
|
||||
display: table;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s linear;
|
||||
}
|
||||
|
||||
#ad-label {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
max-width: fit-content;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background-color: #F9BE2A;
|
||||
color: #1C1B22;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#upcoming-ad-warning-container {
|
||||
font-family: 'Metropolis';
|
||||
font-size: 20px;
|
||||
max-width: fit-content;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background-color: #000000CC;
|
||||
color: #FFFFFF;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
display: table-cell;
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
right: -100%;
|
||||
transition: right 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#countdown-label {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0px 0px 0px;
|
||||
}
|
||||
Reference in New Issue
Block a user