First pass at rewrite and restyle of mail landing

src/assets/css/accordion.css

@@ -0,0 +1,93 @@
+:root {
+    --accordion-bg: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --accordion-bg: #24264a;
+    }
+}
+
+.accordion {
+    margin: 1.5rem 0 1rem 0;
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: 0 1px 6px 0 rgba(90,100,140,0.06);
+    background: var(--accordion-bg);
+}
+
+.accordion-section {
+    border-top: 1px solid #eee;
+    background: var(--accordion-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+    .accordion-section {
+        border-top: 1px solid #28284b;
+    }
+}
+
+.accordion-section:first-child {
+    border-top: none;
+}
+
+.accordion-trigger {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    width: 100%;
+    background: none;
+    border: none;
+    font-size: 1.12rem;
+    padding: 1.1rem 1.2rem;
+    text-align: left;
+    font-weight: 600;
+    transition: background 0.2s;
+    color: var(--text-main);
+    outline: none;
+    gap: 0.6em;
+    position: relative;
+}
+
+.accordion-trigger:hover, .accordion-trigger:focus {
+    background: var(--background);
+}
+
+.accordion-trigger .icon {
+    margin-right: 0.5em;
+    font-size: 1.3em;
+    opacity: 0.86;
+    transition: transform 0.2s;
+}
+
+.accordion-trigger[aria-expanded="true"] .icon {
+    transform: rotate(90deg);
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    background: var(--surface);
+    transition: max-height 0.3s cubic-bezier(.7,0,.3,1);
+    font-size: 1rem;
+    padding: 0 1.5rem;
+    color: var(--text-main);
+    text-align: left;
+}
+
+.accordion-section.open .accordion-content {
+    padding: 1.2rem 1.5rem 1.3rem 1.5rem;
+    max-height: 1000px;
+    transition: max-height 0.5s cubic-bezier(.7,0,.3,1);
+}
+
+@media (max-width: 600px) {
+    .accordion-trigger {
+        font-size: 1rem;
+        padding: 0.93rem 0.8rem;
+    }
+
+    .accordion-section.open .accordion-content {
+        padding: 0.7rem 0.8rem 0.9rem 0.8rem;
+    }
+}

src/assets/css/settings.css

@@ -0,0 +1,106 @@
+:root {
+    --content-bg: #f8fafc;
+    --faq-a: #333;
+    --table-bg: transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --content-bg: #21223a;
+        --faq-a: #b7badf;
+        --table-bg: #252745;
+    }
+}
+
+.general-settings {
+    background: var(--surface);
+    border-radius: var(--radius);
+    padding: 1.2rem 1.1rem 1.1rem 1.1rem;
+    margin-bottom: 2.1rem;
+    box-shadow: var(--shadow);
+    position: relative;
+    z-index: 1;
+}
+
+.general-settings h2 {
+    font-size: 1.14rem;
+    margin: 0 0 0.6rem 0;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1em;
+    background: var(--table-bg);
+}
+
+td {
+    padding: 0.38em 0.5em;
+    border: none;
+    font-size: 1rem;
+}
+
+td:first-child {
+    color: var(--text-muted);
+    font-weight: 500;
+    width: 44%;
+    white-space: nowrap;
+}
+
+.tip {
+    background: #eef2ff;
+    color: var(--accent-light);
+    border-radius: 0.7em;
+    font-size: 0.98em;
+    padding: 0.48em 0.8em;
+    display: inline-block;
+    margin: 0.3em 0 0.2em 0;
+    text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+    .tip {
+        background: #232555;
+        color: #a5b4fc;
+    }
+}
+
+.faq-q {
+    font-weight: 600;
+    margin-top: 0.8em;
+    color: var(--accent);
+}
+
+.faq-a {
+    margin: 0.1em 0 0.6em 0.3em;
+    color: var(--faq-a);
+}
+
+a {
+    color: var(--accent);
+    text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 1.1rem 0.5rem 1rem 0.5rem;
+    }
+
+    h1 {
+        font-size: 1.36rem;
+    }
+
+    .general-settings {
+        padding: 0.8rem 0.6rem 0.8rem 0.6rem;
+    }
+
+    .general-settings h2 {
+        font-size: 1rem;
+    }
+    
+    td {
+        font-size: 0.98em;
+    }
+}

src/assets/css/style.css

@@ -0,0 +1,145 @@
+:root {
+    --accent: #4f46e5;
+    --accent-light: #6366f1;
+    --background: #f7fafc;
+    --button-bg: #2bc4fa;
+    --button-hover: #22a0ca;
+    --button-text: #181a20;
+    --text-main: #23243a;
+    --text-muted: #64748b;
+    --radius: 1.25rem;
+    --shadow: 0 2px 12px 0 rgba(20,30,60,0.09);
+    --surface: rgba(255,255,255,0.94);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --accent: #a5b4fc;
+        --accent-light: #818cf8;
+        --background: #15181c;
+        --button-bg: #2bc4fa;
+        --button-hover: #22a0ca;
+        --button-text: #181a20;
+        --shadow: 0 2px 16px 0 rgba(8,8,24,0.24);
+        --surface: rgba(30,34,42,0.9);
+        --text-main: #f6f7fa;
+        --text-muted: #aab2bd;
+    }
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background: var(--background);
+    color: var(--text-main);
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+    font-size: 17px;
+    min-height: 100vh;
+}
+
+body {
+    display: flex;
+    flex-flow:column nowrap;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+}
+
+.container {
+    display: flex;
+    flex-grow: 1;
+    flex-flow: column nowrap;
+    justify-content: center;
+    margin: 1rem;
+    max-width: 370px;
+    text-align: center;
+}
+
+.card {
+    background: var(--surface);
+    border-radius: 1.5rem;
+    box-shadow: var(--shadow);
+    padding: 3rem 2rem;
+}
+
+.container.wide {
+    max-width: 580px;
+}
+
+.emoji {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+h1 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    letter-spacing: -1px;
+}
+
+.intro {
+    color: var(--text-muted);
+    margin-bottom: 1.7rem;
+    text-align: center;
+}
+
+p {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+}
+
+.button {
+    display: block;
+    padding: 0.75rem 1.5rem;
+    margin-bottom: 0.75rem;
+    background: var(--button-bg);
+    color: var(--button-text);
+    border-radius: 999px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background 0.2s;
+    box-shadow: 0 1px 4px 0 rgba(43,196,250,0.11);
+}
+
+.button:hover {
+    background: var(--button-hover);
+}
+
+a {
+    color: var(--accent);
+    text-decoration: underline;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+footer {
+    color: #bbb;
+    font-size: 0.94em;
+    letter-spacing: 0.01em;
+    margin-top: 2.5em;
+    text-align: center;
+}
+
+footer p {
+    font-size: 0.8em;
+    margin: 0.5rem 0 1rem;
+}
+
+.badges {
+    align-items: center;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 1rem;
+    justify-content: center;
+}
+
+@media (max-width: 400px) {
+    .container {
+        padding: 2rem 0.5rem;
+    }
+}

src/assets/js/accordion.js

@@ -0,0 +1,28 @@
+document.querySelectorAll('.accordion-trigger').forEach((btn) => {
+    btn.addEventListener('click', function() {
+        const section = btn.closest('.accordion-section');
+        const expanded = btn.getAttribute('aria-expanded') === "true";
+        document.querySelectorAll('.accordion-section').forEach(s => {
+            if (s === section) {
+                s.classList.toggle('open', !expanded);
+                btn.setAttribute('aria-expanded', String(!expanded));
+                const content = btn.nextElementSibling;
+                content.style.maxHeight = !expanded ? (content.scrollHeight+40) + "px" : "0px";
+            } else {
+                s.classList.remove('open');
+                s.querySelector('.accordion-trigger').setAttribute('aria-expanded', "false");
+                s.querySelector('.accordion-content').style.maxHeight = "0px";
+            }
+        });
+    });
+
+    btn.addEventListener('keydown', function(e) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            const triggers = Array.from(document.querySelectorAll('.accordion-trigger'));
+            let idx = triggers.indexOf(e.target);
+            if (e.key === "ArrowDown") idx = (idx + 1) % triggers.length;
+            else idx = (idx - 1 + triggers.length) % triggers.length;
+            triggers[idx].focus();
+        }
+    });
+});

src/help/index.html

@@ -5,211 +5,19 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Welcome to Email from mifi Ventures</title>
   <meta name="description" content="Setup help for users of Email from mifi Ventures">
-  <style>
+  <link rel="stylesheet" href="/assets/css/style.css">
-    :root {
+  <link rel="stylesheet" href="/assets/css/settings.css">
-      --accent: #4f46e5;
+  <link rel="stylesheet" href="/assets/css/accordion.css">
-      --accent-light: #6366f1;
-      --background: #f7fafc;
-      --surface: #fff;
-      --text-main: #1a202c;
-      --text-muted: #64748b;
-      --radius: 1.25rem;
-      --shadow: 0 2px 12px 0 rgba(20,30,60,0.09);
-      --table-bg: transparent;
-      --accordion-bg: #fff;
-      --content-bg: #f8fafc;
-      --faq-a: #333;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --accent: #a5b4fc;
-        --accent-light: #818cf8;
-        --background: #171923;
-        --surface: #22243a;
-        --text-main: #e7eaf8;
-        --text-muted: #b4b9d1;
-        --shadow: 0 2px 16px 0 rgba(8,8,24,0.24);
-        --table-bg: #252745;
-        --accordion-bg: #24264a;
-        --content-bg: #21223a;
-        --faq-a: #b7badf;
-      }
-    }
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: var(--background);
-      color: var(--text-main);
-      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
-      font-size: 17px;
-      min-height: 100vh;
-    }
-    .container {
-      max-width: 580px;
-      margin: 2.5rem auto 1.5rem auto;
-      background: var(--surface);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      padding: 2.5rem 2rem 2rem 2rem;
-    }
-    h1 {
-      margin: 0 0 0.5rem 0;
-      font-size: 2rem;
-      font-weight: 800;
-      text-align: center;
-      letter-spacing: -1px;
-    }
-    .intro {
-      text-align: center;
-      margin-bottom: 1.7rem;
-      color: var(--text-muted);
-    }
-    .general-settings {
-      background: var(--content-bg);
-      border-radius: var(--radius);
-      padding: 1.2rem 1.1rem 1.1rem 1.1rem;
-      margin-bottom: 2.1rem;
-      box-shadow: 0 1px 6px 0 rgba(90,100,140,0.06);
-      position: relative;
-      z-index: 1;
-    }
-    .general-settings h2 {
-      font-size: 1.14rem;
-      margin: 0 0 0.6rem 0;
-      font-weight: 700;
-      letter-spacing: -0.5px;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-bottom: 1em;
-      background: var(--table-bg);
-    }
-    td {
-      padding: 0.38em 0.5em;
-      border: none;
-      font-size: 1rem;
-    }
-    td:first-child {
-      color: var(--text-muted);
-      font-weight: 500;
-      width: 44%;
-      white-space: nowrap;
-    }
-    .tip {
-      background: #eef2ff;
-      color: var(--accent-light);
-      border-radius: 0.7em;
-      font-size: 0.98em;
-      padding: 0.48em 0.8em;
-      display: inline-block;
-      margin: 0.3em 0 0.2em 0;
-    }
-    @media (prefers-color-scheme: dark) {
-      .tip { background: #232555; color: #a5b4fc; }
-    }
-    .accordion {
-      margin: 1.5rem 0 1rem 0;
-      border-radius: var(--radius);
-      overflow: hidden;
-      box-shadow: 0 1px 6px 0 rgba(90,100,140,0.06);
-      background: var(--accordion-bg);
-    }
-    .accordion-section {
-      border-top: 1px solid #eee;
-      background: var(--accordion-bg);
-    }
-    @media (prefers-color-scheme: dark) {
-      .accordion-section {
-        border-top: 1px solid #28284b;
-      }
-    }
-    .accordion-section:first-child {
-      border-top: none;
-    }
-    .accordion-trigger {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      width: 100%;
-      background: none;
-      border: none;
-      font-size: 1.12rem;
-      padding: 1.1rem 1.2rem;
-      text-align: left;
-      font-weight: 600;
-      transition: background 0.2s;
-      color: var(--text-main);
-      outline: none;
-      gap: 0.6em;
-      position: relative;
-    }
-    .accordion-trigger:hover, .accordion-trigger:focus {
-      background: var(--background);
-    }
-    .accordion-trigger .icon {
-      margin-right: 0.5em;
-      font-size: 1.3em;
-      opacity: 0.86;
-      transition: transform 0.2s;
-    }
-    .accordion-trigger[aria-expanded="true"] .icon {
-      transform: rotate(90deg);
-    }
-    .accordion-content {
-      max-height: 0;
-      overflow: hidden;
-      background: var(--content-bg);
-      transition: max-height 0.3s cubic-bezier(.7,0,.3,1);
-      font-size: 1rem;
-      padding: 0 1.5rem;
-      color: var(--text-main);
-    }
-    .accordion-section.open .accordion-content {
-      padding: 1.2rem 1.5rem 1.3rem 1.5rem;
-      max-height: 1000px;
-      transition: max-height 0.5s cubic-bezier(.7,0,.3,1);
-    }
-    .faq-q {
-      font-weight: 600;
-      margin-top: 0.8em;
-      color: var(--accent);
-    }
-    .faq-a {
-      margin: 0.1em 0 0.6em 0.3em;
-      color: var(--faq-a);
-    }
-    .footer {
-      margin-top: 2.5em;
-      text-align: center;
-      color: #bbb;
-      font-size: 0.94em;
-      letter-spacing: 0.01em;
-    }
-    a {
-      color: var(--accent);
-      text-decoration: underline;
-    }
-    @media (max-width: 600px) {
-      .container { padding: 1.1rem 0.5rem 1rem 0.5rem;}
-      h1 { font-size: 1.36rem; }
-      .general-settings { padding: 0.8rem 0.6rem 0.8rem 0.6rem; }
-      .general-settings h2 { font-size: 1rem; }
-      .accordion-trigger { font-size: 1rem; padding: 0.93rem 0.8rem;}
-      .accordion-section.open .accordion-content { padding: 0.7rem 0.8rem 0.9rem 0.8rem; }
-      td { font-size: 0.98em;}
-    }
-  </style>
 </head>
 <body>
-  <div class="container">
+  <div class="container wide">
     <h1>Welcome to Email from mifi Ventures</h1>
     <div class="intro">
       <strong>Let’s get your inbox ready! 📬</strong><br>
       <p>Friendly help for setting up your email—works with Outlook, Apple Mail, Thunderbird, phones, and more.</p>
     </div>
 
-    <section class="general-settings" aria-label="General Email Settings">
+    <section class="card general-settings" aria-label="General Email Settings">
       <h2>General Settings (All Clients)</h2>
       <table>
         <tr><td>Email Address</td><td>your.name@yourdomain.com</td></tr>
@@ -325,40 +133,14 @@
       </section>
 
     </div>
-    <div class="footer">
+    <footer>
-      Email from mifi Ventures &middot; Help Page &ndash; &copy; 2025 mifi Ventures, LLC
+      <p class="badges">
+        <a href="https://internet.nl/halloffame/mail/" title="internet.nl 100% Email Hall of Fame" class="badge" rel="external"><img src="/assets/media/embed-badge-emailtest.svg" alt="internet.nl 100% Hall of Fame - Email"></a>
+        <a href="https://internet.nl/halloffame/web/" title="internet.nl 100% Web Hall of Fame" class="badge" rel="external"><img src="/assets/media/embed-badge-websitetest.svg" alt="internet.nl 100% Hall of Fame - Web"></a>
+      </p>
+      <p>© mifi Ventures. All rights reserved.</p>
+    </footer>
   </div>
-  </div>
+  <script src="/assets/js/accordion.js"></script>
-  <script>
-    // Native accessible accordion
-    document.querySelectorAll('.accordion-trigger').forEach(btn => {
-      btn.addEventListener('click', function() {
-        const section = btn.closest('.accordion-section');
-        const expanded = btn.getAttribute('aria-expanded') === "true";
-        document.querySelectorAll('.accordion-section').forEach(s => {
-          if (s === section) {
-            s.classList.toggle('open', !expanded);
-            btn.setAttribute('aria-expanded', String(!expanded));
-            const content = btn.nextElementSibling;
-            content.style.maxHeight = !expanded ? (content.scrollHeight+40) + "px" : "0px";
-          } else {
-            s.classList.remove('open');
-            s.querySelector('.accordion-trigger').setAttribute('aria-expanded', "false");
-            s.querySelector('.accordion-content').style.maxHeight = "0px";
-          }
-        });
-      });
-      // Allow arrow navigation
-      btn.addEventListener('keydown', function(e) {
-        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-          const triggers = Array.from(document.querySelectorAll('.accordion-trigger'));
-          let idx = triggers.indexOf(e.target);
-          if (e.key === "ArrowDown") idx = (idx + 1) % triggers.length;
-          else idx = (idx - 1 + triggers.length) % triggers.length;
-          triggers[idx].focus();
-        }
-      });
-    });
-  </script>
 </body>
 </html>

src/index.html

@@ -4,100 +4,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>mail.mifi.holdings</title>
-  <style>
+  <link rel="stylesheet" href="/assets/css/style.css">
-    :root {
-      --background: #f7fafc;
-      --surface: rgba(255,255,255,0.94);
-      --text-main: #23243a;
-      --text-muted: #64748b;
-      --button-bg: #2bc4fa;
-      --button-hover: #22a0ca;
-      --button-text: #181a20;
-      --shadow: 0 2px 24px 0 rgba(0,0,0,0.11);
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --background: #15181c;
-        --surface: rgba(30,34,42,0.9);
-        --text-main: #f6f7fa;
-        --text-muted: #aab2bd;
-        --button-bg: #2bc4fa;
-        --button-hover: #22a0ca;
-        --button-text: #181a20;
-        --shadow: 0 2px 24px 0 rgba(0,0,0,0.18);
-      }
-    }
-    html,body {
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      background: var(--background);
-      color: var(--text-main);
-      font-family: 'Inter', Arial, sans-serif;
-    }
-    body {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-    }
-    .container {
-      text-align: center;
-      background: var(--surface);
-      padding: 3rem 2rem;
-      border-radius: 1.5rem;
-      box-shadow: var(--shadow);
-      max-width: 370px;
-      margin: 1rem;
-    }
-    .emoji {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-    }
-    h1 {
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
-      font-weight: 700;
-      letter-spacing: -1px;
-    }
-    p {
-      color: var(--text-muted);
-      margin-bottom: 2rem;
-      font-size: 1.1rem;
-      line-height: 1.5;
-    }
-    a {
-      display: block;
-      padding: 0.75rem 1.5rem;
-      margin-bottom: 0.75rem;
-      background: var(--button-bg);
-      color: var(--button-text);
-      border-radius: 999px;
-      font-weight: 600;
-      text-decoration: none;
-      transition: background 0.2s;
-      box-shadow: 0 1px 4px 0 rgba(43,196,250,0.11);
-    }
-    a:hover {
-      background: var(--button-hover);
-    }
-    @media (max-width: 400px) {
-      .container { padding: 2rem 0.5rem; }
-    }
-  </style>
 </head>
 <body>
   <div class="container">
+    <div class="card">
+      <header>
         <div class="emoji">📮</div>
         <h1>This is just a mailbox.</h1>
+      </header>
       <p>
-      You’ve reached <b>mail.mifi.holdings</b>.<br>
+        You've reached <b>mail.mifi.holdings</b>.<br>
-      There’s nothing exciting here—just some gears whirring and mail being sorted.<br>
+        There's nothing exciting here—just some gears whirring and mail being sorted.<br>
         Looking for your messages?
       </p>
-    <a href="/help">Email Setup Help</a>
+      <a href="/help" class="button">Email Setup Help</a>
-    <a href="https://webmail.mifi.holdings">Go to Webmail</a>
+      <a href="https://webmail.mifi.holdings" class="button">Go to Webmail</a>
       <a href="https://postmaster.mifi.holdings/users/login.php">Change/Forgot Password</a>
     </div>
+  </div>
+  <footer>
+    <p class="badges">
+      <a href="https://internet.nl/halloffame/mail/" title="internet.nl 100% Email Hall of Fame" class="badge" rel="external"><img src="/assets/media/embed-badge-emailtest.svg" alt="internet.nl 100% Hall of Fame - Email"></a>
+      <a href="https://internet.nl/halloffame/web/" title="internet.nl 100% Web Hall of Fame" class="badge" rel="external"><img src="/assets/media/embed-badge-websitetest.svg" alt="internet.nl 100% Hall of Fame - Web"></a>
+    </p>
+    <p>© mifi Ventures. All rights reserved.</p>
+  </footer>
 </body>
 </html>