add svg

kishkinova · May 28, 2024 · 9990304 · 9990304
1 parent 5b7d2a7
commit 9990304
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 47 deletions.
diff --git a/images/help-icon.svg b/images/help-icon.svg
diff --git a/index.css b/index.css
@@ -10,12 +10,21 @@ body{
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    height: 2vh;
 }
 .btn-start {
     font-size: 24px;
     transition: font-size 0.3s ease;
 }
 .btn-start:hover {
     font-size: 30px;
-}
+}
+#nameForm {
+    padding: 0 4px;
+    background: rgba(0,0,0,0.5);
+
+    input {
+        color: white;
+        left: 0;
+        position: relative;
+    }
+}
diff --git a/index.html b/index.html
@@ -21,9 +21,23 @@
 
     <div class="container section">
         <div class="row">
-            <p class="center"><a href="quiz.html" class="btn blue btn-start">Let's Start</a></p>
-            </div>
+            <form id="nameForm" class="col s12">
+                <div class="input-field col s12">
+                    <input class="name-form-input" type="text" id="nameInput" placeholder="Enter your name" autofocus>
+                </div>
+                <p class="center">
+                    <a href="quiz.html" class="btn blue btn-start" onclick="saveName()">Let's Start</a>
+                </p>
+            </form>
+        </div>
     </div>
 
+    <script>
+        function saveName() {
+            const nameInput = document.getElementById('nameInput').value;
+            localStorage.setItem('name', nameInput);
+        }
+    </script>
+
 </body>
 </html>
diff --git a/quiz-final.css b/quiz-final.css
@@ -1,10 +1,10 @@
-*{
- padding: 0;
- margin: 0;
- box-sizing: border-box;   
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
 }
 
-body{
+body {
     height: 100vh;
     font-family: sans-serif;
     background-image: url(background1.svg);
@@ -30,7 +30,7 @@ h2 {
     height: 100vh;
 }
 
-.quiz{
+.quiz {
     border-radius: 20px;
     overflow: hidden;
     width: 100%;
@@ -69,21 +69,24 @@ h2 {
     background-color: #b40404;
 }
 
-.quiz_header{
+.quiz_header {
     background: #eeecec;
     padding: 12px 30px 10px;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
     z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.quiz_body{
+.quiz_body {
     padding: 20px 30px;
     background-color: skyblue;
 }
 
-.option_group{
+.option_group {
     list-style-type: none;
     margin: 30px 0;
 }
@@ -99,27 +102,27 @@ h2 {
     transition: 0.4s all;
 }
 
-.option:hover{
+.option:hover {
     cursor: pointer;
     border: 2px solid #341f97;
     color: #341f97;
     background-color: #341f97;
     color: white;
 }
 
-.option.active{
+.option.active {
     background-color: #341f97;
     color: #fff;
 }
 
 
-.award_icon{
+.award_icon {
     display: block;
     font-size: 300px;
     color: #fff;
 }
 
-.border{
+.border {
     height: 500px;
     width: 500px;
     display: block;
@@ -150,6 +153,71 @@ h2 {
     background-color: #5e3dbc;
 }
 
+.modal-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    visibility: hidden;
+    z-index: 1;
+}
+
+.modal-wrapper.open {
+    visibility: visible;
+
+    .modal-block {
+        bottom: 60px;
+    }
+}
+
+.modal-block {
+    position: absolute;
+    bottom: -1000px;
+    right: 60px;
+    transition: all ease-in 300ms;
+    border-radius: 15px;
+    background: #fff;
+    -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.75);
+    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.75);
+    width: 500px;
+    min-height: 500px;
+    padding: 30px;
+
+    h1 {
+        font-size: 26px;
+        line-height: 28px;
+        margin: 0 0 20px;
+    }
+
+    p {
+        font-size: 14px;
+    }
+
+    .modal-close {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+    }
+}
+
+.svg-icon.open {
+    path:nth-child(2) {
+        fill: black !important;
+    }
+
+    path:nth-child(3) {
+        stroke: white !important;
+    }
+
+    circle {
+        stroke: white !important;
+        fill: white !important;
+    }
+}
+
 /** animation **/
 
 #animation {

diff --git a/quiz.html b/quiz.html
@@ -18,7 +18,17 @@
 <div class="wrapper">
     <div class="quiz">
         <div class="quiz_header">
-            <h1>WELCOME ! <span class="name"></span></h1>
+            <h1>WELCOME, <span id="userName"></span>!</h1>
+            <div class="help">
+                <svg class="svg-icon" width="30px" height="30px" viewBox="0 0 512 512"
+                     xmlns="http://www.w3.org/2000/svg"><title>help</title>
+                    <path id="path1" d="M256,80A176,176,0,1,0,432,256,176,176,0,0,0,256,80Z"
+                          style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:32px"/>
+                    <path d="M200,202.29s.84-17.5,19.57-32.57C230.68,160.77,244,158.18,256,158c10.93-.14,20.69,1.67,26.53,4.45,10,4.76,29.47,16.38,29.47,41.09,0,26-17,37.81-36.37,50.8S251,281.43,251,296"
+                          style="fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:28px"/>
+                    <circle cx="250" cy="348" r="20"/>
+                </svg>
+            </div>
         </div>
 
         <div class="quiz_body">
@@ -35,6 +45,36 @@ <h1>WELCOME ! <span class="name"></span></h1>
     </div>
 </div>
 
+<div id="modal" class="modal-wrapper">
+    <div class="modal-block">
+        <div class="modal-close">
+            <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.0303 8.96965C9.73741 8.67676 9.26253 8.67676 8.96964 8.96965C8.67675 9.26255 8.67675 9.73742 8.96964 10.0303L10.9393 12L8.96966 13.9697C8.67677 14.2625 8.67677 14.7374 8.96966 15.0303C9.26255 15.3232 9.73743 15.3232 10.0303 15.0303L12 13.0607L13.9696 15.0303C14.2625 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2625 15.0303 13.9696L13.0606 12L15.0303 10.0303C15.3232 9.73744 15.3232 9.26257 15.0303 8.96968C14.7374 8.67678 14.2625 8.67678 13.9696 8.96968L12 10.9393L10.0303 8.96965Z" fill="#1C274C"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12Z" fill="#1C274C"/>
+            </svg>
+        </div>
+        <h1>!!HELP ME, HELP!!! HELP!!</h1>
+        <p>
+            Most people have one animal phobia or another, be it a fear of sharks thanks to sensationalist blockbusters or a horror of anything that creeps and crawls—but when it comes to which species are worth being afraid of? The answer might surprise you.
+        </p>
+        <img width="100%" alt="" src="https://media.cntraveler.com/photos/622277d14d1454296469bc0e/master/w_1600,c_limit/Hippopotamus_GettyImages-157315984.jpg">
+        <p>
+            Hippos may look like giant, bumbling things, but they are often considered Africa’s most dangerous mammal. They’re territorial, unpredictable, and armed with a mouthful of teeth sharp and strong enough to do lethal damage. If their territory is encroached—whether that be by a crocodile, another hippo, or boat full of tourists—they will aggressively defend their space. When hippos attack, they do so with canine teeth nearly 2 feet long at a pressure of 2000 pounds per square inch (a lion exerts half this much pressure when biting its hardest). As if that weren’t enough reason to steer clear, hippos sweat a red liquid that looks like blood, securing their title as most metal animal on the planet.
+        </p>
+    </div>
+</div>
+
+<script>
+    // Retrieve name from local storage
+    const name = localStorage.getItem('name');
+    const userNameSpan = document.getElementById('userName');
+    if (name) {
+        userNameSpan.textContent = name;
+    } else {
+        userNameSpan.textContent = 'Guest';
+    }
+</script>
+
 <script src="questions.js"></script>
 <script src="quiz.js"></script>
 

diff --git a/quiz.js b/quiz.js
@@ -1,26 +1,32 @@
 let question_count = 0;
 let result_colour = '';
 let total_weight = 0;
+
 let currentResult = new Map;
-let currentState = { currentQuestion: 0, weight: 0 };
+let currentState = {currentQuestion: 0, weight: 0};
 localStorage.removeItem("total_weight");
 localStorage.removeItem("result_colour");
 
 /* Show questions */
-window.onload = function(){
+window.onload = function () {
+    const userName = localStorage.getItem('userName');
+    // Display the name in the welcome message or wherever needed
+    if (userName) {
+        document.querySelector('.name').innerText = userName;
+    }
     show(question_count);
 };
 
 /* Save page state */
-window.history.pushState({ currentQuestion: 0, weight: 0 }, null, window.location.href);
+window.history.pushState({currentQuestion: 0, weight: 0}, null, window.location.href);
 
 /* Handle browser navigation button click */
 window.onpopstate = function (event) {
     console.log(event.state);
     if (!event.state || event.state.currentQuestion < currentState.currentQuestion) {
         if (!event.state) {
             history.back();
-        } else  {
+        } else {
             currentState = event.state;
             total_weight = total_weight - currentResult.get(question_count - 1);
             question_count--;
@@ -30,13 +36,13 @@ window.onpopstate = function (event) {
 }
 
 /* Handle question option click */
-document.getElementById("questions").addEventListener("click", function(event) {
+document.getElementById("questions").addEventListener("click", function (event) {
     if (event.target && event.target.matches("li.option")) {
         let questionIndex = question_count;
         let optionWeight = parseInt(event.target.getAttribute("data-weight"));
         total_weight += optionWeight;
         localStorage.setItem("total_weight", total_weight);
-        currentState = { currentQuestion: question_count + 1, weight: optionWeight };
+        currentState = {currentQuestion: question_count + 1, weight: optionWeight};
         history.pushState(currentState, null, document.location.href);
         currentResult.set(question_count, optionWeight);
 
@@ -50,36 +56,46 @@ document.getElementById("questions").addEventListener("click", function(event) {
             setTimeout(() => window.location.href = "final.html", 3000);
         }
     }
-    });
+});
 
 /* Show questions */
-    function show(count) {
-        let question = document.getElementById("questions");
-        let optionsHTML = "";
-        questions[count].options.forEach(option => {
-            optionsHTML += `<li class="option" data-weight="${option.weight}">${option.text}</li>`;
-        });
+function show(count) {
+    let question = document.getElementById("questions");
+    let optionsHTML = "";
+    questions[count].options.forEach(option => {
+        optionsHTML += `<li class="option" data-weight="${option.weight}">${option.text}</li>`;
+    });
 
-        question.innerHTML = `<h2>Q${count + 1}. ${questions[count].question}</h2>
+    question.innerHTML = `<h2>Q${count + 1}. ${questions[count].question}</h2>
                       <ul class="option_group">${optionsHTML}</ul>`;
-    }
+}
 
 /* Calculate character type results */
-    function calculate_result(weight){
-        if (weight <= 40 && weight >= 35){
-            result_colour = "Red";
-        }
-        else if (weight < 35 && weight >= 25){
-            result_colour = "Yellow";
-        }
-        else if (weight < 25 && weight >= 15){
-            result_colour = "Green";
-        }
-        else {
-            result_colour = "Blue";
-        }
-        localStorage.setItem("result_colour", result_colour); // Store result colour in local storage
+function calculate_result(weight) {
+    if (weight <= 40 && weight >= 35) {
+        result_colour = "Red";
+    } else if (weight < 35 && weight >= 25) {
+        result_colour = "Yellow";
+    } else if (weight < 25 && weight >= 15) {
+        result_colour = "Green";
+    } else {
+        result_colour = "Blue";
     }
+    localStorage.setItem("result_colour", result_colour); // Store result colour in local storage
+}
+
+// svg
+let svg = document.querySelector('.svg-icon');
+svg.addEventListener('click', function(e) {
+    const modal = document.querySelector('#modal');
 
+    svg.classList.add('open');
+    modal.classList.add('open');
 
+    const modalCloseBtn = document.querySelector('.modal-close svg');
+    modalCloseBtn.addEventListener('click', () => {
+        modal.classList.remove('open');
+        svg.classList.remove('open');
+    })
+});