Technical Specification: Rowing Machine Maintenance & Lubricant Estimator

Overview

This single-file web application is designed to help users calculate the optimal maintenance schedule and lubricant usage for their indoor rowing machine. It focuses on performance optimization, equipment longevity, and user-friendly interaction, adhering to a strict light-mode, mobile-responsive aesthetic.

Core Architecture

• Single File: All HTML, CSS, and Vanilla JavaScript are contained within a single index.html file.
• Storage: No localStorage, sessionStorage, or cookies. All calculations and logic are performed in-memory during the current session.
• Compatibility: Operates within a sandboxed iframe. No popups (no alert, prompt), no external dependencies beyond CDN-hosted CSS frameworks.

UI Layout

• Header: A clean, centered title area with a descriptive subtitle.
• Input Section: A responsive grid containing form fields:
  • Frequency: Slider for sessions per week.
  • Intensity: Select dropdown (Light, Moderate, Heavy).
  • Model Type: Select dropdown for general rail type (Standard, Performance, Commercial).
  • Time Since Last Clean: Number input (days).
• Results Section: A dynamic "Maintenance Status" card that updates in real-time as the user adjusts inputs.
  • Recommended Action: A clear, prominent text showing "Clean Now" or "Optimal Status".
  • Lubricant Amount: Calculated estimation based on input data.
• Instruction Section: A collapsible accordion section detailing how to clean the rail and apply lubricant safely.

Design System

• Color Palette:
  • Background: #FFFFFF
  • Primary Accent: #2563EB (vibrant blue for action buttons)
  • Secondary Text: #6B7280 (softer grey for descriptions)
  • Card Surface: #F3F4F6 with a subtle #E5E7EB border.
• Typography: System font stack (Inter, Segoe UI, Roboto) for a professional SaaS appearance.
• Animations:
  • CSS transitions (transition: all 0.2s ease-in-out) on all hoverable buttons and input fields.
  • Smooth fade-in effect for the results section whenever the calculation logic triggers.

Functional Logic

• The application uses a reactive event listener on all inputs (input event).
• The calculation algorithm uses a simple scoring system based on variables:
  • Score = (Sessions per week * 0.5) + (Intensity Factor) + (Days Since Clean / 10).
• Results are rendered directly into the DOM using innerHTML to update the UI without page refreshes.

Developer Directives

1. No External Frameworks: Use standard Vanilla JavaScript (ES6+).
2. Responsiveness: Ensure the input grid stacks vertically on mobile (max-width 640px) and stays in a 2x2 grid on desktops.
3. Safety: Ensure all links utilize target="_blank" rel="noopener noreferrer".
4. Accessibility: Include standard ARIA labels for input fields to ensure screen reader compatibility.
5. Aesthetics: Avoid pure black text (#000000); use #111827 for high-contrast, comfortable reading.