Skip to content

Commit af40d37

Browse files
NSTechBytesNSTechBytes
authored
Merge pull request #2 from NSTechBytes/working2
Working2
2 parents 2a6dad0 + 850807c commit af40d37

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2262
-1615
lines changed

‎.gitignore‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -427,4 +427,10 @@ FodyWeavers.xsd
427427
*.msm
428428
*.msp
429429

430-
dist
430+
dist
431+
432+
# Ignore all @Backup folders
433+
**/@Backup/
434+
435+
# Ignore all @Vault folders
436+
**/@Vault/

‎README.md‎

Lines changed: 186 additions & 286 deletions
Large diffs are not rendered by default.

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Glass Calendar Widget</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11+
<!-- Phosphor Icons for arrows -->
12+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
13+
</head>
14+
<body>
15+
<div class="widget-container">
16+
<!-- Background Elements -->
17+
<div class="bg-shape shape-1"></div>
18+
<div class="bg-shape shape-2"></div>
19+
20+
<div class="calendar-card">
21+
<div class="calendar-header">
22+
<button id="prev-month" class="nav-btn"><i class="ph ph-caret-left"></i></button>
23+
<div class="month-year">
24+
<span id="current-month">Month</span>
25+
<span id="current-year">Year</span>
26+
</div>
27+
<button id="next-month" class="nav-btn"><i class="ph ph-caret-right"></i></button>
28+
</div>
29+
30+
<div class="calendar-body">
31+
<div class="weekdays">
32+
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
33+
</div>
34+
<div class="days" id="calendar-days">
35+
<!-- Days will be injected here via JS -->
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const date = new Date();
2+
3+
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;
64+
};
65+
66+
document.querySelector("#prev-month").addEventListener("click", () => {
67+
date.setMonth(date.getMonth() - 1);
68+
renderCalendar();
69+
});
70+
71+
document.querySelector("#next-month").addEventListener("click", () => {
72+
date.setMonth(date.getMonth() + 1);
73+
renderCalendar();
74+
});
75+
76+
renderCalendar();

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
:root {
2+
--bg-color: #0f0f13;
3+
--text-primary: #ffffff;
4+
--text-secondary: #a0a0a0;
5+
--accent-color: #4facfe;
6+
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
7+
--glass-bg: rgba(255, 255, 255, 0.05);
8+
--glass-border: rgba(255, 255, 255, 0.1);
9+
--day-hover: rgba(255, 255, 255, 0.1);
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-color: transparent;
20+
font-family: 'Outfit', sans-serif;
21+
height: 100vh;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
overflow: hidden;
26+
user-select: none; /* Prevent text selection */
27+
}
28+
29+
.widget-container {
30+
position: relative;
31+
width: 280px;
32+
height: 320px; /* Reduced from 380px */
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
}
37+
38+
/* Abstract Background Shapes */
39+
.bg-shape {
40+
position: absolute;
41+
border-radius: 50%;
42+
filter: blur(30px); /* Reduced blur */
43+
opacity: 0.6;
44+
z-index: 0;
45+
}
46+
47+
.shape-1 {
48+
width: 160px; /* Reduced from 200px */
49+
height: 160px;
50+
background: #764ba2;
51+
top: -15px;
52+
left: -15px;
53+
animation: float 10s infinite ease-in-out;
54+
}
55+
56+
.shape-2 {
57+
width: 140px; /* Reduced from 180px */
58+
height: 140px;
59+
background: #4facfe;
60+
bottom: -15px;
61+
right: -15px;
62+
animation: float 12s infinite ease-in-out reverse;
63+
}
64+
65+
@keyframes float {
66+
0%, 100% { transform: translate(0, 0); }
67+
50% { transform: translate(15px, 15px); } /* Reduced movement */
68+
}
69+
70+
/* Glass Card */
71+
.calendar-card {
72+
position: relative;
73+
z-index: 1;
74+
width: 90%;
75+
height: 90%;
76+
background: var(--glass-bg);
77+
backdrop-filter: blur(20px);
78+
-webkit-backdrop-filter: blur(20px);
79+
border: 1px solid var(--glass-border);
80+
border-radius: 18px; /* Reduced from 24px */
81+
padding: 15px; /* Reduced from 20px */
82+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
83+
display: flex;
84+
flex-direction: column;
85+
}
86+
87+
/* Header */
88+
.calendar-header {
89+
display: flex;
90+
justify-content: space-between;
91+
align-items: center;
92+
margin-bottom: 12px; /* Reduced from 20px */
93+
color: var(--text-primary);
94+
}
95+
96+
.month-year {
97+
font-size: 0.95rem; /* Reduced from 1.2rem */
98+
font-weight: 600;
99+
text-transform: capitalize;
100+
display: flex;
101+
gap: 4px; /* Reduced from 5px */
102+
}
103+
104+
#current-year {
105+
color: var(--text-secondary);
106+
font-weight: 400;
107+
}
108+
109+
.nav-btn {
110+
background: transparent;
111+
border: none;
112+
color: var(--text-secondary);
113+
font-size: 1rem; /* Reduced from 1.2rem */
114+
cursor: pointer;
115+
padding: 4px; /* Reduced from 5px */
116+
border-radius: 50%;
117+
transition: all 0.2s ease;
118+
display: flex;
119+
align-items: center;
120+
justify-content: center;
121+
}
122+
123+
.nav-btn:hover {
124+
background: var(--glass-border);
125+
color: var(--text-primary);
126+
}
127+
128+
/* Body */
129+
.calendar-body {
130+
flex: 1;
131+
display: flex;
132+
flex-direction: column;
133+
}
134+
135+
.weekdays {
136+
display: grid;
137+
grid-template-columns: repeat(7, 1fr);
138+
text-align: center;
139+
margin-bottom: 6px; /* Reduced from 10px */
140+
}
141+
142+
.weekdays span {
143+
font-size: 0.7rem; /* Reduced from 0.85rem */
144+
font-weight: 500;
145+
color: var(--text-secondary);
146+
text-transform: uppercase;
147+
}
148+
149+
.days {
150+
display: grid;
151+
grid-template-columns: repeat(7, 1fr);
152+
gap: 3px; /* Reduced from 5px */
153+
text-align: center;
154+
}
155+
156+
.days div {
157+
font-size: 0.8rem; /* Reduced from 0.95rem */
158+
color: var(--text-primary);
159+
width: 100%;
160+
aspect-ratio: 1; /* Make them square */
161+
display: flex;
162+
justify-content: center;
163+
align-items: center;
164+
border-radius: 50%;
165+
cursor: pointer;
166+
transition: all 0.2s ease;
167+
}
168+
169+
/* States */
170+
.days div:hover:not(.empty) {
171+
background-color: var(--day-hover);
172+
}
173+
174+
.days div.today {
175+
background: var(--accent-gradient);
176+
color: #fff;
177+
font-weight: 600;
178+
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
179+
}
180+
181+
.days div.prev-date,
182+
.days div.next-date {
183+
color: rgba(255, 255, 255, 0.2);
184+
pointer-events: none;
185+
}

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Liquid Clock Widget</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div class="widget-container">
14+
<div class="liquid-background">
15+
<div class="blob blob-1"></div>
16+
<div class="blob blob-2"></div>
17+
<div class="blob blob-3"></div>
18+
</div>
19+
20+
<div class="glass-panel">
21+
<div class="clock-content">
22+
<div class="time-wrapper">
23+
<span id="hours">12</span>
24+
<span class="colon">:</span>
25+
<span id="minutes">00</span>
26+
<div class="seconds-wrapper">
27+
<span id="seconds">00</span>
28+
<span id="ampm">AM</span>
29+
</div>
30+
</div>
31+
<div class="date" id="date">Monday, January 1</div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<!-- SVG Filter for Gooey Effect -->
37+
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
38+
<defs>
39+
<filter id="goo">
40+
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
41+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
42+
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
43+
</filter>
44+
</defs>
45+
</svg>
46+
47+
<script src="script.js"></script>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)