hashpay-pitch/index.html at main · NECOKIZZ/hashpay-pitch · 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
153
154
155
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HashPay x ARC Names - Payment Link Request</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="shell">
      <section class="intro" aria-labelledby="page-title">
        <div class="brand-row">
          <span class="brand-mark" aria-hidden="true">H</span>
          <span class="brand-name">HashPay x ARC Names</span>
        </div>
        <p class="eyebrow">Pitch prototype</p>
        <h1 id="page-title">Request payment links with .arc names first.</h1>
        <p class="lede">
          Replace raw hex recipients with a verified ARC name, then generate a HashPay checkout URL
          using HashPay's existing payment parameters.
        </p>
        <div class="proof-grid" aria-label="Product value">
          <div>
            <strong>Name-first</strong>
            <span>alice.arc, merchant-usdc.arc, agent-agent.arc</span>
          </div>
          <div>
            <strong>Trust layer</strong>
            <span>Show resolved wallet before payment</span>
          </div>
          <div>
            <strong>HashPay native</strong>
            <span>Hosted checkout, QR, links, and dashboards</span>
          </div>
        </div>
      </section>

      <section class="request-panel" aria-labelledby="request-title">
        <div class="panel-header">
          <div>
            <p class="eyebrow">Create request</p>
            <h2 id="request-title">Name-based PayLink</h2>
          </div>
          <span class="network-pill">Arc Testnet</span>
        </div>

        <form id="request-form" novalidate>
          <div class="field">
            <label for="recipient-name">Recipient .arc name <span aria-hidden="true">*</span></label>
            <input
              id="recipient-name"
              name="recipientName"
              type="text"
              inputmode="text"
              autocomplete="off"
              spellcheck="false"
              placeholder="bob256.arc"
              aria-describedby="recipient-help recipient-error"
              required
            />
            <p id="recipient-help" class="hint">Resolved live through ARC Name Service before the HashPay link is generated.</p>
            <p id="recipient-error" class="error" role="status"></p>
          </div>

          <div class="field-row">
            <div class="field">
              <label for="amount">Amount <span aria-hidden="true">*</span></label>
              <div class="amount-wrap">
                <input
                  id="amount"
                  name="amount"
                  type="text"
                  inputmode="decimal"
                  autocomplete="off"
                  placeholder="125.00"
                  aria-describedby="amount-error"
                  required
                />
                <span>USDC</span>
              </div>
              <p id="amount-error" class="error" role="status"></p>
            </div>

            <div class="field">
              <label for="expires">Expires</label>
              <select id="expires" name="expires" aria-label="Payment link expiry">
                <option value="24h">24 hours</option>
                <option value="7d" selected>7 days</option>
                <option value="30d">30 days</option>
                <option value="never">Never</option>
              </select>
            </div>
          </div>

          <div class="field">
            <label for="memo">Memo</label>
            <input
              id="memo"
              name="memo"
              type="text"
              autocomplete="off"
              maxlength="80"
              placeholder="Invoice #042"
              aria-describedby="memo-help"
            />
            <p id="memo-help" class="hint">Shown on the HashPay checkout and merchant dashboard.</p>
          </div>

          <button id="generate-button" class="primary-button" type="submit">
            Resolve name and create request
          </button>
        </form>

        <div id="status-card" class="status-card empty" aria-live="polite">
          <div class="status-icon" aria-hidden="true">.</div>
          <div>
            <strong>Live resolver ready</strong>
            <p>Enter a registered `.arc` recipient. Unregistered names will not generate links.</p>
          </div>
        </div>
      </section>

      <section id="result-panel" class="result-panel" aria-labelledby="result-title" hidden>
        <div class="panel-header">
          <div>
            <p class="eyebrow">Generated PayLink</p>
            <h2 id="result-title">Ready to send</h2>
          </div>
          <span id="verified-pill" class="verified-pill">ANS verified</span>
        </div>

        <div class="resolved-card">
          <div>
            <span class="label">Recipient</span>
            <strong id="resolved-name">payflow-usdc.arc</strong>
          </div>
          <div>
            <span class="label">Resolved wallet</span>
            <code id="resolved-address">0x0000...0000</code>
          </div>
        </div>

        <label class="link-label" for="paylink-output">HashPay request URL</label>
        <textarea id="paylink-output" readonly rows="4"></textarea>

        <div class="action-row">
          <button id="copy-button" class="secondary-button" type="button">Copy link</button>
          <a id="open-link" class="primary-link" href="#" target="_blank" rel="noreferrer">Open checkout</a>
        </div>
      </section>
    </main>

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