⌚ केवल HTML और CSS से Analog Watch – पूरा Step-by-Step हिंदी गाइड

हम एक गोल analog घड़ी (watch) बनाएंगे जो अपने आप घूमेगी और घड़ी की सुइयों (hour, minute, second hands) का animation दिखाएगी।
इसमें हम कोई भी JavaScript use नहीं करेंगे — सिर्फ HTML और CSS के जरिए पूरा डिज़ाइन और animation होगा।

1️⃣ HTML Structure – बेस ढांचा

सबसे पहले HTML में हमें घड़ी का ढांचा (structure) बनाना है।

<div class="face">
  <p class="v-index">II</p>
  <p class="h-index">II</p>
  <div class="hand">
    <div class="hand">
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>
    </div>
  </div>
</div>

HTML समझें:

• .face → यह पूरी घड़ी का गोल बॉर्डर और बैकग्राउंड है।
• .v-index और .h-index → Roman "II" symbol जो 12-6 और 3-9 की लाइनें दिखाने के लिए हैं, ये design element हैं।
• .hand → यह wrapper divs हैं जिसमें तीनों घड़ी की सुइयां आती हैं।
• .hour → घंटे की सुई।
• .minute → मिनट की सुई।
• .second → सेकंड की सुई।

2️⃣ CSS Styling – घड़ी को सुंदर बनाना

⏺ घड़ी का गोल चेहरा (Dial)

.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  outline: 10px solid #333;
  background: repeating-radial-gradient(
      circle at 50% 50%,
      rgba(200, 200, 200, 0.2) 0%,
      rgba(200, 200, 200, 0.2) 2%,
      transparent 2%,
      transparent 3%,
      rgba(200, 200, 200, 0.2) 3%,
      transparent 3%
    ), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver
        70%, white 80%, silver 95%, white 100%);
  box-shadow: inset 0 0 20px #0007;
}

क्या करता है ये कोड:

• border-radius: 50% → घड़ी को पूरी तरह गोल बनाता है।
• outline → मोटी बॉर्डर की तरह एक dark रिंग।
• repeating-radial-gradient → अंदर छोटे-छोटे गोल पैटर्न बनाता है।
• conic-gradient → अलग-अलग सिल्वर और वाइट शेड के साथ एक metallic look देता है।
• box-shadow → अंदर की तरफ हल्की 3D डार्क शैडो।

📍 घड़ी के इंडेक्स (Roman II symbols)

.v-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  left: 83.5px;
  top: -3px;
  text-shadow: 0 157px 0 #333;
}
.h-index {
  position: absolute;
  color: #333;
  font-size: 24px;
  top: 72px;
  left: 5px;
  transform: rotate(-90deg);
  text-shadow: 0 158px 0 #333;
}

कैसे काम करता है:

• .v-index ऊपर और नीचे "II" दिखाती है (12 और 6 बजे)।
• .h-index बाईं और दाईं ओर दिखाती है (3 और 9 बजे)।
• text-shadow से एक और “II” नीचे या साइड में बनती है, जिससे चारों तरफ मार्किंग दिखाई देती है।

🕓 घंटा (Hour Hand)

.hour {
  position: absolute;
  width: 5px;
  height: 60px;
  background: #aaa;
  left: 87.5px;
  top: 43px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 47px;
  box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333,
    inset -1.5px -3px 0px #333;
  z-index: 1;
  animation: watch 432s linear infinite;
}

समझें:

• चौड़ी और छोटी सुई।
• transform-origin से ये अपने pivot (center) से घूमती है।
• animation: 432s मतलब बहुत धीरे घूमेगी (showcase के लिए, असली समय नहीं)।

🕒 मिनट (Minute Hand)

.minute {
  position: absolute;
  width: 4px;
  height: 78px;
  background: #aaa;
  left: 88px;
  top: 25px;
  border-radius: 3px 3px 1px 1px;
  transform-origin: 2px 65px;
  box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333,
    inset -1.5px -3px 0px #333;
  z-index: 2;
  animation: watch 36s linear infinite;
}

• पतली और लंबी सुई।
• Animation तेज़ है ताकि मिनट बदलते दिखें।

⏱ सेकंड (Second Hand)

.second {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  left: 85px;
  top: 85px;
  border-radius: 50%;
  border: 1px solid #eee;
  z-index: 3;
  animation: watch 0.6s steps(60, end) 0s infinite;
}
.second::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 85px;
  left: 3px;
  bottom: -10px;
  background: red;
  border-radius: 2px;
  box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);
}
.second::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 2px;
  top: 2px;
  background: #555;
  border-radius: 50%;
}

डिटेल:

• लाल गोल पिवट (center) जो घूमता है।
• ::before → लंबी लाल सेकंड सुई।
• ::after → पिवट का छोटा डॉट।
• .6s steps(60, end) → सेकंड की सुई टिक-टिक मोशन में घूमती है, स्मूथ नहीं बल्कि जंप करती है।

🔄 Animation Keyframes

@keyframes watch {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

यह हर needle को अपने-अपने टाइम के हिसाब से 360 डिग्री में घुमाता है।

📌 आसान भाषा में काम करने का तरीका:

1. .face → घड़ी का बैकग्राउंड और बॉर्डर।
2. .v-index, .h-index → देखने में indices (घंटा मार्क)।
3. .hour, .minute, .second → तीन सुइयां, जिनके लिए अलग-अलग अजस्ट्मेंट और animation टाइम है।
4. transform-origin → सुइयों के घूमने का पिवट पॉइंट तय करता है।
5. @keyframes watch → सुइयों को लगातार घुमाता है।

💡 Extra Tips:

• अगर आप इसे असली समय के अनुसार चलाना चाहते हैं तो JavaScript से current time apply करें।
• बैकग्राउंड के रंग, सुइयों का design बदलकर अलग look दे सकते हैं।
• Responsive बनाने के लिए px की जगह % या em use करें।