keii.dev
Simple Directmedia Layer
1<!doctype html>
2<html lang="en-us">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>@project_name@ Example: @category_name@/@example_name@</title>
8 <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
9
10 <meta property="og:type" content="website">
11 <meta property="og:title" content="@project_name@ Example: @category_name@/@example_name@">
12 <meta property="og:description" content="@description@">
13 <meta property="og:image" content="@preview_image@" />
14
15 <link rel="stylesheet" type="text/css" href="/@project_name@/examples.css" />
16 <style>
17 main {
18 display: flex;
19 }
20
21 main > #sidebar {
22 flex: 0 1 25%;
23 border-left: 2px solid #efefef;
24 padding: 1rem 1rem;
25 }
26
27 main > #content {
28 flex: 1 1 auto;
29 margin-bottom: 16px;
30 }
31
32 main > #content > h1 {
33 margin-top: 0;
34 }
35
36 main > #sidebar ul {
37 list-style-type: none;
38 padding: 0;
39 margin: 0;
40 }
41
42 main > #sidebar li {
43 padding: 2px 0;
44 }
45
46 #example-description {
47 max-width: 85ch;
48 margin-bottom: 16px;
49 }
50
51 .canvas-container {
52 display: flex;
53 align-items: center;
54 justify-content: center;
55 }
56
57 #canvas {
58 max-width: 100%;
59 box-shadow: 0 0 0.5rem #7787;
60 }
61
62 #output-container {
63 position: fixed;
64 top: 100%;
65 left: 0;
66 right: 0;
67 bottom: 0;
68
69 background-color: black;
70 border: none;
71 border-top: 1px solid #778;
72 margin: 0;
73 padding: 1rem;
74
75 transition: top 0.25s;
76 }
77
78 #output-container::before {
79 position: fixed;
80 bottom: 0;
81 right: 1rem;
82
83 content: 'Console';
84 font-size: 1.5rem;
85 color: white;
86 background: black;
87 border: 1px solid #778;
88 border-bottom: none;
89 padding: 0.75rem 1.5rem;
90 border-radius: 0.5rem 0.5rem 0 0;
91 }
92
93 #output-container:hover,
94 #output-container:focus-within {
95 top: 50%;
96 }
97
98 #output-container:focus-within {
99 border-top: 2px solid orange;
100 }
101
102 #output-container:focus-within::before {
103 border: 2px solid orange;
104 border-bottom: none;
105 }
106
107 #output {
108 width: 100%;
109 height: 100%;
110 padding: 0;
111 margin: 0;
112
113 border: none;
114 background: black;
115 color: white;
116 outline: none;
117 resize: none;
118
119 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
120 "Liberation Mono", monospace;
121 }
122
123 #source-code {
124 position: fixed;
125 top: 100%;
126 left: 0;
127 right: 0;
128 bottom: 0;
129
130 background: #e0eaee;
131 padding: 1rem;
132
133 transition: top 0.25s;
134 }
135
136 #source-code::before {
137 position: fixed;
138 bottom: 0;
139 left: 1rem;
140
141 content: 'Source code';
142 font-size: 1.5rem;
143 background: linear-gradient(to bottom, #789, #e0eaee);
144 padding: 0.75rem 1.5rem;
145 border-radius: 0.5rem 0.5rem 0 0;
146 }
147
148 #source-code:hover,
149 #source-code:focus-within {
150 top: 50%;
151 }
152
153 #source-code:focus-within {
154 border-top: 2px solid orange;
155 }
156
157 #source-code:focus-within::before {
158 border: 2px solid orange;
159 border-bottom: none;
160 }
161
162 #source-code-contents {
163 height: 100%;
164 overflow: scroll;
165 }
166
167 @media (prefers-color-scheme: dark) {
168 main > #sidebar {
169 border-color: rgba(48, 54, 61, 0.7);
170 }
171 }
172
173 @media only screen and (max-width: 992px) {
174 main {
175 flex-direction: column;
176 }
177
178 main > #sidebar {
179 border: none;
180 }
181 }
182 </style>
183 <link rel="stylesheet" type="text/css" href="highlight.css">
184 </head>
185 <body>
186 <header>
187 <a href="/">SDL Examples</a>
188 </header>
189 <main>
190 <div id="content">
191 <nav class="breadcrumb">
192 <ul>
193 <li><a href="/@project_name@">@project_name@</a></li>
194 <li><a href="/@project_name@/@category_name@">@category_name@</a></li>
195 <li><a href="/@project_name@/@category_name@/@example_name@">@example_name@</a></li>
196 </ul>
197 </nav>
198 <h1>@project_name@ example: @category_name@/@example_name@</h1>
199 <div id="example-description">@description@</div>
200 <div class="canvas-container">
201 <canvas
202 id="canvas"
203 oncontextmenu="event.preventDefault()"
204 tabindex="-1"
205 ></canvas>
206 </div>
207 </div>
208 <div id="sidebar">
209 <h3>Other examples:</h3>
210 @other_examples_html@
211 </div>
212 </main>
213
214 <div id="output-container">
215 <textarea id="output" rows="8" spellcheck="false" readonly></textarea>
216 </div>
217
218 <div id="source-code" tabindex="1">
219 <div id="source-code-contents">@htmlified_source_code@</div>
220 </div>
221
222 <script type='text/javascript'>
223 var Module = {
224 preRun: [],
225 postRun: [],
226 print: (function() {
227 var element = document.getElementById('output');
228 if (element) element.value = ''; // clear browser cache
229 return function(text) {
230 var elem = document.getElementById('output-container');
231 if (elem.style['top'] == '') {
232 elem.style['top'] = '50%';
233 setTimeout(function() { elem.style['top'] = ''; }, 3000);
234 }
235
236 if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
237 // These replacements are necessary if you render to raw HTML
238 //text = text.replace(/&/g, "&");
239 //text = text.replace(/</g, "<");
240 //text = text.replace(/>/g, ">");
241 //text = text.replace('\n', '<br>', 'g');
242 console.log(text);
243 if (element) {
244 element.value += text + "\n";
245 element.scrollTop = element.scrollHeight; // focus on bottom
246 }
247 };
248 })(),
249 printErr: function(text) { Module.print(text) },
250 canvas: (() => {
251 var canvas = document.getElementById('canvas');
252
253 // As a default initial behavior, pop up an alert when webgl context is lost. To make your
254 // application robust, you may want to override this behavior before shipping!
255 // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
256 canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
257
258 return canvas;
259 })(),
260 setStatus: (text) => {},
261 totalDependencies: 0,
262 monitorRunDependencies: (left) => {
263 this.totalDependencies = Math.max(this.totalDependencies, left);
264 Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
265 }
266 };
267 Module.setStatus('Downloading...');
268 window.onerror = (event) => {
269 // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
270 Module.setStatus('Exception thrown, see JavaScript console');
271 Module.setStatus = (text) => {
272 if (text) console.error('[post-exception status] ' + text);
273 };
274 };
275 </script>
276 <script async type="text/javascript" src="@javascript_file@"></script>
277 </body>
278</html>
279
280