Ogólne informacje
Projekt jest przygotowany do wdrożenia na Bootstrap (responsywne układanie).
Wszystkie style i logika wizualna muszą odpowiadać stylowi strony: https://aquapartners.weblium.site/
Schemat kolorów, przyciski, czcionki — w jednolitym stylu z tą stroną.
W załączniku znajduje się wizualizacja każdego ekranu, wykonana w Paint na podstawie przykładowego projektu, którą należy dla programisty na Bootstrap odtworzyć w Figma.
Ekran 1 — Ikona widżetu
Funkcjonalność:
Prosty widżet do wstawienia na dowolną stronę, bez naruszania stylów strony.
Przycisk do otwarcia widżetu umieszczony po prawej stronie i prowadzi do Ekranu 2.
Ekran 2 — Logowanie / rozpoczęcie zamówienia
Cel: Wprowadzić login i hasło, aby przejść do składania zamówienia lub wybrać "Zamówić bez rejestracji".
Bloki:
Nagłówek: "Aby złożyć zamówienie, wprowadź swój Login i Hasło"
Pole na login
Pole na hasło
Przycisk „Zaloguj się”
Linki: „Zapomniałeś danych do logowania?”, „Zarejestruj się…” prowadzą do czatu telegram
Przycisk nieaktywny „Zamówić bez rejestracji”
Na dole: fraza z linkiem — "Kontynuując, wyrażam zgodę na przetwarzanie danych osobowych"
Ekran 3 — Wprowadzanie danych odbiorcy
Cel: Wprowadzić imię i nazwisko, email, telefon, adres dostawy.
Bloki:
Twoje imię
E-mail
Numer telefonu
Lista aktywnych adresów (z radiobuttonami do wyboru, np.: Adres 1, Adres 2)
W każdym bloku adresu:
Przycisk „Dodaj nowy adres” na dole
Ekran 3.1 — Konto klienta (historia zamówień)
Funkcjonalność:
Wyświetlanie salda pieniędzy i taryf (dług / nadpłata)
Statystyki: liczba zamówień
Informacje o ostatnim zamówieniu: lista towarów, ilość, suma, kierowca, adres
Przycisk: „Powtórz ostatnie zamówienie”
Przycisk: „Złóż nowe zamówienie” (prowadzi do Ekranu 4)
Ekran 4 — Wybór towarów
Cel: Wybrać towary do nowego zamówienia
Bloki:
Rozwijane menu z kategoriami towarów
Wybrane towary z listy: nazwa, ilość +/-, cena, przycisk „X” (usuń)
Suma zamówienia
Zniżka (jeśli jest)
Do zapłaty
Saldo (nadpłata/dług)
Przycisk: „Dalej”
Ekran 4.1 — Szczegóły dostawy i płatności
Cel: Wybrać datę, czas, metodę płatności, zostawić komentarz
Bloki:
Wybór daty (dostępne następne 2 dni + przycisk wyboru innej daty)
Wybór czasu (domyślnie: 08:00–21:00, lub wybór interwału)
Metoda płatności (używane tylko te opcje):
Gotówką
Kartą B/N
Na podstawie umowy
Terminal
Pole na komentarz
Przycisk „Złóż zamówienie”
Ekran 5 — Podgląd zamówienia
Cel: Przegląd wprowadzonych danych przed zatwierdzeniem
Bloki:
Adres dostawy (z możliwością zmiany)
Telefon, data dostawy, czas, metoda płatności
Lista towarów, ilość, cena
Podsumowanie: zniżka, łączna kwota do zapłaty
Komentarz do zamówienia (wyświetlany)
Przycisk „Wstecz”
Przycisk „Potwierdź”
Ekran 6 — Błąd podczas składania zamówienia
Cel: Pokazać powód, dla którego zamówienie nie zostało zrealizowane
Treść:
Nagłówek: „Zamówienie nie zostało złożone”
Tekst z podaną przyczyną (np.: minimalna ilość towarów typu „Wyposażenie”: 3)
Ilustracja z ostrzegawczym znakiem
Przycisk „Wstecz”
Ekran 7 — Zamówienie zatwierdzone
Cel: Powiadomić użytkownika o pomyślnym złożeniu
Treść:
