diff --git a/README.md b/README.md index 2d3e90b..3951da0 100644 --- a/README.md +++ b/README.md @@ -15,18 +15,18 @@ To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow ### README.md must consist of the following information: -#### Team Name - -#### Problem Statement - -#### Team Leader Email - +#### Team Name - H2O FLOW +#### Problem Statement - EVERYTHING STARTS WITH WATER , displaying path of water and how climate changes effect it by using animations and interactive chatbot , quizs and games. +#### Team Leader Email - vs4440229@gmail.com ### A Brief of the Prototype: - This section must include UML Diagrams and prototype description +The solution for the water cycle and climate change education challenge involves creating diverse and engaging tools. An interactive quiz assesses students' knowledge, while a chatbot provide personalized learning experiences. Additionally, an educational game gamifies the understanding of the water cycle and climate change impacts. we have provides NASA data reference for interactive learning, and a storytelling chat Bot combines narrative elements with data visualization. A community engagement platform fosters collaboration, and a teacher resource portal supports educators. our web application facilitates the student to ask their doubt related to problem statement. Each approach targets elementary, middle, or high school students, ensuring a comprehensive and interactive educational experience ### Tech Stack: - List Down all technologies used to Build the prototype + HTML CSS JAVASCRIPT ### Step-by-Step Code Execution Instructions: - This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed + All codes are interlinked only index.html file have to be executed. ### Future Scope: - Write about the scalability and futuristic aspects of the prototype developed + This will enable the user to use water carefully and will save our planet in future. diff --git a/chatbot.html b/chatbot.html new file mode 100644 index 0000000..bbf5208 --- /dev/null +++ b/chatbot.html @@ -0,0 +1,36 @@ + + + + + Chatbot in JavaScript + + + + + + + + + +
+
+

Chatbot

+ close +
+ +
+ + send +
+
+ + + \ No newline at end of file diff --git a/guess.css b/guess.css new file mode 100644 index 0000000..a200381 --- /dev/null +++ b/guess.css @@ -0,0 +1,109 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + padding: 0 10px; + min-height: 100vh; + align-items: center; + justify-content: center; + background:url("https://c4.wallpaperflare.com/wallpaper/948/432/1006/nature-scenery-wallpaper-preview.jpg"); + background-repeat: no-repeat; + background-size: cover; +} +.wrapper{ + width: 430px; + background: #fff; + border-radius: 10px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); +} +.wrapper h1{ + font-size: 25px; + font-weight: 500; + padding: 20px 25px; + border-bottom: 1px solid #ccc; +} +.wrapper .content{ + margin: 25px 25px 35px; +} +.content .inputs{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.inputs input{ + height: 57px; + width: 56px; + margin: 4px; + font-size: 24px; + font-weight: 500; + color: #1ba98c; + text-align: center; + border-radius: 5px; + background: none; + pointer-events: none; + text-transform: uppercase; + border: 1px solid #B5B5B5; +} +.typing-input { + opacity: 0; + z-index: -999; + position: absolute; + pointer-events: none; +} +.inputs input:first-child{ + margin-left: 0px; +} +.content .details{ + margin: 20px 0 25px; +} +.details p{ + font-size: 19px; + margin-bottom: 10px; +} +.content .reset-btn{ + width: 100%; + border: none; + cursor: pointer; + color: #fff; + outline: none; + padding: 15px 0; + font-size: 17px; + border-radius: 5px; + background: #1BB295; + transition: all 0.3s ease; +} +.content .reset-btn:hover{ + background: #18a589; +} + +@media screen and (max-width: 460px) { + .wrapper { + width: 100%; + } + .wrapper h1{ + font-size: 22px; + padding: 16px 20px; + } + .wrapper .content{ + margin: 25px 20px 35px; + } + .inputs input{ + height: 51px; + width: 50px; + margin: 3px; + font-size: 22px; + } + .details p{ + font-size: 17px; + } + .content .reset-btn{ + padding: 14px 0; + font-size: 16px; + } +} \ No newline at end of file diff --git a/guess.html b/guess.html new file mode 100644 index 0000000..6ab4c87 --- /dev/null +++ b/guess.html @@ -0,0 +1,29 @@ + + + + + + Word Guessing Game JavaScript | CodingNepal + + + + +
+

Guess the Word

+
+ +
+
+

Hint:

+

Remaining guesses:

+

Wrong letters:

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/guess.js b/guess.js new file mode 100644 index 0000000..d71e33f --- /dev/null +++ b/guess.js @@ -0,0 +1,101 @@ +const wordList = [ + { + word: "water", + hint: "precious element" + }, + { + word: "ice", + hint: "solid state of water" + }, + { + word: "earth", + hint: "a planet" + }, + { + word: "rain", + hint: "falling of water" + }, + { + word: "blue", + hint: "colour of water" + }, + { + word: "evaporation", + hint: "process in water cycle" + }, + { + word: "", + hint: "programming language" + }, + { + word: "vapours", + hint: "gaseous form of water" + }, + { + word: "lake", + hint: "water resouce" + }, + { + word: "snow", + hint: "form of precipitation" + }, + { + word: "farming", + hint: "usage of water" + }, + { + word: "global warming", + hint: "effect of heat" + }, + { + word: "transpiration", + hint: "loss of water from leaf" + }, + + { + word: "island", + hint: "land surrounded by water" + }, + + { + word: "air", + hint: "related to a gas" + + }, + { + word: "glacier", + hint: "a image file format" + }, + { + word: "drops", + hint: "form of rain" + }, + { + word: "fog", + hint: "comes in winter" + }, + { + word: "atmosphere", + hint: "sphere of air" + }, + { + word: "cloud", + hint: "forms due to evaporation" + }, + { + word: "boil", + hint: "heating water" + }, + { + word: "hydrosphere", + hint: "sphere of water" + }, + { + word: "humidity", + hint: "presence of water in atmosphere " + }, + { + word: "rain", + hint: "related to a water" + }, +] \ No newline at end of file diff --git a/guess1.js b/guess1.js new file mode 100644 index 0000000..bbbd01d --- /dev/null +++ b/guess1.js @@ -0,0 +1,62 @@ +const inputs = document.querySelector(".inputs"), +hintTag = document.querySelector(".hint span"), +guessLeft = document.querySelector(".guess-left span"), +wrongLetter = document.querySelector(".wrong-letter span"), +resetBtn = document.querySelector(".reset-btn"), +typingInput = document.querySelector(".typing-input"); + +let word, maxGuesses, incorrectLetters = [], correctLetters = []; + +function randomWord() { + let ranItem = wordList[Math.floor(Math.random() * wordList.length)]; + word = ranItem.word; + maxGuesses = word.length >= 5 ? 8 : 6; + correctLetters = []; incorrectLetters = []; + hintTag.innerText = ranItem.hint; + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + + let html = ""; + for (let i = 0; i < word.length; i++) { + html += ``; + inputs.innerHTML = html; + } +} +randomWord(); + +function initGame(e) { + let key = e.target.value.toLowerCase(); + if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) { + if(word.includes(key)) { + for (let i = 0; i < word.length; i++) { + if(word[i] == key) { + correctLetters += key; + inputs.querySelectorAll("input")[i].value = key; + } + } + } else { + maxGuesses--; + incorrectLetters.push(` ${key}`); + } + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + } + typingInput.value = ""; + + setTimeout(() => { + if(correctLetters.length === word.length) { + alert(`Congrats! You found the word ${word.toUpperCase()}`); + return randomWord(); + } else if(maxGuesses < 1) { + alert("Game over! You don't have remaining guesses"); + for(let i = 0; i < word.length; i++) { + inputs.querySelectorAll("input")[i].value = word[i]; + } + } + }, 100); +} + +resetBtn.addEventListener("click", randomWord); +typingInput.addEventListener("input", initGame); +inputs.addEventListener("click", () => typingInput.focus()); +document.addEventListener("keydown", () => typingInput.focus()); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e08dda0 --- /dev/null +++ b/index.html @@ -0,0 +1,912 @@ + + + + + + Water Cycle + + + + + + + + + + + + + Resturant + + + + + + + + + + + +
+ +
+
+

Chatbot

+ close +
+ +
+ + send +
+
+
+ +

Water on Earth : A Precious Resource at Risk

+ Brief Discription in ppt from + Check your Knowledge +
+ + +
+
+

Water Cycle

+
+
+ +
+
+ + + + + + + +
+
+

Evaporation

+

The process by which liquid water, primarily from the Earth's surface (such as + oceans, lakes, rivers, and soil), is heated by the sun and turns into water vapor or steam, rising + into the atmosphere.

+
+
+ + +
+
+ + + +
+
+

Condensation

+

As the water vapor rises into the cooler upper atmosphere, it cools and condenses + into tiny water droplets, forming clouds. This is the opposite of evaporation.

+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+

Precipitation

+

When water droplets in clouds combine and grow heavy enough, they fall to the + Earth's surface as precipitation, which can take various forms like rain, snow, sleet, or hail.

+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Infiltration

+

Some of the precipitation soaks into the ground, where it may be absorbed by soil + and rocks, replenishing groundwater reservoirs.

+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+
+

Runoff

+

Not all precipitation infiltrates the ground. Some flows over the surface, + creating runoff, which can enter rivers, streams, and eventually larger bodies of water like lakes + and oceans.

+
+
+ + +
+
+ + + + +
+
+

Transpiration

+

Plants release water vapor into the atmosphere through small openings called + stomata on their leaves. This contributes to moisture in the atmosphere.

+
+
+ +
+
+ + + + + + + +
+

Let's play a game

+ +
+ + +
+
+
+
+
+
+
+
+
+
+ + +
+
+

Effects of climatic change

+
+
+

Climate change, primarily induced by human activities like the burning of fossil fuels and deforestation, + has far-reaching and detrimental effects. It leads to rising global temperatures, causing more frequent and + severe heatwaves, along with the melting of polar ice caps and glaciers, resulting in rising sea levels and + coastal erosion. This warming climate is linked to an increased occurrence of extreme weather events such as + hurricanes and droughts. Ocean acidification due to higher carbon dioxide levels threatens marine + ecosystems, while changing weather patterns disrupt ecosystems and threaten biodiversity. Climate change + also impacts food and water security, human health, and can contribute to displacement and conflicts. + Additionally, it necessitates significant policy and societal responses to reduce greenhouse gas emissions + and adapt to these environmental transformations.

+
+
+ +
+ +
+

Drought:A menace

+
+
+
+ +
+
+
+
+ +
+

Melting Glaciers

+
+
+
+ +
+
+
+
+ +
+

Floods

+
+
+
+ +
+
+
+
+ + + +
+ + + + + +
+

If water ends on Earth

+

Dehydration: Humans and animals would suffer from immediate dehydration, leading to organ failure and death. + + Food Shortages: Agriculture relies on water, and without it, crops would fail, causing food shortages for both humans and animals. + + Ecosystem Collapse: Aquatic ecosystems would collapse, disrupting the food chain and leading to extinctions. Terrestrial ecosystems would also suffer. + + Climate Change: The absence of water would disrupt the Earth's climate, causing extreme temperature variations and making survival difficult. + + Economic Collapse: Industries dependent on water, such as agriculture and manufacturing, would collapse, leading to economic crises. + + Health Crises: Lack of water for sanitation and hygiene would spread diseases, posing health risks to both humans and animals. + + Migration and Conflict: Competition for scarce water resources would lead to conflicts and mass migrations of people and animals. + + Extinction: Many species would go extinct, further disrupting ecosystems and exacerbating environmental problems. + + In essence, the loss of water would trigger a chain reaction of catastrophic events affecting all life on Earth. +

+
+
+

How we can conserve water

+

Fix Leaks: Repair any leaks in your plumbing or irrigation systems promptly. Even small leaks can waste significant amounts of water over time. + + Install Water-Saving Appliances: Upgrade to water-efficient appliances like low-flow toilets, high-efficiency washing machines, and dishwashers. These can significantly reduce water consumption. + + Collect Rainwater: Install rain barrels to collect rainwater for outdoor use, such as watering plants and gardens. + + Use a Broom: Instead of using a hose, use a broom to clean driveways and sidewalks to save water. + + Shorter Showers: Take shorter showers and consider installing low-flow showerheads to reduce water usage. + + Turn Off the Tap: While brushing your teeth or washing dishes, turn off the tap when not in use to avoid unnecessary water waste. + + Watering Efficiency: Water your lawn and garden early in the morning or late in the evening when temperatures are cooler to minimize evaporation. Use a soaker hose or drip irrigation to target plant roots.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..58712a4 --- /dev/null +++ b/main.css @@ -0,0 +1,584 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.video{ + position:relative; + margin-top:30px; +} +.title{ + text-align: center; + position: absolute; + bottom: 250px; + +} +.title-text{ + font-size: 40px; + text-align: center; +} +body{ + font-family: 'Baloo Chettan 2', cursive; + line-height: 1.5; +} + +/*header*/ +.header{ + /* display: flex;*/ + min-height: 100vh; + background:linear-gradient(rgba(0,0,0,0.8),rgb(0,0,0,0.8)), + center no-repeat fixed; + /* flex-direction: column;*/ + margin-top: auto; +} +.hero{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + background-attachment: fixed; + width: 100%; + height: 100%; +} +.hero .title{ + color: #fff; + font-size: 50px; +} +.hero-button{ + display: inline-block; + text-decoration: none; + text-transform: uppercase; + padding: 13px 20px; + border-radius: 200px; + font-weight: bold; + background: orange; + color:#fff; + cursor: pointer; + border: 2px solid orange; + margin-top:10px; + +} +.hero-button:hover{ + background: #fff; + color: orange; + border: none; + + +} +.pulsate{ + /*-webkit-*/animation: pulsate 3s ease-in-out; + /*-webkit-*/animation-iteration-count:infinite ; + opacity: .3; + color: black; + position:absolute; + bottom: 90px; +} +@-webkit-keyframes pulsate{ + 0% { + opacity: .3; + } + 50% { + opacity: 1; + } + 100% { + opacity: .3; + } + +} + +.quiz-button{ + display: inline-block; + text-decoration: none; + text-transform: uppercase; + padding: 13px 20px; + border-radius: 55px; + font-weight: bold; + background: orange; + color:#fff; + cursor: pointer; + border: 2px solid orange; + margin-top:10px; + position: relative; + right: -490px; + top: -550px; + +} +.quiz-button:hover{ + background: #fff; + color: orange; + border: none; + + +} + + +/* End of header*/ +/*==========About Section============*/ +#about{ + padding: 40px; +} + +.about{ + margin: 30px 0; + display: flex; +} +.about-icon .fas{ + font-size: 60px; + color: orange; + margin-right: 20px; +} +.about-subtitle{ + text-transform: capitalize; + color: orange; + font-size: 25px; +} +.about-info{ + margin-top: 10px; + line-height: 1.5; +} +.about-icon:hover .fas, +.about-subtitle:hover{ + transition: transform 2s ease, color 2s ease; + transform: translateY(-10px); + color: #cd6100; + cursor: pointer; +} +@media screen and (min-width: 576px){ + .about-center{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + .about{ + flex: 0 0 calc(50% - 16px); + } +} +@media screen and (min-width:972px){ + .about{ + flex: 0 0 calc(33.3% - 16px); + } +} +/*=====end of Icon Section======*/ +/*=====Menu Section======*/ +.menu-image{ + min-height: 80vh; + background: url(https://gpm.nasa.gov/education/sites/default/files/article_images/Water-Cycle-Art2A.png)center/cover fixed no-repeat; +} +.menu-text{ + min-height: 80vh; + display: flex; + align-items: center; + background:rgba(0,0,0,0.4); + columns: #0000; + padding: 40px 0; +} +.menu-text-center{ + width: 90%; + margin: 0 auto; +} +.menu-text h1{ + font-size: 40px; + text-transform: uppercase; + margin-bottom: 10px; +} +.menu-text p{ + margin: 20px 0; + line-height: 2; +} +.menu-text a{ + display: inline-block; + text-decoration: none; + text-transform: uppercase; + padding: 13px 20px; + border-radius: 200px; + font-weight: bold; + background: rgb(10, 10, 10); + color:orange; + cursor: pointer; + border: 2px solid #000; + margin-top:10px; +} +.menu-text a:hover{ + color:orange; + background: #fff; + border:none; + +} +@media screen and (min-width:776px){ + .menu{ + display: flex; + } + .menu-text{ + flex: 0 0 30%; + } + .menu-image{ + flex: 0 0 70%; + clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%) + } + .menu{ + background:black; + color:white; + } +} +/*========End of Menu Section====*/ + + +/*==========Social Icons====*/ + +#social-icons{ + height: 150px; + background:#fff; + text-align: center; + /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);*/ + padding: 50px 0 50px 0; +} +#social-icons a{ + display: inline-block; + padding: 5px 10px; + margin: 0 5px; + font-size: 40px; + border-radius:5px; + transition: transform 2s ease, color 2s ease; +} +#social-icons a:hover{ + transform: translateY(-20px); +} +.facebook{ + color: #3b5998; +} +.twitter{ + color: #38A1F3; +} +.instagram{ + color: #e1306c; +} +.plus{ + color:#db4a39; +} +/*====end of Social Icons======*/ +/*==========Numbers/ Counters=======*/ +.number{ + text-align: center; + background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), + url(https://gpm.nasa.gov/education/sites/default/files/article_images/Water-Cycle-Art2A.png) center/cover fixed no-repeat; + padding: 60px 0; + color:#fff; + height: 300px; + } + .number p{ + font-size: 30px; + font-weight: bold; + } +.number:hover{ + color: orange; +} +.number .fas{ + font-size: 60px; + margin: 20px 0; +} +.number h3{ + text-transform: uppercase; +} + +@media screen and (min-width:576PX){ + #numbers { + display: grid; + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width: 992px){ + #numbers{ + grid-template-columns: repeat(4, 1fr); + } +} +/*==========Cards Section========*/ +#food{ + padding: 20px ; + background-color: black; + color: white; +} +.food-container{ + max-width: 90vw; + margin: 0 auto; +} +.food-card{ + position: relative; + background: linear-gradient(rgba(205, 96, 0, 0.7),rgba(205,96,0,0.7)); + margin:20px 0; + color: #000; + overflow: hidden; + padding: 3px; + border-radius: 16px; + border: 1px solid orange; + box-shadow: 2px 3px 1px 1px #cd6100; + z-index: 1; +} + +#food img{ + width: 100%; + min-height: 100%; + display: block; + transition: transform 4s; +} + +.img-text{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + opacity: 0; + transition: opacity 4s; + +} +.img-footer{ + display: flex; + justify-content: space-between; + width: 100%; + position: absolute; + left: 0; + bottom: 0; + padding: 10px; + font-size: 20px; + opacity: 0; + color: #000; + transition: opacity 4s; +} +.img-text h1{ + font-size: 30px; + margin-bottom: 10px; +} +.food-card:hover img{ + opacity: 0.4; + transform: scale(1.3); +} +.food-card:hover .img-text, +.food-card:hover .img-footer{ + opacity:1; +} +.food-btn{ + display: inline-block; + background:#000; + text-decoration: none; + text-transform: capitalize; + padding: 12px 32px; + color: #fff; + font-weight: bold; + border-radius: 180px; + cursor: pointer; + margin-top: 16px; + transition: all 0.3s ease-in-out; + font-size:18px; + outline:none; +} +.food-btn:hover{ + color: orange; + background:#ffff; + border: #000; + outline: none; +} +.fas{ + font-size: 30px; +} +@media screen and (min-width: 576px){ + .food-container{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 16px; + } +} +@media screen and (min-width: 992px){ + .food-container{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap:16px ; + } +} +/*========End of Cards Section=======*/ +/*=========Gallery Section============*/ +#gallery{ + padding: 40px; + background: #fff; +} +.gallery-item{ + background: linear-gradient(rgb(rgba(241, 161, 13)) rgb(rgb(255, 165, 0))); +} +.gallery-item img{ + display:block; + width: 100%; + opacity: 1; + transition: opacity 2s ease; +} +.gallery-item img:hover{ + opacity: 0.5; +} +@media screen and (min-width:576px){ + #gallery-center{ + display: grid; + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width:992px){ + #gallery-center{ + grid-template-columns: repeat(4, 1fr); + } +} + +/*==========Footer========*/ +.footer{ + background:#000; + text-align: center; +} +.footer .text{ +text-transform: uppercase; +color: #fff; +font-size: 24px; +margin-top: 20px; +} + +#play_1{ + height: 20px; + width: 40px; + background-color: black; + border-radius: 10px; +} + +.button { + width: 140px; + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 10px; + padding: 0px 15px; + background-color: red; + border-radius: 10px; + border: none; + color: white; + position: relative; + cursor: pointer; + font-weight: 900; + transition-duration: .2s; + right: 15px; + } + + .game path { + color: white; + } + + .button .arrow { + position: absolute; + right: 0; + padding: 0px 5px; + width: 30px; + height: 100%; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + } + + .button:hover, + .button:focus { + background-color: black; + transition-duration: .2s; + } + + .button:hover .arrow { + animation: slide-right .6s ease-out both; + } + /* arrow animation */ + @keyframes slide-right { + 0% { + transform: translateX(-5px); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } + } + + .button:active { + transform: translate(1px , 1px); + transition-duration: .2s; + } + +#play_line{ + display: flexbox; + justify-content: center; + align-items: center; +} +.card { + position: relative; + width: 300px; + height: 200px; + background-color: #f2f2f2; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + perspective: 1000px; + box-shadow: 0 0 0 5px #ffffff80; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + #img1{ + position:absolute; + margin:10 10 10 10; + } + + .card svg { + width: 48px; + fill: #333; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + + .card:hover { + transform: scale(1.05); + box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2); + } + + .card__content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 20px; + box-sizing: border-box; + background-color: #f2f2f2; + transform: rotateX(-90deg); + transform-origin: bottom; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + + .card:hover .card__content { + transform: rotateX(0deg); + } + + .card__title { + margin: 0; + font-size: 24px; + color: #333; + font-weight: 700; + } + + .card:hover svg { + scale: 0; + } + + .card__description { + margin: 10px 0 0; + font-size: 14px; + color: #777; + line-height: 1.4; + } + .no-water{ + background-color: black; + color:white; + + } + \ No newline at end of file diff --git a/questions2.js b/questions2.js new file mode 100644 index 0000000..6189414 --- /dev/null +++ b/questions2.js @@ -0,0 +1,57 @@ +let questions = [ + { + numb: 1, + question: "What percentage of the Earth's surface is covered by water", + answer: "90%", + options: [ + "50%", + "75%", + "90%", + "25%" + ] + }, + { + numb: 2, + question: "Which process describes the conversion of water vapor into liquid water droplets, forming clouds", + answer: "Condensation", + options: [ + "Condensation", + "Evaporation", + "Precipitation", + "Infiltration" + ] + }, + { + numb: 3, + question: "What is the primary source of freshwater on Earth?", + answer: "Groundwater", + options: [ + "Rivers", + "Lakes", + "Oceans", + "Groundwater" + ] + }, + { + numb: 4, + question: "Which of the following is NOT a major use of water in households?", + answer: "Charging electronic devices", + options: [ + "Drinking", + "Showering", + "Watering lawns", + "Charging electronic devices" + ] + }, + { + numb: 5, + question: "What is the term for the natural replenishment of groundwater by percolating rainwater through the soil?", + answer: "Recharge", + options: [ + "Eriosen", + "Evaoporation", + "Transpiration", + "Recharge" + ] + } +] \ No newline at end of file diff --git a/quiz.css b/quiz.css new file mode 100644 index 0000000..fb03f26 --- /dev/null +++ b/quiz.css @@ -0,0 +1,383 @@ +/* importing google fonts */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + background: #007bff; +} + +::selection{ + color: #fff; + background: #007bff; +} + +.start_btn, +.info_box, +.quiz_box, +.result_box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.info_box.activeInfo, +.quiz_box.activeQuiz, +.result_box.activeResult{ + opacity: 1; + z-index: 5; + pointer-events: auto; + transform: translate(-50%, -50%) scale(1); +} + +.start_btn button{ + font-size: 25px; + font-weight: 500; + color: #007bff; + padding: 15px 30px; + outline: none; + border: none; + border-radius: 5px; + background: #fff; + cursor: pointer; +} + +.info_box{ + width: 540px; + background: #fff; + border-radius: 5px; + transform: translate(-50%, -50%) scale(0.9); + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} + +.info_box .info-title{ + height: 60px; + width: 100%; + border-bottom: 1px solid lightgrey; + display: flex; + align-items: center; + padding: 0 30px; + border-radius: 5px 5px 0 0; + font-size: 20px; + font-weight: 600; +} + +.info_box .info-list{ + padding: 15px 30px; +} + +.info_box .info-list .info{ + margin: 5px 0; + font-size: 17px; +} + +.info_box .info-list .info span{ + font-weight: 600; + color: #007bff; +} +.info_box .buttons{ + height: 60px; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 30px; + border-top: 1px solid lightgrey; +} + +.info_box .buttons button{ + margin: 0 5px; + height: 40px; + width: 100px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + border: none; + outline: none; + border-radius: 5px; + border: 1px solid #007bff; + transition: all 0.3s ease; +} + +.quiz_box{ + width: 550px; + background: #fff; + border-radius: 5px; + transform: translate(-50%, -50%) scale(0.9); + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} + +.quiz_box header{ + position: relative; + z-index: 2; + height: 70px; + padding: 0 30px; + background: #fff; + border-radius: 5px 5px 0 0; + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1); +} + +.quiz_box header .title{ + font-size: 20px; + font-weight: 600; +} + +.quiz_box header .timer{ + color: #004085; + background: #cce5ff; + border: 1px solid #b8daff; + height: 45px; + padding: 0 8px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: space-between; + width: 145px; +} + +.quiz_box header .timer .time_left_txt{ + font-weight: 400; + font-size: 17px; + user-select: none; +} + +.quiz_box header .timer .timer_sec{ + font-size: 18px; + font-weight: 500; + height: 30px; + width: 45px; + color: #fff; + border-radius: 5px; + line-height: 30px; + text-align: center; + background: #343a40; + border: 1px solid #343a40; + user-select: none; +} + +.quiz_box header .time_line{ + position: absolute; + bottom: 0px; + left: 0px; + height: 3px; + background: #007bff; +} + +section{ + padding: 25px 30px 20px 30px; + background: #fff; +} + +section .que_text{ + font-size: 25px; + font-weight: 600; +} + +section .option_list{ + padding: 20px 0px; + display: block; +} + +section .option_list .option{ + background: aliceblue; + border: 1px solid #84c5fe; + border-radius: 5px; + padding: 8px 15px; + font-size: 17px; + margin-bottom: 15px; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: space-between; +} + +section .option_list .option:last-child{ + margin-bottom: 0px; +} + +section .option_list .option:hover{ + color: #004085; + background: #cce5ff; + border: 1px solid #b8daff; +} + +section .option_list .option.correct{ + color: #155724; + background: #d4edda; + border: 1px solid #c3e6cb; +} + +section .option_list .option.incorrect{ + color: #721c24; + background: #f8d7da; + border: 1px solid #f5c6cb; +} + +section .option_list .option.disabled{ + pointer-events: none; +} + +section .option_list .option .icon{ + height: 26px; + width: 26px; + border: 2px solid transparent; + border-radius: 50%; + text-align: center; + font-size: 13px; + pointer-events: none; + transition: all 0.3s ease; + line-height: 24px; +} +.option_list .option .icon.tick{ + color: #23903c; + border-color: #23903c; + background: #d4edda; +} + +.option_list .option .icon.cross{ + color: #a42834; + background: #f8d7da; + border-color: #a42834; +} + +footer{ + height: 60px; + padding: 0 30px; + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid lightgrey; +} + +footer .total_que span{ + display: flex; + user-select: none; +} + +footer .total_que span p{ + font-weight: 500; + padding: 0 5px; +} + +footer .total_que span p:first-child{ + padding-left: 0px; +} + +footer button{ + height: 40px; + padding: 0 13px; + font-size: 18px; + font-weight: 400; + cursor: pointer; + border: none; + outline: none; + color: #fff; + border-radius: 5px; + background: #007bff; + border: 1px solid #007bff; + line-height: 10px; + opacity: 0; + pointer-events: none; + transform: scale(0.95); + transition: all 0.3s ease; +} + +footer button:hover{ + background: #0263ca; +} + +footer button.show{ + opacity: 1; + pointer-events: auto; + transform: scale(1); +} + +.result_box{ + background: #fff; + border-radius: 5px; + display: flex; + padding: 25px 30px; + width: 450px; + align-items: center; + flex-direction: column; + justify-content: center; + transform: translate(-50%, -50%) scale(0.9); + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} + +.result_box .icon{ + font-size: 100px; + color: #007bff; + margin-bottom: 10px; +} + +.result_box .complete_text{ + font-size: 20px; + font-weight: 500; +} + +.result_box .score_text span{ + display: flex; + margin: 10px 0; + font-size: 18px; + font-weight: 500; +} + +.result_box .score_text span p{ + padding: 0 4px; + font-weight: 600; +} + +.result_box .buttons{ + display: flex; + margin: 20px 0; +} + +.result_box .buttons button{ + margin: 0 10px; + height: 45px; + padding: 0 20px; + font-size: 18px; + font-weight: 500; + cursor: pointer; + border: none; + outline: none; + border-radius: 5px; + border: 1px solid #007bff; + transition: all 0.3s ease; +} + +.buttons button.restart{ + color: #fff; + background: #007bff; +} + +.buttons button.restart:hover{ + background: #0263ca; +} + +.buttons button.quit{ + color: #007bff; + background: #fff; +} + +.buttons button.quit:hover{ + color: #fff; + background: #007bff; +} \ No newline at end of file diff --git a/quiz.html b/quiz.html new file mode 100644 index 0000000..88c3917 --- /dev/null +++ b/quiz.html @@ -0,0 +1,84 @@ + + + + + + + + Awesome Quiz App | CodingNepal + + + + + + +
+ + +
+
Some Rules of this Quiz
+
+
1. You will have only 15 seconds per each question.
+
2. Once you select your answer, it can't be undone.
+
3. You can't select any option once time goes off.
+
4. You can't exit from the Quiz while you're playing.
+
5. You'll get points on the basis of your correct answers.
+
+
+ + +
+
+ + +
+
+
Awesome Quiz Application
+
+
Time Left
+
15
+
+
+
+
+
+ +
+
+ +
+
+ + + +
+ + +
+
+ +
+
You've completed the Quiz!
+
+ +
+
+ + +
+
+ + + + + + + + + += \ No newline at end of file diff --git a/quiz.js b/quiz.js new file mode 100644 index 0000000..bb6376b --- /dev/null +++ b/quiz.js @@ -0,0 +1,72 @@ +// creating an array and passing the number, questions, options, and answers +let questions = [ + { + numb: 1, + question: "What percentage of the Earth's surface is covered by water?", + answer: "90%", + options: [ + "50%", + "75%", + "90%", + "25%" + ] + }, + { + numb: 2, + question: "Which process describes the conversion of water vapor into liquid water droplets, forming clouds?", + answer: "C", + options: [ + "Condensation", + "Evaporation", + "Precipitation", + "Infiltration" + ] + }, + { + numb: 3, + question: "What is the primary source of freshwater on Earth?", + answer: "Groundwater ", + options: [ + "Rivers", + "Lakes", + "Oceans", + "Groundwater" + ] + }, + { + numb: 4, + question: "Which of the following is NOT a major use of water in households?", + answer: "Charging electronic devices", + options: [ + "Drinking", + "Showering", + "Watering lawns", + "Charging electronics devices" + ] + }, + { + numb: 5, + question: "What is the term for the natural replenishment of groundwater by percolating rainwater through the soil?", + answer: "Recharge", + options: [ + "Erosion", + "Evaporation", + "Transpiration", + "Recharge" + ] + }, + // you can uncomment the below codes and make duplicate as more as you want to add question + // but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9..... + + // { + // numb: 6, + // question: "Your Question is Here", + // answer: "Correct answer of the question is here", + // options: [ + // "Option 1", + // "option 2", + // "option 3", + // "option 4" + // ] + // }, +]; \ No newline at end of file diff --git a/quiz1.html b/quiz1.html new file mode 100644 index 0000000..1f757b9 --- /dev/null +++ b/quiz1.html @@ -0,0 +1,480 @@ + + + + + + + + + Awesome Quiz App + + + + + + + + +
+ + +
+
Some Rules of this Quiz
+
+
1. You will have only 15 seconds per each question.
+
2. You can select the asnwer only once.
+
3. You can't select any option once time goes off.
+
4. You can't exit from the Quiz while you're playing.
+
5. You'll get points on the basis of your correct answers.
+
+
+ + +
+
+ + +
+
+
Awesome Quiz Application
+
+
Time Left
+
15
+
+
+
+
+
+ +
+
+ +
+
+ + + +
+ + +
+
+ +
+
You've completed the Quiz!
+
+ +
+
+ + +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/quiz2.js b/quiz2.js new file mode 100644 index 0000000..f11fa96 --- /dev/null +++ b/quiz2.js @@ -0,0 +1,212 @@ +//selecting all required elements +const start_btn = document.querySelector(".start_btn button"); +const info_box = document.querySelector(".info_box"); +const exit_btn = info_box.querySelector(".buttons .quit"); +const continue_btn = info_box.querySelector(".buttons .restart"); +const quiz_box = document.querySelector(".quiz_box"); +const result_box = document.querySelector(".result_box"); +const option_list = document.querySelector(".option_list"); +const time_line = document.querySelector("header .time_line"); +const timeText = document.querySelector(".timer .time_left_txt"); +const timeCount = document.querySelector(".timer .timer_sec"); + +// if startQuiz button clicked +start_btn.onclick = ()=>{ + info_box.classList.add("activeInfo"); //show info box +} + +// if exitQuiz button clicked +exit_btn.onclick = ()=>{ + info_box.classList.remove("activeInfo"); //hide info box +} + +// if continueQuiz button clicked +continue_btn.onclick = ()=>{ + info_box.classList.remove("activeInfo"); //hide info box + quiz_box.classList.add("activeQuiz"); //show quiz box + showQuetions(0); //calling showQestions function + queCounter(1); //passing 1 parameter to queCounter + startTimer(15); //calling startTimer function + startTimerLine(0); //calling startTimerLine function +} + +let timeValue = 15; +let que_count = 0; +let que_numb = 1; +let userScore = 0; +let counter; +let counterLine; +let widthValue = 0; + +const restart_quiz = result_box.querySelector(".buttons .restart"); +const quit_quiz = result_box.querySelector(".buttons .quit"); + +// if restartQuiz button clicked +restart_quiz.onclick = ()=>{ + quiz_box.classList.add("activeQuiz"); //show quiz box + result_box.classList.remove("activeResult"); //hide result box + timeValue = 15; + que_count = 0; + que_numb = 1; + userScore = 0; + widthValue = 0; + showQuetions(que_count); //calling showQestions function + queCounter(que_numb); //passing que_numb value to queCounter + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + startTimer(timeValue); //calling startTimer function + startTimerLine(widthValue); //calling startTimerLine function + timeText.textContent = "Time Left"; //change the text of timeText to Time Left + next_btn.classList.remove("show"); //hide the next button +} + +// if quitQuiz button clicked +quit_quiz.onclick = ()=>{ + window.location.reload(); //reload the current window +} + +const next_btn = document.querySelector("footer .next_btn"); +const bottom_ques_counter = document.querySelector("footer .total_que"); + +// if Next Que button clicked +next_btn.onclick = ()=>{ + if(que_count < questions.length - 1){ //if question count is less than total question length + que_count++; //increment the que_count value + que_numb++; //increment the que_numb value + showQuetions(que_count); //calling showQestions function + queCounter(que_numb); //passing que_numb value to queCounter + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + startTimer(timeValue); //calling startTimer function + startTimerLine(widthValue); //calling startTimerLine function + timeText.textContent = "Time Left"; //change the timeText to Time Left + next_btn.classList.remove("show"); //hide the next button + }else{ + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + showResult(); //calling showResult function + } +} + +// getting questions and options from array +function showQuetions(index){ + const que_text = document.querySelector(".que_text"); + + //creating a new span and div tag for question and option and passing the value using array index + let que_tag = ''+ questions[index].numb + ". " + questions[index].question +''; + let option_tag = '
'+ questions[index].options[0] +'
' + + '
'+ questions[index].options[1] +'
' + + '
'+ questions[index].options[2] +'
' + + '
'+ questions[index].options[3] +'
'; + que_text.innerHTML = que_tag; //adding new span tag inside que_tag + option_list.innerHTML = option_tag; //adding new div tag inside option_tag + + const option = option_list.querySelectorAll(".option"); + + // set onclick attribute to all available options + for(i=0; i < option.length; i++){ + option[i].setAttribute("onclick", "optionSelected(this)"); + } +} +// creating the new div tags which for icons +let tickIconTag = '
'; +let crossIconTag = '
'; + +//if user clicked on option +function optionSelected(answer){ + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + let userAns = answer.textContent; //getting user selected option + let correcAns = questions[que_count].answer; //getting correct answer from array + const allOptions = option_list.children.length; //getting all option items + + if(userAns == correcAns){ //if user selected option is equal to array's correct answer + userScore += 1; //upgrading score value with 1 + answer.classList.add("correct"); //adding green color to correct selected option + answer.insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to correct selected option + console.log("Correct Answer"); + console.log("Your correct answers = " + userScore); + }else{ + answer.classList.add("incorrect"); //adding red color to correct selected option + answer.insertAdjacentHTML("beforeend", crossIconTag); //adding cross icon to correct selected option + console.log("Wrong Answer"); + + for(i=0; i < allOptions; i++){ + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option + console.log("Auto selected correct answer."); + } + } + } + for(i=0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options + } + next_btn.classList.add("show"); //show the next button if user selected any option +} + +function showResult(){ + info_box.classList.remove("activeInfo"); //hide info box + quiz_box.classList.remove("activeQuiz"); //hide quiz box + result_box.classList.add("activeResult"); //show result box + const scoreText = result_box.querySelector(".score_text"); + if (userScore > 3){ // if user scored more than 3 + //creating a new span tag and passing the user score number and total question number + let scoreTag = 'and congrats! , You got

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text + } + else if(userScore > 1){ // if user scored more than 1 + let scoreTag = 'and nice , You got

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; + } + else{ // if user scored less than 1 + let scoreTag = 'and sorry , You got only

'+ userScore +'

out of

'+ questions.length +'

'; + scoreText.innerHTML = scoreTag; + } +} + +function startTimer(time){ + counter = setInterval(timer, 1000); + function timer(){ + timeCount.textContent = time; //changing the value of timeCount with time value + time--; //decrement the time value + if(time < 9){ //if timer is less than 9 + let addZero = timeCount.textContent; + timeCount.textContent = "0" + addZero; //add a 0 before time value + } + if(time < 0){ //if timer is less than 0 + clearInterval(counter); //clear counter + timeText.textContent = "Time Off"; //change the time text to time off + const allOptions = option_list.children.length; //getting all option items + let correcAns = questions[que_count].answer; //getting correct answer from array + for(i=0; i < allOptions; i++){ + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option + console.log("Time Off: Auto selected correct answer."); + } + } + for(i=0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options + } + next_btn.classList.add("show"); //show the next button if user selected any option + } + } +} + +function startTimerLine(time){ + counterLine = setInterval(timer, 29); + function timer(){ + time += 1; //upgrading time value with 1 + time_line.style.width = time + "px"; //increasing width of time_line with px by time value + if(time > 549){ //if time value is greater than 549 + clearInterval(counterLine); //clear counterLine + } + } +} + +function queCounter(index){ + //creating a new span tag and passing the question number and total question + let totalQueCounTag = '

'+ index +'

of

'+ questions.length +'

Questions'; + bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a9496e5 --- /dev/null +++ b/script.js @@ -0,0 +1,85 @@ +const chatbotToggler = document.querySelector(".chatbot-toggler"); +const closeBtn = document.querySelector(".close-btn"); +const chatbox = document.querySelector(".chatbox"); +const chatInput = document.querySelector(".chat-input textarea"); +const sendChatBtn = document.querySelector(".chat-input span"); + +let userMessage = null; // Variable to store user's message +const API_KEY = "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"; // Paste your API key here +const inputInitHeight = chatInput.scrollHeight; + +const createChatLi = (message, className) => { + // Create a chat
  • element with passed message and className + const chatLi = document.createElement("li"); + chatLi.classList.add("chat", `${className}`); + let chatContent = className === "outgoing" ? `

    ` : `smart_toy

    `; + chatLi.innerHTML = chatContent; + chatLi.querySelector("p").textContent = message; + return chatLi; // return chat
  • element +} + +const generateResponse = (chatElement) => { + const API_URL = "https://api.openai.com/v1/chat/completions"; + const messageElement = chatElement.querySelector("p"); + + // Define the properties and message for the API request + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${"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"}` + }, + body: JSON.stringify({ + model: "gpt-3.5-turbo", + messages: [{role: "user", content: userMessage}], + }) + } + + // Send POST request to API, get response and set the reponse as paragraph text + fetch(API_URL, requestOptions).then(res => res.json()).then(data => { + messageElement.textContent = data.choices[0].message.content.trim(); + }).catch(() => { + messageElement.classList.add("error"); + messageElement.textContent = "Oops! Something went wrong. Please try again."; + }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight)); +} + +const handleChat = () => { + userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace + if(!userMessage) return; + + // Clear the input textarea and set its height to default + chatInput.value = ""; + chatInput.style.height = `${inputInitHeight}px`; + + // Append the user's message to the chatbox + chatbox.appendChild(createChatLi(userMessage, "outgoing")); + chatbox.scrollTo(0, chatbox.scrollHeight); + + setTimeout(() => { + // Display "Thinking..." message while waiting for the response + const incomingChatLi = createChatLi("Thinking...", "incoming"); + chatbox.appendChild(incomingChatLi); + chatbox.scrollTo(0, chatbox.scrollHeight); + generateResponse(incomingChatLi); + }, 600); +} + +chatInput.addEventListener("input", () => { + // Adjust the height of the input textarea based on its content + chatInput.style.height = `${inputInitHeight}px`; + chatInput.style.height = `${chatInput.scrollHeight}px`; +}); + +chatInput.addEventListener("keydown", (e) => { + // If Enter key is pressed without Shift key and the window + // width is greater than 800px, handle the chat + if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { + e.preventDefault(); + handleChat(); + } +}); + +sendChatBtn.addEventListener("click", handleChat); +closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot")); +chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot")); \ No newline at end of file diff --git a/script1.js b/script1.js new file mode 100644 index 0000000..a72ef5e --- /dev/null +++ b/script1.js @@ -0,0 +1,85 @@ +const chatbotToggler = document.querySelector(".chatbot-toggler"); +const closeBtn = document.querySelector(".close-btn"); +const chatbox = document.querySelector(".chatbox"); +const chatInput = document.querySelector(".chat-input textarea"); +const sendChatBtn = document.querySelector(".chat-input span"); + +let userMessage = null; // Variable to store user's message +const API_KEY = "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"; // Paste your API key here +const inputInitHeight = chatInput.scrollHeight; + +const createChatLi = (message, className) => { + // Create a chat
  • element with passed message and className + const chatLi = document.createElement("li"); + chatLi.classList.add("chat", `${className}`); + let chatContent = className === "outgoing" ? `

    ` : `smart_toy

    `; + chatLi.innerHTML = chatContent; + chatLi.querySelector("p").textContent = message; + return chatLi; // return chat
  • element +} + +const generateResponse = (chatElement) => { + const API_URL = "https://api.openai.com/v1/chat/completions"; + const messageElement = chatElement.querySelector("p"); + + // Define the properties and message for the API request + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${"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"}` + }, + body: JSON.stringify({ + model: "gpt-3.5-turbo", + messages: [{role: "user", content: userMessage}], + }) + } + + // Send POST request to API, get response and set the reponse as paragraph text + fetch(API_URL, requestOptions).then(res => res.json()).then(data => { + messageElement.textContent = data.choices[0].message.content.trim(); + }).catch(() => { + messageElement.classList.add("error"); + messageElement.textContent = "Oops! Something went wrong. Please try again."; + }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight)); +} + +const handleChat = () => { + userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace + if(!userMessage) return; + + // Clear the input textarea and set its height to default + chatInput.value = ""; + chatInput.style.height = `${inputInitHeight}px`; + + // Append the user's message to the chatbox + chatbox.appendChild(createChatLi(userMessage, "outgoing")); + chatbox.scrollTo(0, chatbox.scrollHeight); + + setTimeout(() => { + // Display "Thinking..." message while waiting for the response + const incomingChatLi = createChatLi("Thinking...", "incoming"); + chatbox.appendChild(incomingChatLi); + chatbox.scrollTo(0, chatbox.scrollHeight); + generateResponse(incomingChatLi); + }, 600); +} + +chatInput.addEventListener("input", () => { + // Adjust the height of the input textarea based on its content + chatInput.style.height = `${inputInitHeight}px`; + chatInput.style.height = `${chatInput.scrollHeight}px`; +}); + +chatInput.addEventListener("keydown", (e) => { + // If Enter key is pressed without Shift key and the window + // width is greater than 800px, handle the chat + if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { + e.preventDefault(); + handleChat(); + } +}); + +sendChatBtn.addEventListener("click", handleChat); +closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot")); +chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot")); \ No newline at end of file diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..f11fa96 --- /dev/null +++ b/script2.js @@ -0,0 +1,212 @@ +//selecting all required elements +const start_btn = document.querySelector(".start_btn button"); +const info_box = document.querySelector(".info_box"); +const exit_btn = info_box.querySelector(".buttons .quit"); +const continue_btn = info_box.querySelector(".buttons .restart"); +const quiz_box = document.querySelector(".quiz_box"); +const result_box = document.querySelector(".result_box"); +const option_list = document.querySelector(".option_list"); +const time_line = document.querySelector("header .time_line"); +const timeText = document.querySelector(".timer .time_left_txt"); +const timeCount = document.querySelector(".timer .timer_sec"); + +// if startQuiz button clicked +start_btn.onclick = ()=>{ + info_box.classList.add("activeInfo"); //show info box +} + +// if exitQuiz button clicked +exit_btn.onclick = ()=>{ + info_box.classList.remove("activeInfo"); //hide info box +} + +// if continueQuiz button clicked +continue_btn.onclick = ()=>{ + info_box.classList.remove("activeInfo"); //hide info box + quiz_box.classList.add("activeQuiz"); //show quiz box + showQuetions(0); //calling showQestions function + queCounter(1); //passing 1 parameter to queCounter + startTimer(15); //calling startTimer function + startTimerLine(0); //calling startTimerLine function +} + +let timeValue = 15; +let que_count = 0; +let que_numb = 1; +let userScore = 0; +let counter; +let counterLine; +let widthValue = 0; + +const restart_quiz = result_box.querySelector(".buttons .restart"); +const quit_quiz = result_box.querySelector(".buttons .quit"); + +// if restartQuiz button clicked +restart_quiz.onclick = ()=>{ + quiz_box.classList.add("activeQuiz"); //show quiz box + result_box.classList.remove("activeResult"); //hide result box + timeValue = 15; + que_count = 0; + que_numb = 1; + userScore = 0; + widthValue = 0; + showQuetions(que_count); //calling showQestions function + queCounter(que_numb); //passing que_numb value to queCounter + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + startTimer(timeValue); //calling startTimer function + startTimerLine(widthValue); //calling startTimerLine function + timeText.textContent = "Time Left"; //change the text of timeText to Time Left + next_btn.classList.remove("show"); //hide the next button +} + +// if quitQuiz button clicked +quit_quiz.onclick = ()=>{ + window.location.reload(); //reload the current window +} + +const next_btn = document.querySelector("footer .next_btn"); +const bottom_ques_counter = document.querySelector("footer .total_que"); + +// if Next Que button clicked +next_btn.onclick = ()=>{ + if(que_count < questions.length - 1){ //if question count is less than total question length + que_count++; //increment the que_count value + que_numb++; //increment the que_numb value + showQuetions(que_count); //calling showQestions function + queCounter(que_numb); //passing que_numb value to queCounter + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + startTimer(timeValue); //calling startTimer function + startTimerLine(widthValue); //calling startTimerLine function + timeText.textContent = "Time Left"; //change the timeText to Time Left + next_btn.classList.remove("show"); //hide the next button + }else{ + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + showResult(); //calling showResult function + } +} + +// getting questions and options from array +function showQuetions(index){ + const que_text = document.querySelector(".que_text"); + + //creating a new span and div tag for question and option and passing the value using array index + let que_tag = ''+ questions[index].numb + ". " + questions[index].question +''; + let option_tag = '
    '+ questions[index].options[0] +'
    ' + + '
    '+ questions[index].options[1] +'
    ' + + '
    '+ questions[index].options[2] +'
    ' + + '
    '+ questions[index].options[3] +'
    '; + que_text.innerHTML = que_tag; //adding new span tag inside que_tag + option_list.innerHTML = option_tag; //adding new div tag inside option_tag + + const option = option_list.querySelectorAll(".option"); + + // set onclick attribute to all available options + for(i=0; i < option.length; i++){ + option[i].setAttribute("onclick", "optionSelected(this)"); + } +} +// creating the new div tags which for icons +let tickIconTag = '
    '; +let crossIconTag = '
    '; + +//if user clicked on option +function optionSelected(answer){ + clearInterval(counter); //clear counter + clearInterval(counterLine); //clear counterLine + let userAns = answer.textContent; //getting user selected option + let correcAns = questions[que_count].answer; //getting correct answer from array + const allOptions = option_list.children.length; //getting all option items + + if(userAns == correcAns){ //if user selected option is equal to array's correct answer + userScore += 1; //upgrading score value with 1 + answer.classList.add("correct"); //adding green color to correct selected option + answer.insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to correct selected option + console.log("Correct Answer"); + console.log("Your correct answers = " + userScore); + }else{ + answer.classList.add("incorrect"); //adding red color to correct selected option + answer.insertAdjacentHTML("beforeend", crossIconTag); //adding cross icon to correct selected option + console.log("Wrong Answer"); + + for(i=0; i < allOptions; i++){ + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option + console.log("Auto selected correct answer."); + } + } + } + for(i=0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options + } + next_btn.classList.add("show"); //show the next button if user selected any option +} + +function showResult(){ + info_box.classList.remove("activeInfo"); //hide info box + quiz_box.classList.remove("activeQuiz"); //hide quiz box + result_box.classList.add("activeResult"); //show result box + const scoreText = result_box.querySelector(".score_text"); + if (userScore > 3){ // if user scored more than 3 + //creating a new span tag and passing the user score number and total question number + let scoreTag = 'and congrats! , You got

    '+ userScore +'

    out of

    '+ questions.length +'

    '; + scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text + } + else if(userScore > 1){ // if user scored more than 1 + let scoreTag = 'and nice , You got

    '+ userScore +'

    out of

    '+ questions.length +'

    '; + scoreText.innerHTML = scoreTag; + } + else{ // if user scored less than 1 + let scoreTag = 'and sorry , You got only

    '+ userScore +'

    out of

    '+ questions.length +'

    '; + scoreText.innerHTML = scoreTag; + } +} + +function startTimer(time){ + counter = setInterval(timer, 1000); + function timer(){ + timeCount.textContent = time; //changing the value of timeCount with time value + time--; //decrement the time value + if(time < 9){ //if timer is less than 9 + let addZero = timeCount.textContent; + timeCount.textContent = "0" + addZero; //add a 0 before time value + } + if(time < 0){ //if timer is less than 0 + clearInterval(counter); //clear counter + timeText.textContent = "Time Off"; //change the time text to time off + const allOptions = option_list.children.length; //getting all option items + let correcAns = questions[que_count].answer; //getting correct answer from array + for(i=0; i < allOptions; i++){ + if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer + option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option + console.log("Time Off: Auto selected correct answer."); + } + } + for(i=0; i < allOptions; i++){ + option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options + } + next_btn.classList.add("show"); //show the next button if user selected any option + } + } +} + +function startTimerLine(time){ + counterLine = setInterval(timer, 29); + function timer(){ + time += 1; //upgrading time value with 1 + time_line.style.width = time + "px"; //increasing width of time_line with px by time value + if(time > 549){ //if time value is greater than 549 + clearInterval(counterLine); //clear counterLine + } + } +} + +function queCounter(index){ + //creating a new span tag and passing the question number and total question + let totalQueCounTag = '

    '+ index +'

    of

    '+ questions.length +'

    Questions    '; + bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9b32261 --- /dev/null +++ b/style.css @@ -0,0 +1,462 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.title-text{ + font-size: 40px; + text-align: center; +} +body{ + font-family: 'Baloo Chettan 2', cursive; + line-height: 1.5; +} +/*navbar*/ +#menu-bar{ + width: 50px; + height: 10px; + margin: 50px 10px 10px 20px; + position:fixed; + cursor: pointer; + z-index: 1; +} + +.bar{ + background:orange; + border-radius: 10%; + transition: .4s; +} +#bar1{ + width:40px; + height: 10px; + transform: translateY(-4px); +} +#bar2{ + width: 40px; + height: 10px; +} +#bar3{ + width: 40px; + height: 10px; + transform: translateY(4px); +} +.change .bar{ + background: #fff; +} +.change #bar1{ + transform: translateY(6px); + rotate: z(45deg); +} +.change #bar3{ + transform: translateY(-15px); + rotate: z(-45deg); +} +.change #bar2{ + opacity: 0; +} +.nav li a{ + text-decoration: none; + color: orange; + font-size: 30px; + text-transform:uppercase ; + font-weight: bold; + +} +.nav li a:hover{ + color: #fff; + background: orange; + padding-left: 10px; +} +.nav li{ + margin: 20px 10px 10px 20px; + padding-top: 10px; + list-style-type:none; +} +.nav{ + display: none; + +} +.change-btn{ + display: block; +} + +/*header*/ +.header{ + /* display: flex;*/ + min-height: 100vh; + background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4)), + url(https://images.pexels.com/photos/372882/pexels-photo-372882.jpeg)center/cover no-repeat fixed; + /* flex-direction: column;*/ + margin-top: auto; +} +.hero{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + background-attachment: fixed; + width: 100%; + height: 100%; +} +.hero .title{ + color: #fff; + font-size: 50px; +} +.hero-button{ + display: inline-block; + text-decoration: none; + text-transform: uppercase; + padding: 13px 20px; + border-radius: 200px; + font-weight: bold; + background: orange; + color:#fff; + cursor: pointer; + border: 2px solid orange; + margin-top:10px; + +} +.hero-button:hover{ + background: #fff; + color: orange; + border: none; + + +} +.pulsate{ + /*-webkit-*/animation: pulsate 3s ease-in-out; + /*-webkit-*/animation-iteration-count:infinite ; + opacity: .3; + color: black; +} +@-webkit-keyframes pulsate{ + 0% { + opacity: .3; + } + 50% { + opacity: 1; + } + 100% { + opacity: .3; + } + +} + +/* End of header*/ +/*==========About Section============*/ +#about{ + padding: 40px; +} + +.about{ + margin: 30px 0; + display: flex; +} +.about-icon .fas{ + font-size: 60px; + color: orange; + margin-right: 20px; +} +.about-subtitle{ + text-transform: capitalize; + color: orange; + font-size: 25px; +} +.about-info{ + margin-top: 10px; + line-height: 1.5; +} +.about-icon:hover .fas, +.about-subtitle:hover{ + transition: transform 2s ease, color 2s ease; + transform: translateY(-10px); + color: #cd6100; + cursor: pointer; +} +@media screen and (min-width: 576px){ + .about-center{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + .about{ + flex: 0 0 calc(50% - 16px); + } +} +@media screen and (min-width:972px){ + .about{ + flex: 0 0 calc(33.3% - 16px); + } +} +/*=====end of Icon Section======*/ +/*=====Menu Section======*/ +.menu-image{ + min-height: 80vh; + background: url(https://images.pexels.com/photos/806361/pexels-photo-806361.jpeg?auto=compress&cs=tinysrgb&w=600) center/cover fixed no-repeat; +} +.menu-text{ + min-height: 80vh; + display: flex; + align-items: center; + background: orange; + columns: #0000; + padding: 40px 0; +} +.menu-text-center{ + width: 90%; + margin: 0 auto; +} +.menu-text h1{ + font-size: 40px; + text-transform: uppercase; + margin-bottom: 10px; +} +.menu-text p{ + margin: 20px 0; + line-height: 2; +} +.menu-text a{ + display: inline-block; + text-decoration: none; + text-transform: uppercase; + padding: 13px 20px; + border-radius: 200px; + font-weight: bold; + background: rgb(10, 10, 10); + color:orange; + cursor: pointer; + border: 2px solid #000; + margin-top:10px; +} +.menu-text a:hover{ + color:orange; + background: #fff; + border:none; + +} +@media screen and (min-width:776px){ + .menu{ + display: flex; + } + .menu-text{ + flex: 0 0 30%; + } + .menu-image{ + flex: 0 0 70%; + clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%) + } + .menu{ + background: orange; + } +} +/*========End of Menu Section====*/ + + +/*==========Social Icons====*/ + +#social-icons{ + height: 150px; + background:#fff; + text-align: center; + /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);*/ + padding: 50px 0 50px 0; +} +#social-icons a{ + display: inline-block; + padding: 5px 10px; + margin: 0 5px; + font-size: 40px; + border-radius:5px; + transition: transform 2s ease, color 2s ease; +} +#social-icons a:hover{ + transform: translateY(-20px); +} +.facebook{ + color: #3b5998; +} +.twitter{ + color: #38A1F3; +} +.instagram{ + color: #e1306c; +} +.plus{ + color:#db4a39; +} +/*====end of Social Icons======*/ +/*==========Numbers/ Counters=======*/ +.number{ + text-align: center; + background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), + url('https://images.pexels.com/photos/941869/pexels-photo-941869.jpeg?auto=compress&cs=tinysrgb&w=600') center/cover fixed no-repeat; + padding: 60px 0; + color:#fff; + } + .number p{ + font-size: 30px; + font-weight: bold; + } +.number:hover{ + color: orange; +} +.number .fas{ + font-size: 60px; + margin: 20px 0; +} +.number h3{ + text-transform: uppercase; +} +@media screen and (min-width:576PX){ + #numbers { + display: grid; + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width: 992px){ + #numbers{ + grid-template-columns: repeat(4, 1fr); + } +} +/*==========Cards Section========*/ +#food{ + padding: 20px ; +} +.food-container{ + max-width: 90vw; + margin: 0 auto; +} +.food-card{ + position: relative; + background: linear-gradient(rgba(205, 96, 0, 0.7),rgba(205,96,0,0.7)); + margin:20px 0; + color: #000; + overflow: hidden; + padding: 3px; + border-radius: 16px; + border: 1px solid orange; + box-shadow: 2px 3px 1px 1px #cd6100; +} + +#food img{ + width: 100%; + min-height: 100%; + display: block; + transition: transform 4s; +} + +.img-text{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + opacity: 0; + transition: opacity 4s; + +} +.img-footer{ + display: flex; + justify-content: space-between; + width: 100%; + position: absolute; + left: 0; + bottom: 0; + padding: 10px; + font-size: 20px; + opacity: 0; + color: #000; + transition: opacity 4s; +} +.img-text h1{ + font-size: 30px; + margin-bottom: 10px; +} +.food-card:hover img{ + opacity: 0.4; + transform: scale(1.3); +} +.food-card:hover .img-text, +.food-card:hover .img-footer{ + opacity:1; +} +.food-btn{ + display: inline-block; + background:#000; + text-decoration: none; + text-transform: capitalize; + padding: 12px 32px; + color: #fff; + font-weight: bold; + border-radius: 180px; + cursor: pointer; + margin-top: 16px; + transition: all 0.3s ease-in-out; + font-size:18px; + outline:none; +} +.food-btn:hover{ + color: orange; + background:#ffff; + border: #000; + outline: none; +} +.fas{ + font-size: 30px; +} +@media screen and (min-width: 576px){ + .food-container{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 16px; + } +} +@media screen and (min-width: 992px){ + .food-container{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap:16px ; + } +} +/*========End of Cards Section=======*/ +/*=========Gallery Section============*/ +#gallery{ + padding: 40px; + background: #fff; +} +.gallery-item{ + background: linear-gradient(rgb(rgba(241, 161, 13)) rgb(rgb(255, 165, 0))); +} +.gallery-item img{ + display:block; + width: 100%; + opacity: 1; + transition: opacity 2s ease; +} +.gallery-item img:hover{ + opacity: 0.5; +} +@media screen and (min-width:576px){ + #gallery-center{ + display: grid; + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width:992px){ + #gallery-center{ + grid-template-columns: repeat(4, 1fr); + } +} + +/*==========Footer========*/ +.footer{ + background:#000; + text-align: center; +} +.footer .text{ +text-transform: uppercase; +color: #fff; +font-size: 24px; +margin-top: 20px; +} \ No newline at end of file diff --git a/style1.css b/style1.css new file mode 100644 index 0000000..3eb5a3c --- /dev/null +++ b/style1.css @@ -0,0 +1,196 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +body { + background: #E3F2FD; +} +.chatbot-toggler { + position: fixed; + bottom: 30px; + right: 35px; + outline: none; + border: none; + height: 50px; + width: 50px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + border-radius: 50%; + background: #724ae8; + transition: all 0.2s ease;z-index: 999; +} +body.show-chatbot .chatbot-toggler { + transform: rotate(90deg); +} +.chatbot-toggler span { + color: #fff; + position: absolute; +} +.chatbot-toggler span:last-child, +body.show-chatbot .chatbot-toggler span:first-child { + opacity: 0; +} +body.show-chatbot .chatbot-toggler span:last-child { + opacity: 1; +} +.chatbot { + position: fixed; + right: 35px; + bottom: 90px; + width: 420px; + background: #fff; + border-radius: 15px; + overflow: hidden; + opacity: 0; + pointer-events: none; + transform: scale(0.5); + transform-origin: bottom right; + box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), + 0 32px 64px -48px rgba(0,0,0,0.5); + transition: all 0.1s ease; + z-index: 999; +} +body.show-chatbot .chatbot { + opacity: 1; + pointer-events: auto; + transform: scale(1); +} +.chatbot header { + padding: 16px 0; + position: relative; + text-align: center; + color: #fff; + background: #724ae8; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} +.chatbot header span { + position: absolute; + right: 15px; + top: 50%; + display: none; + cursor: pointer; + transform: translateY(-50%); +} +header h2 { + font-size: 1.4rem; +} +.chatbot .chatbox { + overflow-y: auto; + height: 510px; + padding: 30px 20px 100px; +} +.chatbot :where(.chatbox, textarea)::-webkit-scrollbar { + width: 6px; +} +.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track { + background: #fff; + border-radius: 25px; +} +.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 25px; +} +.chatbox .chat { + display: flex; + list-style: none; +} +.chatbox .outgoing { + margin: 20px 0; + justify-content: flex-end; +} +.chatbox .incoming span { + width: 32px; + height: 32px; + color: #fff; + cursor: default; + text-align: center; + line-height: 32px; + align-self: flex-end; + background: #724ae8; + border-radius: 4px; + margin: 0 10px 7px 0; +} +.chatbox .chat p { + white-space: pre-wrap; + padding: 12px 16px; + border-radius: 10px 10px 0 10px; + max-width: 75%; + color: #fff; + font-size: 0.95rem; + background: #724ae8; +} +.chatbox .incoming p { + border-radius: 10px 10px 10px 0; +} +.chatbox .chat p.error { + color: #721c24; + background: #f8d7da; +} +.chatbox .incoming p { + color: #000; + background: #f2f2f2; +} +.chatbot .chat-input { + display: flex; + gap: 5px; + position: absolute; + bottom: 0; + width: 100%; + background: #fff; + padding: 3px 20px; + border-top: 1px solid #ddd; +} +.chat-input textarea { + height: 55px; + width: 100%; + border: none; + outline: none; + resize: none; + max-height: 180px; + padding: 15px 15px 15px 0; + font-size: 0.95rem; +} +.chat-input span { + align-self: flex-end; + color: #724ae8; + cursor: pointer; + height: 55px; + display: flex; + align-items: center; + visibility: hidden; + font-size: 1.35rem; +} +.chat-input textarea:valid ~ span { + visibility: visible; +} + +@media (max-width: 490px) { + .chatbot-toggler { + right: 20px; + bottom: 20px; + } + .chatbot { + right: 0; + bottom: 0; + height: 100%; + border-radius: 0; + width: 100%; + } + .chatbot .chatbox { + height: 90%; + padding: 25px 15px 100px; + z-index: 999; + } + .chatbot .chat-input { + padding: 5px 15px; + } + .chatbot header span { + display: block; + } +} \ No newline at end of file diff --git a/video_20231007_173423_edit (online-video-cutter.com).mp4 b/video_20231007_173423_edit (online-video-cutter.com).mp4 new file mode 100644 index 0000000..52192bc Binary files /dev/null and b/video_20231007_173423_edit (online-video-cutter.com).mp4 differ diff --git a/video_20231008_030055_edit (online-video-cutter.com) (1).mp4 b/video_20231008_030055_edit (online-video-cutter.com) (1).mp4 new file mode 100644 index 0000000..4cea427 Binary files /dev/null and b/video_20231008_030055_edit (online-video-cutter.com) (1).mp4 differ