pqc-mockup/index.html at main · cryptpad/pqc-mockup · 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
<!--
SPDX-FileCopyrightText: 2025 XWiki CryptPad Team <contact@cryptpad.org> and Iulian-Tudor Scutaru

SPDX-License-Identifier: AGPL-3.0-or-later
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CryptPad Post-Quantum Mockup</title>
    <link rel="stylesheet" href="styles/styles.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/@noble/post-quantum/ml-kem/+esm"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@noble/post-quantum/ml-dsa/+esm"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tweetnacl/1.0.3/nacl-fast.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tweetnacl-util@0.15.1/nacl-util.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
</head>
<body>
<header>
    <h1>CryptPad Post-Quantum Cryptography Simulation</h1>
    <p class="description">This simulation demonstrates ML-KEM-1024 encryption/decryption and ML-DSA-87 digital signatures with multiple users.</p>
</header>

<main>
    <section id="parameters" class="parameters-container">
        <div class="parameters-title">Simulation Parameters</div>
        <form id="simulation-form">
            <div class="parameter-grid">
                <div class="parameter-item">
                    <label for="numUsers">Number of Users:</label>
                    <input type="number" id="numUsers" min="1" max="500" value="30" required>
                    <span class="input-hint">Min: 1, Max: 500</span>
                </div>
                <div class="parameter-item">
                    <label for="numDocuments">Number of Documents:</label>
                    <input type="number" id="numDocuments" min="1" max="500" value="10" required>
                    <span class="input-hint">Min: 1, Max: 500</span>
                </div>
                <div class="parameter-item">
                    <label for="maxEditsPerUser">Max Edits Per User:</label>
                    <input type="number" id="maxEditsPerUser" min="1" max="50000" value="1000" required>
                    <span class="input-hint">Min: 1, Max: 50000</span>
                </div>
                <div class="parameter-item">
                    <label for="logFrequency">Log Frequency:</label>
                    <input type="number" id="logFrequency" min="100" max="10000" value="1000" required>
                    <span class="input-hint">Min: 100, Max: 10000</span>
                </div>
            </div>

            <div class="parameter-checkbox">
                <input type="checkbox" id="useDistribution" aria-describedby="distribution-desc">
                <label for="useDistribution">Use statistical distributions</label>
                <p id="distribution-desc" class="checkbox-description">
                    (uniform for users 1-50000, logarithmic for documents)
                </p>
            </div>

            <div class="parameter-item">
                <label for="cryptoScheme">Cryptography Scheme:</label>
                <select id="cryptoScheme" name="cryptoScheme">
                    <option value="pqc" selected>Post-Quantum (ML-KEM/ML-DSA)</option>
                    <option value="nacl">Classic (NaCl)</option>
                    <option value="elgamal">ElGamal (ECDH+AES-GCM)</option>
                </select>
            </div>

            <div class="pqc-options" id="pqc-options">
                <div class="parameter-item">
                    <label for="kemScheme">KEM Scheme:</label>
                    <select id="kemScheme" name="kemScheme">
                        <option value="ml-kem-1024" selected>ML-KEM-1024</option>
                        <!-- Add more KEM schemes in the future -->
                    </select>
                </div>

                <div class="parameter-item">
                    <label for="signatureScheme">Signature Scheme:</label>
                    <select id="signatureScheme" name="signatureScheme">
                        <option value="ml-dsa-87" selected>ML-DSA-87</option>
                        <!-- Add more signature schemes in the future -->
                    </select>
                </div>
            </div>

            <div class="parameter-item">
                <label for="encryptorType">Encryptor Type:</label>
                <select id="encryptorType" name="encryptorType">
                    <option value="mailbox" selected>Mailbox (1:1 Encryption)</option>
                    <option value="team">Team (Document Collaboration)</option>
                </select>
                <span class="input-hint">Mailbox for chat, Team for document editing</span>
            </div>

            <div class="button-group">
                <button type="submit" id="startButton" class="primary-button">Start Simulation</button>
                <button type="button" id="resetButton" class="secondary-button" disabled>Reset Results</button>
            </div>
        </form>
    </section>

    <section id="output">
        <div class="output-header">
            <h2>Simulation Output</h2>
            <div class="status-indicator" id="status-indicator">Ready</div>
        </div>

        <div id="simulation-log" class="simulation-log" aria-live="polite"></div>

        <div id="results" class="results-container"></div>
    </section>
</main>

<footer class="footer">
    <p>Using <a href="https://github.com/paulmillr/noble-post-quantum" target="_blank">@noble/post-quantum</a> libraries for post-quantum cryptography</p>
</footer>

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