| Server IP : 35.80.110.71 / Your IP : 216.73.216.221 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ip-172-31-21-44 6.17.0-1019-aws #19~24.04.1-Ubuntu SMP Tue Jun 23 18:53:06 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.3.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/myclarityspace/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Clarity Space — coming soon</title>
<meta name="description" content="An accessible academic organizer for the way your student actually learns. Coming soon." />
<!-- Deploy target: myclarityspace.org (apex/marketing). The app lives at app.myclarityspace.org.
Static, self-contained, no build step — drop this file at the web root. -->
<style>
:root {
--navy: #17385c;
--navy-700: #204769;
--coral: #f26c6c;
--yellow: #f6c64a;
--cream: #fbf7f0;
--ink: #17385c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background:
radial-gradient(120% 80% at 50% -10%, rgba(246,198,74,0.18), transparent 60%),
var(--cream);
color: var(--ink);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
/* Dyslexia-friendly toggle mirrors the product's accessibility ethos */
body.dys { font-family: "Comic Sans MS", "Lexend", system-ui, sans-serif; letter-spacing: 0.02em; }
header, footer { padding: 1.5rem 2rem; }
header { display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.wordmark .a { color: var(--navy); }
.wordmark .b { color: var(--coral); }
.toggle {
background: transparent; border: 1px solid rgba(23,56,92,0.2);
color: var(--navy); border-radius: 999px; padding: 0.4rem 0.9rem;
font: inherit; font-size: 0.8rem; cursor: pointer; transition: background 0.15s;
}
.toggle:hover { background: rgba(23,56,92,0.06); }
.toggle[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
main {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 2rem 1.5rem;
}
.badge {
display: inline-block; background: rgba(242,108,108,0.12); color: var(--coral);
font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.85rem; border-radius: 999px;
margin-bottom: 1.5rem;
}
h1 {
font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; font-weight: 800;
margin: 0 0 1rem; max-width: 16ch; letter-spacing: -0.02em;
}
h1 .hl { color: var(--coral); }
.lede {
font-size: clamp(1.05rem, 2.5vw, 1.25rem); color: var(--navy-700);
max-width: 40ch; margin: 0 auto 2.5rem; line-height: 1.6; opacity: 0.9;
}
form { display: flex; gap: 0.6rem; width: 100%; max-width: 30rem; flex-wrap: wrap; justify-content: center; }
input[type=email] {
flex: 1 1 16rem; min-width: 0; font: inherit; padding: 0.85rem 1rem;
border: 1px solid rgba(23,56,92,0.18); border-radius: 0.7rem; background: #fff; color: var(--navy);
}
input[type=email]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(23,56,92,0.1); }
button.cta {
font: inherit; font-weight: 600; padding: 0.85rem 1.4rem; border: none; border-radius: 0.7rem;
background: var(--navy); color: #fff; cursor: pointer; transition: background 0.15s;
}
button.cta:hover { background: var(--navy-700); }
.note { margin-top: 1rem; font-size: 0.85rem; color: var(--navy-700); opacity: 0.7; min-height: 1.2em; }
footer { text-align: center; color: var(--navy-700); opacity: 0.6; font-size: 0.82rem; }
.rocket { color: var(--yellow); }
@media (prefers-reduced-motion: no-preference) {
.badge { animation: rise 0.6s ease both; }
h1 { animation: rise 0.7s ease 0.05s both; }
.lede { animation: rise 0.7s ease 0.1s both; }
form { animation: rise 0.7s ease 0.15s both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
</style>
</head>
<body>
<header>
<div class="wordmark"><span class="a">clarity</span><span class="b">space</span></div>
<button class="toggle" id="dys" aria-pressed="false" title="Toggle a dyslexia-friendly typeface">
Easy-read font
</button>
</header>
<main>
<span class="badge">Launching this school year</span>
<h1>School, organized the way your student <span class="hl">actually thinks</span>.</h1>
<p class="lede">
Clarity Space is an accessible academic organizer built for students who
learn differently — one calm place for classes, assignments, and what’s
due next. We’re getting it ready. Leave your email and we’ll tell you when it’s open.
</p>
<form id="waitlist">
<input type="email" name="email" placeholder="you@email.com" required aria-label="Email address" />
<button class="cta" type="submit">Notify me</button>
</form>
<p class="note" id="note" role="status" aria-live="polite"></p>
</main>
<footer>
<span class="rocket">★</span> Clarity Space · an accessible academic organizer
</footer>
<script>
// Dyslexia-friendly font toggle (persisted) — echoes the app's accessibility work.
var dys = document.getElementById('dys');
if (localStorage.getItem('cs-dys') === '1') { document.body.classList.add('dys'); dys.setAttribute('aria-pressed', 'true'); }
dys.addEventListener('click', function () {
var on = document.body.classList.toggle('dys');
dys.setAttribute('aria-pressed', String(on));
localStorage.setItem('cs-dys', on ? '1' : '0');
});
// Waitlist capture. TODO(funded build): POST to a Supabase `waitlist` table
// (insert-only RLS) at app.myclarityspace.org. Until then, hand off to email
// so no interest is silently dropped.
var form = document.getElementById('waitlist');
var note = document.getElementById('note');
form.addEventListener('submit', function (e) {
e.preventDefault();
var email = form.email.value.trim();
if (!email) return;
note.textContent = 'Thanks — opening your email so you can send it our way.';
window.location.href = 'mailto:hello@myclarityspace.org'
+ '?subject=' + encodeURIComponent('Early access — Clarity Space')
+ '&body=' + encodeURIComponent('Please add me to the Clarity Space waitlist: ' + email);
});
</script>
</body>
</html>