Przetwarzanie formularzy webowych i zapisywanie danych

Jest skrypt w php i javascript (źródło), który po wypełnieniu pól tekstowych formularza internetowego wysyła dane do telegramu, screencast działania: https://dropmefiles.com/fFux2

Na podstawie tego źródła należy stworzyć kilka stron, dodać nowe funkcje. Od Ciebie tylko kod, nie trzeba integrować z żadną stroną ani projektować nic. Powinno działać według takiego algorytmu:

1). Użytkownik na pierwszej stronie "A" wypełnia pola tekstowe formularza, klika "Submit".
2). Otwiera się strona "B" z formularzem na 3 pola i 1 "Browse..." (przesyłanie pliku obrazu), wypełnia, wybiera plik(i) i klika "Submit".
3). Otwiera się strona "C" z 2 "Browse...", wybiera pliki i klika "Submit".
4). Otwiera się strona "D" z 1 "Browse...", wybiera plik(i) i klika "Submit".
5). Otwiera się strona "E" z formularzem na 1 pole, wypełnia go i klika "Submit".
6). Otwiera się strona końcowa "F" z tekstem "Zgłoszenie przyjęte, oczekuj telefonu!".

#Formularze#:
Przycisk "Submit" powinien być nieaktywny (szary), dopóki wszystkie obowiązkowe pola w wyświetlanym formularzu nie są wypełnione lub nie zostały przesłane obowiązkowe pliki w 100%.
Pola i przyciski wyboru plików "Browse..." mogą być obowiązkowe lub opcjonalne do wypełnienia.

Podczas przesyłania obrazów, obok każdego przycisku "Browse..." powinna być wyświetlana animowana belka postępu od 0% do 100%. Dopóki pliki nie są wybrane, belka powinna być ukryta.

Przy "Browse..." powinna być możliwość wyboru i przesyłania więcej niż 1 pliku jednocześnie (teraz tylko jeden). Obrazy nie powinny być zmieniane, jeśli w nazwach są znaki [^A-Za-z1-9] - można je zastępować. Sprawdzanie przesyłania tylko obrazów (jpg,jpeg,png,gif), aby żadne shelly nie były przesyłane 🙂

Wszystkie pola i przyciski "Browse..." powinny przesyłać dane na bieżąco (lub przy wyborze plików) automatycznie, niezależnie od naciśnięcia "Submit". Tak teraz działa. Naciśnięcie "Submit" powinno tylko przekierować na następną stronę przy powyższych warunkach.

#Panel administracyjny#
Powinien być stworzony najprostszy panel administracyjny, gdzie po podaniu id użytkownika, widać:

1. Logowanie wszystkich działań, na jakiej stronie wypełniał, jakie pliki przesyłał z linkami do nich, kiedy, ip i useragent, moje działania z nim.

2. Klikając na tekst pola, jego zawartość powinna być kopiowana do schowka.

3. Moje działania: wiedząc, że użytkownik w danym momencie znajduje się na jednej ze stron, powinienem mieć możliwość:
  3.1. Zrobić przekierowanie na dowolny url, który wskażę.
  3.2. Pokazać popup na środku z lekkim przyciemnieniem tła, którego nie można zamknąć, z wyświetleniem użytkownikowi dowolnego kodu html wcześniej niewbudowanego w skrypt, dowolnymi polami tekstowymi i przyciskami "Browse..." według mojego życzenia, z tą samą logiką ich działania jak na stronach. Możliwość dodatkowego pokazania w popupie obrazu wybierając go na moim komputerze.

Wybór należy wykonać p3.1. i p3.2. teraz, lub po naciśnięciu przez użytkownika "Submit" na stronie, na której obecnie się znajduje (nie trzeba robić przez websocket, pingujemy panel administracyjny co 1.5-2.5 sekundy).

4. Jeśli nagle TG jest niedostępny z jakiegokolwiek powodu - tylko w panelu administracyjnym zapisujemy, aby nic nie zostało utracone.

#Dane#
Wprowadzane dane przez jednego użytkownika powinny być zapisywane w jednej wiadomości w TG. Obecny formularz ma błąd: jeśli odświeżysz stronę lub wyślesz formularz i ponownie zaczniesz wypełniać, tworzy się nowa wiadomość w tg. A powinno być wszystko w jednym - jeden unikalny użytkownik = 1 wiadomość w panelu administracyjnym i w TG, zwiększająca się w miarę wypełniania pól we wszystkich formularzach. 

Dane z pól i w panelu administracyjnym, i w TG powinny pokazywać WSZYSTKIE wartości, które wprowadził użytkownik - uważnie obejrzyj wideo, które załączyłem na początku (lub mogę przesłać ten skrypt) - dokładnie tak i w żaden inny sposób, w kolumnie, powinny być dodawane dane dla każdego pola, jeśli zacznie ponownie wypełniać, usuwać wprowadzony tekst całkowicie lub częściowo, lub ponownie znajdzie się na tej stronie i będzie kontynuował wypełnianie.

Pisz na PW, jeśli masz pytania, płatność USDT.