pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 11:31:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

fixed some thangs, implemented cloudflare turnstile

Browse Source
This commit is contained in:
pacnpal
2024-10-29 13:31:30 -04:00
parent 66114514c1
commit e00ea42c47
17 changed files with 234 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templates/account/login.html
View File

@@ -2,6 +2,7 @@
{% load i18n %}
{% load account socialaccount %}
{% load static %}
{% load turnstile_tags %}
{% block title %}Login - ThrillWiki{% endblock %}
@@ -88,6 +89,8 @@
</div>
</div>
{% turnstile_widget %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
{% endif %}

3
templates/account/signup.html
View File

@@ -2,6 +2,7 @@
{% load i18n %}
{% load account socialaccount %}
{% load static %}
{% load turnstile_tags %}
{% block title %}Register - ThrillWiki{% endblock %}
@@ -116,6 +117,8 @@
{% endif %}
</div>
{% turnstile_widget %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
{% endif %}

2
templates/accounts/turnstile_widget.html Normal file
View File

@@ -0,0 +1,2 @@
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="{{ site_key }}" data-theme="light"></div>

69
templates/base/base.html
View File

@@ -1,6 +1,6 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,9 +11,14 @@
<!-- Prevent flash of wrong theme -->
<script>
// Immediately remove 'no-js' class and add initial theme class
document.documentElement.classList.remove('no-js');
if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
// Get theme from localStorage or system preference
let theme = localStorage.getItem('theme');
if (!theme) {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
localStorage.setItem('theme', theme);
}
// Apply theme immediately before page loads
if (theme === 'dark') {
document.documentElement.classList.add('dark');
}
</script>
@@ -49,30 +54,44 @@
this.setTheme(e.matches ? 'dark' : 'light');
}
});
// Set initial theme icon state
this.updateThemeIcon();
});
},
setTheme(theme) {
// Force a repaint by temporarily adding a class
document.documentElement.classList.add('theme-transitioning');
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.theme = theme;
// Remove the transition class after a short delay
setTimeout(() => {
document.documentElement.classList.remove('theme-transitioning');
}, 100);
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');
}
}
}
};
@@ -81,24 +100,24 @@
</script>
<style>
/* Prevent flash of wrong theme */
.no-js {
visibility: hidden;
}
/* Smooth theme transitions */
:root {
--theme-transition-duration: 200ms;
}
.theme-transitioning * {
transition: none !important;
}
body {
transition: background-color var(--theme-transition-duration) ease-in-out,
color var(--theme-transition-duration) ease-in-out;
}
/* Ensure theme toggle button has consistent size */
#theme-toggle {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white">
@@ -141,9 +160,9 @@
<!-- Right Side Menu -->
<div class="flex items-center space-x-6">
<!-- Theme Toggle -->
<button id="theme-toggle" class="p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-primary/10 dark:hover:bg-primary/20 transition-all shadow-sm border border-gray-200/50 dark:border-gray-600/50">
<i class="hidden text-lg fas fa-sun dark:inline"></i>
<i class="text-lg fas fa-moon dark:hidden"></i>
<button id="theme-toggle" class="inline-flex items-center justify-center p-2 text-gray-500 transition-all border border-gray-200 rounded-lg bg-white/80 dark:bg-gray-700/80 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 dark:border-gray-600">
<i class="hidden text-lg fas fa-sun"></i>
<i class="hidden text-lg fas fa-moon"></i>
</button>
<!-- User Menu -->