Phase 2

Base app architecture: Route groups for customer, staff and owner. * Reusable design system with around 20 UI components. * Complete Prisma schema. * Authentication with email/password and Google. * Role and permission model. * Protected routes. * Clean separation between features, services, components and shared utilities.
2026-08-02 17:47:23 +01:00
1 parent 468d163299
commit 090646fdfd
@@ -0,0 +1,101 @@
+<html lang="en">
+
+  <head>
+    <script>
+      window.FontAwesomeConfig = {
+        autoReplaceSvg: 'nest'
+      };
+    </script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
+      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <meta charset="utf-8">
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <title>Create Account — TrimTime</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+      tailwind.config = {
+        theme:
+        {
+          extend:
+          {
+            colors:
+            {
+              ink: '#111b15',
+              stone: '#f4f6f4',
+              surface: '#ffffff',
+              muted: '#6c7870',
+              line: '#e1e7e2',
+              accent: '#10b981'
+            },
+            fontFamily:
+            {
+              sans: ['Inter', 'sans-serif']
+            },
+            borderRadius:
+            {
+              jumbo: '1rem',
+              tile: '0.75rem'
+            }
+          }
+        }
+      }
+    </script>
+  </head>
+
+  <body class="bg-stone text-ink min-h-screen flex flex-col px-6 py-12">
+    <div class="flex-1 max-w-md mx-auto w-full h-[500px] block" id="igc4">
+      <header class="mb-10"><button onclick="history.back()"
+          class="w-10 h-10 rounded-full border border-line flex items-center justify-center mb-8"><i
+            class="fa-solid fa-arrow-left text-sm"></i></button>
+        <h1 class="text-3xl font-bold tracking-tight">Create Account</h1>
+        <p class="text-muted mt-2">Join TrimTime to track your appointments and
+          loyalty.</p>
+      </header>
+      <form class="space-y-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div><label
+              class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">First
+              Name</label><input type="text" placeholder="John"
+              class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
+          </div>
+          <div><label
+              class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Last
+              Name</label><input type="text" placeholder="Doe"
+              class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
+          </div>
+        </div>
+        <div><label
+            class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Email
+            Address</label><input type="email" placeholder="name@example.com"
+            class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
+        </div>
+        <div><label
+            class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Phone
+            Number</label><input type="tel" placeholder="+1 (555) 000-0000"
+            class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
+        </div>
+        <div><label
+            class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Password</label><input
+            type="password" placeholder="••••••••"
+            class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
+        </div>
+        <p class="text-[10px] text-muted leading-relaxed px-1">
+          By creating an account, you agree to our <a href="#"
+            class="underline">Terms of Service</a> and <a href="#"
+            class="underline">Privacy Policy</a>.
+        </p><button type="button" onclick="location.href='Verify__mobile.html'"
+          class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg mt-4">
+          Sign Up
+        </button>
+      </form>
+      <p class="mt-10 text-center text-sm text-muted">
+        Already have an account? <a href="Login__mobile.html"
+          class="text-ink font-bold border-b border-ink">Log in</a></p>
+    </div>
+  </body>
+
+</html>