Hemsida_stad/docs/plan.md

GävleGuiden

📌 Syfte

Syftet med projektet GävleGuiden är att skapa en modern, informativ och visuellt tilltalande webbplats som presenterar utvalda sevärdheter i Gävle.
Webbplatsen ska fungera som en digital guide för både turister och invånare genom att erbjuda lättillgänglig information, bilder och externa länkar till varje plats.

Hemsidan ska:

• Väcka intresse för Gävle som besöksmål
• Vara informativ och lättnavigerad
• Fungera på dator, surfplatta och mobil
• Vara helt statisk utan backend eller databas

📋 Kravspecifikation

🗺️ Innehåll

Webbplatsen ska innehålla informationssidor för följande platser:

• Boulognerskogen
• Gävlebocken
• Järnvägsmuseet
• Fängelsemuseet
• Gävle Konserthus
• Fjärran Höjder

För varje plats gäller:

• 1–3 bilder per plats
• Bilder på alla platser förutom Gävlebocken ska vara egenfotograferade
• Bilder på Gävlebocken får hämtas online och måste följa upphovsrätt
• Kort, beskrivande information om platsen
• Extern länk till platsens position via Google Maps
• Bilder ska visas med CSS Flexbox

🎨 Design & Användarupplevelse

• Webbplatsens namn ska vara GävleGuiden
• Navigationsmeny (navbar) ska finnas på alla sidor och innehålla:
  • Länkar till samtliga platser
  • Om oss
  • Kontakt
• Footer ska innehålla:
  • Dynamiskt årtal som hämtas via JavaScript
• Webbplatsen ska ha Ljust och Mörkt läge
  • Växling sker via knapp
  • Valet sparas i localStorage
• Webbplatsen ska vara responsiv för PC, surfplatta och mobil

🧑‍💻 Teknik & Struktur

Fil- och mappstruktur

Projektet ska använda följande struktur:

src/

src/
├── index.html
├── om-oss.html
├── kontakt.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── platser/
  ├── boulognerskogen.html
  ├── gavlebocken.html
  ├── jarnvagsmuseet.html
  ├── fangelsemuseet.html
  ├── konserthuset.html
  └── fjarran-hojder.html

• index.html ska ligga i src/
• Alla platser ska ha egna HTML-filer i src/platser/
• Sidorna Om oss och Kontakt ska ha egna HTML-filer i src/ (om-oss.html, kontakt.html)
• All JavaScript-kod ska ligga i src/js/main.js
• All CSS ska ligga i extern fil:
  src/css/style.css
• Ingen backend eller databas ska användas
• Projektet ska publiceras på GitHub med MIT-licens

🛠️ Genomförande

1️⃣ Planering

• Välja platser och samla information
• Ta egna bilder (eller lägga till temporära bilder tills egna har tagits)
• Säkerställa upphovsrätt för externa bilder (eller lägg till temporära bilder tills bilder har hittats som uppföljer Upphovsrätten)

2️⃣ Struktur & HTML

• Skapa index.html som startsida
• Skapa separata HTML-sidor för varje plats
• Implementera gemensam navbar och footer

3️⃣ CSS & Layout

• Implementera färgtema enligt specifikation
• Använda Flexbox för bildgallerier
• Säkerställa god kontrast och läsbarhet
• Skapa responsiv layout med media queries

4️⃣ JavaScript-funktionalitet

• Implementera ljust/mörkt läge i main.js
• Spara användarens val i localStorage
• Dynamiskt uppdatera årtal i footer
• Hantera interaktioner och navigering

5️⃣ Testning & Kvalitetssäkring

• Testa webbplatsen på olika skärmstorlekar
• Testa tema-växling
• Kontrollera Google Maps-länkar
• Validera HTML och CSS

🎨 Färgtema

🔴 Temafärger

• Primary: #E10600
• Hover: #B10500
• Subtle: #FCE8E6

🌕 Ljust läge

• Background: #F8F9FB

• Surface / Card: #FFFFFF

• Border / Divider: #E5E7EB

• Text Primary: #0F172A

• Text Secondary: #475569

• Text Muted: #94A3B8

🌑 Mörkt läge

• Background: #0B0F14

• Surface / Card: #111827

• Border / Divider: #1F2933

• Text Primary: #E5E7EB

• Text Secondary: #9CA3AF

• Text Muted: #6B7280

🟢 Statusfärger

• Success: #22C55E
• Warning: #F59E0B
• Error: #EF4444
• Info: #38BDF8