NSTechBytes · NSTechBytes · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/.gitignore b/.gitignore
@@ -427,4 +427,10 @@ FodyWeavers.xsd
 *.msm
 *.msp
 
-dist
+dist
+
+# Ignore all @Backup folders
+**/@Backup/
+
+# Ignore all @Vault folders
+**/@Vault/
diff --git a/README.md b/README.md
diff --git a/Resources/Skins/WebView2/@Resources/Calendar/index.html b/Resources/Skins/WebView2/@Resources/Calendar/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Glass Calendar Widget</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Phosphor Icons for arrows -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+</head>
+<body>
+    <div class="widget-container">
+        <!-- Background Elements -->
+        <div class="bg-shape shape-1"></div>
+        <div class="bg-shape shape-2"></div>
+
+        <div class="calendar-card">
+            <div class="calendar-header">
+                <button id="prev-month" class="nav-btn"><i class="ph ph-caret-left"></i></button>
+                <div class="month-year">
+                    <span id="current-month">Month</span>
+                    <span id="current-year">Year</span>
+                </div>
+                <button id="next-month" class="nav-btn"><i class="ph ph-caret-right"></i></button>
+            </div>
+
+            <div class="calendar-body">
+                <div class="weekdays">
+                    <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
+                </div>
+                <div class="days" id="calendar-days">
+                    <!-- Days will be injected here via JS -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Resources/Skins/WebView2/@Resources/Calendar/script.js b/Resources/Skins/WebView2/@Resources/Calendar/script.js
@@ -0,0 +1,76 @@
+const date = new Date();
+
+const renderCalendar = () => {
+    date.setDate(1);
+
+    const monthDays = document.querySelector(".days");
+
+    const lastDay = new Date(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        0
+    ).getDate();
+
+    const prevLastDay = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        0
+    ).getDate();
+
+    const firstDayIndex = date.getDay();
+
+    const lastDayIndex = new Date(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        0
+    ).getDay();
+
+    const nextDays = 7 - lastDayIndex - 1;
+
+    const months = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+
+    document.querySelector("#current-month").innerHTML = months[date.getMonth()];
+    document.querySelector("#current-year").innerHTML = date.getFullYear();
+
+    let days = "";
+
+    // Previous month's days
+    for (let x = firstDayIndex; x > 0; x--) {
+        days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
+    }
+
+    // Current month's days
+    for (let i = 1; i <= lastDay; i++) {
+        if (
+            i === new Date().getDate() &&
+            date.getMonth() === new Date().getMonth() &&
+            date.getFullYear() === new Date().getFullYear()
+        ) {
+            days += `<div class="today">${i}</div>`;
+        } else {
+            days += `<div>${i}</div>`;
+        }
+    }
+
+    // Next month's days
+    for (let j = 1; j <= nextDays; j++) {
+        days += `<div class="next-date">${j}</div>`;
+    }
+
+    monthDays.innerHTML = days;
+};
+
+document.querySelector("#prev-month").addEventListener("click", () => {
+    date.setMonth(date.getMonth() - 1);
+    renderCalendar();
+});
+
+document.querySelector("#next-month").addEventListener("click", () => {
+    date.setMonth(date.getMonth() + 1);
+    renderCalendar();
+});
+
+renderCalendar();
diff --git a/Resources/Skins/WebView2/@Resources/Calendar/style.css b/Resources/Skins/WebView2/@Resources/Calendar/style.css
@@ -0,0 +1,185 @@
+:root {
+    --bg-color: #0f0f13;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --accent-color: #4facfe;
+    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --day-hover: rgba(255, 255, 255, 0.1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: transparent;
+    font-family: 'Outfit', sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    user-select: none; /* Prevent text selection */
+}
+
+.widget-container {
+    position: relative;
+    width: 280px;
+    height: 320px; /* Reduced from 380px */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Abstract Background Shapes */
+.bg-shape {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(30px); /* Reduced blur */
+    opacity: 0.6;
+    z-index: 0;
+}
+
+.shape-1 {
+    width: 160px; /* Reduced from 200px */
+    height: 160px;
+    background: #764ba2;
+    top: -15px;
+    left: -15px;
+    animation: float 10s infinite ease-in-out;
+}
+
+.shape-2 {
+    width: 140px; /* Reduced from 180px */
+    height: 140px;
+    background: #4facfe;
+    bottom: -15px;
+    right: -15px;
+    animation: float 12s infinite ease-in-out reverse;
+}
+
+@keyframes float {
+    0%, 100% { transform: translate(0, 0); }
+    50% { transform: translate(15px, 15px); } /* Reduced movement */
+}
+
+/* Glass Card */
+.calendar-card {
+    position: relative;
+    z-index: 1;
+    width: 90%;
+    height: 90%;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 18px; /* Reduced from 24px */
+    padding: 15px; /* Reduced from 20px */
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px; /* Reduced from 20px */
+    color: var(--text-primary);
+}
+
+.month-year {
+    font-size: 0.95rem; /* Reduced from 1.2rem */
+    font-weight: 600;
+    text-transform: capitalize;
+    display: flex;
+    gap: 4px; /* Reduced from 5px */
+}
+
+#current-year {
+    color: var(--text-secondary);
+    font-weight: 400;
+}
+
+.nav-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1rem; /* Reduced from 1.2rem */
+    cursor: pointer;
+    padding: 4px; /* Reduced from 5px */
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-btn:hover {
+    background: var(--glass-border);
+    color: var(--text-primary);
+}
+
+/* Body */
+.calendar-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    margin-bottom: 6px; /* Reduced from 10px */
+}
+
+.weekdays span {
+    font-size: 0.7rem; /* Reduced from 0.85rem */
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+}
+
+.days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 3px; /* Reduced from 5px */
+    text-align: center;
+}
+
+.days div {
+    font-size: 0.8rem; /* Reduced from 0.95rem */
+    color: var(--text-primary);
+    width: 100%;
+    aspect-ratio: 1; /* Make them square */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+/* States */
+.days div:hover:not(.empty) {
+    background-color: var(--day-hover);
+}
+
+.days div.today {
+    background: var(--accent-gradient);
+    color: #fff;
+    font-weight: 600;
+    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
+}
+
+.days div.prev-date,
+.days div.next-date {
+    color: rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+}
diff --git a/Resources/Skins/WebView2/@Resources/Clock/index.html b/Resources/Skins/WebView2/@Resources/Clock/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liquid Clock Widget</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="widget-container">
+        <div class="liquid-background">
+            <div class="blob blob-1"></div>
+            <div class="blob blob-2"></div>
+            <div class="blob blob-3"></div>
+        </div>
+
+        <div class="glass-panel">
+            <div class="clock-content">
+                <div class="time-wrapper">
+                    <span id="hours">12</span>
+                    <span class="colon">:</span>
+                    <span id="minutes">00</span>
+                    <div class="seconds-wrapper">
+                        <span id="seconds">00</span>
+                        <span id="ampm">AM</span>
+                    </div>
+                </div>
+                <div class="date" id="date">Monday, January 1</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SVG Filter for Gooey Effect -->
+    <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <defs>
+            <filter id="goo">
+                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
+                <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" />
+                <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+            </filter>
+        </defs>
+    </svg>
+
+    <script src="script.js"></script>
+</body>
+</html>