Upload 19 files

Dockerfile

@@ -0,0 +1,23 @@
+# SafeSight on Hugging Face Spaces (Docker SDK)
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install deps first for layer caching
+COPY package.json ./
+RUN npm install --omit=dev
+
+# Copy the rest of the app
+COPY . .
+
+# HF Spaces expects the app to listen on port 7860
+ENV PORT=7860
+ENV NODE_ENV=production
+
+# Persistent storage is mounted at /data by HF Spaces (paid persistent storage).
+# The app encrypts everything it writes there.
+VOLUME ["/data"]
+
+EXPOSE 7860
+
+CMD ["node", "src/server.js"]

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "safesight-web",
+  "version": "1.0.0",
+  "description": "SafeSight marketing site with Stripe billing, deployable to Hugging Face Spaces (Docker).",
+  "main": "src/server.js",
+  "type": "commonjs",
+  "scripts": {
+    "start": "node src/server.js"
+  },
+  "engines": { "node": ">=20" },
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "express": "^4.19.2",
+    "stripe": "^16.12.0"
+  }
+}

public/styles.css

@@ -0,0 +1,82 @@
+:root{
+  --bg:#0A1A3A; --bg-2:#0e2150; --ink:#F8FAFC; --muted:#a8b3d1;
+  --primary:#1E40AF; --primary-2:#3B82F6; --accent:#F97316; --card:#11244f;
+  --border:rgba(255,255,255,.08); --max:1100px;
+}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
+a{color:var(--primary-2);text-decoration:none}
+a:hover{color:var(--accent)}
+.container{max-width:var(--max);margin:0 auto;padding:0 24px}
+.site-header{position:sticky;top:0;z-index:10;background:rgba(10,26,58,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
+.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
+.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
+nav a{margin-left:18px;color:var(--ink);font-weight:500}
+.btn{display:inline-block;padding:10px 18px;border-radius:10px;font-weight:600;border:1px solid transparent;cursor:pointer}
+.btn-primary{background:var(--accent);color:#1a1006}
+.btn-primary:hover{filter:brightness(1.05);color:#1a1006}
+.btn-outline{border-color:var(--border);color:var(--ink)}
+.hero{padding:80px 0 60px;background:radial-gradient(800px 400px at 80% 0%, rgba(249,115,22,.15), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg-2))}
+.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 18px}
+.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:640px}
+.cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
+section{padding:60px 0}
+section h2{font-size:2rem;margin:0 0 24px}
+.grid{display:grid;gap:20px}
+.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
+.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px}
+.card h3{margin:0 0 8px;color:var(--ink)}
+.card p{margin:0;color:var(--muted)}
+.stat{font-size:2.4rem;color:var(--accent);font-weight:800}
+table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
+th,td{padding:14px;border-bottom:1px solid var(--border);text-align:left}
+th{background:rgba(255,255,255,.03)}
+.price{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
+.plan{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;min-width:260px;max-width:320px;flex:1}
+.plan.featured{border-color:var(--accent)}
+.plan .amount{font-size:2.4rem;font-weight:800}
+.plan ul{padding-left:18px;color:var(--muted)}
+.toggle{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:24px}
+.toggle button{border:0;background:transparent;color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer;font-weight:600}
+.toggle button.active{background:var(--accent);color:#1a1006}
+.disclaimer{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.35);padding:14px;border-radius:10px;color:#fde4cf;font-size:.92rem}
+.site-footer{padding:40px 0;border-top:1px solid var(--border);background:#06112a;margin-top:60px}
+.footlinks{margin:16px 0}
+.footlinks a{margin-right:16px}
+.copy{color:var(--muted);font-size:.9rem;margin:0}
+form input,form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:#0c1d44;color:var(--ink);margin-bottom:12px;font:inherit}
+label{display:block;font-weight:600;margin-bottom:6px}
+.notice{padding:12px;border-radius:10px;margin-bottom:20px}
+.notice.success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4)}
+.notice.warn{background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.4)}
+
+/* ---- hero phone ---- */
+.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
+@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
+.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(249,115,22,.12);color:var(--accent);border:1px solid rgba(249,115,22,.4);padding:6px 14px;border-radius:999px;font-weight:600;font-size:.9rem;margin-bottom:18px}
+.alert-line{color:var(--accent);font-weight:500;margin:16px 0 0}
+.hero-art{display:flex;justify-content:center}
+.phone-frame{width:min(340px,80%);aspect-ratio:9/16;background:#f4efe6;border-radius:28px;padding:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);overflow:hidden}
+.phone-screen{width:100%;height:100%;border-radius:22px;background:linear-gradient(160deg,#243b4a,#3a5b6d 60%,#a9b8a8);position:relative;overflow:hidden}
+.phone-banner{position:absolute;top:38%;left:8%;right:18%;background:var(--accent);color:#fff;padding:14px 18px;border-radius:10px;font-weight:700;transform:rotate(-6deg);box-shadow:0 8px 20px rgba(0,0,0,.25)}
+
+/* ---- buttons (contrast fix) ---- */
+.btn-secondary{background:#fff;color:#0A1A3A;border:1px solid #fff;font-weight:700}
+.btn-secondary:hover{background:#e8eefb;color:#0A1A3A}
+
+/* ---- pricing alignment ---- */
+.price{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;max-width:880px;margin:0 auto}
+@media (min-width:760px){.price{grid-template-columns:1fr 1fr}}
+.plan{display:flex;flex-direction:column;max-width:none;min-width:0}
+.plan h3{margin:0 0 6px;color:var(--ink);font-size:1.35rem}
+.plan-sub{color:var(--muted);margin:0 0 22px;min-height:24px}
+.plan .amount{font-size:2.6rem;font-weight:800;line-height:1;margin:0}
+.amount-unit{font-size:1rem;color:var(--muted);font-weight:500;margin-left:4px}
+.amount-equiv{color:var(--muted);font-size:.95rem;margin:8px 0 28px;min-height:22px}
+.badge{display:inline-block;background:rgba(249,115,22,.15);color:var(--accent);font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}
+.features{list-style:none;padding:0;margin:0 0 24px;flex:1}
+.features li{position:relative;padding:8px 0 8px 30px;color:var(--ink)}
+.features li::before{position:absolute;left:0;top:8px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;border-radius:50%;font-size:.85rem}
+.features li.ok::before{content:"✓";color:var(--accent)}
+.features li.no{color:var(--muted);text-decoration:line-through}
+.features li.no::before{content:"✕";color:#94a3b8}

src/db.js

@@ -0,0 +1,87 @@
+/**
+ * Encrypted JSON store at /data/db.enc
+ *
+ * Cipher: AES-256-GCM
+ *   - Symmetric AES with a 256-bit key is considered quantum-tolerant:
+ *     Grover's algorithm only reduces effective security to 128 bits, which
+ *     is the same level NIST targets for post-quantum symmetric primitives.
+ *   - Each write uses a fresh random 12-byte IV and a 16-byte auth tag, so
+ *     tampering with /data/db.enc is detected on the next read.
+ *
+ * Key: env var DB_ENCRYPTION_KEY = 64 hex chars (32 bytes). Set this manually
+ * in the Hugging Face Space "Secrets" panel. Generate with:
+ *     node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
+ *
+ * On-disk layout (binary):
+ *   [12 bytes IV][16 bytes auth tag][N bytes ciphertext of UTF-8 JSON]
+ */
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const DATA_DIR = '/data';
+const DB_PATH = path.join(DATA_DIR, 'db.enc');
+
+function getKey() {
+  const hex = process.env.DB_ENCRYPTION_KEY;
+  if (!hex || !/^[0-9a-fA-F]{64}$/.test(hex)) {
+    throw new Error(
+      'DB_ENCRYPTION_KEY must be a 64-character hex string (32 bytes). ' +
+      'Generate one with: node -e "console.log(require(\'crypto\').randomBytes(32).toString(\'hex\'))"'
+    );
+  }
+  return Buffer.from(hex, 'hex');
+}
+
+function ensureDir() {
+  try {
+    fs.mkdirSync(DATA_DIR, { recursive: true });
+  } catch (e) {
+    // If /data is not mounted (running locally without persistence), fall back gracefully.
+    if (e.code !== 'EEXIST' && e.code !== 'EACCES') throw e;
+  }
+}
+
+function emptyState() {
+  return { customers: {}, events: [] };
+}
+
+function read() {
+  ensureDir();
+  if (!fs.existsSync(DB_PATH)) return emptyState();
+  const raw = fs.readFileSync(DB_PATH);
+  if (raw.length < 12 + 16 + 1) return emptyState();
+
+  const key = getKey();
+  const iv = raw.subarray(0, 12);
+  const tag = raw.subarray(12, 28);
+  const ct = raw.subarray(28);
+
+  const decipher = crypto.createDecipheriv('aes-256-gcm', key, iv);
+  decipher.setAuthTag(tag);
+  const plain = Buffer.concat([decipher.update(ct), decipher.final()]);
+  return JSON.parse(plain.toString('utf8'));
+}
+
+function write(state) {
+  ensureDir();
+  const key = getKey();
+  const iv = crypto.randomBytes(12);
+  const cipher = crypto.createCipheriv('aes-256-gcm', key, iv);
+  const plain = Buffer.from(JSON.stringify(state), 'utf8');
+  const ct = Buffer.concat([cipher.update(plain), cipher.final()]);
+  const tag = cipher.getAuthTag();
+  const tmp = DB_PATH + '.tmp';
+  fs.writeFileSync(tmp, Buffer.concat([iv, tag, ct]), { mode: 0o600 });
+  fs.renameSync(tmp, DB_PATH);
+}
+
+function update(mutator) {
+  const state = read();
+  mutator(state);
+  write(state);
+  return state;
+}
+
+module.exports = { read, write, update };

src/server.js

@@ -0,0 +1,187 @@
+const express = require('express');
+const path = require('path');
+const crypto = require('crypto');
+const db = require('./db');
+
+const app = express();
+const PORT = process.env.PORT || 7860;
+
+// ---------- Stripe (optional) ----------
+// Set these as Hugging Face Space secrets:
+//   STRIPE_SECRET_KEY        (sk_test_... or sk_live_...)
+//   STRIPE_PRICE_MONTHLY     (price_... for the $4.99/mo plan)
+//   STRIPE_PRICE_ANNUAL      (price_... for the $39.99/yr plan)
+//   STRIPE_WEBHOOK_SECRET    (whsec_... from your endpoint)
+//   PUBLIC_URL               (e.g. https://USERNAME-safesight.hf.space)
+let stripe = null;
+if (process.env.STRIPE_SECRET_KEY) {
+  stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+}
+
+// ---------- View engine ----------
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, '..', 'views'));
+
+// ---------- Static ----------
+app.use('/static', express.static(path.join(__dirname, '..', 'public'), {
+  maxAge: '7d',
+  etag: true,
+}));
+
+// Webhook MUST receive the raw body before JSON parsing.
+app.post('/stripe/webhook', express.raw({ type: 'application/json' }), (req, res) => {
+  if (!stripe) return res.status(503).send('Stripe not configured');
+  const sig = req.headers['stripe-signature'];
+  const secret = process.env.STRIPE_WEBHOOK_SECRET;
+  if (!secret) return res.status(503).send('Webhook secret not configured');
+
+  let event;
+  try {
+    event = stripe.webhooks.constructEvent(req.body, sig, secret);
+  } catch (err) {
+    return res.status(400).send(`Webhook Error: ${err.message}`);
+  }
+
+  try {
+    db.update((state) => {
+      state.events.push({ id: event.id, type: event.type, at: Date.now() });
+      if (state.events.length > 1000) state.events.splice(0, state.events.length - 1000);
+
+      if (event.type === 'checkout.session.completed') {
+        const s = event.data.object;
+        const customerId = s.customer;
+        if (customerId) {
+          state.customers[customerId] = {
+            ...(state.customers[customerId] || {}),
+            email: s.customer_details?.email || s.customer_email || null,
+            lastCheckout: s.id,
+            updatedAt: Date.now(),
+            subscriptionId: s.subscription || null,
+            status: 'active',
+          };
+        }
+      }
+      if (event.type === 'customer.subscription.updated' ||
+          event.type === 'customer.subscription.deleted' ||
+          event.type === 'customer.subscription.created') {
+        const sub = event.data.object;
+        const customerId = sub.customer;
+        if (customerId) {
+          state.customers[customerId] = {
+            ...(state.customers[customerId] || {}),
+            subscriptionId: sub.id,
+            status: sub.status,
+            currentPeriodEnd: sub.current_period_end,
+            updatedAt: Date.now(),
+          };
+        }
+      }
+    });
+  } catch (e) {
+    console.error('DB write failed:', e.message);
+    return res.status(500).send('storage error');
+  }
+
+  res.json({ received: true });
+});
+
+// JSON / form parsing for everything else.
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// ---------- Page metadata ----------
+const SITE = {
+  name: 'SafeSight',
+  tagline: 'Stop distracted driving before it stops you.',
+  url: process.env.PUBLIC_URL || '',
+};
+
+function render(res, view, locals = {}) {
+  res.render(view, { SITE, page: view, query: {}, ...locals });
+}
+
+// ---------- Pages ----------
+const pages = [
+  ['/', 'home', { title: 'SafeSight — Stop distracted driving', desc: 'On-device AI that warns you the moment your eyes leave the road.' }],
+  ['/how-it-works', 'how-it-works', { title: 'How SafeSight Works', desc: 'A 5-step look at on-device camera processing and instant alerts.' }],
+  ['/why-safesight', 'why-safesight', { title: 'Why SafeSight', desc: 'Privacy-first, real-time, and built for everyday drivers.' }],
+  ['/about', 'about', { title: 'About SafeSight', desc: 'Our mission to make every drive safer.' }],
+  ['/pricing', 'pricing', { title: 'Pricing — Monthly & Annual', desc: 'Simple plans. Cancel anytime.' }],
+  ['/download', 'download', { title: 'Download SafeSight', desc: 'Get SafeSight on iOS and Android.' }],
+  ['/contact', 'contact', { title: 'Contact SafeSight', desc: 'Questions, partnerships, and press.' }],
+  ['/privacy', 'privacy', { title: 'Privacy Policy', desc: 'How SafeSight handles your data.' }],
+  ['/terms', 'terms', { title: 'Terms of Service', desc: 'Terms, disclaimers, and liability.' }],
+];
+
+for (const [route, view, meta] of pages) {
+  app.get(route, (req, res) => render(res, view, { ...meta, query: req.query }));
+}
+
+// ---------- Data deletion request ----------
+app.post('/deletion-request', (req, res) => {
+  const email = String(req.body.email || '').trim().slice(0, 255);
+  const customerId = String(req.body.customerId || '').trim().slice(0, 64);
+  const reason = String(req.body.reason || '').trim().slice(0, 1000);
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return res.status(400).send('Valid email required.');
+  }
+  try {
+    db.update((state) => {
+      state.deletionRequests = state.deletionRequests || [];
+      state.deletionRequests.push({ email, customerId, reason, at: Date.now() });
+      if (state.deletionRequests.length > 5000) state.deletionRequests.shift();
+    });
+  } catch (e) {
+    console.error('DB write failed:', e.message);
+    return res.status(500).send('Storage error');
+  }
+  res.redirect(303, '/privacy?sent=1');
+});
+
+// ---------- Stripe checkout ----------
+app.post('/checkout', async (req, res) => {
+  if (!stripe) return res.status(503).send('Payments are not configured yet. Set STRIPE_SECRET_KEY.');
+  const plan = req.body.plan === 'annual' ? 'annual' : 'monthly';
+  const priceId = plan === 'annual' ? process.env.STRIPE_PRICE_ANNUAL : process.env.STRIPE_PRICE_MONTHLY;
+  if (!priceId) return res.status(503).send(`Missing STRIPE_PRICE_${plan.toUpperCase()}`);
+
+  const base = process.env.PUBLIC_URL || `${req.protocol}://${req.get('host')}`;
+  try {
+    const session = await stripe.checkout.sessions.create({
+      mode: 'subscription',
+      line_items: [{ price: priceId, quantity: 1 }],
+      success_url: `${base}/pricing?status=success&session_id={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${base}/pricing?status=cancelled`,
+      allow_promotion_codes: true,
+    });
+    res.redirect(303, session.url);
+  } catch (e) {
+    console.error(e);
+    res.status(500).send('Could not start checkout.');
+  }
+});
+
+// ---------- Misc ----------
+app.get('/robots.txt', (req, res) => {
+  res.type('text/plain').send(`User-agent: *\nAllow: /\nSitemap: ${SITE.url || ''}/sitemap.xml\n`);
+});
+
+app.get('/sitemap.xml', (req, res) => {
+  const base = SITE.url || `${req.protocol}://${req.get('host')}`;
+  const urls = pages.map(([p]) => `<url><loc>${base}${p}</loc></url>`).join('');
+  res.type('application/xml').send(
+    `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}</urlset>`
+  );
+});
+
+app.get('/healthz', (req, res) => res.json({ ok: true }));
+
+app.use((req, res) => {
+  res.status(404);
+  render(res, '404', { title: 'Not Found', desc: 'Page not found.' });
+});
+
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`SafeSight listening on http://0.0.0.0:${PORT}`);
+  if (!stripe) console.log('Stripe disabled (STRIPE_SECRET_KEY not set).');
+});

views/404.ejs

@@ -0,0 +1,7 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container" style="text-align:center">
+  <h1>404</h1><p class="lead" style="margin:0 auto">That page doesn't exist.</p>
+  <div class="cta" style="justify-content:center"><a href="/" class="btn btn-primary">Back home</a></div>
+</div></section>
+<%- include('partials/footer') %>

views/about.ejs

@@ -0,0 +1,14 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>About SafeSight</h1><p class="lead">We're building the driver-attention layer for every vehicle, starting with the phone already in your pocket.</p></div></section>
+<section><div class="container grid grid-3">
+  <div class="card"><h3>Mission</h3><p>Eliminate preventable crashes caused by distraction without sending anyone's face to the cloud.</p></div>
+  <div class="card"><h3>Approach</h3><p>Edge-only computer vision, audible/haptic feedback, and a privacy-first data model.</p></div>
+  <div class="card"><h3>Team</h3><p>Engineers and safety advocates who lost too many friends to "just one text".</p></div>
+</div></div></section>
+<section><div class="container grid grid-3">
+  <div class="card"><div class="stat">$8B</div><p>TAM — global driver-assistance software</p></div>
+  <div class="card"><div class="stat">$1.2B</div><p>SAM — phone-based attention monitoring</p></div>
+  <div class="card"><div class="stat">$60M</div><p>SOM — early-adopter rideshare & fleet drivers</p></div>
+</div></section>
+<%- include('partials/footer') %>

views/contact.ejs

@@ -0,0 +1,12 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>Contact us</h1><p class="lead">Questions, partnerships, or press inquiries.</p></div></section>
+<section><div class="container" style="max-width:560px">
+  <form method="POST" action="/contact" onsubmit="event.preventDefault(); this.querySelector('.notice')?.remove(); var d=document.createElement('div'); d.className='notice success'; d.textContent='Thanks — we\\'ll get back to you soon.'; this.prepend(d);">
+    <label>Name<input name="name" required></label>
+    <label>Email<input name="email" type="email" required></label>
+    <label>Message<textarea name="message" rows="5" required></textarea></label>
+    <button class="btn btn-primary" type="submit">Send</button>
+  </form>
+</div></section>
+<%- include('partials/footer') %>

views/download.ejs

@@ -0,0 +1,12 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container" style="text-align:center">
+  <h1>Get SafeSight</h1>
+  <p class="lead" style="margin:0 auto">Available on iOS and Android.</p>
+  <div class="cta" style="justify-content:center">
+    <a href="#" class="btn btn-primary" onclick="event.preventDefault()">Download for iOS</a>
+    <a href="#" class="btn btn-primary" onclick="event.preventDefault()">Download for Android</a>
+  </div>
+  <p style="color:var(--muted);margin-top:24px">App store links coming soon.</p>
+</div></section>
+<%- include('partials/footer') %>

views/home.ejs

@@ -0,0 +1,31 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero">
+  <div class="container hero-grid">
+    <div>
+      <span class="chip">🛡 Driver Safety App</span>
+      <h1>Eyes on the Road.<br><span style="color:var(--accent)">Always.</span></h1>
+      <p class="lead">SafeSight uses your device's camera to monitor driver focus and sends real-time alerts when your attention drifts. Drive safer, arrive alive.</p>
+      <p class="alert-line">⚠ 315,167 people injured in 2024 from driving distraction</p>
+      <div class="cta">
+        <a href="/download" class="btn btn-primary">Get the App →</a>
+        <a href="/how-it-works" class="btn btn-secondary">See how it works</a>
+      </div>
+    </div>
+    <div class="hero-art">
+      <div class="phone-frame">
+        <div class="phone-screen">
+          <div class="phone-banner">Eyes on the road!</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section>
+  <div class="container grid grid-3">
+    <div class="card"><div class="stat">3,300+</div><p>U.S. deaths per year caused by distracted driving.</p></div>
+    <div class="card"><div class="stat">1 in 4</div><p>Crashes involve a driver using a phone behind the wheel.</p></div>
+    <div class="card"><div class="stat">5 sec</div><p>Average time eyes leave the road when texting — at 55 mph, that's a football field.</p></div>
+  </div>
+</section>
+<%- include('partials/footer') %>

views/how-it-works.ejs

@@ -0,0 +1,11 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>How SafeSight works</h1><p class="lead">Five steps. Zero data leaving your phone.</p></div></section>
+<section><div class="container grid grid-3">
+  <div class="card"><h3>1. Mount</h3><p>Place your phone in a dashboard mount so the front camera faces you.</p></div>
+  <div class="card"><h3>2. Calibrate</h3><p>A quick one-time calibration learns where "eyes on the road" looks like for your setup.</p></div>
+  <div class="card"><h3>3. Detect</h3><p>An on-device neural network analyzes head and eye position 30 times per second.</p></div>
+  <div class="card"><h3>4. Alert</h3><p>When your gaze drifts for more than a fraction of a second, SafeSight chirps and vibrates.</p></div>
+  <div class="card"><h3>5. Review</h3><p>After your trip, see a private summary of focus events — stored encrypted on your phone.</p></div>
+</div></div></section>
+<%- include('partials/footer') %>

views/partials/footer.ejs

@@ -0,0 +1,18 @@
+<footer class="site-footer">
+  <div class="container">
+    <p class="disclaimer">
+      <strong>Safety disclaimer:</strong> SafeSight is a driver-assistance tool. It is
+      <strong>not</strong> responsible for any accidents, injuries, or damages that may
+      occur while driving. Drivers must remain attentive at all times, handle distractions
+      responsibly, and are fully responsible for the safe operation of their vehicle.
+    </p>
+    <div class="footlinks">
+      <a href="/privacy">Privacy</a>
+      <a href="/terms">Terms</a>
+      <a href="/contact">Contact</a>
+    </div>
+    <p class="copy">© <%= new Date().getFullYear() %> SafeSight</p>
+  </div>
+</footer>
+</body>
+</html>

views/partials/head.ejs

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title><%= title %></title>
+<meta name="description" content="<%= desc %>">
+<link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
+<meta property="og:title" content="<%= title %>">
+<meta property="og:description" content="<%= desc %>">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary">
+<link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>

views/partials/header.ejs

@@ -0,0 +1,16 @@
+<header class="site-header">
+  <div class="container nav">
+    <a href="/" class="brand">
+      <img src="/static/img/logo.svg" alt="SafeSight logo" width="28" height="28">
+      <span>SafeSight</span>
+    </a>
+    <nav>
+      <a href="/how-it-works">How it works</a>
+      <a href="/why-safesight">Why SafeSight</a>
+      <a href="/pricing">Pricing</a>
+      <a href="/about">About</a>
+      <a href="/contact">Contact</a>
+      <a href="/download" class="btn btn-primary">Download</a>
+    </nav>
+  </div>
+</header>

views/pricing.ejs

@@ -0,0 +1,55 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container" style="text-align:center">
+  <h1>Simple pricing</h1>
+  <p class="lead" style="margin:0 auto">Try free for 7 days. Cancel anytime.</p>
+</div></section>
+<section><div class="container">
+  <script>
+    (function(){
+      var p = new URLSearchParams(location.search);
+      if (p.get('status')==='success') document.write('<div class="notice success">Thanks! Your subscription is active.</div>');
+      if (p.get('status')==='cancelled') document.write('<div class="notice warn">Checkout cancelled — no charge was made.</div>');
+    })();
+  </script>
+  <div class="price">
+    <div class="plan">
+      <h3>Monthly</h3>
+      <p class="plan-sub">Pay as you go. Cancel anytime.</p>
+      <div class="amount">$4.99<span class="amount-unit">/mo</span></div>
+      <div class="amount-equiv">&nbsp;</div>
+      <ul class="features">
+        <li class="ok">Real-time gaze tracking</li>
+        <li class="ok">Instant distraction alerts</li>
+        <li class="ok">Drowsiness detection</li>
+        <li class="ok">Focus Score per trip</li>
+        <li class="no">Trip history &amp; trends</li>
+        <li class="ok">100% on-device privacy</li>
+      </ul>
+      <form method="POST" action="/checkout">
+        <input type="hidden" name="plan" value="monthly">
+        <button type="submit" class="btn btn-secondary" style="width:100%">Subscribe Monthly</button>
+      </form>
+    </div>
+    <div class="plan featured">
+      <h3>Annual <span class="badge">Best Value</span></h3>
+      <p class="plan-sub">Billed once per year. Biggest savings.</p>
+      <div class="amount">$39.99<span class="amount-unit">/yr</span></div>
+      <div class="amount-equiv">$3.33/mo equivalent</div>
+      <ul class="features">
+        <li class="ok">Real-time gaze tracking</li>
+        <li class="ok">Instant distraction alerts</li>
+        <li class="ok">Drowsiness detection</li>
+        <li class="ok">Focus Score per trip</li>
+        <li class="ok">Trip history &amp; trends</li>
+        <li class="ok">100% on-device privacy</li>
+      </ul>
+      <form method="POST" action="/checkout">
+        <input type="hidden" name="plan" value="annual">
+        <button type="submit" class="btn btn-primary" style="width:100%">Subscribe Annually</button>
+      </form>
+    </div>
+  </div>
+  <p style="text-align:center;color:var(--muted);margin-top:24px">All plans include a 7-day free trial. No credit card required to start.</p>
+</div></section>
+<%- include('partials/footer') %>

views/privacy.ejs

@@ -0,0 +1,40 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>Privacy Policy</h1></div></section>
+<section><div class="container" style="max-width:760px">
+  <p>SafeSight is built privacy-first. The mobile app processes camera frames entirely on your device. We do not upload, store, or transmit video, audio, or images of you to any server.</p>
+  <h3>1. What we collect</h3>
+  <p>Only the minimum required to operate billing: your email and Stripe customer ID. Billing records are stored encrypted at rest using AES-256-GCM on persistent storage with a key only the operator controls.</p>
+  <h3>2. What we never collect</h3>
+  <p>Camera frames, biometric data, location, contacts, or any in-vehicle imagery.</p>
+  <h3>3. Third parties</h3>
+  <p>Stripe processes payments. Their privacy policy applies to payment data.</p>
+  <h3>4. Cookies</h3>
+  <p>We use only essential cookies required for checkout sessions.</p>
+  <h3>5. Children</h3>
+  <p>SafeSight is not directed to children under 13.</p>
+  <h3>6. Your rights</h3>
+  <p>You can request deletion of your account and associated data at any time using the form below. We will process deletion requests within 30 days.</p>
+
+  <% const sent = (typeof query !== 'undefined' && query.sent) ? true : false; %>
+  <script>
+    (function(){
+      var p = new URLSearchParams(location.search);
+      if (p.get('sent')==='1') document.write('<div class="notice success">Request received. We will process it within 30 days.</div>');
+    })();
+  </script>
+
+  <form method="POST" action="/deletion-request" class="card" style="margin-top:16px">
+    <label for="dr-email">Email on the account</label>
+    <input id="dr-email" name="email" type="email" required maxlength="255" placeholder="you@example.com">
+
+    <label for="dr-customer">Stripe customer ID (optional)</label>
+    <input id="dr-customer" name="customerId" type="text" maxlength="64" placeholder="cus_...">
+
+    <label for="dr-reason">Reason (optional)</label>
+    <textarea id="dr-reason" name="reason" rows="4" maxlength="1000" placeholder="Anything you'd like us to know"></textarea>
+
+    <button type="submit" class="btn btn-primary">Request data deletion</button>
+  </form>
+</div></section>
+<%- include('partials/footer') %>

views/terms.ejs

@@ -0,0 +1,22 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>Terms of Service</h1></div></section>
+<section><div class="container" style="max-width:760px">
+  <div class="disclaimer" style="margin-bottom:24px">
+    <strong>Safety disclaimer.</strong> SafeSight is a driver-assistance tool only. It is
+    <strong>not</strong> a substitute for attentive driving and is <strong>not responsible</strong>
+    for any accidents, injuries, property damage, or losses that may occur while using the
+    product. Drivers must remain alert at all times, handle distractions responsibly, comply
+    with all traffic laws, and are <strong>fully responsible</strong> for the safe operation
+    of their vehicle. By using SafeSight you acknowledge and accept this disclaimer.
+  </div>
+  <h3>Service</h3>
+  <p>SafeSight provides software that warns drivers when their eyes appear to leave the road. Detection is probabilistic and may produce false positives or miss events.</p>
+  <h3>Subscription & billing</h3>
+  <p>Plans renew automatically until cancelled. You may cancel at any time; access continues through the end of the paid period.</p>
+  <h3>Limitation of liability</h3>
+  <p>To the maximum extent permitted by law, SafeSight and its operators are not liable for any direct, indirect, incidental, consequential, or punitive damages arising from use of the product, including any vehicle accident.</p>
+  <h3>Changes</h3>
+  <p>We may update these terms. Continued use constitutes acceptance.</p>
+</div></section>
+<%- include('partials/footer') %>

views/why-safesight.ejs

@@ -0,0 +1,16 @@
+<%- include('partials/head') %>
+<%- include('partials/header') %>
+<section class="hero"><div class="container"><h1>Why SafeSight is different</h1><p class="lead">Real-time, private, and built around how people actually drive.</p></div></section>
+<section><div class="container">
+  <table>
+    <thead><tr><th></th><th>SafeSight</th><th>Typical "safe driving" apps</th></tr></thead>
+    <tbody>
+      <tr><td>Detects eyes off road in real time</td><td>✔</td><td>✘</td></tr>
+      <tr><td>Processing happens on-device</td><td>✔</td><td>✘ (uploaded to cloud)</td></tr>
+      <tr><td>Works without an internet connection</td><td>✔</td><td>✘</td></tr>
+      <tr><td>No video or audio leaves your phone</td><td>✔</td><td>✘</td></tr>
+      <tr><td>Alerts within ~200 ms</td><td>✔</td><td>Post-trip reports only</td></tr>
+    </tbody>
+  </table>
+</div></section>
+<%- include('partials/footer') %>