Skip to content

Commit 8485c17

Browse files
topframetopframe
committed
Update Interactive Demo
1 parent 6c5b08a commit 8485c17

File tree

1 file changed

+79
-53
lines changed

1 file changed

+79
-53
lines changed

‎docs/index.html‎

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,42 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>APON.js Interactive Demo</title>
7+
<link rel="stylesheet" type="text/css" href="https://assets.aspectran.com/bootstrap@5.3.8/css/aspectran.css?v=20251006a"/>
78
<script src="lib/apon.js"></script>
89
<style>
9-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 1rem 2rem; color: #333; background-color: #f9f9f9; }
10-
h1, h2 { color: #111; border-bottom: 1px solid #ddd; padding-bottom: 0.5rem;}
11-
.container { display: flex; gap: 2rem; max-width: 1200px; margin: 0 auto; }
12-
.column { flex: 1; display: flex; flex-direction: column; }
13-
textarea, pre { width: 100%; min-height: 400px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; padding: 1rem; font-family: monospace; font-size: 14px; line-height: 1.5; text-wrap: nowrap; }
14-
textarea { resize: vertical; }
15-
pre { background-color: #fff; white-space: pre-wrap; word-wrap: break-word; }
16-
button { font-size: 1rem; padding: 0.75rem 1.5rem; border: none; border-radius: 6px; background-color: #007bff; color: white; cursor: pointer; margin-top: 1rem; align-self: flex-start; }
17-
button:hover { background-color: #0056b3; }
18-
.error { color: #d93025; margin-top: 1rem; }
19-
h4.error-title { margin-bottom: -0.5rem; color: #d93025; }
10+
/* Ensure textareas fill the card body */
11+
.card-body .form-control {
12+
flex-grow: 1;
13+
resize: none; /* Disable manual resize for a cleaner look */
14+
}
15+
/* Adjust textarea height and prevent text wrapping */
16+
.card-body textarea.form-control {
17+
min-height: 450px;
18+
white-space: pre;
19+
overflow-x: auto;
20+
}
2021
</style>
2122
</head>
2223
<body>
2324

24-
<h1>APON.js Interactive Demo</h1>
25-
<p>Edit the APON text in the left box and click "Parse" to see the resulting JavaScript object. Edit the JSON in the right box and click "Stringify" to see the APON output.</p>
25+
<main class="container mt-4">
26+
<div class="text-center mb-4">
27+
<h1>APON.js Interactive Demo</h1>
28+
<p class="lead">This tool allows you to interactively convert between APON and JavaScript Objects.</p>
29+
</div>
2630

27-
<div class="container">
28-
<div class="column">
29-
<h2>APON Input</h2>
30-
<textarea id="apon-input"># Edit this APON text
31+
<div class="row g-4">
32+
<!-- APON Input Column -->
33+
<div class="col-md-6">
34+
<div class="card h-100">
35+
<div class="card-body d-flex flex-column">
36+
<h5 class="card-title">APON Input</h5>
37+
<p class="card-text text-muted small">&raquo; Edit the APON text and click <strong>Parse to JS Object</strong>.</p>
38+
<div class="mb-3 flex-grow-1 d-flex">
39+
<textarea id="apon-input" class="form-control font-monospace"># Edit this APON text
3140
server: {
3241
name: MyServer
3342
port(int): 8080
@@ -42,13 +51,21 @@ <h2>APON Input</h2>
4251
|Feel free to edit and test.
4352
)
4453
</textarea>
45-
<button onclick="runParse()">Parse to JS Object &raquo;</button>
46-
<h4 class="error-title">Parse Error</h4>
47-
<pre id="parse-error" class="error"></pre>
54+
</div>
55+
<button class="btn btn-primary" onclick="runParse()">Parse to JS Object &raquo;</button>
56+
<div id="parse-error" class="alert alert-danger mt-3" role="alert" style="display: none;"></div>
57+
</div>
58+
</div>
4859
</div>
49-
<div class="column">
50-
<h2>JS Object / JSON Output</h2>
51-
<textarea id="json-output">{
60+
61+
<!-- JSON Output Column -->
62+
<div class="col-md-6">
63+
<div class="card h-100">
64+
<div class="card-body d-flex flex-column">
65+
<h5 class="card-title">JS Object / JSON Output</h5>
66+
<p class="card-text text-muted small">&raquo; Edit the JSON and click <strong>Stringify to APON</strong>.</p>
67+
<div class="mb-3 flex-grow-1 d-flex">
68+
<textarea id="json-output" class="form-control font-monospace">{
5269
"hello": "world",
5370
"version": 1,
5471
"settings": {
@@ -59,42 +76,51 @@ <h2>JS Object / JSON Output</h2>
5976
]
6077
}
6178
}</textarea>
62-
<button onclick="runStringify()"> &laquo; Stringify to APON</button>
63-
<h4 class="error-title">Stringify Error</h4>
64-
<pre id="stringify-error" class="error"></pre>
79+
</div>
80+
<button class="btn btn-secondary" onclick="runStringify()">&laquo; Stringify to APON</button>
81+
<div id="stringify-error" class="alert alert-danger mt-3" role="alert" style="display: none;"></div>
82+
</div>
83+
</div>
6584
</div>
6685
</div>
86+
</main>
87+
88+
<footer class="container text-center text-muted mt-5 pb-4">
89+
<p>&copy; 2008-2025 The Aspectran Project.<br>APON.js is licensed under the Apache License, Version 2.0.</p>
90+
</footer>
6791

68-
<script>
69-
const aponInput = document.getElementById('apon-input');
70-
const jsonOutput = document.getElementById('json-output');
71-
const parseError = document.getElementById('parse-error');
72-
const stringifyError = document.getElementById('stringify-error');
92+
<script>
93+
const aponInput = document.getElementById('apon-input');
94+
const jsonOutput = document.getElementById('json-output');
95+
const parseError = document.getElementById('parse-error');
96+
const stringifyError = document.getElementById('stringify-error');
7397

74-
function runParse() {
75-
parseError.textContent = '';
76-
try {
77-
const parsed = APON.parse(aponInput.value);
78-
// Use 2 spaces for JSON indentation for readability
79-
jsonOutput.value = JSON.stringify(parsed, null, 2);
80-
} catch (e) {
81-
parseError.textContent = e.message;
82-
}
98+
function runParse() {
99+
parseError.style.display = 'none';
100+
try {
101+
const parsed = APON.parse(aponInput.value);
102+
// Use 2 spaces for JSON indentation for readability
103+
jsonOutput.value = JSON.stringify(parsed, null, 2);
104+
} catch (e) {
105+
parseError.textContent = e.message;
106+
parseError.style.display = 'block';
83107
}
108+
}
84109

85-
function runStringify() {
86-
stringifyError.textContent = '';
87-
try {
88-
const obj = JSON.parse(jsonOutput.value);
89-
aponInput.value = APON.stringify(obj, { indent: ' ' });
90-
} catch (e) {
91-
stringifyError.textContent = e.message;
92-
}
110+
function runStringify() {
111+
stringifyError.style.display = 'none';
112+
try {
113+
const obj = JSON.parse(jsonOutput.value);
114+
aponInput.value = APON.stringify(obj, { indent: ' ' });
115+
} catch (e) {
116+
stringifyError.textContent = e.message;
117+
stringifyError.style.display = 'block';
93118
}
119+
}
94120

95-
// Initial parse on load
96-
runParse();
97-
</script>
121+
// Initial parse on load
122+
runParse();
123+
</script>
98124

99125
</body>
100-
</html>
126+
</html>

0 commit comments

Comments
 (0)