mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
Added 'Clocko' widget
This commit is contained in:
nutty
@@ -0,0 +1,16 @@
|
||||
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<div id="main-container">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<label id="line1" class="timeLabel"></label>
|
||||
<label id="line2" class="timeLabel"></label>
|
||||
<label id="line3" class="timeLabel"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/.common/utils/helpers.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.min.js"></script>'
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/advancedFormat.js"></script>'
|
||||
<script src="./script.js"></script>
|
||||
@@ -0,0 +1,104 @@
|
||||
/////////////
|
||||
// IMPORTS //
|
||||
/////////////
|
||||
|
||||
dayjs.extend(window.dayjs_plugin_utc);
|
||||
dayjs.extend(window.dayjs_plugin_timezone);
|
||||
dayjs.extend(window.dayjs_plugin_advancedFormat);
|
||||
|
||||
////////////////////
|
||||
// URL PARAMETERS //
|
||||
////////////////////
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
|
||||
///////////////////
|
||||
// PAGE ELEMENTS //
|
||||
///////////////////
|
||||
|
||||
const mainContainer = document.getElementById('main-container');
|
||||
const line1 = document.getElementById('line1');
|
||||
const line2 = document.getElementById('line2');
|
||||
const line3 = document.getElementById('line3');
|
||||
|
||||
/////////////
|
||||
// OPTIONS //
|
||||
/////////////
|
||||
|
||||
const enableLine1 = GetBooleanParam("enableLine1", true);
|
||||
const line1Format = urlParams.get("line1Format") || "ddd DD MMM YYYY hh:mm:ss A z";
|
||||
const line1Font = urlParams.get("line1Font") || "";
|
||||
const line1FontSize = GetIntParam("line1FontSize", 40);
|
||||
const line1FontWeight = urlParams.get("line1FontWeight") || "400";
|
||||
const line1FontColor = urlParams.get("line1FontColor") || "#ffffff";
|
||||
const line1FontOpacity = urlParams.get("line1FontOpacity") || "1";
|
||||
const line1TextAlignment = urlParams.get("line1TextAlignment") || "center";
|
||||
|
||||
const enableLine2 = GetBooleanParam("enableLine2", false);
|
||||
const line2Format = urlParams.get("line2Format") || "hh:mm:ss A";
|
||||
const line2Font = urlParams.get("line2Font") || "";
|
||||
const line2FontSize = GetIntParam("line2FontSize", 40);
|
||||
const line2FontWeight = urlParams.get("line2FontWeight") || "400";
|
||||
const line2FontColor = urlParams.get("line2FontColor") || "#ffffff";
|
||||
const line2FontOpacity = urlParams.get("line2FontOpacity") || "1";
|
||||
const line2TextAlignment = urlParams.get("line2TextAlignment") || "center";
|
||||
|
||||
const enableLine3 = GetBooleanParam("enableLine3", false);
|
||||
const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY";
|
||||
const line3Font = urlParams.get("line3Font") || "";
|
||||
const line3FontSize = GetIntParam("line3FontSize", 40);
|
||||
const line3FontWeight = urlParams.get("line3FontWeight") || "400";
|
||||
const line3FontColor = urlParams.get("line3FontColor") || "#ffffff";
|
||||
const line3FontOpacity = urlParams.get("line3FontOpacity") || "1";
|
||||
const line3TextAlignment = urlParams.get("line3TextAlignment") || "center";
|
||||
|
||||
|
||||
|
||||
////////////////
|
||||
// PAGE SETUP //
|
||||
////////////////
|
||||
|
||||
if (!enableLine1)
|
||||
line1.style.display = "none";
|
||||
if (!enableLine2)
|
||||
line2.style.display = "none";
|
||||
if (!enableLine3)
|
||||
line3.style.display = "none";
|
||||
|
||||
|
||||
|
||||
////////////
|
||||
// CLOCKO //
|
||||
////////////
|
||||
|
||||
UpdateTime();
|
||||
setInterval(() => {
|
||||
UpdateTime();
|
||||
}, 1000);
|
||||
|
||||
function UpdateTime() {
|
||||
line1.textContent = dayjs().tz(dayjs.tz.guess()).format(line1Format);
|
||||
line2.textContent = dayjs().tz(dayjs.tz.guess()).format(line2Format);
|
||||
line3.textContent = dayjs().tz(dayjs.tz.guess()).format(line3Format);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/////////////
|
||||
// STYLING //
|
||||
/////////////
|
||||
|
||||
function ApplyStyling(el, font, fontSize, fontWeight, fontColor, fontOpacity, textAlignment) {
|
||||
if (font)
|
||||
el.style.fontFamily = `'${font}'`;
|
||||
el.style.fontSize = fontSize + "px";
|
||||
el.style.fontWeight = fontWeight;
|
||||
el.style.color = fontColor;
|
||||
el.style.opacity = fontOpacity;
|
||||
el.style.textAlign = textAlignment;
|
||||
}
|
||||
|
||||
ApplyStyling(line1, line1Font, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextAlignment);
|
||||
ApplyStyling(line2, line2Font, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextAlignment);
|
||||
ApplyStyling(line3, line3Font, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextAlignment);
|
||||
@@ -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="/.common/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,26 @@
|
||||
const widgetContainer = document.getElementById('widgetContainer');
|
||||
|
||||
const settingsPageURL = '/.common/core/settings-core';
|
||||
|
||||
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", "");
|
||||
|
||||
const usesStreamerBot = "&usesStreamerBot=false";
|
||||
|
||||
console.debug("Window Ref: " + window.location.href);
|
||||
console.debug("Base URL: " + baseURL);
|
||||
console.debug("Settings JSON: " + settingsJSON);
|
||||
console.debug("Widget URL: " + widgetURL);
|
||||
console.debug("Uses Streamer Bot: " + usesStreamerBot);
|
||||
|
||||
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL + usesStreamerBot;
|
||||
@@ -0,0 +1,280 @@
|
||||
{
|
||||
"settings": [
|
||||
{
|
||||
"id": "enableLine1",
|
||||
"label": "Enable Line 1",
|
||||
"description": "Show the first line of the clock",
|
||||
"type": "checkbox",
|
||||
"defaultValue": true,
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1Format",
|
||||
"label": "Format",
|
||||
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
|
||||
"type": "text",
|
||||
"defaultValue": "ddd DD MMM YYYY hh:mm:ss A z",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1Font",
|
||||
"label": "Font",
|
||||
"description": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1FontSize",
|
||||
"label": "Font Size",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"min": 1,
|
||||
"max": 120,
|
||||
"defaultValue": 50,
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1FontWeight",
|
||||
"label": "Font Weight",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "100", "label": "Thin" },
|
||||
{ "value": "200", "label": "Extra Light" },
|
||||
{ "value": "300", "label": "Light" },
|
||||
{ "value": "400", "label": "Regular" },
|
||||
{ "value": "500", "label": "Medium" },
|
||||
{ "value": "600", "label": "Semi Bold" },
|
||||
{ "value": "700", "label": "Bold" },
|
||||
{ "value": "800", "label": "Extra Bold" },
|
||||
{ "value": "900", "label": "Black" }
|
||||
],
|
||||
"defaultValue": "700",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1FontColor",
|
||||
"label": "Font Color",
|
||||
"description": "",
|
||||
"type": "color",
|
||||
"defaultValue": "#ffffff",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1FontOpacity",
|
||||
"label": "Font Opacity",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"defaultValue": "1",
|
||||
"min": 0,
|
||||
"max": 1,
|
||||
"step": ".01",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line1TextAlignment",
|
||||
"label": "Text Alignment",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "left", "label": "Left" },
|
||||
{ "value": "center", "label": "Center" },
|
||||
{ "value": "right", "label": "Right" }
|
||||
],
|
||||
"defaultValue": "center",
|
||||
"showIf": "enableLine1",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "enableLine2",
|
||||
"label": "Enable Line 2",
|
||||
"description": "Show the second line of the clock",
|
||||
"type": "checkbox",
|
||||
"defaultValue": false,
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2Format",
|
||||
"label": "Format",
|
||||
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
|
||||
"type": "text",
|
||||
"defaultValue": "hh:mm:ss A",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2Font",
|
||||
"label": "Font",
|
||||
"description": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2FontSize",
|
||||
"label": "Font Size",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"min": 1,
|
||||
"max": 120,
|
||||
"defaultValue": 40,
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2FontWeight",
|
||||
"label": "Font Weight",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "100", "label": "Thin" },
|
||||
{ "value": "200", "label": "Extra Light" },
|
||||
{ "value": "300", "label": "Light" },
|
||||
{ "value": "400", "label": "Regular" },
|
||||
{ "value": "500", "label": "Medium" },
|
||||
{ "value": "600", "label": "Semi Bold" },
|
||||
{ "value": "700", "label": "Bold" },
|
||||
{ "value": "800", "label": "Extra Bold" },
|
||||
{ "value": "900", "label": "Black" }
|
||||
],
|
||||
"defaultValue": "600",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2FontColor",
|
||||
"label": "Font Color",
|
||||
"description": "",
|
||||
"type": "color",
|
||||
"defaultValue": "#ffffff",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2FontOpacity",
|
||||
"label": "Font Opacity",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"defaultValue": "0.9",
|
||||
"min": 0,
|
||||
"max": 1,
|
||||
"step": ".01",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line2TextAlignment",
|
||||
"label": "Text Alignment",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "left", "label": "Left" },
|
||||
{ "value": "center", "label": "Center" },
|
||||
{ "value": "right", "label": "Right" }
|
||||
],
|
||||
"defaultValue": "center",
|
||||
"showIf": "enableLine2",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "enableLine3",
|
||||
"label": "Enable Line 3",
|
||||
"description": "Show the third line of the clock",
|
||||
"type": "checkbox",
|
||||
"defaultValue": false,
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3Format",
|
||||
"label": "Format",
|
||||
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
|
||||
"type": "text",
|
||||
"defaultValue": "ddd DD MMM YYYY",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3Font",
|
||||
"label": "Font",
|
||||
"description": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3FontSize",
|
||||
"label": "Font Size",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"min": 1,
|
||||
"max": 120,
|
||||
"defaultValue": 30,
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3FontWeight",
|
||||
"label": "Font Weight",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "100", "label": "Thin" },
|
||||
{ "value": "200", "label": "Extra Light" },
|
||||
{ "value": "300", "label": "Light" },
|
||||
{ "value": "400", "label": "Regular" },
|
||||
{ "value": "500", "label": "Medium" },
|
||||
{ "value": "600", "label": "Semi Bold" },
|
||||
{ "value": "700", "label": "Bold" },
|
||||
{ "value": "800", "label": "Extra Bold" },
|
||||
{ "value": "900", "label": "Black" }
|
||||
],
|
||||
"defaultValue": "400",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3FontColor",
|
||||
"label": "Font Color",
|
||||
"description": "",
|
||||
"type": "color",
|
||||
"defaultValue": "#ffffff",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3FontOpacity",
|
||||
"label": "Font Opacity",
|
||||
"description": "",
|
||||
"type": "number",
|
||||
"defaultValue": "0.7",
|
||||
"min": 0,
|
||||
"max": 1,
|
||||
"step": ".01",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
},
|
||||
{
|
||||
"id": "line3TextAlignment",
|
||||
"label": "Text Alignment",
|
||||
"description": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
{ "value": "left", "label": "Left" },
|
||||
{ "value": "center", "label": "Center" },
|
||||
{ "value": "right", "label": "Right" }
|
||||
],
|
||||
"defaultValue": "center",
|
||||
"showIf": "enableLine3",
|
||||
"group": "Appearance"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
height: 95vh;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.timeLabel {
|
||||
font-size: 40px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
/* text-shadow: rgb(0, 0, 0) 2px 2px 2px; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
#line1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#line2 {
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user