Portfólió készítés

Készíts egy egyszerű vicces bemutatkozó weboldalt pythonban Flask segítségével!

Megjelenési követelmények:

• Az oldal legyen 3 részre tagolva: fejléc / középső tartalmi rész / lábléc
• A fejlécben legyen egy címsor <H1></H1>, amely a "Bemutatkozó oldal" szöveget tartalmazza.
• A fejlécnek 100px magasnak kell lennie.
• A fő tartalomnak legalább 500px magasnak kell lennie.
• A láblécben legyen egy szövegrész, amely a "© 2023 Bemutatkozó oldal" szöveget tartalmazza.
• A láblécnek 100px magasnak kell lennie.
• A középső tartalmi részben legyen:
  • Címsor, amely a "Vicces bemutatkozó adataim!" szöveget tartalmazza.
  • Lista melyek elemeinek szürke színűnek és 10px-es térköznek kell lennie. A listában sorolt fel az 5 kedvenc hobbidat.
  • A lista alatt legyen minden hobbiról egy kép. (Figyel, hogy a kép szabadon felhasználható legyen! Figyelj a licensz)
  • A képek egymás mellett helyezkedjenek el, legfeljebb 3 db egy sorban, utána a következő sorba törjenek. Az oldal szélességének változtatásával (responzív oldal) a képek törjenek egymás alá, majd a végén teljes mobilnézetben egy sorban egy kép legyen.
  • Bekérő részt, mely a következőket tartalmazza: név, foglalkozás, életkor, munkahely.
  • Gomb, melynek zöld színűnek és fehér szövegűnek kell lennie.
• Reszponzív oldalt készíts (mindenfajta third-party lib nélkül)

Amikor a felhasználó rákattint a gombra, a szerver egy JSON objektumot küld vissza, amely tartalmazza a következő információkat:

• Név: (pl: Csiga Csilla )
• Foglalkozás: (pl.: levél evés )
• Életkor: (pl.: már túl mindenen)
• Munkahely: (pl: rétiroda)

Működési Követelmények:

• A weboldalnak működnie kell a http://localhost:5000 címen
• A gomb kattintására el kell indulnia a szerver felé a POST kérésnek
• A szervernek vissza kell küldenie egy JSON objektumot a kért adatokkal
• A weboldalon meg kell jeleníteni a szerver által visszaküldött adatokat

Segítség: Beüzemelés, indítás

Erősen ajánlott virtuális környezetet használni.

1. Virtuális környezet létrehozása

• Linux/macOS:
  • python3 -m venv .venv
• Windows (PowerShell):
  • python -m venv .venv

2. Aktiválás

• Linux/macOS:
  • source .venv/bin/activate
• Windows (PowerShell):
  • ..venv\Scripts\Activate.ps1
  • (ha PowerShell blokkolja a futtatást: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned)

3. Flask telepítése

• pip install --upgrade pip
• pip install flask

4. Futtatás a környezetben

• python app.py (Linux/macOS: python3 app.py)
• A böngészőben megnyitni: http://127.0.0.1:5000

5. Kilépés a virtuális környezetből

• deactivate