Working (mostly)

Kind of broken on iOS
author: Ashelyn Rose <git@ashen.earth> 2025-05-10 00:09:26 -0600
committer: Ashelyn Rose <git@ashen.earth> 2025-05-10 00:09:26 -0600
commit: 210631c9e5ce54dd48418e70dd257e92d09997a2 (patch)
tree: b98760cddc17b14c68ba583eafb7bbc1518293f4 /static
3 files changed, 247 insertions, 0 deletions
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..efaf070
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Slightly-less-minimally viable chat</title>
+    <link rel="stylesheet" href="/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="chat" method="post" action="/">
+      <form method="post" action="/">
+        <input autofocus autocomplete="off" type="text" name="message" value="" />
+        <button type="submit">
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
+        </button>
+      </form>
+    </div>
+    <div id="footer">
+      <p>created by tempest-vi</p>
+      <button type="button" popovertarget="settings_modal" popovertargetaction="toggle">Settings</button>
+      <dialog popover id="settings_modal">
+        <iframe width="100%" height="100%" style="border: none;" src="/settings"></iframe>
+      </dialog>
+    </div>
+    <div id="messages">
diff --git a/static/settings.html b/static/settings.html
new file mode 100644
index 0000000..4ff6cbb
--- /dev/null
+++ b/static/settings.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Chat settings</title>
+    <link rel="stylesheet" href="/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body id="settings">
+    <form method="post" action="/save" target="_top">
+      <h3>Chat Settings</h3>
+      <label>
+        Nickname:
+        <input autocomplete="off" type="text" name="nick" value="[USERNICK]" placeholder="this one" required />
+        <span class="hint">What name should messages send with?</span>
+      </label>
+      <label>
+        Client ID:
+        <input autocomplete="off" type="password" name="pass" value="[USERPASS]" placeholder="(automatic)"/>
+        <span class="hint">Secret value used to verify identity between visits  (leave this blank to generate a random one)</span>
+      </label>
+      <div class="buttonGroup">
+        <button type="submit">Save</button>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..b50a57f
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,195 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+}
+
+html {
+  overflow: hidden;
+}
+
+body {
+  width: 100%;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  height: 100%;
+  position: fixed;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+body > div#messages {
+  order: -1;
+  display: grid;
+  grid-template-columns: fit-content(120px) 1fr fit-content(80px);
+}
+
+.message {
+  display: contents;
+}
+
+.message .nick {
+  padding: 4px 8px;
+  padding-left: 16px;
+  grid-column: 1 / 2;
+  overflow-x: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  align-content: center;
+}
+
+.message .content {
+  grid-column: 2 / 4;
+  padding: 4px 8px;
+  align-content: center;
+}
+
+.message:has(.actions) .content {
+  grid-column: 2 / 3;
+}
+
+.message .actions {
+  padding: 0 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  grid-column: 3 / 4;
+  align-content: center;
+}
+
+.message .actions > button,
+.message .actions > form button {
+  background: none;
+  border: none;
+}
+
+@media (pointer:fine) {
+  .message .actions button {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.message:hover,
+.message:has(.actions dialog[popover]:popover-open) {
+  & .actions button {
+    opacity: 1;
+    pointer-events: initial;
+    cursor: pointer;
+  }
+}
+
+.message.currentUser {
+  & > * {
+    /* background: #def6ff; */
+  }
+
+  & > .nick {
+    border-left: solid 6px #88dbfb;
+    padding-left: 10px;
+  }
+}
+
+.nickChange,
+.join,
+.part {
+  grid-column: 1 / 4;
+  opacity: .4;
+  padding: 4px 16px;
+  background: #d3d3d342;
+  font-size: .95em;
+}
+
+#chat {
+  order: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 8px;
+  margin-top: 8px;
+}
+
+#chat > form {
+  display: contents;
+}
+
+#chat > form input {
+  flex: 1;
+  padding: 8px;
+}
+
+#chat button {
+  margin-left: 8px;
+  border: none;
+  background: none;
+}
+
+#footer {
+  order: 2;
+  padding: 4px 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+
+  & p {
+    margin: 0;
+    text-align: right;
+    font-style: italic;
+  }
+
+  & > button {
+    color: blue;
+    background: none;
+    border: none;
+    margin-left: 16px;
+    cursor: pointer;
+  }
+}
+
+#settings_modal {
+  height: 300px;
+  padding: none;
+  overflow: hidden;
+
+  & > iframe {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+#settings {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: calc(100% - 16px);
+  max-width: 600px;
+  margin: 0 auto;
+  position: initial;
+  min-height: 100vh;
+}
+
+#settings form {
+  display: contents;
+}
+
+#settings form h3 {
+  margin: 0;
+  margin-bottom: 8px;
+}
+
+#settings form label {
+  display: block;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
author	Ashelyn Rose <git@ashen.earth>	2025-05-10 00:09:26 -0600
committer	Ashelyn Rose <git@ashen.earth>	2025-05-10 00:09:26 -0600
commit	210631c9e5ce54dd48418e70dd257e92d09997a2 (patch)
tree	b98760cddc17b14c68ba583eafb7bbc1518293f4 /static