2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Proofery Demo - Browser Example</title>
7 <style>
8 body {
9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10 max-width: 900px;
11 margin: 40px auto;
12 padding: 20px;
13 background-color: #f5f5f5;
14 }
15 h1 {
16 color: #333;
17 }
18 .container {
19 background: white;
20 padding: 30px;
21 border-radius: 8px;
22 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
23 }
24 textarea {
25 width: 100%;
26 height: 300px;
27 font-family: 'Courier New', monospace;
28 font-size: 14px;
29 padding: 10px;
30 border: 2px solid #ddd;
31 border-radius: 4px;
32 box-sizing: border-box;
33 resize: vertical;
34 }
35 textarea:focus {
36 outline: none;
37 border-color: #4CAF50;
38 }
39 button {
40 background-color: #4CAF50;
41 color: white;
42 padding: 12px 30px;
43 font-size: 16px;
44 border: none;
45 border-radius: 4px;
46 cursor: pointer;
47 margin-top: 15px;
48 }
49 button:hover {
50 background-color: #45a049;
51 }
52 button:active {
53 transform: translateY(1px);
54 }
55 #result {
56 margin-top: 20px;
57 padding: 15px;
58 border-radius: 4px;
59 font-family: 'Courier New', monospace;
60 white-space: pre-wrap;
61 min-height: 50px;
62 }
63 .success {
64 background-color: #d4edda;
65 color: #155724;
66 border: 1px solid #c3e6cb;
67 }
68 .error {
69 background-color: #f8d7da;
70 color: #721c24;
71 border: 1px solid #f5c6cb;
72 }
73 .instructions {
74 background-color: #fff3cd;
75 padding: 15px;
76 border-radius: 4px;
77 margin-bottom: 20px;
78 border: 1px solid #ffeaa7;
79 }
80 .instructions p {
81 margin: 5px 0;
82 }
83 </style>
84</head>
85<body>
86 <div class="container">
87 <h1>🔍 Proofery - Browser Demo</h1>
89 <div class="instructions">
90 <strong>Instructions:</strong>
91 <p>1. Build the project: <code>npm run build</code></p>
92 <p>2. Serve this file with a local HTTP server (can't use file:// due to ES modules)</p>
93 <p>3. Edit the proof below and click "Verify Proof"</p>
94 </div>
96 <h2>Enter your proof:</h2>
97 <textarea id="proof-input">axiom test_axiom
98 suppose a : Nat
99 conclude eq(a, a)
101theorem simple_test
102 suppose x : Nat
103 suppose y : Nat
104 suppose h : and(eq(x, x), eq(y, y))
105 conclude and(eq(x, x), eq(y, y))
106 proof
107 exact h</textarea>
109 <button onclick="verifyProof()">Verify Proof</button>
111 <div id="result"></div>
112 </div>
114 <script type="module">
115 // Import the library - adjust path based on your server setup
116 import { parseContent, verifyFile, VerificationError, ParseError } from '../dist/index.js';
118 window.verifyProof = function() {
119 const content = document.getElementById('proof-input').value;
120 const resultDiv = document.getElementById('result');
122 // Clear previous result
123 resultDiv.className = '';
124 resultDiv.textContent = 'Verifying...';
126 try {
127 const blocks = parseContent(content);
128 verifyFile(blocks, false);
130 resultDiv.className = 'success';
131 resultDiv.textContent = '✓ Proof verified successfully!';
132 } catch (error) {
133 resultDiv.className = 'error';
134 if (error instanceof VerificationError) {
135 resultDiv.textContent = '✗ Verification Error:\n\n' + error.message;
136 } else if (error instanceof ParseError) {
137 resultDiv.textContent = '✗ Parse Error:\n\n' + error.message;
138 } else {
139 resultDiv.textContent = '✗ Unexpected Error:\n\n' + error.message;
140 }
141 }
142 };
144 // Verify on load
145 window.addEventListener('load', () => {
146 console.log('Proofery demo loaded. Library imported successfully!');
147 });
148 </script>
149</body>
150</html>