add cookie based preferences

3 files changed, 91 insertions, 46 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 89fee52..aa92e1f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -7,7 +7,6 @@ body {
     padding: 0;
     box-sizing: border-box;
     font-family: "LXGW WenKai Mono TC", monospace;
-    font-size: 13px;
 }
 
 body {
@@ -79,7 +78,6 @@ nav::before {
 
 main {
     display: flex;
-    width: 1200px;
     margin: 0 auto;
     gap: 10px;
     padding: 10px;
@@ -87,7 +85,6 @@ main {
 }
 
 .sidebar {
-    width: 180px;
     background-color: #0d0020;
     border: 1px solid #4d4d80;
     padding: 8px;
@@ -148,10 +145,14 @@ main {
 
 .centered-main h1 {
     color: #ffccff;
-    font-size: 16px;
     margin: 8px 0px;
 }
 
+.content-main h1 {
+    color: #ff99cc;
+    margin-bottom: 8px;
+}
+
 .centered-main p {
     color: #99ffcc;
 }
@@ -177,7 +178,8 @@ main {
 
 input[type="text"],
 input[type="email"],
-input[type="password"] {
+input[type="password"],
+input[type="number"] {
     background-color: #1a0033;
     border: 1px solid #9999ff;
     color: #ccccff;
@@ -187,7 +189,8 @@ input[type="password"] {
 
 input[type="text"]:focus,
 input[type="email"]:focus,
-input[type="password"]:focus {
+input[type="password"]:focus,
+input[type="number"]:focus {
     border-color: #ff99cc;
     background-color: #260040;
     outline: none;
@@ -298,8 +301,6 @@ footer::before {
     margin: 8px 0;
 }
 
-
-
 .ibform {
     background-color: #0d001a;
     border: 1px solid #ff99cc;
@@ -328,7 +329,6 @@ footer::before {
 
 .fg-sub small {
     color: #ff99cc;
-    font-size: 11px;
 }
 
 .fg-main label {
@@ -354,4 +354,14 @@ footer::before {
 
 .q-img {
     max-width: 768px;
+}
+
+.error {
+    color: #ffccff;
+    background-color: #330000;
+    border: 1px solid #ff0000;
+    padding: 8px;
+    margin-bottom: 16px;
+    text-align: center;
+    display: none;
 }
\ No newline at end of file
diff --git a/static/scripts/preferences.js b/static/scripts/preferences.js
new file mode 100644
index 0000000..d02e5cc
--- /dev/null
+++ b/static/scripts/preferences.js
@@ -0,0 +1,72 @@
+function validateCSSFieldValue(value) {
+    const validCSSValuePattern = /^(auto|(\d+(\.\d+)?px|em|rem|%)|calc\(.+\))$/;
+    return validCSSValuePattern.test(value);
+}
+
+function validateCSSFontSize(value) {
+    const validFontSizePattern = /^(small|medium|large|x-large|\d+(\.\d+)?(px|em|rem|%)?)$/;
+    return validFontSizePattern.test(value);
+}
+
+function showError(message) {
+    const errorMessage = document.getElementById('error-message');
+    errorMessage.textContent = message;
+    errorMessage.style.display = 'block';
+}
+
+function hideError() {
+    const errorMessage = document.getElementById('error-message');
+    errorMessage.textContent = '';
+    errorMessage.style.display = 'none';
+}
+
+function setPreferences() {
+    const preferences = {
+        sidebar_width: document.getElementById('sidebar-width').value,
+        main_content_width: document.getElementById('main-width').value,
+        h1_font_size: document.getElementById('h1-font-size').value,
+        body_font_size: document.getElementById('body-font-size').value,
+        small_font_size: document.getElementById('small-font-size').value,
+        posts_per_page: parseInt(document.getElementById('posts-per-page').value, 10)
+    }
+
+    for (const key in preferences) {
+        if (preferences[key] === '') {
+            showError(`Please fill in the ${key.replace(/_/g, ' ')} field.`);
+            return;
+        }
+
+        switch (key) {
+            case 'sidebar_width':
+            case 'main_content_width':
+                if (!validateCSSFieldValue(preferences[key])) {
+                    showError(`Invalid value for ${key.replace(/_/g, ' ')}: ${preferences[key]}. Please enter a valid CSS value (e.g., '300px', '50%', 'auto').`);
+                    return;
+                }
+                break;
+            case 'h1_font_size':
+            case 'body_font_size':
+            case 'small_font_size':
+                if (!validateCSSFontSize(preferences[key])) {
+                    showError(`Invalid font size for ${key.replace(/_/g, ' ')}: ${preferences[key]}. Please enter a valid font size (e.g., 'small', 'medium', 'large', '16px', '1.2em').`);
+                    return;
+                }
+                break;
+            case 'posts_per_page':
+                if (isNaN(preferences[key]) || preferences[key] <= 0) {
+                    showError('Posts per page must be a positive integer.');
+                    return;
+                }
+                break;
+        }
+    }
+
+    document.cookie = `preferences=${JSON.stringify(preferences)}; path=/; SameSite=Lax;`
+    window.location.reload()
+}
+
+function resetPreferences() {
+    hideError();
+    document.cookie = 'preferences=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax;'
+    window.location.reload()
+}
diff --git a/static/scripts/theme.js b/static/scripts/theme.js
deleted file mode 100644
index 0ba6625..0000000
--- a/static/scripts/theme.js
+++ /dev/null
@@ -1,37 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    const savedTheme = localStorage.getItem('theme') || 'light';
-    document.documentElement.setAttribute('data-theme', savedTheme);
-
-    const preferencesForm = document.getElementById('preferences-form');
-    if (preferencesForm) {
-        const themeRadios = document.querySelectorAll('input[name="theme"]');
-        themeRadios.forEach(radio => {
-            if (radio.value === savedTheme) {
-                radio.checked = true;
-            }
-        });
-
-        preferencesForm.addEventListener('submit', function (e) {
-            e.preventDefault();
-            const selectedTheme = document.querySelector('input[name="theme"]:checked').value;
-            localStorage.setItem('theme', selectedTheme);
-            document.documentElement.setAttribute('data-theme', selectedTheme);
-
-            let successMsg = document.querySelector('.success-message');
-            if (successMsg) {
-                successMsg.remove();
-            }
-
-            const message = document.createElement('div');
-            message.className = 'success-message';
-            message.textContent = 'Preferences saved successfully!';
-            preferencesForm.parentNode.insertBefore(message, preferencesForm);
-
-            setTimeout(() => {
-                if (message.parentNode) {
-                    message.remove();
-                }
-            }, 3000);
-        });
-    }
-});
\ No newline at end of file