htmx and Tailwind CSS production setup

This commit is contained in:
Alphonse Paix
2025-09-16 19:42:35 +02:00
parent ee72073ff5
commit 626726d206
13 changed files with 1376 additions and 308 deletions

View File

@@ -1,69 +1,43 @@
{% extends "base.html" %} {% block title %}Login - zero2prod{% endblock %} {%
block content %}
<div class="min-h-[60vh] flex items-center justify-center">
<div class="max-w-md w-full space-y-8">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900">Login</h2>
<p class="mt-2 text-sm text-gray-600">
Sign in to access the admin dashboard.
</p>
</div>
<div class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
<form action="/login" method="post" class="space-y-6">
<div>
<label
for="username"
class="block text-sm font-medium text-gray-700 mb-2"
>
Username
</label>
<input
type="text"
id="username"
name="username"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label
for="password"
class="block text-sm font-medium text-gray-700 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
>
Continue
</button>
</div>
</form>
<div class="mt-4 text-center">{{ error }}</div>
</div>
<div class="text-center">
<a
href="/"
class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
>
← Back to homepage
</a>
{% extends "base.html" %}
{% block title %}Login - zero2prod{% endblock %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center">
<div class="max-w-md w-full space-y-8">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900">Login</h2>
<p class="mt-2 text-sm text-gray-600">Sign in to access the admin dashboard.</p>
</div>
<div class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
<form action="/login" method="post" class="space-y-6">
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
<input type="text"
id="username"
name="username"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<input type="password"
id="password"
name="password"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
Continue
</button>
</div>
</form>
<div class="mt-4 text-center">{{ error }}</div>
</div>
<div class="text-center">
<a href="/"
class="text-sm text-blue-600 hover:text-blue-500 transition-colors">← Back to homepage</a>
</div>
</div>
</div>
</div>
{% endblock %}