Hugging Face's logo

Spaces:
sylwek1916
/
nowe
Running

App Files Community
sylwek1916 commited on
Commit
9168636
·
verified ·
1 Parent(s): 6f7759a

### 📝 **Szczegółowa analiza i propozycje ulepszeń dla opisu aplikacji "Kilometrówka Pro"** --- #### **1. Poprawa struktury i przejrzystości** **Obecny problem:** - Sekcje są dobrze podzielone, ale mogą być bardziej czytelne dzięki lepszemu zorganizowaniu treści. - Brakuje konkretnej hierarchii nagłówków i podpunktów. **Sugestie:** - Dodaj **nagłówki sekcji z ikonami** (np. 🔑 Funkcje, 🎯 USP). - Użyj **numeracji** dla kroków (np. "Kroki do realizacji"). - Dodaj **podpunkty z ikonami** (np. ✔️ Automatyczne logowanie GPS). **Przykład poprawionej sekcji:** ```markdown ### 🔑 Główne funkcje #### 1. Rejestracja przejazdów - ✔️ **Automatyczne logowanie GPS** (trasa Warszawa → Kraków). - ✍️ **Ręczne dodawanie** (data, cel, dystans, typ pojazdu). - 🎯 **Cel przejazdu** (np. "spotkanie z klientem", "transport towaru"). ``` --- #### **2. Wzbogacenie unikalnych USP (Unique Selling Points)** **Obecny problem:** - USP są ogólne, brakuje konkretnych przykładów lub porównań z konkurencją. **Sugestie:** - **Porównania z konkurencją:** - "W przeciwieństwie do aplikacji X, Kilometrówka Pro automatycznie generuje raporty zgodne z polskim prawem podatkowym." - **Dodaj scenariusze użytkowania:** - "Idealna dla handlowców, którzy jeżdżą 1000 km miesięcznie i potrzebują błyskawicznego zwrotu kosztów." **Przykład poprawionego USP:** ```markdown ### 🎯 Unikalne USP (Unique Selling Points) - 📌 **Automatyczne przeliczanie zwrotów** zgodnie z aktualnymi stawkami podatkowymi (np. 0,88 zł/km w Polsce). - 📄 **Gotowe raporty PDF** dopasowane do wymogów polskiego prawa podatkowego (np. uwzględniające limity zwrotów). - 🔄 **Integracja z kalendarzem** – nie musisz nic wpisywać ręcznie! Trasy tworzą się automatycznie na podstawie wydarzeń. - 🏢 **Wersja korporacyjna** – panel admina dla HR z raportami zbiorczymi i API do systemów ERP. ``` --- #### **3. Usprawnienie opisu modelu zarobkowego** **Obecny problem:** - Modele cenowe są zwięzłe, ale brakuje szczegółów o konkurencyjności lub różnicach między wersjami. **Sugestie:** - **Dodaj porównanie wersji (tabelę):** | Funkcja | Bezpłatna | Premium | Korporacyjna | |------------------------|-----------|---------|--------------| | Eksport do PDF | ✔️ | ✔️ | ✔️ | | Integracje | ❌ | ✔️ | ✔️ | | Panel admina | ❌ | ❌ | ✔️ | - **Ceny konkurencji:** - "W porównaniu do aplikacji X (cena 49 zł/miesiąc), nasza wersja Premium oferuje więcej funkcji za 39,99 zł." **Przykład poprawionego modelu:** ```markdown ### 📈 Model zarobkowy #### 1. Freemium - **Bezpłatna wersja:** - 10 raportów/miesiąc, eksport do PDF. - Idealna dla użytkowników sporadycznych. #### 2. Premium (39,99 zł/miesiąc) - **Zalety:** - Brak limitów raportów. - Eksport do Excela/CSV. - Integracje z kalendarzem i mapami. #### 3. Wersja korporacyjna (99 zł/firma/miesiąc) - **Dla firm:** - Panel admina z raportami zbiorczymi. - API do systemów ERP (np. SAP, Symfonia). - Dostęp dla wszystkich pracowników. #### 4. Partnerstwa - **Współpraca z biurami rachunkowymi:** - 10% prowizji za integracje z programami księgowymi. ``` --- #### **4. Uzupełnienie sekcji technologii** **Obecny problem:** - Technologie są wymienione, ale brakuje wyjaśnienia ich wyboru lub zalet. **Sugestie:** - **Dlaczego Flutter/React Native?** - "Flutter zapewnia jednolity interfejs na iOS i Android, co skraca czas developmentu." - **Bezpieczeństwo:** - "Firebase zapewnia szyfrowanie danych na poziomie bankowym, zgodne z GDPR." **Przykład poprawionej sekcji:** ```markdown ### 💡 Technologie - **Frontend:** - **Flutter (iOS/Android):** Jednolity interfejs na obie platformy. - **React (webowa):** Responsywna wersja dla komputerów. - **Backend:** - **Node.js + Express:** Szybka i skalowalna obsługa żądań. - **Baza danych:** - **Firebase:** Real-time sync i zgodność z GDPR. - **Mapy:** - **Mapbox API:** Otwarte dane i niższe koszty niż Google Maps. - **Bezpieczeństwo:** - **OAuth 2.0:** Logowanie przez Google/Microsoft z dodatkową weryfikacją 2FA. ``` --- #### **5. Rozszerzenie przykładów obliczeń** **Obecny problem:** - Przykład jest jeden, ale brakuje scenariuszy z różnymi typami pojazdów lub stawkami. **Sugestie:** - **Dodaj więcej przypadków:** - "Przykład 1: Samochód osobowy (900 cm³) – 0,88 zł/km." - "Przykład 2: Rower – 0,30 zł/km (stosowane przez pracodawcę)." **Przykład poprawionej sekcji:** ```markdown ### 🧮 Przykłady obliczeń #### Przykład 1: Samochód osobowy (900 cm³) - **Stawka:** 0,88 zł/km (obowiązująca w 2025 r.). - **Dystans:** 500 km/miesiąc. - **Kwota do zwrotu:** 440 zł. #### Przykład 2: Rower służbowy - **Stawka:** 0,30 zł/km (wewnętrzna stawka firmy). - **Dystans:** 200 km/miesiąc. - **Kwota do zwrotu:** 60 zł. #### Przykład 3: Motocykl (600 cm³) - **Stawka:** 0,60 zł/km (obowiązująca w 2025 r.). - **Dystans:** 300 km/miesiąc. - **Kwota do zwrotu:** 180 zł. ``` --- #### **6. Uzupełnienie sekcji "Kroki do realizacji"** **Obeczny problem:** - Kroki są ogólne, brakuje szczegółowego planu działania. **Sugestie:** - **Podziel na etapy:** 1. **Etap 1 (MVP):** Rejestracja ręczna + eksport PDF. 2. **Etap 2:** Dodanie GPS i integracji z kalendarzem. 3. **Etap 3:** Wersja korporacyjna z panelem admina. - **Dodaj terminy lub milestone’y:** - "Kwiecień 2025: Test beta z 10 użytkownikami." **Przykład poprawionej sekcji:** ```markdown ### 🛠️ Kroki do realizacji 1. **Etap 1: MVP (Q2 2025)** - Rejestracja przejazdów ręcznie. - Przeliczanie zwrotów na podstawie stawek podatkowych. - Eksport do PDF. 2. **Etap 2: Funkcje premium (Q3 2025)** - Automatyczne logowanie GPS. - Integracja z kalendarzem Google/Outlook. - Backup w chmurze. 3. **Etap 3: Wersja korporacyjna (Q4 2025)** - Panel admina dla firm. - API do systemów ERP (np. SAP). - Test beta z 3 firmami. 4. **Etap 4: Wzrost (Q1 2026)** - Współprace z biurami rachunkowymi. - Marketing online (Google Ads, Facebook). ``` --- #### **7. Dodanie sekcji o konkurencji i różnicach** **Obecny problem:** - Brak analizy konkurencji i wyjaśnienia, dlaczego aplikacja jest lepsza. **Sugestie:** - **Lista konkurentów:** - "Konkurencja: Aplikacja X (brak integracji z kalendarzem), Aplikacja Y (droższa wersja premium)." - **Nasze różnice:** - "Tylko Kilometrówka Pro oferuje automatyczne tworzenie tras na podstawie wydarzeń kalendarza." **Przykład dodanej sekcji:** ```markdown ### 🔍 Konkurencja i nasze różnice #### Konkurencja: 1. **Aplikacja X** – Brak integracji z kalendarzem, tylko ręczne wpisywanie. 2. **Aplikacja Y** – Wersja premium za 49 zł/miesiąc, brak wersji korporacyjnej. #### Nasze różnice: - ✅ **Automatyczne tworzenie tras** na podstawie wydarzeń kalendarza. - ✅ **Wersja korporacyjna** z raportami zbiorczymi i API do ERP. - ✅ **Najniższa cena premium** na rynku (39,99 zł vs 49 zł u konkurencji). ``` --- #### **8. Dodanie sekcji o bezpieczeństwie i zgodności z GDPR** **Obecny problem:** - Zabezpieczenia są wspomniane, ale nie rozwinięte. **Sugestie:** - **Szczegóły ochrony danych:** - "Dane użytkownika szyfrowane algorytmem AES-256." - "Backup w chmurze z opcją przywrócenia historii przez 5 lat." **Przykład dodanej sekcji:** ```markdown ### 🔐 Bezpieczeństwo i zgodność z GDPR - **Szyfrowanie danych:** AES-256 dla wszystkich użytkowników. - **Backup:** Automatyczne kopie w chmurze (Google Drive, Dropbox) z opcją przywrócenia danych przez 5 lat. - **Zgodność z GDPR:** - Brak sprzedaży danych osobowych. - Możliwość usunięcia konta z jednoczesnym usunięciem wszystkich danych. ``` --- #### **Podsumowanie zmian:** | Sekcja | Co zostało poprawione? | |-------------------------|-----------------------------------------------| | Struktura | Lepsza organizacja treści, ikony, podpunkty. | | USP | Konkretne przykłady, porównania z konkurencją. | | Model zarobkowy | Tabela porównawcza, analiza konkurencji. | | Technologie | Wyjaśnienie wyboru narzędzi, bezpieczeństwo. | | Przykłady obliczeń | Więcej scenariuszy użytkowania. | | Kroki do realizacji | Etapy z terminami i milestone’ami. | | Konkurencja | Analiza rynku i unikalne różnice. | | Bezpieczeństwo | Szczegóły ochrony danych i zgodności z GDPR. | --- Dzięki tym zmianom opis aplikacji stanie się bardziej przekonujący, czytelny i zgodny z oczekiwaniami inwestorów oraz użytkowników końcowych. Jeśli chcesz, mogę pomóc stworzyć **prototyp interfejsu** lub **opis marketingowy** do App Store/Google Play. 😊 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +554 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nowe
3
- emoji: 📈
4
  colorFrom: yellow
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nowe
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,554 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kilometrówka Plus - Śledzenie przejazdów służbowych</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
12
+ }
13
+ .shadow-custom {
14
+ box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.5);
15
+ }
16
+ .fade-in {
17
+ animation: fadeIn 0.5s ease-in-out;
18
+ }
19
+ @keyframes fadeIn {
20
+ from { opacity: 0; transform: translateY(10px); }
21
+ to { opacity: 1; transform: translateY(0); }
22
+ }
23
+ .chart-container {
24
+ height: 300px;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50 font-sans">
29
+ <!-- Header -->
30
+ <header class="gradient-bg text-white">
31
+ <div class="container mx-auto px-4 py-6">
32
+ <div class="flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <i class="fas fa-road text-2xl"></i>
35
+ <h1 class="text-2xl font-bold">Kilometrówka<span class="text-yellow-300">Plus</span></h1>
36
+ </div>
37
+ <div class="hidden md:flex space-x-4">
38
+ <a href="#" class="hover:text-yellow-300 transition">Strona główna</a>
39
+ <a href="#" class="hover:text-yellow-300 transition">Moje przejazdy</a>
40
+ <a href="#" class="hover:text-yellow-300 transition">Raporty</a>
41
+ <a href="#" class="hover:text-yellow-300 transition">Ustawienia</a>
42
+ </div>
43
+ <div class="flex items-center space-x-4">
44
+ <button class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition">
45
+ <i class="fas fa-user mr-2"></i>Zaloguj
46
+ </button>
47
+ <button class="md:hidden text-white">
48
+ <i class="fas fa-bars text-xl"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Hero Section -->
56
+ <section class="gradient-bg text-white py-12">
57
+ <div class="container mx-auto px-4">
58
+ <div class="flex flex-col md:flex-row items-center">
59
+ <div class="md:w-1/2 mb-8 md:mb-0 fade-in">
60
+ <h2 class="text-4xl font-bold mb-4">Najlepsze narzędzie do rozliczeń kilometrówki</h2>
61
+ <p class="text-xl mb-6">
62
+ <span class="block mb-2">✅ Automatyczne obliczenia zgodne z polskim prawem podatkowym</span>
63
+ <span class="block mb-2">✅ Integracja z kalendarzem - przejazdy tworzą się same</span>
64
+ <span class="block">✅ Gotowe raporty PDF dla pracodawcy</span>
65
+ </p>
66
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
67
+ <button class="bg-yellow-400 text-blue-800 px-6 py-3 rounded-full font-bold hover:bg-yellow-300 transition">
68
+ <i class="fas fa-plus mr-2"></i>Dodaj przejazd
69
+ </button>
70
+ <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-blue-50 transition">
71
+ <i class="fas fa-play mr-2"></i>Zobacz demo
72
+ </button>
73
+ </div>
74
+ </div>
75
+ <div class="md:w-1/2 fade-in">
76
+ <div class="bg-white rounded-xl p-6 shadow-custom text-gray-800">
77
+ <div class="flex justify-between items-center mb-4">
78
+ <h3 class="font-bold text-lg">Podsumowanie miesiąca</h3>
79
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Maj 2023</span>
80
+ </div>
81
+ <div class="grid grid-cols-3 gap-4 mb-6">
82
+ <div class="bg-blue-50 p-3 rounded-lg text-center">
83
+ <p class="text-sm text-blue-600">Przejazdy</p>
84
+ <p class="text-2xl font-bold">18</p>
85
+ </div>
86
+ <div class="bg-green-50 p-3 rounded-lg text-center">
87
+ <p class="text-sm text-green-600">Kilometry</p>
88
+ <p class="text-2xl font-bold">1,245 km</p>
89
+ </div>
90
+ <div class="bg-purple-50 p-3 rounded-lg text-center">
91
+ <p class="text-sm text-purple-600">Do zwrotu</p>
92
+ <p class="text-2xl font-bold">1,095 zł</p>
93
+ </div>
94
+ </div>
95
+ <div class="chart-container">
96
+ <canvas id="monthlyChart"></canvas>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </section>
103
+
104
+ <!-- Main Content -->
105
+ <main class="container mx-auto px-4 py-12">
106
+ <!-- Competitive Advantages -->
107
+ <div class="bg-white rounded-xl shadow-md p-6 mb-12 fade-in">
108
+ <h2 class="text-2xl font-bold mb-6 text-center">Dlaczego KilometrówkaPlus jest lepsza?</h2>
109
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
110
+ <div class="text-center p-4">
111
+ <div class="bg-blue-100 p-4 rounded-full inline-block mb-4">
112
+ <i class="fas fa-calendar-alt text-blue-600 text-2xl"></i>
113
+ </div>
114
+ <h3 class="font-bold text-lg mb-2">Integracja z kalendarzem</h3>
115
+ <p class="text-gray-600">Tylko u nas przejazdy tworzą się automatycznie z wydarzeń w Twoim kalendarzu.</p>
116
+ </div>
117
+ <div class="text-center p-4">
118
+ <div class="bg-green-100 p-4 rounded-full inline-block mb-4">
119
+ <i class="fas fa-file-pdf text-green-600 text-2xl"></i>
120
+ </div>
121
+ <h3 class="font-bold text-lg mb-2">Gotowe raporty PDF</h3>
122
+ <p class="text-gray-600">Raporty zgodne z wymogami polskiego prawa podatkowego.</p>
123
+ </div>
124
+ <div class="text-center p-4">
125
+ <div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
126
+ <i class="fas fa-building text-purple-600 text-2xl"></i>
127
+ </div>
128
+ <h3 class="font-bold text-lg mb-2">Rozwiązanie dla firm</h3>
129
+ <p class="text-gray-600">Jedyny produkt z panelem admina i integracją z systemami ERP.</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Quick Actions -->
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
136
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer fade-in">
137
+ <div class="flex items-center mb-4">
138
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
139
+ <i class="fas fa-plus text-blue-600 text-xl"></i>
140
+ </div>
141
+ <h3 class="font-bold text-lg">Dodaj przejazd</h3>
142
+ </div>
143
+ <p class="text-gray-600">Zarejestruj nowy przejazd służbowy ręcznie lub zaimportuj z GPS.</p>
144
+ </div>
145
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer fade-in">
146
+ <div class="flex items-center mb-4">
147
+ <div class="bg-green-100 p-3 rounded-full mr-4">
148
+ <i class="fas fa-file-alt text-green-600 text-xl"></i>
149
+ </div>
150
+ <h3 class="font-bold text-lg">Generuj raport</h3>
151
+ </div>
152
+ <p class="text-gray-600">Utwórz gotowy raport miesięczny do przekazania pracodawcy.</p>
153
+ </div>
154
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer fade-in">
155
+ <div class="flex items-center mb-4">
156
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
157
+ <i class="fas fa-cog text-purple-600 text-xl"></i>
158
+ </div>
159
+ <h3 class="font-bold text-lg">Dostosuj stawki</h3>
160
+ </div>
161
+ <p class="text-gray-600">Ustaw własne stawki zwrotu kosztów zgodnie z polityką firmy.</p>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Pricing Tiers -->
166
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12 fade-in">
167
+ <div class="p-6 border-b">
168
+ <h2 class="text-2xl font-bold text-center">Wybierz plan dla siebie</h2>
169
+ </div>
170
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
171
+ <div class="p-6 border-r">
172
+ <h3 class="text-xl font-bold mb-4">Bezpłatna</h3>
173
+ <p class="text-3xl font-bold mb-4">0 zł</p>
174
+ <ul class="space-y-3 mb-6">
175
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 10 raportów/miesiąc</li>
176
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Eksport do PDF</li>
177
+ <li class="flex items-center"><i class="fas fa-times text-red-500 mr-2"></i> Brak integracji</li>
178
+ </ul>
179
+ <button class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg font-medium">Wybieram</button>
180
+ </div>
181
+ <div class="p-6 border-r bg-blue-50">
182
+ <div class="flex justify-between items-center mb-2">
183
+ <h3 class="text-xl font-bold">Premium</h3>
184
+ <span class="bg-yellow-400 text-yellow-800 px-2 py-1 rounded-full text-xs font-bold">NAJPOPULARNIEJSZE</span>
185
+ </div>
186
+ <p class="text-3xl font-bold mb-4">39,99 zł<span class="text-sm font-normal">/miesiąc</span></p>
187
+ <ul class="space-y-3 mb-6">
188
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Nielimitowane raporty</li>
189
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Eksport do Excel/CSV</li>
190
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Integracja z kalendarzem</li>
191
+ </ul>
192
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium hover:bg-blue-700 transition">Wybieram</button>
193
+ </div>
194
+ <div class="p-6">
195
+ <h3 class="text-xl font-bold mb-4">Korporacyjna</h3>
196
+ <p class="text-3xl font-bold mb-4">99 zł<span class="text-sm font-normal">/miesiąc</span></p>
197
+ <ul class="space-y-3 mb-6">
198
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Panel admina</li>
199
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> API do systemów ERP</li>
200
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Wsparcie dla całej firmy</li>
201
+ </ul>
202
+ <button class="w-full bg-gray-800 text-white py-2 rounded-lg font-medium hover:bg-gray-700 transition">Skontaktuj się</button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Recent Trips -->
208
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12 fade-in">
209
+ <div class="p-6 border-b">
210
+ <div class="flex justify-between items-center">
211
+ <h2 class="text-2xl font-bold">Ostatnie przejazdy</h2>
212
+ <button class="text-blue-600 hover:text-blue-800 font-medium">
213
+ <i class="fas fa-list mr-2"></i>Zobacz wszystkie
214
+ </button>
215
+ </div>
216
+ </div>
217
+ <div class="overflow-x-auto">
218
+ <table class="w-full">
219
+ <thead class="bg-gray-50">
220
+ <tr>
221
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
222
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trasa</th>
223
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cel</th>
224
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kilometry</th>
225
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zwrot</th>
226
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Akcje</th>
227
+ </tr>
228
+ </thead>
229
+ <tbody class="divide-y divide-gray-200">
230
+ <tr>
231
+ <td class="px-6 py-4 whitespace-nowrap">15.05.2023</td>
232
+ <td class="px-6 py-4 whitespace-nowrap">Warszawa → Kraków</td>
233
+ <td class="px-6 py-4 whitespace-nowrap">Spotkanie z klientem</td>
234
+ <td class="px-6 py-4 whitespace-nowrap">295 km</td>
235
+ <td class="px-6 py-4 whitespace-nowrap font-medium">259,60 zł</td>
236
+ <td class="px-6 py-4 whitespace-nowrap">
237
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
238
+ <i class="fas fa-edit"></i>
239
+ </button>
240
+ <button class="text-red-600 hover:text-red-800">
241
+ <i class="fas fa-trash"></i>
242
+ </button>
243
+ </td>
244
+ </tr>
245
+ <tr>
246
+ <td class="px-6 py-4 whitespace-nowrap">12.05.2023</td>
247
+ <td class="px-6 py-4 whitespace-nowrap">Łódź → Poznań</td>
248
+ <td class="px-6 py-4 whitespace-nowrap">Dostawa materiałów</td>
249
+ <td class="px-6 py-4 whitespace-nowrap">210 km</td>
250
+ <td class="px-6 py-4 whitespace-nowrap font-medium">184,80 zł</td>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
253
+ <i class="fas fa-edit"></i>
254
+ </button>
255
+ <button class="text-red-600 hover:text-red-800">
256
+ <i class="fas fa-trash"></i>
257
+ </button>
258
+ </td>
259
+ </tr>
260
+ <tr>
261
+ <td class="px-6 py-4 whitespace-nowrap">08.05.2023</td>
262
+ <td class="px-6 py-4 whitespace-nowrap">Warszawa → Gdańsk</td>
263
+ <td class="px-6 py-4 whitespace-nowrap">Szkolenie</td>
264
+ <td class="px-6 py-4 whitespace-nowrap">345 km</td>
265
+ <td class="px-6 py-4 whitespace-nowrap font-medium">303,60 zł</td>
266
+ <td class="px-6 py-4 whitespace-nowrap">
267
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
268
+ <i class="fas fa-edit"></i>
269
+ </button>
270
+ <button class="text-red-600 hover:text-red-800">
271
+ <i class="fas fa-trash"></i>
272
+ </button>
273
+ </td>
274
+ </tr>
275
+ </tbody>
276
+ </table>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Add Trip Form -->
281
+ <div class="bg-white rounded-xl shadow-md p-6 mb-12 fade-in">
282
+ <h2 class="text-2xl font-bold mb-6">Dodaj nowy przejazd</h2>
283
+ <form>
284
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
285
+ <div>
286
+ <label class="block text-gray-700 mb-2" for="date">Data przejazdu</label>
287
+ <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
288
+ </div>
289
+ <div>
290
+ <label class="block text-gray-700 mb-2" for="vehicle">Pojazd</label>
291
+ <select id="vehicle" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
292
+ <option>Samochód osobowy (do 900 cm³)</option>
293
+ <option>Samochód osobowy (powyżej 900 cm³)</option>
294
+ <option>Motocykl</option>
295
+ <option>Rower</option>
296
+ </select>
297
+ </div>
298
+ <div>
299
+ <label class="block text-gray-700 mb-2" for="start">Miejsce startowe</label>
300
+ <input type="text" id="start" placeholder="np. Warszawa, ul. Marszałkowska 1" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
301
+ </div>
302
+ <div>
303
+ <label class="block text-gray-700 mb-2" for="end">Miejsce docelowe</label>
304
+ <input type="text" id="end" placeholder="np. Kraków, ul. Karmelicka 5" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
305
+ </div>
306
+ <div>
307
+ <label class="block text-gray-700 mb-2" for="distance">Dystans (km)</label>
308
+ <input type="number" id="distance" placeholder="np. 295" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
309
+ </div>
310
+ <div>
311
+ <label class="block text-gray-700 mb-2" for="purpose">Cel przejazdu</label>
312
+ <select id="purpose" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
313
+ <option>Spotkanie z klientem</option>
314
+ <option>Dostawa materiałów</option>
315
+ <option>Szkolenie</option>
316
+ <option>Serwis</option>
317
+ <option>Inne</option>
318
+ </select>
319
+ </div>
320
+ </div>
321
+ <div class="mb-6">
322
+ <label class="block text-gray-700 mb-2" for="notes">Notatki</label>
323
+ <textarea id="notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Dodatkowe informacje..."></textarea>
324
+ </div>
325
+ <div class="mb-6">
326
+ <label class="block text-gray-700 mb-2">Załączniki</label>
327
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
328
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
329
+ <p class="text-gray-500">Przeciągnij i upuść pliki tutaj lub <span class="text-blue-600 cursor-pointer">wybierz z komputera</span></p>
330
+ </div>
331
+ </div>
332
+ <div class="flex justify-end space-x-4">
333
+ <button type="button" class="px-6 py-3 border rounded-lg font-medium hover:bg-gray-50 transition">Anuluj</button>
334
+ <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
335
+ <i class="fas fa-save mr-2"></i>Zapisz przejazd
336
+ </button>
337
+ </div>
338
+ </form>
339
+ </div>
340
+
341
+ <!-- Stats Section -->
342
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
343
+ <div class="bg-white rounded-xl shadow-md p-6 fade-in">
344
+ <h2 class="text-xl font-bold mb-4">Statystyki roczne</h2>
345
+ <div class="chart-container">
346
+ <canvas id="yearlyChart"></canvas>
347
+ </div>
348
+ </div>
349
+ <div class="bg-white rounded-xl shadow-md p-6 fade-in">
350
+ <h2 class="text-xl font-bold mb-4">Podsumowanie kwartalne</h2>
351
+ <div class="space-y-4">
352
+ <div>
353
+ <div class="flex justify-between mb-1">
354
+ <span class="text-sm font-medium">I kwartał</span>
355
+ <span class="text-sm font-medium">2,450 km</span>
356
+ </div>
357
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
358
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
359
+ </div>
360
+ </div>
361
+ <div>
362
+ <div class="flex justify-between mb-1">
363
+ <span class="text-sm font-medium">II kwartał</span>
364
+ <span class="text-sm font-medium">3,120 km</span>
365
+ </div>
366
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
367
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%"></div>
368
+ </div>
369
+ </div>
370
+ <div>
371
+ <div class="flex justify-between mb-1">
372
+ <span class="text-sm font-medium">III kwartał</span>
373
+ <span class="text-sm font-medium">1,980 km</span>
374
+ </div>
375
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
376
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 35%"></div>
377
+ </div>
378
+ </div>
379
+ <div>
380
+ <div class="flex justify-between mb-1">
381
+ <span class="text-sm font-medium">IV kwartał</span>
382
+ <span class="text-sm font-medium">2,750 km</span>
383
+ </div>
384
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
385
+ <div class="bg-purple-500 h-2.5 rounded-full" style="width: 50%"></div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ <div class="mt-6 p-4 bg-blue-50 rounded-lg">
390
+ <div class="flex items-center">
391
+ <i class="fas fa-info-circle text-blue-600 mr-3 text-xl"></i>
392
+ <p class="text-blue-800">W tym roku przejechałeś już <span class="font-bold">10,300 km</span>, co daje średnio <span class="font-bold">858 km miesięcznie</span>.</p>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </main>
398
+
399
+ <!-- Footer -->
400
+ <footer class="bg-gray-800 text-white py-12">
401
+ <div class="container mx-auto px-4">
402
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
403
+ <div>
404
+ <h3 class="text-xl font-bold mb-4 flex items-center">
405
+ <i class="fas fa-road mr-2"></i> KilometrówkaPlus
406
+ </h3>
407
+ <p class="text-gray-400">Proste narzędzie do śledzenia przejazdów służbowych i automatycznego obliczania zwrotów kosztów.</p>
408
+ </div>
409
+ <div>
410
+ <h4 class="font-bold mb-4">Funkcje</h4>
411
+ <ul class="space-y-2">
412
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Śledzenie przejazdów</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Automatyczne obliczenia</a></li>
414
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Generowanie raportów</a></li>
415
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Integracje</a></li>
416
+ </ul>
417
+ </div>
418
+ <div>
419
+ <h4 class="font-bold mb-4">Dokumentacja</h4>
420
+ <ul class="space-y-2">
421
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Instrukcja obsługi</a></li>
422
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Polityka prywatności</a></li>
423
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Warunki użytkowania</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
425
+ </ul>
426
+ </div>
427
+ <div>
428
+ <h4 class="font-bold mb-4">Kontakt</h4>
429
+ <ul class="space-y-2">
430
+ <li class="flex items-center">
431
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
432
+ <a href="mailto:kontakt@kilometrowkaplus.pl" class="text-gray-400 hover:text-white transition">kontakt@kilometrowkaplus.pl</a>
433
+ </li>
434
+ <li class="flex items-center">
435
+ <i class="fas fa-phone mr-2 text-gray-400"></i>
436
+ <span class="text-gray-400">+48 123 456 789</span>
437
+ </li>
438
+ <li class="flex items-center">
439
+ <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
440
+ <span class="text-gray-400">Warszawa, Polska</span>
441
+ </li>
442
+ </ul>
443
+ <div class="mt-4 flex space-x-4">
444
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
445
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
446
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
447
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
452
+ <p>&copy; 2023 KilometrówkaPlus. Wszelkie prawa zastrzeżone.</p>
453
+ <div class="mt-4 flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-6">
454
+ <p class="flex items-center">
455
+ <i class="fas fa-lock mr-2"></i> Dane szyfrowane AES-256
456
+ </p>
457
+ <p class="flex items-center">
458
+ <i class="fas fa-shield-alt mr-2"></i> Zgodne z RODO/GDPR
459
+ </p>
460
+ <p class="flex items-center">
461
+ <i class="fas fa-cloud mr-2"></i> Backup w chmurze
462
+ </p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </footer>
467
+
468
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
469
+ <script>
470
+ // Monthly Chart
471
+ const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
472
+ const monthlyChart = new Chart(monthlyCtx, {
473
+ type: 'bar',
474
+ data: {
475
+ labels: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze'],
476
+ datasets: [{
477
+ label: 'Kilometry',
478
+ data: [850, 920, 1100, 980, 1245, 0],
479
+ backgroundColor: 'rgba(99, 102, 241, 0.7)',
480
+ borderColor: 'rgba(99, 102, 241, 1)',
481
+ borderWidth: 1
482
+ }]
483
+ },
484
+ options: {
485
+ responsive: true,
486
+ maintainAspectRatio: false,
487
+ scales: {
488
+ y: {
489
+ beginAtZero: true
490
+ }
491
+ },
492
+ plugins: {
493
+ legend: {
494
+ display: false
495
+ }
496
+ }
497
+ }
498
+ });
499
+
500
+ // Yearly Chart
501
+ const yearlyCtx = document.getElementById('yearlyChart').getContext('2d');
502
+ const yearlyChart = new Chart(yearlyCtx, {
503
+ type: 'line',
504
+ data: {
505
+ labels: ['2020', '2021', '2022', '2023'],
506
+ datasets: [{
507
+ label: 'Roczne kilometry',
508
+ data: [8500, 9200, 11000, 10300],
509
+ fill: true,
510
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
511
+ borderColor: 'rgba(59, 130, 246, 1)',
512
+ tension: 0.3,
513
+ borderWidth: 2
514
+ }]
515
+ },
516
+ options: {
517
+ responsive: true,
518
+ maintainAspectRatio: false,
519
+ plugins: {
520
+ legend: {
521
+ display: false
522
+ }
523
+ },
524
+ scales: {
525
+ y: {
526
+ beginAtZero: true
527
+ }
528
+ }
529
+ }
530
+ });
531
+
532
+ // Fade in animation for elements
533
+ document.addEventListener('DOMContentLoaded', function() {
534
+ const fadeElements = document.querySelectorAll('.fade-in');
535
+
536
+ const fadeInObserver = new IntersectionObserver((entries) => {
537
+ entries.forEach(entry => {
538
+ if (entry.isIntersecting) {
539
+ entry.target.style.opacity = '1';
540
+ entry.target.style.transform = 'translateY(0)';
541
+ }
542
+ });
543
+ }, { threshold: 0.1 });
544
+
545
+ fadeElements.forEach(element => {
546
+ element.style.opacity = '0';
547
+ element.style.transform = 'translateY(20px)';
548
+ element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
549
+ fadeInObserver.observe(element);
550
+ });
551
+ });
552
+ </script>
553
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sylwek1916/nowe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
554
+ </html>