summaryrefslogtreecommitdiff
path: root/src/contrib/SDL-3.2.20/examples/template.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/contrib/SDL-3.2.20/examples/template.html')
-rw-r--r--src/contrib/SDL-3.2.20/examples/template.html292
1 files changed, 292 insertions, 0 deletions
diff --git a/src/contrib/SDL-3.2.20/examples/template.html b/src/contrib/SDL-3.2.20/examples/template.html
new file mode 100644
index 0000000..3e43946
--- /dev/null
+++ b/src/contrib/SDL-3.2.20/examples/template.html
@@ -0,0 +1,292 @@
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: absolute;
80 bottom: 100%;
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: absolute;
138 bottom: 100%;
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 /* Used for a hack to avoid tab labels showing on top of tabs; see
148 comment below for details. */
149 transition: bottom 0.25s;
150 }
151
152 #source-code:hover,
153 #source-code:focus-within {
154 top: 50%;
155 }
156
157 #source-code:focus-within {
158 border-top: 2px solid orange;
159 }
160
161 #source-code:focus-within::before {
162 border: 2px solid orange;
163 border-bottom: none;
164 }
165
166 #source-code-contents {
167 height: 100%;
168 overflow: scroll;
169 }
170
171 /* Hack: Sinze z-index only goes one way, and both tab labels should be
172 behind each other's tab, put the former on top (higher z-index) and
173 make the latter one disappear when the former is hovered. */
174 #output-container:hover ~ #source-code::before,
175 #output-container:focus-within ~ #source-code::before {
176 bottom: -100%;
177 }
178
179 @media (prefers-color-scheme: dark) {
180 main > #sidebar {
181 border-color: rgba(48, 54, 61, 0.7);
182 }
183 }
184
185 @media only screen and (max-width: 992px) {
186 main {
187 flex-direction: column;
188 }
189
190 main > #sidebar {
191 border: none;
192 }
193 }
194 </style>
195 <link rel="stylesheet" type="text/css" href="highlight.css">
196 </head>
197 <body>
198 <header>
199 <a href="/">SDL Examples</a>
200 </header>
201 <main>
202 <div id="content">
203 <nav class="breadcrumb">
204 <ul>
205 <li><a href="/@project_name@">@project_name@</a></li>
206 <li><a href="/@project_name@/@category_name@">@category_name@</a></li>
207 <li><a href="/@project_name@/@category_name@/@example_name@">@example_name@</a></li>
208 </ul>
209 </nav>
210 <hr/>
211 <div id="example-description">@description@</div>
212 <div class="canvas-container">
213 <canvas
214 id="canvas"
215 oncontextmenu="event.preventDefault()"
216 tabindex="-1"
217 ></canvas>
218 </div>
219 </div>
220 <div id="sidebar">
221 <h3>Other examples:</h3>
222 @other_examples_html@
223 </div>
224 </main>
225
226 <div id="output-container">
227 <textarea id="output" rows="8" spellcheck="false" readonly></textarea>
228 </div>
229
230 <div id="source-code" tabindex="1">
231 <div id="source-code-contents">@htmlified_source_code@</div>
232 </div>
233
234 <script type='text/javascript'>
235 var Module = {
236 preRun: [],
237 postRun: [],
238 print: (function() {
239 var element = document.getElementById('output');
240 if (element) element.value = ''; // clear browser cache
241 return function(text) {
242 var elem = document.getElementById('output-container');
243 if (elem.style['top'] == '') {
244 elem.style['top'] = '50%';
245 setTimeout(function() { elem.style['top'] = ''; }, 3000);
246 }
247
248 if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
249 // These replacements are necessary if you render to raw HTML
250 //text = text.replace(/&/g, "&amp;");
251 //text = text.replace(/</g, "&lt;");
252 //text = text.replace(/>/g, "&gt;");
253 //text = text.replace('\n', '<br>', 'g');
254 console.log(text);
255 if (element) {
256 element.value += text + "\n";
257 element.scrollTop = element.scrollHeight; // focus on bottom
258 }
259 };
260 })(),
261 printErr: function(text) { Module.print(text) },
262 canvas: (() => {
263 var canvas = document.getElementById('canvas');
264
265 // As a default initial behavior, pop up an alert when webgl context is lost. To make your
266 // application robust, you may want to override this behavior before shipping!
267 // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
268 canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
269
270 return canvas;
271 })(),
272 setStatus: (text) => {},
273 totalDependencies: 0,
274 monitorRunDependencies: (left) => {
275 this.totalDependencies = Math.max(this.totalDependencies, left);
276 Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
277 }
278 };
279 Module.setStatus('Downloading...');
280 window.onerror = (event) => {
281 // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
282 Module.setStatus('Exception thrown, see JavaScript console');
283 Module.setStatus = (text) => {
284 if (text) console.error('[post-exception status] ' + text);
285 };
286 };
287 </script>
288 <script async type="text/javascript" src="@javascript_file@"></script>
289 </body>
290</html>
291
292
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-13 19:14:22 +0000