+
+
+
+
+
+
+ ${CONFIGDATA.descriptionHeader} + +
`; + btnYes.innerHTML = ` ${CONFIGDATA.buttonYes}`; + btnNo.innerHTML = ` ${CONFIGDATA.buttonNo}`; + headerModar.innerHTML = `${CONFIGDATA.titleModar} `; + desccriptionModar.innerHTML = `${CONFIGDATA.descriptionModar}`; + + btnYes.onclick = () => { + popup.classList.add("show"); + }; + btnClose.onclick = () => { + popup.classList.remove("show"); + }; + + overlay.onclick = () => { + popup.classList.remove("show"); + }; + + btnNo.onclick = () => { + btnNo.style.top = 100 + "px"; + btnYes.style.top = 280 + "px"; + }; + + btnNo.onmouseover = (e) => { + var x = Math.random() * e.relatedTarget.clientHeight * 0.9; + var y = Math.random() * e.relatedTarget.clientWidth * 0.9; + btnNo.style.top = x + "px"; + btnNo.style.right = y + "px"; + }; +} + +start(); diff --git a/assets/js/setting.js b/assets/js/setting.js new file mode 100644 index 0000000..279f9f4 --- /dev/null +++ b/assets/js/setting.js @@ -0,0 +1,13 @@ +const settings = { + particles: { + length: 500, // maximum amount of particles + + duration: 2, // particle duration in sec + + velocity: 120, // particle velocity in pixels/sec + + effect: -0.75, // play with this for a nice effect + + size: 30, // particle size in pixels + }, +}; diff --git a/assets/musics/V1.wav b/assets/musics/V1.wav new file mode 100644 index 0000000..59ea2b6 Binary files /dev/null and b/assets/musics/V1.wav differ diff --git a/assets/responsive.css b/assets/responsive.css new file mode 100644 index 0000000..5db3554 --- /dev/null +++ b/assets/responsive.css @@ -0,0 +1,83 @@ +/* Tablet */ +@media (min-width: 740px) and (max-width: 1024px) { + .container { + overflow-x: hidden; + } + .header-name { + font-size: 3.4rem; + } + .content { + } + .music-control { + opacity: .1; + } + .btn--yes { + position: absolute; + top: 198px; + left: 60px; + } + .btn--no { + position: absolute; + top: 198px; + right: 70px; + } + .footer { + overflow: hidden; + /* height: 19rem; */ + padding: 10px 0; + } +} + +/* Mobile */ +@media (max-width: 739px) { + .header { + height: 192px; + } + .header-name { + font-size: 2.5rem; + line-height: 3rem; + } + .header-description { + font-size: 2rem; + line-height: 3.7rem; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + .content { + padding: 0; + } + .answer-question { + display: flex; + justify-content: center; + } + .btn--yes { + position: absolute; + width: var(--width-btn); + left: 30px; + top: 100px + } + .btn--no { + width: var(--width-btn); + position: absolute; + top: 280px; + left: 30px; + } + .message-modal { + width: 430px; + } + .heading-name { + padding: 0 12px; + } + .heading-msg { + padding: 20px 20px; + } + .footer-modal { + display: flex; + justify-content: center; + } + .footer { + height: 6rem; + padding: 0; + } +} \ No newline at end of file diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 0000000..fd68ceb --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,318 @@ +:root { + --white-color: #fff; + --black-color: #000; + --text-color: #cecdcd; + + --header-height: 124px; + --width-btn: 340px; +} + +/* reset css */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; + line-height: 1.6rem; + font-family: "Pacifico", cursive; + height: 100vh; +} + +html::-webkit-scrollbar { + width: 2px; + background-color: #ccc; +} + +body { + height: 100%; + cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym49.cur), auto !important; +} + +canvas { + position: absolute; + width: 100%; + height: 100%; +} + +.container { + height: 100%; + display: flex; + overflow: hidden; + flex-direction: column; + flex: 1; + background-image: linear-gradient(to right top, #000000, #000000); + animation: changeColor 4s ease-in-out; + -webkit-animation: changeColor 4s ease-in-out; + -moz-animation: changeColor 4s ease-in-out; + -o-animation: changeColor 4s ease-in-out; + animation-iteration-count: infinite; +} + +@keyframes changeColor { + from { + background-image: linear-gradient(to left, #000000, #000000); + } + + to { + background-image: linear-gradient(to top, #000000, #000000); + } +} + +/* Header */ +.header { + text-align: center; + z-index: 3; +} + +.header-name { + margin: 0; + font-size: 4rem; + color: var(--text-color); + padding: 20px 0; + line-height: 50px; +} + +.header-description { + font-size: 2rem; + color: var(--text-color); + padding: 10px 0; + font-weight: 400; +} + +/* Content */ +.content { + height: calc(100% - var(--header-height)); + padding: 20px 0; + display: flex; + justify-content: space-evenly; + flex-direction: column; + align-items: center; +} + +.music-control { + text-align: center; + outline: none; + display: none; +} + +.answer-question { + width: 100%; + display: flex; + flex: 1; + justify-content: space-evenly; + align-items: center; + position: relative; +} + +.btn { + width: 208px; + height: 50px; + border: none; + border-radius: 12px; + background-color: #DDA448; + font-size: 1.7rem; + padding: 0 16px; + color: var(--text-color); + outline: none; +} + +.btn--yes { + position: absolute; + top: 198px; + left: 420px; + cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym49.cur), auto !important; +} + +.btn--no { + position: absolute; + top: 198px; + right: 420px; + cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym49.cur), auto !important; +} + +.btn--yes:hover { + background-color: #e62b40; + color: var(--white-color); +} + +/* Footer */ +.footer { + position: relative; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: space-evenly; + text-align: center; + align-items: center; + background-color: rgba(204, 204, 204, 0.5); + /* overflow: hidden; */ + padding: 10px 0; +} + +.footer-lisence { + font-family: "Poppins", sans-serif; + font-size: 1.3rem; + font-weight: 300; + color: var(--text-color); + display: inline-block; + opacity: 0.9; +} + +.footer-link { + text-decoration: none; + color: var(--text-color); + display: inline-block; + font-weight: 300; + font-style: oblique; +} + +.footer-link:hover { + color: #5998C5; + cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym49.cur), auto !important; +} + +/* Modal */ +.modal { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + display: none; + z-index: 9999; +} + +.show { + display: flex; +} + +.modal__overlay { + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; +} + +.modal__body { + margin: auto; + position: relative; + z-index: 1; + top: -10%; +} + +.message-modal { + background-color: #419D78; + width: 540px; + border-radius: 5px; +} + +.heading-name { + padding: 18px 0 8px 16px; + font-size: 2.4rem; + font-weight: bolder; + color: var(--text-color); + line-height: 50px; + border-bottom: 1px solid var(--black-color); +} + +.heading-msg { + font-size: 1.4rem; + padding: 16px 16px; +} + +.message { + line-height: 2.5rem; + text-align: justify; + color: var(--text-color); +} + +.footer-modal { + display: flex; + justify-content: flex-end; + padding: 0 16px 16px 0; +} + +.btn-close { + width: 140px; + height: 40px; + font-size: 1.5rem; + border-radius: 12px; + cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym49.cur), auto !important; +} + +.btn-close:hover { + opacity: 0.8; + color: var(--white-color); +} + +.btn-icon { + margin-right: 8px; +} + +/* Preloader */ +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999999; + background-color: var(--white-color); + opacity: 1; +} + +.spinner { + position: absolute; + left: 50%; + /* centers the loading animation horizontally one the screen */ + top: 50%; + /* centers the loading animation vertically one the screen */ + width: 50px; + height: 30px; + text-align: center; + font-size: 10px; + margin-left: -25px; +} + +.spinner .dashed-loading { + position: relative; + height: 50px; +} + +.dashed-loading:after, +.dashed-loading:before { + content: ""; + position: absolute; + top: 0; + left: 0; + border-radius: 50%; + width: 50px; + height: 50px; +} + +.dashed-loading:before { + /* z-index: 5; */ + border: 3px dashed #5998C5; + border-left: 3px solid transparent; + border-bottom: 3px solid transparent; + -webkit-animation: dashed 1s linear infinite; + animation: dashed 1s linear infinite; +} + +.dashed-loading:after { + /* z-index: 10; */ + border: 3px solid #5998C5; + border-left: 3px solid transparent; + border-bottom: 3px solid transparent; + -webkit-animation: dashed 1s ease infinite; + animation: dashed 1s ease infinite; +} + +@keyframes dashed { + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8c0652c --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + +