mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
Added 'Clocko' widget
This commit is contained in:
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user