Congrates

public/css/congrate.css

@@ -0,0 +1,91 @@
+@import url(https://fonts.googleapis.com/css?family=Share+Tech);
+body{
+  direction: rtl;
+  margin: auto;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  background-color: grey;
+}
+
+@keyframes pop {
+	0% {
+		height: 0%;
+	}
+	50% {
+		height: 0%;
+	}
+	100% {
+		height: 100%;
+	}
+}
+
+@keyframes show-text {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.pop-up {
+	animation: pop 0.3s ease 1s;
+	animation-iteration-count: 1;
+	animation-fill-mode: forwards;
+	background-color: rgba(0, 0, 0, 0.8);
+	display: flex;
+	justify-content: center;
+	height: 0;
+	position: fixed;
+	overflow: hidden;
+	width: 100%;
+	z-index: 30;
+	.content {
+		align-self: center;
+		background-color: white;
+		padding: 100px;
+		width: 500px;
+
+	}
+}
+
+
+
+.congrate {
+    width: 500px;
+    height: 500px;
+    background-color: white;
+    border-radius: 40px;
+    border-style: solid;
+    border-color: #6eb120;
+    border-width: thick;
+
+  }
+
+.exit{
+  height: 40px;
+  width: 40px;
+  padding: 20px;;
+}
+.gify{
+  display: flex;
+  justify-content: center;
+}
+.buttons{
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+}
+.text{
+  display: flex;
+  justify-content: center;
+}
+.message{
+  text-align: center;
+  font-family:
+  color: #6eb120;
+}

src/controllers/congrate.js

@@ -0,0 +1,3 @@
+exports.get = (req, res) => {
+  res.render('congrate', { congrate: true });
+};

src/controllers/index.js

@@ -4,10 +4,17 @@ const router = express.Router();
 const home = require('./home');
 const game = require('./game');
 const tryAgain = require('./tryAgain');
+const levels = require('./levels');
+const congrate = require('./congrate');
 const contact = require('./contact');
+const about = require('./about');
+
 
 module.exports = router
   .get('/', home.get)
   .get('/game', game.get)
   .get('/tryAgain', tryAgain.get)
-  .get('/contact', contact.get);
+  .get('/congrate', congrate.get)
+  .get('/contact', contact.get)
+  .get('/levels', levels.get)
+  .get('/about', about.get);

src/views/congrate.hbs

@@ -0,0 +1,31 @@
+<div class="pop-up">
+  <div class="content">
+
+    <div class="congrate">
+      <div class="congrate-text">
+        <a href="#">
+      <img class= "exit" src="images/exit.png" alt="Exit!">
+    </a>
+      </div>
+      <div class="text">
+        <h1 class="message">  رائـــع لقد فــزت!!</h1>
+      </div>
+
+      <div class="gify">
+        <img src=" images/congrate.gif" alt="congrate"> </div>
+      <div class="buttons">
+        <a href="#">
+      <img class= "exit" src="images/next.ico" alt="next!">
+    </a>
+        <a href="#">
+    <img class= "exit" src="images/home.ico" alt="home!">
+    </a>
+        <a href="#">
+    <img class= "exit" src="images/screen.png" alt="screen!">
+    </a>
+      </div>
+
+    </div>
+
+  </div>
+</div>