🕐 Flip Clock

Complete Help & Documentation Guide

📋 Overview

A beautiful, responsive flip-clock style digital clock inspired by Fliqlo. Features smooth 3D flip animations, customizable appearance, and multiple display modes. Perfect for use as a desktop clock, screensaver, or presentation timer.

✨ Key Features

🔄

Smooth Flip Animation

Realistic 3D card-flip effect for each digit change with smooth transitions.

🌓

Dark & Light Modes

Seamless switching between dark (black/white) and light (white/black) themes.

⛶

Fullscreen Mode

Edge-to-edge display with no boundaries for immersive viewing experience.

🕐

12h/24h Format

Toggle between 12-hour (with AM/PM) and 24-hour time formats.

Adjustable Font Size

Customize digit size from 60% to 140% with smooth scaling.

⏱️

Seconds Display

Full HH:MM:SS display with individual flip animations for each digit.

⌨️ Keyboard Shortcuts

Quick access to all features using your keyboard:

Key	Action	Description
F	Toggle Fullscreen	Enter or exit fullscreen mode
ESC	Exit Fullscreen	Quick exit from fullscreen mode
T	Toggle Theme	Switch between Dark and Light mode
H	Toggle Hour Format	Switch between 12-hour and 24-hour format
S	Show/Hide Font Settings	Toggle font size control panel visibility
+ or =	Increase Font Size	Make the clock digits larger (10% increment)
- or _	Decrease Font Size	Make the clock digits smaller (10% increment)

🎛️ Control Buttons

Visual controls located in the top-right corner:

Button Overview

Aa Font Size - Opens the font size control panel (appears when panel is hidden)
24h or 12h - Shows current time format, click to toggle
🌓 Theme - Toggle between Dark and Light mode
⛶ Fullscreen - Enter/exit fullscreen mode

🎨 Font Size Customization

The font size control panel (top-left) provides multiple ways to adjust the clock size:

Adjustment Methods

Slider: Drag for precise control (60% - 140%)
− and + Buttons: Quick adjustments in 10% increments
Keyboard: Press + or - keys
Close Button (✕): Hide the panel after setting your preferred size

💡 Pro Tip

Once you've set your desired font size, click the ✕ button to hide the control panel for a cleaner display. Press S anytime to bring it back!

🕐 Time Format Options

24-Hour Format (Default)

Displays hours from 00 to 23
Military/International time format
No AM/PM indicator
Example: 14:30:45

12-Hour Format

Displays hours from 12, 01-11
Shows AM/PM indicator below the clock
Midnight displays as 12:00 AM
Noon displays as 12:00 PM
Example: 02:30:45 PM

🎭 Theme Modes

Dark Mode (Default)

Black background (#000000)
White digits and text (#FFFFFF)
Dark gray card backgrounds
Perfect for nighttime viewing

Light Mode

Light gray background (#F5F5F5)
Black digits and text (#000000)
White card backgrounds
Ideal for bright environments

📱 Responsive Design

The flip clock automatically adapts to different screen sizes:

Desktop: Large, prominent display with all controls visible
Tablet: Optimized card and font sizes for medium screens
Mobile: Compact layout with repositioned font controls
Fullscreen: Maximum size display utilizing entire viewport

🚀 Quick Start Guide

Open flip-clock.html in any modern web browser
The clock starts automatically in 24-hour format with dark mode
Press F to enter fullscreen for best experience
Press H to switch to 12-hour format if preferred
Press T to change theme based on your environment
Use + or - to adjust size to your preference
Press S to hide the font control panel

💡 Usage Tips

🖥️ Use as Desktop Clock

Open in your browser, press F for fullscreen, adjust size with +/-, then hide controls with S. Perfect minimal desktop clock!

📊 Presentation Timer

Display the clock on a second screen during presentations. The large digits are visible from across the room.

😴 Bedside Clock

Use Dark Mode for comfortable nighttime viewing. The smooth animations are easy on the eyes.

⌚ Multiple Time Zones

Open multiple browser tabs or windows to display different time zones simultaneously (requires system timezone adjustment).

🔧 Browser Compatibility

The flip clock works in all modern browsers:

✅ Chrome/Edge (v90+)
✅ Firefox (v88+)
✅ Safari (v14+)
✅ Opera (v76+)

⚠️ Note

Fullscreen functionality requires user interaction (button click or keyboard press). Browsers block automatic fullscreen for security reasons.

❓ Troubleshooting

Clock not updating?

Refresh the page (F5 or Ctrl+R). Ensure JavaScript is enabled in your browser.

Fullscreen not working?

Some browsers require specific permissions. Check your browser settings or try the F key instead of the button.

Animations stuttering?

Close other tabs or applications to free up system resources. Hardware acceleration in browser settings may help.

Font size not changing?

Make sure you're not at the minimum (60%) or maximum (140%) limit. Try using the slider for fine control.

Controls not visible?

Press S to show the font control panel, or check if you're in fullscreen mode where controls are positioned differently.

🎨 Customization Notes

For advanced users who want to modify the clock:

Colors: Edit CSS variables in the :root section
Font: Change "Orbitron" to any Google Font or system font
Animation Speed: Adjust the 0.6s duration in @keyframes flip
Card Size: Modify clamp() values in .flip-card

📄 File Information

File: flip-clock.html
Type: Single HTML file (no external dependencies)
Size: ~15KB (extremely lightweight)
Internet Required: Only for loading the Orbitron font (optional)

🎓 Keyboard Shortcuts Summary

F Fullscreen T Theme H 12h/24h S Font Panel +/- Size

Enjoy your beautiful flip clock! 🎉