SDG 7: Affordable and Clean Energy header

Dineth Ediriweera  |  SOLAR  |  Student 2 – Splash Screen, AIS, Content Page

Splash Screen

Technical Description

The Splash Screen (splash.html) is the very first page a visitor sees when they access the website. It does not use the shared HTML template because it serves a distinct introductory purpose, but it matches the site's agreed colour palette, fonts, and overall visual feel.

HTML Structure

The page uses a single <main> element containing a <section class="splash-box"> for all visible content. Wrapping the box inside a <main class="overlay"> container that covers 100 vh with a semi-transparent dark background (rgba(0,0,0,0.6)) ensures the text remains legible over any background image. An unordered list (<ul class="member-list">) displays all four group members' names clearly. The automatic redirect is handled using an HTML <meta http-equiv="refresh" content="4; url=home.html"> tag placed in the <head>, exactly as described in the lecture notes.

CSS Techniques

All styling for the Splash Screen is written as embedded CSS inside a <style> block in the <head>, since this page has a completely different visual layout from the rest of the site and does not link to the global style.css. Key CSS choices include:

  • Full-screen background image: background-image: url("images/splash-bg.jpg") combined with background-size: cover and background-position: center scales the image to fill the whole viewport without distortion.
  • Centred overlay box: The .overlay uses display: flex; justify-content: center; align-items: center; min-height: 100vh to perfectly centre the content box both horizontally and vertically on all screen sizes.
  • Brand colours: The .splash-box border is set to #f4c400 (the site's yellow) and the main <h1> also uses this colour, maintaining visual consistency with the rest of the website.
  • CSS Loader Animation: A spinning loader is created entirely with CSS — no GIF or video is used. A <div class="loader"> with border-radius: 50% forms a circle, and border-top: 5px solid #f4c400 creates a highlighted segment. The @keyframes spin rule animates transform: rotate() from 0° to 360° over one second with animation: spin 1s linear infinite, producing a continuous spinning effect.
  • Skip button: The .skip-btn is styled as a prominent yellow button matching the site's navigation colour, with a hover state that darkens to #e0b800 for clear interactive feedback.

JavaScript – Countdown Timer

A visible countdown updates every second using setInterval(). The function decrements a timeLeft variable and updates the text content of document.getElementById("countdown") to display "Entering site in 3…", "2…", "1…" in real time. When timeLeft reaches zero, clearInterval() is called to stop the loop. The actual redirect is handled by the <meta> refresh tag so the two mechanisms work independently, making the page robust even if JavaScript is unavailable.

Accessibility

The background image text contrast issue is addressed by the dark overlay (rgba(0,0,0,0.6)), which ensures the white and yellow text meets the WCAG AA contrast ratio requirement. The heading hierarchy is correct: one <h1> for the site title, one <h2> for the subtitle. The skip button is a plain <a> element linking directly to home.html, making it fully keyboard-accessible and usable without JavaScript. The CSS loader animation is purely decorative, so no ARIA label is required.

Link to the validation page

View Splash Screen validation evidence — jumps directly to the Splash Screen validation section on the Validation Page.

Link to the page

Open Splash Screen ↗

SDG Action Impact Simulator (AIS)

Technical Description

The Action Impact Simulator (ais.html) is an interactive page that lets users select clean energy actions, calculates a total impact score, and gives dynamic feedback including a changing background image. It uses the shared HTML template and links to style.css, with additional page-specific styles in an embedded <style> block.

HTML Structure

The page follows the standard template: <header>, <nav>, <main>, and <footer>. Inside <main>, a wrapper <div class="ais-page"> centres the content. Eight action items are each marked up as <article class="action-card"> elements. Using <article> is semantically correct because each card is a self-contained, independently meaningful piece of content. Each card carries a custom data-points attribute storing its impact value (e.g. data-points="3"), which the JavaScript reads at runtime — keeping the data in the HTML and the logic in the script.

Embedded CSS (5+ rules)

  • .action-grid — uses display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px to arrange the eight action cards in a clean two-column layout. A media query (@media (max-width: 768px)) collapses this to a single column on smaller screens, making the page responsive without a separate stylesheet.
  • .action-card.selected — applies background-color: #eef8e8; border: 2px solid #2e7d32 to give a clear green visual indication when a card is selected, so users can immediately see which actions they have chosen.
  • .action-card:hover — changes border to yellow and background to #fffbe6, providing interactive feedback consistent with the site's colour scheme before a card is clicked.
  • .impact-badge — a navy blue (#003b75) inline label on each card displays its point value. Using display: inline-block with padding and a contrasting white text colour makes the badge stand out without breaking the card flow.
  • .feedback-box — a bordered container (border: 2px solid #999) with centred text displays the dynamic score summary. Its content is entirely controlled by JavaScript, but its visual appearance is defined here in CSS.
  • Level colour classes (.level-low, .level-medium, .level-high) — colour-code the impact level text (amber, dark yellow, green) so users can immediately interpret their result.

JavaScript Interactivity (js/ais.js)

All interactive behaviour is driven by JavaScript:

  • Card selection: toggleCard(card) is called by each card's onclick attribute. It uses card.classList.toggle("selected") to add or remove the selected style, then calls updateScore().
  • Score calculation: updateScore() uses document.querySelectorAll(".action-card.selected") to collect all selected cards, then loops through them with forEach(), parsing each card's dataset.points and accumulating a total. The count display is updated dynamically using textContent.
  • Impact levels and feedback: updateFeedback() uses conditional logic to assign one of three impact levels — Low (score < 8), Medium (8–14), or High (≥ 15). The feedback box's innerHTML is rebuilt with the score, level label, and a message on every selection change.
  • Background image changes: A backgroundImages object maps each level key to an image path. document.body.style.backgroundImage is set by JavaScript based on the current level — this is a genuine DOM manipulation approach, not a CSS-only technique. background-size: cover and background-attachment: fixed are also applied via JavaScript to ensure the image fills the page correctly behind the semi-transparent card content.
  • Reset: resetAll() loops through all selected cards, removes the selected class from each, then calls updateScore() to restore the page to its initial state.

Accessibility

All eight action card images include descriptive alt text (e.g. "Solar panels generating clean electricity") describing what the image shows in the context of the page. The <article> elements are keyboard focusable and clickable. The feedback area updates dynamically, and because it is always visible in the DOM (only its content changes), screen readers can read the updated text without a page reload. The reset button is a standard <button> element, ensuring keyboard and screen-reader access. Colour alone is not used to convey information — the selected state also shows a border change and the level labels include text descriptions.

Link to the validation page

View AIS validation evidence — jumps directly to the AIS validation section on the Validation Page.

Link to the page

Open Action Impact Simulator ↗

Content Page (Student 2)

Technical Description

The Content Page (content_ST2.html) is titled "How Students Can Support Affordable and Clean Energy in Everyday Life" and covers five topic sections relevant to SDG 7. It uses the shared HTML template and links to style.css, supplemented by page-specific embedded CSS.

HTML Structure

The page wraps all content in an <article> element, which is semantically appropriate because the entire page is one self-contained piece of authored content. Inside, five distinct topic areas are each marked as a <section> with a unique id attribute (e.g. id="meaning", id="home-energy") to support internal anchor links. The page uses a strict heading hierarchy: one <h1> for the page title in the header, then <h2> for each content section heading — maintaining correct document outline structure throughout.

Internal Navigation

An internal navigation block (<section class="page-links">) sits at the top of the content area. It contains an unordered list of five anchor links using href="#section-id" format, allowing users to jump directly to any section without scrolling. This is especially useful given that the page contains multiple long text sections and several images.

CSS Techniques

  • .content-page — uses max-width: 1100px; margin: 0 auto to centre the content and limit line length for readability on wide screens.
  • .page-links — a yellow-tinted box (background-color: #fff8cc; border: 1px solid #d9c85f) highlights the internal navigation menu visually, matching the site's colour palette.
  • .page-section — each content section is separated by border-bottom: 1px solid #dddddd; margin-bottom: 35px, creating a clear visual division between topics without heavy UI elements.
  • .page-image — images are styled with width: 100%; max-width: 700px; display: block; margin: 15px auto to be responsive and centred on the page. A subtle border: 1px solid #cccccc frames each image cleanly.
  • .go-top — the "Go to Top" button uses position: fixed; right: 20px; bottom: 20px so it remains visible at all times as the user scrolls. It links to #top and is styled as a yellow button matching the site's hover colours. No JavaScript is needed — it works entirely with HTML and CSS.

Images

Four images are placed within the content sections, each using the .page-image class for consistent presentation. Each image is followed by an <p class="image-note"> caption that explains the relevance of the image to the section topic.

Accessibility

All images include meaningful alt text that describes the image content in the context of the section (e.g. "A student saving electricity at home by switching off lights"). The internal navigation section is a <section> labelled "On this page", giving screen-reader users a clear overview of the page structure before they begin reading. The heading hierarchy (<h1> → <h2>) is logically correct and consistent throughout. Text colour and background combinations across the page meet WCAG AA contrast standards.

Link to the validation page

View Content Page validation evidence — jumps directly to the Content Page validation section on the Validation Page.

Link to the page

Open Content Page (Student 2) ↗

Challenges and Lessons Learned

Challenge 1 – Splash Screen Meta Refresh vs JavaScript Countdown

Initially I assumed the JavaScript countdown would control the redirect, but the coursework requires the <meta http-equiv="refresh"> tag for the automatic redirect. Combining both raised the question of what happens if the countdown finishes but the meta tag has not yet fired. After reviewing the lecture notes, I understood the two mechanisms are independent: the meta tag handles the actual redirect reliably (even with JS disabled), while JavaScript purely updates the visual countdown text. This separation made the implementation cleaner and more robust.

Challenge 2 – Background Image Changing via JavaScript

My first attempt used CSS classes to swap the background image, which the specification explicitly disallows. I refactored the solution to use a JavaScript object (backgroundImages) that maps each impact level to a file path, and directly assigns document.body.style.backgroundImage based on the calculated score. This approach is fully JavaScript-driven and much clearer to read and maintain. I also learned to apply additional background CSS properties via style.* at the same time (cover, fixed attachment) so the image displays correctly.

Challenge 3 – Responsive Grid on the AIS Page

The eight action cards initially overflowed on narrow screens because I used a fixed two-column grid without a media query. Adding @media (max-width: 768px) { .action-grid { grid-template-columns: 1fr; } } collapsed the grid to a single column on mobile. This taught me to always test layouts at different viewport widths during development rather than at the end.

Challenge 4 – HTML Validation on the AIS Page

The W3C validator flagged a warning because <h2> headings were used inside <article> elements that also contained a page-level <h2> for the section title. I resolved this by renaming the action card headings to <h3>, which corrected the heading hierarchy and removed all validation errors.

Compliance

All pages I created comply with JANET regulations governing the publication of web pages on the University network. The following points demonstrate my understanding and application of these regulations:

  • Appropriate and ethical content: All text on the Splash Screen, AIS, and Content Page is original and focused on the educational topic of affordable and clean energy (SDG 7). No offensive, discriminatory, or inappropriate material is present on any page.
  • Responsible use of external resources: All images used (e.g. from iStockPhoto, Unsplash, or similar royalty-free sources) are properly referenced in the References section below. No copyrighted images or text were reproduced without permission.
  • No commercial activity: None of my pages advertise, promote, or sell any products or services. The sole purpose is educational.
  • No data collection: The AIS page interacts entirely client-side. No user input is transmitted to a server, stored in a database, or shared with any third party. The profile built is session-only and discarded when the page closes.
  • Academic integrity: All written content is original and composed by me. No text was copied directly from the UN SDGs website or any other source without attribution.

See the lecture notes for further details on JANET compliance.

Group Meetings and Individual Contribution Log

The table below documents all group meetings and my individual contribution to each one.

  • A minimum of six (6) group meetings must be recorded.
  • Each student must provide their own account of the meetings.
  • The log must focus on individual contribution, not just group activity.

Group Meetings and Individual Contribution Log

Meeting Date & Time Format Objective Attended Your Individual Contribution
1 3 Feb 2026 Face-to-face Agree SDG and assign roles Yes I contributed to choosing SDG 7 and agreed to take responsibility for the Splash Screen, Action Impact Simulator, and Content Page (Student 2).
2 10 Feb 2026 Online (Teams) Agree visual identity and colour palette Yes I confirmed I would apply the agreed navy blue and yellow colour palette to the Splash Screen overlay and shared ideas for the CSS spinner animation design.
3 17 Feb 2026 Online (Teams) Review shared template from Student 1 Yes I presented the first draft of the Splash Screen and received feedback from the team. I also reviewed the shared template from Student 1 and confirmed the header and nav structure I would use on the AIS page.
4 03 Mar 2026 Hybrid Progress review – mid-point check Yes I demonstrated the AIS page with working card selection and score calculation. I explained the data-points approach to the team and discussed the background image change feature.
5 17 Mar 2026 Face-to-face Cross-review pages and fix links Yes I ran the W3C validator on my three pages, fixed the heading hierarchy error on the AIS page, and confirmed all navigation links worked correctly from my pages.
6 24 Mar 2026 Online (Teams) Final review and validation checks Yes I completed the Page Editor and Validation Page, took validation screenshots for all three of my pages, and helped package the final website ZIP for submission.

References

Resources consulted during the implementation of my pages, listed in APA format:

Go top