UI Components

Relevant source files

The following files were used as context for generating this wiki page:

• apps/js/iite_components.js
• themes/css/design.css
• themes/css/iite.css
• apps/translations.json
• apps/pages.php
• iite/overview.php
• iite/relationship.php
• inside/interface.php
• research/overview.php

The oldwebsite project features a set of cohesive UI components managed through a combination of vanilla JavaScript, CSS styling, and a PHP-based backend for content and internationalization. The core front-end logic is centralized in iite_components.js, which handles user interactions for navigation, cookie consent, and tabbed interfaces. Styling is defined in design.css and iite.css, which provide a consistent visual theme using CSS variables.

Textual content and labels are dynamically loaded based on the user's selected language, which is managed server-side via PHP sessions. The translations.json file serves as the primary dictionary for UI strings, enabling robust internationalization across all components. This architecture separates behavior, presentation, and content, creating a maintainable and scalable front-end system.

Core Styling and Layout

The visual foundation of the UI is built upon a set of CSS variables and utility classes that define the color palette, typography, and primary layout structures.

Sources: themes/css/design.css, themes/css/iite.css

CSS Variables

A consistent color scheme is enforced through CSS variables defined in the :root selector. This allows for easy theming and maintenance of the site's visual identity.

Variable	Value	Description
--navbar-background	#02274c	Background color for the main navigation bar.
--w-white	white	Primary white color.
--w-black	black	Primary black color.
--w-grey	#e9e9e9	Light grey, often used for backgrounds.
--w-midnight	#222940	A dark blue/grey shade.
--w-blue	#0448d5	The primary accent and interactive color.
--w-orange	#fc6d49	Accent color.
--w-yellow	#FFC34A	Accent color.
--w-green	#26A646	Accent color.
--w-crimson	#f22e52	Accent color, likely for errors or warnings.

Sources: themes/css/design.css:3-17, themes/css/iite.css:5-19

Grid and Card System

The application uses a CSS grid system for arranging content on main pages. Various classes like .grid-company, .grid-departments, and .grid-relationship define interactive cards with background images, text overlays, and hover effects. These cards are the primary method for navigating to sub-sections of the site.

• Hover Effects: Cards have hover effects that apply transformations like translateY(-5px) scale(1.02) and add a box-shadow.
• Content Structure: Each card typically contains a title (<h5>), a description (<p>), and an icon/link section (.company-icons, .departments-icons).

Sources: themes/css/design.css:318-548

Navigation System

The website employs a multi-faceted navigation system that includes a primary top bar, a mobile hamburger menu, and a client-side routing mechanism.

Page Navigation (data-page)

Client-side navigation is handled by attaching a click event listener to any element with a data-page attribute. The JavaScript checks the value of this attribute and redirects the user to the corresponding URL.

The following diagram illustrates the routing flow when a user clicks a navigation link.

Mobile Navigation Menu

For smaller viewports, a mobile navigation menu is available. It is controlled by the menunavmobile() function.

Interaction Flow

The menunavmobile function toggles the visibility of the mobile menu overlay. When the menu icon is clicked, it either opens or closes the menu, animating the hamburger icon into an 'X' and vice-versa.

This sequence diagram shows the user interaction with the mobile menu.

Dynamic Logo Color

The color of the site logo (#iitelogo) is dynamically changed from white to black on specific pages to ensure visibility against different background colors. This logic is executed on page load.

An array whitePages contains the paths where the logo should be black. The script checks if the current window.location.pathname includes any of these paths.

// apps/js/iite_components.js:29-34
const whitePages = [
    '/iite/company',
    '/iite/wep',
    '/iite/relationship',
    '/departments/overview',
    '/inside/overview',
    '/inside/ets.php'
];

Sources: apps/js/iite_components.js:26-37

Cookie Consent Banner

A cookie consent banner is displayed to new users. The user's choice is persisted in localStorage to prevent the banner from reappearing on subsequent visits.

Logic Flow

The script checks for a localStorage item named cookies. If the item's value is 'hidden', the banner is not displayed. Otherwise, it is shown, and event listeners on the "Accept" and "Decline" buttons handle hiding it and setting the localStorage item.

The following flowchart details the cookie banner's logic.

Internationalization

The text content of the cookie banner is sourced from apps/translations.json, allowing it to be displayed in multiple languages.

Key	English Text
translate_title	Data Protection, Cookies and User Protect
translate_description	This website uses cookies and the User Protect system...
translate_button_accept	I consent Terms & Cookies
translate_button_decline	I decline Terms & Cookies

Sources: apps/translations.json:15-42

Tabbed Interface

The project includes a reusable tabbed interface component, used on pages like inside/interface.php. This component is controlled by the interface() JavaScript function.

Implementation

• Tab Buttons: Elements with the [menu-interface] attribute act as tab controls.
• Content Panes: Elements with the class .w-interface serve as the content panels corresponding to each tab.

The interface() function adds click event listeners to all tab buttons. When a tab is clicked, the script:

1. Removes the interface-active and btn-interface-active classes from all tabs and panes.
2. Adds these classes to the clicked tab and its corresponding content pane, making it visible.

// apps/js/iite_components.js:135-152
function interface() {
    let btnsinterface = document.querySelectorAll('[menu-interface]'),
        boxinterface = document.querySelectorAll('.w-interface');

    btnsinterface.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            boxinterface.forEach((boxinterface) => {
                boxinterface.classList.remove('interface-active');
            });
            btnsinterface.forEach((tab) => {
                tab.classList.remove('btn-interface-active');
            });
            boxinterface[index].classList.add('interface-active');
            btnsinterface[index].classList.add('btn-interface-active');
        });
    });
}

Sources: apps/js/iite_components.js:133-152, themes/css/design.css:758-842, inside/interface.php

Internationalization (i18n)

The website is multilingual, with content managed by a PHP backend system that pulls text from structured data files.

Language Selection and Text Retrieval

1. Language Detection: The backend PHP scripts (e.g., iite/overview.php) check for a lang parameter in the URL query string. If present, it's saved to the user's session ($_SESSION['lang']). The default language is Italian (it).
2. Content Source: Page titles are retrieved from apps/pages.php. Other UI strings are retrieved from apps/translations.json.
3. t() Function: A helper function t($key) is used in the .phtml templates to get the translated string for a given key based on the current session language.

This diagram shows the server-side process for rendering a translated page.