base game code; there's no game here (yet)

static/css/seagull.css

@@ -0,0 +1,53 @@
+html, body { height: 100% }
+
+div#root {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+div#main-sidebar {
+    display: flex;
+    flex-direction: column;
+
+    max-width: 265px;
+    /*padding-left: 5px;*/
+    padding-right: 5px;
+    border-right: 0.125em solid rgb(192, 192, 192);
+}
+
+div#side-seagull-name {
+    text-align: center;
+}
+
+div#side-seagull-name-editor {
+    display: none;
+}
+
+div#main-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    padding-left: 5px;
+}
+
+div#main-log {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+div.log-line {
+    display: flex;
+    flex-direction: row;
+}
+
+div.log-tick {
+    font-size: 0.75em;
+    margin-right: 0.2em;
+}
+
+div.log-msg {
+    margin-left: 0.2em;
+}

static/js/seagull.js

@@ -0,0 +1,48 @@
+var page_elements = {};
+
+function record_log(text) {
+    const div_logrow = document.createElement("div");
+    div_logrow.className = "log-line";
+
+    const div_logtick = document.createElement("div");
+    div_logtick.className = "log-tick"
+    div_logtick.innerHTML = "Day 69";
+    div_logrow.append(div_logtick);
+
+    const div_logmsg = document.createElement("div");
+    div_logmsg.innerHTML = text;
+    div_logmsg.className = "log-msg";
+    div_logrow.append(div_logmsg);
+
+    page_elements["div_log"].append(div_logrow);
+}
+
+document.addEventListener("DOMContentLoaded", function (ev) {
+    page_elements["div_log"] = document.querySelector("#main-log");
+    page_elements["div_name"] = document.querySelector("#side-seagull-name");
+    page_elements["div_name_editor"] = document.querySelector("#side-seagull-name-editor");
+    page_elements["lbl_name"] = document.querySelector("#lbl-seagull-name");
+    page_elements["edt_name"] = document.querySelector("#edt-seagull-name");
+
+    record_log("It works!");
+});
+
+function change_seagull_name() {
+    page_elements["div_name"].style.display = "none";
+    page_elements["div_name_editor"].style.display = "block";
+}
+
+function confirm_seagull_name() {
+    const new_name = page_elements["edt_name"].value;
+    page_elements["lbl_name"].innerHTML = new_name;
+
+    page_elements["div_name"].style.display = "block";
+    page_elements["div_name_editor"].style.display = "none";
+}
+
+function cancel_seagull_name() {
+    page_elements["edt_name"].value = "";
+
+    page_elements["div_name"].style.display = "block";
+    page_elements["div_name_editor"].style.display = "none";
+}