Merge: 메인으로 머지

frontend/static/css/2fa.css

@@ -27,14 +27,13 @@
   word-break: break-all;
   align-items: center;
   justify-content: center;
-  margin-bottom: 1rem;
+  /* margin-bottom: 1rem; */
   gap: 1rem;
   color: var(--profile-color);
   padding: 1rem;
 }
 
 .fa_modal h2 {
-  /* font-size: calc(2vw + 2vh); */
   font-size: calc(1.5vw + 1.5vh + 0.5vmin);
   color: var(--item-color);
   white-space: normal;
@@ -44,8 +43,16 @@
 }
 
 .fa_modal h4 {
+  /* padding: 0 4rem; */
   font-size: calc(0.5vw + 1vh + 0.5vmin);
   font-weight: lighter;
+  text-align: left;
+  margin: 0;
+}
+
+.fa_modal h5 {
+  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
+  font-weight: lighter;
 }
 
 .email_input {
@@ -59,16 +66,16 @@
 }
 
 .fa_code_input {
-  width: 58%;
-  height: 7vh;
+  width: 2em;
+  height: auto;
   text-align: center;
   font-size: calc(1vw + 1vh + 0.5vmin);
   border-radius: 7px;
   background-color: black;
   color: white;
 }
 
-#checkBtn {
+/* #checkBtn {
   position: relative;
   top: -6px;
   border: 0;
@@ -92,9 +99,21 @@
     0 8px 8px 10px rgba(5, 5, 5, 0.5);
   background-color: var(--profile-background);
   transition: filter 0.3s ease;
+} */
+
+#codeVerifyBtn {
+  width: 100%;
+  height: 4vh;
+  color: var(--black-color);
+  background-color: var(--profile-background);
+  padding: 0.2rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(1vw + 0.5vh + 0.5vmin);
 }
 
-#sendBtn {
+/* #sendBtn {
   top: -6px;
   border: 0;
   transition: all 40ms linear;
@@ -124,6 +143,51 @@
   color: var(--black-color);
   box-shadow: 0 0 0 1px #c4b224 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
   background-color: var(--profile-background);
+} */
+
+#user_email {
+  font-size: calc(0.5vw + 1vh + 0.5vmin);
+  margin: 0;
+}
+
+#timer {
+  color: var(--profile-color);
+  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
+  font-weight: lighter;
+  margin: 0;
+  padding-bottom: 1rem;
+}
+
+.timer_container {
+  text-align: center;
+}
+
+.fa-paper-plane {
+  margin-right: 0.4rem;
+}
+
+#emailSendBtn {
+  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
+  color: var(--profile-color);
+  background-color: var(--disabled-background-color);
+  padding: 0.2rem 0.8rem;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  text-align: center;
+  margin: 0;
+}
+
+#emailSendBtnBox {
+  padding-bottom: 0.5rem;
+}
+
+.email_container_flex {
+  display: flex;
+  flex-direction: row;
+  gap: 0.7rem;
+  align-items: center;
+  justify-content: center;
 }
 
 .fa_modal button:hover {
@@ -135,8 +199,14 @@
   width: 100%;
   justify-content: center;
   gap: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
+}
+
+.fa_code_container_box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .fa_code_input:focus {
@@ -211,7 +281,7 @@
 
 #dropdown_2fa {
   position: absolute;
-  left: 80%;
+  left: 70%;
   top: 10%;
   z-index: 1001;
-}
+}

frontend/static/css/game.css

@@ -1,7 +1,8 @@
 canvas {
   position: absolute;
-  top: 10%;
-  left: 25%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .win {
@@ -12,15 +13,11 @@ canvas {
 #scoreBoard {
   text-align: center;
   display: flex;
-  position: absolute;
   flex-direction: column;
+  justify-content: space-between;
   color: white;
-  justify-content: center;
   left: calc(25% + 50% + 20px);
   font-size: calc(1em + 1vw);
-  transform: translateX(0);
-  gap: 50%;
-  height: 100%;
 }
 
 .remote_buttonContainer {
@@ -30,10 +27,9 @@ canvas {
   align-items: center;
   gap: 10px;
   position: absolute;
-  top: 35%;
-  left: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
   white-space: nowrap;
 }
 

frontend/static/css/play.css

@@ -149,13 +149,13 @@
   filter: brightness(90%);
 }
 
-[data-toggle="tooltip"] {
+[data-toggle='tooltip'] {
   position: relative;
   display: inline-block;
 }
 
-[data-toggle="tooltip"]::before {
-  content: "";
+[data-toggle='tooltip']::before {
+  content: '';
   position: absolute;
   top: -0.3rem;
   left: 50%;
@@ -167,13 +167,13 @@
   opacity: 0;
 }
 
-[data-placement="bottom"]::before {
+[data-placement='bottom']::before {
   top: 100%;
   margin-top: 0.5rem;
   transform: translateX(-50%) translatey(-100%) rotate(-180deg);
 }
 
-[data-toggle="tooltip"]::after {
+[data-toggle='tooltip']::after {
   content: attr(tooltip-title);
   position: absolute;
   left: 50%;
@@ -198,20 +198,20 @@
   transform: translateX(-50%) translateY(0%);
 }
 
-[data-toggle="tooltip"]:hover::after,
-[data-toggle="tooltip"]:hover::before {
-  opacity: 1
+[data-toggle='tooltip']:hover::after,
+[data-toggle='tooltip']:hover::before {
+  opacity: 1;
 }
 
-[data-toggle="tooltip"]:hover::after,
-[data-toggle="tooltip"]:hover::before,
+[data-toggle='tooltip']:hover::after,
+[data-toggle='tooltip']:hover::before,
 .show-tooltip::after,
 .show-tooltip::before {
   opacity: 1;
 }
 
-.no-tooltip[data-toggle="tooltip"]:hover::before,
-.no-tooltip[data-toggle="tooltip"]:hover::after {
+.no-tooltip[data-toggle='tooltip']:hover::before,
+.no-tooltip[data-toggle='tooltip']:hover::after {
   opacity: 0;
 }
 
@@ -440,4 +440,73 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
+
+#finalRoundContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 3em;
+  color: white;
+  z-index: 1000;
+}
+
+#finalRoundTop,
+#finalRoundBottom {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 5rem;
+  overflow: hidden;
+}
+
+#finalRoundTop {
+  top: 0;
+  background: rgba(0, 0, 0, 0.8);
+  clip-path: inset(0 0 50% 0);
+  animation: slideTop 1s forwards, fadeOut 1s 2s forwards;
+}
+
+#finalRoundBottom {
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  clip-path: inset(50% 0 0 0);
+  animation: slideBottom 1s forwards, fadeOut 1s 2s forwards;
+}
+
+@keyframes slideTop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(50%);
+  }
+}
+
+@keyframes slideBottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}