1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / devscfvi / AblePro / pages /
Filename : register-v1.html
back
<!doctype html>
<html lang="en">
<head>
  <title>Create Account — TradeJournal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" href="../assets/images/favicon.svg" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../assets/fonts/tabler-icons.min.css">
  <link rel="stylesheet" href="../assets/css/style.css" id="main-style-link">
  <link rel="stylesheet" href="../assets/css/style-preset.css">

  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ink:        #0a0f1a;
      --accent:     #4680FF;
      --accent-glow:rgba(70,128,255,.25);
      --success:    #10b981;
      --danger:     #ef4444;
      --text-dim:   rgba(255,255,255,.45);
      --text-muted: rgba(255,255,255,.65);
      --text-bright:#fff;
      --mono:       'JetBrains Mono', monospace;
    }

    html, body { height: 100%; font-family: 'Sora', sans-serif; }

    .page-split {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      min-height: 100vh;
    }
    @media (max-width: 960px) {
      .page-split { grid-template-columns: 1fr; }
      .split-left { display: none !important; }
    }

    /* ══ LEFT ════════════════════════════════════════════ */
    .split-left {
      background: var(--ink);
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      justify-content: center; padding: 3rem;
    }
    .split-left::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 10% 30%, rgba(70,128,255,.2), transparent 60%),
        radial-gradient(ellipse 50% 60% at 90% 70%, rgba(16,185,129,.1), transparent 60%);
    }
    .split-left::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .left-inner { position: relative; z-index: 2; max-width: 380px; }

    .brand {
      display: flex; align-items: center; gap: .6rem;
      text-decoration: none; margin-bottom: 3rem;
    }
    .brand-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--accent); display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 20px var(--accent-glow);
    }
    .brand-icon i { color: #fff; font-size: 1.1rem; }
    .brand-name { font-size: 1.1rem; font-weight: 700; color: var(--text-bright); }

    .left-headline {
      font-size: clamp(1.6rem, 2.2vw, 2.1rem);
      font-weight: 800; line-height: 1.25;
      color: var(--text-bright); letter-spacing: -.03em; margin-bottom: .75rem;
    }
    .left-headline em {
      font-style: normal;
      background: linear-gradient(90deg, #34d399, #60a5fa);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .left-sub { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.7; margin-bottom: 2rem; }

    /* Checklist */
    .check-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2.5rem; }
    .check-list li {
      display: flex; align-items: center; gap: .75rem;
      color: rgba(255,255,255,.75); font-size: .83rem;
    }
    .check-list li::before {
      content: '';
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      background: rgba(16,185,129,.2); border: 1px solid rgba(16,185,129,.35);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
    }

    /* Social proof avatars */
    .social-proof {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px; padding: 1rem 1.25rem;
      display: flex; align-items: center; gap: 1rem;
    }
    .avatar-stack { display: flex; }
    .avatar-stack .av {
      width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid #0a0f1a; font-size: .7rem;
      font-weight: 700; display: flex; align-items: center; justify-content: center;
    }
    .avatar-stack .av:not(:first-child) { margin-left: -8px; }
    .social-text { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.5; }
    .social-text strong { color: rgba(255,255,255,.8); display: block; margin-bottom: .1rem; }

    /* ══ RIGHT ═══════════════════════════════════════════ */
    .split-right {
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      padding: 2rem; overflow-y: auto;
    }

    .form-card {
      width: 100%; max-width: 460px; padding: .5rem 0;
      animation: fadeUp .4s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .mobile-brand {
      display: none; align-items: center; gap: .6rem;
      text-decoration: none; margin-bottom: 2rem;
    }
    @media (max-width: 960px) { .mobile-brand { display: flex; } }
    .mobile-brand-icon {
      width: 30px; height: 30px; border-radius: 8px;
      background: var(--accent); display: flex; align-items: center; justify-content: center;
    }
    .mobile-brand-icon i { color: #fff; font-size: .9rem; }
    .mobile-brand-name { font-size: 1rem; font-weight: 700; color: var(--ink); }

    .form-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-bottom: .3rem; }
    .form-sub   { color: #64748b; font-size: .85rem; margin-bottom: 1.75rem; }

    /* Trial badge */
    .trial-badge {
      display: inline-flex; align-items: center; gap: .45rem;
      background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25);
      color: #059669; border-radius: 9999px;
      font-size: .75rem; font-weight: 600; padding: .3rem .85rem;
      margin-bottom: 1.75rem;
    }

    /* Alerts */
    .form-alert {
      display: none; border-radius: 10px; padding: .65rem 1rem;
      font-size: .82rem; margin-bottom: 1.25rem;
      align-items: center; gap: .5rem;
    }
    .form-alert.error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
    .form-alert.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    .form-alert.show    { display: flex; }

    /* Fields */
    .field { margin-bottom: 1rem; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
    .field-label {
      font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .4rem; display: block;
    }
    .field-input {
      width: 100%; padding: .7rem 1rem;
      background: #fff; border: 1.5px solid #e2e8f0;
      border-radius: 10px; font-family: 'Sora', sans-serif;
      font-size: .875rem; color: var(--ink);
      transition: border-color .2s, box-shadow .2s; outline: none;
    }
    .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(70,128,255,.12); }
    .field-input.has-icon { padding-right: 2.75rem; }

    .input-wrap { position: relative; }
    .input-icon-btn {
      position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: #94a3b8; padding: .25rem; border-radius: 4px; transition: color .2s;
    }
    .input-icon-btn:hover { color: var(--accent); }

    /* Password strength */
    .strength-track {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 4px;
      margin-top: .45rem;
    }
    .strength-seg {
      height: 3px; border-radius: 2px;
      background: #e2e8f0; transition: background .3s;
    }
    .strength-seg.s1 { background: #ef4444; }
    .strength-seg.s2 { background: #f59e0b; }
    .strength-seg.s3 { background: #3b82f6; }
    .strength-seg.s4 { background: #10b981; }

    /* Mode picker */
    .mode-label { font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .55rem; display: block; }
    .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
    .mode-card {
      border: 1.5px solid #e2e8f0; border-radius: 12px; padding: .85rem 1rem;
      cursor: pointer; transition: border-color .2s, background .2s;
      display: flex; align-items: center; gap: .75rem; background: #fff;
    }
    .mode-card:hover { border-color: #cbd5e1; }
    .mode-card.active { border-color: var(--accent); background: rgba(70,128,255,.04); }
    .mode-card .mode-emoji { font-size: 1.3rem; }
    .mode-card .mode-name { font-size: .83rem; font-weight: 600; color: var(--ink); display: block; }
    .mode-card .mode-desc { font-size: .72rem; color: #94a3b8; display: block; }

    /* Terms */
    .terms-row {
      display: flex; align-items: flex-start; gap: .65rem;
      margin-bottom: 1.5rem;
    }
    .terms-row input[type=checkbox] {
      width: 16px; height: 16px; margin-top: 2px;
      accent-color: var(--accent); flex-shrink: 0; cursor: pointer;
    }
    .terms-row label { font-size: .79rem; color: #64748b; cursor: pointer; line-height: 1.5; }
    .terms-row label a { color: var(--accent); text-decoration: none; }
    .terms-row label a:hover { text-decoration: underline; }

    /* Submit */
    .btn-submit {
      width: 100%; padding: .82rem;
      background: var(--accent); color: #fff;
      font-family: 'Sora', sans-serif; font-size: .9rem; font-weight: 600;
      border: none; border-radius: 10px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      box-shadow: 0 4px 14px rgba(70,128,255,.35);
      transition: background .2s, box-shadow .2s, transform .1s;
    }
    .btn-submit:hover   { background: #3570ef; box-shadow: 0 6px 20px rgba(70,128,255,.45); }
    .btn-submit:active  { transform: scale(.98); }
    .btn-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

    .spinner {
      width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
      border-top-color: #fff; border-radius: 50%;
      animation: spin .7s linear infinite; display: none;
    }
    .btn-submit.loading .spinner { display: block; }
    .btn-submit.loading .btn-label { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .form-footer {
      text-align: center; margin-top: 1.25rem;
      font-size: .82rem; color: #64748b;
    }
    .form-footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
    .form-footer a:hover { text-decoration: underline; }
  </style>
</head>
<body data-pc-preset="preset-1" data-pc-theme="light">
<div class="page-loader"><div class="bar"></div></div>

<div class="page-split">

  <!-- ══ LEFT ══════════════════════════════════════════════ -->
  <div class="split-left">
    <div class="left-inner">

      <a href="../landing.html" class="brand">
        <div class="brand-icon"><i class="ti ti-chart-line"></i></div>
        <span class="brand-name">TradeJournal</span>
      </a>

      <h1 class="left-headline">Your 7-day free<br>trial starts <em>today.</em></h1>
      <p class="left-sub">Full access to every feature from day one. No credit card, no commitment.</p>

      <ul class="check-list">
        <li>Unlimited broker imports — IBKR, Binance, Coinbase</li>
        <li>Complete trade history & analytics</li>
        <li>Equity curve, P&L calendar & profit factor</li>
        <li>Psychology & emotion tracking per trade</li>
        <li>Screenshot uploads, journal & goal tracking</li>
        <li>Cancel anytime, no questions asked</li>
      </ul>

      <div class="social-proof">
        <div class="avatar-stack">
          <div class="av" style="background:linear-gradient(135deg,#4680FF,#818cf8);color:#fff">MK</div>
          <div class="av" style="background:linear-gradient(135deg,#10b981,#34d399);color:#fff">JR</div>
          <div class="av" style="background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff">SA</div>
          <div class="av" style="background:rgba(255,255,255,.12);color:rgba(255,255,255,.6)">+</div>
        </div>
        <div class="social-text">
          <strong>Traders already improving</strong>
          Sign up and join them today
        </div>
      </div>

    </div>
  </div>

  <!-- ══ RIGHT ═════════════════════════════════════════════ -->
  <div class="split-right">
    <div class="form-card">

      <a href="../landing.html" class="mobile-brand">
        <div class="mobile-brand-icon"><i class="ti ti-chart-line"></i></div>
        <span class="mobile-brand-name">TradeJournal</span>
      </a>

      <div class="trial-badge">
        <i class="ti ti-gift"></i> 7-day free trial — no card needed
      </div>

      <h2 class="form-title">Create your account</h2>
      <p class="form-sub">Get full access instantly. $10/month after trial.</p>

      <div class="form-alert error"  id="reg-error"><i class="ti ti-alert-circle"></i><span id="reg-error-text"></span></div>
      <div class="form-alert success" id="reg-success"><i class="ti ti-circle-check"></i><span id="reg-success-text"></span></div>

      <form id="register-form" onsubmit="handleRegister(event)" novalidate>

        <!-- Name row -->
        <div class="field-row">
          <div>
            <label class="field-label" for="reg-first">First Name</label>
            <input type="text" id="reg-first" class="field-input" placeholder="John" required>
          </div>
          <div>
            <label class="field-label" for="reg-last">Last Name</label>
            <input type="text" id="reg-last" class="field-input" placeholder="Smith" required>
          </div>
        </div>

        <div class="field">
          <label class="field-label" for="reg-email">Email address</label>
          <input type="email" id="reg-email" class="field-input"
            placeholder="you@example.com" required autocomplete="email">
        </div>

        <div class="field">
          <label class="field-label" for="reg-password">Password</label>
          <div class="input-wrap">
            <input type="password" id="reg-password" class="field-input has-icon"
              placeholder="Min. 8 characters" required
              oninput="updateStrength(this.value)">
            <button type="button" class="input-icon-btn" onclick="togglePass('reg-password',this)" tabindex="-1">
              <i class="ti ti-eye"></i>
            </button>
          </div>
          <div class="strength-track">
            <div class="strength-seg" id="ss1"></div>
            <div class="strength-seg" id="ss2"></div>
            <div class="strength-seg" id="ss3"></div>
            <div class="strength-seg" id="ss4"></div>
          </div>
        </div>

        <div class="field">
          <label class="field-label" for="reg-confirm">Confirm Password</label>
          <div class="input-wrap">
            <input type="password" id="reg-confirm" class="field-input has-icon"
              placeholder="Repeat your password" required>
            <button type="button" class="input-icon-btn" onclick="togglePass('reg-confirm',this)" tabindex="-1">
              <i class="ti ti-eye"></i>
            </button>
          </div>
        </div>

        <!-- Trade mode -->
        <span class="mode-label">I primarily trade</span>
        <div class="mode-grid">
          <div class="mode-card active" id="mode-crypto" onclick="setMode('crypto')">
            <span class="mode-emoji">🪙</span>
            <div>
              <span class="mode-name">Crypto</span>
              <span class="mode-desc">Bitcoin, ETH, altcoins</span>
            </div>
          </div>
          <div class="mode-card" id="mode-stocks" onclick="setMode('stocks')">
            <span class="mode-emoji">📈</span>
            <div>
              <span class="mode-name">Stocks</span>
              <span class="mode-desc">Equities, options, forex</span>
            </div>
          </div>
        </div>
        <input type="hidden" id="reg-mode" value="crypto">

        <!-- Terms -->
        <div class="terms-row">
          <input type="checkbox" id="reg-terms" required>
          <label for="reg-terms">
            I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
            I understand I'll be charged $10/month after my 7-day free trial.
          </label>
        </div>

        <button type="submit" class="btn-submit" id="reg-btn">
          <div class="spinner"></div>
          <span class="btn-label">Create Account &amp; Start Free Trial</span>
        </button>

      </form>

      <p class="form-footer">
        Already have an account? <a href="login-v1.html">Log in</a>
      </p>

    </div>
  </div>

</div>

<script src="../assets/js/plugins/popper.min.js"></script>
<script src="../assets/js/plugins/bootstrap.min.js"></script>
<script src="../assets/js/fonts/custom-font.js"></script>
<script src="../assets/js/pcoded.js"></script>
<script>
layout_change('light');
preset_change('preset-1');

function togglePass(id, btn) {
  const inp = document.getElementById(id);
  const isText = inp.type === 'text';
  inp.type = isText ? 'password' : 'text';
  btn.querySelector('i').className = isText ? 'ti ti-eye' : 'ti ti-eye-off';
}

function setMode(mode) {
  document.getElementById('mode-crypto').classList.toggle('active', mode === 'crypto');
  document.getElementById('mode-stocks').classList.toggle('active', mode === 'stocks');
  document.getElementById('reg-mode').value = mode;
}

function updateStrength(val) {
  const score = [val.length >= 8, /[A-Z]/.test(val), /[0-9]/.test(val), /[^A-Za-z0-9]/.test(val)].filter(Boolean).length;
  const cls = ['','s1','s2','s3','s4'];
  [1,2,3,4].forEach(i => {
    const el = document.getElementById('ss'+i);
    el.className = 'strength-seg' + (i <= score ? ' '+cls[score] : '');
  });
}

async function handleRegister(e) {
  e.preventDefault();
  const btn     = document.getElementById('reg-btn');
  const errEl   = document.getElementById('reg-error');
  const errTxt  = document.getElementById('reg-error-text');
  const succEl  = document.getElementById('reg-success');
  const succTxt = document.getElementById('reg-success-text');
  const pass    = document.getElementById('reg-password').value;
  const confirm = document.getElementById('reg-confirm').value;

  errEl.classList.remove('show');
  succEl.classList.remove('show');

  if (pass !== confirm) {
    errTxt.textContent = 'Passwords do not match.';
    errEl.classList.add('show'); return;
  }
  if (pass.length < 8) {
    errTxt.textContent = 'Password must be at least 8 characters.';
    errEl.classList.add('show'); return;
  }
  if (!document.getElementById('reg-terms').checked) {
    errTxt.textContent = 'Please accept the Terms of Service to continue.';
    errEl.classList.add('show'); return;
  }

  btn.disabled = true;
  btn.classList.add('loading');

  try {
    const res  = await fetch('../api.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        action:    'register',
        firstName: document.getElementById('reg-first').value.trim(),
        lastName:  document.getElementById('reg-last').value.trim(),
        email:     document.getElementById('reg-email').value.trim(),
        password:  pass,
        tradeMode: document.getElementById('reg-mode').value,
      })
    });
    const data = await res.json();

    if (data.success) {
      succTxt.textContent = 'Account created! Taking you to your dashboard…';
      succEl.classList.add('show');
      setTimeout(() => { window.location.href = '../index.html'; }, 1200);
    } else {
      errTxt.textContent = data.error || 'Registration failed. Please try again.';
      errEl.classList.add('show');
      btn.disabled = false;
      btn.classList.remove('loading');
    }
  } catch {
    errTxt.textContent = 'Connection error — please try again.';
    errEl.classList.add('show');
    btn.disabled = false;
    btn.classList.remove('loading');
  }
}
</script>
</body>
</html>