This commit introduces a new mobile-first sponsor list and restructures the event landing pages. Key changes include:
- A new responsive sponsor list page built with Vue.js and Tailwind CSS, optimized for SEO and on-site viewing.
- The main event index page is now a QR code display for easy access to the mobile list.
- The original landing page is refactored with Tailwind CSS and moved to a new `/landing` directory.
- Umami analytics script is integrated across all pages for usage tracking.
This commit introduces a new set of pages for the Yong Peng Hash House Harriers (HHH) 30th Anniversary event.
- Adds a main landing page with a modern design to serve as the central hub for the event.
- Creates a dynamic sponsor list page using Vue.js, featuring a vertically scrolling marquee to acknowledge supporters.
- Includes the raw data for sponsors in `supporter.json`.
Additionally, several improvements have been made to the existing `photowall` page:
- Refactors the scrolling text marquee for a more robust and seamless animation.
- Moves the marquee from the bottom to the top of the page for better visibility.
- Implements a fix for browser video autoplay restrictions by enabling audio and starting playback upon the first user interaction.
This commit introduces a 'breaking news' style scrolling banner at the bottom of the page. The banner displays the list of the first
founders from 2005. It includes the necessary HTML structure and CSS for styling, animation, and responsiveness.
This commit introduces a dynamic photo wall for the 2025-11-16 event. It features a 3D page-turning carousel built with Vue 3 and
Tailwind CSS. The page includes an auto-playing background video, manual and automatic slideshow controls, and is responsive for
mobile devices. 25 initial photos have been added to the gallery.
This commit introduces a new page for the Chairman of the Board's speech and includes several visual refinements for the
event display.
- Add `speech/3.html` to display the chairman's video.
- Update the committee member list.
- Adjust font sizes, colors, and element positioning on the main and committee list pages for better visual
presentation.
- Fine-tune background video placement and scaling.
This commit introduces a complete multi-page presentation system for the 20251012 event.
Key features include:
- **Page Structure:** Establishes the page flow with an entry point, a main cover scene, a committee list, and
individual speech video pages.
- **Real-time Chroma Key:** Implements a canvas-based green screen effect to composite a video onto a background image.
A control panel allows for real-time adjustment of keying parameters, position, and scale.
- **Unified Navigation:** A new `nav.js` script enables seamless navigation between pages using keyboard (arrow keys,
Enter), touch swipes, and on-screen buttons. The navigation logic follows a predefined sequence (entry -> main ->
committee -> speeches).
- **Dynamic Content:** The committee list page dynamically generates its content from a JavaScript data source.
This commit overhauls the display page by replacing the luminance-based keying with a more robust chroma key (green
screen) algorithm for cleaner video cutouts.
A new visual theme has been implemented, featuring:
- Custom fonts for titles and poems.
- A main title, subtitle, and vertical poems styled with Tailwind CSS.
- Reorganization of assets into dedicated `assets` and `fonts` directories.
- Updated video source to a green screen version and adjusted canvas parameters accordingly.
This commit introduces a new interactive demo that performs real-time video keying using HTML5 Canvas.
The implementation processes video frames pixel by pixel to make dark areas transparent, simulating a chroma key effect.
The keyed video is then composited over a background image.
Features:
- An interactive control panel to adjust keying (threshold, softness) and transformation (position, scale, rotation,
opacity) parameters in real-time.
- Keyboard shortcuts for resetting parameters ('R') and toggling the control panel ('C').
- Graceful handling of potential cross-origin errors when processing video frames.
This commit introduces a completely redesigned sponsor list page. The previous two-column layout is replaced with a
modern, single-column auto-scrolling list that unifies all sponsors. A dynamic canvas animation has been added to the
background for a more engaging visual experience. Previous versions of the page have been archived. This update also
includes data corrections for sponsor names and minor fixes to the related PPT assets.
Refactored the bidding application by reorganizing the file structure and extracting CSS into separate files.
- The monolithic `control.html` and `display.html` files have been moved into dedicated `controls/` and `display/`
directories.
- All inline CSS has been extracted into component-specific `style.css` files.
- A new `common/style.css` has been created to hold shared styles, promoting reusability and reducing duplication.
These changes improve the project's modularity, separation of concerns (HTML/CSS), and long-term maintainability without
affecting external behavior.
This commit introduces a complete redesign of the auction's front-end, replacing the basic HTML interface with a modern,
responsive, and dark-themed UI.
Key Changes:
- **Modern Aesthetics:** Implemented a dark theme with a card-based layout, custom fonts, and icons for a professional
look and feel.
- **Improved UX:** Added smooth view transitions on the display page and interactive feedback on the control panel
buttons.
- **Animations:** Introduced animations for price updates and successful deal confirmations to enhance the viewing
experience.
- **Responsive Design:** Ensured both `control.html` and `display.html` are usable on various screen sizes.
- **Enhanced Functionality:** Improved the file upload component to show the selected file name.
This commit introduces a lightweight, browser-based auction system.
It consists of two main components that communicate in real-time using the `BroadcastChannel` API, enabling a serverless
front-end experience:
- `display.html`: The public-facing screen for attendees. It shows the current item, price with smooth animation, and
deal announcements. It automatically generates a unique session ID.
- `control.html`: The auctioneer's control panel. It uses the session ID from the display page to connect. It allows for
managing the auction flow, including loading items from a CSV, starting bids, updating prices, and finalizing sales.
