CryptoPixels/index.html at main · exlier/CryptoPixels · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Million Dollar Homepage</title>
    <!-- Bug #48: Added Content Security Policy -->
    <meta http-equiv="Content-Security-Policy"
          content="default-src 'self';
                   script-src 'self' https://cdn.jsdelivr.net;
                   style-src 'self' 'unsafe-inline';
                   img-src 'self' https: data:;
                   connect-src 'self' https://*.supabase.co https://mainnet.base.org;
                   frame-ancestors 'none';">
    <link rel="stylesheet" href="./src/styles.css">
</head>
<body>
    <header>
        <h1>Crypto Million Dollar Homepage</h1>
        <div class="stats">Base Price: 0.001 ETH per Pixel</div>
    </header>

    <div class="trust-card">
        <h2>🛡️ Why Trust Us &amp; How to Buy</h2>
        <div class="trust-columns">
            <div class="trust-column">
                <h4>Trust</h4>
                <p>Our system is 100% decentralized, non-custodial, and zero-KYC. We do not use third-party payment gateways or processors — transactions go wallet-to-wallet on-chain via the Base network. If a block isn't assigned, our security layers will block database insertion to prevent accidental claims.</p>
            </div>
            <div class="trust-column">
                <h4>How to Buy</h4>
                <ol>
                    <li>Click and drag or tap multiple pixels on the grid to highlight your custom ad size.</li>
                    <li>Input your image URL and target redirect link.</li>
                    <li>Confirm the automatically calculated total invoice inside MetaMask.</li>
                </ol>
            </div>
        </div>
    </div>

    <div id="canvas-container">
        <!-- Bug #29: Added role and description for screen readers -->
        <canvas id="gridCanvas" width="1000" height="1000"
                role="img"
                aria-label="Pixel purchase canvas — drag to select pixels for purchase, double-click a pixel to visit its link">
        </canvas>
        <!-- Bug #29: Accessible live region for purchase events -->
        <div id="a11y-announce" aria-live="polite" aria-atomic="true"
             style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;"></div>
    </div>

    <div class="overlay" id="overlay"></div>

    <div class="modal" id="buyModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
        <h3 id="modalTitle">Buy Pixel Block</h3>
        <p id="blockCoords">Selected Pixels: 0</p>
        <p class="selection-summary">Selected: <span id="pixelCount">0</span> pixels | Total: <strong id="totalPrice">0 ETH</strong></p>
        <p style="margin-top:6px; color:#94a3b8;">Price per pixel: <strong>0.001 ETH</strong></p>
        <!-- Bug #45: Fixed placeholder to not say "10x10" since multi-pixel blocks are supported -->
        <input type="url" id="imgUrl" placeholder="Image URL (HTTPS, PNG/JPG/GIF/WEBP/SVG)" autocomplete="off" aria-label="Image URL">
        <input type="url" id="linkUrl" placeholder="Your Website Link (https://...)" autocomplete="off" aria-label="Target website URL">
        <button id="payBtn" type="button">Pay with Crypto Wallet</button>
    </div>

    <div class="toast hidden" id="toast" role="status" aria-live="polite"></div>

    <!--
        Bug #22: Added Subresource Integrity (SRI) hashes to prevent CDN supply-chain attacks.
        These hashes pin the exact bytes of each script. If the CDN serves tampered code the
        browser will refuse to execute it and log a console error.
    -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.35.0/dist/umd/supabase.js"
            crossorigin="anonymous"
            integrity="sha256-tFmFJdpxXGBnbE0OL0MHMxJMIarRNxGmgUKjHzN0YxY="></script>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"
            crossorigin="anonymous"
            integrity="sha256-stp/uYMsXMiU2A1tHnmRTD2JimTxVJiQ04MZFqsv2FI="></script>
    <script type="module" src="./src/app.js"></script>
</body>
</html>