nim-webui/examples/serve_folder/index.html at main · webui-dev/nim-webui · GitHub

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
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>WebUI - Serve a Folder Example (Nim)</title>
		<style>
			body {
				font-family: 'Arial', sans-serif;
				color: white;
				background: linear-gradient(to right, #507d91, #1c596f, #022737);
				text-align: center;
				font-size: 18px;
			}
			button,
			input {
				padding: 10px;
				border-radius: 3px;
				border: 1px solid #ccc;
				box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
				transition: 0.2s;
			}
			button {
				background: #3498db;
				color: #fff;
				cursor: pointer;
				font-size: 16px;
			}
			h1 {
				text-shadow: -7px 10px 7px rgb(67 57 57 / 76%);
			}
			button:hover {
				background: #c9913d;
			}
			input:focus {
				outline: none;
				border-color: #3498db;
			}

			a:link {
				color: #fd5723;
			}
			a:active {
				color: #fd5723;
			}
			a:visited {
				color: #fd5723;
			}
			a:hover {
				color: #f0bcac;
			}
		</style>
	</head>
	<body>
		<h3 id="title">Serve a Folder Example (Nim)</h3>
		<br />
		<p id="description">
			You can edit this HTML file as you need.<br />
			Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br />
			<br />
			Please click on the link to switch to the second page<br />
			Or click on the button to switch to the second page programmatically.
		</p>
		<br />
		Click on [deno_test.ts] to interpret the TypeScript file (If deno is installed)
		<br />
		By a simple HTTP request "deno_test.ts?foo=60&bar=40"
		<br />
		<br />
		<button OnClick="call_deno_file();">deno_test.ts (Local file)</button>
		<br />
		<h4><a href="second.html">Second Page As A Simple Link (Local file)</a></h4>
		<br />
		<button id="SwitchToSecondPage">Switch to The Second Page Programmatically (Local file)</button>
		<br />
		<br />
		<button id="OpenNewWindow">Open The Second Window (Local file)</button>
		<br />
		<h4><a href="test.txt">Static file example (Embedded)</a></h4>
		<h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
		<p>
			Unicode Test:<br /><br />
			مرحبًا<br />
			<!-- Arabic -->
			你好<br />
			<!-- Chinese -->
			こんにちは
			<!-- Japanese -->
		</p>
	</body>

	<!-- Connect this window to the background app -->
	<script src="/webui.js"></script>

	<script>
		function call_deno_file() {
			// Because `main.c` set Deno as the `.ts` and `.js` interpreter
			// then a simple HTTP request to `/deno_test.ts` will be parsed
			// of course Deno should be installed.

			// Simple HTTP Request
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open('GET', 'deno_test.ts?foo=60&bar=40', false);
			xmlHttp.send(null);
			alert(xmlHttp.responseText);
		}
	</script>
</html>