-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
112 lines (103 loc) · 7.05 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>qrforth</title>
<link rel="icon" type="image/png" href="qrforth.png"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.6.0.min.css"/>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
iframe {
width: 90%;
height: 70vh;
border: none;
}
small {
color: #4c4c4c;
}
#messageContainer {
text-align: center;
margin-top: 20px;
}
</style>
<script type="module">
let brotli = await import("https://unpkg.com/[email protected]/index.web.js?module").then(m => m.default);
// Get the URL fragment
var urlFragment = window.location.hash;
console.log("URL Fragment:", urlFragment);
// Remove the leading '#'
var base64String = urlFragment.substring(1);
console.log("Base64:", base64String.toString('utf-8'));
// Decode the base64 string
var decodedString = atob(base64String);
console.log("Decoded:", decodedString);
// Convert the string to a Uint8Array
var uint8Array = new Uint8Array(decodedString.length);
for (var i = 0; i < decodedString.length; i++) {
uint8Array[i] = decodedString.charCodeAt(i);
}
console.log("Uint8Array:", uint8Array);
// Decompress the Uint8Array
var decompressed = brotli.decompress(uint8Array);
console.log("Decompressed:", decompressed);
// Convert the Uint8Array to a string
var rawHtml = new TextDecoder("utf-8").decode(decompressed);
console.log("String:", rawHtml);
const iframe = document.getElementById('myIframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const messageContainer = document.getElementById('messageContainer');
messageContainer.innerText = 'Loading qrforth...';
iframe.addEventListener('load', function() {
// This will be called when the iframe has finished loading
messageContainer.innerText = 'qrforth loaded successfully!';
});
iframe.addEventListener('error', function() {
// This will be called if there is an error loading the iframe
messageContainer.innerText = 'Error loading qrforth...';
});
iframeDocument.open();
iframeDocument.write(rawHtml);
iframeDocument.close();
</script>
</head>
<body>
<header>
<nav>
<ul>
<li><img src="qrforth.png" alt="qrforth logo" style="max-height: 150px;"/></li>
<li><a href="https://qrforth.com/#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
">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="qrcode.html">QR Code</a></li>
<li><a href="examples.html">Examples</a></li>
</ul>
</nav>
<nav>
<ul>
<small>qrforth v0.1.0, 2023 Matthew Deeds,
<a href="https://opensource.org/license/mit/">MIT License</a>
<br>
<a href="https://github.com/mattdeeds/qrforth">GitHub</a>
</small>
<small><div id="messageContainer">Loading qrforth...<br>This may take a second</div></small>
</ul>
</nav>
</header>
<main>
<iframe id="myIframe" class="responsive-iframe" height="600" frameborder="0"></iframe>
</main>
</body>
</html>