Jam Dinding
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<styl>:root {
--main-bg-color: #fff;
--main-text-color: #888888;
}
[data-theme="dark"] {
--main-bg-color: #1e1f26;
--main-text-color: #ccc;
}
* {
box-sizing: border-box;
/* transition: all ease 0.2s; */
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: 16px;
background-color: var(--main-bg-color);
position: relative;
transition: all ease 0.2s;
}
.page-header {
font-size: 2rem;
color: var(--main-text-color);
padding: 2rem 0;
font-family: monospace;
text-transform: uppercase;
letter-spacing: 4px;
transition: all ease 0.2s;
}
.clock {
min-height: 18em;
min-width: 18em;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-bg-color);
background-image: url("https://imvpn22.github.io/analog-clock/clock.png");
background-position: center center;
background-size: cover;
border-radius: 50%;
border: 4px solid var(--main-bg-color);
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
transition: all ease 0.2s;
}
.clock:before {
content: "";
height: 0.75rem;
width: 0.75rem;
background-color: var(--main-text-color);
border: 2px solid var(--main-bg-color);
position: absolute;
border-radius: 50%;
z-index: 1000;
transition: all ease 0.2s;
}
.hour,
.min,
.sec {
position: absolute;
display: flex;
justify-content: center;
border-radius: 50%;
}
.hour {
height: 10em;
width: 10em;
}
.hour:before {
content: "";
position: absolute;
height: 50%;
width: 6px;
background-color: var(--main-text-color);
border-radius: 6px;
}
.min {
height: 12em;
width: 12em;
}
.min:before {
content: "";
height: 50%;
width: 4px;
background-color: var(--main-text-color);
border-radius: 4px;
}
.sec {
height: 13em;
width: 13em;
}
.sec:before {
content: "";
height: 60%;
width: 2px;
background-color: #f00;
border-radius: 2px;
}
/* Style for theme switch btn */
.switch-cont {
margin: 2em auto;
/* position: absolute; */
bottom: 0;
}
.switch-cont .switch-btn {
font-family: monospace;
text-transform: uppercase;
outline: none;
padding: 0.5rem 1rem;
background-color: var(--main-bg-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
border-radius: 0.25rem;
cursor: pointer;
transition: all ease 0.3s;
}
</style>
</head>
<body>
<!--
Materi Coding Mapel Informatika MAN Kapuas
-->
<div class="page-header"> JAM MAN KAPUAS </div>
<div class="clock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
<div class="switch-cont">
<button class="switch-btn"> Light </button>
</div>
<script>
//
const deg = 6;
const hour = document.querySelector(".hour");
const min = document.querySelector(".min");
const sec = document.querySelector(".sec");
const setClock = () => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
min.style.transform = `rotateZ(${mm}deg)`;
sec.style.transform = `rotateZ(${ss}deg)`;
};
// first time
setClock();
// Update every 1000 ms
setInterval(setClock, 1000);
const switchTheme = (evt) => {
const switchBtn = evt.target;
if (switchBtn.textContent.toLowerCase() === "light") {
switchBtn.textContent = "dark";
// localStorage.setItem("theme", "dark");
document.documentElement.setAttribute("data-theme", "dark");
} else {
switchBtn.textContent = "light";
// localStorage.setItem("theme", "light"); //add this
document.documentElement.setAttribute("data-theme", "light");
}
};
const switchModeBtn = document.querySelector(".switch-btn");
switchModeBtn.addEventListener("click", switchTheme, false);
let currentTheme = "dark";
// currentTheme = localStorage.getItem("theme")
// ? localStorage.getItem("theme")
// : null;
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
switchModeBtn.textContent = currentTheme;
}
</script>
</body>
</html>
0 komentar: