diff options
| author | Bobby <[email protected]> | 2025-07-12 20:01:55 +0530 |
|---|---|---|
| committer | Bobby <[email protected]> | 2025-07-12 20:01:55 +0530 |
| commit | c97589bd1ae1d2366c4fb070264d26c8b8d8b7c5 (patch) | |
| tree | 7940dede46aa6571d892065ed3f95b676ed20610 /templates | |
| parent | a896b3fe27579993c0cb761832242d806d3e9438 (diff) | |
| download | imageboard-c97589bd1ae1d2366c4fb070264d26c8b8d8b7c5.tar.xz imageboard-c97589bd1ae1d2366c4fb070264d26c8b8d8b7c5.zip | |
add cookie based preferences
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/layouts/main.django | 5 | ||||
| -rw-r--r-- | templates/preferences.django | 91 |
2 files changed, 70 insertions, 26 deletions
diff --git a/templates/layouts/main.django b/templates/layouts/main.django index 488f9e4..8e776d3 100644 --- a/templates/layouts/main.django +++ b/templates/layouts/main.django @@ -4,6 +4,8 @@ <meta charset="UTF-8" /> <title>{{ Title }} - {{ Appname }}</title> <link rel="stylesheet" href="/static/css/main.css" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + {{ PreferencesCSS|safe }} </head> <body> {% include 'partials/navbar.django' %} @@ -22,4 +24,7 @@ <p>© 2025 {{ Appname }}. All rights reserved.</p> </footer> </body> + {% block scripts %} + + {% endblock %} </html> diff --git a/templates/preferences.django b/templates/preferences.django index 53fc2fc..6b5f0e3 100644 --- a/templates/preferences.django +++ b/templates/preferences.django @@ -1,33 +1,72 @@ {% extends 'layouts/main.django' %} {% block content %} - <h2>Site Preferences</h2> - - <form id="preferences-form"> - <fieldset> - <legend>Theme Settings</legend> - - <div class="form-group"> - <label>Theme</label> - <div class="radio-group"> - <div> - <input type="radio" name="theme" value="light" id="theme-light" /> - <label for="theme-light">Light Mode</label> - </div> - <div> - <input type="radio" name="theme" value="dark" id="theme-dark" /> - <label for="theme-dark">Dark Mode</label> - </div> + <div class="content-main"> + <h1>Site Preferences</h1> + <p>Customize your experience on {{ Appname }}. These settings are stored in your cookies and will persist across sessions. However, they are not coupled with your account, so they don't apply to other devices or browsers.</p> + <form action="javascript:setPreferences()" method="post" class="ibform"> + <div class="error" id="error-message"></div> + <div class="fgroup"> + <div class="fg-main"> + <label for="sidebar-width">Sidebar Width</label> + </div> + <div class="fg-sub"> + <input type="text" id="sidebar-width" name="sidebar-width" value="{{ Preferences.SidebarWidth }}" placeholder="e.g., 250px" /> + <small>Set the width of the sidebar. Use CSS units like px, em, or %.</small> </div> </div> - - <div class="form-actions"> - <button type="submit">SAVE PREFERENCES</button> + <div class="fgroup"> + <div class="fg-main"> + <label for="main-width">Main Content Width</label> + </div> + <div class="fg-sub"> + <input type="text" id="main-width" name="main-width" value="{{ Preferences.MainContentWidth }}" placeholder="e.g., 800px" /> + <small>Set the width of the main content area. Use CSS units like px, em, or %.</small> + </div> </div> - </fieldset> - </form> - - <p> - <a href="/">Back to Posts</a> - </p> + <div class="fgroup"> + <div class="fg-main"> + <label for="h1-font-size">H1 Font Size</label> + </div> + <div class="fg-sub"> + <input type="text" id="h1-font-size" name="h1-font-size" value="{{ Preferences.H1FontSize }}" min="10" max="100" /> + <small>Set the font size for H1 elements. This will affect the main headings across the site. Use a valid CSS size (e.g., 16px, 1.5em, etc.).</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="body-font-size">Body Font Size</label> + </div> + <div class="fg-sub"> + <input type="text" id="body-font-size" name="body-font-size" value="{{ Preferences.BodyFontSize }}" min="10" max="100" /> + <small>Set the font size for body text. This will affect the readability of the content across the site. Use a valid CSS size (e.g., 13px, 1em, etc.).</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="small-font-size">Small Font Size</label> + </div> + <div class="fg-sub"> + <input type="text" id="small-font-size" name="small-font-size" value="{{ Preferences.SmallFontSize }}" min="8" max="50" /> + <small>Set the font size for small text elements. This will affect the visibility of smaller text across the site. Use a valid CSS size (e.g., 11px, 0.8em, etc.).</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="posts-per-page">Posts Per Page</label> + </div> + <div class="fg-sub"> + <input type="number" id="posts-per-page" name="posts-per-page" value="{{ Preferences.PostsPerPage }}" min="1" max="100" /> + <small>Set the number of posts displayed per page. This can help manage load times</small> + </div> + </div> + <div class="fbtngrp"> + <input type="submit" value="Save Preferences" /> + <input type="button" value="Reset to Default" onclick="resetPreferences()" /> + </div> + </form> + </div> +{% endblock %} +{% block scripts %} + <script src="/static/scripts/preferences.js" type="text/javascript"></script> {% endblock %} |