Skip to content

Commit

Permalink
Fix clock demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinchox5
tinchox5 committed Mar 22, 2023
1 parent addc124 commit dc3f8ea
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 52 deletions.
30 changes: 27 additions & 3 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
--label-width: 50px;
/* svg */
--val: 0;
--diam: 600;
--diam: 400;
--stroke: 10;
}

Expand Down Expand Up @@ -128,6 +128,7 @@

.item.transparent {
border: none;
background-color: var(--transparent);
}

.item.a0 {
Expand Down Expand Up @@ -3463,6 +3464,7 @@ svg {
justify-items: center;
align-content: center;
justify-content: center;
rotate: -90deg;
width: calc(var(--diam) * 1px);
height: calc(var(--diam) * 1px);
}
Expand All @@ -3477,12 +3479,34 @@ svg {
stroke-width: var(--stroke);
}

.percent {
.percent.hour {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;
stroke: #186ddd;
stroke: #e02727;
stroke-width: var(--stroke);
stroke-dasharray: 100;
stroke-dashoffset: calc((100 - var(--val)) * 1px);
}

.percent.minute {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;
stroke: #bc26da;
stroke-width: var(--stroke);
stroke-dasharray: 100;
stroke-dashoffset: calc((100 - var(--val)) * 1px);
}

.percent.second {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;
stroke: #85e8a9;
stroke-width: var(--stroke);
stroke-dasharray: 100;
stroke-dashoffset: calc((100 - var(--val)) * 1px);
Expand Down
2 changes: 1 addition & 1 deletion css/index.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/index.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/index.min.css.map
View file

Large diffs are not rendered by default.

116 changes: 75 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,46 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" type="text/css" />
<title>Radial grid layout - css only</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<div class="z-container" >
<div class="core">
<hr class="item line hora" style="width: 210px; height: 1px; border:1px solid red; --angle: 0; --item-number: 1;
<hr class="item line hora" style="width: 110px; height: 6px; border:1px solid red; --angle: 0; --item-number: 1;
transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg)) ;">
<hr class="item line minuto" style="width: 220px; height: 1px; border:1px solid rgb(157, 2, 247); --angle: 0; --item-number: 1;
<hr class="item line minuto" style="width: 160px; height: 3px; border:1px solid rgb(157, 2, 247); --angle: 0; --item-number: 1;
transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg));">
<hr class="item line segundo" style="width: 250px; height: 1px; border:1px solid rgb(0, 245, 61); --angle: 0; --item-number: 1;
<hr class="item line segundo" style="width: 210px; height: 1px; border:1px solid rgb(0, 245, 61); --angle: 0; --item-number: 1;
transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg));">
</div>
<div class="ring-1 items-3 offset-270 arc-90">
<div class="item s upper d-h lower transparent"></div>
<div class="item s upper d-m lower transparent"></div>
<div class="item s upper d-s lower transparent"></div>
</div>
<div class="ring-2 items-12 offset-270">
<div class="item xs upper">12</div>
<div class="item xs upper">1</div>
<div class="item xs upper">2</div>
<div class="item xs upper">3</div>
<div class="item xs upper">4</div>
<div class="item xs upper">5</div>
<div class="item xs upper">6</div>
<div class="item xs upper">7</div>
<div class="item xs upper">8</div>
<div class="item xs upper">9</div>
<div class="item xs upper">10</div>
<div class="item xs upper">11</div>

<div class="item s lower">12</div>
<div class="item s lower">1</div>
<div class="item s lower">2</div>
<div class="item s lower">3</div>
<div class="item s lower">4</div>
<div class="item s lower">5</div>
<div class="item s lower">6</div>
<div class="item s lower">7</div>
<div class="item s lower">8</div>
<div class="item s lower">9</div>
<div class="item s lower">10</div>
<div class="item s lower">11</div>

<svg>
<circle class="percent hour" pathLength="100" style="r: 190px"/>
<circle class="percent minute" pathLength="100" style="r: 170px"/>
<circle class="percent second" pathLength="100" style="r: 150px"/>
</svg>
</div>
</div>
<div class="z-container" >
Expand Down Expand Up @@ -89,33 +103,53 @@
</div>
</div>
<script>
var elh = document.querySelector("hr.hora")
var hora = elh.style.getPropertyValue("--angle")
var elm = document.querySelector("hr.minuto")
var minuto = elm.style.getPropertyValue("--angle")
var els = document.querySelector("hr.segundo")
var segundo = els.style.getPropertyValue("--angle")
function timeToDegrees(hours, minutes, seconds) {
const hourDegrees = (((hours / 12) * 360)) + (((minutes / 60) * 360) ) / 60 - 90 ;
const minuteDegrees = ((minutes / 60) * 360) + (((seconds / 60) * 360)) / 360 - 90;
const secondDegrees = ((seconds / 60) * 360) - 90;
return {
hour: hourDegrees,
minute: minuteDegrees,
second: secondDegrees,
};
function analogWatch() {
// Get the current time
const now = new Date();

// Get the current hour, minute, and second
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

// Calculate the angles of the hour, minute, and second hands
const hourAngle = (hour % 12) * 30 + minute / 2;
const minuteAngle = minute * 6;
const secondAngle = second * 6;
const hourPercentage = hourAngle / 360 * 100;
const minutePercentage = minuteAngle / 360 * 100;
const secondPercentage = secondAngle / 360 * 100;

// Get the hour, minute, and second hand elements
const hourHand = document.querySelector('.hora');
const minuteHand = document.querySelector('.minuto');
const secondHand = document.querySelector('.segundo');

const hourDigital = document.querySelector('.d-h');
const minuteDigital = document.querySelector('.d-m');
const secondDigital = document.querySelector('.d-s');

const svgh = document.querySelector('.percent.hour');
const svgm = document.querySelector('.percent.minute');
const svgs = document.querySelector('.percent.second');

// Set the transform style of each hand element with angle correction
hourHand.style.setProperty("--angle", hourAngle - 90)
minuteHand.style.setProperty("--angle", minuteAngle - 90)
secondHand.style.setProperty("--angle", secondAngle - 90)

svgh.style.setProperty("--val", hourPercentage)
svgm.style.setProperty("--val", minutePercentage)
svgs.style.setProperty("--val", secondPercentage)

hourDigital.innerHTML = hour
minuteDigital.innerHTML = minute
secondDigital.innerHTML = second
}

setInterval(() => {
const now = new Date();

const degrees = timeToDegrees(now.getUTCHours() -3, now.getUTCMinutes(), now.getUTCSeconds());
elh.style.setProperty("--angle", degrees.hour)
elm.style.setProperty("--angle", degrees.minute)
els.style.setProperty("--angle", degrees.second)
//console.log(now.getUTCHours() -3, degrees.hour, now.getUTCMinutes(),degrees.minute, now.getUTCSeconds(),degrees.second)

}, 1000)
// Call the analogWatch function every second
setInterval(analogWatch, 1000);

</script>
</body>

Expand Down
32 changes: 27 additions & 5 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@

/* svg */
--val: 0;
--diam: 600;
--diam: 400;
--stroke: 10;

}
Expand Down Expand Up @@ -165,6 +165,7 @@

.item.transparent {
border: none;
background-color: var(--transparent);
}

.item.a0 {
Expand Down Expand Up @@ -394,7 +395,7 @@ svg {
border-radius: inherit;
grid-area: 1/1/1/1;
@include alignment;

rotate: -90deg;
width: calc(var(--diam) * 1px);
height: calc(var(--diam) * 1px);

Expand All @@ -409,15 +410,36 @@ svg {
stroke-dasharray: calc(360/5 - 20) 20;
stroke-width: var(--stroke);
}
.percent {
.percent.hour {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;
stroke: #186ddd;
stroke: #e02727;
stroke-width: var(--stroke);
stroke-dasharray: 100;
stroke-dashoffset: calc((100 - var(--val)) * 1px);
}
.percent.minute {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;
stroke: #bc26da;

stroke-width: var(--stroke);
stroke-dasharray: 100;
stroke-dashoffset: calc((100 - var(--val)) * 1px);
}
.percent.second {
cx: calc(var(--diam) / 2 * 1px);
cy: calc(var(--diam) / 2 * 1px);
r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
fill: none;

stroke: #85e8a9;
stroke-width: var(--stroke);
stroke-dasharray: 100;

stroke-dashoffset: calc((100 - var(--val)) * 1px);
}

Expand Down

0 comments on commit dc3f8ea

Please sign in to comment.