Initial Commit

1 files changed, 190 insertions, 0 deletions

diff --git a/www/form.css b/www/form.css
new file mode 100644
index 0000000..e2e42ae
--- /dev/null
+++ b/www/form.css
@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2026 Doan Luu Duc Tai <doan@luuduct.ai>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.ascii-form-container {
+	width: 80ch;
+	max-width: 100%;
+	margin: 16px 0;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	box-sizing: border-box;
+}
+
+.ascii-box {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.ascii-bar {
+	font: inherit;
+	line-height: 1.2;
+	white-space: pre;
+	user-select: none;
+	color: inherit;
+}
+
+.ascii-body {
+	display: flex;
+	align-items: stretch;
+	min-height: 1.5em;
+	background-repeat: repeat-y;
+	background-position: left top, right top;
+	background-image: 
+		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1ch' height='1.5em'><text x='0' y='1.15em' font-family='monospace' font-size='16px' fill='%23000000'>|</text></svg>"),
+		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1ch' height='1.5em'><text x='0' y='1.15em' font-family='monospace' font-size='16px' fill='%23000000'>|</text></svg>");
+}
+
+@media (prefers-color-scheme: dark) {
+	.ascii-body {
+		background-image: 
+			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1ch' height='1.5em'><text x='0' y='1.15em' font-family='monospace' font-size='16px' fill='%23ffffff'>|</text></svg>"),
+			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1ch' height='1.5em'><text x='0' y='1.15em' font-family='monospace' font-size='16px' fill='%23ffffff'>|</text></svg>");
+	}
+}
+
+.ascii-content-padding {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 0 2ch;
+	box-sizing: border-box;
+}
+
+.ascii-prompt {
+	color: #090;
+	font-weight: bold;
+	user-select: none;
+	margin-right: 1ch;
+}
+
+.ascii-input,
+.ascii-textarea {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: transparent;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	box-sizing: border-box;
+	border-radius: 0;
+	line-height: 1.5;
+}
+
+.ascii-textarea {
+	display: block;
+	resize: none;
+	overflow-y: hidden;
+	min-height: 6em;
+	field-sizing: content;
+}
+
+.ascii-input::placeholder,
+.ascii-textarea::placeholder {
+	color: #666;
+	opacity: 0.7;
+}
+
+@media (prefers-color-scheme: dark) {
+	.ascii-prompt {
+		color: #0f0;
+	}
+	.ascii-input::placeholder,
+	.ascii-textarea::placeholder {
+		color: #555;
+	}
+}
+
+.ascii-actions {
+	display: flex;
+	gap: 2ch;
+	margin-top: 8px;
+}
+
+.ascii-btn {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: transparent;
+	border: none;
+	outline: none;
+	font: inherit;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	white-space: pre;
+	font-weight: bold;
+}
+
+.ascii-btn-submit {
+	color: #090;
+}
+
+.ascii-btn-reset {
+	color: #a00;
+}
+
+.ascii-btn-submit:hover,
+.ascii-btn-submit:focus {
+	background: #090;
+	color: #fff;
+}
+
+.ascii-btn-reset:hover,
+.ascii-btn-reset:focus {
+	background: #a00;
+	color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+	.ascii-btn-submit {
+		color: #0f0;
+	}
+	.ascii-btn-submit:hover,
+	.ascii-btn-submit:focus {
+		background: #0f0;
+		color: #000;
+	}
+	.ascii-btn-reset {
+		color: #f33;
+	}
+	.ascii-btn-reset:hover,
+	.ascii-btn-reset:focus {
+		background: #f33;
+		color: #000;
+	}
+}
+
+.ascii-status {
+	font: inherit;
+	color: #06c;
+	white-space: pre-wrap;
+	padding: 4px 0;
+	user-select: none;
+}
+
+@media (prefers-color-scheme: dark) {
+	.ascii-status {
+		color: #6cf;
+	}
+}