1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="robots" content="noindex, nofollow"> 7 <title>Create your ZeroBarrier account</title> 8 <link rel="stylesheet" href="/fonts/fonts.css"> 9 <style> 10 * { margin: 0; padding: 0; box-sizing: border-box; } 11 :root { 12 --bg: #FAFBFC; --surface: #FFFFFF; --text: #1A1D24; 13 --text-secondary: #4A5568; --text-muted: #8896AB; 14 --accent: #00A87D; --accent-light: #E6F9F4; --accent-dark: #008C68; 15 --border: #E8ECF2; --error: #C0392B; --error-light: #FDECEA; 16 } 17 body { 18 font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; 19 background: var(--bg); color: var(--text); line-height: 1.6; 20 -webkit-font-smoothing: antialiased; min-height: 100vh; 21 display: flex; align-items: flex-start; justify-content: center; 22 padding: 56px 20px; 23 } 24 .wrap { width: 100%; max-width: 440px; } 25 .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; text-decoration: none; color: var(--text); } 26 .logo-mark { 27 width: 32px; height: 32px; background: var(--accent); border-radius: 8px; 28 display: flex; align-items: center; justify-content: center; 29 color: white; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 16px; 30 } 31 .logo-text { font-weight: 700; font-size: 18px; letter-spacing: -0.3px; } 32 .logo-text span { color: var(--accent); } 33 .card { 34 background: var(--surface); border: 1px solid var(--border); 35 border-radius: 14px; padding: 32px; 36 } 37 h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; } 38 .why { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; } 39 .field { margin-bottom: 18px; } 40 label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } 41 input[type="email"], input[type="tel"] { 42 width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; 43 color: var(--text); background: var(--surface); 44 border: 1px solid var(--border); border-radius: 10px; outline: none; 45 } 46 input[type="email"]:focus, input[type="tel"]:focus { border-color: var(--accent); } 47 input.invalid { border-color: var(--error); background: var(--error-light); } 48 .err { display: none; font-size: 13px; color: var(--error); margin-top: 6px; } 49 .err.show { display: block; } 50 .consent { 51 display: flex; gap: 12px; align-items: flex-start; 52 margin: 22px 0 14px; padding: 16px; background: var(--bg); 53 border: 1px solid var(--border); border-radius: 10px; 54 } 55 .consent input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } 56 .consent label { font-size: 13px; font-weight: 400; color: var(--text-secondary); margin: 0; line-height: 1.55; cursor: pointer; } 57 .fineprint { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-bottom: 22px; } 58 .fineprint a { color: var(--text-secondary); } 59 .cta { 60 width: 100%; padding: 14px 28px; background: var(--accent); color: white; 61 border: none; border-radius: 10px; font-size: 16px; font-weight: 600; 62 cursor: pointer; font-family: inherit; 63 } 64 .cta:hover:not(:disabled) { background: var(--accent-dark); } 65 .cta:disabled { opacity: 0.5; cursor: not-allowed; } 66 .form-err { 67 display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; 68 font-size: 14px; background: var(--error-light); color: var(--error); 69 } 70 .form-err.show { display: block; } 71 .signin-line { text-align: center; font-size: 14px; color: var(--text-muted); margin-top: 20px; } 72 .signin-line a { color: var(--accent); font-weight: 600; text-decoration: none; } 73 /* Success state â shown after submit, replaces the form in place. */ 74 .success { display: none; text-align: center; } 75 .success.show { display: block; } 76 .success .check { 77 width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; 78 background: var(--accent-light); color: var(--accent-dark); 79 display: flex; align-items: center; justify-content: center; font-size: 28px; 80 } 81 .success h1 { margin-bottom: 10px; } 82 .success p { font-size: 15px; color: var(--text-secondary); margin-bottom: 8px; } 83 .resend-row { margin-top: 22px; font-size: 14px; color: var(--text-muted); } 84 .resend-btn { 85 background: none; border: none; color: var(--accent); font-weight: 600; 86 font-size: 14px; font-family: inherit; cursor: pointer; padding: 0; 87 } 88 .resend-btn:disabled { color: var(--text-muted);
88 cursor: not-allowed; } 89 .resend-msg { display: block; margin-top: 8px; font-size: 13px; color: var(--text-secondary); min-height: 18px; } 90 </style> 91</head> 92<body> 93 <div class="wrap"> 94 <a href="/" class="brand"> 95 <div class="logo-mark">Z</div> 96 <div class="logo-text">Zero<span>Barrier</span> AI</div> 97 </a> 98 99 <div class="card" id="formCard"> 100 <h1>Create your account</h1> 101 <!-- COPY AWAITING SHARAT'S APPROVAL (R2.7.b §1): draft supporting sentence. 102 The old copy promised a verification text a non-consenting user will 103 never receive (consent is now optional). Do not ship to prod without 104 product-owner sign-off on this exact wording. --> 105 <p class="why">We ask for a mobile number so we can secure your account. Tick the box below if you'd also like to sign in by text â we'll only text you if you do.</p> 106 107 <form id="signupForm" novalidate> 108 <div class="field"> 109 <label for="email">Email address</label> 110 <input type="email" id="email" name="email" autocomplete="email" inputmode="email" placeholder="[email protected]"> 111 <span class="err" id="emailErr">Enter a valid email address.</span> 112 </div> 113 114 <div class="field"> 115 <label for="phone">Mobile number</label> 116 <input type="tel" id="phone" name="phone" autocomplete="tel" inputmode="tel" placeholder="+1 212 555 0142"> 117 <span class="err" id="phoneErr">Enter a valid US mobile number.</span> 118 </div> 119 120 <div class="consent"> 121 <input type="checkbox" id="consent" name="consent"> 122 <label for="consent">I agree to receive account verification and sign-in text messages (one-time passcodes) from ZeroBarrier AI at the number provided. You'll receive a message when you verify this number, and each time you choose to sign in by text.</label> 123 </div> 124 125 <p class="fineprint">Message and data rates may apply. Reply STOP to unsubscribe or HELP for help. See our <a href="/privacy.html">Privacy Policy</a> and <a href="/terms.html">Terms of Service</a>.</p> 126 127 <button type="submit" class="cta" id="continueBtn">Continue</button> 128 <div class="form-err" id="formErr"></div> 129 </form> 130 131 <p class="signin-line">Already have an account? <a href="/" id="signinLink">Sign in</a></p> 132 </div> 133 134 <div class="card success" id="successPanel"> 135 <div class="check">✓</div> 136 <h1>Check your email</h1> 137 <p>If that address can create an account, we've sent a confirmation link to it.</p> 138 <p>Tap the link in the email to finish setting up your account.</p> 139 <div class="resend-row"> 140 Didn't get the email? 141 <button type="button" class="resend-btn" id="resendBtn">Resend</button> 142 <span class="resend-msg" id="resendMsg"></span> 143 </div> 144 </div> 145 </div> 146 147 <!-- auth.js is side-effect-free (defines window.ZBAuth, no auto-init) so the 148 "Already have an account? Sign in" link can start the SAME Cognito PKCE 149 sign-in the homepage uses, in one click â rather than just linking home. --> 150
150<script src="/js/auth.js"></script>
150 151
151<script src="/js/signup.js"></script>
151 152</body> 153</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.