diff --git a/Dockerfile b/Dockerfile index a7da953..829f5ee 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,6 @@ FROM nginx:alpine COPY default.conf /etc/nginx/conf.d/default.conf +COPY ash.css /usr/share/nginx/html/ash.css COPY index.html /usr/share/nginx/html/index.html COPY noise.png /usr/share/nginx/html/noise.png EXPOSE 58881 diff --git a/ash.css b/ash.css new file mode 100644 index 0000000..919fbcf --- /dev/null +++ b/ash.css @@ -0,0 +1,25 @@ +/* Ash palette - all colors used in the application come from this file */ +:root { + /* Base surfaces */ + --ash-void: #100f12; + --ash-panel: #1c1b1f; + --ash-raised: #29282c; + --ash-border: #3a383d; + --ash-mid: #54514f; + --ash-ash: #6d6a63; + --ash-stone: #999187; + --ash-icon: #b0a89a; + --ash-bone: #e6dfd1; + --ash-chalk: #f3ede1; + + /* Accent colors */ + --ash-ember: #e0914f; + --ash-gold: #d6b46a; + --ash-blood: #c15c46; + --ash-rust: #a86a48; + --ash-rot: #b47e99; + --ash-moss: #8f9a5c; + --ash-steel: #7c9aa1; + --ash-steel-light: #a3bcc1; + --ash-violet: #a585ac; +} \ No newline at end of file diff --git a/index.html b/index.html index 48e204b..2a19386 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Vanta Clouds + @@ -240,102 +241,102 @@
- + - + - + - + - + - + - + - + - + - + - - - + + + - - - + + + - - - - + + + +
00:00:00
- +
Aufgang--:--
- +
Zenit Sonne--:--
- +
Untergang--:--
- +
Mondphase--
- +
Mond auf--:--
- +
Mond unter--:--
@@ -386,20 +387,49 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ var PASSAU_LAT = 48.5667; var PASSAU_LON = 13.4319; - // Sun position palette (altitude-based) + // Read Ash palette colors from CSS variables + function getAshColors() { + var root = getComputedStyle(document.documentElement); + return { + void: root.getPropertyValue('--ash-void').trim(), + panel: root.getPropertyValue('--ash-panel').trim(), + raised: root.getPropertyValue('--ash-raised').trim(), + border: root.getPropertyValue('--ash-border').trim(), + mid: root.getPropertyValue('--ash-mid').trim(), + ash: root.getPropertyValue('--ash-ash').trim(), + stone: root.getPropertyValue('--ash-stone').trim(), + icon: root.getPropertyValue('--ash-icon').trim(), + bone: root.getPropertyValue('--ash-bone').trim(), + chalk: root.getPropertyValue('--ash-chalk').trim(), + ember: root.getPropertyValue('--ash-ember').trim(), + gold: root.getPropertyValue('--ash-gold').trim(), + blood: root.getPropertyValue('--ash-blood').trim(), + rust: root.getPropertyValue('--ash-rust').trim(), + steel: root.getPropertyValue('--ash-steel').trim(), + steelLight: root.getPropertyValue('--ash-steel-light').trim() + }; + } + + function hexToInt(hex) { + return parseInt(hex.replace('#', ''), 16); + } + + var ASH = getAshColors(); + + // Sun position palette (altitude-based) - all colors from Ash palette // altitude in radians: -pi/2 (below) to pi/2 (zenith) var sunPalettes = [ - { alt: -Math.PI / 2, sky: 0x0a0a18, cloud: 0x090907, light: 0x999187, bg: 0x050510, cloudShadow: 0x100f12, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, sunVis: 0 }, - { alt: -0.1, sky: 0x2a1838, cloud: 0x090907, light: 0x999187, bg: 0x14101a, cloudShadow: 0x141316, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, sunVis: 0 }, - { alt: 0.0, sky: 0x9a5040, cloud: 0x110c08, light: 0xd6824a, bg: 0x7a4530, cloudShadow: 0x2a1f17, sun: 0xe0914f, sunGlare: 0xd6824a, sunLight: 0xe0914f, sunVis: 0.8 }, - { alt: 0.15, sky: 0xaa3838, cloud: 0x110c08, light: 0xe0914f, bg: 0x7a3825, cloudShadow: 0x4a2818, sun: 0xe0914f, sunGlare: 0xa86030, sunLight: 0xe0914f, sunVis: 0.7 }, - { alt: 0.4, sky: 0x6a7488, cloud: 0x111111, light: 0xe6dfd1, bg: 0x445878, cloudShadow: 0x2a3450, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1, sunVis: 1 }, - { alt: Math.PI / 2, sky: 0x5a8ac8, cloud: 0x111111, light: 0xe0d4be, bg: 0x506080, cloudShadow: 0x3a4458, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1, sunVis: 1 } + { alt: -Math.PI / 2, sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 }, + { alt: -0.1, sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 }, + { alt: 0.0, sky: hexToInt(ASH.rust), cloud: hexToInt(ASH.border), light: hexToInt(ASH.gold), bg: hexToInt(ASH.rust), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.gold), sunLight: hexToInt(ASH.ember), sunVis: 0.8 }, + { alt: 0.15, sky: hexToInt(ASH.blood), cloud: hexToInt(ASH.border), light: hexToInt(ASH.ember), bg: hexToInt(ASH.blood), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.ember), sunLight: hexToInt(ASH.ember), sunVis: 0.7 }, + { alt: 0.4, sky: hexToInt(ASH.steel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.bone), bg: hexToInt(ASH.steel), cloudShadow: hexToInt(ASH.steel), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 }, + { alt: Math.PI / 2, sky: hexToInt(ASH.steelLight), cloud: hexToInt(ASH.border), light: hexToInt(ASH.chalk), bg: hexToInt(ASH.steelLight), cloudShadow: hexToInt(ASH.steelLight), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 } ]; - // Night palette based on moon phase (0 = new, 0.5 = full, 1 = new) - var nightPaletteNew = { sky: 0x0a0a18, cloud: 0x090907, light: 0x999187, bg: 0x050510, cloudShadow: 0x100f12, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187 }; - var nightPaletteFull = { sky: 0x2a2848, cloud: 0x111118, light: 0xb0a89a, bg: 0x14101a, cloudShadow: 0x141316, sun: 0xb0a89a, sunGlare: 0x54514f, sunLight: 0xb0a89a }; + // Night palette based on moon phase (0 = new, 0.5 = full, 1 = new) - Ash colors + var nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) }; + var nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) }; var MIN_NIGHT_BRIGHTNESS = 0.25; // minimum night brightness (even at new moon) @@ -563,7 +593,7 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ line.setAttribute('y1', y1); line.setAttribute('x2', x2); line.setAttribute('y2', y2); - line.setAttribute('stroke', '#e6dfd1'); + line.setAttribute('stroke', ASH.bone); line.setAttribute('stroke-width', isMain ? 5 : 3); line.setAttribute('stroke-linecap', 'round'); hourMarks.appendChild(line); @@ -713,8 +743,8 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ var r = 9; var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', r); - bg.setAttribute('fill', '#1c1b1f'); - bg.setAttribute('stroke', '#999187'); + bg.setAttribute('fill', ASH.panel); + bg.setAttribute('stroke', ASH.stone); bg.setAttribute('stroke-width', '0.5'); icon.appendChild(bg); @@ -737,7 +767,7 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path'); lit.setAttribute('d', path); - lit.setAttribute('fill', '#e6dfd1'); + lit.setAttribute('fill', ASH.bone); icon.appendChild(lit); } @@ -892,31 +922,31 @@ if (moonTimes.set) { var weatherThemes = { sunny: { - skyColor: 0x9abaf8, - cloudColor: 0x8a8a8a, - lightColor: 0xf3ede1, - backgroundColor: 0x54514f, + skyColor: hexToInt(ASH.steelLight), + cloudColor: hexToInt(ASH.stone), + lightColor: hexToInt(ASH.chalk), + backgroundColor: hexToInt(ASH.mid), speed: 1.0 }, cloudy: { - skyColor: 0x6a7488, - cloudColor: 0x171717, - lightColor: 0xe6dfd1, - backgroundColor: 0x3a383d, + skyColor: hexToInt(ASH.steel), + cloudColor: hexToInt(ASH.mid), + lightColor: hexToInt(ASH.bone), + backgroundColor: hexToInt(ASH.border), speed: 1.2 }, stormy: { - skyColor: 0x3a3848, - cloudColor: 0x0c0c0c, - lightColor: 0x999187, - backgroundColor: 0x100f12, + skyColor: hexToInt(ASH.steel), + cloudColor: hexToInt(ASH.panel), + lightColor: hexToInt(ASH.stone), + backgroundColor: hexToInt(ASH.void), speed: 2.5 }, night: { - skyColor: 0x0a0a18, - cloudColor: 0x070707, - lightColor: 0xb0a89a, - backgroundColor: 0x050510, + skyColor: hexToInt(ASH.void), + cloudColor: hexToInt(ASH.raised), + lightColor: hexToInt(ASH.icon), + backgroundColor: hexToInt(ASH.void), speed: 0.4 } }; @@ -1108,45 +1138,45 @@ var weatherThemes = { }; function weatherSVG(code) { - var c = '#e6dfd1'; + var c = 'var(--ash-bone)'; switch (code) { case 0: return ''; case 1: case 2: - return ''; + return ''; case 3: - return ''; + return ''; case 45: case 48: - return ''; + return ''; case 51: case 55: - return ''; + return ''; case 53: - return ''; + return ''; case 61: case 80: - return ''; + return ''; case 63: case 81: - return ''; + return ''; case 65: case 82: - return ''; + return ''; case 71: case 73: case 75: case 77: case 85: case 86: - return ''; + return ''; case 95: case 96: case 99: - return ''; + return ''; default: - return ''; + return ''; } }