Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Various clocko changes. FUCK YEAH CLOCKO IS THE SHIT!

Browse Source
This commit is contained in:
nutty
2026-08-10 21:15:47 +10:00
parent 9ea1e5b765
commit 8f0857e685
4 changed files with 128 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clocko/index.html
+8
View File
@@ -1,5 +1,12 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container"> <div id="main-container">
<div style="display: flex; flex-direction: column;"> <div style="display: flex; flex-direction: column;">
<label id="line1" class="timeLabel"></label> <label id="line1" class="timeLabel"></label>
@@ -7,6 +14,7 @@
<label id="line3" class="timeLabel"></label> <label id="line3" class="timeLabel"></label>
</div> </div>
</div> </div>
</body>
<script src="/.common/utils/helpers.js"></script> <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/dayjs.min.js"></script>
clocko/script.js
+46 -23
View File
@@ -26,31 +26,33 @@ const line3 = document.getElementById('line3');
// OPTIONS // // OPTIONS //
///////////// /////////////
const font = urlParams.get("font") || "";
const enableLine1 = GetBooleanParam("enableLine1", true); const enableLine1 = GetBooleanParam("enableLine1", true);
const line1Format = urlParams.get("line1Format") || "ddd DD MMM YYYY hh:mm:ss A z"; const line1Format = urlParams.get("line1Format") || "hh:mm:ss A";
const line1Font = urlParams.get("line1Font") || ""; const line1FontSize = GetIntParam("line1FontSize", 50);
const line1FontSize = GetIntParam("line1FontSize", 40); const line1FontWeight = urlParams.get("line1FontWeight") || "700";
const line1FontWeight = urlParams.get("line1FontWeight") || "400";
const line1FontColor = urlParams.get("line1FontColor") || "#ffffff"; const line1FontColor = urlParams.get("line1FontColor") || "#ffffff";
const line1FontOpacity = urlParams.get("line1FontOpacity") || "1"; const line1FontOpacity = urlParams.get("line1FontOpacity") || "1";
const line1TextTransform = urlParams.get("line1TextTransform") || "none";
const line1TextAlignment = urlParams.get("line1TextAlignment") || "center"; const line1TextAlignment = urlParams.get("line1TextAlignment") || "center";
const enableLine2 = GetBooleanParam("enableLine2", false); const enableLine2 = GetBooleanParam("enableLine2", true);
const line2Format = urlParams.get("line2Format") || "hh:mm:ss A"; const line2Format = urlParams.get("line2Format") || "ddd, MMM D";
const line2Font = urlParams.get("line2Font") || "";
const line2FontSize = GetIntParam("line2FontSize", 40); const line2FontSize = GetIntParam("line2FontSize", 40);
const line2FontWeight = urlParams.get("line2FontWeight") || "400"; const line2FontWeight = urlParams.get("line2FontWeight") || "400";
const line2FontColor = urlParams.get("line2FontColor") || "#ffffff"; const line2FontColor = urlParams.get("line2FontColor") || "#ffffff";
const line2FontOpacity = urlParams.get("line2FontOpacity") || "1"; const line2FontOpacity = urlParams.get("line2FontOpacity") || "0.7";
const line2TextTransform = urlParams.get("line2TextTransform") || "none";
const line2TextAlignment = urlParams.get("line2TextAlignment") || "center"; const line2TextAlignment = urlParams.get("line2TextAlignment") || "center";
const enableLine3 = GetBooleanParam("enableLine3", false); const enableLine3 = GetBooleanParam("enableLine3", false);
const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY"; const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY hh:mm:ss A z";
const line3Font = urlParams.get("line3Font") || ""; const line3FontSize = GetIntParam("line3FontSize", 30);
const line3FontSize = GetIntParam("line3FontSize", 40); const line3FontWeight = urlParams.get("line3FontWeight") || "600";
const line3FontWeight = urlParams.get("line3FontWeight") || "400";
const line3FontColor = urlParams.get("line3FontColor") || "#ffffff"; const line3FontColor = urlParams.get("line3FontColor") || "#ffffff";
const line3FontOpacity = urlParams.get("line3FontOpacity") || "1"; const line3FontOpacity = urlParams.get("line3FontOpacity") || "1";
const line3TextTransform = urlParams.get("line3TextTransform") || "none";
const line3TextAlignment = urlParams.get("line3TextAlignment") || "center"; const line3TextAlignment = urlParams.get("line3TextAlignment") || "center";
@@ -59,6 +61,11 @@ const line3TextAlignment = urlParams.get("line3TextAlignment") || "center";
// PAGE SETUP // // PAGE SETUP //
//////////////// ////////////////
// Set the font for the entire page if specified
if (font)
document.body.style.fontFamily = `'${font}'`;
// Hide lines that are not enabled
if (!enableLine1) if (!enableLine1)
line1.style.display = "none"; line1.style.display = "none";
if (!enableLine2) if (!enableLine2)
@@ -72,15 +79,32 @@ if (!enableLine3)
// CLOCKO // // CLOCKO //
//////////// ////////////
// Check if any active format string includes milliseconds (e.g., 'S', 'SS', 'SSS')
const usesMilliseconds =
(enableLine1 && line1Format.includes('S')) ||
(enableLine2 && line2Format.includes('S')) ||
(enableLine3 && line3Format.includes('S'));
UpdateTime(); UpdateTime();
setInterval(() => {
if (usesMilliseconds) {
// High-frequency updates for millisecond precision
function updateFrame() {
UpdateTime(); UpdateTime();
}, 1000); requestAnimationFrame(updateFrame);
}
requestAnimationFrame(updateFrame);
} else {
// Efficient 1-second interval for standard clocks
setInterval(UpdateTime, 1000);
}
function UpdateTime() { function UpdateTime() {
line1.textContent = dayjs().tz(dayjs.tz.guess()).format(line1Format); const now = dayjs().tz(dayjs.tz.guess());
line2.textContent = dayjs().tz(dayjs.tz.guess()).format(line2Format);
line3.textContent = dayjs().tz(dayjs.tz.guess()).format(line3Format); if (enableLine1) line1.textContent = now.format(line1Format);
if (enableLine2) line2.textContent = now.format(line2Format);
if (enableLine3) line3.textContent = now.format(line3Format);
} }
@@ -89,16 +113,15 @@ function UpdateTime() {
// STYLING // // STYLING //
///////////// /////////////
function ApplyStyling(el, font, fontSize, fontWeight, fontColor, fontOpacity, textAlignment) { function ApplyStyling(el, fontSize, fontWeight, fontColor, fontOpacity, textTransform, textAlignment) {
if (font)
el.style.fontFamily = `'${font}'`;
el.style.fontSize = fontSize + "px"; el.style.fontSize = fontSize + "px";
el.style.fontWeight = fontWeight; el.style.fontWeight = fontWeight;
el.style.color = fontColor; el.style.color = fontColor;
el.style.opacity = fontOpacity; el.style.opacity = fontOpacity;
el.style.textTransform = textTransform;
el.style.textAlign = textAlignment; el.style.textAlign = textAlignment;
} }
ApplyStyling(line1, line1Font, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextAlignment); ApplyStyling(line1, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextTransform, line1TextAlignment);
ApplyStyling(line2, line2Font, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextAlignment); ApplyStyling(line2, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextTransform, line2TextAlignment);
ApplyStyling(line3, line3Font, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextAlignment); ApplyStyling(line3, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextTransform, line3TextAlignment);
clocko/settings/settings.json
+61 -35
View File
@@ -1,5 +1,13 @@
{ {
"settings": [ "settings": [
{
"id": "font",
"label": "Font",
"description": "<a href=\"ms-settings:fonts\">Check installed fonts</a>",
"type": "font",
"defaultValue": "",
"group": "Appearance"
},
{ {
"id": "enableLine1", "id": "enableLine1",
"label": "Enable Line 1", "label": "Enable Line 1",
@@ -13,16 +21,7 @@
"label": "Format", "label": "Format",
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>", "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
"type": "text", "type": "text",
"defaultValue": "ddd DD MMM YYYY hh:mm:ss A z", "defaultValue": "hh:mm:ss A",
"showIf": "enableLine1",
"group": "Appearance"
},
{
"id": "line1Font",
"label": "Font",
"description": "<a href=\"ms-settings:fonts\">Check installed fonts</a>",
"type": "font",
"defaultValue": "",
"showIf": "enableLine1", "showIf": "enableLine1",
"group": "Appearance" "group": "Appearance"
}, },
@@ -78,6 +77,21 @@
"showIf": "enableLine1", "showIf": "enableLine1",
"group": "Appearance" "group": "Appearance"
}, },
{
"id": "line1TextTransform",
"label": "Text Transform",
"description": "",
"type": "select",
"options": [
{ "value": "none", "label": "Normal" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "lowercase", "label": "Lowercase" },
{ "value": "capitalize", "label": "Capitalize" }
],
"defaultValue": "uppercase",
"showIf": "enableLine1",
"group": "Appearance"
},
{ {
"id": "line1TextAlignment", "id": "line1TextAlignment",
"label": "Text Alignment", "label": "Text Alignment",
@@ -97,7 +111,7 @@
"label": "Enable Line 2", "label": "Enable Line 2",
"description": "Show the second line of the clock", "description": "Show the second line of the clock",
"type": "checkbox", "type": "checkbox",
"defaultValue": false, "defaultValue": true,
"group": "Appearance" "group": "Appearance"
}, },
{ {
@@ -105,16 +119,7 @@
"label": "Format", "label": "Format",
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>", "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
"type": "text", "type": "text",
"defaultValue": "hh:mm:ss A", "defaultValue": "ddd, MMM D",
"showIf": "enableLine2",
"group": "Appearance"
},
{
"id": "line2Font",
"label": "Font",
"description": "<a href=\"ms-settings:fonts\">Check installed PC fonts</a>",
"type": "font",
"defaultValue": "",
"showIf": "enableLine2", "showIf": "enableLine2",
"group": "Appearance" "group": "Appearance"
}, },
@@ -145,7 +150,7 @@
{ "value": "800", "label": "Extra Bold" }, { "value": "800", "label": "Extra Bold" },
{ "value": "900", "label": "Black" } { "value": "900", "label": "Black" }
], ],
"defaultValue": "600", "defaultValue": "400",
"showIf": "enableLine2", "showIf": "enableLine2",
"group": "Appearance" "group": "Appearance"
}, },
@@ -163,13 +168,28 @@
"label": "Font Opacity", "label": "Font Opacity",
"description": "", "description": "",
"type": "number", "type": "number",
"defaultValue": "0.9", "defaultValue": "0.7",
"min": 0, "min": 0,
"max": 1, "max": 1,
"step": ".01", "step": ".01",
"showIf": "enableLine2", "showIf": "enableLine2",
"group": "Appearance" "group": "Appearance"
}, },
{
"id": "line2TextTransform",
"label": "Text Transform",
"description": "",
"type": "select",
"options": [
{ "value": "none", "label": "Normal" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "lowercase", "label": "Lowercase" },
{ "value": "capitalize", "label": "Capitalize" }
],
"defaultValue": "uppercase",
"showIf": "enableLine2",
"group": "Appearance"
},
{ {
"id": "line2TextAlignment", "id": "line2TextAlignment",
"label": "Text Alignment", "label": "Text Alignment",
@@ -197,16 +217,7 @@
"label": "Format", "label": "Format",
"description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>", "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
"type": "text", "type": "text",
"defaultValue": "ddd DD MMM YYYY", "defaultValue": "ddd DD MMM YYYY hh:mm:ss A z",
"showIf": "enableLine3",
"group": "Appearance"
},
{
"id": "line3Font",
"label": "Font",
"description": "<a href=\"ms-settings:fonts\">Check installed PC fonts</a>",
"type": "text",
"defaultValue": "",
"showIf": "enableLine3", "showIf": "enableLine3",
"group": "Appearance" "group": "Appearance"
}, },
@@ -237,7 +248,7 @@
{ "value": "800", "label": "Extra Bold" }, { "value": "800", "label": "Extra Bold" },
{ "value": "900", "label": "Black" } { "value": "900", "label": "Black" }
], ],
"defaultValue": "400", "defaultValue": "600",
"showIf": "enableLine3", "showIf": "enableLine3",
"group": "Appearance" "group": "Appearance"
}, },
@@ -255,13 +266,28 @@
"label": "Font Opacity", "label": "Font Opacity",
"description": "", "description": "",
"type": "number", "type": "number",
"defaultValue": "0.7", "defaultValue": "1",
"min": 0, "min": 0,
"max": 1, "max": 1,
"step": ".01", "step": ".01",
"showIf": "enableLine3", "showIf": "enableLine3",
"group": "Appearance" "group": "Appearance"
}, },
{
"id": "line3TextTransform",
"label": "Text Transform",
"description": "",
"type": "select",
"options": [
{ "value": "none", "label": "Normal" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "lowercase", "label": "Lowercase" },
{ "value": "capitalize", "label": "Capitalize" }
],
"defaultValue": "none",
"showIf": "enableLine3",
"group": "Appearance"
},
{ {
"id": "line3TextAlignment", "id": "line3TextAlignment",
"label": "Text Alignment", "label": "Text Alignment",
clocko/style.css
+5 -2
View File
@@ -3,6 +3,11 @@
padding: 0; padding: 0;
} }
html {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
#main-container { #main-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -14,8 +19,6 @@
.timeLabel { .timeLabel {
font-size: 40px; 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; */ /* text-shadow: rgb(0, 0, 0) 2px 2px 2px; */
color: white; color: white;
} }