diff --git a/index.html b/index.html
index 7cae710..9e4352c 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
rel="stylesheet"
/>
+
diff --git a/invoice.js b/invoice.js
index ef9c73c..b07648b 100644
--- a/invoice.js
+++ b/invoice.js
@@ -1,5 +1,59 @@
const STORAGE_KEY = "invoiceData";
const THEME_KEY = "invoiceTheme";
+const WIN2000_KEY = "win2000Mode";
+
+// ── Windows 2000 Easter Egg ──────────────────────────────────
+
+const SECRET_CODE = "win2000";
+let secretBuffer = "";
+
+function toggleWin2000(forceState) {
+ const isActive = forceState !== undefined ? forceState : !document.body.classList.contains("win2000");
+ document.body.classList.toggle("win2000", isActive);
+ localStorage.setItem(WIN2000_KEY, isActive ? "true" : "false");
+
+ // Fun audio feedback (optional, won't error if not supported)
+ if (isActive) {
+ try {
+ const ctx = new (window.AudioContext || window.webkitAudioContext)();
+ const osc = ctx.createOscillator();
+ const gain = ctx.createGain();
+ osc.connect(gain);
+ gain.connect(ctx.destination);
+ osc.frequency.value = 800;
+ gain.gain.value = 0.1;
+ osc.start();
+ osc.stop(ctx.currentTime + 0.15);
+ } catch (e) { /* silent fail */ }
+ }
+}
+
+// Restore saved win2000 state
+if (localStorage.getItem(WIN2000_KEY) === "true") {
+ document.body.classList.add("win2000");
+}
+
+// Listen for secret code typing
+document.addEventListener("keydown", (e) => {
+ // Don't capture when typing in editable fields
+ if (e.target.isContentEditable || e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") {
+ return;
+ }
+
+ // Build the buffer
+ secretBuffer += e.key.toLowerCase();
+
+ // Keep only last N characters (length of secret)
+ if (secretBuffer.length > SECRET_CODE.length) {
+ secretBuffer = secretBuffer.slice(-SECRET_CODE.length);
+ }
+
+ // Check for match
+ if (secretBuffer === SECRET_CODE) {
+ toggleWin2000();
+ secretBuffer = "";
+ }
+});
// ── Theme ────────────────────────────────────────────────────
diff --git a/win2000.css b/win2000.css
new file mode 100644
index 0000000..de387cb
--- /dev/null
+++ b/win2000.css
@@ -0,0 +1,534 @@
+/* ══════════════════════════════════════════════════════════════
+ Windows 2000 Easter Egg Theme
+ Activated by typing "win2000" anywhere on the page
+ ══════════════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;700&display=swap');
+
+/* Only apply when body has .win2000 class */
+body.win2000 {
+ --win-desktop: #008080;
+ --win-gray: #d4d0c8;
+ --win-gray-dark: #808080;
+ --win-gray-darker: #404040;
+ --win-gray-light: #ffffff;
+ --win-title-from: #000080;
+ --win-title-to: #1084d0;
+ --win-title-text: #ffffff;
+ --win-btn-face: #d4d0c8;
+ --win-btn-shadow: #808080;
+ --win-btn-dark: #404040;
+ --win-btn-light: #ffffff;
+ --win-btn-hilite: #e8e4dc;
+ --win-inset: #808080;
+ --win-text: #000000;
+ --win-blue-sel: #000080;
+ --win-blue-sel-text: #ffffff;
+ --win-link: #0000ee;
+ --font-sys: "Pixelify Sans", "MS Sans Serif", Tahoma, Arial, sans-serif;
+
+ font-family: var(--font-sys) !important;
+ font-size: 12px;
+ background: var(--win-desktop) !important;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ rgba(0,0,0,0.03) 0px,
+ rgba(0,0,0,0.03) 1px,
+ transparent 1px,
+ transparent 8px
+ ) !important;
+ padding: 2rem 1rem 5rem !important;
+}
+
+/* ── Theme Variations for Win2000 ────────────────────────────── */
+
+body.win2000[data-theme="navy"] {
+ --win-desktop: #008080;
+ --win-title-from: #000080;
+ --win-title-to: #1084d0;
+ --win-blue-sel: #000080;
+}
+
+body.win2000[data-theme="emerald"] {
+ --win-desktop: #004d40;
+ --win-title-from: #004d40;
+ --win-title-to: #26a69a;
+ --win-blue-sel: #00695c;
+}
+
+body.win2000[data-theme="sunset"] {
+ --win-desktop: #5d4037;
+ --win-title-from: #bf360c;
+ --win-title-to: #ff9800;
+ --win-blue-sel: #e65100;
+}
+
+body.win2000[data-theme="rose"] {
+ --win-desktop: #4a148c;
+ --win-title-from: #880e4f;
+ --win-title-to: #ec407a;
+ --win-blue-sel: #ad1457;
+}
+
+body.win2000[data-theme="slate"] {
+ --win-desktop: #37474f;
+ --win-title-from: #263238;
+ --win-title-to: #607d8b;
+ --win-blue-sel: #455a64;
+}
+
+/* ── Action Buttons ──────────────────────────────────────────── */
+
+body.win2000 #action-btns {
+ bottom: 1.5rem;
+ right: 1.5rem;
+ gap: 0.5rem;
+}
+
+body.win2000 .action-btn {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ background: var(--win-gray);
+ color: var(--win-text);
+ border-top: 2px solid var(--win-btn-light);
+ border-left: 2px solid var(--win-btn-light);
+ border-bottom: 2px solid var(--win-btn-dark);
+ border-right: 2px solid var(--win-btn-dark);
+ padding: 4px 12px;
+ border-radius: 0;
+ box-shadow: none;
+ min-width: 130px;
+ justify-content: center;
+}
+
+body.win2000 .action-btn:hover {
+ transform: none;
+ filter: brightness(1.05);
+}
+
+body.win2000 .action-btn:active {
+ border-top: 2px solid var(--win-btn-dark);
+ border-left: 2px solid var(--win-btn-dark);
+ border-bottom: 2px solid var(--win-btn-light);
+ border-right: 2px solid var(--win-btn-light);
+}
+
+body.win2000 .action-btn svg {
+ width: 14px;
+ height: 14px;
+}
+
+body.win2000 .action-btn--reset,
+body.win2000 .action-btn--reset:hover {
+ background: var(--win-gray);
+ color: var(--win-text);
+}
+
+body.win2000 .action-btn--download,
+body.win2000 .action-btn--download:hover {
+ background: var(--win-gray);
+ color: var(--win-text);
+ box-shadow: none;
+}
+
+body.win2000 .action-btn--reset svg { color: #444; }
+body.win2000 .action-btn--download svg { color: #000080; }
+
+/* ── Theme Picker → Taskbar ──────────────────────────────────── */
+
+body.win2000 #theme-picker {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 200;
+ height: 32px;
+ background: var(--win-gray);
+ border-top: 2px solid var(--win-btn-light);
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 0 6px;
+}
+
+body.win2000 #theme-picker::before {
+ content: "Start";
+ font-family: var(--font-sys);
+ font-size: 12px;
+ font-weight: bold;
+ background: var(--win-gray);
+ border-top: 2px solid var(--win-btn-light);
+ border-left: 2px solid var(--win-btn-light);
+ border-bottom: 2px solid var(--win-btn-dark);
+ border-right: 2px solid var(--win-btn-dark);
+ padding: 2px 10px;
+ margin-right: 8px;
+ cursor: pointer;
+}
+
+body.win2000 .theme-swatch {
+ height: 22px;
+ width: auto;
+ min-width: 60px;
+ padding: 2px 8px;
+ border-top: 2px solid var(--win-btn-light);
+ border-left: 2px solid var(--win-btn-light);
+ border-bottom: 2px solid var(--win-btn-dark);
+ border-right: 2px solid var(--win-btn-dark);
+ background: var(--win-gray);
+ cursor: pointer;
+ font-family: var(--font-sys);
+ font-size: 11px;
+ color: var(--win-text);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 4px;
+ overflow: visible;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+body.win2000 .theme-swatch::after {
+ font-family: var(--font-sys);
+ font-size: 10px;
+}
+
+body.win2000 .theme-swatch[data-theme="navy"]::after { content: "Navy"; }
+body.win2000 .theme-swatch[data-theme="emerald"]::after { content: "Emerald"; }
+body.win2000 .theme-swatch[data-theme="sunset"]::after { content: "Sunset"; }
+body.win2000 .theme-swatch[data-theme="rose"]::after { content: "Rose"; }
+body.win2000 .theme-swatch[data-theme="slate"]::after { content: "Slate"; }
+
+body.win2000 .theme-swatch:hover {
+ transform: none;
+ filter: brightness(1.05);
+}
+
+body.win2000 .theme-swatch.active {
+ border-top: 2px solid var(--win-btn-dark);
+ border-left: 2px solid var(--win-btn-dark);
+ border-bottom: 2px solid var(--win-btn-light);
+ border-right: 2px solid var(--win-btn-light);
+ box-shadow: none;
+}
+
+body.win2000 .theme-swatch span {
+ display: inline-block;
+ flex: none;
+ width: 10px;
+ height: 10px;
+ border: 1px solid #666;
+ flex-shrink: 0;
+}
+
+body.win2000 .theme-swatch span:last-child {
+ display: none;
+}
+
+/* ── Invoice Card → Window ───────────────────────────────────── */
+
+body.win2000 .invoice-card {
+ background: var(--win-gray);
+ max-width: 680px;
+ border-top: 2px solid var(--win-btn-light);
+ border-left: 2px solid var(--win-btn-light);
+ border-bottom: 2px solid var(--win-btn-dark);
+ border-right: 2px solid var(--win-btn-dark);
+ border-radius: 0;
+ box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
+ overflow: visible;
+}
+
+/* ── Header → Titlebar ───────────────────────────────────────── */
+
+body.win2000 .invoice-header {
+ background: linear-gradient(to right, var(--win-title-from), var(--win-title-to));
+ padding: 4px 6px;
+ border: none;
+ border-left: 0;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+}
+
+body.win2000 .invoice-title {
+ font-family: var(--font-sys);
+ font-size: 13px;
+ font-weight: bold;
+ color: var(--win-title-text);
+ letter-spacing: 0;
+ line-height: 1;
+ text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+}
+
+body.win2000 .invoice-number {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ color: rgba(255,255,255,0.85);
+ margin: 0;
+ margin-top: 0;
+}
+
+body.win2000 .header-from,
+body.win2000 .header-right,
+body.win2000 .date-box,
+body.win2000 .bill-to {
+ display: none;
+}
+
+/* ── Content Area ────────────────────────────────────────────── */
+
+body.win2000 .invoice-content {
+ padding: 10px 12px 12px;
+ background: var(--win-gray);
+}
+
+/* ── Editable Fields ─────────────────────────────────────────── */
+
+body.win2000 [contenteditable="true"] {
+ outline: none;
+ border-top: 1px solid var(--win-btn-dark);
+ border-left: 1px solid var(--win-btn-dark);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+ background: #fff;
+ padding: 2px 4px;
+ font-family: var(--font-sys);
+ font-size: 12px;
+ color: #000;
+}
+
+body.win2000 [contenteditable="true"]:focus {
+ background: #fff;
+ outline: 1px dotted #000;
+ outline-offset: -2px;
+}
+
+/* ── Table ───────────────────────────────────────────────────── */
+
+body.win2000 .invoice-table {
+ border-top: 1px solid var(--win-btn-dark);
+ border-left: 1px solid var(--win-btn-dark);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+ background: #fff;
+}
+
+body.win2000 .invoice-table thead tr {
+ background: var(--win-blue-sel);
+}
+
+body.win2000 .invoice-table th {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ font-weight: bold;
+ color: var(--win-blue-sel-text);
+ text-transform: none;
+ letter-spacing: 0;
+ padding: 4px 8px;
+ text-align: left;
+ border-bottom: 1px solid var(--win-btn-dark);
+ border-right: 1px solid rgba(255,255,255,0.2);
+}
+
+body.win2000 .invoice-table th:first-child,
+body.win2000 .invoice-table th:last-child {
+ border-radius: 0;
+}
+
+body.win2000 .line-item {
+ border-bottom: 1px solid #e0e0e0;
+}
+
+body.win2000 .line-item:nth-child(even) {
+ background: #f5f5f5;
+}
+
+body.win2000 .line-item:hover {
+ background: #d0d8e8;
+}
+
+body.win2000 .line-item td {
+ padding: 4px 8px;
+ font-size: 12px;
+ font-family: var(--font-sys);
+ color: var(--win-text);
+}
+
+/* ── Remove Row Button ───────────────────────────────────────── */
+
+body.win2000 .remove-row {
+ background: var(--win-gray);
+ border-top: 1px solid var(--win-btn-light);
+ border-left: 1px solid var(--win-btn-light);
+ border-bottom: 1px solid var(--win-btn-dark);
+ border-right: 1px solid var(--win-btn-dark);
+ color: var(--win-text);
+ padding: 1px 4px;
+ width: 20px;
+ height: 18px;
+}
+
+body.win2000 .remove-row:hover {
+ background: var(--win-btn-hilite);
+ color: var(--win-text);
+}
+
+body.win2000 .remove-row svg {
+ width: 10px;
+ height: 10px;
+ color: #800000;
+}
+
+/* ── Add Row Button ──────────────────────────────────────────── */
+
+body.win2000 .add-row-wrap {
+ margin-top: 6px;
+ justify-content: flex-start;
+}
+
+body.win2000 #addRowBtn {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ background: var(--win-gray);
+ color: var(--win-text);
+ border-top: 2px solid var(--win-btn-light);
+ border-left: 2px solid var(--win-btn-light);
+ border-bottom: 2px solid var(--win-btn-dark);
+ border-right: 2px solid var(--win-btn-dark);
+ padding: 3px 10px;
+}
+
+body.win2000 #addRowBtn:hover {
+ background: var(--win-btn-hilite);
+ color: var(--win-text);
+}
+
+body.win2000 #addRowBtn svg {
+ width: 12px;
+ height: 12px;
+ color: var(--win-text);
+}
+
+/* ── Totals ──────────────────────────────────────────────────── */
+
+body.win2000 .totals {
+ margin-top: 8px;
+ gap: 2px;
+ padding: 6px;
+ background: var(--win-gray);
+ border-top: 1px solid var(--win-btn-dark);
+ border-left: 1px solid var(--win-btn-dark);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+}
+
+body.win2000 .totals-row {
+ width: 240px;
+ font-size: 12px;
+ font-family: var(--font-sys);
+ color: var(--win-text);
+}
+
+body.win2000 .totals-row span:last-child {
+ color: #000;
+}
+
+body.win2000 .totals-total {
+ border-top: 1px solid var(--win-btn-shadow);
+ width: 240px;
+ margin-top: 4px;
+ padding-top: 4px;
+}
+
+body.win2000 .totals-total-label {
+ font-family: var(--font-sys);
+ font-weight: bold;
+ color: #000080;
+ font-size: 12px;
+}
+
+body.win2000 .totals-total-value {
+ font-family: var(--font-sys);
+ font-weight: bold;
+ color: #800000;
+ font-size: 13px;
+}
+
+/* ── Note ────────────────────────────────────────────────────── */
+
+body.win2000 .invoice-note {
+ margin-top: 8px;
+ background: #ffffd0;
+ border-top: 1px solid var(--win-btn-dark);
+ border-left: 1px solid var(--win-btn-dark);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+ border-radius: 0;
+ padding: 6px 10px;
+}
+
+body.win2000 .invoice-note-title {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ font-weight: bold;
+ color: #000080;
+ text-transform: none;
+ letter-spacing: 0;
+}
+
+body.win2000 .invoice-note-text {
+ font-family: var(--font-sys);
+ font-size: 12px;
+ color: var(--win-text);
+ margin-top: 2px;
+}
+
+/* ── Footer → Status Bar ─────────────────────────────────────── */
+
+body.win2000 .invoice-footer {
+ padding: 4px 8px;
+ background: var(--win-gray);
+ border-top: 2px solid var(--win-btn-light);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+}
+
+body.win2000 .footer-contact {
+ font-family: var(--font-sys);
+ font-size: 11px;
+ color: var(--win-text);
+ border-top: 1px solid var(--win-btn-shadow);
+ border-left: 1px solid var(--win-btn-shadow);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+ padding: 1px 4px;
+ flex: 1;
+ background: var(--win-gray);
+}
+
+body.win2000 .footer-notice {
+ font-family: var(--font-sys);
+ font-size: 11px;
+ font-weight: normal;
+ color: var(--win-gray-dark);
+ border-top: 1px solid var(--win-btn-shadow);
+ border-left: 1px solid var(--win-btn-shadow);
+ border-bottom: 1px solid var(--win-btn-light);
+ border-right: 1px solid var(--win-btn-light);
+ padding: 1px 4px;
+ background: var(--win-gray);
+}
+
+/* ── Print (keep win2000 styles in print if active) ──────────── */
+
+@media print {
+ body.win2000 #theme-picker {
+ display: none !important;
+ }
+}