From 256820bf3137ce5c3dfb383d4ba38521ce3fcefb Mon Sep 17 00:00:00 2001 From: Andy Hubert Date: Sat, 20 Jul 2024 17:45:52 +0000 Subject: [PATCH] dad: setup abi's html/css --- abi/bubble.svg | 5 +++ abi/index.html | 37 +++++++++++++++- abi/main.css | 112 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 abi/bubble.svg diff --git a/abi/bubble.svg b/abi/bubble.svg new file mode 100644 index 0000000..8303edf --- /dev/null +++ b/abi/bubble.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/abi/index.html b/abi/index.html index ccad602..ad49834 100644 --- a/abi/index.html +++ b/abi/index.html @@ -14,6 +14,41 @@ - Abi! + +
+ + + + + + +
+ +
+ +
15:00
+
+ +
+ +
+
Get ready...
+
+
+
+ + + +
+ +
+ +
Workout Log
+
+ + + +
+ diff --git a/abi/main.css b/abi/main.css index df7f341..81decc2 100644 --- a/abi/main.css +++ b/abi/main.css @@ -1,3 +1,113 @@ body { - font-size: 50px; + font-size: 20px; + margin: 0; + padding: 0; +} + +.screen { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 100vw; + height: 100vh; +} + +#screen-workout { + justify-content: center; +} + +.hide { + display: none; +} + +button { + padding: 30px; + margin: 5px; +} + +.main-button { + height: 100px; + width: 400px; + max-width: calc(100vw - 40px); +} + +#view-log { + height: 50px; +} + +#clock { + position: absolute; + top: 20px; + right: 20px; + border: 1px solid red; + color: black; + line-height: 50px; + padding: 0 20px; + border-radius: 5px; +} + +#comments { + position: absolute; + top: 90px; + right: 20px; + max-width: 150px; +} + +.workout-canvas { + position: relative; + align-self: center; + width: 300px; + height: 500px; + border-bottom: 1px solid black; + background: rgb(0 0 0/.05); +} + +.bubble { + position: absolute; + top: -40px; + left: 60px; + width: 250px; + z-index: 1; +} + +.bubble-text-container { + position: absolute; + top: 25px; + left: 90px; + width: 190px; + height: 124px; + z-index: 2; + display: flex; + justify-content: center; + align-items: center; +} + +#stick-figure { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +#cancel, #back { + position: absolute; + bottom: 20px; + left: 20px; +} + +.screen-heading { + font-size: 30px; + margin: 20px 0 10px; +} + +#stick-figure { + white-space: pre; + font-family: monospace; + font-size: 20px; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; } \ No newline at end of file