diff --git a/Capcha Generator/index.html b/Capcha Generator/index.html index 0fa730b9..ee1f3e18 100644 --- a/Capcha Generator/index.html +++ b/Capcha Generator/index.html @@ -1,91 +1,43 @@ - - - - + + + + Captcha Generator - + - + - - -
-
Captcha Generator
-
- - +
+
+ + +
+
Entered captcha is correct
+
+ +
+
+ + +
+
-
- -
-
Entered captcha is correct
-
- -
-
-

Captcha History

- -
-
- - -
- - - - - + + diff --git a/Capcha Generator/scripts/script.js b/Capcha Generator/scripts/script.js index dd84cffb..7af13883 100644 --- a/Capcha Generator/scripts/script.js +++ b/Capcha Generator/scripts/script.js @@ -3,74 +3,76 @@ const captchaTextBox = document.querySelector(".captch_box input"); const refreshButton = document.querySelector(".refresh_button"); const captchaInputBox = document.querySelector(".captch_input input"); const message = document.querySelector(".message"); -const submitButton = document.querySelector(".button"); +const submitButton = document.querySelector(".button button"); +const difficultySelect = document.querySelector("#difficulty"); -// Variable to store generated captcha and captcha history +// Variable to store generated captcha let captchaText = null; -const captchaHistory = []; // Function to generate captcha const generateCaptcha = () => { - const randomString = Math.random().toString(36).substring(2, 7); + let captchaLength; + + switch (difficultySelect.value) { + case "medium": + captchaLength = 7; + break; + case "hard": + captchaLength = 10; + break; + case "easy": + default: + captchaLength = 5; + break; + } + + const randomString = Math.random().toString(36).substring(2, 2 + captchaLength); const randomStringArray = randomString.split(""); const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char)); captchaText = changeString.join(" "); captchaTextBox.value = captchaText; - captchaHistory.unshift(captchaText); // Add generated captcha to history + console.log(captchaText); }; -// Function to refresh captcha on button click const refreshBtnClick = () => { generateCaptcha(); captchaInputBox.value = ""; captchaKeyUpValidate(); }; -// Function to validate captcha input on keyup event const captchaKeyUpValidate = () => { - submitButton.classList.toggle("disabled", !captchaInputBox.value); - if (!captchaInputBox.value) message.classList.remove("active"); + const isInputEmpty = !captchaInputBox.value.trim(); + submitButton.parentElement.classList.toggle("disabled", isInputEmpty); + + if (isInputEmpty) { + message.classList.remove("active"); + } }; -// Function to handle submission of captcha +// Validation const submitBtnClick = () => { - captchaText = captchaText.split("").filter((char) => char !== " ").join(""); + captchaText = captchaText + .split("") + .filter((char) => char !== " ") + .join(""); message.classList.add("active"); // Check if the entered captcha text is correct or not if (captchaInputBox.value === captchaText) { - swal("Verification Success..","Hooray!","success"); + swal("Verification Success..", "Hooray!", "success"); message.innerText = "Entered captcha is correct"; message.style.color = "#1940a5"; } else { - swal("Incorrect!","Please enter the correct captcha.","warning") + swal("Incorrect!", "Please enter the correct captcha.", "warning"); message.innerText = "Entered captcha is not correct"; message.style.color = "#FF2525"; } - updateCaptchaHistory(); // Update captcha history after submission -}; - -// Function to update captcha history -const updateCaptchaHistory = () => { - const historyList = document.getElementById("captchaHistoryList"); - historyList.innerHTML = ""; - captchaHistory.forEach((captcha) => { - const listItem = document.createElement("li"); - listItem.textContent = captcha; - historyList.appendChild(listItem); - }); -}; - -// Function to play audio captcha -const playAudioCaptcha = () => { - const audio = new Audio('audio/captcha.mp3'); - audio.play(); }; -// Add event listeners for the refresh button, captchaInputBox, submit button, and audio captcha button +// Add event listeners for the refresh button, captchaInputBox, submit button refreshButton.addEventListener("click", refreshBtnClick); captchaInputBox.addEventListener("keyup", captchaKeyUpValidate); submitButton.addEventListener("click", submitBtnClick); -document.querySelector(".audio-captcha button").addEventListener("click", playAudioCaptcha); +difficultySelect.addEventListener("change", generateCaptcha); // Generate a captcha when the page loads generateCaptcha(); diff --git a/Capcha Generator/src/style.css b/Capcha Generator/src/style.css index 4cd2b0ab..30854bd5 100644 --- a/Capcha Generator/src/style.css +++ b/Capcha Generator/src/style.css @@ -1,32 +1,30 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap"); + * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } + body { height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url(bg.jpg); - background-size: cover; - background-position: -1px; - } + .container { position: relative; max-width: 300px; - width: 300px; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - border-bottom-right-radius: 15px; - border: 1px solid #1e1b18; - padding: 15px 25px 25px; - background: rgba(255, 255,255, 0.4); + width: 100%; + border-radius: 12px; + padding: 20px 30px 30px; /* Increased padding */ + background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } + header { color: #333; margin-bottom: 20px; @@ -34,50 +32,32 @@ header { font-weight: 600; text-align: center; } + .input_field { position: relative; - height: 45px; - margin-top: 15px; + height: 50px; /* Increased height */ + margin-top: 20px; /* Increased top margin */ width: 100%; } -#inputfield{ - background-color: #0d5dd5; - color: #fff; - transition: 0.4s; - font-size: 13px; - border: 1px solid #333; -} -#inputfield:hover{ - background-color: #06f; - color: #fff; - border: 1px solid #333; - offset: 20px; -} + .refresh_button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); - background: #fcc4f4; - height: 30px; - width: 30px; + background: #1940a5; + height: 40px; /* Increased height */ + width: 40px; /* Increased width */ border: none; - border-radius: 50%; - color: #2c2926; + border-radius: 4px; + color: #fff; cursor: pointer; - border: 1px solid #fcc4f4; - box-shadow: 1px 2px 3px rgba(0,0,0,0.3); } + .refresh_button:active { transform: translateY(-50%) scale(0.98); } -#refbut{ - transition: 0.4s; -} -#refbut:hover{ - box-shadow: 1px 2px 3px rgba(0,0,0,0.6); - -} + .input_field input, .button button { height: 100%; @@ -85,70 +65,60 @@ header { outline: none; border: none; border-radius: 8px; + font-size: 18px; /* Increased font size */ } + .input_field input { padding: 0 15px; border: 1px solid rgba(0, 0, 0, 0.1); } + .captch_box input { color: #6b6b6b; - font-size: 22px; + font-size: 28px; /* Increased font size for captcha display */ pointer-events: none; } + .captch_input input:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } -#captchaOutput{ - background: rgba(255, 175, 250, 0.457); - color: #555; -} -#captchaInput{ - transition: 0.4s; - background: rgba(255, 255, 255, 0.457); - border: 1px solid #444; -} -#captchaInput:hover{ - border: 1px solid #444; - background-color: white; -} -.captcha-history{ - margin-top: 15px; - margin-bottom: 15px; - font-size: 14px; - color: #333; -} + .message { - font-size: 14px; - margin: 14px 0; + font-size: 16px; /* Increased font size */ + margin: 20px 0; /* Increased margin */ color: #1940a5; display: none; } + .message.active { display: block; } + .button button { background: #1940a5; color: #fff; cursor: pointer; user-select: none; } + .button button:active { transform: scale(0.99); } + .button.disabled { opacity: 0.6; pointer-events: none; } -#audcaptch{ - padding: 7px; - border: 1px solid #333; - border-radius: 6px; - font-size: 10px; - color: #333; - background: rgba(252, 196, 244, 0.7); - transition: 0.4s; + +.difficulty select { + height: 50px; /* Increased height */ + font-size: 18px; /* Increased font size */ + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.1); } -#audcaptch:hover{ - background: rgba(252, 196, 244, 0.8); - box-shadow: 1px 2px 3px #1940a5; + +.error_message { + font-size: 14px; + color: red; + margin-top: 10px; } diff --git a/Movie Finder/index.html b/Movie Finder/index.html index 8cb310d4..29fa0206 100644 --- a/Movie Finder/index.html +++ b/Movie Finder/index.html @@ -8,35 +8,31 @@ - + - -
+
-
-
+
+

Search Movie:

- - -
-
+ +
-
-
-
-
+
+
+
+
- - + - \ No newline at end of file + diff --git a/Movie Finder/scripts/script.js b/Movie Finder/scripts/script.js index cc4a8263..20a6c5f5 100644 --- a/Movie Finder/scripts/script.js +++ b/Movie Finder/scripts/script.js @@ -86,6 +86,27 @@ function displayMovieDetails(details){ `; } +const themeToggle = document.getElementById('theme-toggle'); + +themeToggle.addEventListener('click', () => { + if (document.body.classList.contains('light-mode')) { + document.body.classList.remove('light-mode'); + document.body.classList.add('dark-mode'); + } else { + document.body.classList.remove('dark-mode'); + document.body.classList.add('light-mode'); + } +}); + +// You might want to initialize the theme based on user preference or default to dark mode +document.addEventListener('DOMContentLoaded', () => { + const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkScheme) { + document.body.classList.add('dark-mode'); + } else { + document.body.classList.add('light-mode'); + } +}); window.addEventListener('click', (event) => { if(event.target.className != "form-control"){ diff --git a/Movie Finder/src/style.css b/Movie Finder/src/style.css index f307b891..c03ee7ce 100644 --- a/Movie Finder/src/style.css +++ b/Movie Finder/src/style.css @@ -1,300 +1,105 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); -:root{ - --md-dark-color: #1d1d1d; +:root { + --dark-background: #1d1d1d; --dark-color: #171717; - --light-dark-color: #292929; - --yellow-color: #d4aa11; + --light-background: #f0f0f0; + --light-color: #000; + --highlight-color: #d4aa11; } -*{ - padding: 0; - margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -body{ +body { font-family: 'Inter', sans-serif; + transition: background-color 0.3s, color 0.3s; width: 100vh; height: 100vh; } -::-webkit-scrollbar { - width: 15px; +body.light-mode { + background-color: var(--light-background); + color: var(--light-color); } -::-webkit-scrollbar-thumb { - background-color: #292929; - border-radius: 5px; +body.dark-mode { + background-color: var(--dark-background); + color: var(--dark-color); } -a{ - text-decoration: none; -} -img{ - width: 100%; - display: block; -} -.wrapper{ +.wrapper { min-height: 100vh; background-color: var(--dark-color); -} -.wrapper .container{ - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; + transition: background-color 0.3s; } -.search-container{ - background-color: var(--md-dark-color); +.search-container { + background-color: var(--dark-background); height: 180px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + align-items: center; + justify-content: center; } -.search-element{ - display: -webkit-box; - display: -ms-flexbox; +.search-element { display: flex; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; position: relative; } -.search-element h3{ - -ms-flex-item-align: center; - align-self: center; - margin-right: 1rem; - font-size: 2rem; - color: #fff; - font-weight: 500; - margin-bottom: 1.5rem; + +.search-element h3 { + color: var(--highlight-color); } -.search-element .form-control{ + +.search-element .form-control { padding: 1rem 2rem; font-size: 1.4rem; border: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; outline: none; - color: var(--light-dark-color); + color: var(--dark-color); width: 350px; } -.search-list{ + +.search-list { position: absolute; right: 0; top: 100%; max-height: 500px; - overflow-y: scroll; + overflow-y: auto; z-index: 10; } -.search-list .search-list-item{ - background-color: var(--light-dark-color); + +.search-list .search-list-item { + background-color: var(--dark-background); padding: 0.5rem; border-bottom: 1px solid var(--dark-color); width: calc(350px - 8px); - color: #fff; + color: var(--light-color); cursor: pointer; - -webkit-transition: background-color 200ms ease; - -o-transition: background-color 200ms ease; transition: background-color 200ms ease; } -.search-list .search-list-item:Hover{ - background-color: #1f1f1f; -} -.search-list-item{ - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.search-item-thumbnail img{ - width: 40px; - margin-right: 1rem; -} -.search-item-info h3{ - font-weight: 600; - font-size: 1rem; -} -.search-item-info p{ - font-size: 0.8rem; - margin-top: 0.5rem; - font-weight: 600; - opacity: 0.6; -} - -/* thumbnail */ -.search-list::-webkit-scrollbar{ - width: 8px; -} -.search-list::-webkit-scrollbar-track{ - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -} -.search-list::-webkit-scrollbar-thumb{ - background-color: var(--yellow-color); - outline: none; - border-radius: 10px; -} -/* js related class */ -.hide-search-list{ - display: none; +.search-list .search-list-item:hover { + background-color: var(--highlight-color); } -/* movie result */ -.result-container{ +.result-container { padding: 3rem 0; } -.movie-poster img{ - max-width: 300px; - margin: 0 auto; - border: 4px solid #fff; -} -.movie-info{ - text-align: center; - color: #fff; - padding-top: 3rem; -} -/* movie info stylings */ -.movie-title{ - font-size: 2rem; - color: var(--yellow-color); -} -.movie-misc-info{ - list-style-type: none; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 1rem; -} -.movie-info .year{ - font-weight: 500; -} -.movie-info .rated{ - background-color: var(--yellow-color); - padding: 0.4rem; - margin: 0 0.4rem; - border-radius: 3px; - font-weight: 600; -} -.movie-info .released{ - font-size: 0.9rem; - opacity: 0.9; -} -.movie-info .writer{ - padding: 0.5rem; - margin: 1rem 0; -} -.movie-info .genre{ - background-color: var(--light-dark-color); - display: inline-block; - padding: 0.5rem; - border-radius: 3px; -} -.movie-info .plot{ - max-width: 400px; - margin: 1rem auto; -} -.movie-info .language{ - color: var(--yellow-color); - font-style: italic; -} -.movie-info .awards{ - font-weight: 300; - font-size: 0.9rem; -} -.movie-info .awards i{ - color: var(--yellow-color); - margin: 1rem 0.7rem 0 0; +.result-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; } -@media(max-width: 450px){ - .logo p{ - font-size: 1.4rem; - } - .search-element .form-control{ - width: 90%; - margin: 0 auto; - padding: 0.5rem 1rem; - } - .search-element h3{ - font-size: 1.4rem; - } - .search-list{ - width: 90%; - right: 50%; - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); - transform: translateX(50%); - } - .search-list .search-list-item{ - width: 100%; - } - .movie-misc-info{ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .movie-misc-info li:nth-child(2){ - margin: 0.8rem 0; - } +#theme-toggle { + margin: 1rem; + padding: 0.5rem 1rem; + border: none; + background-color: var(--highlight-color); + color: var(--light-color); + cursor: pointer; + border-radius: 5px; + font-size: 1rem; } - -@media(min-width: 800px){ - .search-element{ - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .search-element h3{ - margin-bottom: 0; - } - .result-grid{ - display: grid; - grid-template-columns: repeat(2, 1fr); - } - .movie-info{ - text-align: left; - padding-top: 0; - } - .movie-info .movie-misc-info{ - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - padding-left: 0; - } - .movie-info .plot{ - margin-left: 0; - } - .movie-info .writer{ - padding-left: 0; - margin-left: 0; - } -} \ No newline at end of file diff --git a/RESTAURANT/BURGER.jpeg b/RESTAURANT/BURGER.jpeg new file mode 100644 index 00000000..70b0c3e0 Binary files /dev/null and b/RESTAURANT/BURGER.jpeg differ diff --git a/RESTAURANT/a_pasta.png b/RESTAURANT/a_pasta.png new file mode 100644 index 00000000..6b44a2f1 Binary files /dev/null and b/RESTAURANT/a_pasta.png differ diff --git a/RESTAURANT/app.js b/RESTAURANT/app.js new file mode 100644 index 00000000..95529825 --- /dev/null +++ b/RESTAURANT/app.js @@ -0,0 +1,90 @@ +function validateEmail() { + const emailInput = document.getElementById("emailInput"); + const validationResult = document.getElementById("validationResult"); + + + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; + + const email = emailInput.value; + + if (emailPattern.test(email)) { + validationResult.innerHTML = "Valid email address"; + validationResult.style.color = "green"; + } else { + validationResult.innerHTML = "Invalid email address"; + validationResult.style.color = "red"; + } +} +// select elements + +const header = document.querySelector(".header"); +const nav = document.querySelector(".nav"); +const ul = document.querySelector(".nav__menu"); + +// sticky navigation using Intersection observer api for better performance + +const navHeight = nav.getBoundingClientRect().height; + +const stickyNav = (entries) => { + const [entry] = entries; + + if (!entry.isIntersecting) nav.classList.add("header__sticky"); + else nav.classList.remove("header__sticky"); +}; + +const headerObserver = new IntersectionObserver(stickyNav, { + root: null, + threshold: 0, + rootMargin: `${navHeight}px`, +}); + +headerObserver.observe(header); + +// page navigation scroll smoothly with event delegation +const sections = document.querySelectorAll("section"); + +ul.addEventListener("click", (e) => { + e.preventDefault(); + + if (e.target.classList.contains("nav__link")) { + const id = e.target.getAttribute("href"); + + document.querySelector(id).scrollIntoView({ behavior: "smooth" }); + sections.forEach((section) => (section.style.paddingTop = "100px")); + } +}); + +// fading animation with better performance +const allSections = document.querySelectorAll(".section"); + +const fadingSection = (entries, observer) => { + const [entry] = entries; + if (!entry.isIntersecting) return; + entry.target.classList.remove("section__hidden"); + observer.unobserve(entry.target); +}; + +const sectionObserver = new IntersectionObserver(fadingSection, { + root: null, + threshold: 0.12, +}); + +allSections.forEach((section) => { + sectionObserver.observe(section); + section.classList.add("section__hidden"); +}); + +// mobile menu +const mobileMenu = document.querySelector(".mobile__menu"); +const overlay = document.querySelector(".navigation"); + +const showMenu = () => { + overlay.classList.add("show__menu"); +}; + +const hideMenu = () => { + overlay.classList.remove("show__menu"); +}; + +mobileMenu.addEventListener("click", showMenu); +overlay.addEventListener("click", hideMenu); \ No newline at end of file diff --git a/RESTAURANT/biryani.jpeg b/RESTAURANT/biryani.jpeg new file mode 100644 index 00000000..d0669c68 Binary files /dev/null and b/RESTAURANT/biryani.jpeg differ diff --git a/RESTAURANT/fries.jpeg b/RESTAURANT/fries.jpeg new file mode 100644 index 00000000..518188a1 Binary files /dev/null and b/RESTAURANT/fries.jpeg differ diff --git a/RESTAURANT/home.html b/RESTAURANT/home.html new file mode 100644 index 00000000..4902299e --- /dev/null +++ b/RESTAURANT/home.html @@ -0,0 +1,150 @@ + + + + + + Static E-Commerce Website + + + + + + + + + + + +
+
+

Welcome to Our E-Commerce Store

+

Your slogan or brief description goes here.

+
+
+ + + + + +
+

Gallery

+
+
+
+ Image 1 +
+
Image 1
+

Description of Image 1.

+
+
+
+
+
+ Image 2 +
+
Image 2
+

Description of Image 2.

+
+
+
+
+
+ Image 3 +
+
Image 3
+

Description of Image 3.

+
+
+
+
+
+ + +
+
+ Your company name © 2024 +
+
+ + + diff --git a/RESTAURANT/images/download.png b/RESTAURANT/images/download.png new file mode 100644 index 00000000..31054635 Binary files /dev/null and b/RESTAURANT/images/download.png differ diff --git a/RESTAURANT/images/listicle_1679898015193_bcrkz_1040x500.jpg b/RESTAURANT/images/listicle_1679898015193_bcrkz_1040x500.jpg new file mode 100644 index 00000000..3161bad7 Binary files /dev/null and b/RESTAURANT/images/listicle_1679898015193_bcrkz_1040x500.jpg differ diff --git a/RESTAURANT/logo-img.jpeg b/RESTAURANT/logo-img.jpeg new file mode 100644 index 00000000..dbc15806 Binary files /dev/null and b/RESTAURANT/logo-img.jpeg differ diff --git a/RESTAURANT/noodles.png b/RESTAURANT/noodles.png new file mode 100644 index 00000000..364473b5 Binary files /dev/null and b/RESTAURANT/noodles.png differ diff --git a/RESTAURANT/offer.jpeg b/RESTAURANT/offer.jpeg new file mode 100644 index 00000000..57afe119 Binary files /dev/null and b/RESTAURANT/offer.jpeg differ diff --git a/RESTAURANT/p-pizza.png b/RESTAURANT/p-pizza.png new file mode 100644 index 00000000..ad9e6a03 Binary files /dev/null and b/RESTAURANT/p-pizza.png differ diff --git a/RESTAURANT/pasta.png b/RESTAURANT/pasta.png new file mode 100644 index 00000000..d321ae31 Binary files /dev/null and b/RESTAURANT/pasta.png differ diff --git a/RESTAURANT/res.html b/RESTAURANT/res.html new file mode 100644 index 00000000..0fbeea9e --- /dev/null +++ b/RESTAURANT/res.html @@ -0,0 +1,449 @@ + + + + + + + Restuarant Website + + + + + + + + + +
+ +
+ + + + +
+ +
+
+
+
+

Today's Special

+

Italian Pizza

+

+ That sounds delicious! Italian pizza is a classic favorite for many people. + +

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

Popular Dishes

+
+ +
+
+
+ +
+ +
+

Papporoni Pizza

+
+ + + + + +
+ +
+ $23.99 + +
+
+
+ +
+
+ +
+ +
+

Pasta

+
+ + + + + +
+ +
+ $19.99 + +
+
+
+ +
+
+ +
+ +
+

Biryani

+
+ + + + + +
+ +
+ $29.99 + +
+
+
+
+
+
+ + + +
+
+
+
+ +
+ +
+

+ We pride ourselves on making real food from the best + ingredients. +

+

+ Real food made with the best ingredients often results in a more authentic and satisfying dining experience. +

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

+ Get upto 50% offer on festival! +

+

+ Elevate your celebrations with a feast beyond compare! From savory pastas to aromatic biryanis and mouthwatering pepperoni pizzas, savor the season with up to 50% off on our diverse and delectable menu. +

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

Our Top Recipes

+
+ +
+
+
+ +
+
+

Better than takeout sesame chicken

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, + totam! +

+ + Read More +
+
+ +
+
+ +
+
+

Better than takeout sesame chicken

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, + totam! +

+ + Read More +
+
+ +
+
+ +
+
+

Shahi biriyani

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, + totam! +

+ + Read More +
+
+
+
+
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/RESTAURANT/style.css b/RESTAURANT/style.css new file mode 100644 index 00000000..9a1f6fc3 --- /dev/null +++ b/RESTAURANT/style.css @@ -0,0 +1,752 @@ +/* ======== google fonts ========= */ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap"); + +/* ======== css variables ============ */ +:root { + --primary-color: #a1ff69; + --secondary-color: #13252f; + --heading-color: #fff; + --body-bg: #13252f; + --small-text-color: #acb2b2; + --font-name: "Montserrat", sans-serif; + --card-bg: #152833; +} + +/* base style */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background: var(--body-bg); + font-family: var(--font-name); +} + +a { + text-decoration: none; + color: unset; +} + +ul { + list-style: none; +} + +p { + color: var(--small-text-color); + font-size: 0.9rem; + line-height: 28px; +} + +h1, +h2, +h3, +h4 { + color: var(--heading-color); + font-weight: 500; +} + +/* reuseable css */ + +.container { + width: 1140px; + margin: auto; + padding: 0px 20px; +} + +.highlight { + color: var(--primary-color); +} + +section { + padding: 60px 0px; +} + +/* ======= header style ========= */ + +.nav { + width: 100%; + height: 80px; + line-height: 80px; + z-index: 9999; +} + +.nav__wrapper { + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav__menu { + display: flex; + align-items: center; + column-gap: 2.7rem; +} + +.nav__link { + color: var(--small-text-color); + font-weight: 500; + cursor: pointer; + transition: 0.3s; +} + +.nav__link:hover { + color: var(--primary-color); +} + +.nav__item:nth-child(1) a { + color: #fff; + position: relative; + z-index: 9; +} + +.nav__item:nth-child(1) a::before { + content: ""; + width: 40px; + height: 2px; + background: var(--primary-color); + color: var(--primary-color); + position: absolute; + top: 120%; + left: 0; + z-index: 999; +} + +.mobile__menu { + color: #fff; + font-size: 1.3rem; + cursor: pointer; + display: none; +} + +.nav.header__sticky { + position: fixed; + top: 0; + left: 0; + background: var(--card-bg); +} + +/* hero section style */ + +.hero__wrapper { + display: flex; + justify-content: space-between; + column-gap: 2rem; +} + +.hero__content, +.hero__img { + width: 50%; +} + +.hero__img img { + width: 100%; +} + +.hero__content h2 { + font-size: 3rem; + line-height: 65px; +} + +.hero__content p { + margin-top: 40px; +} + +.hero__btns { + display: flex; + align-items: center; + column-gap: 2rem; + margin-top: 40px; +} + +.view__more-btn { + padding: 10px 35px; + background: var(--primary-color); + border-radius: 5px; + + border: none; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + color: var(--secondary-color); +} + +.play__btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-color); + border-radius: 50%; + border: 5px solid #689e48; + cursor: pointer; + box-shadow: 2px 2px 10px -2px #689e48; +} + +.hero__content { + padding-top: 40px; +} + +/* popular dishes style */ +.dishes__section-top { + text-align: center; + margin-bottom: 50px; +} + +.dishes__section-top h2 { + font-size: 2rem; + font-weight: 500; +} + +.dishes__wrapper { + display: flex; + align-items: center; + column-gap: 1.5rem; +} + +.dish__item { + width: 33%; + display: flex; + column-gap: 1rem; + cursor: pointer; + background: var(--card-bg); + padding: 20px; + border-radius: 5px; + transition: 0.3s; +} + +.dish__img { + width: 25%; +} + +.dish__img img { + width: 100%; +} + +.ratings { + display: flex; + align-items: center; + margin-top: 10px; + margin-bottom: 20px; +} + +.ratings span i { + color: var(--primary-color); +} + +.dish__content-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +.dish__price { + font-weight: 600; + font-size: 1.2rem; + color: #fff; +} + +.dish__content { + width: 75%; +} + +.add__to-cart { + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-color); + color: var(--secondary-color); + cursor: pointer; + border-radius: 5px; +} + +.add__to-cart i { + font-weight: 600; +} + +.dish_item:nth-child(2) .dish_img img, +.dish_item:nth-child(3) .dish_img img { + width: 150%; + margin-left: -15px; +} + +.dish__item:hover { + transform: translateY(-1rem); +} + +/* about us section style */ +.about__wrapper { + display: flex; + align-items: center; + column-gap: 2rem; +} + +.about__img, +.about__content { + width: 50%; +} + +.about__img img { + width: 100%; +} + +.about__content h3 { + font-size: 1.7rem; + line-height: 50px; + margin-bottom: 20px; +} + +.learn__more { + margin-top: 40px; + padding: 10px 35px; + font-size: 1rem; + border: none; + background: var(--primary-color); + border-radius: 5px; + cursor: pointer; +} + +.learn__more a { + color: var(--secondary-color); + font-weight: 600; +} + +.item { + padding: 20px; + background: var(--card-bg); + width: 33%; + border-radius: 5px; +} + +.item img { + width: 100%; +} + +.content-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +.item h4 { + font-size: 1.3rem; +} + +.wrapper { + display: flex; + align-items: center; + column-gap: 2rem; +} + +/* menu style */ +.menu__section-top { + margin-bottom: 50px; +} + +.menu__section-top h2 { + font-size: 2rem; +} + +.menu__wrapper { + display: flex; + align-items: center; + column-gap: 2rem; + row-gap: 2rem; +} + +.menu__item { + width: 33%; + padding: 20px; + background: var(--card-bg); + border-radius: 5px; + cursor: pointer; +} + +.menu__img img { + width: 100%; +} + +.menu__card-bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-top: 15px; +} + +.menu__card-bottom .ratings { + margin-bottom: 10px; +} + +/* offer section style */ +.offer__wrapper { + display: flex; + column-gap: 2rem; + align-items: center; +} + +.offer__content, +.offer__img { + width: 50%; +} + +.offer__img img { + width: 100%; + height:100%; +} + +.offer__content h2 { + font-size: 2.5rem; + line-height: 50px; + margin-bottom: 30px; +} + +.offer__content p { + margin-bottom: 40px; +} + +/* blog section style */ +.blog__top { + margin-bottom: 50px; + text-align: center; +} + +.blog__top h2 { + font-size: 2rem; +} + +.blog__wrapper { + display: flex; + align-items: center; + column-gap: 2rem; +} + +.blog__item { + width: 33%; + border: 1px solid var(--card-bg); + border-radius: 5px; + padding: 20px; +} + +.blog__img img { + width: 100%; + border-radius: 5px; +} + +.blog__content h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +.blog__content p { + margin-bottom: 20px; +} + +.read__more { + color: var(--primary-color); + font-size: 0.9rem; + cursor: pointer; +} + +/* footer style */ + +.footer { + padding-top: 60px; + padding-bottom: 30px; + background: var(--card-bg); +} +.footer__wrapper { + display: flex; + column-gap: 2rem; +} + +.footer__logo { + width: 40%; +} + +.footer__box { + width: 15%; +} + +.footer__logo p { + margin-top: 15px; + margin-bottom: 20px; +} + +.subscribe__box { + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid var(--primary-color); + border-radius: 5px; + width: 90%; +} + +.subscribe__box input { + padding: 15px 7px; + border: none; + outline: none; + background: transparent; + color: #acb2b2; + font-size: 0.9rem; +} + +.subscribe__box input::placeholder { + color: #acb2b2; +} + +.subscribe__btn { + padding: 15px 25px; + background: var(--primary-color); + color: var(--secondary-color); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + border: none; + outline: none; + border-radius: 0px 5px 5px 0px; +} + +.footer__link-title { + margin-bottom: 20px; +} + +.footer__menu { + display: flex; + flex-direction: column; + row-gap: 1rem; +} + +.footer__link { + color: var(--small-text-color); + font-size: 0.9rem; +} + +.footer__copyright { + text-align: center; + margin-top: 50px; +} + +/* animation style */ +.section { + transition: transform 1s, opacity 1s; +} + +.section__hidden { + opacity: 0; + transform: translateY(8rem); +} + +/* responsive */ + +@media only screen and (max-width: 1024px) { + .container { + width: 100%; + } +} + +@media only screen and (max-width: 768px) { + section { + padding: 40px 0px; + } + + .nav { + width: 100%; + height: 50px; + line-height: 50px; + } + + .navigation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #13252fa8; + z-index: 99999; + display: none; + } + + .nav__menu { + position: absolute; + width: 250px; + height: 100%; + top: 0; + right: 0; + background: var(--card-bg); + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 999999; + } + + .nav__link { + font-size: 0.9rem; + } + + .show__menu { + display: block; + } + .mobile__menu { + display: block; + } + + .hero__content h2, + .offer__content h2 { + font-size: 2rem; + line-height: 40px; + } + + .dishes__section-top h2, + .menu__section-top h2, + .blog__top h2 { + font-size: 1.5rem; + } + + .dish__content h3 { + font-size: 0.9rem; + } + + .dish__price { + font-size: 1rem; + } + + .ratings span i { + font-size: 0.8rem; + } + + .ratings { + margin-bottom: 10px; + } + + .add__to-cart { + width: 25px; + height: 25px; + } + + .about__content h3 { + font-size: 1.4rem; + line-height: 35px; + } + .view__more-btn, + .learn__more { + padding: 8px 30px; + font-size: 0.8rem; + } + + .logo h1 { + font-size: 1.2rem; + } + + .menu__item h3 { + font-size: 1rem; + } + + .menu__card-bottom { + margin-top: 0; + } + + .blog__content h3 { + font-size: 1rem; + } + + .blog__content p { + line-height: 25px; + font-size: 0.8rem; + } + + .blog__item { + padding: 0; + border: none; + } + + .footer__logo { + width: 100%; + } + + .footer__wrapper { + flex-wrap: wrap; + row-gap: 2rem; + } + + .footer__box { + width: 30%; + } + + .footer__logo input { + padding: 8px; + font-size: 0.8rem; + } + + .subscribe__box { + width: 100%; + } + + .subscribe__btn { + padding: 8px 30px; + font-size: 0.8rem; + } + + .footer__link-title { + font-size: 1rem; + } + + .footer__link { + font-size: 0.8rem; + } + + .footer__copyright { + font-size: 0.8rem; + } +} + +@media only screen and (max-width: 576px) { + .hero__content, + .hero__img, + .about__content, + .about__img, + .offer__content, + .offer__img { + width: 100%; + height:100% + } + + .hero__wrapper, + .about__wrapper, + .offer__wrapper { + flex-wrap: wrap; + } + + .hero__content { + padding-top: 0; + margin-bottom: 40px; + } + + .dish__item, + .menu__item, + .blog__item { + width: 100%; + } + + .dishes__wrapper { + flex-wrap: wrap; + row-gap: 1.5rem; + } + + .menu__wrapper, + .blog__wrapper { + flex-wrap: wrap; + row-gap: 1.5rem; + } + + .offer__content { + margin-bottom: 40px; + } + + .footer__box { + width: 45%; + } +} \ No newline at end of file diff --git a/ToDo JS Extension/index.html b/ToDo JS Extension/index.html index b6d9129b..583fc36d 100644 --- a/ToDo JS Extension/index.html +++ b/ToDo JS Extension/index.html @@ -1,4 +1,3 @@ - @@ -15,8 +14,9 @@
- - + + +
    @@ -26,6 +26,7 @@
+ diff --git a/ToDo JS Extension/manifest.json b/ToDo JS Extension/manifest.json index a522ad2c..1c650823 100644 --- a/ToDo JS Extension/manifest.json +++ b/ToDo JS Extension/manifest.json @@ -3,10 +3,9 @@ "name": "ToDo Extension JS", "version": "1.0", "description": "Simple ToDo Extension is JS for managing day to day tasks...", - "permissions": ["storage", "notifications", "alarms"], - "background": { - "service_worker": "background.js" - }, + "permissions": [ + "storage" + ], "action": { "default_popup": "index.html" }, diff --git a/ToDo JS Extension/scripts/script.js b/ToDo JS Extension/scripts/script.js index 8e2357a9..30854bd5 100644 --- a/ToDo JS Extension/scripts/script.js +++ b/ToDo JS Extension/scripts/script.js @@ -1,188 +1,124 @@ -const inputBox = document.querySelector(".inputField input[type='text']"); -const timeInput = document.querySelector(".inputField input[type='number']"); -const addBtn = document.querySelector(".inputField button"); -const todoList = document.querySelector(".todoList"); -const deleteAllBtn = document.querySelector(".footer button"), - todos=localStorage.getItem('stored'), - add_todo=document.getElementById('add_todo'); -let editIndex = null; - -function handleRemove(index){ -const todoList_con = document.querySelector(".todoList"), - todos=JSON.parse(localStorage.getItem('stored')); -let childer=todoList_con.children[index] -todoList_con.removeChild(childer) -let finder_val=todos[index] -let todo=todos.filter(item =>item!==finder_val) -localStorage.setItem('stored',JSON.stringify(todo)) -} -function handle_todoList(datas){ -const todoList_con = document.querySelector(".todoList"); - datas.map((item,index) =>{ - let div=document.createElement('div') - let p=document.createElement('p') - let p2=document.createElement('p') - let img=document.createElement('img') - img.setAttribute('src','https://cdn-icons-png.flaticon.com/128/2732/2732657.png') - img.setAttribute('alt','close') - img.style.height="15px" - img.style.width="15px" - img.setAttribute('onClick', `handleRemove(${index})`); - p.textContent=`${item.todo}` - p.style.width="75%" - p2.textContent=`${item.time} M` - div.appendChild(p) - div.appendChild(p2) - div.appendChild(img) - div.style.display="flex" - div.style.width="100%" - div.style.justifyContent="space-between" - div.style.alignItems="center" - todoList_con.appendChild(div) - }) -} -if(todos){ - let datas=JSON.parse(todos) - handle_todoList(datas) -} -add_todo.addEventListener('click',()=>{ - const inputBox = document.querySelector(".inputField input[type='text']").value, - timeInput = document.querySelector(".inputField input[type='number']").value; - let data=localStorage.getItem('stored') - if(data){ - let datas=JSON.parse(data) - let userInputs={todo:inputBox,time:timeInput,Time:new Date().toISOString()} - datas.push(userInputs) - handle_todoList([{todo:inputBox,time:timeInput}]) - localStorage.setItem('stored',JSON.stringify(datas)) - } - else{ - let datas=[{todo:inputBox,time:timeInput,Time:new Date().toISOString()}] - localStorage.setItem('stored',JSON.stringify(datas)) - } -}) -inputBox.onkeyup = () => { - let userEnteredValue = inputBox.value; //getting user entered value - if (userEnteredValue.trim() != 0) { - addBtn.classList.add("active"); //active the add button - } else { - addBtn.classList.remove("active"); //unactive the add button - } -} - -showTasks(); - -addBtn.onclick = () => { //when user click on plus icon button - let userEnteredValue = inputBox.value; //getting input field value - let timeAllocated = parseInt(timeInput.value) || 0; //getting time allocated value - chrome.storage.local.get("tasks", (result) => { - let tasks = result.tasks || []; - const task = { text: userEnteredValue, completed: false, timeAllocated: timeAllocated, startTime: Date.now() }; - if (editIndex !== null) { - tasks[editIndex] = task; - editIndex = null; - } else { - tasks.push(task); - } - chrome.storage.local.set({ tasks: tasks }, () => { - setTaskAlarms(tasks); - showTasks(); - }); - }); - addBtn.classList.remove("active"); //unactive the add button once the task added -} - -function setTaskAlarms(tasks) { - chrome.alarms.clearAll(); - tasks.forEach((task, index) => { - if (task.timeAllocated > 0 && !task.completed) { - let alarmTime = (task.startTime + task.timeAllocated * 60000) - Date.now(); - if (alarmTime > 0) { - chrome.alarms.create(`alarm_${index}`, { delayInMinutes: alarmTime / 60000 }); - } - } - }); -} - -function showTasks() { - chrome.storage.local.get("tasks", (result) => { - let tasks = result.tasks || []; - const pendingTasksNumb = document.querySelector(".pendingTasks"); - pendingTasksNumb.textContent = tasks.filter(task => !task.completed).length; //passing the array length in pendingtask - if (tasks.length > 0) { //if array length is greater than 0 - deleteAllBtn.classList.add("active"); //active the delete button - } else { - deleteAllBtn.classList.remove("active"); //unactive the delete button - } - let newLiTag = ""; - tasks.forEach((element, index) => { - newLiTag += `
  • - ${element.text} (${element.timeAllocated} min) - - - -
  • `; - }); - todoList.innerHTML = newLiTag; - inputBox.value = ""; - timeInput.value = ""; - }); -} - -todoList.addEventListener("click", function (event) { - const target = event.target; - if (target.classList.contains("fa-trash") || target.classList.contains("delete-btn")) { - const index = target.closest("li").dataset.index; - deleteTask(index); - } else if (target.classList.contains("fa-edit") || target.classList.contains("edit-btn")) { - const index = target.closest("li").dataset.index; - editTask(index); - } else if (target.classList.contains("fa-check") || target.classList.contains("check-btn")) { - const index = target.closest("li").dataset.index; - toggleCompleteTask(index); - } -}); - -function deleteTask(index) { - chrome.storage.local.get("tasks", (result) => { - let tasks = result.tasks || []; - tasks.splice(index, 1); - chrome.storage.local.set({ tasks: tasks }, () => { - setTaskAlarms(tasks); - showTasks(); - }); - }); -} - -function editTask(index) { - chrome.storage.local.get("tasks", (result) => { - let tasks = result.tasks || []; - inputBox.value = tasks[index].text; // populate input field with the todo text - timeInput.value = tasks[index].timeAllocated; // populate input field with the time allocated - editIndex = index; - addBtn.classList.add("active"); // activate the add button - }); -} - -function toggleCompleteTask(index) { - chrome.storage.local.get("tasks", (result) => { - let tasks = result.tasks || []; - tasks[index].completed = !tasks[index].completed; // toggle the completed status - chrome.storage.local.set({ tasks: tasks }, () => { - setTaskAlarms(tasks); - showTasks(); - }); - }); -} - -deleteAllBtn.onclick = () => { - chrome.storage.local.set({ tasks: [] }, () => { - setTaskAlarms([]); - showTasks(); - }); -} - -const closeIcon = document.getElementById("closeIcon"); -closeIcon.addEventListener("click", () => { - window.close(); // Close the popup -}); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-image: url(bg.jpg); +} + +.container { + position: relative; + max-width: 300px; + width: 100%; + border-radius: 12px; + padding: 20px 30px 30px; /* Increased padding */ + background: #fff; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); +} + +header { + color: #333; + margin-bottom: 20px; + font-size: 18px; + font-weight: 600; + text-align: center; +} + +.input_field { + position: relative; + height: 50px; /* Increased height */ + margin-top: 20px; /* Increased top margin */ + width: 100%; +} + +.refresh_button { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + background: #1940a5; + height: 40px; /* Increased height */ + width: 40px; /* Increased width */ + border: none; + border-radius: 4px; + color: #fff; + cursor: pointer; +} + +.refresh_button:active { + transform: translateY(-50%) scale(0.98); +} + +.input_field input, +.button button { + height: 100%; + width: 100%; + outline: none; + border: none; + border-radius: 8px; + font-size: 18px; /* Increased font size */ +} + +.input_field input { + padding: 0 15px; + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.captch_box input { + color: #6b6b6b; + font-size: 28px; /* Increased font size for captcha display */ + pointer-events: none; +} + +.captch_input input:focus { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); +} + +.message { + font-size: 16px; /* Increased font size */ + margin: 20px 0; /* Increased margin */ + color: #1940a5; + display: none; +} + +.message.active { + display: block; +} + +.button button { + background: #1940a5; + color: #fff; + cursor: pointer; + user-select: none; +} + +.button button:active { + transform: scale(0.99); +} + +.button.disabled { + opacity: 0.6; + pointer-events: none; +} + +.difficulty select { + height: 50px; /* Increased height */ + font-size: 18px; /* Increased font size */ + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.error_message { + font-size: 14px; + color: red; + margin-top: 10px; +} diff --git a/ToDo JS Extension/src/style.css b/ToDo JS Extension/src/style.css index b3fa8cfd..487df571 100644 --- a/ToDo JS Extension/src/style.css +++ b/ToDo JS Extension/src/style.css @@ -1,22 +1,21 @@ @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; } -::selection{ +::selection { color: #ffff; background: #1940a5; } -body{ +body { width: 337px; height: 100%; - /* overflow: hidden; */ padding: 8px; background-image: url(bg.jpg); } -.wrapper{ +.wrapper { background: #fff; max-width: 411px; width: 100%; @@ -25,19 +24,20 @@ body{ border-radius: 4px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); } -.wrapper header{ +.wrapper header { font-size: 30px; font-weight: 600; } -.wrapper .inputField{ +.wrapper .inputField { margin: 20px 0; width: 100%; display: flex; - height: 45px; + flex-direction: column; + gap: 10px; } -.inputField input{ - width: 85%; - height: 100%; +.inputField input { + width: 100%; + height: 45px; outline: none; border-radius: 3px; border: 1px solid #ccc; @@ -45,15 +45,15 @@ body{ padding-left: 15px; transition: all 0.3s ease; } -.inputField input:focus{ +.inputField input:focus { border-color: #1940a5; } -.inputField button{ - width: 50px; - height: 100%; +.inputField button { + width: 100%; + height: 45px; border: none; color: #fff; - margin-left: 5px; + margin-left: 0; font-size: 21px; outline: none; background: #1940a5; @@ -64,18 +64,18 @@ body{ transition: all 0.3s ease; } .inputField button:hover, -.footer button:hover{ +.footer button:hover { background: #1940a5; } -.inputField button.active{ +.inputField button.active { opacity: 1; pointer-events: auto; } -.wrapper .todoList{ +.wrapper .todoList { max-height: 250px; overflow-y: auto; } -.todoList li{ +.todoList li { position: relative; list-style: none; margin-bottom: 8px; @@ -86,11 +86,7 @@ body{ overflow: hidden; word-wrap: break-word; } -.todoList li.completed { - text-decoration: line-through; - background: #dcdcdc; -} -.todoList li .icon{ +.todoList li .icon { position: absolute; right: -45px; top: 50%; @@ -104,29 +100,17 @@ body{ cursor: pointer; transition: all 0.2s ease; } -.todoList li .delete-btn { - right: 0; - background: #e74c3c; - border-radius: 0 3px 3px 0; -} -.todoList li .edit-icon { - right: 50px; - background: #f39c12; - border-radius: 3px 0 0 3px; -} -.todoList li .check-icon { - right: 100px; - background: #2ecc71; - border-radius: 3px 0 0 3px; +.todoList li:hover .icon { + right: 0px; } -.wrapper .footer{ +.wrapper .footer { display: flex; width: 100%; margin-top: 20px; align-items: center; justify-content: space-between; } -.footer button{ +.footer button { padding: 6px 10px; border-radius: 3px; border: none; @@ -142,7 +126,7 @@ body{ pointer-events: none; transition: all 0.3s ease; } -.footer button.active{ +.footer button.active { opacity: 1; pointer-events: auto; } @@ -153,12 +137,10 @@ body{ cursor: pointer; z-index: 9999; } - .close-icon i { font-size: 24px; color: #333; } -.close-icon i:hover{ - color: #e74c3c; +.close-icon i:hover { + color: #e74c3c; } -