diff --git a/src/assets/css/accordion.css b/src/assets/css/accordion.css new file mode 100644 index 0000000..47aed45 --- /dev/null +++ b/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; + } +} diff --git a/src/assets/css/settings.css b/src/assets/css/settings.css new file mode 100644 index 0000000..a0531bc --- /dev/null +++ b/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; + } +} diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..4483d0c --- /dev/null +++ b/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; + } +} diff --git a/src/assets/js/accordion.js b/src/assets/js/accordion.js new file mode 100644 index 0000000..2c2746c --- /dev/null +++ b/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(); + } + }); +}); diff --git a/src/assets/media/embed-badge-emailtest.svg b/src/assets/media/embed-badge-emailtest.svg new file mode 100644 index 0000000..be2fddc --- /dev/null +++ b/src/assets/media/embed-badge-emailtest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/media/embed-badge-websitetest.svg b/src/assets/media/embed-badge-websitetest.svg new file mode 100644 index 0000000..82db1a8 --- /dev/null +++ b/src/assets/media/embed-badge-websitetest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/help/index.html b/src/help/index.html index a5b1e80..a171fbe 100644 --- a/src/help/index.html +++ b/src/help/index.html @@ -5,211 +5,19 @@ Welcome to Email from mifi Ventures - + + + -
+

Welcome to Email from mifi Ventures

Let’s get your inbox ready! 📬

Friendly help for setting up your email—works with Outlook, Apple Mail, Thunderbird, phones, and more.

-
+

General Settings (All Clients)

@@ -325,40 +133,14 @@ -
- Email from mifi Ventures · Help Page – © 2025 mifi Ventures, LLC -
+
+

+ internet.nl 100% Hall of Fame - Email + internet.nl 100% Hall of Fame - Web +

+

© mifi Ventures. All rights reserved.

+
- + diff --git a/src/index.html b/src/index.html index 73cc160..dcbdcff 100644 --- a/src/index.html +++ b/src/index.html @@ -4,100 +4,31 @@ mail.mifi.holdings - +
-
📮
-

This is just a mailbox.

-

- You’ve reached mail.mifi.holdings.
- There’s nothing exciting here—just some gears whirring and mail being sorted.
- Looking for your messages? -

- Email Setup Help - Go to Webmail - Change/Forgot Password +
+
+
📮
+

This is just a mailbox.

+
+

+ You've reached mail.mifi.holdings.
+ There's nothing exciting here—just some gears whirring and mail being sorted.
+ Looking for your messages? +

+ Email Setup Help + Go to Webmail + Change/Forgot Password +
+
+

+ internet.nl 100% Hall of Fame - Email + internet.nl 100% Hall of Fame - Web +

+

© mifi Ventures. All rights reserved.

+
Email Addressyour.name@yourdomain.com