⏰ Analog Clock

📋 Project Overview

A visually appealing analog clock interface built with pure HTML and CSS. This project demonstrates advanced CSS techniques including animations, transforms, and precise positioning to create a functional clock visualization without JavaScript.

✨ Features

🎨 Visual Design

• Dark Modern Theme: Gradient background with black clock face
• Responsive Centering: Clock perfectly centered on all screen sizes
• Realistic Shadows: Subtle box shadows for depth and dimension
• Color-coded Hands: White (hour), Cyan (minute), Red (second)

🔄 Animation System

• Smooth CSS Animations: Hour and minute hands with continuous rotation
• Transform Origin Control: Precise rotation from bottom center
• Independent Timing: Different rotation speeds for each hand

📐 Layout & Positioning

• Absolute Positioning: Precise placement of all clock elements
• Circular Number Layout: Numbers 1-12 positioned in perfect circle
• Z-index Management: Proper layering of clock components

🏗️ Project Structure

ANALOG CLOCK/
├── index.html          # Main HTML structure
└── style.css          # All styling and animations

📁 File Breakdown

index.html

• Semantic HTML5 structure
• Clock container hierarchy
• 12 numbered markers (1-12)
• Three clock hands (hour, minute, second)
• Center pivot dot

style.css

• Global body styling with gradient background
• Clock face styling (.grey_circle, .black_circle)
• Clock hands styling and animations
• Number positioning (12 positions)
• Center dot styling
• Animation keyframes

🛠️ Technical Implementation

Core Components

1. Clock Face Container (.grey_circle)

   • Outer grey circle: 410x410px
   • Border radius: 50% for perfect circle
   • Box shadow for 3D effect
   • Centered with auto margins

2. Inner Clock (.black_circle)

   • Black face: 380x380px
   • Position: relative (for absolute child positioning)
   • Contains all clock elements

3. Clock Hands

   .hour:     White, 70px tall, rotates every 20s
   .minute:   Cyan, 120px tall, rotates every 10s  
   .second:   Red, 150px tall, static positioning
   

4. Number Markers (.small_circle)

   • 12 circular divs with numbers
   • Absolute positioning around clock
   • Custom coordinates for each number
   • Font size: 40px, white color

5. Center Pivot (.dot)

   • White dot with shadow
   • Highest z-index (10)
   • Perfectly centered

🎯 CSS Positioning System

Each number uses absolute positioning with custom coordinates:

• box-12: top: -29px, left: 163px
• box-3: top: 127px, right: 10px
• box-6: bottom: 50px, left: 159px
• etc. for all 12 positions

🔄 Animation Framework

@keyframes rotateHour {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateMinute {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

💻 Technical Stack

Languages & Standards

• HTML5: Markup structure
• CSS3: Styling and animations

CSS Features Used

• @keyframes for animations
• transform and transform-origin
• position: absolute/relative
• linear-gradient backgrounds
• border-radius: 50% for circles
• box-shadow for depth effects
• z-index for layering
• calc() and viewport units

🚀 Installation & Setup

Method 1: Direct File Access

1. Download both files:

   📁 analog-clock/
     ├── 📄 index.html
     └── 📄 style.css

2. Open index.html in any modern browser

Method 2: Local Server (Recommended)

# Using Python
python -m http.server 8000

# Using Node.js with http-server
npx http-server .

# Using PHP
php -S localhost:8000

Then visit: http://localhost:8000

📖 Usage Instructions

Viewing the Clock

1. Open index.html in a web browser
2. Observe the clock hands in motion:
   • Hour hand: Completes full rotation every 20 seconds
   • Minute hand: Completes full rotation every 10 seconds
   • Second hand: Static (no animation)

Understanding the Design

• The dark gradient background creates depth
• Clock face uses concentric circles for realism
• Numbers are positioned mathematically around the circle
• Hands rotate from their base (transform-origin: bottom center)

🔧 Development Setup

Prerequisites

• Modern web browser (Chrome 90+, Firefox 88+, Safari 14+)
• Text editor (VS Code, Sublime Text, etc.)
• Basic understanding of HTML/CSS

Editing the Project

1. Clone or download the project files
2. Open in your preferred code editor
3. Modify style.css to change:
   • Colors
   • Sizes
   • Animation speeds
   • Positions
4. Modify index.html to change:
   • Text content
   • Structure
   • Number labels

Testing Changes

1. Save your changes
2. Refresh the browser
3. Clock updates immediately (no build process needed)

🎨 Customization Guide

Changing Colors

/* Change background gradient */
body {
    background: linear-gradient(135deg, #your_color 0%, #your_color2 100%);
}

/* Change clock face */
.grey_circle {
    background-color: #your_color;
}

/* Change hands color */
.hour { background-color: #your_color; }
.minute { background-color: #your_color; }
.second { background-color: #your_color; }

Adjusting Sizes

/* Change overall clock size */
.grey_circle {
    width: 500px;   /* Increase size */
    height: 500px;  /* Increase size */
}

/* Adjust hand lengths */
.hour { height: 90px; }    /* Longer hour hand */
.minute { height: 140px; } /* Longer minute hand */
.second { height: 160px; } /* Longer second hand */

Modifying Animations

/* Slower hour hand (30 seconds per rotation) */
.hour {
    animation: rotateHour 30s linear infinite;
}

/* Faster minute hand (5 seconds per rotation) */
.minute {
    animation: rotateMinute 5s linear infinite;
}

📊 Browser Compatibility

Browser	Version	Status
Chrome	90+	✅ Fully Supported
Firefox	88+	✅ Fully Supported
Safari	14+	✅ Fully Supported
Edge	90+	✅ Fully Supported
Opera	76+	✅ Fully Supported

Note: CSS animations and transforms are well-supported in all modern browsers.

🤝 Contributing

How to Contribute

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Suggested Improvements

• Add JavaScript for real-time functionality
• Implement responsive design improvements
• Add dark/light mode toggle
• Enhance accessibility features
• Add clock settings panel
• Implement different clock styles

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Classic Analog Clock Project

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

📞 Contact & Support

Project Maintainer: Muhammad Affan
Email: maffan2830@gmail.com
GitHub: M-Affan01

Getting Help

• Issue Tracker: Report bugs or request features
• Documentation: Refer to this README
• Community: Share your modifications and improvements

🌟 Showcase

What Makes This Project Special

1. Zero JavaScript: Pure CSS implementation
2. Educational Value: Great for learning CSS animations
3. Lightweight: Only 2 files, no dependencies
4. Performant: Smooth animations using CSS hardware acceleration
5. Customizable: Easy to modify and extend

Academic & Learning Applications

• CSS animations and transforms
• Absolute positioning techniques
• Circular layout mathematics
• Timing functions and keyframes
• Responsive design principles