diff --git a/challenge/game/index.html b/challenge/game/index.html index 4c64500..873ba03 100644 --- a/challenge/game/index.html +++ b/challenge/game/index.html @@ -1,7 +1,3 @@ - @@ -9,7 +5,8 @@ - + Brototype Game Development Challenge @@ -49,7 +46,7 @@

Create Your Own Games with Us Even if you don’t have coding skill and Jumpstart Your Career to a High Paying Job. -
+
@@ -69,15 +66,17 @@

Registration Form

- +
- +
+
@@ -244,15 +243,18 @@

Registration Form

- +
- +
+
+
@@ -372,15 +374,18 @@

Registration Form

- +
- +
+
+
@@ -452,7 +457,7 @@

Registration Form

- + + \ No newline at end of file diff --git a/challenge/game/registered/index.html b/challenge/game/registered/index.html new file mode 100644 index 0000000..f8d4ad0 --- /dev/null +++ b/challenge/game/registered/index.html @@ -0,0 +1,31 @@ + + + + + + + + Registered + + + + +
+ +
+
+
+
+
+

Well done!

+

You are one step away from joining Game development Learning club

+ +
+ + + + + + \ No newline at end of file diff --git a/challenge/game/registered/script.js b/challenge/game/registered/script.js new file mode 100644 index 0000000..2737221 --- /dev/null +++ b/challenge/game/registered/script.js @@ -0,0 +1,68 @@ +const Confettiful = function (el) { + this.el = el; + this.containerEl = null; + + this.confettiFrequency = 3; + this.confettiColors = ["#EF2964", "#00C09D", "#2D87B0", "#48485E", "#EFFF1D"]; + this.confettiAnimations = ["slow", "medium", "fast"]; + + this._setupElements(); + this._renderConfetti(); +}; + +Confettiful.prototype._setupElements = function () { + const containerEl = document.createElement("div"); + const elPosition = this.el.style.position; + + if (elPosition !== "relative" || elPosition !== "absolute") { + this.el.style.position = "relative"; + } + + containerEl.classList.add("confetti-container"); + + this.el.appendChild(containerEl); + + this.containerEl = containerEl; +}; + +Confettiful.prototype._renderConfetti = function () { + this.confettiInterval = setInterval( + () => { + const confettiEl = document.createElement("div"); + const confettiSize = Math.floor(Math.random() * 3) + 7 + "px"; + const confettiBackground = + this.confettiColors[ + Math.floor(Math.random() * this.confettiColors.length) + ]; + const confettiLeft = + Math.floor(Math.random() * this.el.offsetWidth) + "px"; + const confettiAnimation = + this.confettiAnimations[ + Math.floor(Math.random() * this.confettiAnimations.length) + ]; + + confettiEl.classList.add( + "confetti", + "confetti--animation-" + confettiAnimation + ); + confettiEl.style.left = confettiLeft; + confettiEl.style.width = confettiSize; + confettiEl.style.height = confettiSize; + confettiEl.style.backgroundColor = confettiBackground; + + confettiEl.removeTimeout = setTimeout( + function () { + confettiEl.parentNode.removeChild(confettiEl); + }, + + 3000 + ); + + this.containerEl.appendChild(confettiEl); + }, + + 25 + ); +}; + +window.confettiful = new Confettiful(document.querySelector(".js-container")); diff --git a/challenge/game/registered/style.css b/challenge/game/registered/style.css new file mode 100644 index 0000000..fcb7e84 --- /dev/null +++ b/challenge/game/registered/style.css @@ -0,0 +1,240 @@ +html { + overflow: hidden; +} + +body { + font-family: "Roboto"; + overflow: hidden; + margin: 0; + padding: 0; +} + +@keyframes confetti-slow { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + + 100% { + transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); + } +} + +@keyframes confetti-medium { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + + 100% { + transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); + } +} + +@keyframes confetti-fast { + 0% { + transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); + } + + 100% { + transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); + } +} + +.container { + width: 100vw; + height: 100vh; + align-items: center; + background: #ffffff; + border: 1px solid white; + display: fixed; + top: 0px; +} + +.confetti-container { + perspective: 700px; + position: absolute; + overflow: hidden; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.confetti { + position: absolute; + z-index: 1; + top: -10px; + border-radius: 0%; +} + +.confetti--animation-slow { + animation: confetti-slow 2.25s linear 1 forwards; +} + +.confetti--animation-medium { + animation: confetti-medium 1.75s linear 1 forwards; +} + +.confetti--animation-fast { + animation: confetti-fast 1.25s linear 1 forwards; +} + +/* Checkmark */ +.checkmark-circle { + width: 150px; + height: 150px; + position: relative; + display: inline-block; + vertical-align: top; + margin-left: auto; + margin-right: auto; +} + +.checkmark-circle .background { + width: 150px; + height: 150px; + border-radius: 50%; + background: #2f3946; + position: absolute; +} + +.checkmark-circle .checkmark { + border-radius: 5px; +} + +.checkmark-circle .checkmark.draw:after { + -webkit-animation-delay: 100ms; + -moz-animation-delay: 100ms; + animation-delay: 100ms; + -webkit-animation-duration: 3s; + -moz-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-timing-function: ease; + -moz-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-name: checkmark; + -moz-animation-name: checkmark; + animation-name: checkmark; + -webkit-transform: scaleX(-1) rotate(135deg); + -moz-transform: scaleX(-1) rotate(135deg); + -ms-transform: scaleX(-1) rotate(135deg); + -o-transform: scaleX(-1) rotate(135deg); + transform: scaleX(-1) rotate(135deg); + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +.checkmark-circle .checkmark:after { + opacity: 1; + height: 75px; + width: 37.5px; + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + -o-transform-origin: left top; + transform-origin: left top; + border-right: 15px solid white; + border-top: 15px solid white; + border-radius: 2.5px !important; + content: ""; + left: 25px; + top: 75px; + position: absolute; +} + +@-webkit-keyframes checkmark { + 0% { + height: 0; + width: 0; + opacity: 1; + } + + 20% { + height: 0; + width: 37.5px; + opacity: 1; + } + + 40% { + height: 75px; + width: 37.5px; + opacity: 1; + } + + 100% { + height: 75px; + width: 37.5px; + opacity: 1; + } +} + +@-moz-keyframes checkmark { + 0% { + height: 0; + width: 0; + opacity: 1; + } + + 20% { + height: 0; + width: 37.5px; + opacity: 1; + } + + 40% { + height: 75px; + width: 37.5px; + opacity: 1; + } + + 100% { + height: 75px; + width: 37.5px; + opacity: 1; + } +} + +@keyframes checkmark { + 0% { + height: 0; + width: 0; + opacity: 1; + } + + 20% { + height: 0; + width: 37.5px; + opacity: 1; + } + + 40% { + height: 75px; + width: 37.5px; + opacity: 1; + } + + 100% { + height: 75px; + width: 37.5px; + opacity: 1; + } +} + +.submit-btn { + height: 45px; + width: 200px; + font-size: 15px; + background-color: #35404e; + border: 1px solid #50637c; + color: #fff; + border-radius: 5px; + box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2); + cursor: pointer; + transition: all 2s ease-out; + transition: all 0.2s ease-out; +} + +.submit-btn:hover { + background-color: #242c35; + transition: all 0.2s ease-out; +} \ No newline at end of file