Skip to content

Commit 105bb7b

Browse files
sibche2013sibche2013
authored
Update index.html
1 parent 6b88ac6 commit 105bb7b

1 file changed

Lines changed: 93 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 93 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,68 +2,125 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Display Clock With JavaScript</title>
6-
<meta name="description" content="Display Live Clock With JavaScript | نمایش ساعت با جاوا اسکریپت"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Display Clock With JavaScript | نمایش ساعت با جاوا اسکریپت</title>
7+
<meta name="description" content="Display Live Clock With JavaScript | نمایش ساعت با جاوا اسکریپت"/>
8+
<!-- Vazirmatn & Inter Fonts -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/vazirmatn-font-face.css">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
711

812
<style>
9-
/*
10-
This File Was Coded By Amin Arjmand | Email: aminarj2000@gmail.com | Site: aminarjmand.com | Github Profile : https://github.com/sibche2013
13+
/*
14+
Developed by Amin Arjmand
15+
Site: aminarjmand.com | GitHub: @sibche2013
1116
*/
12-
body {
13-
background-color: #f1f1f1;
17+
* {
18+
box-sizing: border-box;
19+
margin: 0;
20+
padding: 0;
1421
}
1522

16-
.board, button {
17-
display: block;
18-
padding: 15px;
19-
margin: 5px;
20-
border: none;
21-
border-radius: 5px;
22-
background-color: rgb(0, 200, 81);
23-
cursor: pointer;
24-
font-size: 1em;
23+
body {
24+
font-family: 'Inter', 'Vazirmatn', sans-serif;
25+
background: radial-gradient(circle at 50% 50%, #2e3440 0%, #1a1c23 100%);
26+
min-height: 100vh;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
color: #eceff4;
32+
gap: 20px;
2533
}
2634

27-
.board:hover, button:hover {
28-
transition: 0.2s;
29-
box-shadow: inset 0 0 50px #1c8a1f;
35+
.board {
36+
background: rgba(255, 255, 255, 0.05);
37+
backdrop-filter: blur(12px);
38+
-webkit-backdrop-filter: blur(12px);
39+
border: 1px solid rgba(255, 255, 255, 0.1);
40+
border-radius: 16px;
41+
padding: 30px 40px;
42+
text-align: center;
43+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
44+
max-width: 400px;
45+
width: 90%;
3046
}
3147

32-
.backTo {
33-
background-color: rgb(255, 200, 0);
34-
margin: auto;
35-
border-radius: 30px 3px;
48+
h1 {
49+
font-size: 1.8rem;
50+
font-weight: 600;
51+
margin-bottom: 10px;
52+
background: linear-gradient(45deg, #88c0d0, #81a1c1);
53+
-webkit-background-clip: text;
54+
-webkit-text-fill-color: transparent;
3655
}
3756

38-
.backTo:hover {
39-
box-shadow: inset 0 20px 50px rgb(255, 165, 0);
57+
p {
58+
font-size: 0.9rem;
59+
color: #d8dee9;
60+
margin-bottom: 25px;
61+
opacity: 0.8;
4062
}
4163

4264
.clock {
43-
background-color: rgb(40, 255, 61);
44-
border-radius: 50%;
45-
height: 90px;
46-
margin: auto;
47-
border: 2px solid #3a6a00;
65+
width: 100%;
66+
padding: 15px;
67+
font-family: 'Inter', sans-serif;
68+
font-size: 2.2rem;
69+
font-weight: 600;
70+
color: #88c0d0;
71+
background: rgba(136, 192, 208, 0.1);
72+
border: 1px solid rgba(136, 192, 208, 0.2);
73+
border-radius: 12px;
74+
cursor: pointer;
75+
transition: all 0.3s ease;
76+
outline: none;
4877
}
4978

5079
.clock:hover {
51-
box-shadow: inset 0 20px 50px rgb(253, 255, 31);
80+
background: rgba(136, 192, 208, 0.2);
81+
box-shadow: 0 0 15px rgba(136, 192, 208, 0.3);
82+
transform: scale(1.02);
83+
}
5284

85+
.clock.stopped {
86+
color: #bf616a;
87+
background: rgba(191, 97, 106, 0.1);
88+
border-color: rgba(191, 97, 106, 0.2);
5389
}
5490

55-
h1,p{
56-
text-align: center;
91+
.clock.stopped:hover {
92+
background: rgba(191, 97, 106, 0.2);
93+
box-shadow: 0 0 15px rgba(191, 97, 106, 0.3);
94+
}
95+
96+
.backTo {
97+
font-family: inherit;
98+
font-size: 0.9rem;
99+
padding: 10px 20px;
100+
background: rgba(255, 255, 255, 0.03);
101+
border: 1px solid rgba(255, 255, 255, 0.08);
102+
border-radius: 30px;
103+
color: #d8dee9;
104+
cursor: pointer;
105+
transition: all 0.2s ease;
106+
}
107+
108+
.backTo:hover {
109+
background: rgba(255, 255, 255, 0.1);
110+
color: #ffffff;
57111
}
58112
</style>
59113
</head>
60114
<body>
115+
61116
<div class="board">
62-
<h1>Live Clock !</h1>
63-
<p>Click On Clock For Stop & ReStart Clock</p>
64-
<button class="clock" onclick="toggleClock();" id="cas"></button>
117+
<h1>Live Clock</h1>
118+
<p>Click on the clock to Pause / Resume</p>
119+
<button class="clock" onclick="toggleClock();" id="cas">00:00:00</button>
65120
</div>
66-
<button class="backTo" onclick="history.back();">Back To Previous Page</button>
121+
122+
<button class="backTo" onclick="history.back();">← Back To Previous Page</button>
123+
67124
<script src="JsClock.js"></script>
68125
</body>
69126
</html>

0 commit comments

Comments
 (0)