moneyai-site/demo.html at main · FocusMode-coder/moneyai-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>MONEY.AI – TikTok Integration Demo</title>
  <link rel="stylesheet" href="style.css">
  <meta name="description" content="MONEY.AI TikTok integration demo for app review.">
  <meta property="og:title" content="MONEY.AI Demo">
  <meta property="og:description" content="TikTok integration demo flow for verification.">
  <meta property="og:image" content="assets/logo.png">
  <meta name="theme-color" content="#0a0a0a">

  <!-- Estilos mínimos para el efecto del flujo (independiente de style.css) -->
  <style>
    .steps{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
    .step{background:#0f0f0f;border:1px solid #1b1b1b;border-radius:16px;padding:20px;flex:1 1 280px;min-height:180px;position:relative}
    .step h3{margin-top:0}
    .status{margin-top:10px;font-size:14px;color:#9aa0a6}
    .success{color:#22c55e}
    .step.ok{border-color:#214a2f;box-shadow:0 0 0 1px #214a2f inset}
    .btn-icon{display:inline-flex;align-items:center;gap:8px}
  </style>
</head>
<body>
<div class="container">
  <!-- NAV -->
  <div class="nav">
    <div style="display:flex;align-items:center;gap:12px">
      <img src="assets/logo.png" alt="MONEY.AI logo">
      <div class="meta">Financial Education × Artificial Intelligence</div>
    </div>
    <div>
      <a class="btn" href="index.html">Home</a>
      <a class="btn" style="margin-left:8px" href="demo.html">Demo</a>
      <a class="btn" style="margin-left:8px" href="terms.html">Terms</a>
      <a class="btn" style="margin-left:8px" href="privacy.html">Privacy</a>
    </div>
  </div>

  <!-- DEMO FLOW -->
  <section class="hero">
    <h1>TikTok Integration – Demo Flow</h1>
    <p class="meta">
      This page simulates the end-to-end user journey required for TikTok App Review.<br>
      <strong>Note:</strong> This is a non-production demo for verification. No real user data is collected or transmitted.
    </p>
  </section>

  <div class="steps">
    <!-- Step 1 -->
    <div class="step" id="step1">
      <h3>Step 1: Login with TikTok</h3>
      <p>Users authenticate via TikTok to create a secure session in Money.AI.</p>
      <button class="btn btn-icon" id="loginBtn">
        <span>🔑</span> <span>Login with TikTok</span>
      </button>
      <div class="status" id="status1">Waiting for user action…</div>
    </div>

    <!-- Step 2 -->
    <div class="step" id="step2">
      <h3>Step 2: Account Connected</h3>
      <p>Upon consent, Money.AI receives basic profile data to personalize content.</p>
      <div class="status" id="status2">Not connected. <span class="meta">Scopes: basic profile</span></div>
    </div>

    <!-- Step 3 -->
    <div class="step" id="step3">
      <h3>Step 3: Access Learning Content</h3>
      <p>Users access AI-powered lessons and summaries in Money.AI.</p>
      <div class="status" id="status3">Locked until login.</div>
    </div>
  </div>

  <div class="card" style="margin-top:20px">
    <h3>What reviewers will see</h3>
    <ul>
      <li>Working navigation to <a href="terms.html">Terms</a> and <a href="privacy.html">Privacy</a>.</li>
      <li>Simulated TikTok login → session creation → content unlock.</li>
      <li>Clear disclosure that this is a demo and no real data is sent.</li>
    </ul>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    © 2025 MONEY.AI • <span class="meta">Contact:
    <a href="mailto:support@moneyai.app">support@moneyai.app</a></span>
  </div>
</div>

<script>
  // Simulación simple del flujo de login
  const btn = document.getElementById('loginBtn');
  const step1 = document.getElementById('step1');
  const step2 = document.getElementById('step2');
  const step3 = document.getElementById('step3');
  const s1 = document.getElementById('status1');
  const s2 = document.getElementById('status2');
  const s3 = document.getElementById('status3');

  btn.addEventListener('click', () => {
    // Marca Step 1 como en progreso/completado
    step1.classList.add('ok');
    s1.textContent = 'Redirecting to TikTok… (simulated)';
    btn.disabled = true;

    // Después de 0.9s, “vuelve” con consentimiento
    setTimeout(() => {
      s1.textContent = 'User granted permission ✓';

      // Step 2: cuenta conectada
      step2.classList.add('ok');
      s2.innerHTML = '<span class="success">Connected as @demo_user</span>';

      // Luego de 0.8s, desbloquea contenido
      setTimeout(() => {
        step3.classList.add('ok');
        s3.innerHTML = '<span class="success">Content unlocked: AI-powered finance lessons available.</span>';
      }, 800);
    }, 900);
  });
</script>
</body>
</html>