From d25ec27fb1c3df175e1b98af1fdc26881d68a1ab Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 5 Jan 2025 16:39:13 -0800 Subject: initial commit by simponic-infra --- static/.DS_Store | Bin 0 -> 6148 bytes static/css/colors.css | 55 ++++++++++++++++++++++++++++++ static/css/form.css | 42 +++++++++++++++++++++++ static/css/styles.css | 60 +++++++++++++++++++++++++++++++++ static/css/table.css | 28 +++++++++++++++ static/fonts/.DS_Store | Bin 0 -> 6148 bytes static/fonts/GeistMono-Medium.ttf | Bin 0 -> 78292 bytes static/img/favicon.ico | Bin 0 -> 591 bytes static/js/components/formatDate.js | 7 ++++ static/js/components/infoBanners.js | 6 ++++ static/js/components/themeSwitcher.js | 27 +++++++++++++++ static/js/require.js | 5 +++ static/js/script.js | 6 ++++ static/js/util/setThemeBeforeRender.js | 11 ++++++ 14 files changed, 247 insertions(+) create mode 100644 static/.DS_Store create mode 100644 static/css/colors.css create mode 100644 static/css/form.css create mode 100644 static/css/styles.css create mode 100644 static/css/table.css create mode 100644 static/fonts/.DS_Store create mode 100644 static/fonts/GeistMono-Medium.ttf create mode 100644 static/img/favicon.ico create mode 100644 static/js/components/formatDate.js create mode 100644 static/js/components/infoBanners.js create mode 100644 static/js/components/themeSwitcher.js create mode 100644 static/js/require.js create mode 100644 static/js/script.js create mode 100644 static/js/util/setThemeBeforeRender.js (limited to 'static') diff --git a/static/.DS_Store b/static/.DS_Store new file mode 100644 index 0000000..e36d3e1 Binary files /dev/null and b/static/.DS_Store differ diff --git a/static/css/colors.css b/static/css/colors.css new file mode 100644 index 0000000..e40f80c --- /dev/null +++ b/static/css/colors.css @@ -0,0 +1,55 @@ +/* Colors inspired by "day/night-fox" schemes */ +:root { + /* Light mode colors */ + --background-color-light: #f6f2ee; /* base00 */ + --background-color-light-2: #dbd1dd; /* base01 */ + --text-color-light: #3d2b5a; /* base05 */ + --confirm-color-light: #396847; /* base0B */ + --link-color-light: #6e33ce; /* base0E */ + --container-bg-light: #f4ece6; /* base07 */ + --border-color-light: #2848a9; /* base0D */ + --error-color-light: #a5222f; /* base08 */ + + /* Dark mode colors */ + --background-color-dark: #192330; /* base00 */ + --background-color-dark-2: #212e3f; /* base01 */ + --text-color-dark: #cdcecf; /* base05 */ + --confirm-color-dark: #81b29a; /* base0B */ + --link-color-dark: #9d79d6; /* base0E */ + --container-bg-dark: #29394f; /* base02 */ + --border-color-dark: #719cd6; /* base0D */ + --error-color-dark: #c94f6d; /* base08 */ +} + + +[data-theme="DARK"] { + --background-color: var(--background-color-dark); + --background-color-2: var(--background-color-dark-2); + --text-color: var(--text-color-dark); + --link-color: var(--link-color-dark); + --container-bg: var(--container-bg-dark); + --border-color: var(--border-color-dark); + --error-color: var(--error-color-dark); + --confirm-color: var(--confirm-color-dark); +} + +[data-theme="LIGHT"] { + --background-color: var(--background-color-light); + --background-color-2: var(--background-color-light-2); + --text-color: var(--text-color-light); + --link-color: var(--link-color-light); + --container-bg: var(--container-bg-light); + --border-color: var(--border-color-light); + --error-color: var(--error-color-light); + --confirm-color: var(--confirm-color-light); +} + +.error { + background-color: var(--error-color); + padding: 1rem; +} + +.success { + background-color: var(--confirm-color); + padding: 1rem; +} diff --git a/static/css/form.css b/static/css/form.css new file mode 100644 index 0000000..7ccd8db --- /dev/null +++ b/static/css/form.css @@ -0,0 +1,42 @@ +.form { + max-width: 600px; + padding: 1em; + background: var(--background-color-2); + border: 1px solid #ccc; +} + +label { + display: block; + margin: 0 0 1em; + font-weight: bold; +} + +input { + display: block; + width: 100%; + padding: 0.5em; + margin: 0 0 1em; + border: 1px solid var(--border-color); + background: var(--container-bg); +} + +button, +input[type="submit"] { + padding: 0.5em 1em; + background: var(--link-color); + color: var(--text-color); + border: 0; + cursor: pointer; +} + +textarea { + display: block; + width: 100%; + padding: 0.5em; + margin: 0 0 1em; + border: 1px solid var(--border-color); + background: var(--container-bg); + + resize: vertical; + min-height: 100px; +} diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..2ec823a --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,60 @@ +@import "/static/css/colors.css"; +@import "/static/css/form.css"; +@import "/static/css/table.css"; +@import "/static/css/chat.css"; + +@font-face { + font-family: 'GeistMono'; + src: url('/static/fonts/GeistMono-Medium.ttf') format('truetype'); +} + +* { + box-sizing: border-box; + font-family: GeistMono; +} + +html { + margin: 0; + padding: 0; + color: var(--text-color); +} + +body { + background-color: var(--background-color); + min-height: 100vh; +} + +hr { + border: 0; + border-top: 1px solid var(--text-color); + + margin: 20px 0; +} + +.container { + max-width: 1600px; + margin: auto; + background-color: var(--container-bg); + padding: 1rem; +} + + +a { + color: var(--link-color); + text-decoration: none; + font-weight: bold; +} +a:hover { + text-decoration: underline; +} + +.info { + margin-bottom: 1rem; + max-width: 600px; + + transition: opacity 0.3s; +} + +.info:hover { + opacity: 0.8; +} diff --git a/static/css/table.css b/static/css/table.css new file mode 100644 index 0000000..16da86d --- /dev/null +++ b/static/css/table.css @@ -0,0 +1,28 @@ +@import "/static/css/colors.css"; + +table { + width: auto; + border-collapse: collapse; + border: 1px solid var(--border-color); +} + +th, +td { + padding: 12px 20px; + text-align: center; + border-bottom: 1px solid var(--border-color); +} + +th, +thead { + background-color: var(--background-color-2); +} + +tbody tr:nth-child(odd) { + background-color: var(--background-color); + color: var(--text-color); +} + +tbody tr { + transition: background-color 0.3s ease; +} diff --git a/static/fonts/.DS_Store b/static/fonts/.DS_Store new file mode 100644 index 0000000..aa99597 Binary files /dev/null and b/static/fonts/.DS_Store differ diff --git a/static/fonts/GeistMono-Medium.ttf b/static/fonts/GeistMono-Medium.ttf new file mode 100644 index 0000000..4284eb4 Binary files /dev/null and b/static/fonts/GeistMono-Medium.ttf differ diff --git a/static/img/favicon.ico b/static/img/favicon.ico new file mode 100644 index 0000000..58c53c3 Binary files /dev/null and b/static/img/favicon.ico differ diff --git a/static/js/components/formatDate.js b/static/js/components/formatDate.js new file mode 100644 index 0000000..a12f04f --- /dev/null +++ b/static/js/components/formatDate.js @@ -0,0 +1,7 @@ +const timeElements = document.querySelectorAll(".time"); +timeElements.forEach((timeElement) => { + const dateStr = timeElement.textContent.split(" ").slice(0, 3).join(" "); + const date = new Date(dateStr); + + timeElement.textContent = date.toLocaleString(); +}); diff --git a/static/js/components/infoBanners.js b/static/js/components/infoBanners.js new file mode 100644 index 0000000..6a19864 --- /dev/null +++ b/static/js/components/infoBanners.js @@ -0,0 +1,6 @@ +const infoBanners = document.querySelectorAll(".info"); +Array.from(infoBanners).forEach((infoBanner) => { + infoBanner.addEventListener("click", () => { + infoBanner.remove(); + }); +}); diff --git a/static/js/components/themeSwitcher.js b/static/js/components/themeSwitcher.js new file mode 100644 index 0000000..e5497f0 --- /dev/null +++ b/static/js/components/themeSwitcher.js @@ -0,0 +1,27 @@ +const THEMES = { + DARK: "DARK", + LIGHT: "LIGHT", +}; + +const flipFlopTheme = (theme) => + THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK; + +const themePickerText = { + DARK: "light mode.", + LIGHT: "dark mode.", +}; + +const themeSwitcher = document.getElementById("theme-switcher"); + +const setTheme = (theme) => { + themeSwitcher.textContent = `${themePickerText[theme]}`; + + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); +}; + +themeSwitcher.addEventListener("click", () => + setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))), +); + +setTheme(localStorage.getItem("theme") || THEMES.LIGHT); diff --git a/static/js/require.js b/static/js/require.js new file mode 100644 index 0000000..a4203f0 --- /dev/null +++ b/static/js/require.js @@ -0,0 +1,5 @@ +/** vim: et:ts=4:sw=4:sts=4 + * @license RequireJS 2.3.6 Copyright jQuery Foundation and other contributors. + * Released under MIT license, https://github.com/requirejs/requirejs/blob/master/LICENSE + */ +var requirejs,require,define;!function(global,setTimeout){var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version="2.3.6",commentRegExp=/\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/gm,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,isBrowser=!("undefined"==typeof window||"undefined"==typeof navigator||!window.document),isWebWorker=!isBrowser&&"undefined"!=typeof importScripts,readyRegExp=isBrowser&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,defContextName="_",isOpera="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),contexts={},cfg={},globalDefQueue=[],useInteractive=!1;function commentReplace(e,t){return t||""}function isFunction(e){return"[object Function]"===ostring.call(e)}function isArray(e){return"[object Array]"===ostring.call(e)}function each(e,t){var i;if(e)for(i=0;i