feat: complete quiz tasks
This commit is contained in:
Ayobami
@@ -16,7 +16,8 @@ body {
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Bradford LL";
|
||||
src: url("/fonts/BradfordLL-Regular.woff2") format("woff2"), url("/fonts/BradfordLL-Regular.woff") format("woff");
|
||||
src: url("/fonts/BradfordLL-Regular.woff2") format("woff2"),
|
||||
url("/fonts/BradfordLL-Regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -24,21 +25,24 @@ body {
|
||||
|
||||
@font-face {
|
||||
font-family: "Bradford LL";
|
||||
src: url("/fonts/BradfordLL-Italic.woff2") format("woff2"), url("/fonts/BradfordLL-Italic.woff") format("woff");
|
||||
src: url("/fonts/BradfordLL-Italic.woff2") format("woff2"),
|
||||
url("/fonts/BradfordLL-Italic.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Necto Mono";
|
||||
src: url("/fonts/Necto-Mono.woff2") format("woff2"), url("/fonts/Necto-Mono.woff") format("woff");
|
||||
src: url("/fonts/Necto-Mono.woff2") format("woff2"),
|
||||
url("/fonts/Necto-Mono.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "TT Nooks Script";
|
||||
src: url("/fonts/TTNooksScript-Bold.woff2") format("woff2"), url("/fonts/TTNooksScript-Bold.woff") format("woff");
|
||||
src: url("/fonts/TTNooksScript-Bold.woff2") format("woff2"),
|
||||
url("/fonts/TTNooksScript-Bold.woff") format("woff");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -843,6 +847,9 @@ input::-ms-input-placeholder {
|
||||
width: -moz-max-content;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid black;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
}
|
||||
#page4 .customImgRow img {
|
||||
width: 335px;
|
||||
@@ -1439,3 +1446,64 @@ img.image-missing {
|
||||
display: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
#resetQuizButton,
|
||||
#resumeButton {
|
||||
background: #737a73;
|
||||
color: #fff;
|
||||
font: 12px "Necto Mono";
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 32px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
outline: none;
|
||||
}
|
||||
#resetQuizButton:hover,
|
||||
#resumeButton:hover,
|
||||
#resetQuizButton:focus,
|
||||
#resumeButton:focus {
|
||||
background: #444242;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#questionNavBar .nav-btn {
|
||||
font: 12px "Necto Mono";
|
||||
border-radius: 4px !important;
|
||||
padding: 10px 16px !important;
|
||||
margin: 0 4px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#questionNavBar .nav-btn.answered {
|
||||
background: #43a047;
|
||||
color: #fff;
|
||||
border: 2px solid #388e3c;
|
||||
}
|
||||
#questionNavBar .nav-btn.current {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: 3px solid #1565c0;
|
||||
box-shadow: 0 0 8px 2px rgba(25, 118, 210, 0.15);
|
||||
z-index: 2;
|
||||
}
|
||||
#questionNavBar .nav-btn.unanswered {
|
||||
background: #ccc;
|
||||
color: #888;
|
||||
border: 2px solid #bbb;
|
||||
}
|
||||
#questionNavBar .nav-btn:hover,
|
||||
#questionNavBar .nav-btn:focus {
|
||||
filter: brightness(0.95);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
+926
-108
File diff suppressed because it is too large
Load Diff
+159
-25
@@ -23,10 +23,15 @@
|
||||
Let’s start our journey
|
||||
<span class="underlineSpan">just for you</span>.
|
||||
</h3>
|
||||
<p class="para">
|
||||
We are experts on skin and skincare actives..
|
||||
</p>
|
||||
<p class="para">We are experts on skin and skincare actives..</p>
|
||||
<button id="beginButton" class="beginButton">LET'S BEGIN!</button>
|
||||
<button
|
||||
id="resumeButton"
|
||||
class="resumeButton"
|
||||
style="display: none; margin-top: 1em"
|
||||
>
|
||||
RESUME QUIZ
|
||||
</button>
|
||||
</div>
|
||||
<div class="main-image-container">
|
||||
<img onerror="handleImageMissing(this)" />
|
||||
@@ -46,18 +51,52 @@
|
||||
<section id="page3">
|
||||
<div class="container">
|
||||
<div class="row headerRow">
|
||||
<div id="prevBtn" class="prevBtn nav-item left" onclick="nextQuestion(true)">
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"><img src="/image/left-arrow.png" /></span>
|
||||
<div
|
||||
id="prevBtn"
|
||||
class="prevBtn nav-item left"
|
||||
onclick="nextQuestion(true)"
|
||||
>
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
||||
><img src="/image/left-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
<div id="identity" class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="nextBtn" class="nextBtn nextBtnTop nav-item right" onclick="nextQuestion()">
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<div
|
||||
id="nextBtn"
|
||||
class="nextBtn nextBtnTop nav-item right"
|
||||
onclick="nextQuestion()"
|
||||
>
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
<button
|
||||
id="resetQuizButton"
|
||||
class="resetQuizButton"
|
||||
style="margin-left: 1em"
|
||||
>
|
||||
Reset Quiz
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="questionNavBar"
|
||||
class="question-nav-bar"
|
||||
style="
|
||||
position: static;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 0.5em 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
></div>
|
||||
<div class="row questionRow mtb" id="questionRow">
|
||||
<h1>
|
||||
<!-- dynamic data here -->
|
||||
@@ -80,7 +119,9 @@
|
||||
<div class="answerInner typeText">
|
||||
<input type="text" />
|
||||
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +130,9 @@
|
||||
<div class="answerInner typeNum">
|
||||
<input type="number" maxlength="4" minlength="4" />
|
||||
<div class="arrowAnswerBtn nextBtn" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,7 +155,14 @@
|
||||
<div class="sliderDiv">
|
||||
<div class="slidecontainer">
|
||||
<!-- value="1" -->
|
||||
<input type="range" min="0" max="100" class="slider" id="myRange" step="any" />
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
class="slider"
|
||||
id="myRange"
|
||||
step="any"
|
||||
/>
|
||||
</div>
|
||||
<div class="sliderRanges">
|
||||
<!-- dynamic data -->
|
||||
@@ -121,7 +171,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row answerRow typeSelection" id="typeSelection" data-type="7">
|
||||
<div
|
||||
class="row answerRow typeSelection"
|
||||
id="typeSelection"
|
||||
data-type="7"
|
||||
>
|
||||
<div class="answerInner">
|
||||
<!-- dynamic data -->
|
||||
</div>
|
||||
@@ -133,7 +187,9 @@
|
||||
<input id="city_id" hidden />
|
||||
<div id="result"></div>
|
||||
<div class="arrowAnswerBtn nextBtn right" onclick="nextQuestion()">
|
||||
<span class="arrowAnswer control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<span class="arrowAnswer control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,16 +199,28 @@
|
||||
<section id="page4">
|
||||
<div class="container">
|
||||
<div class="row headerRow">
|
||||
<div id="prevBtn" class="prevBtn nav-item left" onclick="nextQuestion(true,true)">
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"><img src="/image/left-arrow.png" /></span>
|
||||
<div
|
||||
id="prevBtn"
|
||||
class="prevBtn nav-item left"
|
||||
onclick="nextQuestion(true,true)"
|
||||
>
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
||||
><img src="/image/left-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
<div class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="nextBtn" class="nextBtn nextBtnTop nav-item right" onclick="closeResponse()">
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<div
|
||||
id="nextBtn"
|
||||
class="nextBtn nextBtnTop nav-item right"
|
||||
onclick="closeResponse()"
|
||||
>
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row customImgRow">
|
||||
@@ -169,16 +237,28 @@
|
||||
<section id="page5">
|
||||
<div class="container center-everything">
|
||||
<div class="row headerRow">
|
||||
<div id="prevBtn" class="prevBtn nav-item left" onclick="nextQuestion(true,true)">
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"><img src="/image/left-arrow.png" /></span>
|
||||
<div
|
||||
id="prevBtn"
|
||||
class="prevBtn nav-item left"
|
||||
onclick="nextQuestion(true,true)"
|
||||
>
|
||||
<span id="arrowTopLeft" class="arrowTopLeft control-arrows"
|
||||
><img src="/image/left-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
<div id="identity" class="nav-item bordered">
|
||||
<div class="createdByDiv">
|
||||
<!-- Dynamic data -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="nextBtn" class="nextBtn nextBtnTop nav-item right" onclick="closeResponse()">
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"><img src="/image/right-arrow.png" /></span>
|
||||
<div
|
||||
id="nextBtn"
|
||||
class="nextBtn nextBtnTop nav-item right"
|
||||
onclick="closeResponse()"
|
||||
>
|
||||
<span id="arrowTopRight" class="arrowTopRight control-arrows"
|
||||
><img src="/image/right-arrow.png"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responseRow">
|
||||
@@ -189,6 +269,15 @@
|
||||
<div class="responseBody">
|
||||
<!-- dynamic data here -->
|
||||
</div>
|
||||
<div
|
||||
id="responseCountdown"
|
||||
style="
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weatherApi" data-type="8">
|
||||
@@ -219,7 +308,10 @@
|
||||
<div class="container">
|
||||
<div class="row finalRow">
|
||||
<div class="imgDiv">
|
||||
<img src="/frontend_images/FinalScreenAnimation/final.gif" alt="image missing" />
|
||||
<img
|
||||
src="/frontend_images/FinalScreenAnimation/final.gif"
|
||||
alt="image missing"
|
||||
/>
|
||||
</div>
|
||||
<div class="finalDesc">
|
||||
<h3>Preparing your custom formula...</h3>
|
||||
@@ -247,13 +339,18 @@
|
||||
</div>
|
||||
<div class="paraDiv">
|
||||
<p>
|
||||
Based on what you’ve shared, your skin is pretty nicely balanced. We’ll look to reduce your pores, protecting you from pollution and sealing out toxins. We’ll also target your
|
||||
Based on what you’ve shared, your skin is pretty nicely
|
||||
balanced. We’ll look to reduce your pores, protecting you from
|
||||
pollution and sealing out toxins. We’ll also target your
|
||||
blackheads and tone out your skin for a nice, even look.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttonDiv">
|
||||
<button class="button" onclick="addToCart()">
|
||||
YOUR CUSTOM FORMULA <span id="arrowCustom" class="arrowCustom control-arrows"><img src="/image/right-arrow-white.png" /></span>
|
||||
YOUR CUSTOM FORMULA
|
||||
<span id="arrowCustom" class="arrowCustom control-arrows"
|
||||
><img src="/image/right-arrow-white.png"
|
||||
/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,11 +362,18 @@
|
||||
<h3>About these results</h3>
|
||||
</div>
|
||||
<div class="paraDiv">
|
||||
<p>These results tell us exactly how much support you need in which areas - Your custom forumlas will be tailored to these measurements.</p>
|
||||
<p>
|
||||
These results tell us exactly how much support you need in which
|
||||
areas - Your custom forumlas will be tailored to these
|
||||
measurements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttonDiv">
|
||||
<button class="button" onclick="addToCart()">
|
||||
YOUR CUSTOM FORMULA <span id="arrowCustom" class="arrowCustom control-arrows"><img src="/image/right-arrow-white.png" /></span>
|
||||
YOUR CUSTOM FORMULA
|
||||
<span id="arrowCustom" class="arrowCustom control-arrows"
|
||||
><img src="/image/right-arrow-white.png"
|
||||
/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,6 +397,36 @@
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div
|
||||
id="terminationOverlay"
|
||||
style="
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 9999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div
|
||||
id="terminationMessage"
|
||||
style="
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
id="terminationCountdown"
|
||||
style="color: white; font-size: 2em; text-align: center"
|
||||
></div>
|
||||
</div>
|
||||
<script src="/frontend_js/jquery.min.js"></script>
|
||||
<script src="/frontend_js/jquery-2.1.3.js"></script>
|
||||
<script src="/frontend_js/jquery-ui.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user