final commit IIking

forgot to add 'public/' as well.

1 files changed, 284 insertions, 0 deletions

diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..72d0f9f
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,284 @@
+*
+{
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+}
+
+body
+{
+   font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
+   background: linear-gradient(#cccccc, #ffffff);;
+   color: #000;
+   min-height: 100vh;
+   display: flex;
+   justify-content: center;
+   padding: 2rem 1rem;
+}
+
+.container
+{
+   width: 100%;
+   max-width: 600px;
+   background: #c0c0c0;
+   border-radius: 0;
+   box-shadow:
+      inset -1px -1px 0 #000,
+      inset 1px 1px 0 #fff,
+      inset -2px -2px 0 #808080,
+      inset 2px 2px 0 #dfdfdf,
+      2px 2px 0 rgba(0, 0, 0, 0.4);
+   padding: 0;
+}
+
+h1
+{
+   text-align: left;
+   margin: 0;
+   padding: 0.35rem 0.6rem;
+   font-size: 0.95rem;
+   font-weight: bold;
+   color: #fff;
+   background: linear-gradient(to bottom, #5a9bd4 0%, #2c689c 48%, #1f5689 52%, #3a7fb8 100%);
+   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+   border-bottom: 1px solid #000;
+}
+
+h2
+{
+   font-size: 0.95rem;
+   font-weight: bold;
+   margin-bottom: 0.6rem;
+}
+
+/* Tabs. */
+.tabs
+{
+   display: flex;
+   gap: 2px;
+   margin-bottom: 0.6rem;
+   padding: 0.6rem 0.6rem 0;
+}
+
+.tab-btn
+{
+   flex: 1;
+   padding: 0.4rem;
+   border: 1px solid #000;
+   background: linear-gradient(to bottom, #cfcfcf, #a0a0a0);
+   color: #000;
+   border-radius: 0;
+   cursor: pointer;
+   font-size: 0.8rem;
+   font-family: inherit;
+   box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #fff;
+   transition: none;
+}
+
+.tab-btn.active
+{
+   background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%);
+   color: #fff;
+   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+/* Forms. */
+form
+{
+   display: flex;
+   flex-direction: column;
+   gap: 0.4rem;
+   margin-bottom: 0.6rem;
+   padding: 0 0.6rem;
+}
+
+input[type="text"],
+input[type="password"]
+{
+   padding: 0.3rem;
+   border: 1px solid #000;
+   border-radius: 0;
+   font-size: 0.8rem;
+   font-family: inherit;
+   outline: none;
+   background: #fff;
+   box-shadow:
+      inset 1px 1px 0 #808080,
+      inset -1px -1px 0 #fff;
+   transition: none;
+}
+
+input:focus
+{
+   border-color: #000;
+}
+
+button[type="submit"]
+{
+   padding: 0.35rem;
+   background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%);
+   color: #fff;
+   border: 1px solid #000;
+   border-radius: 0;
+   font-size: 0.8rem;
+   font-family: inherit;
+   cursor: pointer;
+   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+   box-shadow:
+      inset -1px -1px 0 #1f5689,
+      inset 1px 1px 0 #b0d8f0;
+   transition: none;
+}
+
+button[type="submit"]:hover
+{
+   background: linear-gradient(to bottom, #8fc8f0 0%, #4a90d9 50%, #357ab8 51%, #6aabe0 100%);
+}
+
+button[type="submit"]:active
+{
+   box-shadow:
+      inset 1px 1px 0 #1f5689,
+      inset -1px -1px 0 #b0d8f0;
+}
+
+/* Header. */
+.header
+{
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-bottom: 0.6rem;
+   padding: 0 0.6rem;
+}
+
+.logout-btn
+{
+   padding: 0.3rem 0.8rem;
+   background: linear-gradient(to bottom, #e88080 0%, #c0392b 50%, #a5281b 51%, #d05040 100%);
+   color: #fff;
+   border: 1px solid #000;
+   border-radius: 0;
+   cursor: pointer;
+   font-size: 0.8rem;
+   font-family: inherit;
+   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+   box-shadow:
+      inset -1px -1px 0 #802018,
+      inset 1px 1px 0 #f0b0a0;
+}
+
+.logout-btn:hover
+{
+   background: linear-gradient(to bottom, #f09090 0%, #d04030 50%, #b53020 51%, #e06050 100%);
+}
+
+.logout-btn:active
+{
+   box-shadow:
+      inset 1px 1px 0 #802018,
+      inset -1px -1px 0 #f0b0a0;
+}
+
+#task-list
+{
+   list-style: none;
+   margin-top: 0.6rem;
+   padding: 0 0.6rem;
+}
+
+.task-item
+{
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   padding: 0.4rem;
+   border: 1px solid #000;
+   background: #fff;
+   box-shadow:
+      inset 1px 1px 0 #808080,
+      inset -1px -1px 0 #fff;
+   margin-bottom: 3px;
+   transition: none;
+}
+
+.task-item:hover
+{
+   background: #e8eef5;
+}
+
+.task-item input[type="checkbox"]
+{
+   width: 16px;
+   height: 16px;
+   cursor: pointer;
+}
+
+.task-info
+{
+   flex: 1;
+}
+
+.task-title
+{
+   font-weight: bold;
+   font-size: 0.8rem;
+}
+
+.task-title.done
+{
+   text-decoration: line-through;
+   color: #808080;
+}
+
+.task-desc
+{
+   font-size: 0.75rem;
+   color: #606060;
+   margin-top: 0.1rem;
+}
+
+.delete-btn
+{
+   background: #c0c0c0;
+   border: 1px solid #000;
+   color: #000;
+   cursor: pointer;
+   font-size: 0.9rem;
+   font-family: inherit;
+   padding: 0.1rem 0.4rem;
+   box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #fff;
+}
+
+.delete-btn:hover
+{
+   color: #c0392b;
+}
+
+.delete-btn:active
+{
+   box-shadow:
+      inset 1px 1px 0 #808080,
+      inset -1px -1px 0 #fff;
+}
+
+/* Messages. */
+.error
+{
+   color: #c0392b;
+   font-size: 0.8rem;
+   text-align: center;
+   padding: 0 0.6rem;
+}
+
+.empty-msg
+{
+   text-align: center;
+   color: #606060;
+   padding: 1.5rem 0;
+   font-size: 0.8rem;
+}