Final Checkmate WebApp

Author: sammy1997

CheckMate2017-master/checkmate2017/db.sqlite3

@@ -3,9 +3,9 @@
 body{
 	overflow:hidden;
 	/*background-color:#fcfcfc;*/
-	background: url("../img/back.jpg");
+	background-color: #009688;
 	margin:0;
-	background-size: cover;
+	/*background-size: cover;*/
 	padding:0;
 }
 
@@ -27,6 +27,11 @@ body{
 	height:600px;
 	left:-461px;
 	top:-300px;
+	/*background-color: #009688;*/
+}
+
+.page-wrapper > div{
+	/*background: #009688 !important;*/
 }
 
 .flipbook-viewport .page{
@@ -37,13 +42,13 @@ body{
 	background-size:100% 100%;
 }
 
-.flipbook .page{
+/*.flipbook .page{
 	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
 	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
 	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
 	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
 	box-shadow:0 0 20px rgba(0,0,0,0.2);
-}
+}*/
 
 .flipbook-viewport .page img{
 	-webkit-touch-callout: none;
@@ -61,9 +66,9 @@ body{
 	-o-transition: -webkit-box-shadow 0.5s;
 	-ms-transition: -ms-box-shadow 0.5s;
 
-	-webkit-box-shadow:0 0 20px #ccc;
+	/*-webkit-box-shadow:0 0 20px #ccc;
 	-moz-box-shadow:0 0 20px #ccc;
 	-o-box-shadow:0 0 20px #ccc;
 	-ms-box-shadow:0 0 20px #ccc;
-	box-shadow:0 0 20px #ccc;
+	box-shadow:0 0 20px #ccc;*/
 }

CheckMate2017-master/checkmate2017/mainapp/static/mainapp/css/basic.css

@@ -19,6 +19,9 @@ body{
   height: 100vh;
   overflow: hidden;
   background-color: #5BF3E5;
+  font-family: montserrat, arial,verdana;
+  font-size: 22px;
+  line-height: 24px;
 }
 #footer{
   width: 100%;
@@ -27,7 +30,7 @@ body{
   top: 70%;
   z-index: 0;
   background-color: #36E9D9;
-}
+  }/*
 .card{
   top: 26%;
   z-index: 10;
@@ -72,8 +75,8 @@ body{
   width: 100%;
   top: 50%;
   background-color: #fff;
-}
-
+}*/
+/*
 .bottom a{
   font-family: courier, verdana;
   position: absolute;
@@ -82,7 +85,7 @@ body{
   font-size: 25px;
   width: auto;
   height: auto;
-  /*font-weight: bold;*/
+  font-weight: bold;
   border-radius: 20px;
   border: 2px solid #DAAB1A;
   text-decoration: none;
@@ -91,4 +94,60 @@ body{
 }
 .bottom a:hover{
   background-color:#9934CA;
+}*/
+
+#wrapper{
+  height: 100vh;
+  width: 100vw;
+  /*background: #fff;*/
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+/*#wrapper *{
+  border: 1px solid #000;
+}*/
+
+#wrapper .main{
+  width: 320px;
+  height: 415px;
+  background: url('../img/congratulations.png') 0 0 no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+#wrapper .box{
+  width: 150px;
+  height: 60px;
+  position: absolute;
+  border-radius: 6px;
+  text-align: center;
+}
+
+
+#wrapper .box:nth-of-type(1){
+  top: 170px;
+  left: 90px;
+  line-height: 60px;
+  margin-top: 5px;
+  font-size: 20px;
+  color: #dfb220;
+}
+
+#wrapper .box:nth-of-type(2){
+  top: 330px;
+  left: 90px;
+  background: #f00;
+  color: #fff;
+  line-height: 60px;
+}
+
+#wrapper .box:nth-of-type(2) a{
+  text-decoration: none;
+  height: 60px;
+  width: 150px;
+  color: #fff;
 }

CheckMate2017-master/checkmate2017/mainapp/static/mainapp/css/congrats.css

@@ -141,14 +141,15 @@ body{
 
 #canvas{
 	padding: 0;
-	background: #fff;
+	/*background: #fff;*/
 	width: 50vw;
 	height: 60vh;
 	border-radius: 10px;
 	text-align: center;
-	background: #49C2B8;
+	/*background: #49C2B8;*/
+	background: rgba(0, 0 , 0, 0.7);
 	font-family: courier,verdana;
-	color: #000;
+	color: #fff;
 
 }
 
@@ -168,10 +169,15 @@ body{
 	height: 45vh;
 	border-radius: 10px;
 	box-shadow: inset 0px 2px 10px #777;
-	background: #eee;
+	background: rgba(255, 255, 255, .7);
 	transition: all .5s linear;
 }
 
+#canvas img{
+	height: inherit;
+	width: auto;
+}
+
 #canvas li:hover{
 	background: #fff;
 	box-shadow: inset 0 1px 1px #777;
@@ -237,7 +243,7 @@ body{
 
 }
 
-#help_screen{
+#help_screen, #quit_alert{
 	position: absolute;
 	width: 100vw;
 	top: 0;
@@ -320,7 +326,7 @@ body{
 	text-align: center;
 	color: #000;
 	font-size: 12px;
-	background: rgba(255, 255, 255, 0.6);
+	background: rgba(255, 255, 255, 0.8);
 	padding: 12px;
 	border-radius: 15px;
 }
@@ -338,3 +344,27 @@ table {
 th, td {
     padding: 3px;
 }
+
+#quit_alert nav{
+	display: flex;
+	justify-content: space-around;
+	width: 90%;
+	padding: 30px;
+}
+
+#quit_alert a{
+	color: #000;
+	text-decoration: none;
+	width: 70px;
+	height: 30px;
+	line-height: 30px;
+	background: rgba(255, 255, 255, 0.9);
+	padding: 10px;
+	border-radius: 6px;
+	cursor: pointer;
+}
+
+#quit_alert li{
+	list-style: none;
+
+}

CheckMate2017-master/checkmate2017/mainapp/static/mainapp/css/game.css

@@ -16,15 +16,17 @@
 	align-items: center;
 	-webkit-justify-content: center;
 	        justify-content: center;
+					overflow: scroll;
+					padding: 50px 0;
+		box-sizing: border-box;
 }
 
 #backdrop .lightbox{
 	width: 70vw;
-	height: 70vh;
 	background: #49C2B8;
 	overflow: hidden;
 	border-radius: 15px;
-
+	margin: auto;
 }
 
 #backdrop header{
@@ -77,9 +79,9 @@
 	border-radius: 6px;
 	padding: 30px;
 	width: 91%;
-	overflow-y: scroll;
+	/*overflow-y: scroll;*/
 	overflow-x: hidden;
-	height: 35vh;
+	height: 100%;
 	background-color: #FFFFFF;
 }
 .extras{
@@ -107,3 +109,17 @@
 #continue{
 	padding: 8px;
 }
+
+#msg_box{
+	position: absolute;
+	bottom: 0px;
+	left: calc(50vw - 150px);
+	width: 300px;
+	height: 70px;
+	background: rgba(0,0,0,0.8);
+	border-radius: 6px;
+	color: #fff;
+	display: none;
+	line-height: 70px;
+	text-align: center;
+}

CheckMate2017-master/checkmate2017/mainapp/static/mainapp/css/lightbox.css

@@ -370,3 +370,18 @@ a {
     }
   }
 }
+
+#msg_box{
+	position: absolute;
+	bottom: 0px;
+	left: calc(50vw - 150px);
+	width: 300px;
+
+	background: rgba(0,0,0,0.8);
+	border-radius: 6px;
+	color: #fff;
+	display: none;
+	line-height: 26px;
+  padding: 5px 0;
+	text-align: center;
+}

CheckMate2017-master/checkmate2017/mainapp/static/mainapp/css/login.css

@@ -0,0 +1,5 @@
+@font-face {
+  font-family: 'montserrat';
+  src: url('Montserrat-Light.ttf'); /* IE9 Compat Modes */
+
+}