Claude
9bddc5722c
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDXAh86FTSBLqF8ohPqZ88
224 lines
13 KiB
HTML
224 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>LookAtU – Know your child is safe</title>
|
||
<meta name="description" content="LookAtU helps parents see where their child is, guide their phone use, and gives kids a panic button for emergencies.">
|
||
<style>
|
||
:root{
|
||
--bg:#0b1220; --bg2:#111a2e; --card:#16213a; --text:#eaf0ff; --muted:#a3b1d1;
|
||
--brand:#4f8cff; --brand2:#7c5cff; --danger:#ff4d5e; --ok:#31d0a0; --line:#243253;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
|
||
a{color:inherit}
|
||
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
|
||
header{position:sticky;top:0;z-index:10;background:rgba(11,18,32,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
|
||
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
|
||
.logo{font-weight:800;font-size:1.3rem;text-decoration:none}
|
||
.logo span{color:var(--brand)}
|
||
.nav a.link{margin-left:22px;text-decoration:none;color:var(--muted);font-size:.95rem}
|
||
.nav a.link:hover{color:var(--text)}
|
||
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;padding:12px 22px;border-radius:12px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--brand),var(--brand2));transition:transform .15s}
|
||
.btn:hover{transform:translateY(-2px)}
|
||
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
|
||
.hero{padding:80px 0 60px;text-align:center;background:radial-gradient(900px 400px at 50% -10%,rgba(79,140,255,.25),transparent)}
|
||
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.1;margin:0 0 18px}
|
||
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.hero p{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:1.15rem}
|
||
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||
.phone{margin:48px auto 0;width:240px;border:2px solid var(--line);border-radius:34px;padding:18px;background:var(--bg2);box-shadow:0 20px 60px rgba(0,0,0,.4)}
|
||
.map{height:130px;border-radius:16px;background:linear-gradient(135deg,#1c2b4d,#22365f);position:relative;overflow:hidden}
|
||
.pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--ok)}
|
||
.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--ok);animation:pulse 2s infinite}
|
||
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
|
||
.phone p{margin:12px 0 4px;font-size:.9rem;color:var(--muted)}
|
||
.panic{margin-top:6px;width:100%;padding:12px;border:0;border-radius:14px;background:var(--danger);color:#fff;font-weight:800;font-size:1rem;cursor:pointer}
|
||
section{padding:70px 0}
|
||
section.alt{background:var(--bg2)}
|
||
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 10px;text-align:center}
|
||
.sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 40px}
|
||
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
|
||
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
|
||
.card .ic{font-size:2rem}
|
||
.card h3{margin:10px 0 6px}
|
||
.card p{margin:0;color:var(--muted)}
|
||
.card.sos{border-color:var(--danger)}
|
||
.steps{counter-reset:s}
|
||
.steps .card{position:relative;padding-top:50px}
|
||
.steps .card::before{counter-increment:s;content:counter(s);position:absolute;top:14px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800}
|
||
.trust li{margin:10px 0;color:var(--muted)}
|
||
.trust b{color:var(--text)}
|
||
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:10px auto;max-width:720px}
|
||
summary{cursor:pointer;font-weight:700}
|
||
details p{color:var(--muted);margin:10px 0 0}
|
||
form{max-width:480px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap}
|
||
input[type=email]{flex:1 1 220px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
|
||
input[type=email]:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
|
||
#msg{text-align:center;margin-top:14px;min-height:1.5em}
|
||
#msg.ok{color:var(--ok)} #msg.err{color:var(--danger)}
|
||
.note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:8px}
|
||
.sr{position:absolute;left:-9999px}
|
||
.trap{position:absolute;left:-9999px;height:0;overflow:hidden}
|
||
select{padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
|
||
.consent{flex:1 1 100%;font-size:.9rem;color:var(--muted)}
|
||
.consent input{margin-right:8px}
|
||
.consent a{color:var(--brand)}
|
||
footer a{margin:0 8px}
|
||
footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
|
||
@media (prefers-reduced-motion:reduce){.pin::after{animation:none}html{scroll-behavior:auto}}
|
||
@media (max-width:640px){.nav a.link{display:none}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="wrap nav">
|
||
<a class="logo" href="#top">Look<span>At</span>U</a>
|
||
<nav>
|
||
<a class="link" href="#features">Features</a>
|
||
<a class="link" href="#how">How it works</a>
|
||
<a class="link" href="#trust">Trust</a>
|
||
<a class="link" href="#faq">FAQ</a>
|
||
<a class="btn" style="margin-left:22px;padding:9px 16px" href="#join">Join waitlist</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<div class="hero">
|
||
<div class="wrap">
|
||
<h1>Know your child is <em>safe</em>,<br>anytime you want.</h1>
|
||
<p>See where they are, guide how they use their phone, and give them a big red button to call for help when it matters most.</p>
|
||
<div class="cta">
|
||
<a class="btn" href="#join">Join the waitlist</a>
|
||
<a class="btn ghost" href="#features">See what it does</a>
|
||
</div>
|
||
<div class="phone" aria-hidden="true">
|
||
<div class="map"><div class="pin"></div></div>
|
||
<p>Alex is at school · just now</p>
|
||
<button class="panic" tabindex="-1">SOS</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="features">
|
||
<div class="wrap">
|
||
<h2>Everything a parent needs</h2>
|
||
<p class="sub">Five simple tools, in one app.</p>
|
||
<div class="grid">
|
||
<div class="card"><div class="ic">📍</div><h3>Live location</h3><p>Open the app and see where your child is right now.</p></div>
|
||
<div class="card"><div class="ic">📊</div><h3>Activity monitor</h3><p>See which apps they use and for how long, every day.</p></div>
|
||
<div class="card"><div class="ic">🔒</div><h3>App control</h3><p>Allow, block or limit apps. Approve new installs before they happen.</p></div>
|
||
<div class="card"><div class="ic">💬</div><h3>Calls & messages</h3><p>Check call history and messages so you can spot trouble early.</p></div>
|
||
<div class="card sos"><div class="ic">🚨</div><h3>Panic button</h3><p>One tap and you get an alert with their location, right away.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="how" class="alt">
|
||
<div class="wrap">
|
||
<h2>How it works</h2>
|
||
<p class="sub">Set up takes a few minutes.</p>
|
||
<div class="grid steps">
|
||
<div class="card"><h3>Install on both phones</h3><p>You get the parent app. Your child gets the child app.</p></div>
|
||
<div class="card"><h3>Link them together</h3><p>Scan a code on your child's phone to connect the two.</p></div>
|
||
<div class="card"><h3>Choose your rules</h3><p>Pick which apps are allowed and what you want to see.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="trust">
|
||
<div class="wrap" style="max-width:720px">
|
||
<h2>Built on trust, not secrets</h2>
|
||
<p class="sub">Safety works best when families talk about it.</p>
|
||
<ul class="trust">
|
||
<li><b>Your child knows.</b> The app is always visible on their phone. LookAtU is never hidden.</li>
|
||
<li><b>Private by design.</b> Data is encrypted and only the parent account can see it.</li>
|
||
<li><b>You stay in charge.</b> Choose what to watch and turn features on or off at any time.</li>
|
||
<li><b>Follows the law.</b> Rules about monitoring differ by country and a child's age. We check them before we launch anywhere.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" class="alt">
|
||
<div class="wrap">
|
||
<h2>Questions</h2>
|
||
<p class="sub"> </p>
|
||
<details><summary>Is LookAtU available now?</summary><p>Not yet. This page is for our waitlist. Join and we will email you when it opens.</p></details>
|
||
<details><summary>Can my child hide the app?</summary><p>No. The app is always visible, and your child knows it is there.</p></details>
|
||
<details><summary>What happens when my child presses the panic button?</summary><p>You get an instant alert with your child's location, so you can call them or get help.</p></details>
|
||
<details><summary>Which phones will it work on?</summary><p>We plan to start with Android, then iPhone. Tell us which one you need when you join.</p></details>
|
||
<details><summary>How much will it cost?</summary><p>We have not set the price yet. Waitlist members will hear first.</p></details>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="join">
|
||
<div class="wrap">
|
||
<h2>Join the waitlist</h2>
|
||
<p class="sub">Be the first to know when LookAtU opens.</p>
|
||
<form id="waitlist" novalidate>
|
||
<label for="email" class="sr">Email address</label>
|
||
<input id="email" name="email" type="email" placeholder="you@example.com" autocomplete="email" required>
|
||
<label for="phone" class="sr">Your child's phone</label>
|
||
<select id="phone" name="phone">
|
||
<option value="Android">Android phone</option>
|
||
<option value="iPhone">iPhone</option>
|
||
<option value="Both">Both</option>
|
||
</select>
|
||
<div class="trap" aria-hidden="true"><label for="website">Leave this empty</label><input id="website" name="website" type="text" tabindex="-1" autocomplete="off"></div>
|
||
<label class="consent" for="agree"><input id="agree" name="agree" type="checkbox"> I agree to the <a href="privacy/">Privacy Policy</a> and want emails about LookAtU.</label>
|
||
<button class="btn" id="send" type="submit">Notify me</button>
|
||
</form>
|
||
<div id="msg" role="status" aria-live="polite"></div>
|
||
<p class="note" id="note">We only use your email to tell you when LookAtU opens. No spam.</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer><div class="wrap">© <span id="yr">2026</span> LookAtU. Early preview. <a href="privacy/">Privacy</a> <a href="terms/">Terms</a></div></footer>
|
||
|
||
<script>
|
||
// PASTE YOUR FORM URL BETWEEN THE QUOTES (example: https://formspree.io/f/abcdwxyz). While empty, the form runs in demo mode.
|
||
var FORM_ENDPOINT = '';
|
||
(function(){
|
||
var form=document.getElementById('waitlist'),email=document.getElementById('email'),msg=document.getElementById('msg'),
|
||
btn=document.getElementById('send'),note=document.getElementById('note');
|
||
document.getElementById('yr').textContent=new Date().getFullYear();
|
||
if(!FORM_ENDPOINT){note.textContent='Demo mode: emails are not saved yet.';}
|
||
function say(cls,t){msg.className=cls;msg.textContent=t;}
|
||
form.addEventListener('submit',function(e){
|
||
e.preventDefault();
|
||
var v=email.value.trim();
|
||
if(!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v)){say('err','Please enter a real email address, like you@example.com.');email.focus();return;}
|
||
if(!document.getElementById('agree').checked){say('err','Please tick the box to agree to the Privacy Policy.');return;}
|
||
if(document.getElementById('website').value){say('ok','Thank you! You are on the list.');return;}
|
||
if(!FORM_ENDPOINT){say('ok','Thank you! You are on the list (demo, not saved).');form.reset();return;}
|
||
btn.disabled=true;say('','Sending...');
|
||
fetch(FORM_ENDPOINT,{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json'},
|
||
body:JSON.stringify({email:v,phone:document.getElementById('phone').value})})
|
||
.then(function(r){if(!r.ok)throw new Error('bad status');say('ok','Thank you! You are on the list.');form.reset();})
|
||
.catch(function(){say('err','Something went wrong. Please check your internet and try again.');})
|
||
.then(function(){btn.disabled=false;});
|
||
});
|
||
})();
|
||
</script>
|
||
<script type="module">
|
||
// Framer Motion ("motion") adds the animations. If it fails to load, the page still shows everything.
|
||
try{
|
||
var m=await import('https://cdn.jsdelivr.net/npm/motion@11.11.13/+esm');
|
||
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
|
||
m.animate('.hero h1,.hero p,.hero .cta',{opacity:[0,1],y:[24,0]},{duration:.7,delay:m.stagger(.12)});
|
||
m.animate('.phone',{opacity:[0,1],y:[40,0]},{duration:.8,delay:.4});
|
||
document.querySelectorAll('.card').forEach(function(c){
|
||
m.inView(c,function(){m.animate(c,{opacity:[0,1],y:[24,0]},{duration:.5});});
|
||
c.addEventListener('mouseenter',function(){m.animate(c,{y:-4},{duration:.2});});
|
||
c.addEventListener('mouseleave',function(){m.animate(c,{y:0},{duration:.2});});
|
||
});
|
||
}
|
||
}catch(e){}
|
||
</script>
|
||
</body>
|
||
</html>
|