diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index abbd023..e81f501 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -1,6 +1,63 @@ :root { font-size: 15px; - transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; + + font-family: "Quicksand", sans-serif; + font-optical-sizing: auto; + font-style: normal; +} + +/* Regular */ +@font-face { + font-family: 'OpenDyslexic'; + src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'), + url('/static/fonts/OpenDyslexic-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + letter-spacing: -10px; +} + +/* Italic */ +@font-face { + font-family: 'OpenDyslexic'; + src: url('/static/fonts/OpenDyslexic-Italic.woff2') format('woff2'), + url('/static/fonts/OpenDyslexic-Italic.woff') format('woff'); + font-weight: 400; + font-style: italic; + letter-spacing: -10px; +} + +/* Bold */ +@font-face { + font-family: 'OpenDyslexic'; + src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'), + url('/static/fonts/OpenDyslexic-Bold.woff') format('woff'); + font-weight: 700; + font-style: normal; + letter-spacing: -10px; +} + +/* Bold Italic */ +@font-face { + font-family: 'OpenDyslexic'; + src: url('/static/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2'), + url('/static/fonts/OpenDyslexic-BoldItalic.woff') format('woff'); + font-weight: 700; + font-style: italic; + letter-spacing: -10px; +} + +[data-font-theme="dyslexia"] * { + font-family: "Lexend", sans-serif; + letter-spacing: 1px; + font-weight: 400 !important; +} + +[data-font-theme="default"] * { + letter-spacing: 0px; +} + +.transition { + transition: 0.4s ease; } .main-container { @@ -197,7 +254,8 @@ color: var(--piggy-text-breadcrumb); } -#theme-modal-btn { +/* Settings Button */ +#settings-btn { background-color: var(--piggy-button); color: var(--piggy-text-button); border: 1px solid var(--piggy-dark); @@ -211,74 +269,81 @@ margin-left: auto; } -#theme-modal-btn:hover { +#settings-btn:hover { background-color: var(--piggy-button-hover); } - -/* MODAL */ -.modal { - display: none; +/* Settings Menu */ +.settings-menu { position: fixed; - left: 0; top: 0; - width: 100%; + right: 0; + width: 0; /* Start closed */ height: 100%; - background-color: rgba(0, 0, 0, 0.5); /* Background overlay */ - justify-content: center; - align-items: center; + background-color: var(--piggy-menu); + color: var(--piggy-menu-text); + overflow-x: hidden; /* Hide horizontal overflow */ + transition: width 0.5s; z-index: 10000; + border-left: 1px solid var(--piggy-button); } -.modal-content { - background-color: white; - padding: 20px; - border-radius: 5px; - text-align: center; +/* Open State */ +.settings-menu.open { + width: 300px; /* Adjust the width as needed */ } -.theme-option { - margin: 5px; +/* Close Button */ +.settings-menu .closebtn { + position: absolute; + top: 20px; + left: 20px; + font-size: 36px; + text-decoration: none; +} + +/* Settings Content */ +.settings-content { + width: 300px; + padding: 60px 20px 20px 20px; /* Top padding to push content below the close button */ +} + +/* Theme Select */ +.settings-option { + width: 100%; /* Occupies full width of its container */ padding: 10px; + margin-bottom: 10px; + border-radius: 5px; + border: 1px solid var(--piggy-dark); background-color: var(--piggy-button); color: var(--piggy-text-button); cursor: pointer; - border-radius: 5px; - width: max-content; - border: -1px solid black; + appearance: none; /* Removes default styles for consistent appearance */ } -.theme-option:hover { +.settings-option:hover { background-color: var(--piggy-button-hover); } -.theme-title { - color: #000000; - font-weight: bold; +.theme-select option { + background-color: var(--piggy-light); + color: var(--piggy-dark); } -.theme-tooltip { +/* Option Item */ +.theme-option { + padding: 10px; + cursor: pointer; + color: var(--piggy-dark); position: relative; - display: inline-block; } -.theme-tooltip .theme-tooltiptext { - visibility: hidden; - width: 120px; - background-color: black; - color: #fff; - text-align: center; - border: 2px solid white; - border-radius: 6px; - padding: 5px 0; - - /* Position the tooltip */ - position: absolute; - z-index: 1; - top: 100%; - left: 0%; +/* Option Hover */ +.theme-option:hover { + background-color: var(--piggy-button-hover); } -.theme-tooltip:hover .theme-tooltiptext { +/* Show Tooltip on Hover */ +.theme-option:hover .theme-tooltiptext { visibility: visible; } \ No newline at end of file diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css index 01770a1..4ad93dc 100644 --- a/piggy/static/css/themes/classic.css +++ b/piggy/static/css/themes/classic.css @@ -49,6 +49,11 @@ description: The classic look of piggy! --piggy-text-title: var(--piggy-dark); --piggy-text-breadcrumb: var(--piggy-dark); --piggy-text-breadcrumb-hover: var(--piggy-dark); + + --piggy-menu: var(--piggy-light); + --piggy-menu-text: var(--piggy-dark); + + transition: 1s ease; } [data-theme="classic"] .level-count-container { diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css index 605e154..3c4831d 100644 --- a/piggy/static/css/themes/dark.css +++ b/piggy/static/css/themes/dark.css @@ -53,4 +53,7 @@ description: The default dark theme. --piggy-text-title: var(--piggy-light); --piggy-text-breadcrumb: var(--piggy-light); --piggy-text-breadcrumb-hover: #a6aaad; + + --piggy-menu: var(--piggy-dark); + --piggy-menu-text: var(--piggy-light); } \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 85f1ea7..926fed2 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -91,5 +91,30 @@ description: High contrast theme for maximum visibility. color: #fff; background-color: #000; top: 7px; - left: 12px; + left: 11px; +} + +[data-theme="high-contrast"] .settings-menu { + background-color: black; + border-left: 4px solid white; +} + +[data-theme="high-contrast"] .theme-select option { + background-color: black; +} + +[data-theme="high-contrast"] .settings-option { + border-width: 3px; + border-radius: 0px; +} + +[data-theme="high-contrast"] #settings-btn { + border-radius: 0; + border-width: 3px; +} + +[data-theme="high-contrast"] .tag-box { + background-color: transparent !important; + border-color: white !important; + border-width: 3px; } \ No newline at end of file diff --git a/piggy/static/css/themes/light.css b/piggy/static/css/themes/light.css index cb8474f..0c9bad0 100644 --- a/piggy/static/css/themes/light.css +++ b/piggy/static/css/themes/light.css @@ -50,9 +50,16 @@ description: The default light theme. --piggy-text-title: var(--piggy-dark); --piggy-text-breadcrumb: var(--piggy-dark); --piggy-text-breadcrumb-hover: var(--piggy-dark); + + --piggy-menu: var(--piggy-light); + --piggy-menu-text: var(--piggy-dark); } [data-theme="light"] .level-count-container { color: var(--piggy-dark); background-color: var(--piggy-main); +} + +[data-theme="light"] .settings-option { + color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/piggy-dark.css b/piggy/static/css/themes/piggy-dark.css index e237868..018b8b1 100644 --- a/piggy/static/css/themes/piggy-dark.css +++ b/piggy/static/css/themes/piggy-dark.css @@ -50,10 +50,9 @@ description: A dark pink theme. --piggy-text-title: var(--piggy-dark); --piggy-text-breadcrumb: var(--piggy-dark); --piggy-text-breadcrumb-hover: #f0e1e4; /* Hover effect for breadcrumb */ -} -[data-theme="piggy-dark"] body { - font-family: "Playpen Sans", sans-serif; + --piggy-menu: var(--piggy-light); + --piggy-menu-text: var(--piggy-dark); } [data-theme="piggy-dark"] .level-count-container { diff --git a/piggy/static/css/themes/piggy.css b/piggy/static/css/themes/piggy.css index 85cc51b..bcf0e36 100644 --- a/piggy/static/css/themes/piggy.css +++ b/piggy/static/css/themes/piggy.css @@ -49,10 +49,11 @@ description: Relaxing pastel pink theme. --piggy-text-title: var(--piggy-dark); --piggy-text-breadcrumb: var(--piggy-dark); --piggy-text-breadcrumb-hover: var(--piggy-dark); -} -[data-theme="piggy"] body { - font-family: "Playpen Sans", sans-serif; + --piggy-font: var("Playpen Sans", sans-serif); + + --piggy-menu: rgb(255, 204, 213); + --piggy-menu-text: var(--piggy-dark); } [data-theme="piggy"] .level-count-container { diff --git a/piggy/static/css/themes/synthwave.css b/piggy/static/css/themes/synthwave.css index 61e395f..3017fb8 100644 --- a/piggy/static/css/themes/synthwave.css +++ b/piggy/static/css/themes/synthwave.css @@ -53,4 +53,15 @@ description: Fancy sunset, purple, neon, gradients! --piggy-text-title: #ffcc66; /* Golden for titles */ --piggy-text-breadcrumb: var(--piggy-text-main); --piggy-text-breadcrumb-hover: #ffd27f; /* Soft golden yellow for hover */ + + --piggy-menu: var(--piggy-dark); + --piggy-menu-text: var(--piggy-light); +} + +[data-theme="synthwave"] .settings-option { + color: var(--piggy-light); +} + +[data-theme="synthwave"] #settings-btn { + color: var(--piggy-light); } \ No newline at end of file diff --git a/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff b/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff new file mode 100644 index 0000000..3948189 Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff differ diff --git a/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff2 b/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff2 new file mode 100644 index 0000000..aa7bcde Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Bold-Italic.woff2 differ diff --git a/piggy/static/fonts/OpenDyslexic-Bold.woff b/piggy/static/fonts/OpenDyslexic-Bold.woff new file mode 100644 index 0000000..41886ae Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Bold.woff differ diff --git a/piggy/static/fonts/OpenDyslexic-Bold.woff2 b/piggy/static/fonts/OpenDyslexic-Bold.woff2 new file mode 100644 index 0000000..2f04ad1 Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Bold.woff2 differ diff --git a/piggy/static/fonts/OpenDyslexic-Italic.woff b/piggy/static/fonts/OpenDyslexic-Italic.woff new file mode 100644 index 0000000..a23797c Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Italic.woff differ diff --git a/piggy/static/fonts/OpenDyslexic-Italic.woff2 b/piggy/static/fonts/OpenDyslexic-Italic.woff2 new file mode 100644 index 0000000..00c1908 Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Italic.woff2 differ diff --git a/piggy/static/fonts/OpenDyslexic-Regular.woff b/piggy/static/fonts/OpenDyslexic-Regular.woff new file mode 100644 index 0000000..26a2934 Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Regular.woff differ diff --git a/piggy/static/fonts/OpenDyslexic-Regular.woff2 b/piggy/static/fonts/OpenDyslexic-Regular.woff2 new file mode 100644 index 0000000..47e26d8 Binary files /dev/null and b/piggy/static/fonts/OpenDyslexic-Regular.woff2 differ diff --git a/piggy/static/img/icons/arrow-icon.svg b/piggy/static/img/icons/arrow-icon.svg new file mode 100644 index 0000000..6e54744 --- /dev/null +++ b/piggy/static/img/icons/arrow-icon.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/piggy/static/img/icons/gear.svg b/piggy/static/img/icons/gear.svg new file mode 100644 index 0000000..4fa96ce --- /dev/null +++ b/piggy/static/img/icons/gear.svg @@ -0,0 +1,24 @@ + + + + + + + + + + \ No newline at end of file diff --git a/piggy/static/js/main.js b/piggy/static/js/main.js index 3cc26f2..0f5a82d 100644 --- a/piggy/static/js/main.js +++ b/piggy/static/js/main.js @@ -1,31 +1,86 @@ -const modal = document.getElementById('theme-modal'); -const currentTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode +// Get elements +const settingsMenu = document.getElementById('settings-menu'); +const settingsBtn = document.getElementById('settings-btn'); +const closeBtn = document.querySelector('.settings-menu .closebtn'); +const themeSelect = document.getElementById('theme-select'); +const dyslexiaBtn = document.getElementById('dyslexia-button'); -// Function to close the modal -const closeModal = () => { - modal.style.display = 'none'; -}; +const currentTheme = localStorage.getItem('theme') || 'dark'; +const fontTheme = localStorage.getItem('data-font-theme') || 'default'; + +function pageTransition() { + document.body.classList.add("transition"); + setTimeout(() => { + document.body.classList.remove("transition"); + }, 1000); +} + +// Function to open the settings menu +function openSettingsMenu() { + settingsMenu.classList.add('open'); +} + +// Function to close the settings menu +function closeSettingsMenu() { + settingsMenu.classList.remove('open'); +} + +function toggleDyslexia() { + // Retrieve the current theme from the data attribute + let fontTheme = document.documentElement.getAttribute('data-font-theme'); + + // Toggle between 'default' and 'dyslexia' + if (fontTheme === "default") { + document.documentElement.setAttribute('data-font-theme', 'dyslexia'); + localStorage.setItem('data-font-theme', 'dyslexia'); // Save theme to localStorage + dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode [✔]" + } else { + document.documentElement.setAttribute('data-font-theme', 'default'); + localStorage.setItem('data-font-theme', 'default'); // Save theme to localStorage + dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode" + } + + pageTransition(); + +} // Set the current theme on page load document.documentElement.setAttribute('data-theme', currentTheme); +document.documentElement.setAttribute('data-font-theme', fontTheme); -document.getElementById('theme-modal-btn').addEventListener('click', function() { - document.getElementById('theme-modal').style.display = 'block'; // Show the modal +if (fontTheme === "default") { + dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode" +} else { + dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode [✔]" +} + +// Set the selected option based on the current theme +themeSelect.value = currentTheme; + +// Event listener for the Settings button +settingsBtn.addEventListener('click', openSettingsMenu); + +// Event listener for the Close button inside the menu +closeBtn.addEventListener('click', closeSettingsMenu); + +dyslexiaBtn.addEventListener('click', toggleDyslexia); + +// Event listener for theme selection change +themeSelect.addEventListener('change', function() { + pageTransition(); + + const selectedTheme = themeSelect.value; + document.documentElement.setAttribute('data-theme', selectedTheme); + localStorage.setItem('theme', selectedTheme); // Save theme to localStorage }); -// Optional: Close modal if user clicks outside the modal content +// Close settings menu when clicking outside of it window.addEventListener('click', function(event) { - if (event.target === modal) { - closeModal(); + if ( + settingsMenu.classList.contains('open') && // Only if the menu is open + !settingsMenu.contains(event.target) && // Click is outside the menu + event.target !== settingsBtn // Click is not on the settings button + ) { + closeSettingsMenu(); } -}); - -const themeButtons = document.querySelectorAll('.theme-option'); -themeButtons.forEach(button => { - button.addEventListener('click', function() { - const selectedTheme = button.getAttribute('data-theme'); - document.documentElement.setAttribute('data-theme', selectedTheme); - localStorage.setItem('theme', selectedTheme); // Save theme to localStorage - document.getElementById('theme-modal').style.display = 'none'; // Hide modal - }); }); \ No newline at end of file diff --git a/piggy/templates/layout.html b/piggy/templates/layout.html index 68ca50d..66d1370 100644 --- a/piggy/templates/layout.html +++ b/piggy/templates/layout.html @@ -7,7 +7,7 @@ {% block extra_head %} {% endblock %} - +
{% include "partials/parts/breadcrumbs.html" %} {% block header %} diff --git a/piggy/templates/partials/parts/breadcrumbs.html b/piggy/templates/partials/parts/breadcrumbs.html index 7e6cdb7..2fb9b2d 100644 --- a/piggy/templates/partials/parts/breadcrumbs.html +++ b/piggy/templates/partials/parts/breadcrumbs.html @@ -90,6 +90,6 @@ {% endfor %} - {% include 'partials/parts/theme-button.html' %} + {% include 'partials/parts/settings.html' %} {% endif %} diff --git a/piggy/templates/partials/parts/settings.html b/piggy/templates/partials/parts/settings.html new file mode 100644 index 0000000..6b34477 --- /dev/null +++ b/piggy/templates/partials/parts/settings.html @@ -0,0 +1,17 @@ + + + +
+ + × +
+ + {% include 'partials/parts/settings/theme.html' %} +

Other Options:

+ + {% include 'partials/parts/settings/dyslexia.html' %} + +
+
diff --git a/piggy/templates/partials/parts/settings/dyslexia.html b/piggy/templates/partials/parts/settings/dyslexia.html new file mode 100644 index 0000000..45f5e94 --- /dev/null +++ b/piggy/templates/partials/parts/settings/dyslexia.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/piggy/templates/partials/parts/settings/theme.html b/piggy/templates/partials/parts/settings/theme.html new file mode 100644 index 0000000..b957c66 --- /dev/null +++ b/piggy/templates/partials/parts/settings/theme.html @@ -0,0 +1,8 @@ +

Theme:

+
+ +
\ No newline at end of file diff --git a/piggy/templates/partials/parts/styles.html b/piggy/templates/partials/parts/styles.html index 6084095..3408d33 100644 --- a/piggy/templates/partials/parts/styles.html +++ b/piggy/templates/partials/parts/styles.html @@ -61,11 +61,3 @@ rel="stylesheet" /> {% endfor %} - - diff --git a/piggy/templates/partials/parts/theme-button.html b/piggy/templates/partials/parts/theme-button.html deleted file mode 100644 index e50e6b4..0000000 --- a/piggy/templates/partials/parts/theme-button.html +++ /dev/null @@ -1,13 +0,0 @@ - - - \ No newline at end of file diff --git a/piggybank b/piggybank index 9c7fe89..efad33c 160000 --- a/piggybank +++ b/piggybank @@ -1 +1 @@ -Subproject commit 9c7fe899cd008d649a71229e1ffecd41eaf99779 +Subproject commit efad33caf05953465928e1274134b0423ac4f4f5