jsxSUI/index.html at main · KitBaroness/jsxSUI · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX Template Access Portal</title>
    <link rel="icon" type="image/png" sizes="32x32" href="./public/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./public/assets/images/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./public/assets/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="./public/assets/images/favicon.png">
    <link rel="stylesheet" href="./src/styles/bem-starter-base.css" />
    <link rel="stylesheet" href="./src/styles/theme-default.css" />
    <link rel="stylesheet" href="./src/styles/bem-starter.css" />
    <script src="./src/core/runtime/integrations/console-filter.js"></script>
  </head>

  <body class="c-doc-layout">
    <header class="c-doc-header">
      <div class="c-doc-header__inner">
        <a class="c-doc-header__logo" href="./index.html" aria-label="JSX Template home">
          <span class="c-doc-header__title u-mb-0">JSX Template</span>
        </a>
        <div class="c-doc-header__brand">
          <p class="c-doc-header__subtitle u-mt-0">FlexNet JSX • Sui • Workers</p>
        </div>
        <nav class="c-doc-header__nav" aria-label="Primary">
          <a class="c-doc-header__link" href="./index.html">Home</a>
          <a class="c-doc-header__link" href="#auth">Auth</a>
          <a class="c-doc-header__link" href="#status">Status</a>
          <a class="c-doc-header__link" href="#why">Why FlexNet</a>
        </nav>
        <div class="container-trigger">
          <button id="jsx-connect" class="c-button connect-btn">Connect</button>
        </div>
      </div>
    </header>

    <main class="c-doc-layout__main">
      <aside class="c-sidebar">
        <nav class="c-sidebar__nav">
          <h4>JSX Template Docs</h4>
          <a href="#auth">Create / Login</a>
          <a href="#status">Token Container Status</a>
          <a href="#why">Why FlexNet</a>
        </nav>
      </aside>

      <section class="c-doc-layout__content">
        <div id="content-placeholder" class="c-doc-layout__content-inner">
          <div id="page-content">
            <section class="c-hero" id="auth">
              <p class="c-hero__eyebrow">FlexNet JSX · Cloudflare Workers · Sui</p>
              <h1 class="c-hero__title">JSX Template Access Portal</h1>
              <p class="c-hero__subtitle" style="font-size: clamp(16px, 1.1vw + 14px, 22px); line-height: 1.65;">
                Stand up a lightweight FlexNet experience with passphrase-first account creation, Sui SDK key handling, and token container gating that runs anywhere Cloudflare Workers run.
              </p>
              <div class="c-hero__actions" style="gap: 0.75rem; flex-wrap: wrap;">
                <div class="container-trigger">
                  <button id="jsx-connect-hero" class="c-button connect-btn">Start / Connect</button>
                </div>
                <button id="jsx-create" class="c-button c-button--ghost">Generate New Passphrase</button>
                <button id="jsx-restore" class="c-button c-button--ghost">Restore with Passphrase</button>
              </div>
            </section>

            <section id="status" style="margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
              <article class="c-card">
                <div class="c-card__body" style="padding: 1.5rem;">
                  <h3 style="margin-top: 0;">Login + Account Creation</h3>
                  <p style="color: var(--color-fg-muted); line-height: 1.6;">
                    Uses the existing <code>window.signIn()</code> flow from the main app. Users generate a 12-word passphrase (bundled <code>@scure/bip39</code>), derive an Ed25519 key with the Sui SDK bundle, then lock in username/password/PIN before syncing to KV via Workers.
                  </p>
                  <ul style="margin: 0; padding-left: 1.25rem; color: var(--color-fg-muted); line-height: 1.5;">
                    <li>Bundles run without Node; pure ES modules only.</li>
                    <li>Local storage keypair cache with KV backup hooks.</li>
                    <li>Token container selector + login gate reused from FlexNet runtime.</li>
                  </ul>
                </div>
              </article>

              <article class="c-card">
                <div class="c-card__body" style="padding: 1.5rem;">
                  <h3 style="margin-top: 0;">Onboarding Checklist</h3>
                  <ol style="margin: 0; padding-left: 1.25rem; color: var(--color-fg-muted); line-height: 1.6;">
                    <li>Tap <strong>Start / Connect</strong> to open the token container modal.</li>
                    <li>Save the generated 12-word passphrase (mandatory).</li>
                    <li>Confirm passphrase → set username/password/PIN.</li>
                    <li>Connect a token container or stay with the local ecosystem container.</li>
                  </ol>
                  <p style="margin-top: 0.75rem; color: var(--color-fg-muted);">Everything runs in the browser/Worker edge; no backend Node runtime required.</p>
                </div>
              </article>

              <article class="c-card">
                <div class="c-card__body" style="padding: 1.5rem;">
                  <h3 style="margin-top: 0;">Status</h3>
                  <div style="display: grid; gap: 0.35rem; color: var(--color-fg-muted); line-height: 1.5;">
                    <div><strong>Token Container:</strong> <span id="jsx-container-status">Checking…</span></div>
                    <div><strong>Account Number:</strong> <span id="jsx-container-address" style="font-family: var(--font-mono, monospace);">—</span></div>
                  </div>
                  <p style="margin-top: 0.75rem; color: var(--color-fg-muted);">
                    This view is driven by token container state so it stays in sync across tabs.
                  </p>
                </div>
              </article>
            </section>

            <section id="why" style="margin-top: 2.5rem;">
              <div class="c-card">
                <div class="c-card__header">
                  <h2 style="margin: 0;">Why FlexNet Here?</h2>
                </div>
                <div class="c-card__body" style="padding: 1.5rem;">
                  <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));">
                    <div>
                      <h4 style="margin: 0 0 0.35rem 0;">Cloudflare-native</h4>
                      <p style="margin: 0; color: var(--color-fg-muted); line-height: 1.6;">No Node APIs required. All crypto and token container flows rely on bundled ESM libraries and the Workers runtime.</p>
                    </div>
                    <div>
                      <h4 style="margin: 0 0 0.35rem 0;">Sui SDK Bundled</h4>
                      <p style="margin: 0; color: var(--color-fg-muted); line-height: 1.6;">Uses the prebuilt <code>/public/vendor/sui/index.js</code> bundle for Ed25519 keys, keeping imports local and deterministic.</p>
                    </div>
                    <div>
                      <h4 style="margin: 0 0 0.35rem 0;">FlexNet Layout</h4>
                      <p style="margin: 0; color: var(--color-fg-muted); line-height: 1.6;">BEM starter + runtime loader keep CSP-friendly event wiring and the login gate consistent with the main DegenVets surface.</p>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
    </main>

    <footer class="c-doc-footer">
      <div class="c-doc-footer__grid">
        <div class="c-doc-footer__about">
          <h4>JSX Template</h4>
          <p style="margin:0; color:var(--color-fg-muted);">Lightweight FlexNet auth portal using Cloudflare Workers + Sui.</p>
        </div>
        <div></div>
        <div></div>
      </div>
      <div class="c-doc-footer__bottom">
        <p>© 2025 FlexNet Framework — Built with pure functional JavaScript</p>
      </div>
    </footer>

    <script type="module" src="./src/app.js"></script>
  </body>
</html>