styled login

config/settings.py

@@ -180,3 +180,8 @@ if EMAIL_USE_SSL:
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+LOGIN_URL = 'login'
+LOGIN_REDIRECT_URL = 'index'
+LOGOUT_REDIRECT_URL = 'index'
+

cookies.txt

@@ -0,0 +1,5 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
+127.0.0.1	FALSE	/	TRUE	1797450401	csrftoken	gNby2S5EHlDB1Xsw0eGC7JVKq4F45wQW

core/admin.py

@@ -1,3 +1,14 @@
 from django.contrib import admin
+from .models import Project, Client
 
-# Register your models here.
+@admin.register(Client)
+class ClientAdmin(admin.ModelAdmin):
+    list_display = ('name', 'email', 'phone')
+    search_fields = ('name',)
+
+@admin.register(Project)
+class ProjectAdmin(admin.ModelAdmin):
+    list_display = ('name', 'client', 'start_date', 'end_date', 'status')
+    list_filter = ('status', 'client')
+    search_fields = ('name', 'client__name')
+    autocomplete_fields = ('client',)

core/forms.py

@@ -0,0 +1,29 @@
+from django import forms
+from .models import Project, Client
+from django.contrib.auth.forms import AuthenticationForm
+
+class ProjectForm(forms.ModelForm):
+    class Meta:
+        model = Project
+        fields = ['name', 'client', 'start_date', 'end_date', 'status']
+        widgets = {
+            'name': forms.TextInput(attrs={'class': 'form-control'}),
+            'client': forms.Select(attrs={'class': 'form-select'}),
+            'start_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
+            'end_date': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
+            'status': forms.Select(attrs={'class': 'form-select'}),
+        }
+
+class ClientForm(forms.ModelForm):
+    class Meta:
+        model = Client
+        fields = ['name', 'email', 'phone']
+        widgets = {
+            'name': forms.TextInput(attrs={'class': 'form-control'}),
+            'email': forms.EmailInput(attrs={'class': 'form-control'}),
+            'phone': forms.TextInput(attrs={'class': 'form-control'}),
+        }
+
+class LoginForm(AuthenticationForm):
+    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Username'}))
+    password = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Password'}))

core/migrations/0001_initial.py

@@ -0,0 +1,25 @@
+# Generated by Django 5.2.7 on 2025-12-17 18:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Project',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200, verbose_name='Nazwa projektu')),
+                ('client', models.CharField(max_length=200, verbose_name='Kontrahent')),
+                ('start_date', models.DateField(verbose_name='Data rozpoczęcia')),
+                ('end_date', models.DateField(verbose_name='Data zakończenia')),
+                ('status', models.CharField(choices=[('planowany', 'Planowany'), ('realizowany', 'Realizowany'), ('zakonczony', 'Zakończony')], default='planowany', max_length=20, verbose_name='Status')),
+            ],
+        ),
+    ]

core/migrations/0002_client_alter_project_end_date_alter_project_name_and_more.py

@@ -0,0 +1,93 @@
+# Generated by Django 5.2.7 on 2025-12-17 19:22
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+def migrate_clients_forward(apps, schema_editor):
+    Project = apps.get_model('core', 'Project')
+    Client = apps.get_model('core', 'Client')
+    for project in Project.objects.all():
+        client_name = getattr(project, 'client_temp', None)
+        if client_name:
+            client, created = Client.objects.get_or_create(name=client_name)
+            project.client = client
+            project.save()
+
+def migrate_clients_backward(apps, schema_editor):
+    # This is a one-way migration, but we can try to restore the old values
+    Project = apps.get_model('core', 'Project')
+    for project in Project.objects.all():
+        if project.client:
+            project.client_temp = project.client.name
+            project.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0001_initial'),
+    ]
+
+    operations = [
+        # 1. Create the new Client model
+        migrations.CreateModel(
+            name='Client',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200, verbose_name='Client Name')),
+                ('email', models.EmailField(blank=True, max_length=200, null=True, verbose_name='Email')),
+                ('phone', models.CharField(blank=True, max_length=20, null=True, verbose_name='Phone')),
+            ],
+        ),
+
+        # 2. Rename the existing 'client' CharField to a temporary field
+        migrations.RenameField(
+            model_name='project',
+            old_name='client',
+            new_name='client_temp',
+        ),
+
+        # 3. Add the new 'client' ForeignKey field, allowing it to be null for now
+        migrations.AddField(
+            model_name='project',
+            name='client',
+            field=models.ForeignKey(
+                to='core.Client',
+                on_delete=django.db.models.deletion.CASCADE,
+                related_name='projects',
+                verbose_name='Client',
+                null=True, # Allow null during migration
+                blank=True
+            ),
+        ),
+
+        # 4. Run the Python script to migrate the data
+        migrations.RunPython(migrate_clients_forward, migrate_clients_backward),
+
+        # 5. Remove the temporary CharField
+        migrations.RemoveField(
+            model_name='project',
+            name='client_temp',
+        ),
+
+        # 6. Alter other fields (translations)
+        migrations.AlterField(
+            model_name='project',
+            name='end_date',
+            field=models.DateField(verbose_name='End Date'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='name',
+            field=models.CharField(max_length=200, verbose_name='Project Name'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='start_date',
+            field=models.DateField(verbose_name='Start Date'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='status',
+            field=models.CharField(choices=[('planning', 'Planning'), ('in_progress', 'In Progress'), ('completed', 'Completed')], default='planning', max_length=20, verbose_name='Status'),
+        ),
+    ]

core/models.py

@@ -1,3 +1,25 @@
 from django.db import models
 
-# Create your models here.
+class Client(models.Model):
+    name = models.CharField(max_length=200, verbose_name="Client Name")
+    email = models.EmailField(max_length=200, verbose_name="Email", blank=True, null=True)
+    phone = models.CharField(max_length=20, verbose_name="Phone", blank=True, null=True)
+
+    def __str__(self):
+        return self.name
+
+class Project(models.Model):
+    STATUS_CHOICES = [
+        ('planning', 'Planning'),
+        ('in_progress', 'In Progress'),
+        ('completed', 'Completed'),
+    ]
+
+    name = models.CharField(max_length=200, verbose_name="Project Name")
+    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='projects', verbose_name="Client", null=True, blank=True)
+    start_date = models.DateField(verbose_name="Start Date")
+    end_date = models.DateField(verbose_name="End Date")
+    status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='planning', verbose_name="Status")
+
+    def __str__(self):
+        return self.name

core/templates/base.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
+  <title>{% block title %}webFirma{% endblock %}</title>
   {% if project_description %}
   <meta name="description" content="{{ project_description }}">
   <meta property="og:description" content="{{ project_description }}">
@@ -14,12 +14,53 @@
   <meta property="twitter:image" content="{{ project_image_url }}">
   {% endif %}
   {% load static %}
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+  <script src="https://unpkg.com/feather-icons"></script>
   {% block head %}{% endblock %}
 </head>
 
 <body>
+  <div class="app-layout">
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2>webFirma</h2>
+      </div>
+      <nav class="sidebar-nav">
+        <ul>
+          <li class="{% if request.path == '/' %}active{% endif %}"><a href="{% url 'index' %}"><i data-feather="home"></i> Dashboard</a></li>
+          <li class="{% if '/projects' in request.path %}active{% endif %}"><a href="{% url 'projects' %}"><i data-feather="briefcase"></i> Projects</a></li>
+          <li><a href="#"><i data-feather="file-text"></i> Invoices</a></li>
+          <li><a href="{% url 'clients' %}"><i data-feather="users"></i> Clients</a></li>
+          <li><a href="#"><i data-feather="settings"></i> Settings</a></li>
+        </ul>
+        <ul class="auth-nav">
+          {% if user.is_authenticated %}
+            <li>
+              <a href="{% url 'logout' %}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                <i data-feather="log-out"></i> Logout
+              </a>
+              <form id="logout-form" action="{% url 'logout' %}" method="post" style="display: none;">
+                {% csrf_token %}
+              </form>
+            </li>
+          {% else %}
+            <li><a href="{% url 'login' %}"><i data-feather="log-in"></i> Login</a></li>
+            <li><a href="{% url 'register' %}"><i data-feather="user-plus"></i> Register</a></li>
+          {% endif %}
+        </ul>
+        </ul>
+      </nav>
+    </div>
+    <div class="main-content">
       {% block content %}{% endblock %}
+    </div>
+  </div>
+  <script>
+    feather.replace()
+  </script>
 </body>
 
 </html>

core/templates/base_public.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>{% block title %}webFirma{% endblock %}</title>
+  {% if project_description %}
+  <meta name="description" content="{{ project_description }}">
+  <meta property="og:description" content="{{ project_description }}">
+  <meta property="twitter:description" content="{{ project_description }}">
+  {% endif %}
+  {% if project_image_url %}
+  <meta property="og:image" content="{{ project_image_url }}">
+  <meta property="twitter:image" content="{{ project_image_url }}">
+  {% endif %}
+  {% load static %}
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+  <script src="https://unpkg.com/feather-icons"></script>
+  {% block head %}{% endblock %}
+</head>
+
+<body>
+  <div class="public-layout">
+    <header class="public-header">
+      <div class="logo">
+        <h2>webFirma</h2>
+      </div>
+      <div class="public-actions">
+        <a href="{% url 'login' %}" class="btn">Login</a>
+        <a href="{% url 'register' %}" class="btn btn-primary">Register</a>
+      </div>
+    </header>
+    <main class="public-content">
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    feather.replace()
+  </script>
+</body>
+
+</html>

core/templates/core/add_client.html

@@ -0,0 +1,48 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Add Client - webFirma{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white">
+                    <h4 class="mb-0">Create a New Client</h4>
+                </div>
+                <div class="card-body">
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="form-floating mb-3">
+                            {{ form.name }}
+                            <label for="{{ form.name.id_for_label }}">Name</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            {{ form.email }}
+                            <label for="{{ form.email.id_for_label }}">Email</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            {{ form.phone }}
+                            <label for="{{ form.phone.id_for_label }}">Phone</label>
+                        </div>
+                        <div class="d-flex justify-content-end">
+                            <a href="{% url 'clients' %}" class="btn btn-secondary me-2">Cancel</a>
+                            <button type="submit" class="btn btn-primary">Save Client</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<style>
+    .form-floating .form-control {
+        height: calc(3.5rem + 2px);
+        padding: 1rem;
+    }
+    .form-floating > label {
+        padding: 1rem;
+    }
+</style>
+{% endblock %}

core/templates/core/add_project.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Add Project - webFirma{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white">
+                    <h4 class="mb-0">Create a New Project</h4>
+                </div>
+                <div class="card-body">
+                    <form method="post">
+                        {% csrf_token %}
+                        {% for field in form %}
+                        <div class="form-floating mb-3">
+                            {{ field }}
+                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+                        </div>
+                        {% endfor %}
+                        <div class="d-flex justify-content-end">
+                            <a href="{% url 'projects' %}" class="btn btn-secondary me-2">Cancel</a>
+                            <button type="submit" class="btn btn-primary">Save Project</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<style>
+    .form-floating .form-control, .form-floating .form-select {
+        height: calc(3.5rem + 2px);
+        padding: 1rem;
+    }
+    .form-floating > label {
+        padding: 1rem;
+    }
+</style>
+{% endblock %}

core/templates/core/clients.html

@@ -0,0 +1,45 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Clients - webFirma{% endblock %}
+
+{% block content %}
+<div class="main-header">
+  <div class="main-header-left">
+      <h1>Clients</h1>
+      <p>You have {{ total_clients }} clients</p>
+  </div>
+  <div class="header-actions">
+    <div class="search-bar">
+        <i data-feather="search"></i>
+        <input type="text" placeholder="Search clients...">
+    </div>
+    <a href="{% url 'add_client' %}" class="btn btn-primary">Add client</a>
+  </div>
+</div>
+
+<div class="content-grid">
+    {% if clients %}
+        {% for client in clients %}
+            <div class="project-card">
+                <div class="card-header">
+                    <h3>{{ client.name }}</h3>
+                </div>
+                <div class="card-body">
+                    <p><strong>Email:</strong> {{ client.email }}</p>
+                    <p><strong>Phone:</strong> {{ client.phone_number }}</p>
+                </div>
+            </div>
+        {% endfor %}
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-state-icon">
+            <i data-feather="users"></i>
+        </div>
+        <h2>No clients yet</h2>
+        <p>You don't have any clients yet. Click the button to add your first client.</p>
+        <a href="{% url 'add_client' %}" class="btn btn-primary">Add client</a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}

core/templates/core/edit_project.html

@@ -0,0 +1,22 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Edit Project - webFirma{% endblock %}
+
+{% block content %}
+<div class="main-header">
+  <h1>Edit Project</h1>
+</div>
+
+<div class="content-grid">
+  <div class="project-card">
+    <div class="card-body">
+      <form method="post">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <button type="submit" class="btn btn-primary">Save changes</button>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}

core/templates/core/index.html

@@ -1,145 +1,96 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
+{% load static %}
 
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% block title %}Dashboard - webFirma{% endblock %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<div class="main-header">
+  <h1>Dashboard</h1>
+  <div class="header-actions">
+    <div class="search-bar">
+        <i data-feather="search"></i>
+        <input type="text" placeholder="Search projects...">
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
+    {% if user.is_authenticated %}
+    <a href="{% url 'add_project' %}" class="btn btn-primary"><i data-feather="plus"></i> Add project</a>
+    {% endif %}
+  </div>
+</div>
+
+<div class="analytics-grid">
+    <div class="stat-card">
+        <div class="stat-info">
+            <h3>Total projects</h3>
+            <p class="stat-number">{{ total_projects }}</p>
+        </div>
+        <div class="stat-icon">
+            <i data-feather="archive"></i>
+        </div>
+    </div>
+    <div class="stat-card planned">
+        <div class="stat-info">
+            <h3>Planned</h3>
+            <p class="stat-number">{{ planned_projects }}</p>
+        </div>
+        <div class="stat-icon">
+            <i data-feather="calendar"></i>
+        </div>
+    </div>
+    <div class="stat-card in-progress">
+        <div class="stat-info">
+            <h3>In progress</h3>
+            <p class="stat-number">{{ in_progress_projects }}</p>
+        </div>
+        <div class="stat-icon">
+            <i data-feather="trending-up"></i>
+        </div>
+    </div>
+    <div class="stat-card completed">
+        <div class="stat-info">
+            <h3>Completed</h3>
+            <p class="stat-number">{{ completed_projects }}</p>
+        </div>
+        <div class="stat-icon">
+            <i data-feather="check-circle"></i>
+        </div>
+    </div>
+</div>
+
+<div class="content-grid">
+    {% if request.path == '/projects/' %}
+    <div class="project-list-header">
+        <h2>All Projects</h2>
+    </div>
+    {% endif %}
+    {% if projects %}
+        {% for project in projects %}
+            <div class="project-card">
+                <div class="card-header">
+                    <h3>{{ project.name }}</h3>
+                    <span class="badge status-{{ project.status|lower }}">{{ project.get_status_display }}</span>
+                </div>
+                <div class="card-body">
+                    <p><strong>Client:</strong> {{ project.client.name }}</p>
+                    <p><strong>Period:</strong> {{ project.start_date|date:"d M Y" }} - {{ project.end_date|date:"d M Y" }}</p>
+                </div>
+                <div class="card-footer">
+
+                    {% if user.is_authenticated %}
+                    <a href="{% url 'edit_project' project.id %}" class="btn-view">Edit</a>
+                    <a href="{% url 'delete_project' project.id %}" class="btn-view">Delete</a>
+                    {% endif %}
+                </div>
+            </div>
+        {% endfor %}
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-state-icon">
+            <i data-feather="briefcase"></i>
+        </div>
+        <h2>No projects yet</h2>
+        <p>You don't have any projects yet. Add your first project to get started.</p>
+        <a href="{% url 'add_project' %}" class="btn btn-primary">Add project</a>
+    </div>
+    {% endif %}
 </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
 {% endblock %}

core/templates/core/landing.html

@@ -0,0 +1,14 @@
+{% extends 'base_public.html' %}
+{% load static %}
+
+{% block title %}Welcome to webFirma{% endblock %}
+
+{% block content %}
+<div class="landing-page">
+  <div class="hero">
+    <h1>Zarządzaj swoimi projektami</h1>
+    <p>webFirma to proste i intuicyjne narzędzie do zarządzania projektami, fakturami i klientami.</p>
+    <a href="{% url 'register' %}" class="btn btn-primary btn-lg">Zacznij za darmo</a>
+  </div>
+</div>
+{% endblock %}

core/templates/core/login.html

@@ -0,0 +1,51 @@
+{% extends 'base_public.html' %}
+{% load static %}
+
+{% block title %}Login - webFirma{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row min-vh-100">
+        <div class="col-md-6 d-flex flex-column justify-content-center align-items-center text-white" style="background: linear-gradient(45deg, #007bff, #0056b3);">
+            <div class="text-center p-5">
+                <h1 class="display-4 font-weight-bold">webFirma</h1>
+                <p class="lead mt-3">Streamline your client and project management.</p>
+            </div>
+        </div>
+        <div class="col-md-6 d-flex justify-content-center align-items-center">
+            <div class="card shadow-lg p-5" style="width: 100%; max-width: 450px;">
+                <div class="card-body">
+                    <h2 class="card-title text-center mb-4">Login</h2>
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="form-floating mb-3">
+                            {{ form.username }}
+                            <label for="{{ form.username.id_for_label }}">Username</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            {{ form.password }}
+                            <label for="{{ form.password.id_for_label }}">Password</label>
+                        </div>
+                        <div class="d-grid">
+                            <button type="submit" class="btn btn-primary btn-lg">Login</button>
+                        </div>
+                    </form>
+                    <div class="text-center mt-3">
+                        <p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .form-floating .form-control {
+        height: calc(3.5rem + 2px);
+        padding: 1rem;
+    }
+    .form-floating > label {
+        padding: 1rem;
+    }
+</style>
+{% endblock %}

core/templates/core/projects.html

@@ -0,0 +1,52 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Projects - webFirma{% endblock %}
+
+{% block content %}
+<div class="main-header">
+  <h1>Projects</h1>
+  <div class="header-actions">
+    <div class="search-bar">
+        <i data-feather="search"></i>
+        <input type="text" placeholder="Search projects...">
+    </div>
+    {% if user.is_authenticated %}
+    <a href="{% url 'add_project' %}" class="btn btn-primary"><i data-feather="plus"></i> Add project</a>
+    {% endif %}
+  </div>
+</div>
+
+<div class="content-grid">
+    {% if projects %}
+        {% for project in projects %}
+            <div class="project-card">
+                <div class="card-header">
+                    <h3>{{ project.name }}</h3>
+                    <span class="badge status-{{ project.status|lower }}">{{ project.get_status_display }}</span>
+                </div>
+                <div class="card-body">
+                    <p><strong>Client:</strong> {{ project.client.name }}</p>
+                    <p><strong>Period:</strong> {{ project.start_date|date:"d M Y" }} - {{ project.end_date|date:"d M Y" }}</p>
+                </div>
+                <div class="card-footer">
+
+                    {% if user.is_authenticated %}
+                    <a href="{% url 'edit_project' project.id %}" class="btn-view">Edit</a>
+                    <a href="{% url 'delete_project' project.id %}" class="btn-view">Delete</a>
+                    {% endif %}
+                </div>
+            </div>
+        {% endfor %}
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-state-icon">
+            <i data-feather="briefcase"></i>
+        </div>
+        <h2>No projects yet</h2>
+        <p>You don't have any projects yet. Add your first project to get started.</p>
+        <a href="{% url 'add_project' %}" class="btn btn-primary">Add project</a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}

core/templates/core/register.html

@@ -0,0 +1,49 @@
+{% extends 'base_public.html' %}
+{% load static %}
+
+{% block title %}Register - webFirma{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row min-vh-100">
+        <div class="col-md-6 d-flex flex-column justify-content-center align-items-center text-white" style="background: linear-gradient(45deg, #007bff, #0056b3);">
+            <div class="text-center p-5">
+                <h1 class="display-4 font-weight-bold">webFirma</h1>
+                <p class="lead mt-3">Join us and streamline your workflow.</p>
+            </div>
+        </div>
+        <div class="col-md-6 d-flex justify-content-center align-items-center">
+            <div class="card shadow-lg p-5" style="width: 100%; max-width: 450px;">
+                <div class="card-body">
+                    <h2 class="card-title text-center mb-4">Create Account</h2>
+                    <form method="post">
+                        {% csrf_token %}
+                        {% for field in form %}
+                            <div class="form-floating mb-3">
+                                {{ field }}
+                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+                            </div>
+                        {% endfor %}
+                        <div class="d-grid">
+                            <button type="submit" class="btn btn-primary btn-lg">Register</button>
+                        </div>
+                    </form>
+                    <div class="text-center mt-3">
+                        <p>Already have an account? <a href="{% url 'login' %}">Login here</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .form-floating .form-control {
+        height: calc(3.5rem + 2px);
+        padding: 1rem;
+    }
+    .form-floating > label {
+        padding: 1rem;
+    }
+</style>
+{% endblock %}

core/urls.py

@@ -1,7 +1,16 @@
 from django.urls import path
-
-from .views import home
+from .views import index, add_project, register, edit_project, delete_project, projects, clients, add_client, CustomLoginView
+from django.contrib.auth.views import LogoutView
 
 urlpatterns = [
-    path("", home, name="home"),
+    path('', index, name='index'),
+    path('projects/', projects, name='projects'),
+    path('clients/', clients, name='clients'),
+    path('clients/add/', add_client, name='add_client'),
+    path('add-project/', add_project, name='add_project'),
+    path('register/', register, name='register'),
+    path('login/', CustomLoginView.as_view(), name='login'),
+    path('logout/', LogoutView.as_view(), name='logout'),
+    path('edit-project/<int:project_id>/', edit_project, name='edit_project'),
+    path('delete-project/<int:project_id>/', delete_project, name='delete_project'),
 ]

core/views.py

@@ -1,25 +1,97 @@
-import os
-import platform
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib.auth import login
+from django.contrib.auth.decorators import login_required
+from django.contrib.auth.forms import UserCreationForm
+from django.contrib.auth.views import LoginView, LogoutView
+from .models import Project, Client
+from .forms import ProjectForm, ClientForm, LoginForm
 
-from django import get_version as django_version
-from django.shortcuts import render
-from django.utils import timezone
+class CustomLoginView(LoginView):
+    form_class = LoginForm
+    template_name = 'core/login.html'
 
+def index(request):
+    if request.user.is_authenticated:
+        projects = Project.objects.select_related("client").all().order_by('-start_date')
         
-def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+        total_projects = projects.count()
+        planned_projects = projects.filter(status='planning').count()
+        in_progress_projects = projects.filter(status='in_progress').count()
+        completed_projects = projects.filter(status='completed').count()
 
         context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+            'projects': projects,
+            'total_projects': total_projects,
+            'planned_projects': planned_projects,
+            'in_progress_projects': in_progress_projects,
+            'completed_projects': completed_projects,
         }
-    return render(request, "core/index.html", context)
+        return render(request, 'core/index.html', context)
+    else:
+        return render(request, 'core/landing.html')
+
+@login_required
+def add_project(request):
+    if request.method == 'POST':
+        form = ProjectForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return redirect('index')
+    else:
+        form = ProjectForm()
+    return render(request, 'core/add_project.html', {'form': form})
+
+@login_required
+def edit_project(request, project_id):
+    project = get_object_or_404(Project, pk=project_id)
+    if request.method == 'POST':
+        form = ProjectForm(request.POST, instance=project)
+        if form.is_valid():
+            form.save()
+            return redirect('index')
+    else:
+        form = ProjectForm(instance=project)
+    return render(request, 'core/edit_project.html', {'form': form, 'project': project})
+
+@login_required
+def delete_project(request, project_id):
+    project = get_object_or_404(Project, pk=project_id)
+    project.delete()
+    return redirect('index')
+
+def register(request):
+    if request.method == 'POST':
+        form = UserCreationForm(request.POST)
+        if form.is_valid():
+            user = form.save()
+            login(request, user)
+            return redirect('index')
+    else:
+        form = UserCreationForm()
+    return render(request, 'core/register.html', {'form': form})
+
+def projects(request):
+    if request.user.is_authenticated:
+        projects = Project.objects.select_related("client").all().order_by('-start_date')
+        return render(request, 'core/projects.html', {'projects': projects})
+    else:
+        return render(request, 'core/landing.html')
+
+def clients(request):
+    if request.user.is_authenticated:
+        clients = Client.objects.all()
+        total_clients = clients.count()
+        return render(request, "core/clients.html", {"clients": clients, "total_clients": total_clients})
+    else:
+        return render(request, "core/landing.html")
+
+@login_required
+def add_client(request):
+    if request.method == 'POST':
+        form = ClientForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return redirect('clients')
+    else:
+        form = ClientForm()
+    return render(request, 'core/add_client.html', {'form': form})

static/css/custom.css

@@ -1,4 +1,487 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+:root {
+    --primary-color: #2962FF;
+    --primary-dark: #1A237E;
+    --light-grey: #F7F8FC;
+    --medium-grey: #E8E9EC;
+    --dark-grey: #6C757D;
+    --text-color: #212121;
+    --white-color: #FFFFFF;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    --border-radius: 8px;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--light-grey);
+    color: var(--text-color);
+    margin: 0;
+    font-size: 14px;
+}
+
+.app-layout {
+    display: flex;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 240px;
+    background-color: var(--white-color);
+    height: 100vh;
+    padding: 24px;
+    border-right: 1px solid var(--medium-grey);
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-nav {
+    flex-grow: 1;
+}
+
+.auth-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-header h2 {
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0 0 40px 0;
+    font-size: 24px;
+}
+
+.sidebar-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-nav li a {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    text-decoration: none;
+    color: var(--dark-grey);
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-nav li.active a, .sidebar-nav li a:hover {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+}
+
+.sidebar-nav li a svg {
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 32px 48px;
+    overflow-y: auto;
+}
+
+.main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+}
+
+.main-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--primary-dark);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 8px 12px;
+    border: 1px solid var(--medium-grey);
+}
+
+.search-bar svg {
+    color: var(--dark-grey);
+    width: 18px;
+}
+
+.search-bar input {
+    border: none;
+    outline: none;
+    margin-left: 8px;
+    font-size: 14px;
+    background: transparent;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+}
+
+.btn-secondary {
+    background-color: var(--white-color);
+    color: var(--text-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--medium-grey);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+/* Project Cards */
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+}
+
+.project-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+}
+
+.card-header {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.card-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.card-body {
+    padding: 16px;
+    flex-grow: 1;
+}
+
+.card-body p {
+    margin: 0 0 8px 0;
+}
+
+.card-footer {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--light-grey);
+}
+
+.participants .avatars {
+    display: flex;
+    margin-top: 4px;
+}
+
+.participants .avatars img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--white-color);
+    margin-left: -8px;
+}
+
+.btn-view {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* Badges */
+.badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.badge.status-planowane {
+    background-color: #E3F2FD; color: #1565C0;
+}
+.badge.status-w toku {
+    background-color: #FFF3E0; color: #EF6C00;
+}
+.badge.status-ukończone {
+    background-color: #E8F5E9; color: #2E7D32;
+}
+
+/* Empty State */
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 48px;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+}
+
+.empty-state-icon {
+    margin-bottom: 16px;
+    color: var(--primary-color);
+}
+.empty-state-icon svg {
+    width: 48px;
+    height: 48px;
+}
+
+.empty-state h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--dark-grey);
+    margin-bottom: 24px;
+}
+
+/* Public Layout */
+.public-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.public-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 48px;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.public-header .logo h2 {
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0;
+    font-size: 24px;
+}
+
+.public-actions .btn {
+    text-decoration: none;
+    font-weight: 600;
+    margin-left: 16px;
+}
+
+.public-content {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Landing Page */
+.landing-page .hero {
+    text-align: center;
+}
+
+.landing-page .hero h1 {
+    font-size: 48px;
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin-bottom: 16px;
+}
+
+.landing-page .hero p {
+    font-size: 18px;
+    color: var(--dark-grey);
+    margin-bottom: 32px;
+}
+
+.btn-lg {
+    padding: 14px 28px;
+    font-size: 16px;
+}
+
+/* Analytics Cards */
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-left: 4px solid var(--primary-color);
+    box-shadow: var(--card-shadow);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+}
+
+.stat-card .stat-info h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    color: var(--dark-grey);
+    font-weight: 500;
+}
+
+.stat-card .stat-info .stat-number {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+.stat-card .stat-icon {
+    color: var(--dark-grey);
+}
+.stat-card .stat-icon svg {
+    width: 32px;
+    height: 32px;
+}
+
+.stat-card.planned {
+    border-left-color: #EF6C00;
+}
+
+.stat-card.in-progress {
+    border-left-color: #673AB7;
+}
+
+.stat-card.completed {
+    border-left-color: #2E7D32;
+}
+
+/* Auth Card */
+.auth-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 48px;
+    width: 100%;
+    max-width: 450px;
+}
+
+.auth-card-header h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin-bottom: 8px;
+}
+
+.auth-card-header p {
+    color: var(--dark-grey);
+    margin-bottom: 32px;
+}
+
+.auth-card form p {
+    margin-bottom: 16px;
+}
+
+.auth-card form label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.auth-card form input {
+    width: 100%;
+    padding: 12px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--medium-grey);
+    font-size: 14px;
+}
+
+.auth-card form .btn-primary {
+    width: 100%;
+    justify-content: center;
+    padding: 14px;
+    font-size: 16px;
+}
+
+/* Form Card */
+.form-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 32px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 12px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--medium-grey);
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-actions {
+    margin-top: 32px;
+    display: flex;
+    gap: 16px;
 }

staticfiles/css/custom.css

@@ -1,21 +1,487 @@
-
 :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
+    --primary-color: #2962FF;
+    --primary-dark: #1A237E;
+    --light-grey: #F7F8FC;
+    --medium-grey: #E8E9EC;
+    --dark-grey: #6C757D;
+    --text-color: #212121;
+    --white-color: #FFFFFF;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    --border-radius: 8px;
 }
+
 body {
-    margin: 0;
     font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
+    background-color: var(--light-grey);
     color: var(--text-color);
+    margin: 0;
+    font-size: 14px;
+}
+
+.app-layout {
+    display: flex;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 240px;
+    background-color: var(--white-color);
+    height: 100vh;
+    padding: 24px;
+    border-right: 1px solid var(--medium-grey);
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-nav {
+    flex-grow: 1;
+}
+
+.auth-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-header h2 {
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0 0 40px 0;
+    font-size: 24px;
+}
+
+.sidebar-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-nav li a {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    text-decoration: none;
+    color: var(--dark-grey);
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-nav li.active a, .sidebar-nav li a:hover {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+}
+
+.sidebar-nav li a svg {
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 32px 48px;
+    overflow-y: auto;
+}
+
+.main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+}
+
+.main-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--primary-dark);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 8px 12px;
+    border: 1px solid var(--medium-grey);
+}
+
+.search-bar svg {
+    color: var(--dark-grey);
+    width: 18px;
+}
+
+.search-bar input {
+    border: none;
+    outline: none;
+    margin-left: 8px;
+    font-size: 14px;
+    background: transparent;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+}
+
+.btn-secondary {
+    background-color: var(--white-color);
+    color: var(--text-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--medium-grey);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+/* Project Cards */
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+}
+
+.project-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+}
+
+.card-header {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.card-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.card-body {
+    padding: 16px;
+    flex-grow: 1;
+}
+
+.card-body p {
+    margin: 0 0 8px 0;
+}
+
+.card-footer {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--light-grey);
+}
+
+.participants .avatars {
+    display: flex;
+    margin-top: 4px;
+}
+
+.participants .avatars img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--white-color);
+    margin-left: -8px;
+}
+
+.btn-view {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* Badges */
+.badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.badge.status-planowane {
+    background-color: #E3F2FD; color: #1565C0;
+}
+.badge.status-w toku {
+    background-color: #FFF3E0; color: #EF6C00;
+}
+.badge.status-ukończone {
+    background-color: #E8F5E9; color: #2E7D32;
+}
+
+/* Empty State */
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 48px;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+}
+
+.empty-state-icon {
+    margin-bottom: 16px;
+    color: var(--primary-color);
+}
+.empty-state-icon svg {
+    width: 48px;
+    height: 48px;
+}
+
+.empty-state h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--dark-grey);
+    margin-bottom: 24px;
+}
+
+/* Public Layout */
+.public-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.public-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 48px;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.public-header .logo h2 {
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0;
+    font-size: 24px;
+}
+
+.public-actions .btn {
+    text-decoration: none;
+    font-weight: 600;
+    margin-left: 16px;
+}
+
+.public-content {
+    flex-grow: 1;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
+}
+
+/* Landing Page */
+.landing-page .hero {
+    text-align: center;
+}
+
+.landing-page .hero h1 {
+    font-size: 48px;
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin-bottom: 16px;
+}
+
+.landing-page .hero p {
+    font-size: 18px;
+    color: var(--dark-grey);
+    margin-bottom: 32px;
+}
+
+.btn-lg {
+    padding: 14px 28px;
+    font-size: 16px;
+}
+
+/* Analytics Cards */
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-left: 4px solid var(--primary-color);
+    box-shadow: var(--card-shadow);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+}
+
+.stat-card .stat-info h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    color: var(--dark-grey);
+    font-weight: 500;
+}
+
+.stat-card .stat-info .stat-number {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+.stat-card .stat-icon {
+    color: var(--dark-grey);
+}
+.stat-card .stat-icon svg {
+    width: 32px;
+    height: 32px;
+}
+
+.stat-card.planned {
+    border-left-color: #EF6C00;
+}
+
+.stat-card.in-progress {
+    border-left-color: #673AB7;
+}
+
+.stat-card.completed {
+    border-left-color: #2E7D32;
+}
+
+/* Auth Card */
+.auth-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 48px;
+    width: 100%;
+    max-width: 450px;
+}
+
+.auth-card-header h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary-dark);
+    margin-bottom: 8px;
+}
+
+.auth-card-header p {
+    color: var(--dark-grey);
+    margin-bottom: 32px;
+}
+
+.auth-card form p {
+    margin-bottom: 16px;
+}
+
+.auth-card form label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.auth-card form input {
+    width: 100%;
+    padding: 12px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--medium-grey);
+    font-size: 14px;
+}
+
+.auth-card form .btn-primary {
+    width: 100%;
+    justify-content: center;
+    padding: 14px;
+    font-size: 16px;
+}
+
+/* Form Card */
+.form-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 32px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group.full-width {
+    grid-column: 1 / -1;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 12px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--medium-grey);
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-actions {
+    margin-top: 32px;
+    display: flex;
+    gap: 16px;
 }