Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I have improve a Rate us form with good UI and color combination of issue number #3039 #3076

Merged
merged 2 commits into from
Oct 8, 2024
+75 −42
Merged

I have improve a Rate us form with good UI and color combination of issue number #3039 #3076

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e330635
Update Rate Us page
Oct 7, 2024
0935e70
Rate us page update
Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 75 additions & 42 deletions assets/css/rate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,46 +13,57 @@ body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M0 0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffdcd4' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffd6ce' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #444; /* Text color */
color: #444;
/* Text color */
user-select: none;
}

/* Rate Us Form Styling */
/* Rate Us Form Styling */
#rate-us {
max-width: 600px;
margin: 50px auto;
background: rgba(255, 255, 255, 0.8);
background: #ff6666;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for hover effect */
text-align: center; /* Center the content */
}

#rate-us:hover {
background-color: #FFB2A8; /* Light pink background color on hover */
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); /* Enhanced box-shadow on hover */
transform: scale(1.02); /* Slight scale effect on hover */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
text-align: center;
}

/* Heading Styling */
#rate-us .heading {
text-align: center;
color: #ff6666; /* Updated heading color */
color: #f1eeee;
/* Updated heading color */
margin-bottom: 20px;
}

#rate-us .heading h3 {
font-size: 24px;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
font-weight: 800;
margin-bottom: 4px;
}

#rate-us:hover {

/* Light pink background color on hover */
box-shadow: 10px 10 10 30px rgba(255, 255, 255, 0.2);
/* Enhanced box-shadow on hover */
transform: scale(1.06);
/* Slight scale effect on hover */
/* Keep text color unchanged or change it to contrast with the new background */
color: #ffffff;
/* Use a dark color that contrasts with the light pink background */
border-radius: #0d0c0c;
}

/* Heading Styling */
#rate-us .heading p {
font-size: 18px;
font-size: 21px;
}


/* Emoji Ratings Styling */
#rate-us .stars {
display: flex;
Expand All @@ -66,26 +77,32 @@ body {
}

#rate-us .stars label {
font-size: 36px; /* Emoji size */
font-size: 36px;
/* Emoji size */
margin: 0 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
transition: transform 0.6s ease-in-out, color 0.3s ease-in-out;
}

#rate-us .stars label:hover {
transform: scale(1.2); /* Hover effect */
color: #ff6666; /* Change color on hover */
transform: scale(1.2);
/* Hover effect */
color: #ff6666;
/* Change color on hover */
}

#rate-us .stars input[type="radio"]:checked + label {
animation: shine 0.5s infinite alternate; /* Shining effect */
transform: scale(1.5); /* Make selected emoji bigger */
#rate-us .stars input[type="radio"]:checked+label {
animation: shine 0.5s infinite alternate;
/* Shining effect */
transform: scale(1.5);
/* Make selected emoji bigger */
}

@keyframes shine {
0% {
text-shadow: 0 0 10px #ff6666, 0 0 20px #ff6666, 0 0 30px #ff6666, 0 0 40px #ff6666;
}

100% {
text-shadow: 0 0 20px #ff6666, 0 0 30px #ff6666, 0 0 40px #ff6666, 0 0 50px #ff6666;
}
Expand All @@ -94,24 +111,25 @@ body {
/* Textarea Styling */
#rate-us .feedback-container {
text-align: center;

}

#rate-us .feedback-container textarea {
width: 100%;
height: 100px;
border: 2px solid #ccc;
border: 2px solid #fafafa;
border-radius: 5px;
padding: 10px;
font-size: 16px;
color: #444;
color: #ffffff;
}

#rate-us .feedback-container textarea::placeholder {
color: #aaa;
color: #fdfcfc;
}

#rate-us .feedback-container textarea:focus {
outline: none;

border-color: #ff6666;
}

Expand All @@ -122,50 +140,65 @@ body {
}

#rate-us .button button {
background-color: #ff6666; /* Darker background color */
color: #fff;
background-color: #ebe7e7;
/* Darker background color */
color: #b94c4c;
padding: 10px 20px;
font-size: 18px;
font-size: 23px;
font-weight: 500px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transition for hover effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Box-shadow effect */
display: inline-block; /* Center the button */
width: 100;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
/* Transition for hover effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Box-shadow effect */
display: inline-block;
/* Center the button */
width: 100%;
}

#rate-us .button button:hover {
background-color: #e65c5c;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Enhanced box-shadow on hover */

box-shadow: 0 6px 10px rgba(252, 252, 252, 0.2);
/* Enhanced box-shadow on hover */
}

/* Toast Message Styling */
/* Toast Message Styles */
#toastMessage {
position: fixed;
top: 20px; /* Adjust as needed */
top: 20px;
/* Adjust as needed */
left: 50%;
transform: translateX(-50%);
background-color: #333; /* Background color for the toast */
color: #fff; /* Text color */
background-color: #333;
/* Background color for the toast */
color: #fff;
/* Text color */
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000; /* Ensure it's above other content */
display: none; /* Hidden by default */
z-index: 1000;
/* Ensure it's above other content */
display: none;
/* Hidden by default */
text-align: center;
}

.toast-success {
background-color: #4CAF50; /* Green for success */
background-color: #4CAF50;
/* Green for success */
}

.toast-failure {
background-color: #f44336; /* Red for failure */
background-color: #f44336;
/* Red for failure */
}


/* Pink Cursor with Glow Effect */
body {
cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23ff66b2" d="M0 0h24v24H0z" fill="none"/%3E%3Cpath fill="%23ff66b2" d="M13.88 12.47L3.41 2H2v20h2V6.41l10.59 10.59L17 17.99l2-2-2-2-3.12-3.52zm4.83 5.59l-2.83-2.83-2.83 2.83 2.83 2.83 2.83-2.83z"/%3E%3C/svg%3E'), auto;
}
}
Loading