first commit

static/css/progress.css

@@ -0,0 +1,109 @@
+.container {
+  margin: 0;
+  margin: 20px;
+  border: solid 1px black;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 90vh;
+  border: solid 1px black;
+}
+
+.rightContainer {
+  border: solid 1px black;
+}
+
+.msg {
+  margin-top: 70px;
+  font-size: 45px;
+  font-weight: 700;
+}
+
+#finishAction {
+  margin-top: 20px;
+  width: 343px;
+  height: 74px;
+}
+
+#terminateAction {
+  margin-top: 25px;
+  width: 343px;
+  height: 74px;
+  background-color: rgb(252, 101, 101);
+}
+
+button {
+  margin: 0 20px;
+  margin-bottom: 10px;
+  padding: 10px 20px;
+  font-size: 38px;
+  font-weight: 700;
+  color: rgb(54, 54, 54);
+  background-color: #3396ff;
+  border: solid 2px black;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+p {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+span {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.rightContainer {
+  display: grid;
+  grid-template-rows: repeat(4, 60px);
+}
+
+.buttonBox {
+  display: flex;
+  height: 70px;
+}
+
+#exitAppButton {
+  width: 100%;
+  margin: 0;
+  height: 60px;
+  border-radius: 0px;
+  color: rgb(54, 54, 54);
+  background-color: rgb(252, 101, 101);
+  font-size: 22px;
+  border: solid 1px black;
+}
+
+.buttonBox button {
+  margin: 0;
+  height: 60px;
+  width: 16vw;
+  border-radius: 0px;
+  font-size: 22px;
+  border: solid 1px black;
+}
+
+#stackerStartButton,
+#upDownOnButton,
+#leftRightOnButton {
+  color: rgb(54, 54, 54);
+  background-color: rgb(61, 230, 69);
+}
+
+#stackerStopButton,
+#upDownOffButton,
+#leftRightOffButton {
+  color: rgb(54, 54, 54);
+  background-color: rgb(252, 169, 101);
+}