diff --git a/index.9eb6bb56.css b/index.9eb6bb56.css new file mode 100644 index 000000000..e3eec0538 --- /dev/null +++ b/index.9eb6bb56.css @@ -0,0 +1,2 @@ +body{justify-content:center;align-items:center;height:100vh;margin:0;display:flex}.stopwatch{border:1vmin dotted #000;border-radius:50%;width:80vmin;height:80vmin;position:relative}.stopwatch__minutes-hand{transform-origin:bottom;background-color:#0700ff;width:3vmin;height:20vmin;animation:3600s steps(60,end) infinite rotate;position:absolute;top:20vmin;left:48.2%}.stopwatch__seconds-hand{transform-origin:bottom;background-color:#2c8000;width:1.5vmin;height:38vmin;animation:60s linear infinite rotate;position:absolute;top:2vmin;left:49%}.stopwatch__center{background-color:#f6a603;border-radius:50%;width:5vmin;height:5vmin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stopwatch--speed-up .stopwatch__minutes-hand{animation:600s steps(60,end) infinite rotate}.stopwatch--speed-up .stopwatch__seconds-hand{animation:10s linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}} +/*# sourceMappingURL=index.9eb6bb56.css.map */ diff --git a/index.9eb6bb56.css.map b/index.9eb6bb56.css.map new file mode 100644 index 000000000..1c4c4029c --- /dev/null +++ b/index.9eb6bb56.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,kFCAA,mGAOE,0LAYA,gLAWA,yJAaI,2FAKA,mFAON","sources":["index.9eb6bb56.css","src/styles/null.scss","src/styles/stop-watch.scss"],"sourcesContent":["body {\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n display: flex;\n}\n\n.stopwatch {\n border: 1vmin dotted #000;\n border-radius: 50%;\n width: 80vmin;\n height: 80vmin;\n position: relative;\n}\n\n.stopwatch__minutes-hand {\n transform-origin: bottom;\n background-color: #0700ff;\n width: 3vmin;\n height: 20vmin;\n animation: 3600s steps(60, end) infinite rotate;\n position: absolute;\n top: 20vmin;\n left: 48.2%;\n}\n\n.stopwatch__seconds-hand {\n transform-origin: bottom;\n background-color: #2c8000;\n width: 1.5vmin;\n height: 38vmin;\n animation: 60s linear infinite rotate;\n position: absolute;\n top: 2vmin;\n left: 49%;\n}\n\n.stopwatch__center {\n background-color: #f6a603;\n border-radius: 50%;\n width: 5vmin;\n height: 5vmin;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.stopwatch--speed-up .stopwatch__minutes-hand {\n animation: 600s steps(60, end) infinite rotate;\n}\n\n.stopwatch--speed-up .stopwatch__seconds-hand {\n animation: 10s linear infinite rotate;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n/*# sourceMappingURL=index.9eb6bb56.css.map */\n","body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n",".stopwatch {\n height: 80vmin;\n width: 80vmin;\n border: 1vmin dotted $black;\n border-radius: 50%;\n position: relative;\n\n &__minutes-hand {\n height: 20vmin;\n width: 3vmin;\n background-color: $blue;\n position: absolute;\n top: 20vmin;\n left: 48.2%;\n transform-origin: bottom;\n animation: rotate 3600s infinite linear;\n animation-timing-function: steps(60, end);\n }\n\n &__seconds-hand {\n height: 38vmin;\n width: 1.5vmin;\n background-color: $green;\n position: absolute;\n top: 2vmin;\n left: 49%;\n transform-origin: bottom;\n animation: rotate 60s infinite linear;\n }\n\n &__center {\n width: 5vmin;\n height: 5vmin;\n border-radius: 50%;\n background-color: $orange;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &--speed-up {\n .stopwatch {\n &__minutes-hand {\n animation: rotate 600s infinite linear;\n animation-timing-function: steps(60, end);\n }\n\n &__seconds-hand {\n animation: rotate 10s infinite linear;\n }\n }\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"],"names":[],"version":3,"file":"index.9eb6bb56.css.map"} \ No newline at end of file diff --git a/index.e378193d.css b/index.e378193d.css new file mode 100644 index 000000000..43ee79777 --- /dev/null +++ b/index.e378193d.css @@ -0,0 +1,67 @@ +body { + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + display: flex; +} + +.stopwatch { + border: 1vmin dotted #000; + border-radius: 50%; + width: 80vmin; + height: 80vmin; + position: relative; +} + +.stopwatch__minutes-hand { + transform-origin: bottom; + background-color: #0700ff; + width: 3vmin; + height: 20vmin; + animation: 3600s steps(60, end) infinite rotate; + position: absolute; + top: 20vmin; + left: 48.2%; +} + +.stopwatch__seconds-hand { + transform-origin: bottom; + background-color: #2c8000; + width: 1.5vmin; + height: 38vmin; + animation: 60s linear infinite rotate; + position: absolute; + top: 2vmin; + left: 49%; +} + +.stopwatch__center { + background-color: #f6a603; + border-radius: 50%; + width: 5vmin; + height: 5vmin; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.stopwatch--speed-up .stopwatch__minutes-hand { + animation: 600s steps(60, end) infinite rotate; +} + +.stopwatch--speed-up .stopwatch__seconds-hand { + animation: 10s linear infinite rotate; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} +/*# sourceMappingURL=index.e378193d.css.map */ diff --git a/index.e378193d.css.map b/index.e378193d.css.map new file mode 100644 index 000000000..62fd1339b --- /dev/null +++ b/index.e378193d.css.map @@ -0,0 +1 @@ +{"mappings":"AAAA;;;;;;;;ACAA;;;;;;;;AAOE;;;;;;;;;;;AAYA;;;;;;;;;;;AAWA;;;;;;;;;;;AAaI;;;;AAKA;;;;AAON","sources":["src/styles/null.scss","src/styles/stop-watch.scss"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.e378193d.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..a76d9a8e4 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +