Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Claude
|
a370d270c0 |
No files matched your search
@@ -1,143 +0,0 @@
|
||||
---
|
||||
name: website-builder-setup
|
||||
description: "Install the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience needed."
|
||||
---
|
||||
|
||||
# Website Builder Setup
|
||||
|
||||
This skill walks you through installing everything you need to build professional, animated websites with Claude Code. No coding experience required.
|
||||
|
||||
## What Gets Installed
|
||||
|
||||
| Tool | What it does |
|
||||
|------|-------------|
|
||||
| **UI/UX Pro Max** | Gives Claude access to 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not generated. |
|
||||
| **Framer Motion** | Adds smooth animations — page transitions, hover effects, scroll reveals. Makes sites feel alive. |
|
||||
| **21st.dev Magic** | A library of 100+ polished React components Claude can pull from. Production-quality building blocks. |
|
||||
|
||||
## Workflow
|
||||
|
||||
When this skill is triggered, walk the user through each step one at a time. Be encouraging and clear — assume they have zero coding experience. If any step fails, don't stop. Acknowledge it, give them the manual command, and keep moving.
|
||||
|
||||
---
|
||||
|
||||
### Step 1: Check Prerequisites
|
||||
|
||||
> Before we start, let me make sure you have what we need.
|
||||
|
||||
Run this silently:
|
||||
```bash
|
||||
node --version 2>&1 && npm --version 2>&1
|
||||
```
|
||||
|
||||
- If Node.js is installed → say "You're good — Node.js is installed. Let's go."
|
||||
- If NOT installed → say:
|
||||
|
||||
> You need Node.js first. Go to https://nodejs.org and download the LTS version. Install it, restart your terminal, then come back and run `/website-builder-setup` again. Takes 2 minutes.
|
||||
|
||||
Stop here if Node is missing.
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Install UI/UX Pro Max
|
||||
|
||||
> **Step 1 of 3: UI/UX Pro Max**
|
||||
>
|
||||
> This gives me a massive design library — 50+ styles, 161 color palettes, 57 font pairings. When you ask me to build a website, I'm pulling from a real design system instead of guessing. This is why the output won't look like generic AI slop.
|
||||
>
|
||||
> Installing now...
|
||||
|
||||
Run:
|
||||
```bash
|
||||
npm install -g uipro-cli 2>&1
|
||||
```
|
||||
|
||||
Then:
|
||||
```bash
|
||||
uipro init --ai claude 2>&1
|
||||
```
|
||||
|
||||
- On success → "UI/UX Pro Max is installed. Your design stack is ready."
|
||||
- On failure → "Hit a snag. You can try manually later: `npm install -g uipro-cli && uipro init --ai claude`. Let's keep going."
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Install Framer Motion
|
||||
|
||||
> **Step 2 of 3: Framer Motion**
|
||||
>
|
||||
> This teaches me how to add real animations to your websites — smooth page transitions, hover effects, scroll-triggered reveals. The stuff that makes a $500 site look like a $10,000 site.
|
||||
>
|
||||
> Installing now...
|
||||
|
||||
Run:
|
||||
```bash
|
||||
npm install framer-motion 2>&1
|
||||
```
|
||||
|
||||
- On success → "Framer Motion is installed. Your sites will have real animations now."
|
||||
- On failure → "Hit a snag. You can try manually later: `npm install framer-motion`. Moving on."
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Set Up 21st.dev Magic
|
||||
|
||||
> **Step 3 of 3: 21st.dev Components**
|
||||
>
|
||||
> This connects me to a library of 100+ beautifully designed React components. Instead of building everything from scratch, I pull from production-quality building blocks — buttons, navbars, hero sections, cards, footers — all pre-designed and ready to use.
|
||||
>
|
||||
> This one needs a free API key. Here's how to get it:
|
||||
>
|
||||
> 1. Go to **https://21st.dev/magic/console**
|
||||
> 2. Sign up or log in (it's free)
|
||||
> 3. Copy your API key
|
||||
> 4. Paste it here when I ask for it
|
||||
|
||||
Wait for the user to provide their API key.
|
||||
|
||||
Once they provide it, add the MCP server to their Claude Code config:
|
||||
|
||||
Read `~/.claude.json`, find the `mcpServers` object, and add:
|
||||
|
||||
```json
|
||||
"21st-dev-magic": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@21st-dev/magic@latest"],
|
||||
"env": {
|
||||
"API_KEY": "THEIR_KEY_HERE"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
After writing the config:
|
||||
|
||||
> 21st.dev Magic is connected. You'll need to restart Claude Code for this one to kick in — just close and reopen your terminal after we're done.
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Done
|
||||
|
||||
> **You're all set.** Here's what you just installed:
|
||||
>
|
||||
> - **UI/UX Pro Max** — 50+ styles, 161 palettes, 57 font pairings
|
||||
> - **Framer Motion** — smooth, professional animations
|
||||
> - **21st.dev Magic** — 100+ production-ready components
|
||||
>
|
||||
> **To build your first website, just tell me:**
|
||||
> - What your business does
|
||||
> - Who it's for
|
||||
> - What vibe you want (dark, minimal, bold, playful, etc.)
|
||||
>
|
||||
> I'll handle the rest. Try something like:
|
||||
>
|
||||
> *"Build me a landing page for my consulting business targeting small business owners. Dark theme, modern, with animations."*
|
||||
>
|
||||
> **Important:** Restart Claude Code first so 21st.dev loads in. Then let's build something.
|
||||
|
||||
## Rules
|
||||
- Walk through each step ONE AT A TIME
|
||||
- Never dump all instructions at once
|
||||
- If any install fails, don't stop — acknowledge, give manual command, keep moving
|
||||
- Be encouraging and casual throughout
|
||||
- Assume zero coding experience
|
||||
- After everything is installed, prompt them to build their first site
|
||||
@@ -1,60 +0,0 @@
|
||||
# LookAtU: Product Plan (PRD)
|
||||
|
||||
## What is it? (the 4th-grade version)
|
||||
LookAtU is a helper for parents. The parent has an app. The child has an app. The parent can see where the child is, see what the child does on the phone, choose which apps the child can use, and check calls and messages. If the child is in danger, the child taps a big **panic button** and the parent gets an alert right away.
|
||||
|
||||
## Who is it for?
|
||||
- **Parents** of kids who have their own phone.
|
||||
- **Kids**, who need a simple way to ask for help.
|
||||
|
||||
## Core features
|
||||
1. **Live location**: the parent sees where the child is, any time.
|
||||
2. **Activity monitor**: which apps are used and for how long.
|
||||
3. **App control**: the parent can allow, block, or limit apps, and approve new installs.
|
||||
4. **Calls and messages**: the parent can check call history and messages.
|
||||
5. **Panic button**: the child taps once. The parent gets an alert with the child's location.
|
||||
|
||||
## Trust and safety rules (built in from day one)
|
||||
- The child **knows** the app is on their phone. No hidden spying. This is the honest way to do it, and app stores require it.
|
||||
- The parent signs in with a real account and a strong password.
|
||||
- Data is private and encrypted. Only the parent sees it.
|
||||
- Rules about monitoring messages differ by country and by the child's age. We must check the law for each country before launch.
|
||||
|
||||
## Phased roadmap
|
||||
|
||||
### Phase 1: Quick win (TODAY)
|
||||
A good-looking website (one page) that explains LookAtU and collects sign-ups.
|
||||
- Hero, 5 feature cards, "how it works", trust section, FAQ
|
||||
- Waitlist form that checks the email is real-looking
|
||||
- Works on phones and computers
|
||||
- **Done when:** page loads with no errors and the form and buttons work.
|
||||
|
||||
### Phase 2: Make it real
|
||||
- Connect the waitlist form to a real service so emails are saved.
|
||||
- Add animations (Framer Motion) and better pictures.
|
||||
- Add privacy and terms pages.
|
||||
|
||||
### Phase 3: Parent accounts
|
||||
- Sign up and log in.
|
||||
- A simple parent dashboard (website).
|
||||
- Link a parent to a child.
|
||||
|
||||
### Phase 4: Phone apps
|
||||
- Child app and parent app (Android first, then iPhone).
|
||||
- Live location and the panic button with alerts (push notifications and SMS).
|
||||
|
||||
### Phase 5: Monitoring and control
|
||||
- App usage, app blocking and install approval.
|
||||
- Call and message history (after legal review).
|
||||
|
||||
## How we test at every phase
|
||||
1. Page loads with **no errors**.
|
||||
2. Buttons and forms **work**.
|
||||
3. Real services (database, email, maps, alerts) **work**.
|
||||
4. **Security check**: passwords, private data, no secrets in code.
|
||||
|
||||
## Open questions for the owner
|
||||
- Which countries first?
|
||||
- Free or paid? (price)
|
||||
- Android first, or iPhone first?
|
||||
- Final name and logo?
|
||||
@@ -0,0 +1,83 @@
|
||||
# PRD: "Firefly-style" Cloud Control Platform (working name: CloudLens)
|
||||
|
||||
Status: DRAFT 1. Written from general knowledge of Firefly.ai (their website was
|
||||
blocked from my work environment). Please compare against firefly.ai before we build.
|
||||
|
||||
## 1. What is this, in plain words?
|
||||
Companies rent computers, storage and databases from Amazon (AWS), Google (GCP) and
|
||||
Microsoft (Azure). Over time nobody knows exactly what they have, what it costs, or
|
||||
who changed what. Firefly is like a **smart inventory + safety camera for the cloud**:
|
||||
|
||||
1. It **looks** at your cloud account and lists everything you own.
|
||||
2. It spots things that were made **by hand** (nobody wrote them down as code).
|
||||
3. It **writes the code** (Terraform) so those things are tracked.
|
||||
4. It **watches for changes** ("drift") and warns you.
|
||||
5. It checks **rules** (e.g. "no public storage buckets") and **cost**.
|
||||
|
||||
## 2. Core features (the full dream list)
|
||||
| # | Feature | 4th-grade explanation |
|
||||
|---|---------|-----------------------|
|
||||
| 1 | Cloud connection | Give the app a read-only key so it can look at your cloud. |
|
||||
| 2 | Asset inventory | One big searchable list of everything you own. |
|
||||
| 3 | Unmanaged-asset finder | Highlights things made by hand, not by code. |
|
||||
| 4 | Code generator (IaC) | Turns a hand-made thing into Terraform code. |
|
||||
| 5 | Drift detection | "This changed and nobody told us!" alerts. |
|
||||
| 6 | Policy / rules engine | Checks against safety and cost rules. |
|
||||
| 7 | Cost view | Shows what each thing costs per month. |
|
||||
| 8 | Alerts | Email / Slack messages when something is wrong. |
|
||||
| 9 | Backup & restore | Saves a copy of your setup so you can rebuild it. |
|
||||
| 10 | AI helper | Ask "which servers are public?" in normal words. |
|
||||
| 11 | Teams, logins, audit log | Who can see what, and who did what. |
|
||||
|
||||
## 3. Phased roadmap (small steps, test each one)
|
||||
|
||||
### Phase 0 - Quick win TODAY (about 1 session)
|
||||
Goal: something you can open and click.
|
||||
- A web dashboard with a **sample** cloud inventory (fake data, clearly labeled).
|
||||
- Search, filter by cloud / type / region, and a red badge for "unmanaged".
|
||||
- Summary cards: total assets, unmanaged count, monthly cost.
|
||||
- No logins, no real cloud yet. Zero risk.
|
||||
- **Tests:** page loads with no errors -> search/filter buttons work.
|
||||
|
||||
### Phase 1 - Real data (read-only)
|
||||
- Connect ONE real AWS account with a read-only key.
|
||||
- Replace sample data with real resources (EC2, S3, RDS first).
|
||||
- **You must:** create a read-only AWS user and give me its keys (I will walk you through it).
|
||||
- **Tests:** real API returns data -> keys never shown in the browser or saved in code.
|
||||
|
||||
### Phase 2 - Drift + rules
|
||||
- Save a snapshot every day; show "what changed".
|
||||
- First 10 rules (public bucket, no encryption, untagged, etc.).
|
||||
- Tests: change something on purpose -> app notices.
|
||||
|
||||
### Phase 3 - Code generation
|
||||
- Click an unmanaged item -> get Terraform code. Start with S3 + EC2 only.
|
||||
- Tests: generated code passes `terraform validate`.
|
||||
|
||||
### Phase 4 - Alerts, cost, teams
|
||||
- Email/Slack alerts, real cost numbers, logins and roles, audit log.
|
||||
- Security review: passwords, permissions, secret storage, rate limits.
|
||||
|
||||
### Phase 5 - Multi-cloud + AI
|
||||
- Add GCP and Azure. Add the "ask in plain English" helper (Claude API).
|
||||
- Backup & restore of cloud setups.
|
||||
|
||||
## 4. Suggested tech (so you know, no need to learn it)
|
||||
- Frontend: Next.js + React (what Firefly-style dashboards use).
|
||||
- Backend: Node/TypeScript API, PostgreSQL database.
|
||||
- Cloud reading: official AWS / GCP / Azure SDKs.
|
||||
- Secrets: a vault / environment variables, never in code.
|
||||
|
||||
## 5. Security rules (non-negotiable)
|
||||
- Read-only cloud keys first. Write access only in a later phase, with approval.
|
||||
- Keys stored encrypted on the server only.
|
||||
- Every phase ends with a security check before the next starts.
|
||||
|
||||
## 6. Out of scope (for now)
|
||||
Copying Firefly's logo, name, text or design. We build our **own** product with the
|
||||
same *kind* of features. Their exact code/designs are theirs.
|
||||
|
||||
## 7. Open questions for you
|
||||
1. Who is it for: just you, your company, or customers you will sell to?
|
||||
2. Which cloud do you use most: AWS, Google, or Azure?
|
||||
3. Do you have a cloud account we can use for testing? (If not, Phase 0 stays on fake data.)
|
||||
@@ -1,229 +0,0 @@
|
||||
<!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 = 'https://formspree.io/f/mljgogkr';
|
||||
(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;msg.scrollIntoView({block:'nearest'});}
|
||||
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...');
|
||||
var data=new FormData();data.append('email',v);data.append('phone',document.getElementById('phone').value);
|
||||
fetch(FORM_ENDPOINT,{method:'POST',headers:{'Accept':'application/json'},body:data})
|
||||
.then(function(r){
|
||||
if(!r.ok){return r.text().then(function(t){throw new Error('Error '+r.status+' '+t.slice(0,120));});}
|
||||
say('ok','Thank you! You are on the list.');form.reset();
|
||||
})
|
||||
.catch(function(err){
|
||||
say('err','Could not send. ('+(err&&err.message?err.message:'network problem')+') Please try again in a minute.');
|
||||
if(window.console)console.error('Waitlist error:',err);
|
||||
})
|
||||
.then(function(){btn.disabled=false;msg.scrollIntoView({block:'nearest'});});
|
||||
});
|
||||
})();
|
||||
</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>
|
||||
@@ -1,26 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Privacy Policy – LookAtU</title>
|
||||
<style>
|
||||
body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
|
||||
main{max-width:720px;margin:0 auto;padding:40px 20px}
|
||||
a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
|
||||
.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
|
||||
</style></head><body><main>
|
||||
<p><a href="../">← Back to LookAtU</a></p>
|
||||
<h1>Privacy Policy</h1>
|
||||
<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
|
||||
|
||||
<h2>What we collect today</h2>
|
||||
<p>This website collects only the email address and phone type (Android, iPhone or both) that you type into the waitlist form.</p>
|
||||
<h2>Why we collect it</h2>
|
||||
<p>We use it only to tell you when LookAtU opens. We do not sell it. We do not use it for anything else.</p>
|
||||
<h2>Who sees it</h2>
|
||||
<p>The LookAtU team, and the service that stores the waitlist for us.</p>
|
||||
<h2>Your choices</h2>
|
||||
<p>You can ask us to delete your email at any time. Every email we send will have a way to unsubscribe.</p>
|
||||
<h2>The LookAtU app (coming later)</h2>
|
||||
<p>The app will handle location, activity and messages of children. Before launch we will publish full details here: what is collected, how it is protected, how long it is kept, and how a parent can delete it. The child will always be able to see that the app is installed.</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Contact email: <em>to be added before launch</em>.</p>
|
||||
</main></body></html>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Terms of Use – LookAtU</title>
|
||||
<style>
|
||||
body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
|
||||
main{max-width:720px;margin:0 auto;padding:40px 20px}
|
||||
a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
|
||||
.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
|
||||
</style></head><body><main>
|
||||
<p><a href="../">← Back to LookAtU</a></p>
|
||||
<h1>Terms of Use</h1>
|
||||
<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
|
||||
|
||||
<h2>This is an early preview</h2>
|
||||
<p>This website is a preview of a product that is not released yet. Nothing here is an offer to sell.</p>
|
||||
<h2>Waitlist</h2>
|
||||
<p>Joining the waitlist is free and does not oblige you to buy anything. You can leave at any time.</p>
|
||||
<h2>Using LookAtU responsibly (when it launches)</h2>
|
||||
<ul>
|
||||
<li>LookAtU is for parents and legal guardians of their own children.</li>
|
||||
<li>It must not be used to watch another adult or someone else's child.</li>
|
||||
<li>The child must be able to see that the app is installed.</li>
|
||||
<li>Parents are responsible for following the laws in their country.</li>
|
||||
</ul>
|
||||
<h2>Emergencies</h2>
|
||||
<p>The panic button helps a child alert a parent. It does not replace the police or emergency services. In an emergency, call your local emergency number.</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Contact email: <em>to be added before launch</em>.</p>
|
||||
</main></body></html>
|
||||
Reference in new issue
Block a user