add win message

HuiGong-dev · Jan 9, 2022 · dbc8c81 · dbc8c81
1 parent a05103d
commit dbc8c81
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -63,6 +63,24 @@
  </div>
  </div>
 
+ <div class="winning-message" id="winningMessage">
+ <div class="winning-message__cover"></div>
+ <div class="winning-message__banner">
+ <div class="winning-message__banner__who-wins">YOU WON!</div>
+ <div class="winning-message__banner__icon-and-text">
+ <div class="winning-message__banner__icon"></div>
+ <div class="winning-message__banner__text">TAKES THE ROUND</div>
+ </div>
+ <div class="winning-message__banner__button-wrapper">
+ <button class="winning-message__banner__quit">QUIT</button>
+ <button class="winning-message__banner__next-round">NEXT ROUND</button>
+ </div>
+
+ </div>
+
+ </div>
+
+
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
@@ -11,13 +11,20 @@
  --clr-yellow: #f2b237;
  --clr-shalowdark: #1a2b33;
  --clr-lightdark: #1f3540;
- --clr-grey: #a2aaad;
+ --clr-grey: #a8bfc9;
 
  --ff-primary: "Lato", sans-serif;
  --ff-secondary: "Source Code Pro", monospace;
  --ff-tertiary: "Source Sans Pro", sans-serif;
 
+ --fs-large: 3rem;
+ --fs-medium: 2rem;
+ --fs-small: 1rem;
+
  --bs: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+
+ --bs-grey: 0 5px 0px #87b6c9, 0 6px 3px rgba(0,0,0,0.23);
+ --bs-yellow: 0 5px 0px #f2a207, 0 6px 3px rgba(0, 0, 0, 0.23);
 
  --cell-size: 100px;
  --mark-size: calc(var(--cell-size) * 0.9);
@@ -36,7 +43,7 @@ body {
  justify-items: center;
  align-items: center;
 
- border: var(--clr-cyan) solid;
+
 }
 
 .container {
@@ -45,8 +52,6 @@ body {
  align-content: center;
  justify-items: center;
  align-items: center;
-
- /* border:var(--clr-cyan) solid; */
 }
 
 /* top status bar */
@@ -98,31 +103,6 @@ body {
  transform: rotate(-45deg);
 }
 
-/* draw logo o */
-/* .logo__o::before {
- background-color: var(--clr-yellow);
- height: calc(var(--status-bar-height) * 0.3);
- width: calc(var(--status-bar-height) * 0.3);
-}
-
-.logo__o::after {
- background-color: var(--clr-shalowdark);
- height: calc(var(--status-bar-height) * 0.14);
- width: calc(var(--status-bar-height) * 0.14);
-}
-.logo__o::before,
-.logo__o::after {
- content: '';
- position: absolute;
- border-radius: 50%;
-}
-
-.fa-xmark {
- color: var(--clr-cyan);
- font-size: calc(var(--status-bar-height) * 0.6);
- font-weight: bolder;
-} */
-
 .fa-circle-dot {
  color: var(--clr-yellow);
  font-size: calc(var(--status-bar-height) * 0.3);
@@ -146,7 +126,7 @@ body {
 
 .turn-indicator__text {
  padding-left: 0.5em;
- font-size: small;
+ font-size: var(--fs-small);
 }
 
 /* restart button */
@@ -285,3 +265,97 @@ body {
  position: absolute;
  border-radius: 50%;
 }
+
+/* winning message */
+.winning-message {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ justify-content: center;
+ align-items: center;
+ color: var(--clr-grey);
+ flex-direction: column;
+
+ }
+ .winning-message__cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: black;
+ opacity: 0.5;
+
+ }
+
+
+ .winning-message__banner {
+ background-color: var(--clr-lightdark);
+ row-gap: 1em;
+ width: 100%;
+ padding-top: 2em;
+ padding-bottom: 2em;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: var(--bs);
+ z-index: 1;
+ }
+
+ .winning-message__banner__who-wins{
+
+ text-align: center;
+ font-family: var(--ff-primary);
+ font-size: var(--fs-small);
+
+ }
+.winning-message__banner__icon-and-text{
+
+ text-align: center;
+ font-size: var(--fs-medium);
+ font-family: var(--ff-primary);
+
+}
+
+.winning-message__banner__quit{
+
+ margin-right: 0.5em;
+ font-family: var(--ff-primary);
+ font-size: var(--fs-small);
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+ width: max-content;
+ background-color: var(--clr-grey);
+ border: none;
+ border-radius: 6px;
+ box-shadow: var(--bs-grey);
+
+}
+
+.winning-message__banner__next-round{
+
+ font-family: var(--ff-primary);
+ font-size: var(--fs-small);
+ width: max-content;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+ width: max-content;
+ background-color: var(--clr-yellow);
+ border: none;
+ border-radius: 6px;
+ box-shadow: var(--bs-yellow);
+
+}
+
+ .winning-message.show {
+ display: flex;
+ }
+