Extract all colors to external ash.css using Ash palette variables
This commit is contained in:
Richard Zink committed
1 parent
0337babab4
commit
0557db1cba
3 files changed
+140
-84
No files matched your search
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
+114
-84
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vanta Clouds</title>
|
||||
<link rel="stylesheet" href="ash.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/suncalc@1.9.0/suncalc.js"></script>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; font-family: monospace; }
|
||||
@@ -17,7 +18,7 @@
|
||||
border: 1px solid rgba(230, 223, 209, 0.3);
|
||||
border-radius: 0.6vh;
|
||||
padding: 1vh 1vw;
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
@@ -26,14 +27,14 @@
|
||||
.debug-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #e0914f;
|
||||
color: var(--ash-ember);
|
||||
border-bottom: 1px solid rgba(230, 223, 209, 0.3);
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.debug-section {
|
||||
font-size: 10px;
|
||||
color: #b0a89a;
|
||||
color: var(--ash-icon);
|
||||
margin-top: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@@ -44,22 +45,22 @@
|
||||
padding: 1px 0;
|
||||
}
|
||||
.debug-label {
|
||||
color: #b0a89a;
|
||||
color: var(--ash-icon);
|
||||
min-width: 80px;
|
||||
}
|
||||
.libel {
|
||||
color: #b0a89a;
|
||||
color: var(--ash-icon);
|
||||
min-width: 50px;
|
||||
}
|
||||
.hex {
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
font-size: 10px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #999187;
|
||||
border: 1px solid var(--ash-stone);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@media (orientation: portrait) and (max-width: 700px) {
|
||||
@@ -72,7 +73,7 @@
|
||||
top: 2vh;
|
||||
right: 2vh;
|
||||
bottom: 2vh;
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
background: rgba(28, 27, 31, 0.7);
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 0.6vh;
|
||||
@@ -131,14 +132,14 @@
|
||||
gap: 0.6vw;
|
||||
}
|
||||
.info-label {
|
||||
color: #b0a89a;
|
||||
color: var(--ash-icon);
|
||||
}
|
||||
.info-value {
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
font-weight: bold;
|
||||
}
|
||||
.info-sub {
|
||||
color: #999187;
|
||||
color: var(--ash-stone);
|
||||
font-size: 0.85em;
|
||||
margin-left: 4px;
|
||||
}
|
||||
@@ -167,7 +168,7 @@
|
||||
}
|
||||
.weather-current-detail {
|
||||
font-size: 1em;
|
||||
color: #b0a89a;
|
||||
color: var(--ash-icon);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.weather-day {
|
||||
@@ -181,11 +182,11 @@
|
||||
font-size: 1em;
|
||||
}
|
||||
.weather-day-name {
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
font-weight: bold;
|
||||
}
|
||||
.weather-day-minmax {
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.weather-day-slots {
|
||||
@@ -208,11 +209,11 @@
|
||||
}
|
||||
.weather-slot-icon svg { width: 100%; height: 100%; }
|
||||
.weather-slot-label {
|
||||
color: #999187;
|
||||
color: var(--ash-stone);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.weather-slot-temp {
|
||||
color: #e6dfd1;
|
||||
color: var(--ash-bone);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -240,102 +241,102 @@
|
||||
<div id="info-panel">
|
||||
<svg id="analog-clock" viewBox="0 0 280 280">
|
||||
<!-- Clock face -->
|
||||
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="#e6dfd1" stroke-width="2"/>
|
||||
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="var(--ash-bone)" stroke-width="2"/>
|
||||
|
||||
<!-- Hour marks -->
|
||||
<g id="hour-marks"></g>
|
||||
|
||||
<!-- Sun orbit (radius 65) -->
|
||||
<circle cx="140" cy="140" r="65" stroke="#3a383d" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
<circle cx="140" cy="140" r="65" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
|
||||
<!-- Moon orbit (radius 88) -->
|
||||
<circle cx="140" cy="140" r="88" stroke="#3a383d" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
<circle cx="140" cy="140" r="88" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
|
||||
<!-- Sun arc (from sunrise to sunset) -->
|
||||
<path id="sun-arc" d="" stroke="#e0914f" stroke-width="2.5" fill="none"/>
|
||||
<path id="sun-arc" d="" stroke="var(--ash-ember)" stroke-width="2.5" fill="none"/>
|
||||
|
||||
<!-- Moon arc (from moonrise to moonset) -->
|
||||
<path id="moon-arc" d="" stroke="#b0a89a" stroke-width="2.5" fill="none"/>
|
||||
<path id="moon-arc" d="" stroke="var(--ash-icon)" stroke-width="2.5" fill="none"/>
|
||||
|
||||
<!-- Sun rise arrow (pointing in / up at sunrise) -->
|
||||
<g id="sun-rise-arrow" fill="#e0914f">
|
||||
<g id="sun-rise-arrow" fill="var(--ash-ember)">
|
||||
<polygon points="0,-9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Sun set arrow (pointing out / down at sunset) -->
|
||||
<g id="sun-set-arrow" fill="#e0914f">
|
||||
<g id="sun-set-arrow" fill="var(--ash-ember)">
|
||||
<polygon points="0,9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon rise arrow -->
|
||||
<g id="moon-rise-arrow" fill="#b0a89a">
|
||||
<g id="moon-rise-arrow" fill="var(--ash-icon)">
|
||||
<polygon points="0,-9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon set arrow -->
|
||||
<g id="moon-set-arrow" fill="#b0a89a">
|
||||
<g id="moon-set-arrow" fill="var(--ash-icon)">
|
||||
<polygon points="0,9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Sun zenith marker (diamond shape, small) -->
|
||||
<g id="sun-zenith-marker" fill="#e0914f">
|
||||
<g id="sun-zenith-marker" fill="var(--ash-ember)">
|
||||
<polygon points="0,-5 5,0 0,5 -5,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon zenith marker removed -->
|
||||
|
||||
<!-- Sun position (rendered after arcs/arrows so it's visible) -->
|
||||
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="#e0914f" opacity="0.4"/>
|
||||
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="#e0914f"/>
|
||||
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="#f3ede1"/>
|
||||
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="var(--ash-ember)" opacity="0.4"/>
|
||||
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="var(--ash-ember)"/>
|
||||
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="var(--ash-chalk)"/>
|
||||
|
||||
<!-- Moon position (with phase) -->
|
||||
<g id="rpg-moon">
|
||||
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="#1c1b1f" stroke="#999187" stroke-width="1"/>
|
||||
<path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
|
||||
<path id="rpg-moon-dark" d="" fill="#54514f"/>
|
||||
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="var(--ash-panel)" stroke="var(--ash-stone)" stroke-width="1"/>
|
||||
<path id="rpg-moon-lit" d="" fill="var(--ash-bone)"/>
|
||||
<path id="rpg-moon-dark" d="" fill="var(--ash-mid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Clock hands (on top of everything) -->
|
||||
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="#e6dfd1" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="#e6dfd1" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="#c15c46" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="140" cy="140" r="5" fill="#c15c46"/>
|
||||
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="var(--ash-bone)" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="var(--ash-bone)" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="var(--ash-blood)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="140" cy="140" r="5" fill="var(--ash-blood)"/>
|
||||
</svg>
|
||||
<div id="digital-clock">00:00:00</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="#e0914f"><circle cx="12" cy="12" r="4"/><g stroke="#e0914f" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><g stroke="var(--ash-ember)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Aufgang</span><span><span class="info-value" id="sunrise-value">--:--</span><span class="info-sub" id="sunrise-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="#e0914f"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="#e0914f" stroke-width="2"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="var(--ash-ember)" stroke-width="2"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#e0914f" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-ember)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
|
||||
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="var(--ash-panel)"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mondphase</span><span class="info-value" id="moon-phase-text">--</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="#b0a89a"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-icon)"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mond auf</span><span><span class="info-value" id="moonrise-value">--:--</span><span class="info-sub" id="moonrise-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#b0a89a" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-icon)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mond unter</span><span><span class="info-value" id="moonset-value">--:--</span><span class="info-sub" id="moonset-when"></span></span></div>
|
||||
</div>
|
||||
@@ -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 '<svg viewBox="0 0 24 24" fill="' + c + '"><circle cx="12" cy="12" r="5"/><g stroke="' + c + '" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.3" y2="6.3"/><line x1="17.7" y1="17.7" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.3" y2="17.7"/><line x1="17.7" y1="6.3" x2="19.1" y2="4.9"/></g></svg>';
|
||||
case 1:
|
||||
case 2:
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="#999187" stroke="none"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="var(--ash-stone)" stroke="none"/></svg>';
|
||||
case 3:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
|
||||
case 45:
|
||||
case 48:
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="#999187" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="var(--ash-stone)" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
|
||||
case 51:
|
||||
case 55:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="#7c9aa1" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
|
||||
case 53:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="#7c9aa1" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
|
||||
case 61:
|
||||
case 80:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="#7c9aa1" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
|
||||
case 63:
|
||||
case 81:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="#7c9aa1" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
|
||||
case 65:
|
||||
case 82:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="#7c9aa1" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
|
||||
case 71:
|
||||
case 73:
|
||||
case 75:
|
||||
case 77:
|
||||
case 85:
|
||||
case 86:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
|
||||
case 95:
|
||||
case 96:
|
||||
case 99:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="#d6b46a"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="var(--ash-gold)"/></svg>';
|
||||
default:
|
||||
return '<svg viewBox="0 0 24 24" fill="#999187"><circle cx="12" cy="12" r="6"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><circle cx="12" cy="12" r="6"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user