application/imap-service.js

@@ -344,14 +344,7 @@ class ImapService extends EventEmitter {
         } catch {
             // Do nothing
         }
-        const rawDate = headerPart.date && headerPart.date[0] ? headerPart.date[0] : undefined
+        const date = headerPart.date[0]
-        let date
-        if (rawDate) {
-            const m = moment.parseZone(rawDate)
-            date = m.toDate()
-        } else {
-            date = new Date()
-        }
         const { uid } = message.attributes
 
         return Mail.create(to, from, date, subject, uid)

infrastructure/web/public/javascripts/inbox-init.js

@@ -8,11 +8,56 @@ document.addEventListener('DOMContentLoaded', () => {
         enableNewMessageNotifications(address, true);
     }
 
-    // Initialize expiry timers via utils
+    // Copy address on click
-    if (window.utils && typeof window.utils.initExpiryTimers === 'function') {
+    const copyAddress = document.getElementById('copyAddress');
-        window.utils.initExpiryTimers(expiryTime, expiryUnit);
+    const copyFeedback = document.getElementById('copyFeedback');
+    if (copyAddress) {
+        copyAddress.addEventListener('click', () => {
+            navigator.clipboard.writeText(copyAddress.textContent.trim()).then(() => {
+                if (copyFeedback) {
+                    copyFeedback.style.display = 'inline';
+                    setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
+                }
+            });
+        });
     }
-    if (window.utils && typeof window.utils.formatEmailDates === 'function') {
+
-        window.utils.formatEmailDates();
+    // Expiry timer for each email
+    function getExpiryMs(time, unit) {
+        switch (unit) {
+            case 'minutes':
+                return time * 60 * 1000;
+            case 'hours':
+                return time * 60 * 60 * 1000;
+            case 'days':
+                return time * 24 * 60 * 60 * 1000;
+            default:
+                return 48 * 60 * 60 * 1000; // fallback 48h
+        }
     }
+
+    function updateExpiryTimers() {
+        const timers = document.querySelectorAll('.expiry-timer');
+        timers.forEach(el => {
+            const dateStr = el.dataset.date;
+            if (!dateStr) return;
+            const mailDate = new Date(dateStr);
+            // Use config-driven expiry
+            const expiry = new Date(mailDate.getTime() + getExpiryMs(expiryTime, expiryUnit));
+            const now = new Date();
+            let diff = Math.floor((expiry - now) / 1000);
+            if (diff <= 0) {
+                el.textContent = 'Expired';
+                el.style.color = '#b00';
+                return;
+            }
+            const hours = Math.floor(diff / 3600);
+            diff %= 3600;
+            const minutes = Math.floor(diff / 60);
+            const seconds = diff % 60;
+            el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
+        });
+    }
+    setInterval(updateExpiryTimers, 1000);
+    updateExpiryTimers();
 });

infrastructure/web/public/javascripts/lock-modals.js

@@ -0,0 +1,136 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Lock modal elements
+    const lockModal = document.getElementById('lockModal');
+    const lockBtn = document.getElementById('lockBtn');
+    const closeLock = document.getElementById('closeLock');
+    const lockForm = document.querySelector('#lockModal form');
+
+    // Unlock modal elements
+    const unlockModal = document.getElementById('unlockModal');
+    const unlockBtn = document.getElementById('unlockBtn');
+    const closeUnlock = document.getElementById('closeUnlock');
+
+    // Remove lock modal elements
+    const removeLockModal = document.getElementById('removeLockModal');
+    const removeLockBtn = document.getElementById('removeLockBtn');
+    const closeRemoveLock = document.getElementById('closeRemoveLock');
+    const cancelRemoveLock = document.getElementById('cancelRemoveLock');
+
+    // Open/close helpers
+    const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
+    const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
+
+    // Protect / Lock modal logic
+    if (lockBtn) {
+        lockBtn.onclick = function(e) {
+            e.preventDefault();
+            openModal(lockModal);
+        };
+    }
+    if (closeLock) {
+        closeLock.onclick = function() {
+            closeModal(lockModal);
+        };
+    }
+
+    if (lockForm) {
+        lockForm.addEventListener('submit', function(e) {
+            const pwElement = document.getElementById('lockPassword');
+            const cfElement = document.getElementById('lockConfirm');
+            const pw = pwElement ? pwElement.value : '';
+            const cf = cfElement ? cfElement.value : '';
+            const err = document.getElementById('lockErrorInline');
+            const serverErr = document.getElementById('lockServerError');
+            if (serverErr) serverErr.style.display = 'none';
+
+            if (pw !== cf) {
+                e.preventDefault();
+                if (err) {
+                    err.textContent = 'Passwords do not match.';
+                    err.style.display = 'block';
+                }
+                return;
+            }
+            if (pw.length < 8) {
+                e.preventDefault();
+                if (err) {
+                    err.textContent = 'Password must be at least 8 characters.';
+                    err.style.display = 'block';
+                }
+                return;
+            }
+            if (err) err.style.display = 'none';
+        });
+    }
+
+    // Auto-open lock modal if server provided an error (via data attribute)
+    if (lockModal) {
+        const lockErrorValue = (lockModal.dataset.lockError || '').trim();
+        if (lockErrorValue) {
+            openModal(lockModal);
+            const err = document.getElementById('lockErrorInline');
+            const serverErr = document.getElementById('lockServerError');
+            if (serverErr) serverErr.style.display = 'none';
+
+            if (err) {
+                if (lockErrorValue === 'locking_disabled_for_example') {
+                    err.textContent = 'Locking is disabled for the example inbox.';
+                } else if (lockErrorValue === 'invalid') {
+                    err.textContent = 'Please provide a valid password.';
+                } else if (lockErrorValue === 'server_error') {
+                    err.textContent = 'A server error occurred. Please try again.';
+                } else if (lockErrorValue === 'remove_failed') {
+                    err.textContent = 'Failed to remove lock. Please try again.';
+                } else {
+                    err.textContent = 'An error occurred. Please try again.';
+                }
+                err.style.display = 'block';
+            }
+        }
+    }
+
+    // Unlock modal logic
+    if (unlockBtn) {
+        unlockBtn.onclick = function(e) {
+            e.preventDefault();
+            openModal(unlockModal);
+        };
+    }
+    if (closeUnlock) {
+        closeUnlock.onclick = function() {
+            closeModal(unlockModal);
+        };
+    }
+
+    if (unlockModal) {
+        const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
+        if (unlockErrorValue) {
+            openModal(unlockModal);
+        }
+    }
+
+    // Remove lock modal logic
+    if (removeLockBtn) {
+        removeLockBtn.onclick = function(e) {
+            e.preventDefault();
+            openModal(removeLockModal);
+        };
+    }
+    if (closeRemoveLock) {
+        closeRemoveLock.onclick = function() {
+            closeModal(removeLockModal);
+        };
+    }
+    if (cancelRemoveLock) {
+        cancelRemoveLock.onclick = function() {
+            closeModal(removeLockModal);
+        };
+    }
+
+    // Close modals when clicking outside
+    window.onclick = function(e) {
+        if (e.target === lockModal) closeModal(lockModal);
+        if (e.target === unlockModal) closeModal(unlockModal);
+        if (e.target === removeLockModal) closeModal(removeLockModal);
+    };
+});

infrastructure/web/public/javascripts/utils.js

@@ -1,240 +0,0 @@
-// Consolidated utilities: date formatting and lock modals
-document.addEventListener('DOMContentLoaded', () => {
-    function getExpiryMs(time, unit) {
-        switch (unit) {
-            case 'minutes':
-                return time * 60 * 1000;
-            case 'hours':
-                return time * 60 * 60 * 1000;
-            case 'days':
-                return time * 24 * 60 * 60 * 1000;
-            default:
-                return 48 * 60 * 60 * 1000; // fallback 48h
-        }
-    }
-
-    function initExpiryTimers(expiryTime, expiryUnit) {
-        // Cache timer elements on init instead of querying every second
-        let timers = document.querySelectorAll('.expiry-timer');
-        if (timers.length === 0) return; // Don't set interval if no timers exist
-
-        function updateExpiryTimers() {
-            const now = new Date();
-            timers.forEach(el => {
-                const dateStr = el.dataset.date;
-                if (!dateStr) return;
-                const mailDate = new Date(dateStr);
-                // Clamp future-dated mails to now to avoid exceeding configured expiry
-                const baseMs = Math.min(mailDate.getTime(), now.getTime());
-                const expiry = new Date(baseMs + getExpiryMs(expiryTime, expiryUnit));
-                let diff = Math.floor((expiry - now) / 1000);
-                if (diff <= 0) {
-                    el.textContent = 'Expired';
-                    el.style.color = '#b00';
-                    return;
-                }
-                const hours = Math.floor(diff / 3600);
-                diff %= 3600;
-                const minutes = Math.floor(diff / 60);
-                const seconds = diff % 60;
-                el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
-            });
-        }
-        updateExpiryTimers(); // Call once immediately
-        setInterval(updateExpiryTimers, 1000); // Then every second
-    }
-
-    function formatEmailDates() {
-        const dateEls = document.querySelectorAll('.email-date[data-date]');
-        dateEls.forEach(el => {
-            const dateStr = el.dataset.date;
-            if (!dateStr) return;
-            const d = new Date(dateStr);
-            try {
-                const formatted = d.toLocaleString(undefined, {
-                    year: 'numeric',
-                    month: 'short',
-                    day: '2-digit',
-                    hour: '2-digit',
-                    minute: '2-digit'
-                });
-                el.textContent = formatted;
-            } catch (_) {
-                el.textContent = d.toString();
-            }
-        });
-    }
-
-    function formatMailDate() {
-        const el = document.querySelector('.mail-date[data-date]');
-        if (!el) return;
-        const dateStr = el.dataset.date;
-        if (!dateStr) return;
-        const d = new Date(dateStr);
-        try {
-            const formatted = d.toLocaleString(undefined, {
-                year: 'numeric',
-                month: 'short',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-            el.textContent = formatted;
-        } catch (_) {
-            el.textContent = d.toString();
-        }
-    }
-
-    function initLockModals() {
-        const lockModal = document.getElementById('lockModal');
-        const lockBtn = document.getElementById('lockBtn');
-        const closeLock = document.getElementById('closeLock');
-        const lockForm = document.querySelector('#lockModal form');
-
-        const unlockModal = document.getElementById('unlockModal');
-        const unlockBtn = document.getElementById('unlockBtn');
-        const closeUnlock = document.getElementById('closeUnlock');
-
-        const removeLockModal = document.getElementById('removeLockModal');
-        const removeLockBtn = document.getElementById('removeLockBtn');
-        const closeRemoveLock = document.getElementById('closeRemoveLock');
-        const cancelRemoveLock = document.getElementById('cancelRemoveLock');
-
-        const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
-        const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
-
-        if (lockBtn) {
-            lockBtn.onclick = function(e) {
-                e.preventDefault();
-                openModal(lockModal);
-            };
-        }
-        if (closeLock) {
-            closeLock.onclick = function() { closeModal(lockModal); };
-        }
-
-        if (lockForm) {
-            lockForm.addEventListener('submit', function(e) {
-                const pwElement = document.getElementById('lockPassword');
-                const cfElement = document.getElementById('lockConfirm');
-                const pw = pwElement ? pwElement.value : '';
-                const cf = cfElement ? cfElement.value : '';
-                const err = document.getElementById('lockErrorInline');
-                const serverErr = document.getElementById('lockServerError');
-                if (serverErr) serverErr.style.display = 'none';
-
-                if (pw !== cf) {
-                    e.preventDefault();
-                    if (err) {
-                        err.textContent = 'Passwords do not match.';
-                        err.style.display = 'block';
-                    }
-                    return;
-                }
-                if (pw.length < 8) {
-                    e.preventDefault();
-                    if (err) {
-                        err.textContent = 'Password must be at least 8 characters.';
-                        err.style.display = 'block';
-                    }
-                    return;
-                }
-                if (err) err.style.display = 'none';
-            });
-        }
-
-        if (lockModal) {
-            const lockErrorValue = (lockModal.dataset.lockError || '').trim();
-            if (lockErrorValue) {
-                openModal(lockModal);
-                const err = document.getElementById('lockErrorInline');
-                const serverErr = document.getElementById('lockServerError');
-                if (serverErr) serverErr.style.display = 'none';
-                if (err) {
-                    if (lockErrorValue === 'locking_disabled_for_example') {
-                        err.textContent = 'Locking is disabled for the example inbox.';
-                    } else if (lockErrorValue === 'invalid_password') {
-                        err.textContent = 'Please provide a valid password.';
-                    } else if (lockErrorValue === 'server_error') {
-                        err.textContent = 'A server error occurred. Please try again.';
-                    } else if (lockErrorValue === 'remove_failed') {
-                        err.textContent = 'Failed to remove lock. Please try again.';
-                    } else {
-                        err.textContent = 'An error occurred. Please try again.';
-                    }
-                    err.style.display = 'block';
-                }
-            }
-        }
-
-        if (unlockBtn) {
-            unlockBtn.onclick = function(e) {
-                e.preventDefault();
-                openModal(unlockModal);
-            };
-        }
-        if (closeUnlock) {
-            closeUnlock.onclick = function() { closeModal(unlockModal); };
-        }
-        if (unlockModal) {
-            const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
-            if (unlockErrorValue) { openModal(unlockModal); }
-        }
-
-        if (removeLockBtn) {
-            removeLockBtn.onclick = function(e) {
-                e.preventDefault();
-                openModal(removeLockModal);
-            };
-        }
-        if (closeRemoveLock) {
-            closeRemoveLock.onclick = function() { closeModal(removeLockModal); };
-        }
-        if (cancelRemoveLock) {
-            cancelRemoveLock.onclick = function() { closeModal(removeLockModal); };
-        }
-
-        window.onclick = function(e) {
-            if (e.target === lockModal) closeModal(lockModal);
-            if (e.target === unlockModal) closeModal(unlockModal);
-            if (e.target === removeLockModal) closeModal(removeLockModal);
-        };
-    }
-
-    function initCopyAddress() {
-        const copyAddress = document.getElementById('copyAddress');
-        const copyFeedback = document.getElementById('copyFeedback');
-        if (!copyAddress) return;
-        copyAddress.addEventListener('click', () => {
-            const text = copyAddress.textContent ? copyAddress.textContent.trim() : '';
-            navigator.clipboard.writeText(text).then(() => {
-                if (copyFeedback) {
-                    copyFeedback.style.display = 'inline';
-                    setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
-                }
-            }).catch(() => {
-                // Fallback for older browsers
-                try {
-                    const range = document.createRange();
-                    range.selectNode(copyAddress);
-                    const sel = window.getSelection();
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                    document.execCommand('copy');
-                    sel.removeAllRanges();
-                    if (copyFeedback) {
-                        copyFeedback.style.display = 'inline';
-                        setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
-                    }
-                } catch (_) {}
-            });
-        });
-    }
-
-    // Expose utilities and run them
-    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers };
-    formatEmailDates();
-    formatMailDate();
-    initLockModals();
-    initCopyAddress();
-});

infrastructure/web/public/stylesheets/custom.css

@@ -6,6 +6,8 @@ body {
     flex-direction: column;
     background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #131516;
     color: #cccccc;
+    backdrop-filter: blur(18px) saturate(120%);
+    -webkit-backdrop-filter: blur(18px) saturate(120%);
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
@@ -89,7 +91,6 @@ text-muted {
 }
 
 .action-links {
-    margin-bottom: 15px;
     float: right;
     justify-content: flex-end;
     /* aligns all links to the right */
@@ -108,6 +109,7 @@ text-muted {
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
     text-decoration: none;
@@ -160,6 +162,8 @@ select:hover {
     max-width: 600px;
     margin: auto;
     background: linear-gradient( 135deg, rgba(155, 77, 202, 0.12), rgba(155, 77, 202, 0.04)), rgba(255, 255, 255, 0.04);
+    backdrop-filter: blur(20px) saturate(125%);
+    -webkit-backdrop-filter: blur(20px) saturate(125%);
     border-radius: 22px;
     border: 1px solid rgba(155, 77, 202, 0.25);
     padding: 40px 36px;
@@ -235,6 +239,8 @@ select:hover {
     color: #fff;
     background: rgba(155, 77, 202, 0.2);
     border: 1px solid rgba(155, 77, 202, 0.35);
+    backdrop-filter: blur(12px) saturate(120%);
+    -webkit-backdrop-filter: blur(12px) saturate(120%);
     box-shadow: 0 8px 20px rgba(155, 77, 202, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
     cursor: pointer;
     transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
@@ -313,6 +319,7 @@ label {
 }
 
 .email-card {
+    backdrop-filter: blur(20px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 24px;
@@ -409,6 +416,7 @@ label {
 
 .empty-card {
     background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 50px;
@@ -442,6 +450,7 @@ label {
 
 .mail-header {
     background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 30px;
@@ -471,6 +480,7 @@ label {
 
 .mail-content {
     background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(15px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     padding: 30px;
@@ -483,6 +493,7 @@ label {
     border: 1px solid rgba(255, 255, 255, 0.1);
     width: 100%;
     min-height: 40vh;
+    backdrop-filter: blur(10px);
 }
 
 .mail-text-content {
@@ -502,6 +513,7 @@ label {
 
 .mail-attachments {
     background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 25px;
@@ -667,60 +679,4 @@ label {
 
 .email-expiry .expiry-timer[style*="color: #b00"] {
     color: #b00 !important;
-}
-
-
-/* Raw mail view */
-
-.raw-container {
-    max-width: 1500px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.raw-mail {
-    background: rgba(0, 0, 0, 0.35);
-    color: #e0e0e0;
-    padding: 20px;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-x: auto;
-    font-family: Consolas, 'Courier New', monospace;
-    font-size: 0.95rem;
-}
-
-.raw-tabs {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 12px;
-}
-
-.raw-tab-button {
-    padding: 8px 14px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    background: rgba(255, 255, 255, 0.05);
-    color: #e0e0e0;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.raw-tab-button.active {
-    background: rgba(155, 77, 202, 0.25);
-    border-color: rgba(155, 77, 202, 0.4);
-    color: #fff;
-}
-
-.raw-tab-button:hover {
-    border-color: rgba(155, 77, 202, 0.5);
-}
-
-.raw-panels {
-    position: relative;
-}
-
-.raw-mail.hidden {
-    display: none;
 }

infrastructure/web/routes/inbox.js

@@ -252,33 +252,13 @@ router.get(
                 true
             )
             if (mail) {
-                const decodeQuotedPrintable = (input) => {
+                mail = mail.replace(/(?:\r\n|\r|\n)/g, '<br>')
-                    if (!input) return '';
+                    // Emails are immutable, cache if found
-                    // Remove soft line breaks
-                    let cleaned = input.replace(/=\r?\n/g, '');
-                    // Decode =XX hex escapes
-                    cleaned = cleaned.replace(/=([0-9A-Fa-f]{2})/g, (_, hex) => {
-                        try {
-                            return String.fromCharCode(parseInt(hex, 16));
-                        } catch {
-                            return '=' + hex;
-                        }
-                    });
-                    return cleaned;
-                };
-
-                const decodedMail = decodeQuotedPrintable(mail);
-
-                // Keep raw content but add literal newlines after <br> tags for readability
-                const rawMail = mail.replace(/<br\s*\/?\s*>/gi, '<br>\n');
-
-                // Emails are immutable, cache if found
                 res.set('Cache-Control', 'private, max-age=600')
                 debug(`Rendering raw email view for UID ${req.params.uid}`)
                 res.render('raw', {
                     title: req.params.uid + " | raw | " + req.params.address,
-                    mail: rawMail,
+                    mail,
-                    decoded: decodedMail,
                     totalcount: totalcount
                 })
             } else {

infrastructure/web/views/inbox.twig

@@ -21,8 +21,8 @@
 {% endblock %}
 
 {% block body %}
-    <script src="/javascripts/utils.js" defer></script>
     <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}"></script>
+    <script src="/javascripts/lock-modals.js" defer></script>
     <div class="inbox-container">
         <div class="inbox-header">
             <h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
@@ -38,12 +38,12 @@
                                 <div class="sender-name">{{ mail.from[0].name }}</div>
                                 <div class="sender-email">{{ mail.from[0].address }}</div>
                             </div>
-                            <div class="email-date" data-date="{{ mail.date|date('c') }}"></div>
+                            <div class="email-date">{{ mail.date | date }}</div>
                         </div>
                         <div class="email-subject-row">
                             <div class="email-subject">{{ mail.subject }}</div>
                             <div class="email-expiry">
-                                <span class="expiry-timer" data-date="{{ mail.date|date('c') }}">Expires in ...</span>
+                                <span class="expiry-timer" data-date="{{ mail.date|date('Y-m-d\TH:i:s\Z') }}">Expires in ...</span>
                             </div>
                         </div>
                     </div>

infrastructure/web/views/mail.twig

@@ -14,13 +14,12 @@
 {% endblock %}
 
 {% block body %}
-    <script src="/javascripts/utils.js" defer></script>
     <div class="mail-container">
         <div class="mail-header">
             <h1 class="mail-subject">{{ mail.subject }}</h1>
             <div class="mail-meta">
                 <div class="mail-from">From: {{ mail.from.text }}</div>
-                <div class="mail-date" data-date="{{ mail.date|date('c') }}"></div>
+                <div class="mail-date">{{ mail.date | date }}</div>
             </div>
         </div>
 

infrastructure/web/views/raw.twig

@@ -1,31 +1,19 @@
-{% extends 'layout.twig' %}
-
-{% block header %}{% endblock %}
-
 {% block body %}
-    <div class="raw-container">
+    <head>
-        <div class="raw-tabs">
+        <title>{{ title }}</title>
-            <button class="raw-tab-button active" data-target="raw">Raw (escaped)</button>
+        <meta charset="UTF-8">
-            <button class="raw-tab-button" data-target="decoded">Decoded (quoted-printable)</button>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
-        </div>
+        <meta name="darkreader-lock">
-        <div class="raw-panels">
+        <meta name="description" content="Dont give shady companies your real email. Use 48hr.email to protect your privacy!">
-            <pre class="raw-mail" data-panel="raw">{{ mail | e }}</pre>
+        <meta property="og:image" content="/images/logo.png">
-            <pre class="raw-mail hidden" data-panel="decoded">{{ decoded | e }}</pre>
-        </div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const buttons = document.querySelectorAll('.raw-tab-button');
-            const panels = document.querySelectorAll('.raw-mail[data-panel]');
-            buttons.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const target = btn.dataset.target;
-                    buttons.forEach(b => b.classList.toggle('active', b === btn));
-                    panels.forEach(p => p.classList.toggle('hidden', p.dataset.panel !== target));
-                });
-            });
-        });
-    </script>
-{% endblock %}
 
-{% block footer %}{% endblock %}
+        <link rel="shortcut icon" href="/images/logo.ico">
+        <link rel='stylesheet' href='/dependencies/milligram.css' />
+        <link rel='stylesheet' href='/stylesheets/custom.css' />
+
+        <script src="/socket.io/socket.io.js" defer="true"></script>
+        <script src="/javascripts/notifications.js" defer="true"></script>
+
+    </head>
+    {{ mail | raw }}
+{% endblock %}