From 89d90cabbcd2275ac5c5cd977a8af54cb971e0d5 Mon Sep 17 00:00:00 2001 From: Abhiraj Adhikary Date: Mon, 9 Dec 2024 19:45:42 +0530 Subject: [PATCH 1/3] Added infinite-scroll-emoji background to Components and assets > backgrounds.html --- .../index.html | 14 ++++++ .../script.js | 24 ++++++++++ .../style.css | 48 +++++++++++++++++++ assets/html_files/backgrounds.html | 13 +++++ 4 files changed, 99 insertions(+) create mode 100644 Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html create mode 100644 Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js create mode 100644 Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html new file mode 100644 index 00000000..77752acd --- /dev/null +++ b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html @@ -0,0 +1,14 @@ + + + + + + Infite Scroll Emoji Background + + + +
+ + + + diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js new file mode 100644 index 00000000..010883a9 --- /dev/null +++ b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js @@ -0,0 +1,24 @@ +document.addEventListener('DOMContentLoaded', function () { + const emojiContainer = document.querySelector('.emoji-container'); + const emojis = ['😂', '🤣', '😁', '🤭', '😈', '👻', '💀', '👀', '🐼', '🐸', '🐣', '🐳', '🦀', '🌝', '🌟', '🌈', '🌞', '🥑', '🌽', '🍔', '🍟', '🍺', '🍕', '🍿', '🗿', '💎', '🍀', '🚀', '🗽', '🗼', '🏯']; + + const numberOfLines = Math.floor(window.innerWidth / 40); + + for (let i = 0; i < numberOfLines; i++) { + const line = document.createElement('div'); + line.classList.add('emoji-line'); + const emojiDiv = document.createElement('div'); + + for (let j = 0; j < 30; j++) { + const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)]; + const emojiElement = document.createElement('div'); + emojiElement.classList.add('emoji'); + emojiElement.textContent = randomEmoji; + emojiDiv.appendChild(emojiElement); + } + + line.appendChild(emojiDiv); + line.appendChild(emojiDiv.cloneNode(true)); + emojiContainer.appendChild(line); + } +}); diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css new file mode 100644 index 00000000..325f3424 --- /dev/null +++ b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css @@ -0,0 +1,48 @@ +body { + margin: 0; + overflow: hidden; + background-color: #000000; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + font-family: monospace; +} + +.emoji-container { + display: flex; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.emoji-line { + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 0 5px; + position: relative; + overflow: hidden; +} + +@keyframes scroll { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-100%); + } +} + +.emoji-line div { + display: flex; + flex-direction: column; + animation: scroll linear infinite; + animation-duration: 20s; /* Adjust speed here */ +} + +.emoji { + font-size: 1rem; /* Emoji size */ + padding: 5px; + text-align: center; +} diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index 2c261ab5..6de44574 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -352,6 +352,19 @@

Gradient Waves Background

+
+

Infinite Scroll Emoji Background

+
+ + + +
+
+ + + +
+

Interactive Balls Background

From 20ef8da7790b76b7f3291a216f4aaf758ed834cf Mon Sep 17 00:00:00 2001 From: Abhiraj Adhikary Date: Mon, 9 Dec 2024 22:38:26 +0530 Subject: [PATCH 2/3] made responsive across all device and upgraded the CSS of the page --- Components/Forms/Feedback-Form-2/index.html | 73 ++--- Components/Forms/Feedback-Form-2/script.js | 139 +++++----- Components/Forms/Feedback-Form-2/style.css | 288 +++++++++++++++----- 3 files changed, 325 insertions(+), 175 deletions(-) diff --git a/Components/Forms/Feedback-Form-2/index.html b/Components/Forms/Feedback-Form-2/index.html index 8413312e..5a5c5a42 100644 --- a/Components/Forms/Feedback-Form-2/index.html +++ b/Components/Forms/Feedback-Form-2/index.html @@ -3,48 +3,53 @@ - - + Enhanced Feedback Form - Feedback Form + -
- × -

FEEDBACK FORM

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

-
-
-
- +
+
+ × +

FEEDBACK FORM

+

We value your opinion. Share your thoughts and help us improve!

+ +
+
+ +
+
- -
-
-
- +
+
+ +
+
- -
-
- +
+
+ +
+ +
+
+

Rate Our Service:

+ + + + + +
+ + + -
-

Rate us:

- - - - - + - - - -
+ \ No newline at end of file diff --git a/Components/Forms/Feedback-Form-2/script.js b/Components/Forms/Feedback-Form-2/script.js index 96f2500f..f1c2ec84 100644 --- a/Components/Forms/Feedback-Form-2/script.js +++ b/Components/Forms/Feedback-Form-2/script.js @@ -1,80 +1,81 @@ -document.addEventListener('DOMContentLoaded', function() { - const feedbackForm = document.getElementById('feedback-form'); - const submitButton = document.querySelector("#feedback-form button[type='submit']"); - const thankYouMessage = document.getElementById('thank-you-message'); - const errorMessage = document.getElementById('error-message'); - const ratingStars = [...document.getElementsByClassName("rating__star")]; + // The JavaScript remains the same as in the previous implementation + document.addEventListener('DOMContentLoaded', function() { + const feedbackForm = document.getElementById('feedback-form'); + const submitButton = document.querySelector("#feedback-form button[type='submit']"); + const thankYouMessage = document.getElementById('thank-you-message'); + const errorMessage = document.getElementById('error-message'); + const ratingStars = [...document.getElementsByClassName("rating__star")]; - function allFieldsFilled() { - const inputs = feedbackForm.querySelectorAll("input[type='text'], input[type='email'], textarea"); - for (let input of inputs) { - if (!input.value.trim()) { - return false; - } - } - return true; - } - - function ratingSelected() { - for (let star of ratingStars) { - if (star.classList.contains('fas')) { + function allFieldsFilled() { + const inputs = feedbackForm.querySelectorAll("input[type='text'], input[type='email'], textarea"); + for (let input of inputs) { + if (!input.value.trim()) { + return false; + } + } return true; } - } - return false; - } - feedbackForm.addEventListener('submit', function(event) { - event.preventDefault(); - if (allFieldsFilled() && ratingSelected()) { - thankYouMessage.style.display = 'block'; - errorMessage.style.display = 'none'; - setTimeout(function() { - thankYouMessage.style.display = 'none'; - }, 3000); - feedbackForm.reset(); - for (let star of ratingStars) { - star.classList.remove('fas'); - star.classList.add('far'); + function ratingSelected() { + for (let star of ratingStars) { + if (star.classList.contains('fas')) { + return true; + } + } + return false; } - } else { - thankYouMessage.style.display = 'none'; - errorMessage.style.display = 'block'; - setTimeout(function() { - errorMessage.style.display = 'none'; - }, 3000); - } - }); - feedbackForm.addEventListener("input", function() { - if (allFieldsFilled()) { - submitButton.removeAttribute("disabled"); - } else { - submitButton.setAttribute("disabled", "disabled"); - } - }); + feedbackForm.addEventListener('submit', function(event) { + event.preventDefault(); + if (allFieldsFilled() && ratingSelected()) { + thankYouMessage.style.display = 'block'; + errorMessage.style.display = 'none'; + setTimeout(function() { + thankYouMessage.style.display = 'none'; + }, 3000); + feedbackForm.reset(); + for (let star of ratingStars) { + star.classList.remove('fas'); + star.classList.add('far'); + } + } else { + thankYouMessage.style.display = 'none'; + errorMessage.style.display = 'block'; + setTimeout(function() { + errorMessage.style.display = 'none'; + }, 3000); + } + }); - function executeRating(stars) { - const starClassActive = "rating__star fas fa-star"; - const starClassInactive = "rating__star far fa-star"; - stars.map((star, index) => { - star.onclick = () => { - for (let i = 0; i < stars.length; ++i) { - stars[i].className = i <= index ? starClassActive : starClassInactive; + feedbackForm.addEventListener("input", function() { + if (allFieldsFilled()) { + submitButton.removeAttribute("disabled"); + } else { + submitButton.setAttribute("disabled", "disabled"); } - }; - }); - } + }); + + function executeRating(stars) { + const starClassActive = "rating__star fas fa-star"; + const starClassInactive = "rating__star far fa-star"; + stars.map((star, index) => { + star.onclick = () => { + for (let i = 0; i < stars.length; ++i) { + stars[i].className = i <= index ? starClassActive : starClassInactive; + } + }; + }); + } - executeRating(ratingStars); + executeRating(ratingStars); - document.querySelector('.close').addEventListener('click', function() { - document.getElementById('modal').style.display = 'none'; - }); + document.querySelector('.close').addEventListener('click', function() { + document.getElementById('modal').style.display = 'none'; + }); - window.onclick = function(event) { - if (event.target == document.getElementById('modal')) { - document.getElementById('modal').style.display = 'none'; - } - }; -}); + window.onclick = function(event) { + if (event.target == document.getElementById('modal')) { + document.getElementById('modal').style.display = 'none'; + } + }; + }); \ No newline at end of file diff --git a/Components/Forms/Feedback-Form-2/style.css b/Components/Forms/Feedback-Form-2/style.css index cb5ffe22..8467e15f 100644 --- a/Components/Forms/Feedback-Form-2/style.css +++ b/Components/Forms/Feedback-Form-2/style.css @@ -1,150 +1,294 @@ -body, html { +:root { + --primary-color: #4BB34B; + --secondary-color: #2AE42A; + --background-color: #f4f4f4; + --text-color: #333; + --accent-color: #FFC107; +} + +* { + box-sizing: border-box; margin: 0; padding: 0; + transition: all 0.3s ease; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } +} + +@keyframes subtle-bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } +} + +html, body { height: 100%; - background-color: #f2f2f2; - font-family: Arial, sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + line-height: 1.6; +} + +.container { display: flex; justify-content: center; align-items: center; + min-height: 100vh; + padding: 15px; + perspective: 1000px; } .modal-content { - background-color: #ffffff; - padding: 30px; - border-radius: 15px; - width: 90%; + background-color: white; + border-radius: 20px; + box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.07); + width: 100%; max-width: 500px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + padding: 40px; position: relative; text-align: center; + transform-style: preserve-3d; + transform: rotateX(-10deg); + opacity: 0; + animation: fadeIn 0.6s forwards ease-out; + backdrop-filter: blur(10px); + background: rgba(255,255,255,0.9); } -.modal-content h2 { - margin-top: 0; - margin-bottom: 15px; - color: #333; - font-size: 26px; -} - -.modal-content p { - color: #555; - font-size: 16px; - margin-bottom: 30px; -} - -.modal-content button[type="submit"] { - background: linear-gradient(to right, #4BB34B, #2AE42A); - color: white; - border: none; - border-radius: 5px; - padding: 12px; - font-size: 16px; +.close { + position: absolute; + top: 20px; + right: 20px; + font-size: 30px; + color: #aaa; cursor: pointer; - width: 100%; - transition: background 0.3s ease; + transition: all 0.3s ease; + opacity: 0.6; } -.modal-content button[type="submit"]:hover { - background: linear-gradient(to right, #3FDC3F, #1C7C14); +.close:hover { + color: var(--primary-color); + transform: rotate(90deg); + opacity: 1; } -.modal-content button[type="submit"]:focus { - outline: none; +.modal-content h2 { + color: var(--text-color); + margin-bottom: 15px; + font-size: clamp(22px, 5vw, 28px); + letter-spacing: -0.5px; + position: relative; } -.close { - color: #aaa; - font-size: 26px; - font-weight: bold; +.modal-content h2::after { + content: ''; position: absolute; - top: 20px; - right: 20px; - cursor: pointer; + bottom: -10px; + left: 50%; + width: 60px; + height: 3px; + background: var(--primary-color); + transform: translateX(-50%); } -.close:hover, -.close:focus { - color: #000; +.modal-content p { + color: #666; + margin-bottom: 30px; + font-size: clamp(15px, 4vw, 17px); + line-height: 1.7; } .form-group { position: relative; - margin-bottom: 20px; + margin-bottom: 25px; } .form-group .icon { position: absolute; top: 50%; - left: 12px; + left: 15px; transform: translateY(-50%); - background-color: #4BB34B; + background-color: var(--primary-color); color: white; border-radius: 50%; - width: 30px; - height: 30px; + width: 40px; + height: 40px; display: flex; justify-content: center; align-items: center; + transition: all 0.4s ease; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.form-group input:focus + .icon, +.form-group textarea:focus + .icon { + transform: translateY(-50%) scale(1.1); + background-color: var(--accent-color); } .form-group input, .form-group textarea { width: 100%; - padding: 12px 12px 12px 45px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 16px; - box-sizing: border-box; - margin-top: 5px; -} - -.form-group input::placeholder, -.form-group textarea::placeholder { - color: #bbb; + padding: 15px 15px 15px 60px; + border: 2px solid #e0e0e0; + border-radius: 12px; + font-size: clamp(15px, 4vw, 16px); + outline: none; + transition: all 0.4s ease; + background-color: #f9f9f9; } -.form-group textarea { - height: 120px; +.form-group input:focus, +.form-group textarea:focus { + border-color: var(--primary-color); + box-shadow: 0 0 10px rgba(75,179,75,0.2); } .rating { display: flex; justify-content: center; align-items: center; - margin-bottom: 20px; + margin-bottom: 25px; } .rating h2 { - margin: 0; - margin-right: 12px; - font-size: 20px; + margin-right: 20px; + font-size: clamp(18px, 4vw, 22px); color: #555; } .rating__star { - font-size: 30px; + font-size: clamp(28px, 6vw, 34px); margin: 0 7px; cursor: pointer; - color: #DABF18; + color: #ddd; + transition: all 0.3s ease; } .rating__star:hover, .rating__star.active { - color: #FFC107; + color: var(--accent-color); + animation: subtle-bounce 0.4s; +} + +button[type="submit"] { + background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); + color: white; + border: none; + border-radius: 12px; + padding: 15px; + font-size: clamp(16px, 4vw, 18px); + width: 100%; + cursor: pointer; + letter-spacing: 1px; + text-transform: uppercase; + position: relative; + overflow: hidden; + box-shadow: 0 10px 20px rgba(75,179,75,0.2); +} + +button[type="submit"]::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent); + transition: all 0.6s; +} + +button[type="submit"]:hover::before { + left: 100%; +} + +button[type="submit"]:hover { + transform: translateY(-3px); + box-shadow: 0 15px 25px rgba(75,179,75,0.3); +} + +button[type="submit"]:disabled { + background: #cccccc; + cursor: not-allowed; + transform: none; + box-shadow: none; } #thank-you-message, #error-message { - font-size: 20px; - font-weight: bold; + font-size: clamp(18px, 4vw, 22px); margin-top: 20px; + font-weight: bold; + animation: pulse 1s infinite; } #thank-you-message { - color: #28a745; + color: var(--primary-color); } #error-message { color: #dc3545; +} + +/* Responsive Design */ +@media screen and (max-width: 480px) { + .modal-content { + padding: 25px; + margin: 0 10px; + } + + .close { + top: 15px; + right: 15px; + font-size: 25px; + } + + .form-group .icon { + width: 35px; + height: 35px; + } + + .form-group input, + .form-group textarea { + padding: 12px 12px 12px 50px; + } + + .rating__star { + margin: 0 5px; + } +} + +/* Dark Mode Support */ +@media (prefers-color-scheme: dark) { + body { + background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); + color: #f4f4f4; + } + + .modal-content { + background: rgba(44, 62, 80, 0.9); + color: #f4f4f4; + } + + .form-group input, + .form-group textarea { + background-color: #34495e; + border-color: #2c3e50; + color: #ecf0f1; + } + + .modal-content h2 { + color: #ecf0f1; + } + + .modal-content p { + color: #bdc3c7; + } } \ No newline at end of file From 6077a1b2d88530194eedac588b6de14eb9bd4299 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 9 Dec 2024 22:49:23 +0530 Subject: [PATCH 3/3] Added changes --- Components/Forms/Feedback-Form-2/index.html | 2 +- Components/Forms/Feedback-Form-2/script.js | 139 ++++++++++---------- Components/Forms/Feedback-Form-2/style.css | 57 +++++--- 3 files changed, 110 insertions(+), 88 deletions(-) diff --git a/Components/Forms/Feedback-Form-2/index.html b/Components/Forms/Feedback-Form-2/index.html index 5a5c5a42..832bafd2 100644 --- a/Components/Forms/Feedback-Form-2/index.html +++ b/Components/Forms/Feedback-Form-2/index.html @@ -3,9 +3,9 @@ - Enhanced Feedback Form + Feedback Form-2
diff --git a/Components/Forms/Feedback-Form-2/script.js b/Components/Forms/Feedback-Form-2/script.js index f1c2ec84..636ff61f 100644 --- a/Components/Forms/Feedback-Form-2/script.js +++ b/Components/Forms/Feedback-Form-2/script.js @@ -1,81 +1,80 @@ - // The JavaScript remains the same as in the previous implementation - document.addEventListener('DOMContentLoaded', function() { - const feedbackForm = document.getElementById('feedback-form'); - const submitButton = document.querySelector("#feedback-form button[type='submit']"); - const thankYouMessage = document.getElementById('thank-you-message'); - const errorMessage = document.getElementById('error-message'); - const ratingStars = [...document.getElementsByClassName("rating__star")]; +document.addEventListener('DOMContentLoaded', function () { + const feedbackForm = document.getElementById('feedback-form'); + const submitButton = document.querySelector("#feedback-form button[type='submit']"); + const thankYouMessage = document.getElementById('thank-you-message'); + const errorMessage = document.getElementById('error-message'); + const ratingStars = [...document.getElementsByClassName("rating__star")]; - function allFieldsFilled() { - const inputs = feedbackForm.querySelectorAll("input[type='text'], input[type='email'], textarea"); - for (let input of inputs) { - if (!input.value.trim()) { - return false; - } - } + function allFieldsFilled() { + const inputs = feedbackForm.querySelectorAll("input[type='text'], input[type='email'], textarea"); + for (let input of inputs) { + if (!input.value.trim()) { + return false; + } + } + return true; + } + + function ratingSelected() { + for (let star of ratingStars) { + if (star.classList.contains('fas')) { return true; } + } + return false; + } - function ratingSelected() { - for (let star of ratingStars) { - if (star.classList.contains('fas')) { - return true; - } - } - return false; + feedbackForm.addEventListener('submit', function (event) { + event.preventDefault(); + if (allFieldsFilled() && ratingSelected()) { + thankYouMessage.style.display = 'block'; + errorMessage.style.display = 'none'; + setTimeout(function () { + thankYouMessage.style.display = 'none'; + }, 3000); + feedbackForm.reset(); + for (let star of ratingStars) { + star.classList.remove('fas'); + star.classList.add('far'); } + } else { + thankYouMessage.style.display = 'none'; + errorMessage.style.display = 'block'; + setTimeout(function () { + errorMessage.style.display = 'none'; + }, 3000); + } + }); - feedbackForm.addEventListener('submit', function(event) { - event.preventDefault(); - if (allFieldsFilled() && ratingSelected()) { - thankYouMessage.style.display = 'block'; - errorMessage.style.display = 'none'; - setTimeout(function() { - thankYouMessage.style.display = 'none'; - }, 3000); - feedbackForm.reset(); - for (let star of ratingStars) { - star.classList.remove('fas'); - star.classList.add('far'); - } - } else { - thankYouMessage.style.display = 'none'; - errorMessage.style.display = 'block'; - setTimeout(function() { - errorMessage.style.display = 'none'; - }, 3000); - } - }); + feedbackForm.addEventListener("input", function () { + if (allFieldsFilled()) { + submitButton.removeAttribute("disabled"); + } else { + submitButton.setAttribute("disabled", "disabled"); + } + }); - feedbackForm.addEventListener("input", function() { - if (allFieldsFilled()) { - submitButton.removeAttribute("disabled"); - } else { - submitButton.setAttribute("disabled", "disabled"); + function executeRating(stars) { + const starClassActive = "rating__star fas fa-star"; + const starClassInactive = "rating__star far fa-star"; + stars.map((star, index) => { + star.onclick = () => { + for (let i = 0; i < stars.length; ++i) { + stars[i].className = i <= index ? starClassActive : starClassInactive; } - }); - - function executeRating(stars) { - const starClassActive = "rating__star fas fa-star"; - const starClassInactive = "rating__star far fa-star"; - stars.map((star, index) => { - star.onclick = () => { - for (let i = 0; i < stars.length; ++i) { - stars[i].className = i <= index ? starClassActive : starClassInactive; - } - }; - }); - } + }; + }); + } - executeRating(ratingStars); + executeRating(ratingStars); - document.querySelector('.close').addEventListener('click', function() { - document.getElementById('modal').style.display = 'none'; - }); + document.querySelector('.close').addEventListener('click', function () { + document.getElementById('modal').style.display = 'none'; + }); - window.onclick = function(event) { - if (event.target == document.getElementById('modal')) { - document.getElementById('modal').style.display = 'none'; - } - }; - }); \ No newline at end of file + window.onclick = function (event) { + if (event.target == document.getElementById('modal')) { + document.getElementById('modal').style.display = 'none'; + } + }; +}); \ No newline at end of file diff --git a/Components/Forms/Feedback-Form-2/style.css b/Components/Forms/Feedback-Form-2/style.css index 8467e15f..b372870f 100644 --- a/Components/Forms/Feedback-Form-2/style.css +++ b/Components/Forms/Feedback-Form-2/style.css @@ -14,22 +14,45 @@ } @keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } } @keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.05); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.05); + } + + 100% { + transform: scale(1); + } } @keyframes subtle-bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-5px); } + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-5px); + } } -html, body { +html, +body { height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); @@ -48,7 +71,7 @@ html, body { .modal-content { background-color: white; border-radius: 20px; - box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.07); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); width: 100%; max-width: 500px; padding: 40px; @@ -59,7 +82,7 @@ html, body { opacity: 0; animation: fadeIn 0.6s forwards ease-out; backdrop-filter: blur(10px); - background: rgba(255,255,255,0.9); + background: rgba(255, 255, 255, 0.9); } .close { @@ -124,11 +147,11 @@ html, body { justify-content: center; align-items: center; transition: all 0.4s ease; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -.form-group input:focus + .icon, -.form-group textarea:focus + .icon { +.form-group input:focus+.icon, +.form-group textarea:focus+.icon { transform: translateY(-50%) scale(1.1); background-color: var(--accent-color); } @@ -148,7 +171,7 @@ html, body { .form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); - box-shadow: 0 0 10px rgba(75,179,75,0.2); + box-shadow: 0 0 10px rgba(75, 179, 75, 0.2); } .rating { @@ -191,7 +214,7 @@ button[type="submit"] { text-transform: uppercase; position: relative; overflow: hidden; - box-shadow: 0 10px 20px rgba(75,179,75,0.2); + box-shadow: 0 10px 20px rgba(75, 179, 75, 0.2); } button[type="submit"]::before { @@ -201,7 +224,7 @@ button[type="submit"]::before { left: -100%; width: 100%; height: 100%; - background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent); + background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.6s; } @@ -211,7 +234,7 @@ button[type="submit"]:hover::before { button[type="submit"]:hover { transform: translateY(-3px); - box-shadow: 0 15px 25px rgba(75,179,75,0.3); + box-shadow: 0 15px 25px rgba(75, 179, 75, 0.3); } button[type="submit"]:disabled {