Home
Relevant source files
The following files were used as context for generating this wiki page:The Home system constitutes the primary user-facing portion of the Institute Itech website. It is a multi-lingual, responsive web application built using a combination of server-side PHP for page rendering and client-side JavaScript for dynamic user interactivity. The system is designed with a modular architecture, separating content (translations), styling (CSS), behavior (JS), and page structure (PHP/PHTML).
Key features include a server-driven internationalization system, a client-side navigation manager, a persistent cookie consent mechanism, and a variety of interactive UI components. The styling is managed through a comprehensive set of CSS rules with a defined variable-based theme, ensuring a consistent look and feel across different page layouts and devices.
System Architecture
The application employs a traditional server-rendered architecture with progressive enhancement via JavaScript.
Server-Side Rendering (PHP)
Page requests are handled by specific PHP files (e.g., iite/overview.php, inside/overview.php) that act as controllers. These controllers manage session state, determine the language, load translation data, set the page title, and render the appropriate PHTML template within a global layout file.
This diagram illustrates the server-side page rendering flow.
Client-Side Interactivity (JavaScript)
The file apps/js/iite_components.js is the central hub for all client-side logic. It is responsible for handling user interactions after the page has loaded. This includes managing navigation clicks, toggling mobile menus, handling cookie consent, and activating tabbed interfaces. The script uses event listeners attached to specific DOM elements, identified by id or data- attributes.
Sources: apps/js/iite_components.js
Styling and Theming
The visual presentation is controlled by two main CSS files:
themes/css/iite.css: Provides global styles, font imports (Barlow Semi Condensed), and base styling for components like the language switcher and cookie banner.themes/css/design.css: Contains the majority of the layout and component-specific styles, including the main navigation, page backgrounds, grids, and responsive media queries.
Both files make extensive use of CSS variables (custom properties) defined in the :root pseudo-class for consistent theming.
Sources: themes/css/iite.css:3-19, themes/css/design.css:1-19
Core Frontend Components
Navigation System
The navigation is handled by a combination of CSS for layout and JavaScript for functionality.
Navigation Logic
Client-side routing is managed by an event listener on elements with a data-page attribute. When clicked, the script redirects the browser to a predefined URL.
This diagram shows the client-side navigation flow.
Sources: apps/js/iite_components.js:5-23
The following table maps the data-page attributes to their corresponding navigation targets.
data-page Attribute | Target URL |
|---|---|
iite | http://localhost |
insideiite | /inside/overview.php |
research | # |
departments | /departments/overview.php |
news | # |
inside | # |
Sources: apps/js/iite_components.js:9-21
Dynamic Styling
The color of the main logo (#iitelogo) is dynamically changed to black or white based on the current page's path. This is determined by checking if the window.location.pathname is included in a predefined array of "white pages".
// apps/js/iite_components.js:28-34
const whitePages = [
'/iite/company',
'/iite/wep',
'/iite/relationship',
'/departments/overview',
'/inside/overview',
'/inside/ets.php'
];
Sources: apps/js/iite_components.js:26-38
Internationalization (i18n)
The website supports multiple languages (it, en, fr, es).
Language Management
Language selection is primarily a server-side concern.
- A user can change the language by visiting a URL with a
langquery parameter (e.g.,?lang=en). - The PHP controller (
iite/overview.php) detects this parameter, stores the selected language in the$_SESSION['lang']variable, and reloads the page without the query parameter. - On subsequent loads, the stored session language is used to fetch the correct text from the
apps/translations.jsonfile via a helper function.
Sources: iite/overview.php:4-9, apps/translations.json
Translation Data
All user-facing text is stored in apps/translations.json. This file contains a large JSON object where keys represent text identifiers (e.g., hero_quote) and values are objects containing the translations for each supported language.
// apps/translations.json:2-6
"hero_quote": {
"it": "La mente è il codice sorgente dell’umanità.\nL’istruzione è il linguaggio con cui lo riscriviamo.",
"en": "The mind is humanity’s source code.\nEducation is the language we use to rewrite it.",
"fr": "L’esprit est le code source de l’humanité.\nL’éducation est le langage avec lequel nous le réécrivons.",
"es": "La mente es el código fuente de la humanidad.\nLa educación es el lenguaje con el que lo reescribimos."
}
Sources: apps/translations.json
Cookie Consent Management
A cookie consent banner is displayed to users on their first visit. The user's choice is persisted in the browser's localStorage.
This sequence diagram details the cookie consent workflow.
Tabbed Interface
The system includes a generic tabbed interface component.
- Clickable tab controls are identified by the
[menu-interface]attribute. - Content panels are identified by the
.w-interfaceclass. - The
interface()function in JavaScript adds click listeners to the tabs. When a tab is clicked, it removes theinterface-activeandbtn-interface-activeclasses from all elements and adds them only to the clicked tab and its corresponding content panel, determined by their index.
Sources: apps/js/iite_components.js:154-173, themes/css/design.css:1022-1025, 1060-1062, inside/interface.php
Page Structure and Layout
Homepage Layout
The main landing page features a full-screen background image with a centered quote.
- Container:
.background-homepage - Styling: A linear gradient overlay is applied to the background image (
url(/themes/assets/background/82170.jpg)). - Content: The main
<h2>text is sourced from thehero_quotekey intranslations.json.
Sources: themes/css/design.css:127-140, apps/translations.json:2-6
Theming and CSS Variables
The application's color scheme and key design tokens are defined as CSS variables for easy maintenance and consistency.
| Variable | Value | Description | Source File |
|---|---|---|---|
--navbar-background | #02274c | Background color for the navigation bar. | design.css |
--w-white | white | Primary white color. | design.css |
--w-black | black | Primary black color. | design.css |
--w-grey | #e9e9e9 | A light grey for backgrounds/text. | design.css |
--w-blue | #0448d5 | Primary accent and link color. | design.css |
--w-orange | #fc6d49 | Accent color for tags/badges. | iite.css |
--w-yellow | #FFC34A | Accent color for tags/badges. | iite.css |
--w-green | #26A646 | Accent color for tags/badges. | iite.css |
Sources: themes/css/design.css:3-19, themes/css/iite.css:5-19
Conclusion
The "Home" system of the Institute Itech website is a robust and well-organized module. It effectively leverages server-side PHP for structured content and language management, while client-side JavaScript provides a responsive and interactive user experience. The clear separation of concerns—logic in JS, content in JSON, styling in CSS, and structure in PHP/PHTML—creates a maintainable and scalable foundation for the website's front-end.