diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 99026ec..8c247d4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,11 @@ +import WallClock from "./apps-top/wall-clock/WallClock"; import Menu from "./menus/Menu"; function App() { return (
- SOON +
diff --git a/src/App.scss b/src/App.scss index a533b66..dfcd975 100644 --- a/src/App.scss +++ b/src/App.scss @@ -26,7 +26,8 @@ hr { display: block; } .app-top { - height: 150px; + min-height: 150px; + padding: 20px 0; display: flex; justify-content: center; align-items: center; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/apps-top/wall-clock/WallClock.js b/src/apps-top/wall-clock/WallClock.js new file mode 100644 index 0000000..a431dec --- /dev/null +++ b/src/apps-top/wall-clock/WallClock.js @@ -0,0 +1,47 @@ +import { useEffect, useState } from "react" +import './index.css'; +import { getTimeNowInSeconds } from "./utils"; + +export default function WallClock() { + const [initialTime, setInitialTime] = useState(getTimeNowInSeconds()); + + useEffect(() => { + setInitialTime(getTimeNowInSeconds()); + },[]); + + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/src/apps-top/wall-clock/index.css b/src/apps-top/wall-clock/index.css new file mode 100644 index 0000000..068693c --- /dev/null +++ b/src/apps-top/wall-clock/index.css @@ -0,0 +1,175 @@ +.wall-clock { + /* Initial value */ +/* --time: calc((60 * 60 * 3) + (60 * 47) + 6); */ + --time: 0; + /* starts from 00:00:00 am in seconds */ + --time-plus: var(--time); + /* Settings */ + --clock-size: 150px; + --clock-border-width: calc(0.025 * var(--clock-size)); + --clock-rounded-size: calc(0.2 * var(--clock-size)); + --bg-color: #222; + --text-color: #eee; + --color-light: #f0f0f030; + --color-shadow: #00000030; + --clock-hand-width: calc(0.05 * var(--clock-size)); + --clock-hand-second-color: #ee2222; + background-color: var(--bg-color); + display: block; + position: relative; /* Size won't relative to body size */ + width: var(--clock-size); + height: var(--clock-size); + min-width: var(--clock-size); + min-height: var(--clock-size); + border: var(--clock-border-width) solid var(--text-color); + padding: calc(0.025 * var(--clock-size)); + box-sizing: border-box; + box-shadow: + calc(-1 * var(--clock-border-width)) calc(-1 * var(--clock-border-width)) calc(3 * var(--clock-border-width)) var(--color-light), + inset calc(-1 * var(--clock-border-width)) calc(-1 * var(--clock-border-width)) calc(3 * var(--clock-border-width)) var(--color-light), + calc(1 * var(--clock-border-width)) calc(1 * var(--clock-border-width)) calc(3 * var(--clock-border-width)) var(--color-shadow), + inset calc(1 * var(--clock-border-width)) calc(1 * var(--clock-border-width)) calc(3 * var(--clock-border-width)) var(--color-shadow); + + /* Centering clock content */ + display: flex; + justify-content: center; + align-items: center; +} +.wall-clock.rounded { + border-radius: var(--clock-rounded-size); +} +.wall-clock.circle { + border-radius: var(--clock-size); +} +/* The center point */ +.wall-clock::after { + content: ''; + position: absolute; + width: var(--clock-hand-width); + height: var(--clock-hand-width); + box-sizing: border-box; + border: calc(0.25 * var(--clock-hand-width)) solid var(--clock-hand-second-color); + border-radius: 50%; + background-color: inherit; +} + +/* Clock nums */ +.wall-clock-nums { + position: relative; + width: 100%; + height: 100%; + font-family: "Lucida Console", "Courier New", monospace; + font-weight: bold; +} +.wall-clock-nums [num] { + --num-degree-pos: 0deg; /* for num 12 */ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: rotate(var(--num-degree-pos)); + color: var(--text-color); +} +.wall-clock-nums [num]::before { + content: attr(num); + line-height: calc(0.1 * var(--clock-size)); + font-size: calc(0.1 * var(--clock-size)); + position: absolute; + top: 0; + left: 50%; + width: calc(0.1 * var(--clock-size)); + height: calc(0.1 * var(--clock-size)); + text-align: center; + transform: translateX(-50%) rotate(calc(-1 * var(--num-degree-pos))); +} +.wall-clock-nums [num]:not(.numeric)::before { + --num-degree-pos: 0deg; + content: ''; + background-color: var(--text-color); + width: calc(0.007 * var(--clock-size)); + height: calc(0.05 * var(--clock-size)); +} +.wall-clock-nums [num$=".5"]:not(.numeric)::before { + width: calc(0.001 * var(--clock-size)); + height: calc(0.025 * var(--clock-size)); +} +.wall-clock-nums [num="12.5"] {--num-degree-pos: 15deg;} +.wall-clock-nums [num="1"] {--num-degree-pos: 30deg;} +.wall-clock-nums [num="1.5"] {--num-degree-pos: 45deg;} +.wall-clock-nums [num="2"] {--num-degree-pos: 60deg;} +.wall-clock-nums [num="2.5"] {--num-degree-pos: 75deg;} +.wall-clock-nums [num="3"] {--num-degree-pos: 90deg;} +.wall-clock-nums [num="3.5"] {--num-degree-pos: 105deg;} +.wall-clock-nums [num="4"] {--num-degree-pos: 120deg;} +.wall-clock-nums [num="4.5"] {--num-degree-pos: 135deg;} +.wall-clock-nums [num="5"] {--num-degree-pos: 150deg;} +.wall-clock-nums [num="5.5"] {--num-degree-pos: 165deg;} +.wall-clock-nums [num="6"] {--num-degree-pos: 180deg;} +.wall-clock-nums [num="6.5"] {--num-degree-pos: 195deg;} +.wall-clock-nums [num="7"] {--num-degree-pos: 210deg;} +.wall-clock-nums [num="7.5"] {--num-degree-pos: 225deg;} +.wall-clock-nums [num="8"] {--num-degree-pos: 240deg;} +.wall-clock-nums [num="8.5"] {--num-degree-pos: 255deg;} +.wall-clock-nums [num="9"] {--num-degree-pos: 270deg;} +.wall-clock-nums [num="9.5"] {--num-degree-pos: 285deg;} +.wall-clock-nums [num="10"] {--num-degree-pos: 300deg;} +.wall-clock-nums [num="10.5"] {--num-degree-pos: 315deg;} +.wall-clock-nums [num="11"] {--num-degree-pos: 330deg;} +.wall-clock-nums [num="11.5"] {--num-degree-pos: 345deg;} + +/* Clock hands */ +.wall-clock-hands, +.wall-clock-hands > *, +.wall-clock-hands > *::before { + position: absolute; + box-shadow: 0 0 var(--clock-border-width) var(--color-shadow); +} +.wall-clock-hands > * { + --hand-rotate-deg-func: 6deg; /* for second */ + transform : rotate(calc(var(--hand-rotate-deg-func) * var(--time))); +} + +.wall-clock-hands__hour::before { + content: ''; + height: calc(0.3 * var(--clock-size)); + width: calc(0.75 * var(--clock-hand-width)); + background-color: var(--text-color); + border-radius: var(--clock-hand-width); + transform: translate(-50%, -100%); +} +.wall-clock-hands__minute::before { + content: ''; + height: calc(0.4 * var(--clock-size)); + width: calc(0.5 * var(--clock-hand-width)); + background-color: var(--text-color); + border-radius: var(--clock-hand-width); + transform: translate(-50%, -100%); +} +.wall-clock-hands__second::before { + content: ''; + height: calc(0.5 * var(--clock-size)); + width: calc(0.25 * var(--clock-hand-width)); + background-color: var(--clock-hand-second-color); + border-radius: var(--clock-hand-width); + transform: translate(-50%, calc(-0.43 * var(--clock-size))); +} +.wall-clock-hands__hour { + --hand-rotate-deg-func: calc(6deg / 60 / 12); +} +.wall-clock-hands__minute { + --hand-rotate-deg-func: calc(6deg / 60); +} +.wall-clock-hands__second { + --hand-rotate-deg-func: 6deg; +} + +/* Animation */ +.wall-clock.animate .wall-clock-hands > * { + animation: clock-time calc(1s * (12 * 60 * 60)) linear infinite; +} +@keyframes clock-time { + to { + transform : rotate(calc(var(--hand-rotate-deg-func) * (var(--time) + (12 * 60 * 60)))); + } +} \ No newline at end of file diff --git a/src/apps-top/wall-clock/utils.js b/src/apps-top/wall-clock/utils.js new file mode 100644 index 0000000..57d94e3 --- /dev/null +++ b/src/apps-top/wall-clock/utils.js @@ -0,0 +1,11 @@ +/** + * Get time now in seconds, time starts from 00:00 am with 12 hours format + */ +export const getTimeNowInSeconds = () => { + const date = new Date(); + const hours = (date.getHours() % 12) * 60 * 60; + const minutes = date.getMinutes() * 60; + const seconds = date.getSeconds(); + + return hours + minutes + seconds; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -}