From e1b8d0e6019f307d69fdcfe30cb90f4f70a545dc Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Fri, 26 Jun 2026 00:44:37 +0300 Subject: [PATCH 1/2] add solution --- src/index.html | 6 +++- src/styles/index.scss | 64 +++++++++++++++++++++++++++++++++++++++ src/styles/variables.scss | 14 +++++++++ 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 src/styles/variables.scss diff --git a/src/index.html b/src/index.html index 272a196488..61f10c2515 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,10 @@ /> -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..68e13d50a9 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,67 @@ +@import './variables'; + +@keyframes rotate-full { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + body { margin: 0; + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} + +.stopwatch { + display: flex; + justify-content: center; + align-items: center; + height: $watch-size; + width: $watch-size; + border-style: dotted; + border-width: $dot-size; + border-radius: 50%; + position: relative; + + &--speed-up { + --minute-duration: 10s; + } + + &__center { + height: $center-diametr; + width: $center-diametr; + background-color: $center-color; + border-radius: 50%; + z-index: 1; + top: 50%; + left: 50%; + } + + &__minutes-hand, + &__seconds-hand { + position: absolute; + bottom: 50%; + transform-origin: bottom; + } + + &__minutes-hand { + height: $minutes-length; + width: $minutes-width; + background-color: $minutes-color; + animation: rotate-full calc(var(--minute-duration) * 60) steps(60) infinite; + } + + &__seconds-hand { + height: $seconds-length; + width: $seconds-width; + background-color: $seconds-color; + animation: rotate-full var(--minute-duration) linear infinite; + } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..a47f3f0c8f --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,14 @@ +$watch-size: 80vmin; +$dot-size: 1vmin; +$minutes-length: 20vmin; +$minutes-width: 3vmin; +$minutes-color: #0700ff; +$seconds-length: 38vmin; +$seconds-width: 1.5vmin; +$seconds-color: #2c8000; +$center-diametr: 5vmin; +$center-color: #f6a603; + +:root { + --minute-duration: 60s; +} From a8a413aa09df7a15184ff173ae58fbadf212a2dc Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Fri, 26 Jun 2026 10:53:24 +0300 Subject: [PATCH 2/2] fix problems --- src/styles/index.scss | 3 +++ src/styles/variables.scss | 1 + 2 files changed, 4 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 68e13d50a9..ddb5bcd652 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -28,6 +28,7 @@ body { border-style: dotted; border-width: $dot-size; border-radius: 50%; + border-color: $dot-color; position: relative; &--speed-up { @@ -35,6 +36,7 @@ body { } &__center { + position: absolute; height: $center-diametr; width: $center-diametr; background-color: $center-color; @@ -42,6 +44,7 @@ body { z-index: 1; top: 50%; left: 50%; + transform: translate(-50%, -50%); } &__minutes-hand, diff --git a/src/styles/variables.scss b/src/styles/variables.scss index a47f3f0c8f..b619608eb7 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,5 +1,6 @@ $watch-size: 80vmin; $dot-size: 1vmin; +$dot-color: #000; $minutes-length: 20vmin; $minutes-width: 3vmin; $minutes-color: #0700ff;