Skip to content

Commit 11bc961

Browse files
NSTechBytesNSTechBytes
authored
Merge pull request #13 from RicardoTM05/Rework
v.0.0.8: Reworks, Options and Settings.
2 parents 7411a7f + 9dcff84 commit 11bc961

37 files changed

Lines changed: 7521 additions & 1026 deletions

File tree

‎Resources/Skins/WebView2/@Resources/Calendar/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,14 @@
3131

3232
<div class="calendar-body">
3333
<div class="weekdays">
34-
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
3534
</div>
3635
<div class="days" id="calendar-days">
3736
<!-- Days will be injected here via JS -->
3837
</div>
3938
</div>
39+
<div class="calendar-bottom">
40+
<p>Hold Ctrl to Drag and Scroll to Resize.</p>
41+
</div>
4042
</div>
4143
</div>
4244
<script src="script.js"></script>

‎Resources/Skins/WebView2/@Resources/Calendar/script.js‎

Lines changed: 110 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,115 @@
1+
// ---- Helpers ----
2+
const loadVariable = (key, defaultValue) => {
3+
const value = RainmeterAPI.GetVariable(String(key));
4+
if (value.includes("#")) {
5+
writeVariable(String(key), String(defaultValue));
6+
return String(defaultValue);
7+
}
8+
return value;
9+
};
10+
11+
const writeVariable = (key, value) => {
12+
RainmeterAPI.Bang(`[!WriteKeyValue Variables "${key}" "${value}"]`);
13+
};
14+
115
const date = new Date();
16+
const userLocale = Intl.DateTimeFormat().resolvedOptions().locale;
17+
18+
let locale = loadVariable('locale', userLocale);
19+
20+
function toggleLocale() {
21+
locale = locale === userLocale ? 'en-US' : userLocale;
22+
writeVariable('locale', locale);
23+
renderWeekdays();
24+
renderCalendar();
25+
}
26+
27+
const renderWeekdays = () => {
28+
const weekdaysContainer = document.querySelector(".weekdays");
29+
weekdaysContainer.innerHTML = "";
30+
31+
const baseDate = new Date(Date.UTC(2026, 0, 5)); // Sunday
32+
33+
const formatter = new Intl.DateTimeFormat(locale, {
34+
weekday: 'short'
35+
});
36+
37+
for (let i = 0; i < 7; i++) {
38+
const day = new Date(baseDate);
39+
day.setUTCDate(baseDate.getUTCDate() + i);
40+
41+
const name = formatter.format(day);
42+
weekdaysContainer.innerHTML += `<span>${name}</span>`;
43+
}
44+
};
245

346
const renderCalendar = () => {
4-
date.setDate(1);
5-
6-
const monthDays = document.querySelector(".days");
7-
8-
const lastDay = new Date(
9-
date.getFullYear(),
10-
date.getMonth() + 1,
11-
0
12-
).getDate();
13-
14-
const prevLastDay = new Date(
15-
date.getFullYear(),
16-
date.getMonth(),
17-
0
18-
).getDate();
19-
20-
const firstDayIndex = date.getDay();
21-
22-
const lastDayIndex = new Date(
23-
date.getFullYear(),
24-
date.getMonth() + 1,
25-
0
26-
).getDay();
27-
28-
const nextDays = 7 - lastDayIndex - 1;
29-
30-
const months = [
31-
"January", "February", "March", "April", "May", "June",
32-
"July", "August", "September", "October", "November", "December"
33-
];
34-
35-
document.querySelector("#current-month").innerHTML = months[date.getMonth()];
36-
document.querySelector("#current-year").innerHTML = date.getFullYear();
37-
38-
let days = "";
39-
40-
// Previous month's days
41-
for (let x = firstDayIndex; x > 0; x--) {
42-
days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
43-
}
44-
45-
// Current month's days
46-
for (let i = 1; i <= lastDay; i++) {
47-
if (
48-
i === new Date().getDate() &&
49-
date.getMonth() === new Date().getMonth() &&
50-
date.getFullYear() === new Date().getFullYear()
51-
) {
52-
days += `<div class="today">${i}</div>`;
53-
} else {
54-
days += `<div>${i}</div>`;
55-
}
56-
}
57-
58-
// Next month's days
59-
for (let j = 1; j <= nextDays; j++) {
60-
days += `<div class="next-date">${j}</div>`;
61-
}
62-
63-
monthDays.innerHTML = days;
47+
date.setDate(1);
48+
49+
const monthDays = document.querySelector(".days");
50+
51+
const lastDay = new Date(
52+
date.getFullYear(),
53+
date.getMonth() + 1,
54+
0
55+
).getDate();
56+
57+
const prevLastDay = new Date(
58+
date.getFullYear(),
59+
date.getMonth(),
60+
0
61+
).getDate();
62+
63+
const firstDayIndex =
64+
(new Intl.DateTimeFormat(locale, { weekday: 'short' })
65+
.formatToParts(date)
66+
.find(p => p.type === 'weekday') ? date.getDay() : date.getDay());
67+
68+
const lastDayIndex = new Date(
69+
date.getFullYear(),
70+
date.getMonth() + 1,
71+
0
72+
).getDay();
73+
74+
const nextDays = 7 - lastDayIndex - 1;
75+
76+
// Localized month name
77+
const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
78+
79+
document.querySelector("#current-month").textContent =
80+
monthFormatter.format(date);
81+
82+
document.querySelector("#current-year").textContent =
83+
date.getFullYear();
84+
85+
let days = "";
86+
87+
// Previous month's days
88+
for (let x = firstDayIndex; x > 0; x--) {
89+
days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
90+
}
91+
92+
// Current month's days
93+
const today = new Date();
94+
95+
for (let i = 1; i <= lastDay; i++) {
96+
if (
97+
i === today.getDate() &&
98+
date.getMonth() === today.getMonth() &&
99+
date.getFullYear() === today.getFullYear()
100+
) {
101+
days += `<div class="today">${i}</div>`;
102+
} else {
103+
days += `<div>${i}</div>`;
104+
}
105+
}
106+
107+
// Next month's days
108+
for (let j = 1; j <= nextDays; j++) {
109+
days += `<div class="next-date">${j}</div>`;
110+
}
111+
112+
monthDays.innerHTML = days;
64113
};
65114

66115
document.querySelector("#prev-month").addEventListener("click", () => {
@@ -73,4 +122,5 @@ document.querySelector("#next-month").addEventListener("click", () => {
73122
renderCalendar();
74123
});
75124

125+
renderWeekdays();
76126
renderCalendar();

‎Resources/Skins/WebView2/@Resources/Calendar/style.css‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
:root {
22
--bg-color: #0f0f13;
33
--text-primary: #ffffff;
4-
--text-secondary: #a0a0a0;
4+
--text-secondary: #ebebeb;
55
--accent-color: #4facfe;
66
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
7-
--glass-bg: rgba(255, 255, 255, 0.05);
7+
--glass-bg: rgba(0, 0, 0, 0.25);
88
--glass-border: rgba(255, 255, 255, 0.1);
99
--day-hover: rgba(255, 255, 255, 0.1);
1010
}
@@ -18,14 +18,15 @@
1818
body {
1919
background-color: transparent;
2020
font-family: 'Outfit', sans-serif;
21-
height: 100vh;
21+
height: 100%;
2222
display: flex;
2323
justify-content: center;
2424
align-items: center;
2525
overflow: hidden;
2626
user-select: none; /* Prevent text selection */
2727
}
2828

29+
2930
.widget-container {
3031
position: relative;
3132
width: 280px;
@@ -93,7 +94,7 @@ body {
9394
border: 1px solid var(--glass-border);
9495
border-radius: 14px; /* Further reduced */
9596
padding: 10px; /* Further reduced */
96-
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
97+
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.37);
9798
display: flex;
9899
flex-direction: column;
99100
}
@@ -107,6 +108,16 @@ body {
107108
color: var(--text-primary);
108109
}
109110

111+
.calendar-bottom {
112+
position: absolute;
113+
font-size: 0.8rem; /* Further reduced */
114+
display: flex;
115+
align-items: center;
116+
color: var(--text-secondary);
117+
bottom: -20px;
118+
left: 15px;
119+
}
120+
110121
.month-year {
111122
font-size: 0.8rem; /* Further reduced */
112123
font-weight: 600;

‎Resources/Skins/WebView2/@Resources/Clock/script.js‎

Lines changed: 77 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,81 @@
1+
// ---- Helpers ----
2+
const loadVariable = (key, defaultValue) => {
3+
const value = RainmeterAPI.GetVariable(String(key));
4+
if (value.includes("#")) {
5+
writeVariable(String(key), String(defaultValue));
6+
return String(defaultValue);
7+
}
8+
return value;
9+
};
10+
11+
const writeVariable = (key, value) => {
12+
RainmeterAPI.Bang(`[!WriteKeyValue Variables "${key}" "${value}"]`);
13+
};
14+
15+
// ---- Variables ----
16+
// We use Intl.DateTimeFormat().resolvedOptions to get the user's locale and timezone.
17+
const userLocale = Intl.DateTimeFormat().resolvedOptions().locale;
18+
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
19+
20+
let timeZone = loadVariable('timezone', userTimeZone);
21+
let locale = loadVariable('locale', userLocale);
22+
let format = loadVariable('format', '12h');
23+
24+
// ---- DOM cache ----
25+
const dom = {
26+
hours: document.getElementById('hours'),
27+
minutes: document.getElementById('minutes'),
28+
seconds: document.getElementById('seconds'),
29+
ampm: document.getElementById('ampm'),
30+
date: document.getElementById('date')
31+
};
32+
33+
// ---- Clock logic ----
34+
function toggleLocale() {
35+
locale = locale === userLocale ? 'en-US' : userLocale;
36+
writeVariable('locale', locale);
37+
updateClock();
38+
}
39+
40+
function toggleFormat() {
41+
format = format === '12h' ? '24h' : '12h';
42+
writeVariable('format', format);
43+
updateClock();
44+
}
45+
146
function updateClock() {
2-
const now = new Date();
3-
4-
let hours = now.getHours();
5-
const minutes = now.getMinutes();
6-
const seconds = now.getSeconds();
7-
const ampm = hours >= 12 ? 'PM' : 'AM';
8-
9-
// Convert to 12-hour format
10-
hours = hours % 12;
11-
hours = hours ? hours : 12; // the hour '0' should be '12'
12-
13-
// Pad with leading zeros
14-
const hoursStr = hours.toString().padStart(2, '0');
15-
const minutesStr = minutes.toString().padStart(2, '0');
16-
const secondsStr = seconds.toString().padStart(2, '0');
17-
18-
// Update DOM
19-
document.getElementById('hours').textContent = hoursStr;
20-
document.getElementById('minutes').textContent = minutesStr;
21-
document.getElementById('seconds').textContent = secondsStr;
22-
document.getElementById('ampm').textContent = ampm;
23-
24-
// Update Date
25-
const options = { weekday: 'long', month: 'long', day: 'numeric' };
26-
const dateStr = now.toLocaleDateString('en-US', options);
27-
document.getElementById('date').textContent = dateStr;
47+
const now = new Date();
48+
49+
const timeFormatter = new Intl.DateTimeFormat(locale, {
50+
timeZone,
51+
hour: '2-digit',
52+
minute: '2-digit',
53+
second: '2-digit',
54+
hour12: format === '12h'
55+
});
56+
57+
const dateFormatter = new Intl.DateTimeFormat(locale, {
58+
timeZone,
59+
weekday: 'long',
60+
month: 'long',
61+
day: 'numeric'
62+
});
63+
64+
const timeParts = timeFormatter.formatToParts(now);
65+
const dateParts = dateFormatter.formatToParts(now);
66+
67+
const get = (parts, type) =>
68+
parts.find(p => p.type === type)?.value || '';
69+
70+
dom.hours.textContent = get(timeParts, 'hour');
71+
dom.minutes.textContent = get(timeParts, 'minute');
72+
dom.seconds.textContent = get(timeParts, 'second');
73+
dom.ampm.textContent = get(timeParts, 'dayPeriod');
74+
75+
dom.date.textContent = dateParts.map(p => p.value).join('');
2876
}
2977

30-
// Update immediately and then every second
78+
// ---- Start clock ----
3179
updateClock();
32-
setInterval(updateClock, 1000);
80+
// Update clock once a second.
81+
setInterval(updateClock, 1000);

0 commit comments

Comments
 (0)