Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 31 KiB |
@ -180,8 +180,3 @@ 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'
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
# 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
|
||||
@ -1,14 +1,3 @@
|
||||
from django.contrib import admin
|
||||
from .models import Project, Client
|
||||
|
||||
@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',)
|
||||
# Register your models here.
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
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'}))
|
||||
@ -1,25 +0,0 @@
|
||||
# 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')),
|
||||
],
|
||||
),
|
||||
]
|
||||
@ -1,93 +0,0 @@
|
||||
# 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'),
|
||||
),
|
||||
]
|
||||
@ -1,25 +1,3 @@
|
||||
from django.db import models
|
||||
|
||||
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
|
||||
# Create your models here.
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}webFirma{% endblock %}</title>
|
||||
<title>{% block title %}Knowledge Base{% endblock %}</title>
|
||||
{% if project_description %}
|
||||
<meta name="description" content="{{ project_description }}">
|
||||
<meta property="og:description" content="{{ project_description }}">
|
||||
@ -14,53 +14,12 @@
|
||||
<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>
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
<!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>
|
||||
@ -1,48 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,42 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,45 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,22 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,96 +1,145 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dashboard - webFirma{% endblock %}
|
||||
{% 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 content %}
|
||||
<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...">
|
||||
<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>
|
||||
{% 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 %}
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
|
||||
</footer>
|
||||
{% endblock %}
|
||||
@ -1,14 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,51 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,52 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,49 +0,0 @@
|
||||
{% 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 %}
|
||||
15
core/urls.py
@ -1,16 +1,7 @@
|
||||
from django.urls import path
|
||||
from .views import index, add_project, register, edit_project, delete_project, projects, clients, add_client, CustomLoginView
|
||||
from django.contrib.auth.views import LogoutView
|
||||
|
||||
from .views import home
|
||||
|
||||
urlpatterns = [
|
||||
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'),
|
||||
path("", home, name="home"),
|
||||
]
|
||||
110
core/views.py
@ -1,97 +1,25 @@
|
||||
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
|
||||
import os
|
||||
import platform
|
||||
|
||||
class CustomLoginView(LoginView):
|
||||
form_class = LoginForm
|
||||
template_name = 'core/login.html'
|
||||
from django import get_version as django_version
|
||||
from django.shortcuts import render
|
||||
from django.utils import timezone
|
||||
|
||||
def index(request):
|
||||
if request.user.is_authenticated:
|
||||
projects = Project.objects.select_related("client").all().order_by('-start_date')
|
||||
|
||||
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()
|
||||
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()
|
||||
|
||||
context = {
|
||||
'projects': projects,
|
||||
'total_projects': total_projects,
|
||||
'planned_projects': planned_projects,
|
||||
'in_progress_projects': in_progress_projects,
|
||||
'completed_projects': completed_projects,
|
||||
"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", ""),
|
||||
}
|
||||
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})
|
||||
return render(request, "core/index.html", context)
|
||||
|
||||
@ -1,487 +1,4 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
/* Custom styles for the application */
|
||||
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;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
@ -1,487 +1,21 @@
|
||||
|
||||
: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;
|
||||
--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);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--light-grey);
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
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;
|
||||
justify-content: center;
|
||||
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;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 31 KiB |