Aby przygotować stronę główną z Tailwind CSS i formularzem logowania, musimy najpierw skonfigurować strukturę szablonów (templates) i tras (URLs).

Krok 1: Utworzenie katalogu na szablony

W głównym katalogu /opt/wsi_django utwórz folder dla szablonów HTML:

mkdir templates

Krok 2: Konfiguracja wsi_django/settings.py

nano wsi_django/settings.py

znajdź sekcję TEMPLATES i w kluczu 'DIRS' dodaj ścieżkę do nowego katalogu:

'DIRS': [BASE_DIR / 'templates'],

Na końcu pliku dodaj konfigurację przekierowań po logowaniu i wylogowaniu:

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'

Krok 3: Dodanie widoku i adresu URL dla strony głównej

nano wsi_django/urls.py

Zastąp jego zawartość poniższym kodem (wykorzystamy wbudowany widok logowania Django LoginView, który obsłuży logowanie):

from django.contrib import admin
from django.urls import path
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('admin/', admin.site.class_view if hasattr(admin, 'class_view') else admin.site.urls), # standardowy admin
    path('', auth_views.LoginView.as_view(template_name='index.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
]

Krok 4: Utworzenie szablonu HTML z Tailwind CSS

nano templates/index.html
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WSI - Wewnątrzszkolny System Informatyczny</title>
    <!-- Tailwind CSS z CDN do celów deweloperskich -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 flex flex-col min-h-screen font-sans">

    <!-- Header / Logo & Instytucja -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <!-- Proste tymczasowe logo SVG -->
                <svg class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
                <div>
                    <span class="font-bold text-lg text-gray-950 block leading-tight">Szkoła Podstawowa nr 1</span>
                    <span class="text-xs text-gray-500">Wydział Edukacji</span>
                </div>
            </div>
            <!-- CTA do strony głównej instytucji -->
            <a href="https://example.com" target="_blank" class="text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors">
                Strona główna szkoły &rarr;
            </a>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-grow flex items-center justify-center px-4 py-12">
        <div class="max-w-md w-full space-y-8 bg-white p-8 rounded-xl shadow-md border border-gray-100">
            <div class="text-center">
                <h1 class="text-2xl font-bold text-gray-900">WSI</h1>
                <p class="mt-2 text-sm text-gray-600">Wewnątrzszkolny System Informatyczny</p>
            </div>

            <!-- Formularz Logowania -->
            <form class="mt-8 space-y-6" method="POST">
                {% csrf_token %}
                
                {% if form.errors %}
                    <div class="bg-red-50 border border-red-200 text-red-700 p-3 rounded-lg text-sm text-center">
                        Niepoprawny login lub hasło.
                    </div>
                {% endif %}

                <div class="space-y-4">
                    <div>
                        <label for="id_username" class="block text-sm font-medium text-gray-700">Nazwa użytkownika</label>
                        <input id="id_username" name="username" type="text" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div>
                        <label for="id_password" class="block text-sm font-medium text-gray-700">Hasło</label>
                        <input id="id_password" name="password" type="password" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                </div>

                <div>
                    <button type="submit" class="w-full flex justify-center py-2 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">
                        Zaloguj się
                    </button>
                </div>
            </form>
        </div>
    </main>

    <!-- Stopka -->
    <footer class="bg-white border-t border-gray-100 py-4">
        <div class="max-w-7xl mx-auto px-4 text-center text-xs text-gray-500">
            &copy; {% now "Y" %} Wewnątrzszkolny System Informatyczny. Wszelkie prawa zastrzeżone.
        </div>
    </footer>

</body>
</html>

 

 

 

 

 

 

Spis treści: