Sveučilište Algebra – Web Project (SUPIT)

A static multi-page website built as a university project, modelled after the Algebra University College website. It features user authentication against a REST API, a protected curriculum browser, a news section, a contact form, and an image gallery with a custom slideshow.

---

Project Structure

BlazevicPaulo/
├── src/                  ← HTML pages
│   ├── index.html        ← Home page (video background, animated intro text)
│   ├── about.html        ← About page (values, history, campus gallery, map)
│   ├── class.html        ← Curriculum browser (protected, login required)
│   ├── news_view.html    ← News overview
│   ├── news1.html        ← News article 1
│   ├── news2.html        ← News article 2
│   ├── news3.html        ← News article 3
│   ├── contact.html      ← Contact form
│   ├── login.html        ← Login page
│   └── register.html     ← Registration page
├── js/
│   ├── navbar.js         ← Dynamic navbar builder (auth-aware)
│   ├── classes.js        ← Curriculum table logic (API fetch, add/remove rows)
│   ├── slideShow.js      ← Gallery slideshow with slide animations
│   └── uvodniText.js     ← Typewriter effect for the home page heading
├── styles/
│   ├── index.css         ← Main stylesheet (layout, animations, components)
│   ├── contact.css       ← Contact form styles
│   ├── dropdown.css      ← Searchable dropdown styles
│   ├── slideshow.css     ← Slideshow overlay styles
│   └── table.css         ← Curriculum table styles
└── assets/
    ├── icon/             ← Favicon
    ├── img/              ← Page images (logos, gallery, news photos, campus)
    └── video/            ← Background videos (home page, WorldSkills)

---

Pages

Page	Description
index.html	Landing page with a looping video background and a typewriter animation
about.html	Institution overview — values, history, Algebra Group, gallery, and directions
class.html	Protected. Searchable curriculum browser that fetches data from the API
news_view.html	News listing with links to individual articles
news1–3.html	Individual news article pages
contact.html	Contact form submitted to fulek.com/mvc/supit/project-contact-form
login.html	Login form; stores JWT token and username in sessionStorage on success
register.html	Registration form; redirects to login on success

---

Features

Authentication

Login and registration POST to the fulek.com REST API. On success, the JWT token and username are saved in sessionStorage (auth-token, user). Visiting login.html always clears any existing session.

Auth-aware Navbar (navbar.js)

The navbar is built dynamically on every page. It shows Prijavi se (Login) when no token is present, and Odjava (Logout) plus the logged-in username when a token exists. The Nastavni plan (Curriculum) link only appears when the user is authenticated.

Curriculum Browser (class.html + classes.js)

Requires a valid session — unauthenticated visitors are redirected to index.html. Subjects are fetched from the API with a Bearer token. The user can:

• Search/filter subjects via a searchable dropdown
• Add subjects to a comparison table
• Remove subjects from the table
• See running totals for ECTS credits, hours, lectures, and exercises in the table footer

Image Gallery & Slideshow (about.html + slideShow.js)

The About page includes a two-image gallery. Clicking an image opens a fullscreen overlay slideshow with left/right slide animations and a close button.

Typewriter Effect (uvodniText.js)

The home page heading types out two lines of text character by character using setInterval.

---

External Dependencies

All loaded via CDN — no package manager or build step needed.

Library	Version	Usage
Bootstrap CSS	5.3.3	Layout and UI components
Bootstrap Icons	1.11.3	Navigation and UI icons
Axios	latest	API calls (login, register, curriculum)

---

API Endpoints

All API calls go to https://www.fulek.com:

Method	URL	Purpose
POST	/data/api/user/login	Authenticate and receive JWT token
POST	/data/api/user/register	Register a new user
GET	/data/api/supit/curriculum-list/hr	Fetch all curriculum subjects
GET	/data/api/supit/get-curriculum/{id}	Fetch details for one subject
GET	/mvc/supit/project-contact-form	Submit contact form (query params)

---

Running Locally

This is a plain static site — no build step required. Open any page directly in a browser, or serve the project root with a simple local server to avoid path issues:

# Using Python
python -m http.server 8080

# Using Node.js (npx)
npx serve .

Then navigate to http://localhost:8080/src/index.html.

Note: The navbar uses window.location.pathname to detect the current page (e.g. for rendering the About page's secondary nav). Opening HTML files directly via file:// may cause this check to behave differently across browsers — using a local server is recommended.

---

Author

Paulo Blažević
Faculty of Algebra, Zagreb