A simple, single-file stopwatch web app built for the JCOM Kallakurichi 1.0 business meeting. It allows users to time speeches, log roster entries, and generate a color-coded report that can be exported as an image.

• Features
• Installation
• How to Use
• Source Code Explanation
• Technologies Used
• License

• Set Time Limit: Configure a maximum time limit (in seconds) for speeches.
• Stopwatch: Start and stop a timer that shows time in seconds and hundredths of a second.
• Roster Entry: Input a roster number or speaker name during timing.
• Report Generation: Automatically logs the time and speaker info into a report table.
• Color-Coded Report:
  • 🟢 Green – Within or equal to time limit.
  • 🟡 Yellow – Exceeds time limit.
• Export Report: Save the report as a PNG image with a white background.

This application is delivered as a single HTML file, requiring only a modern web browser.

1. Obtain the Code: Copy or clone the HTML file.
2. Create a File: Use a code editor (e.g., VS Code, Sublime, Notepad).
3. Paste and Save: Save the HTML code with a .html extension (e.g., index.html).
4. Run It: Open the file in any browser to start using the stopwatch.

Tip: To make it accessible from multiple devices or extend it as a PWA, host it using a simple web server (like python -m http.server).

• Enter the time in seconds under "Set Time Limit (Seconds)".
• Click "Confirm" — the set limit will display.

• Click the Start button.
• A timer begins, and the roster input field appears.

• Type the speaker’s name or sheet number while the timer is running.

• Click Stop.
• Timer halts and displays final time.
• The background color indicates if the speaker went over time.

• If roster info was provided, it logs the data in the report table.

• Click "Export Report as Image" to download a PNG of the report.

• Tailwind CSS and html2canvas are included via CDN.
• Three major sections:
  1. Time Limit Form
  2. Stopwatch Section
  3. Report Table

• Uses Tailwind utility classes.
• Custom CSS for:
  • Report table borders
  • Green/yellow text colors for times
  • .hidden class to show/hide elements

• DOM references via getElementById / querySelector
• State management with variables: startTime, maxTimeLimit, etc.
• formatTime(ms) – Formats milliseconds to SS.ms
• updateTimer() – Timer logic with background color updates
• Event listeners for start, stop, confirm, and export actions

• HTML5
• Tailwind CSS (CDN)
• JavaScript (Vanilla)
• html2canvas (for exporting the report)

This project is licensed under the GPL-3.0 license.
Feel free to use, modify, and share — just include the original license and credit.