Országos Kékkör (100 pont)

Készíts webhelyet az Országos Kékkör túráinak tervezésére, teljesítésének adminisztrációjára!

1. oldal: Túraválasztás

Ezen az oldalon lehet kiválasztani, hogy a Kékkör melyik túráján szeretnénk túrázni.

Az 1. oldalon megjelenő űrlapelemek:
  • Legördülő lista az alábbi választási lehetőségekkel
    • Országos Kéktúra
    • Dél-dunántúli Kéktúra 
    • Alföldi Kéktúra 
  • Túratervezésre szolgáló gomb (felirata: Túratervezés)
  • Teljesítés adminisztrációjára szolgáló gomb (felirata: Túrateljesítés)

Az 1. oldal működése
A legördülő listából lehessen választani, hogy az Országos Kékkör mely részén szeretnénk túrát tervezni vagy adminisztrálni. 

  • Ha kiválasztunk egy listaelemet és a Túratervezés gombra kattintunk,  akkor a 2. (Túratervezés) oldalra jutunk, és a kiválasztott túraútvonal szakaszait látjuk.
  • Ha kiválasztunk egy listaelemet és a Túrateljesítés gombra kattintunk,  akkor a 4. (Túrateljesítés) oldalra jutunk, és a kiválasztott túraútvonal szakaszait látjuk.
    • Túrateljesítés adminisztrációjára csak regisztrált, bejelentkezett felhasználóknak van lehetőségük. A regisztráció az 5. oldalon történik. 
    • Ha a Túrateljesítés gombra kattint a felhasználó, és még nem jelentkezett be, akkor előbb a bejelentkező oldalra (6. oldal) kerüljön, majd bejelentkezés után onnan tovább a Túrateljesítés oldalra.

2. oldal: Túratervezés

Ezen az oldalon lehet útvonalat tervezni. 

A 2. oldalon megjelenő űrlapelemek:
  • jelölőnégyzet a túraszakasz kiválasztására soronként
  • Tervezés gomb

Az 1. oldalon (Túraválasztás) kiválasztott túraútvonal szakaszai jelennek meg egymás alatt felsorolva. Egy-egy sorban a következő adatok jelenjenek meg: 

  • jelölőnégyzet a túraútvonal kiválasztására, 
  • a túraszakasz kezdőpontja, 
  • a túraszakasz végpontja, 
  • a túraszakasz hossza (km), 
  • szintemelkedés (m), 
  • szintcsökkenés (m).

Az adatokat adatbázisból vagy fájlból olvasd ki. Az adatokat az ok.csv (Országos Kéktúra), ddk.csv (Dél-dunántúli Kéktúra), ak.csv (Alföldi Kéktúra) fájlok tartalmazzák.

A 2. oldal működése

Ha véletlenül nem összefüggő útvonalat jelöltünk be, akkor jelenjen meg figyelmeztető ablak a következő üzenettel: Nem összefüggő az útvonal!

Összefüggő útvonal esetén kerüljünk át a harmadik oldalra (Túraterv).

3. oldal: Túraterv

Ezen az oldalon az elkészített túraterv jelenik meg. Ezt az oldalt nyomtatni szeretnénk, emiatt állítsd be, hogy nyomtatáskor a háttér és a fejléc ne látszódjon, csak a tervezett útvonal az adataival.

A 2. oldalon kiválasztott útvonalak íródjanak ki adataikkal együtt az oldalra, egy-egy sorban a következők jelenjenek meg: 

  • a túraszakasz kezdőpontja,
  • a túraszakasz kezdőpontja pecsételőhely-e (zárójelben a túraszakasz kezdőpontja után: PH),
  • a túraszakasz végpontja, 
  • a túraszakasz végpontja pecsételőhely-e (zárójelben a túraszakasz végpontja után: PH),
  • az egyes túraszakaszok hossza (km).
A túraszakaszok alatt legyen összegzés, amely a következőket tartalmazza:
  • a tervezett túra teljes hossza (km) = a tervezett túraszakaszok összege,
  • a tervezett túra szintemelkedése (m) = a tervezett szakaszok szintemelkedésének az összege, 
  • a tervezett túra szintcsökkenése (m) = a tervezett szakaszok szintcsökkenésének az összege.

4. oldal: Túrateljesítés

Ez az oldal a megtett útvonalak megtekintésére és rögzítésére szolgál. 
Az eddig bevitt túraszakaszok túraútvonalanként (Országos Kéktúra, Dél-dunántúli Kéktúra, Alföldi Kéktúra) ebben a sorrendben, egymás alatt jelenjenek meg. 
Túraútvonalakon belül dátum szerint növekvő sorrendben jelenjenek meg a megtett túraszakaszok, távolsággal együtt. Az egy nap alatt megtett túraszakaszok összes kezdőhelye jelenjen meg, a következő pontig megtett távolsággal.
Új teljesítés rögzítésére a már rögzített adatok feletti űrlapon legyen lehetőség.
A 4. oldalon megjelenő, rögzítésre szolgáló űrlap elemei:
  • Naptár a dátum rögzítésére,
  • Legördülő lista a túra kezdetének kiválasztására,
  • Legördülő lista a túra végének beállítására,
  • Rögzítő gomb
A 4. oldal működése
A bevitt adatok kerüljenek be adatbázisba. Az oldal újralistázásakor a teljesítések mindig jelenjenek meg.

5. oldal: Regisztráció

Ezen az oldalon lehet regisztrálni a weboldalra. A regisztrációhoz e-mail-cím és jelszó megadása szükséges. E párossal lehet az oldalra belépni is.

Az 5. oldalon megjelenő űrlap elemei:
  • E-mail-cím megadására szolgáló szövegdoboz
  • Jelszó megadására szolgáló szövegdobozból kettő darab
  • Regisztráció gomb
Az 5. oldal működése
  • Ha az e-mail-cím nem megfelelő formátumú, kapjunk hibaüzenetet: Hibás az e-mail-cím!
    • Nem megfelelő az e-mail-cím formátuma, ha 
      • az angol ábécé betűin, a számokon, a ponton és a @ karakteren kívül egyéb karakter is szerepel benne
      • nincsen benne @ jel
      • egynél több @ jel szerepel benne
      • a @ jel utáni részben a legutolsó pont után négynél több karakter szerepel
  • Ha a két jelszómezőbe nem ugyanazt a jelszót adjuk meg, kapjuk ezt a hibaüzenetet: Nem egyező jelszavak!
  • Ha megfelelő az e-mail-cím formátuma és a jelszavak is egyeznek, az e-mail-cím - jelszó páros kerüljön be adatbázisba.

6. oldal: Belépés

Ezen az oldalon lehet belépni a weboldalra. 

A 6. oldalon megjelenő űrlap elemei:
  • E-mail-cím megadására szolgáló szövegdoboz
  • Jelszó megadására szolgáló szövegdoboz
  • Belépés gomb
A 6. oldal működése
Ha nem megfelelő e-mail-cím - jelszó párost írtunk be, akkor hibaüzenetet kapunk: Nem megfelelő e-mail-cím vagy jelszó!

Ha jó a beírt e-mail-cím - jelszó páros, akkor sikeresen bejelentkeztünk, tudjuk adminisztrálni az útvonalakat.

A bejelentkezés kezelése

Ha nincs felhasználó bejelentkezve, a jobb felső sarokban legyenek linkek a következő felirattal: Belépés / Regisztráció. A Belépés link a 6. oldalra vigyen, a Regisztráció link az 5. oldalra. 

Ha be van jelentkezve felhasználó, akkor a bejelentkezett felhasználó e-mail-címe jelenjen meg az oldal jobb felső sarkában, utána a Kilépés gomb. Ha a Kilépés gombra kattintunk, akkor a belépett felhasználót léptesse ki a rendszer. 

Az oldalak kinézete

Az oldalak kinézete legyen egységes, az alábbi beállításokkal.
  • Az oldalak háttere a kekdeszka.png kép legyen. 
  • Az oldalon "Courier New", Courier, monospace betűcsaládot használj, a betűk színe fehér legyen.
  • Az oldal alapértelmezett betűmérete, a bekezdések betűmérete 16 képpont, a szöveg balra igazított.
  • A hiperhivatkozás színe minden állapotban fehér legyen, ne legyen aláhúzva, de legyen félkövér betűvel írva.
  • Az oldal tartalmi része 800 képpont széles részen jelenjen meg, melynek mindkét oldalán egyforma széles üres rész legyen. 
  • A fejlécben az Okt_trail_marking.JPG kép legyen
    • A képet ne szerkeszd át.
    • A képnek csak az alsó 200 képpont magas része látszódjon, teljes szélességében.
    • A képen szerepeljen az Országos kékkör felirat. Betűi 56 képpont méretűek, félkövérek legyenek.
    • A szöveg a bal felső saroktól vízszintesen 200 képponttal, függőlegesen 60 képponttal legyen eltolva a mintának megfelelően.
  • A Belépésre, regisztrációra szolgáló linkek a fejléc fölött találhatók, jobbra igazítva.
  • A fejléc alatt a tartalom 50 képpontnyira kezdődik.
  • Az oldalakon szereplő minden gomb és legördülő lista 
    • 400 képpont széles, 
    • áttetsző hátterű, 
    • 2 képpont vastagon fehér színnel szegélyezett, 
    • belső margója 5 képpontnyi, 
    • külső margója 10 képpontnyi, 
    • felirata félkövér, 
    • az oldal közepén helyezkedik el.
  • A táblázatokban csak a vízszintes szegélyek legyenek megjelenítve 1 képpontnyi fehér vonallal.
Az oldalak címe rendre Túraválasztás, Túratervezés, Túraterv, Túrateljesítés, Regisztráció, Belépés. 

Minta:


Forrás: 

http://www.kektura.click.hu

https://hu.wikipedia.org/wiki/Orsz%C3%A1gos_K%C3%A9kt%C3%BAra#/media/File:Okt_trail_marking.JPG