SK Air Conditioning — 24-Hour Dial Landing Page
A single-file HTML landing page for SK Ar Condicionado, an installation, maintenance, and repair service in Apucarana (PR) that works 24 hours a day Monday through Friday, with weekend shifts. Round-the-clock availability is the whole pitch, so the page renders it as a dial: 24 segments generated in JavaScript, lit according to today's schedule, with a gold hand at the current time and a digital readout below. A wine-and-bone identity with a gold accent, an Epilogue / Public Sans / Space Mono type system, a six-card service grid, an hours table, review themes from the public Google profile, WhatsApp-first CTAs, and a fixed mobile bar. Zero dependencies, zero build step, one self-contained file, built from public Google Maps information as a demonstration.
Project metrics
4 key metricsGenerated in JS, lit by today's schedule — the page's signature element
Monday to Friday around the clock, plus weekend shifts
35 reviews on Google — shown in the wine proof strip
Self-contained single HTML file — no dependencies, no build step
Problem statement
"24 hours" printed on a listing reads as a slogan — nobody believes the phone is really answered at 3am. The page had to make an around-the-clock schedule look like a measured fact, show that the weekend is different without hiding it, and route every conversion to WhatsApp as one self-contained HTML file.
Round-the-clock availability is the offer, but written as text it is indistinguishable from an exaggeration
The schedule is not uniform: weekdays run 24 hours, Saturday and Sunday are shift hours
The moment the service matters most — a bedroom at 30°C in the middle of the night — is also when a visitor is least patient with a page
Out-of-hours calls raise a pricing fear: customers expect a hidden surcharge
A 5.0-star / 35-review reputation had to appear as proof, with every CTA opening WhatsApp
Constraints
- Zero external dependencies beyond web fonts — no npm, no bundlers, no CSS frameworks
- Single-file delivery — the entire page must be one self-contained .html file
- No backend — every conversion is a WhatsApp deep link with a pre-filled message
- Demonstration page built from public Google Maps data — marked noindex, nofollow and clearly labeled as not the official site
Approach & modules
A single-file landing page on a bone canvas with a wine structure and a gold accent. The signature is a 24-hour dial: an SVG ring of 24 arc segments built in JavaScript, lit according to the current weekday's schedule, with a gold hand at the visitor's time, a digital readout, and a status line. An hours table states the weekday/weekend difference plainly, and a six-card grid, proof strip, and review themes complete the page.
The 24-Hour Dial
The signature element: 24 arc segments generated with createElementNS and trigonometry around a 200×200 viewBox, each lit or dimmed by the current weekday's rule (weekdays all 24, Saturday 9–18, Sunday 9–17). A gold hand rotates to the visitor's time, a mono readout shows the clock, and the caption switches between "attending now" and "shift resumes at 9am", refreshed on a 30-second interval
Honest Hours
A three-row hours table states the schedule without softening it — weekdays highlighted as a solid wine "24 HORAS" chip, Saturday and Sunday as plain shift ranges — under a heading that admits how implausible it sounds ("yes, that is what it says"). The night-call service card promises no hidden urgency surcharge, which is the real objection
Wine & Gold
A bone canvas with a wine header and proof strip, an ink contact section, and a gold accent reserved for the dial hand, chips, and secondary CTAs. Epilogue carries the display, Public Sans the body, and Space Mono the micro-labels and the clock — a warmer, more residential register than the industrial pages in the same family
Services, Proof & WhatsApp CTAs
A six-card service grid (emergency no-cooling calls, new split installs, board and part repair, sanitizing, refrigerant charge and leaks, preventive contracts for businesses), a wine proof strip with the 5.0★ / 35-review rating, four review themes on gold-ruled cards, and an ink contact section — every CTA a wa.me deep link, plus a fixed bottom action bar on mobile that hides at 760px
System design
Single-file delivery with no build step and no runtime dependencies beyond Google Fonts. The palette and type scale are CSS custom properties in one document. The dial is generated at runtime: a loop builds 24 SVG arc paths with createElementNS from polar coordinates, a tick function applies the weekday rule to light segments, rotates the hand to the current fractional hour, and rewrites the clock and status text — re-run every 30 seconds.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Turn "24 hours" from a slogan into a measurable instrument the visitor can read at a glance
Define the wine-and-bone identity with a gold accent and the Epilogue / Public Sans / Space Mono type system
Generate the 24 SVG arc segments, apply the weekday schedule rule, rotate the hand to the current time, and tick every 30 seconds
Write the three-row hours table that states the weekday/weekend difference without softening it
Lay out the six-card service grid, the proof strip, and the four review themes
Wire every CTA to a pre-filled WhatsApp deep link, pin the fixed mobile bar, and export as one self-contained .html file
Project journey
Key milestones and phases throughout the project lifecycle.
Make 24h Legible
Decided the availability claim would be drawn as an instrument reading the visitor's own clock rather than printed as a number
Wine & Gold
Established the bone canvas, wine structure, gold accent, and the Epilogue / Public Sans / Space Mono type system
The Dial
Generated the 24 arc segments in JavaScript, wired the weekday lighting rule, the rotating hand, the digital readout, and the 30-second tick
Hours & Services
Built the three-row hours table, the six-card service grid, the 5.0★ / 35-review proof strip, and the review themes
Contact & Mobile
Built the ink contact section with address, hours, and coverage area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Make 24h Legible
Decided the availability claim would be drawn as an instrument reading the visitor's own clock rather than printed as a number
Wine & Gold
Established the bone canvas, wine structure, gold accent, and the Epilogue / Public Sans / Space Mono type system
The Dial
Generated the 24 arc segments in JavaScript, wired the weekday lighting rule, the rotating hand, the digital readout, and the 30-second tick
Hours & Services
Built the three-row hours table, the six-card service grid, the 5.0★ / 35-review proof strip, and the review themes
Contact & Mobile
Built the ink contact section with address, hours, and coverage area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.