initial commit
This commit is contained in:
1
.vscode/settings.json
vendored
Normal file
1
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
364
src/help/index.html
Normal file
364
src/help/index.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
:root {
|
||||
--accent: #4f46e5;
|
||||
--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">
|
||||
<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">
|
||||
<h2>General Settings (All Clients)</h2>
|
||||
<table>
|
||||
<tr><td>Email Address</td><td>your.name@yourdomain.com</td></tr>
|
||||
<tr><td>Username</td><td>your.name@yourdomain.com</td></tr>
|
||||
<tr><td>Password</td><td>(your email password)</td></tr>
|
||||
<tr><td>Incoming Server</td><td><b>mail.mifi.holdings</b></td></tr>
|
||||
<tr><td>Outgoing Server</td><td><b>mail.mifi.holdings</b></td></tr>
|
||||
<tr><td>IMAP Port</td><td>993 (SSL/TLS)</td></tr>
|
||||
<tr><td>POP3 Port</td><td>995 (SSL/TLS)</td></tr>
|
||||
<tr><td>SMTP Port</td><td>587 (STARTTLS) or 465 (SSL/TLS)</td></tr>
|
||||
<tr><td>Authentication</td><td>Required (use same as incoming)</td></tr>
|
||||
<tr><td>Encryption</td><td>SSL/TLS or STARTTLS</td></tr>
|
||||
</table>
|
||||
<span class="tip">Tip: Always use your <b>full email address</b> as your username!</span>
|
||||
</section>
|
||||
|
||||
<div class="accordion" id="helpAccordion">
|
||||
|
||||
<!-- Outlook -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Microsoft Outlook
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Go to <b>File → Add Account</b></li>
|
||||
<li>Enter your full email address</li>
|
||||
<li>Choose <b>Advanced options</b> → check “Set up manually”</li>
|
||||
<li>Select <b>IMAP</b> (recommended) or POP</li>
|
||||
<li>Incoming server: <code>mail.mifi.holdings</code>, port <b>993</b> (SSL/TLS)</li>
|
||||
<li>Outgoing server: <code>mail.mifi.holdings</code>, port <b>587</b> (STARTTLS) or <b>465</b> (SSL/TLS)</li>
|
||||
<li>Username: full email address; Password: your password</li>
|
||||
<li>Click <b>Connect</b></li>
|
||||
</ol>
|
||||
<span class="tip">If sending fails, make sure “Require logon using SPA” is <b>unchecked</b>.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Apple Mail -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Apple Mail (macOS, iOS)
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Add Account → <b>Other Mail Account</b></li>
|
||||
<li>Enter your name, email, and password</li>
|
||||
<li>Incoming/Outgoing server: <code>mail.mifi.holdings</code></li>
|
||||
<li>IMAP port: <b>993</b> (SSL); SMTP port: <b>587</b> (STARTTLS) or <b>465</b> (SSL)</li>
|
||||
<li>Use full email address for username</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thunderbird -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Thunderbird
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Menu → Account Settings → Add Mail Account</li>
|
||||
<li>Fill in your name, email, and password</li>
|
||||
<li>Click “Configure manually” and use settings above</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> iOS / Android Mail / Gmail App
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>Add Account → Other</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>Manual setup: <code>mail.mifi.holdings</code>, correct ports, SSL/TLS required</li>
|
||||
<li>Gmail app: tap profile → Add account → Other, fill in details, use IMAP</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> FAQ / Troubleshooting
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<div class="faq-q">Q: My email won’t send?</div>
|
||||
<div class="faq-a">Check that you’re using your full email address for both incoming and outgoing username, and that the port is 587 or 465.</div>
|
||||
<div class="faq-q">Q: SSL/TLS errors?</div>
|
||||
<div class="faq-a">Ensure SSL or STARTTLS is enabled for both incoming and outgoing mail.</div>
|
||||
<div class="faq-q">Q: Still stuck?</div>
|
||||
<div class="faq-a">Contact <a href="mailto:postmaster@mifi.holdings">postmaster@mifi.holdings</a>.<br>
|
||||
Please include any error messages, your mail app, and a screenshot if you can!</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pro Tips -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Pro Tips & Advanced
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li><b>IMAP syncs</b> your mail everywhere—choose IMAP unless you know you want POP3.</li>
|
||||
<li>Your login is always your <b>full email address</b>.</li>
|
||||
<li>Check your Spam/Junk folder for misfiled good emails.</li>
|
||||
<li>Advanced: IMAP path prefix = <b>(leave blank)</b>; SMTP authentication is always required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
Email from mifi Ventures · Help Page – © 2025 mifi Ventures, LLC
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
103
src/index.html
Normal file
103
src/index.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>mail.mifi.holdings</title>
|
||||
<style>
|
||||
: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="emoji">📮</div>
|
||||
<h1>This is just a mailbox.</h1>
|
||||
<p>
|
||||
You’ve reached <b>mail.mifi.holdings</b>.<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="https://webmail.mifi.holdings">Go to Webmail</a>
|
||||
<a href="https://postmaster.mifi.holdings/users/login.php">Change/Forgot Password</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user