Frontend Overview
Relevant source files
The following files were used as context for generating this wiki page:The frontend of the Institute Itech old website is a server-rendered system built using PHP, styled with custom CSS, and enhanced with vanilla JavaScript for client-side interactivity. The architecture relies on PHP files to handle routing and data/translation loading, which then include .phtml files for templating. The styling is heavily reliant on a custom design system with CSS variables and a complex grid layout, while JavaScript manages navigation, UI component state, and user interactions like cookie consent.
The system supports internationalization (i18n) through PHP session management and JSON/PHP-array-based translation files, allowing content to be displayed in multiple languages (Italian, English, French, Spanish).
Architecture
The application follows a traditional server-rendered page architecture. A top-level PHP file (e.g., index.php, iite/overview.php) acts as an entry point for a specific URL. This entry point handles session initialization, language detection, and includes the main layout and page-specific content.
The diagram below illustrates the typical server-side rendering flow for a page request.
This diagram shows the server-side process from user request to final HTML rendering.
Sources: iite/overview.php, index.php, apps/pages.php
Styling and Theming
The visual appearance is controlled by two main stylesheets: design.css and iite.css. The project uses a theming system based on CSS custom properties (variables) defined in the :root selector, allowing for a consistent color palette and design language across the site.
Sources: themes/css/design.css:1-20, themes/css/iite.css:3-22
Color Palette
A central color palette is defined as CSS variables for easy reuse and maintenance.
| Variable | Value | Description |
|---|---|---|
--static-background | #BFBFBF | A static background color. |
--navbar-background | #02274c | Background for the navigation bar. |
--w-white | white | White color. |
--w-black | black | Black color. |
--w-grey | #e9e9e9 | A light grey, often for backgrounds. |
--w-midnight | #222940 | A dark blue/midnight color. |
--w-blue | #0448d5 | The primary blue accent color. |
--w-orange | #fc6d49 | An orange accent color. |
--w-yellow | #FFC34A | A yellow accent color. |
--w-green | #26A646 | A green accent color. |
--w-crimson | #f22e52 | A crimson/red accent color. |
Sources: themes/css/design.css:3-19, themes/css/iite.css:5-21
Layout System
The layout is primarily constructed using CSS Grid. The design.css file contains numerous classes for creating complex, multi-column grid structures, such as .grid-inside-departments and .container-backinfo-swipewindows. These grids are used to position content blocks for different pages like "Company," "Departments," and "Relationship."
The site is also responsive, using @media queries to adjust layouts for different screen sizes, from mobile (320px) up to large desktops. A key responsive feature is the switch from a desktop horizontal navigation bar to a mobile "hamburger" menu.
Sources: themes/css/design.css:844-851, themes/css/design.css:1120-1149
Client-Side Interactivity
Client-side logic is handled by apps/js/iite_components.js. This file contains vanilla JavaScript to manage UI components, navigation, and user preferences.
Key JavaScript Functions
| Function / Logic | Description |
|---|---|
data-page event listeners | Handles client-side navigation by redirecting the user based on the data-page attribute of a clicked element. |
| Logo Color Changer | Dynamically changes the color of the site logo (#iitelogo) based on the current URL path. |
| Cookie Consent | Manages the visibility of the cookie consent banner and stores the user's choice in localStorage. |
menunavmobile() | Toggles the visibility and state of the mobile navigation menu. |
interface() | Implements a tabbed interface where clicking a button shows a corresponding content panel. |
Sources: apps/js/iite_components.js
Page Navigation
Client-side navigation is triggered by elements with a data-page attribute. The script attaches a click listener to these elements and redirects the browser to the corresponding URL.
This diagram shows the logic for handling clicks on elements with the data-page attribute.
Sources: apps/js/iite_components.js:5-24
Cookie Consent Management
A cookie consent banner's behavior is managed on the client side. The user's interaction (accept or decline) is stored in localStorage to prevent the banner from reappearing on subsequent visits.
This diagram outlines the workflow for the cookie consent banner.
Sources: apps/js/iite_components.js:58-96
Tabbed Interface
The interface() function powers a simple tabbed content system. It links buttons with the menu-interface attribute to content boxes with the .w-interface class. Clicking a button adds an interface-active class to the corresponding content box to display it, while removing the class from all others.
Sources: apps/js/iite_components.js:141-160, themes/css/design.css:1002-1008, themes/css/design.css:1052-1054
Internationalization (i18n)
The website is multilingual, with language selection managed on the server-side using PHP sessions.
- Language Selection: The language can be changed by adding a
?lang=query parameter to the URL (e.g.,?lang=en). The server-side PHP script detects this, updates the$_SESSION['lang']variable, and reloads the page without the query parameter. - Translation Storage:
- UI Strings: General UI text (e.g., button labels, navigation items) is stored in
apps/translations.json. - Page Titles: Page-specific titles are stored in a PHP array in
apps/pages.php.
- UI Strings: General UI text (e.g., button labels, navigation items) is stored in
- Translation Function: A global
t($key)function is used within the.phtmltemplates to fetch the correct translation string for the currently selected language. It falls back to English if a translation is missing.
The following diagram illustrates the language switching process.
This diagram shows how the server handles a language change request.