Skip to content

Commit 12152ec

Browse files
Kailasanathan-06Kailasanathan-06
committed
new creation
1 parent ae3c98d commit 12152ec

File tree

4 files changed

+168
-0
lines changed

4 files changed

+168
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎app.py‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
from flask import Flask, render_template, jsonify
2+
from datetime import datetime, timedelta
3+
4+
app = Flask(__name__)
5+
6+
@app.route("/")
7+
def index():
8+
return render_template("index.html")
9+
10+
@app.route("/time")
11+
def time_api():
12+
now_utc = datetime.utcnow()
13+
ist = now_utc + timedelta(hours=5, minutes=30)
14+
return jsonify(time=ist.strftime("%H%M%S"))
15+
16+
if __name__ == "__main__":
17+
app.run(debug=True)

‎static/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
body {
2+
margin: 0;
3+
background: #111;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
font-family: sans-serif;
9+
}
10+
11+
.container {
12+
text-align: center;
13+
background: #222;
14+
padding: 30px;
15+
border-radius: 20px;
16+
box-shadow: 0 0 20px #00ffcc66;
17+
}
18+
19+
.clock {
20+
display: flex;
21+
gap: 12px;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
.separator {
27+
color: #00ffcc;
28+
font-size: 32px;
29+
font-weight: bold;
30+
margin-top: 4px;
31+
}
32+
33+
.label {
34+
margin-top: 15px;
35+
color: #00ffcc;
36+
font-size: 18px;
37+
}
38+
39+
.column {
40+
position: relative;
41+
width: 60px;
42+
height: 60px;
43+
overflow: hidden;
44+
border-radius: 10px;
45+
background: #00000033;
46+
}
47+
48+
.digit-strip {
49+
position: absolute;
50+
width: 100%;
51+
transition: transform 0.5s ease-in-out;
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
}
56+
57+
.digit-strip span {
58+
color: #fff;
59+
font-size: 30px;
60+
font-weight: 600;
61+
height: 60px;
62+
line-height: 60px;
63+
width: 100%;
64+
text-align: center;
65+
opacity: 0.5;
66+
}
67+
68+
.highlight-ring {
69+
position: absolute;
70+
top: 0;
71+
left: 0;
72+
width: 100%;
73+
height: 60px;
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
z-index: 2;
78+
}
79+
80+
.highlight-ring::before {
81+
content: "";
82+
width: 50px;
83+
height: 50px;
84+
border-radius: 50%;
85+
border: 2px solid #00ffcc;
86+
box-shadow: 0 0 10px #00ffcc88;
87+
}

‎templates/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>IST Rolling Clock</title>
6+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="clock">
11+
<div class="column" data-limit="3"></div> <!-- H1: 0–2 -->
12+
<div class="column" data-limit="10"></div> <!-- H2: 0–9 -->
13+
<div class="separator">:</div>
14+
<div class="column" data-limit="6"></div> <!-- M1: 0–5 -->
15+
<div class="column" data-limit="10"></div> <!-- M2: 0–9 -->
16+
<div class="separator">:</div>
17+
<div class="column" data-limit="6"></div> <!-- S1: 0–5 -->
18+
<div class="column" data-limit="10"></div> <!-- S2: 0–9 -->
19+
</div>
20+
<div class="label">Indian Standard Time (IST)</div>
21+
</div>
22+
23+
<script>
24+
const columns = document.querySelectorAll(".column");
25+
26+
columns.forEach((col) => {
27+
const limit = parseInt(col.dataset.limit);
28+
const strip = document.createElement("div");
29+
strip.classList.add("digit-strip");
30+
31+
for (let i = 0; i < limit; i++) {
32+
const span = document.createElement("span");
33+
span.textContent = i;
34+
strip.appendChild(span);
35+
}
36+
37+
col.appendChild(strip);
38+
39+
const highlight = document.createElement("div");
40+
highlight.classList.add("highlight-ring");
41+
col.appendChild(highlight);
42+
});
43+
44+
function updateClock() {
45+
fetch("/time")
46+
.then((res) => res.json())
47+
.then((data) => {
48+
const time = data.time;
49+
columns.forEach((col, i) => {
50+
const digit = parseInt(time[i]);
51+
const strip = col.querySelector(".digit-strip");
52+
strip.style.transform = `translateY(-${digit * 60}px)`;
53+
});
54+
});
55+
}
56+
57+
setInterval(updateClock, 1000);
58+
window.onload = updateClock;
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)