Skip to content

Commit 7d6b7d7

Browse files
W2WizardW2Wizard
committed
Update demo html
1 parent 744caa7 commit 7d6b7d7

File tree

1 file changed

+113
-6
lines changed

1 file changed

+113
-6
lines changed

‎web/index.html

+113-6
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,139 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>WebAssembly Test</title>
78
<style>
89
body {
9-
margin: 0;
10+
margin: auto;
11+
padding-top: 1rem;
1012
width: 100%;
1113
min-height: 100dvh;
12-
background-color: black;
14+
background-color: #121212;
15+
color: #ffffff;
16+
font-family: 'Arial', sans-serif;
17+
max-width: 65rem;
18+
overflow: hidden;
19+
}
20+
21+
header {
22+
text-align: center;
23+
margin-bottom: 40px;
24+
}
25+
26+
h1 {
27+
margin: 0;
28+
font-size: 2.5em;
29+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
30+
}
31+
32+
a {
33+
color: #1e90ff;
34+
text-decoration: none;
35+
font-size: 1.1em;
36+
transition: color 0.3s ease;
37+
}
38+
39+
a:hover {
40+
color: #00bfff;
41+
}
42+
43+
.canvas-container {
44+
display: flex;
45+
flex-direction: column;
46+
justify-content: center;
47+
align-items: center;
48+
position: relative;
49+
}
50+
51+
canvas {
52+
border-radius: 15px;
53+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
54+
border: 2px solid #1e90ff;
55+
}
56+
57+
.loading {
58+
position: absolute;
59+
top: 50%;
60+
left: 50%;
61+
transform: translate(-50%, -50%);
62+
font-size: 1.5em;
63+
color: #1e90ff;
64+
font-weight: bold;
65+
display: none;
66+
}
67+
68+
.description {
69+
padding: 1rem;
70+
margin-bottom: 1rem;
71+
background: rgba(255, 255, 255, 0.1);
72+
border-radius: 10px;
73+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
74+
text-align: justify;
75+
}
76+
77+
.description p {
78+
line-height: 1.6;
79+
margin: 1em 0;
80+
}
81+
82+
.instructions {
83+
text-align: center;
84+
margin: 20px;
85+
}
86+
87+
.instructions p {
88+
font-size: 1.2em;
89+
}
90+
91+
kbd {
92+
background-color: #333;
93+
border-radius: 3px;
94+
border: 1px solid #666;
95+
box-shadow: 0 1px 0 #666, 0 1px 0 1px rgba(255, 255, 255, 0.1);
96+
color: #fff;
97+
display: inline-block;
98+
font-size: 1em;
99+
line-height: 1.4;
100+
padding: 2px 6px;
101+
margin: 0 2px;
102+
white-space: nowrap;
13103
}
14104
</style>
15105
</head>
106+
16107
<body>
108+
<header>
109+
<h1>WebAssembly Test</h1>
110+
<a href="https://github.com/codam-coding-college/MLX42" target="_blank">Visit MLX42 GitHub Repo</a>
111+
</header>
112+
<section class="description">
113+
<p>
114+
This little demo demonstrates how you compile MLX42 using emscripten to leverage the power of WebAssembly
115+
and run any graphical project directly in the web!
116+
</p>
117+
</section>
118+
<div class="canvas-container">
119+
<span class="loading">Loading...</span>
120+
<canvas width="1024" height="1024" id="canvas"></canvas>
121+
</div>
122+
<div class="instructions">
123+
<p>Use <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> to move the element in the canvas.</p>
124+
</div>
17125
<script src="coi-serviceworker.js"></script>
18-
<span class="load">Loading...</span>
19-
<canvas width="1024" height="1024" id="canvas"></canvas>
20126
<script>
21127
var Module = {
22128
// This is called when the Emscripten module is ready
23129
onRuntimeInitialized: () => {
24130
console.log("Emscripten module initialized");
25-
var loadingText = document.querySelector('.load');
131+
var loadingText = document.querySelector('.loading');
26132
loadingText.style.display = 'none';
27133
},
28134
canvas: (() => {
29135
var canvas = document.getElementById('canvas');
30-
canvas.addEventListener("webglcontextlost", function(e) {
136+
canvas.addEventListener("webglcontextlost", function (e) {
31137
alert('WebGL context lost. Reload the page.');
32138
e.preventDefault();
33139
}, false);
@@ -37,4 +143,5 @@
37143
</script>
38144
<script src="demo.js"></script>
39145
</body>
146+
40147
</html>

0 commit comments

Comments
 (0)