Watch: Classic, noble, modern or playful? What do you want your favorite watch to look like?'
Project Structure
The project consists of 3 main files:
- index.html - the HTML structure.
- style.css - for styling.
- script.js - for interactivity.
HTML Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
<div class="frame">
<div class="center" id="pointSets">
<div class="ring">
<div class="mask-1 spin"></div>
<div class="mask-2 spin"></div>
<svg class="spinner" viewBox="0 0 202 202" xmlns="http://www.w3.org/2000/svg">
<circle cx="101" cy="101" r="99.5"></circle>
</svg>
</div>
<div class="date">Mon 15 Jan 2015</div>
<div class="time">11:42</div>
<div class="beat">
<span class="fa fa-heart"></span>81
</div>
<div class="energy">1248kal</div>
</div>
</div>CSS Styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$speed: 5s; // 60s for realtime
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
background: #4c4c4c;
color: #fff;
font-size: 12px;
line-height: 100%;
text-transform: uppercase;
font-family: "Open Sans", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
position: absolute;
width: 212px;
height: 212px;
top: 87px;
left: 87px;
background: #242424;
border: 7px solid #3a3a3a;
border-radius: 50%;
text-align: center;
}
.date {
position: absolute;
top: 68px;
width: 100%;
}
.time {
position: absolute;
top: 80px;
width: 100%;
font-weight: 700;
font-size: 40px;
line-height: 100%;
margin: 4px 0;
}
.beat {
position: absolute;
top: 129px;
left: 57px;
span {
font-size: 10px;
color: #f85b5b;
float: left;
margin-top: 1px;
margin-right: 4px;
animation: beat 0.9s ease-in-out infinite;
}
}
.energy {
position: absolute;
top: 129px;
right: 55px;
}
@for $i from 1 through 15 {
.point-set-#{$i} {
position: absolute;
height: 188px;
width: 188px;
top: 12px;
left: 12px;
transform: rotate( (($i - 1)*6) + deg );
.point-1 {
position: absolute;
width: 2px;
height: 2px;
top: 0;
left: 93px;
background: #D3D3D3;
border-radius: 50%;
}
.point-2 {
@extend .point-1;
top: 93px;
left: auto;
right: 0;
}
.point-3 {
@extend .point-1;
top: auto;
bottom: 0;
}
.point-4 {
@extend .point-1;
top: 93px;
left: 0;
}
}
}
.spinner {
position:absolute;
width:202px;
height:202px;
border-radius: 50%;
top: 5px;
left: 5px;
circle {
stroke: #F85B5B;
stroke-width: 3;
fill: none;
stroke-dasharray: 625;
animation: spinner $speed
linear infinite;
transform-origin: center
center;
transform: rotate(-90deg);
}
}
@keyframes beat {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
@keyframes spinner {
from {
stroke-dashoffset: 625;
transform: rotate(-90deg) scaleY(1);
}
50% {
stroke-dashoffset: 0;
transform: rotate(-90deg) scaleY(1);
}
50.001% {
transform: rotate(-90deg) scaleY(-1);
}
to {
stroke-dashoffset: 625;
transform: rotate(-90deg) scaleY(-1);
}
}Javascript
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
$(document).ready(function () {
// Generate 15 point sets with 4 points each
for (let i = 1; i <= 15; i++) {
const pointSet = $("<div>", {
class: `point-set-${i}`
});
// Generate 4 points for each point set
for (let j = 1; j <= 4; j++) {
const point = $("<div>", {
class: `point-${j}`
});
pointSet.append(point);
}
$(".center").append(pointSet);
}
});