diff --git a/.gitignore b/.gitignore index 2d1375e..7eb95db 100644 --- a/.gitignore +++ b/.gitignore @@ -127,4 +127,4 @@ dmypy.json # Pyre type checker .pyre/ -todo.md +todo.md \ No newline at end of file diff --git a/bare/common.css b/bare/common.css deleted file mode 100644 index f2c9d2b..0000000 --- a/bare/common.css +++ /dev/null @@ -1,24 +0,0 @@ -* { - padding: 0; - margin: 0; - background-color: #181c20; - color: white; - box-sizing: border-box; -} - -.main-container { - display: flex; - justify-content: space-around; - align-items: stretch; - background-color: black; - gap: 0.33333333vw; - height: 99.5vh; -} -.main-element { - display: inline-block; - height: 99.5vh; - width: 32vw; - text-align: center; - background-color: #181c20; - position: relative; -} diff --git a/bare/index.html b/bare/index.html deleted file mode 100644 index 8b906c3..0000000 --- a/bare/index.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - - - - Document - - -
-
- -
-
- - -
- Power - Battery -
-
-
-
- Manual - SA - - Manual - Angle View -
-
-

Angle Rotation

- - -
-
-
-

1

-
-
- -

57

-
-
-

2

-
-
- -

57

-
-
-

3

-
-
- -

57

-
-
-

4

-
-
- -

57

-
-
-

5

-
-
- -

57

-
-
-

6

-
-
- -

57

-
-
-

7

-
-
- -

57

-
-
-

8

-
-
- -

57

-
-
-

9

-
-
- -

57

-
-
-

10

-
-
- -

57

-
- -
-
-
- - diff --git a/bare/style.css b/bare/style.css deleted file mode 100644 index 35a1034..0000000 --- a/bare/style.css +++ /dev/null @@ -1,183 +0,0 @@ -.robotimg { - height: 99.5vh; - width: 32vw; -} -.btn-2 { - text-decoration: none; - background-color: #223344; - padding-top: 1vw; - padding-bottom: 1vw; - padding-left: 2.2vw; - padding-right: 2.2vw; -} -.button { - background-color: #223344; - border-color: #223344; -} - -.panel2-btns { - position: absolute; - bottom: 1vw; - left: 50%; - transform: translate(-50%, 0); - display: flex; - justify-content: space-evenly; - gap: 2vw; - text-align: center; -} -.dropdowns { - display: flex; - flex-direction: column; - align-items: center; - height: 99.5vh; - - justify-content: flex-start; - gap: 22vh; -} -.dropdown { - position: relative; - background-color: #223344; - width: 70%; - text-align: center; - height: 7vh; - display: flex; - flex-direction: row; - - justify-content: space-around; - align-items: center; -} -.d1 { - justify-self: flex-start; - margin-top: 2.5vh; -} -.dddown1 { - position: absolute; - display: flex; - flex-direction: column; - right: 4.8vw; - top: 9.65vh; - - background-color: #223344; -} -.dddown2 { - position: absolute; - display: flex; - flex-direction: column; - right: 4.8vw; - top: 38.6vh; - - background-color: #223344; -} -.dddown3 { - position: absolute; - display: flex; - flex-direction: column; - right: 4.8vw; - top: 67.55vh; - - background-color: #223344; -} -.delement { - background-color: #223344; - padding: 0.4vw 1vw; -} -.img-part { - background-color: #223344; - height: 5vh; -} -.inputbox { - width: 80px; -} - -.measure { - background-color: #fceaea; - color: black; - padding-left: 1vh; - padding-right: 1vh; - padding-top: 0.5vh; - padding-bottom: 3.5vh; - height: 3vh; -} -.units { - background-color: #fceaea; - color: black; - padding-left: 1vh; - padding-right: 1vh; - padding-top: 0.5vh; - padding-bottom: 3.5vh; - height: 3vh; -} - -.panel3-btns { - position: absolute; - bottom: 1vw; - left: 50%; - transform: translate(-50%, 0); - display: flex; - justify-content: space-evenly; - gap: 1.6vw; - text-align: center; -} -.btn-3 { - text-decoration: none; - background-color: #223344; - padding-top: 1vw; - padding-bottom: 1vw; - padding-left: 1vw; - padding-right: 1vw; -} -.angle-view { - width: 8vw; - background-color: #778899; -} - -.angle-rot-header { - margin-top: 10%; - color: white; - display: flex; - justify-content: space-around; - width: 24vw; - padding: 3vh 0; - margin-left: 4vw; - background-color: #223344; -} -.angle-rot { - background-color: #223344; -} - -.position-grid { - display: grid; - grid-template-columns: 1fr 2.5fr; - row-gap: 0.5vw; - column-gap: 1vw; - width: 12vw; - background-color: black; - padding: 0.3vw 5px; - font-size: 36px; - margin-left: 10vw; - margin-top: 2vw; -} -.pos-num { - display: flex; - justify-content: center; - align-items: center; - background-color: #223344; -} -.pos-angle-num, -.pos-img { - background-color: #223344; -} -.pos-angle { - display: flex; - justify-content: space-evenly; - align-items: center; - background-color: #223344; -} - -/* .img-dd:hover { -} */ - -a:link, -a:visited { - text-decoration: none; -} diff --git a/bare/Rectangle 27.png b/images/Rectangle 27.png similarity index 100% rename from bare/Rectangle 27.png rename to images/Rectangle 27.png diff --git a/bare/bat-img.png b/images/bat-img.png similarity index 100% rename from bare/bat-img.png rename to images/bat-img.png diff --git a/bare/drop-img.png b/images/drop-img.png similarity index 100% rename from bare/drop-img.png rename to images/drop-img.png diff --git a/bare/img-knee.png b/images/img-knee.png similarity index 100% rename from bare/img-knee.png rename to images/img-knee.png diff --git a/bare/robot.png b/images/robot.png similarity index 100% rename from bare/robot.png rename to images/robot.png diff --git a/static/src/main.css b/static/src/main.css index 9cdb88e..8ce4cd4 100644 --- a/static/src/main.css +++ b/static/src/main.css @@ -8,4 +8,214 @@ padding: 0; margin: 0; background-color: #181c20; + color: white; + box-sizing: border-box; +} +.robotimg { + height: 99.5vh; + width: 32vw; +} +.btn-2 { + text-decoration: none; + background-color: #223344; + padding-top: 1vw; + padding-bottom: 1vw; + padding-left: 2.2vw; + padding-right: 2.2vw; +} +.button { + background-color: #223344; + border-color: #223344; +} + +.panel2-btns { + position: absolute; + bottom: 1vw; + left: 50%; + transform: translate(-50%, 0); + display: flex; + justify-content: space-evenly; + gap: 2vw; + text-align: center; +} +.dropdowns { + display: flex; + flex-direction: column; + align-items: center; + height: 99.5vh; + + justify-content: flex-start; + gap: 22vh; +} +.dropdown { + position: relative; + background-color: #223344; + width: 70%; + text-align: center; + height: 7vh; + display: flex; + flex-direction: row; + + justify-content: space-around; + align-items: center; +} +.d1 { + justify-self: flex-start; + margin-top: 2.5vh; +} +.dddown1 { + position: absolute; + display: flex; + flex-direction: column; + right: 4.8vw; + top: 9.65vh; + + background-color: #223344; +} +.dddown2 { + position: absolute; + display: flex; + flex-direction: column; + right: 4.8vw; + top: 38.6vh; + + background-color: #223344; +} +.dddown3 { + position: absolute; + display: flex; + flex-direction: column; + right: 4.8vw; + top: 67.55vh; + + background-color: #223344; +} +.delement { + background-color: #223344; + padding: 0.4vw 1vw; +} +.img-part { + background-color: #223344; + height: 5vh; +} +.inputbox { + width: 80px; +} + +.measure { + background-color: #fceaea; + color: black; + padding-left: 1vh; + padding-right: 1vh; + padding-top: 0.5vh; + padding-bottom: 3.5vh; + height: 3vh; +} +.units { + background-color: #fceaea; + color: black; + padding-left: 1vh; + padding-right: 1vh; + padding-top: 0.5vh; + padding-bottom: 3.5vh; + height: 3vh; +} + +.panel3-btns { + position: absolute; + bottom: 1vw; + left: 50%; + transform: translate(-50%, 0); + display: flex; + justify-content: space-evenly; + gap: 1.6vw; + text-align: center; +} +.btn-3 { + text-decoration: none; + background-color: #223344; + padding-top: 1vw; + padding-bottom: 1vw; + padding-left: 1vw; + padding-right: 1vw; +} +.angle-view { + width: 8vw; + background-color: #778899; +} + +.angle-rot-header { + margin-top: 10%; + color: white; + display: flex; + justify-content: space-around; + width: 24vw; + padding: 3vh 0; + margin-left: 4vw; + background-color: #223344; +} +.angle-rot { + background-color: #223344; +} + +.position-grid { + display: grid; + grid-template-columns: 1fr 2.5fr; + row-gap: 0.5vw; + column-gap: 1vw; + width: 12vw; + background-color: black; + padding: 0.3vw 5px; + font-size: 36px; + margin-left: 10vw; + margin-top: 2vw; +} +.pos-num { + display: flex; + justify-content: center; + align-items: center; + background-color: #223344; +} +.pos-angle-num, +.pos-img { + background-color: #223344; +} +.pos-angle { + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #223344; +} + +/* .img-dd:hover { +} */ + +a:link, +a:visited { + text-decoration: none; +} + +* { + padding: 0; + margin: 0; + background-color: #181c20; + color: white; + box-sizing: border-box; +} + +.main-container { + display: flex; + justify-content: space-around; + align-items: stretch; + background-color: black; + gap: 0.33333333vw; + height: 99.5vh; +} +.main-element { + display: inline-block; + height: 99.5vh; + width: 32vw; + text-align: center; + background-color: #181c20; + position: relative; } diff --git a/templates/base.html b/templates/base.html index f896ec0..49d0fc6 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,5 +1,3 @@ - - @@ -11,9 +9,157 @@ {% endassets %} - Flask + htmlx + Tailwind CSS + Potentia Robotics GUI - - {% block content %} {% endblock content %} + +
+
+ +
+
+ + +
+ Power + Battery +
+
+
+
+ Manual + SA + + Manual + Angle View +
+
+

Angle Rotation

+ + +
+
+
+

1

+
+
+ +

57

+
+
+

2

+
+
+ +

57

+
+
+

3

+
+
+ +

57

+
+
+

4

+
+
+ +

57

+
+
+

5

+
+
+ +

57

+
+
+

6

+
+
+ +

57

+
+
+

7

+
+
+ +

57

+
+
+

8

+
+
+ +

57

+
+
+

9

+
+
+ +

57

+
+
+

10

+
+
+ +

57

+
+ +
+
+
diff --git a/templates/index.html b/templates/index.html index 9be70f1..2f69656 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,8 +1,3 @@ -{% extends "base.html" %} {% block content %} -
robot
-
-
- -{% endblock content %} +{% extends "base.html" %} {% block content %} {% endblock content %} diff --git a/templates/robot.png b/templates/robot.png deleted file mode 100644 index faec10b..0000000 Binary files a/templates/robot.png and /dev/null differ