diff --git a/server/apps/main/templates/main/help.html b/server/apps/main/templates/main/help.html index 8d76665b..c921064c 100644 --- a/server/apps/main/templates/main/help.html +++ b/server/apps/main/templates/main/help.html @@ -46,7 +46,7 @@
What Stories Should I Share On Aut

- Read the code of conduct @@ -66,7 +66,7 @@
Who Can Share Stories On AutSPACEs?<

- Read the code of conduct @@ -108,7 +108,7 @@
What Happens To The Storie

- Read the code of conduct @@ -126,7 +126,7 @@
How Do You Decide Which Stories To P

- Read the code of conduct @@ -143,7 +143,7 @@
What Can I Do If I Want My St

- Read the code of conduct @@ -184,7 +184,7 @@
Can I Share A Story About Someo

- Read the code of conduct @@ -199,7 +199,7 @@
What's the Process for Sharing page when you are logged in and write in the text box about any time you have been effected by your senses. Then you can submit your experience for research or to share publicly on our website. The flow chart below shows the steps you can take to share an experience on AutSPACEs.

-

Flow chart showing the + <p><img src=

diff --git a/server/apps/main/templates/main/partials/navigation.html b/server/apps/main/templates/main/partials/navigation.html index 3d5e5f71..8016795d 100644 --- a/server/apps/main/templates/main/partials/navigation.html +++ b/server/apps/main/templates/main/partials/navigation.html @@ -28,7 +28,6 @@ {% endif %} {% endif %} -
  • Help
    • +
  • + Switch Light/Dark +
    • @@ -73,3 +75,5 @@
    + + diff --git a/server/apps/main/templates/main/what_autism_is.html b/server/apps/main/templates/main/what_autism_is.html index 74b205de..93a236a2 100644 --- a/server/apps/main/templates/main/what_autism_is.html +++ b/server/apps/main/templates/main/what_autism_is.html @@ -38,7 +38,7 @@
    About Autism

    - Find Out More from Autistica @@ -61,7 +61,7 @@
    About Sensory Processing
    - Find Out More from the National Autistic Society diff --git a/static/css/main.css b/static/css/main.css index aea0e822..19de65aa 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -146,7 +146,8 @@ body { line-height: 1.5; font-weight: bold; text-align: center; - color: #fff; + /* color: #fff; */ + color: var(--bs-tertiary-bg); text-decoration: none; } .usage-box a:hover { @@ -181,7 +182,7 @@ body { #value { padding: 4% 5%; background: #309FDC; - color: #fff; + color: var(--bs-body-bg); } .value-text { line-height: 2; @@ -284,7 +285,7 @@ body { /*Platform Information*/ #platform_info { - background: #FFFFFF; + background: var(--bs-body-bg); padding: 4% 5%; color: #1BB5AF; } @@ -319,7 +320,7 @@ body { #platform_usage { background: #FAC145; padding: 4% 5%; - color: #ffffff; + color: var(--bs-body-bg); } .platform-title { @@ -359,9 +360,21 @@ body { } .cta-header, .card-text { - color: #000; + /* color: var(--bs-primary-text-emphasis) */ + color: var(--bs-body-color); } + @include color-mode(dark) { + .card-text{ + color: #fff; + } +} + + .cta-header, .card-text-dark { + color: #fff; + } + + /*Responsive Design*/ @media (max-width: 992px) { @@ -507,11 +520,11 @@ body { } .story-card-text { - color: #000000; line-height: 2; padding: 0 2%; } + .story-text { padding: 2% 11% 3%; text-align: cetner; diff --git a/static/images/submit-experience_grey.svg b/static/images/submit-experience_grey.svg new file mode 100644 index 00000000..ebfce604 --- /dev/null +++ b/static/images/submit-experience_grey.svg @@ -0,0 +1,564 @@ + + + + + + + + + + + + + + + + + + Sign up to AutSPACEs and create an account + + + + + + Sign up to AutSPACEs and create... + + + + + + + + + + + + In the first box, write about a time your senses have affected you - e.g."I avoid getting the train because the platform is too busy". Please follow our code of conduct + + + + + In the first box, write about a... + + + + + + + + + + + + Add as much or as little detail as you like - e.g. date, time location, intensity, consequences. For more examples, look at the "View Stories" page + + + + + Add as much or as little detail... + + + + + + + + + + + + If you want to, add a suggestion for what did or would have made your experience better in the second box, e.g. "wearing noise cancelling headphones helps" + + + + + If you want to, add a suggestion... + + + + + + + + + + + Choose whether you want your story to be shared publicly, both, or neither by ticking the boxes, and then submit + + + + Choose whether you want your sto... + + + + + + + + + + + Once you have shared your story you can view it, edit it, and change your sharing permissions on your "My Stories" page. You will also be able to see if it has been approved by moderators for publishing on the website + + + + Once you have shared your story... + + + + + + + + + + Share as many experiences as you want! + + + + + Share as many experiences as you... + + + + + + + + + + + + When you are logged into your account. Go to the "Share Stories" page + + + + + When you are logged into your ac... + + + + + + + Text is not SVG - cannot display + + + diff --git a/static/js/theme-checker.js b/static/js/theme-checker.js new file mode 100644 index 00000000..28acd9cf --- /dev/null +++ b/static/js/theme-checker.js @@ -0,0 +1,29 @@ + +document.addEventListener('DOMContentLoaded', (event) => { + // Check if the user has set a theme before + let storedTheme = localStorage.getItem('theme'); + + if (storedTheme !== null) { + document.body.setAttribute('data-bs-theme', storedTheme); + footer.setAttribute('data-bs-theme', storedTheme); + } else { + // Get the system theme + let systemTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.body.setAttribute('data-bs-theme', systemTheme); + footer.setAttribute('data-bs-theme', systemTheme); + } +}); + + +document.getElementById('theme-toggle').addEventListener('click', function() { + let currentTheme = document.body.getAttribute('data-bs-theme'); + if (currentTheme === 'dark') { + document.body.setAttribute('data-bs-theme', 'light'); + footer.setAttribute('data-bs-theme', 'light'); + localStorage.setItem('theme', 'light'); + } else { + document.body.setAttribute('data-bs-theme', 'dark'); + footer.setAttribute('data-bs-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } +});