From 7b8ca127a565bff4134df36cb900a57f293b3fa6 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:47:10 -0400
Subject: [PATCH] fixed some thing, fixed turnstile and the ride link i think
---
assets/css/src/input.css | 11 +++-
static/css/tailwind.css | 67 ++++++++++++++------
static/images/discord-icon.svg | 6 +-
static/js/main.js | 79 ++++++++++++++++++------
templates/account/login.html | 4 +-
templates/account/signup.html | 4 +-
templates/accounts/turnstile_widget.html | 4 +-
templates/base/base.html | 68 +-------------------
templates/rides/ride_detail.html | 15 +++--
9 files changed, 135 insertions(+), 123 deletions(-)
diff --git a/assets/css/src/input.css b/assets/css/src/input.css
index 2d556322..80806056 100644
--- a/assets/css/src/input.css
+++ b/assets/css/src/input.css
@@ -61,15 +61,15 @@
}
.status-operating {
- @apply text-green-800 bg-green-100 dark:bg-green-800/30 dark:text-green-100 dark:ring-1 dark:ring-green-400/30;
+ @apply text-green-800 bg-green-100 dark:bg-green-700 dark:text-green-50;
}
.status-closed {
- @apply text-red-800 bg-red-100 dark:bg-red-800/30 dark:text-red-100 dark:ring-1 dark:ring-red-400/30;
+ @apply text-red-800 bg-red-100 dark:bg-red-700 dark:text-red-50;
}
.status-construction {
- @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-800/30 dark:text-yellow-100 dark:ring-1 dark:ring-yellow-400/30;
+ @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-600 dark:text-yellow-50;
}
/* Auth Card Styles */
@@ -134,4 +134,9 @@
.alert-info {
@apply text-blue-800 border border-blue-200 bg-blue-100/90 dark:bg-blue-800/30 dark:text-blue-100 dark:border-blue-700;
}
+
+ /* Turnstile Widget */
+ .turnstile {
+ @apply flex justify-center items-center my-4;
+ }
}
diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index 2c1dafee..28cc1094 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -1772,13 +1772,10 @@ select {
}
.status-operating:is(.dark *) {
- background-color: rgb(22 101 52 / 0.3);
+ --tw-bg-opacity: 1;
+ background-color: rgb(21 128 61 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(220 252 231 / var(--tw-text-opacity));
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- --tw-ring-color: rgb(74 222 128 / 0.3);
+ color: rgb(240 253 244 / var(--tw-text-opacity));
}
.status-closed {
@@ -1789,13 +1786,10 @@ select {
}
.status-closed:is(.dark *) {
- background-color: rgb(153 27 27 / 0.3);
+ --tw-bg-opacity: 1;
+ background-color: rgb(185 28 28 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(254 226 226 / var(--tw-text-opacity));
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- --tw-ring-color: rgb(248 113 113 / 0.3);
+ color: rgb(254 242 242 / var(--tw-text-opacity));
}
.status-construction {
@@ -1806,13 +1800,10 @@ select {
}
.status-construction:is(.dark *) {
- background-color: rgb(133 77 14 / 0.3);
+ --tw-bg-opacity: 1;
+ background-color: rgb(202 138 4 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(254 249 195 / var(--tw-text-opacity));
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- --tw-ring-color: rgb(250 204 21 / 0.3);
+ color: rgb(254 252 232 / var(--tw-text-opacity));
}
/* Auth Card Styles */
@@ -2085,6 +2076,16 @@ select {
color: rgb(219 234 254 / var(--tw-text-opacity));
}
+/* Turnstile Widget */
+
+.turnstile {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.static {
position: static;
}
@@ -3132,6 +3133,11 @@ select {
background-color: rgb(96 165 250 / 0.3);
}
+.dark\:bg-blue-700:is(.dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
.dark\:bg-blue-800\/30:is(.dark *) {
background-color: rgb(30 64 175 / 0.3);
}
@@ -3167,10 +3173,20 @@ select {
background-color: rgb(31 41 55 / 0.9);
}
+.dark\:bg-green-700:is(.dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
.dark\:bg-green-800\/30:is(.dark *) {
background-color: rgb(22 101 52 / 0.3);
}
+.dark\:bg-red-700:is(.dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
.dark\:bg-red-800\/30:is(.dark *) {
background-color: rgb(153 27 27 / 0.3);
}
@@ -3179,6 +3195,11 @@ select {
background-color: rgb(250 204 21 / 0.3);
}
+.dark\:bg-yellow-600:is(.dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
.dark\:bg-yellow-800\/30:is(.dark *) {
background-color: rgb(133 77 14 / 0.3);
}
@@ -3213,6 +3234,11 @@ select {
color: rgb(96 165 250 / var(--tw-text-opacity));
}
+.dark\:text-blue-50:is(.dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
.dark\:text-gray-200:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -3258,6 +3284,11 @@ select {
color: rgb(253 224 71 / var(--tw-text-opacity));
}
+.dark\:text-yellow-50:is(.dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(254 252 232 / var(--tw-text-opacity));
+}
+
.dark\:ring-1:is(.dark *) {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
diff --git a/static/images/discord-icon.svg b/static/images/discord-icon.svg
index 27988af8..59bea5ac 100644
--- a/static/images/discord-icon.svg
+++ b/static/images/discord-icon.svg
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 0cfd562e..e184c4cd 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -81,23 +81,64 @@ document.addEventListener('click', (e) => {
});
});
-// Toggle dark mode icons
-function toggleIcons(isDarkMode) {
- const sunIcon = document.querySelector('.fa-sun');
- const moonIcon = document.querySelector('.fa-moon');
-
- if (isDarkMode) {
- sunIcon.classList.remove('hidden');
- moonIcon.classList.add('hidden');
- } else {
- sunIcon.classList.add('hidden');
- moonIcon.classList.remove('hidden');
- }
-}
+// Theme management
+const themeManager = {
+ init() {
+ // Set up toggle button when DOM is loaded
+ document.addEventListener('DOMContentLoaded', () => {
+ const toggleBtn = document.getElementById('theme-toggle');
+ if (toggleBtn) {
+ toggleBtn.addEventListener('click', () => {
+ this.toggleTheme();
+ });
+ }
-// Add event listener for theme toggle button
-document.getElementById('theme-toggle').addEventListener('click', () => {
- const isDarkMode = document.documentElement.classList.toggle('dark');
- localStorage.setItem('darkMode', isDarkMode);
- toggleIcons(isDarkMode);
-});
+ // Watch for system theme changes
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ if (!localStorage.theme) {
+ this.setTheme(e.matches ? 'dark' : 'light');
+ }
+ });
+
+ // Set initial theme icon state
+ this.updateThemeIcon();
+ });
+ },
+
+ setTheme(theme) {
+ if (theme === 'dark') {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+
+ localStorage.setItem('theme', theme);
+ this.updateThemeIcon();
+ },
+
+ toggleTheme() {
+ const isDark = document.documentElement.classList.contains('dark');
+ this.setTheme(isDark ? 'light' : 'dark');
+ },
+
+ updateThemeIcon() {
+ const isDark = document.documentElement.classList.contains('dark');
+ const sunIcon = document.querySelector('#theme-toggle .fa-sun');
+ const moonIcon = document.querySelector('#theme-toggle .fa-moon');
+
+ if (sunIcon && moonIcon) {
+ // Show sun icon in dark mode (to indicate you can switch to light)
+ // Show moon icon in light mode (to indicate you can switch to dark)
+ if (isDark) {
+ sunIcon.classList.remove('hidden');
+ moonIcon.classList.add('hidden');
+ } else {
+ sunIcon.classList.add('hidden');
+ moonIcon.classList.remove('hidden');
+ }
+ }
+ }
+};
+
+// Initialize theme management
+themeManager.init();
diff --git a/templates/account/login.html b/templates/account/login.html
index 96bfe9a5..8902b71d 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -23,10 +23,10 @@
tabindex="0"
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
{% if provider.id == 'google' %}
-
+ 
Continue with Google
{% elif provider.id == 'discord' %}
-
+ 
Continue with Discord
{% endif %}
diff --git a/templates/account/signup.html b/templates/account/signup.html
index 10b32382..942b0f14 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -24,10 +24,10 @@
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
>
{% if provider.id == 'google' %}
-
+
Continue with Google
{% elif provider.id == 'discord' %}
-
+
Continue with Discord
{% endif %}
diff --git a/templates/accounts/turnstile_widget.html b/templates/accounts/turnstile_widget.html
index 25e0fbce..11f5df94 100644
--- a/templates/accounts/turnstile_widget.html
+++ b/templates/accounts/turnstile_widget.html
@@ -1,2 +1,4 @@
-
+
diff --git a/templates/base/base.html b/templates/base/base.html
index b7e46868..b6c64c4e 100644
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -34,71 +34,6 @@
{% block extra_head %}{% endblock %}
-
-
-