Restaurant Zalogaj Website Documentation

This documentation details the structure and purpose of the HTML files for the Restoran Zalogaj website. The site is a simple, static, multi-page restaurant presentation site, featuring pages for home, about, menu, and contact. Below you'll find a detailed explanation of each file, along with their code organization, user interaction, and design choices.

---

index.html — Home Page

The index.html file is the landing page for the restaurant website. It introduces visitors to the restaurant and provides direct access to the menu.

Purpose

• Welcome users to Restoran Zalogaj.
• Promote the atmosphere and food quality.
• Provide quick navigation to the menu and other pages.

Structure Overview

Section	Description
<nav>	Main navigation bar, logo, and site links.
.container	Central content area: Welcome text and prominent Menu button.
Internal CSS	Custom styles for layout, nav, container, and interactive elements.

Key Features

• Navigation Bar:
  Features the restaurant's logo and links to all major pages (Home, Menu, About, Contact).
• Welcome Message:
  Greets visitors and enhances the restaurant's ambiance.
• Menu Shortcut:
  Bold, stylized button guides users directly to the menu page.

Code Sample

<nav>
  <div class="logo">
    <img src="logo.png" alt="Logo" width="80" height="80">
    <h1>Restoran Zalogaj</h1>
  </div>
  <ul>
    <li><a href="index.html">Početna</a></li>
    <li><a href="menu.html">Meni</a></li>
    <li><a href="about.html">O nama</a></li>
    <li><a href="contact.html">Kontakt</a></li>
  </ul>
</nav>
<div class="container">
  <h2>Dobrodošli u restoran Zalogaj!</h2>
  <p>Uživajte u našim delikatesima i prijatnom ambijentu.</p>
  <div class="menu-buttons">
    <ul>
      <li><a href="menu.html">Pogledaj Meni</a></li>
    </ul>
  </div>
</div>

User Journey Diagram

journey
  title Home Page User Flow
  section Arrival
    User visits Home Page: 5: User
  section Exploration
    Views Welcome Section: 4: User
    Clicks Menu Button: 3: User
    Navigates via Navbar: 2: User

Loading

---

about.html — About Us Page

The about.html file presents the story and philosophy of Restoran Zalogaj. It provides background, values, and mission, building trust and emotional connection with visitors.

Purpose

• Share the origin story of the restaurant.
• List the restaurant’s values: quality, hospitality, innovation.
• Explain what makes Restoran Zalogaj unique.

Structure Overview

Section	Description
<nav>	Shared navigation bar across all pages.
.container	Main content area: restaurant story, mission, and values.
Internal CSS	Styles tailored for readability and warmth, emphasizing text justification.

Key Features

• Narrative Introduction:
  Explains the founding of the restaurant and its commitment to quality.
• Mission Statement:
  Clearly lists the restaurant’s three core values.
• Emotional Appeal:
  Emphasizes customer experience and the meaning behind each "zalogaj" (bite).

Code Sample

<div class="container">
  <h2>O nama</h2>
  <p>Restoran <strong>Zalogaj</strong> otvorili smo 2025. godine u srcu Kruševca...</p>
  <ul>
    <li><strong>Kvalitet</strong>, jer verujemo da svaki sastojak zaslužuje da zablista.</li>
    <li><strong>Toplina</strong>, jer želite da se kod nas osećate kao u domu dobrih prijatelja.</li>
    <li><strong>Inovacija</strong>, jer volimo da vas iznenadimo specijalitetom dana...</li>
  </ul>
</div>

User Experience Highlights

• Text is justified for a professional, book-like feel.
• Core values are bulleted for clarity and quick scanning.

---

menu.html — Interactive Menu Page

The menu.html file offers an interactive menu divided into categories, with an accordion effect for easy browsing of different dish and drink groups.

Purpose

• Present the full menu, organized into intuitive sections.
• Allow users to toggle between "Drinks" and "Food".
• Use accordion UI for a clean, navigable experience.

Structure Overview

Section	Description
<nav>	Shared navigation for consistency.
.container	Title and menu navigation buttons ("Pića" and "Hrana").
.hidden/.visible	Visibility toggling for menu sections via JS.
Accordion buttons	Expands/collapses menu subsections (e.g., Kafe, Glavna jela).
Embedded JavaScript	Handles show/hide logic for menu and accordions.

Key Features

• Category Switching:
  Users can toggle between drinks and food menus with prominent buttons.
• Accordion UI:
  Expands each subcategory (e.g., "Kafe", "Alkoholna pića", "Glavna jela") to reveal relevant items.
• Rich Menu:
  Includes a broad selection of traditional and international dishes, beverages, desserts, and sides.

Key JavaScript Logic

function showSection(section) {
  const sections = ['pica', 'hrana'];
  sections.forEach(id => {
    const el = document.getElementById(id);
    if (id === section) {
      el.classList.remove('hidden');
      el.classList.add('visible');
    } else {
      el.classList.remove('visible');
      el.classList.add('hidden');
    }
  });
}

• Accordion Events:
  • Each "accordion" button toggles display of its associated panel.

Menu Structure Diagram

flowchart TD
  Start(Menu Page) --> ChooseCategory["Select: Pića or Hrana"]
  ChooseCategory -->|Pića| DrinksSection
  ChooseCategory -->|Hrana| FoodSection

  DrinksSection --> Kafe
  DrinksSection --> Alkoholna
  DrinksSection --> Sokovi

  FoodSection --> Predjela
  FoodSection --> GlavnaJela
  FoodSection --> Dezerti
  FoodSection --> Dodaci

Loading

User Interactivity

• Clicking "Pića" or "Hrana" switches visible sections.
• Clicking an accordion expands/collapses the menu list smoothly.

---

contact.html — Contact Page

The contact.html file provides contact information for Restoran Zalogaj. It is a straightforward page for users to get in touch for reservations, inquiries, or suggestions.

Purpose

• Give users a way to contact the restaurant.
• Display email and phone number clearly.

Structure Overview

Section	Description
<nav>	Shared navigation for consistency.
.container	Central block with contact message, email, and phone number.
Internal CSS	Ensures contact info is prominent and easy to read.

Key Features

• Clear Contact Message:
  Encourages users to reach out for any reason.
• Prominent Contact Info:
  Email and phone number are easy to find and copy.

Code Sample

<div class="container">
  <h2>Kontaktirajte nas</h2>
  <p>Za sve informacije, rezervacije ili sugestije, slobodno nas kontaktirajte.</p>
  <p>Email: info@restoranzalogaj.com</p>
  <p>Telefon: +381 37 123 4567</p>
</div>

---

Common UI and Styling

All pages utilize:

• Consistent Navigation Bar:
  Maintains visual identity and easy navigation.
• Logo and Branding:
  Prominent placement of logo and restaurant name.
• Internal CSS:
  Ensures a cohesive look and feel, with warm colors and modern touches (shadows, rounded buttons).

Shared Navigation Bar Example

<nav>
  <div class="logo">
    <img src="logo.png" alt="Logo" width="80" height="80">
    <h1>Restoran Zalogaj</h1>
  </div>
  <ul>
    <li><a href="index.html">Početna</a></li>
    <li><a href="menu.html">Meni</a></li>
    <li><a href="about.html">O nama</a></li>
    <li><a href="contact.html">Kontakt</a></li>
  </ul>
</nav>

---

Accessibility and Language

• Multilingual Support:
  Most pages are in Serbian, but the Home and Contact pages specify lang="en" in the HTML tag (though content is Serbian).
• Mobile Responsive:
  Use of viewport meta tag and flexible layouts.

---

Best Practices & Recommendations

{
  "title": "Consistency in Navigation",
  "content": "All pages use the same navigation bar, fostering a seamless browsing experience."
}

{
  "title": "Interactive and Accessible Menu",
  "content": "Accordion UI in the menu makes browsing large lists easy without overwhelming the user."
}

{
  "title": "Call to Action",
  "content": "Menu links and contact details are prominent, guiding users to engage with the restaurant."
}

---

Summary Table

File Name	Main Purpose	Interactivity	Key Content
index (1).html	Home/Welcome page	Menu button	Welcome message, shortcut to menu
about.html	Restaurant's story & mission	None	Detailed about section
menu.html	Interactive food & drinks menu	Tabs, Accordions (JS)	Menu categories & items
contact.html	Contact information	None	Email, phone, contact message

---

Final Notes

• The website is a clean, modern, static site ideal for small restaurants.
• The JS in menu.html adds meaningful interactivity with minimal complexity.
• The code favors readability, warmth, and user engagement.

For any new features, consider adding:

• Online reservation forms
• Photo gallery or reviews
• Language switcher for full Serbian/English support

---

End of Documentation