Initial timer commit

2026-03-13 23:27:09 +10:00
commit 3979a0f68e
7 changed files with 389 additions and 0 deletions
--- a/timer.css
+++ b/timer.css
@@ -0,0 +1,85 @@
+:root {
+  --break-color: #8CD5CA;
+  --focus-color: #EED59F;
+  --stage-color: var(--break-color);
+  --clip-path: none;
+}
+
+
+.timer-box{
+  height: 175px;
+  width: 397px;
+  padding: 5px;
+}
+
+.timer-bg {
+  height: 100%;
+  width: 100%;
+  height: 175px;
+  width: 397px;
+  position: absolute;
+  background-color: #1E202F;
+  border-radius: 40px;
+  outline-offset: -5px;
+  outline: dotted 10px #534F72;
+}
+.timer-bg:before {
+  content: "";
+  position: absolute;
+  height: 175px;
+  width: 397px;
+  border-radius: 40px;
+  outline-offset: -5px;
+  outline: dotted 10px var(--stage-color);
+  border-radius: 40px;
+  clip-path: var(--clip-path);
+}
+
+
+.timer-time {
+  font-size: 100px;
+  font-family: Inter;
+  font-weight: 400;
+  letter-spacing: 0%;
+  text-align: center;
+  color: var(--break-color);
+}
+
+.timer-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  width: 65%;
+  margin: auto;
+  margin-top: -2%;
+  color: #FFFFFF;
+}
+
+.timer-details-stage img {
+  height: 30px;
+  margin-right: 5%;
+}
+
+.timer-details-stage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.timer-details-stage-text {
+  font-size: 30px;
+  font-family: Inter;
+  font-weight: 400;
+  letter-spacing: 6px;
+  text-align: center;
+}
+
+.timer-details-block {
+  font-size: 30px;
+  font-family: Inter;
+  font-weight: 400;
+  letter-spacing: 0%;
+  text-align: center;
+}