First pass at rewrite and restyle of mail landing
This commit is contained in:
93
src/assets/css/accordion.css
Normal file
93
src/assets/css/accordion.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
106
src/assets/css/settings.css
Normal file
106
src/assets/css/settings.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
145
src/assets/css/style.css
Normal file
145
src/assets/css/style.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
28
src/assets/js/accordion.js
Normal file
28
src/assets/js/accordion.js
Normal file
@@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
1
src/assets/media/embed-badge-emailtest.svg
Normal file
1
src/assets/media/embed-badge-emailtest.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
1
src/assets/media/embed-badge-websitetest.svg
Normal file
1
src/assets/media/embed-badge-websitetest.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
@@ -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>
|
||||
: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>
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="/assets/css/settings.css">
|
||||
<link rel="stylesheet" href="/assets/css/accordion.css">
|
||||
</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">
|
||||
Email from mifi Ventures · Help Page – © 2025 mifi Ventures, LLC
|
||||
<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>
|
||||
</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>
|
||||
<script src="/assets/js/accordion.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
101
src/index.html
101
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>
|
||||
: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>
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
</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>
|
||||
There’s nothing exciting here—just some gears whirring and mail being sorted.<br>
|
||||
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="/help" class="button">Email Setup Help</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>
|
||||
|
||||
Reference in New Issue
Block a user