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

Added 'Color Palette' theme

Browse Source
This commit is contained in:
nutty
2026-07-31 14:44:22 +10:00
parent 2c21b6fc14
commit 5d541fe483
4 changed files with 244 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/settings/settings.json
+4
View File
@@ -45,6 +45,10 @@
{
"value": "vinyl",
"label": "Vinyl"
},
{
"value": "color-palette",
"label": "Color Palette"
}
],
"defaultValue": "standard",
now-playing/themes/color-palette/index.html
+51
View File
@@ -0,0 +1,51 @@
<div id="main-wrapper">
<div id="color-palette">
<!-- Vibrant -->
<div id="box-vibrant" class="color-box">
<div class="color-info">
<span class="secondary-text">Vibrant</span>
<span id="label-vibrant" class="primary-text"></span>
</div>
</div>
<!-- Muted -->
<div id="box-muted" class="color-box">
<div class="color-info">
<span class="secondary-text">Muted</span>
<span id="label-muted" class="primary-text"></span>
</div>
</div>
<!-- Dark Vibrant -->
<div id="box-dark-vibrant" class="color-box">
<div class="color-info">
<span class="secondary-text">Dark Vibrant</span>
<span id="label-dark-vibrant" class="primary-text"></span>
</div>
</div>
<!-- Dark Muted -->
<div id="box-dark-muted" class="color-box">
<div class="color-info">
<span class="secondary-text">Dark Muted</span>
<span id="label-dark-muted" class="primary-text"></span>
</div>
</div>
<!-- Light Vibrant -->
<div id="box-light-vibrant" class="color-box">
<div class="color-info">
<span class="secondary-text">Light Vibrant</span>
<span id="label-light-vibrant" class="primary-text"></span>
</div>
</div>
<!-- Light Muted -->
<div id="box-light-muted" class="color-box">
<div class="color-info">
<span class="secondary-text">Light Muted</span>
<span id="label-light-muted" class="primary-text"></span>
</div>
</div>
</div>
</div>
now-playing/themes/color-palette/script.js
+125
View File
@@ -0,0 +1,125 @@
///////////////////
// PAGE ELEMENTS //
///////////////////
const mainWrapper = document.getElementById('main-wrapper');
// Color Boxes
const boxVibrant = document.getElementById('box-vibrant');
const boxMuted = document.getElementById('box-muted');
const boxDarkVibrant = document.getElementById('box-dark-vibrant');
const boxDarkMuted = document.getElementById('box-dark-muted');
const boxLightVibrant = document.getElementById('box-light-vibrant');
const boxLightMuted = document.getElementById('box-light-muted');
// Primary Text Labels (for Hex codes)
const labelVibrant = document.getElementById('label-vibrant');
const labelMuted = document.getElementById('label-muted');
const labelDarkVibrant = document.getElementById('label-dark-vibrant');
const labelDarkMuted = document.getElementById('label-dark-muted');
const labelLightVibrant = document.getElementById('label-light-vibrant');
const labelLightMuted = document.getElementById('label-light-muted');
/////////////////
// GLOBAL VARS //
/////////////////
const colorRoles = ['Vibrant', 'Muted', 'DarkVibrant', 'DarkMuted', 'LightVibrant', 'LightMuted'];
////////////////
// PAGE SETUP //
////////////////
// Set container width
if (maxWidth > 0)
mainWrapper.style.width = `${maxWidth}px`;
else
mainWrapper.style.width = `100%`;
// Set primary and secondary text visibility
if (showPrimary)
document.documentElement.style.setProperty('--show-primary', '');
else
document.documentElement.style.setProperty('--show-primary', 'none');
if (showSecondary)
document.documentElement.style.setProperty('--show-secondary', '');
else
document.documentElement.style.setProperty('--show-secondary', 'none');
////////////////////
// CORE FUNCTIONS //
////////////////////
async function ChangeTrack(mediaProps, accentColorPalette) {
// Map elements for easy lookup
const labels = {
Vibrant: labelVibrant,
Muted: labelMuted,
DarkVibrant: labelDarkVibrant,
DarkMuted: labelDarkMuted,
LightVibrant: labelLightVibrant,
LightMuted: labelLightMuted
};
const boxes = {
Vibrant: boxVibrant,
Muted: boxMuted,
DarkVibrant: boxDarkVibrant,
DarkMuted: boxDarkMuted,
LightVibrant: boxLightVibrant,
LightMuted: boxLightMuted
};
// Fade out all labels
colorRoles.forEach(role => {
labels[role].style.opacity = 0;
});
// Wait for fade, then swap text, colors, and restore opacity
setTimeout(() => {
colorRoles.forEach(role => {
const colorValue = accentColorPalette[role];
labels[role].textContent = colorValue;
boxes[role].style.setProperty('--box-bg', colorValue);
boxes[role].style.color = colorValue;
labels[role].style.opacity = '';
});
}, 250);
}
function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
const durationMs = timelineProps.EndTime;
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent));
if (durationMs <= 0 || !showProgressBar)
progressPercent = 100;
const clipRight = 100 - progressPercent;
const boxes = {
Vibrant: boxVibrant,
Muted: boxMuted,
DarkVibrant: boxDarkVibrant,
DarkMuted: boxDarkMuted,
LightVibrant: boxLightVibrant,
LightMuted: boxLightMuted
};
// Update variables for each box dynamically via loop
colorRoles.forEach(role => {
const box = boxes[role];
if (box && accentColorPalette[role]) {
box.style.setProperty('--box-bg', accentColorPalette[role]);
box.style.setProperty('--clip-right', `${clipRight}%`);
}
});
}
now-playing/themes/color-palette/style.css
+64
View File
@@ -0,0 +1,64 @@
:root {
--border-radius: 10px;
}
#main-wrapper {
width: 500px;
opacity: 0;
}
#color-palette {
display: flex;
gap: 0.5em;
flex-direction: column;
width: 100%;
}
.color-box {
display: flex;
align-items: flex-end;
padding: 0.5em;
border-radius: var(--border-radius);
text-align: var(--text-alignment);
height: 5em;
position: relative;
overflow: hidden;
}
.color-box::before {
content: '';
position: absolute;
inset: 0;
background: var(--box-bg);
clip-path: inset(0 var(--clip-right, 0%) 0 0);
z-index: 1;
transition: all 1s ease;
}
.color-box .color-info {
position: relative;
z-index: 2;
}
.color-info {
text-transform: uppercase;
opacity: 0.5;
width: 100%;
mix-blend-mode: difference;
display: flex;
flex-direction: column;
}
.primary-text {
font-size: 1em;
font-weight: 700;
transition: opacity 0.5s ease;
display: var(--show-primary);
}
.secondary-text {
opacity: 0.7;
font-size: 0.7em;
font-weight: 700;
display: var(--show-secondary);
}