parens2html/index.html at master · Tryops/parens2html · 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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="author" content="">

	<link rel="shortcut icon" href="res/favicon.ico" type="image/x-icon">
	<link rel="icon" href="res/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
	<title>Parens-2-HTML</title>
	<script type="text/javascript" src="js/biwascheme.js" defer></script>
	<script type="text/javascript" src="js/script.js" defer></script>
</head>

<body>
	<header>
		<div id="top">
			<div id="title">
				<img src="res/logo-light.png" width="100%">
				<!--h2><span style="color:#6eb3d3;">'()</span> &rarr; <span style="color:#e67e22;">&lt;/&gt;</span></h2-->
			</div>

			<button id="eval" class="button-primary">&rarr; Evaluate</button>
			<select>
				<option value="1">Tab Width: 1</option>
				<option value="2" selected>Tab Width: 2</option>
				<option value="3">Tab Width: 3</option>
				<option value="4">Tab Width: 4</option>
				<option value="5">Tab Width: 5</option>
				<option value="6">Tab Width: 6</option>
				<option value="7">Tab Width: 7</option>
				<option value="8">Tab Width: 8</option>
			</select>
			<button id="copy">&#x2398; Copy HTML</button>
		</div>

		<footer>
			<div id="description" hidden>
				<h5><u>S-Expressions to HTML</u></h5>
				<p>
					This page uses a Scheme implementation in JavaScript <i>(<a href="https://www.biwascheme.org/">Biwa Scheme</a>)</i> and a simple list manipulation script,
					to convert S-Expressions to plain HTML.
				</p>
				<p>
					These can be simpler to read and easier/faster to write
					in an early phase of rapid development and prototyping.
				</p>
				<p>
					See the example for reference on how to write HTML with it.
				</p>
			</div>
			<br>
			<center>
				<div id="info" title="Info">?</div>
				<p style="color: #aaa;"><i>Info</i></p>
				<a href="https://github.com/Tryops/parens2html">Project on Github</a>
			</center>
		</footer>
	</header>

	<textarea id="input" contenteditable>
;; S-Expressions:

(table  (thead  (th #[id= "item"  class= "head"] "Item")
                (th #[id= "size"  class= "head"] "Size")
                (th #[id= "price" class= "head"] "Price"))

        (tbody  (tr (td "Bike")
                    (td "2m")
                    (td "200$"))

                (tr (td "Book")
                    (td "30cm")
                    (td "15$"))

                (tr (td "Keyboard")
                    (td "70cm")
                    (td "50$"))))
	</textarea>

	<textarea id="output" contenteditable>
<!-- HTML: -->
<!-- (Press EVALUATE) -->
	</textarea>

</body>
</html>