first commit

static/css/oneLineProgress.css

@@ -0,0 +1,249 @@
+.container {
+  margin: 20px;
+  border: solid 1px black;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 2fr 1.5fr;
+}
+
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: solid 1px black;
+  min-height: 90vh;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+  max-width: 380px;
+  margin: 0 auto;
+  margin-top: 0px;
+}
+.gridItem {
+  width: 180px;
+  height: 120px;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  font-size: 45px;
+  font-weight: 600;
+}
+.gridItem.selected {
+  background-color: #34b800;
+  color: #fff;
+}
+.gridItem.disabled {
+  pointer-events: none;
+  opacity: 0.5; /* 비활성화 상태를 시각적으로 나타내기 위해 투명도를 줄입니다 */
+}
+
+.buttonContainer {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.buttonContainer button {
+  width: 330px;
+  height: 72px;
+  margin-top: 10px;
+}
+
+.buttonContainer button:disabled {
+  background-color: gray;
+  color: white;
+  cursor: not-allowed;
+}
+
+.rightContainer {
+  border: solid 1px black;
+  display: grid;
+  grid-template-rows: repeat(4, 60px);
+}
+
+#finishAction {
+  margin: 0;
+  width: 100%;
+  height: 70px;
+}
+
+#terminateAction {
+  margin: 0;
+  width: 100%;
+  height: 70px;
+  background-color: #ff3c00;
+}
+
+#currentLayerIndexDisplay {
+  font-weight: 600;
+  font-size: 23px;
+}
+
+button {
+  margin: 0 20px;
+  margin-bottom: 10px;
+  padding: 10px 20px;
+  font-size: 37px;
+  font-weight: 700;
+  color: rgb(54, 54, 54);
+  background-color: #3396ff;
+  border: solid 20x black;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#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 {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.buttonBox button {
+  margin: 0;
+  height: 60px;
+  width: 50%;
+  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);
+}
+
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: center;
+}
+
+.inputBox {
+  display: flex;
+}
+
+p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 35px;
+  margin-top: 10px;
+  padding: 10px;
+  font-size: 19px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+span {
+  font-size: 21px;
+  font-weight: 600;
+}
+
+#bookHeight {
+  width: 100px;
+  height: 35px;
+  margin-top: 10px;
+  padding: 10px;
+  font-size: 19px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+#bookHeight::placeholder {
+  color: #999;
+}
+
+#bookHeightTitle {
+  margin-top: 10px;
+  font-size: 19px;
+  font-weight: 600;
+}
+
+
+
+
+
+
+/* 팝업을 화면 중앙에 표시하기 위한 스타일 */
+#bookCountPopup {
+  display: none; /* 기본적으로 보이지 않음 */
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* 창을 중앙에 위치하게 함 */
+  width: 300px;
+  padding: 20px;
+  background-color: white;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  z-index: 1001;
+  text-align: center;
+}
+
+/* 배경을 어둡게 처리 */
+#popupOverlay {
+  display: none; /* 기본적으로 보이지 않음 */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+/* 제출 버튼 스타일 */
+#submitBookCount {
+  margin-top: 15px;
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#submitBookCount:hover {
+  background-color: #45a049;
+}
+
+/* 입력 필드 스타일 */
+#bookCountInput {
+  margin-top: 10px;
+  padding: 8px;
+  width: 80%;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}