Cel
Stwórz stronę internetową, która generuje wzór w kształcie diamentu (romboidalny układ) z "cegiełek", gdzie środek diamentu pozostaje pusty, a "cegły" tworzą tylko obrzeże.
Wymagania
-
Strona zawiera formularz HTML z następującymi elementami:
- Lista rozwijana (
<select>) z predefiniowanymi wzorami "cegły" (np. [==], {**}, <##>, @@@) oraz opcją "Inny wzór".
- Pole tekstowe do wprowadzenia własnego wzoru "cegły", jeśli wybrano "Inny wzór".
- Pole numeryczne do określenia liczby wierszy diamentu (od 1 do 50).
- Przycisk "Rysuj pusty diament" do przesłania formularza metodą POST.
-
Po przesłaniu formularza, PHP generuje diament:
- Górna część: od 1 "cegły" w pierwszym wierszu do pełnej szerokości w środkowym wierszu.
- Dolna część: symetryczne zwężanie od środkowego wiersza do 1 "cegły".
- W wierszach dłuższych niż 1 "cegły" pojawiają się tylko na początku i końcu, a środek pozostaje pusty.
-
Stylizacja CSS:
- "Cegły" (
span class="cegla") mają tło, cień i efekt skalowania przy najechaniu myszą.
- Puste miejsca w środku diamentu muszą mieć dynamiczną szerokość równą szerokości wybranej "cegły" (użyj np. niewidocznych <span> z taką samą stylizacją).
- Strona ma estetyczne tło (np. gradient) i wyśrodkowany układ.
Przykład wyniku
Dla wzoru [==] i 5 wierszy:
[==]
[==] [==]
[==] [==]
[==] [==]
[==]
Wskazówki
- Użyj pętli w PHP do generowania wierszy diamentu.
- Zadbaj o to, by odstępy w środku były proporcjonalne do rozmiaru "cegły" (np. poprzez ukryte elementy).
- Przetestuj różne wzory "cegły" (krótkie i długie), aby upewnić się, że układ działa poprawnie.
Dodatkowe wyzwanie (opcjonalne)
Dodaj walidację, aby upewnić się, że własny wzór "cegły" nie jest pusty i ma maksymalnie 10 znaków.