batman
This commit is contained in:
pika
commit
345a801c40
33 changed files with 5499 additions and 0 deletions
72
app/templates/auth/login.html
Normal file
72
app/templates/auth/login.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Login - Vim Docs{% endblock %}
|
||||
|
||||
{% block auth_content %}
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-900">
|
||||
<div class="w-full max-w-md p-8 space-y-8 bg-gray-800 rounded-lg shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl font-bold text-white">
|
||||
<i class="mdi mdi-vim text-primary text-4xl mr-2"></i> Vim Docs
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-400">Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" method="POST" action="{{ url_for('auth.login') }}">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="p-4 {{ 'bg-red-600/20 text-red-400' if category == 'error' else 'bg-green-600/20 text-green-400' }} rounded-md">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-400">Username</label>
|
||||
<div class="mt-1">
|
||||
{{ form.username(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
|
||||
</div>
|
||||
{% for error in form.username.errors %}
|
||||
<p class="mt-1 text-sm text-red-400">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-400">Password</label>
|
||||
<div class="mt-1">
|
||||
{{ form.password(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
|
||||
</div>
|
||||
{% for error in form.password.errors %}
|
||||
<p class="mt-1 text-sm text-red-400">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
{{ form.remember_me(class="h-4 w-4 text-primary focus:ring-primary border-gray-600 rounded bg-gray-700") }}
|
||||
<label for="remember_me" class="ml-2 block text-sm text-gray-400">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ form.submit(class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary") }}
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p class="text-sm text-gray-400">
|
||||
Don't have an account?
|
||||
<a href="{{ url_for('auth.signup') }}" class="font-medium text-primary hover:text-primary-light">
|
||||
Sign up
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
89
app/templates/auth/settings.html
Normal file
89
app/templates/auth/settings.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Settings - Vim Docs{% endblock %}
|
||||
|
||||
{% block header_title %}Settings{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-4xl mx-auto p-6">
|
||||
<div class="bg-gray-800 shadow-md rounded-lg overflow-hidden">
|
||||
<div class="border-b border-gray-700 p-6">
|
||||
<h2 class="text-xl font-semibold text-white mb-2">User Settings</h2>
|
||||
<p class="text-gray-400">Customize your Vim Docs experience</p>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="p-4 m-4 {{ 'bg-red-600/20 text-red-400' if category == 'error' else 'bg-green-600/20 text-green-400' }} rounded-md">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('auth.settings') }}" class="p-6 space-y-6">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-white mb-4">Theme Settings</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-400 mb-2">
|
||||
Primary Color
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<input type="color" id="theme_color" name="theme_color"
|
||||
value="{{ current_user.theme_color }}"
|
||||
class="h-10 w-20 bg-transparent rounded border border-gray-600">
|
||||
<span class="ml-3 text-gray-400 text-sm">{{ current_user.theme_color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-400 mb-2">Color Presets</p>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" data-color="#50fa7b" class="preset-color w-8 h-8 rounded-full bg-[#50fa7b]"></button>
|
||||
<button type="button" data-color="#bd93f9" class="preset-color w-8 h-8 rounded-full bg-[#bd93f9]"></button>
|
||||
<button type="button" data-color="#ff79c6" class="preset-color w-8 h-8 rounded-full bg-[#ff79c6]"></button>
|
||||
<button type="button" data-color="#f1fa8c" class="preset-color w-8 h-8 rounded-full bg-[#f1fa8c]"></button>
|
||||
<button type="button" data-color="#8be9fd" class="preset-color w-8 h-8 rounded-full bg-[#8be9fd]"></button>
|
||||
<button type="button" data-color="#ffb86c" class="preset-color w-8 h-8 rounded-full bg-[#ffb86c]"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t border-gray-700">
|
||||
<button type="submit" class="px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const colorInput = document.getElementById('theme_color');
|
||||
const presetButtons = document.querySelectorAll('.preset-color');
|
||||
|
||||
presetButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const color = this.getAttribute('data-color');
|
||||
colorInput.value = color;
|
||||
|
||||
// Apply selected style to the button
|
||||
presetButtons.forEach(btn => btn.classList.remove('ring-2', 'ring-white'));
|
||||
this.classList.add('ring-2', 'ring-white');
|
||||
});
|
||||
|
||||
// Apply selected style to the current color on load
|
||||
if (button.getAttribute('data-color') === colorInput.value) {
|
||||
button.classList.add('ring-2', 'ring-white');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
73
app/templates/auth/signup.html
Normal file
73
app/templates/auth/signup.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Sign Up - Vim Docs{% endblock %}
|
||||
|
||||
{% block auth_content %}
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-900">
|
||||
<div class="w-full max-w-md p-8 space-y-8 bg-gray-800 rounded-lg shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl font-bold text-white">
|
||||
<i class="mdi mdi-vim text-primary text-4xl mr-2"></i> Vim Docs
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-400">Create your account</p>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" method="POST" action="{{ url_for('auth.signup') }}">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="p-4 {{ 'bg-red-600/20 text-red-400' if category == 'error' else 'bg-green-600/20 text-green-400' }} rounded-md">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-400">Username</label>
|
||||
<div class="mt-1">
|
||||
{{ form.username(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
|
||||
</div>
|
||||
{% for error in form.username.errors %}
|
||||
<p class="mt-1 text-sm text-red-400">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-400">Password</label>
|
||||
<div class="mt-1">
|
||||
{{ form.password(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary", placeholder="Minimum 8 characters") }}
|
||||
</div>
|
||||
{% for error in form.password.errors %}
|
||||
<p class="mt-1 text-sm text-red-400">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password2" class="block text-sm font-medium text-gray-400">Confirm Password</label>
|
||||
<div class="mt-1">
|
||||
{{ form.password2(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
|
||||
</div>
|
||||
{% for error in form.password2.errors %}
|
||||
<p class="mt-1 text-sm text-red-400">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ form.submit(class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary") }}
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p class="text-sm text-gray-400">
|
||||
Already have an account?
|
||||
<a href="{{ url_for('auth.login') }}" class="font-medium text-primary hover:text-primary-light">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue