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

Enhanced Rate Us Page #2745

Merged
merged 1 commit into from
Aug 4, 2024
Merged

Enhanced Rate Us Page #2745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
135 changes: 63 additions & 72 deletions assets/css/rate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

body {
background-color: #FFB2A8;
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='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' 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='%23ffe1d9' 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='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' 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-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 */
Expand All @@ -25,6 +25,14 @@ body {
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 */
}

/* Heading Styling */
Expand Down Expand Up @@ -61,11 +69,12 @@ body {
font-size: 36px; /* Emoji size */
margin: 0 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s 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 */
}

#rate-us .stars input[type="radio"]:checked + label {
Expand All @@ -75,106 +84,88 @@ body {

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

/* Feedback Container Styling */
/* Textarea Styling */
#rate-us .feedback-container {
text-align: center;
margin-bottom: 20px;
}

#rate-us textarea {
#rate-us .feedback-container textarea {
width: 100%;
height: 100px;
border: 2px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 8px;
transition: border-color 0.3s ease-in-out;
color: #444;
}

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

#rate-us textarea:focus {
border-color: #ff6666; /* Updated focus color */
#rate-us .feedback-container textarea:focus {
outline: none;
border-color: #ff6666;
}

/* Submit Button Styling */
/* Submit Button Styling */
#rate-us .button {
display: flex;
justify-content: center; /* Center items horizontally */
margin-top: 20px;
text-align: center;
margin-top: 20px;
}

#rate-us .button button {
background-color: #ff6666; /* Updated button color */
color: #fff;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
background-color: #ff6666; /* Darker background color */
color: #fff;
padding: 10px 20px;
font-size: 18px;
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 */
}

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

/* Confirmation Modal Styling */
#confirmationModal {
display: none;
/* Toast Message Styling */
/* Toast Message Styles */
#toastMessage {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.toast-message {
display: none;
position: fixed;
z-index: 10000;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
background-color: #333;
color: #fff;
padding: 15px 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
}


#confirmationModal .modal-content {
background-color: #fff;
width: 300px;
padding: 20px;
text-align: center;
position: absolute;
top: 50%;
top: 20px; /* Adjust as needed */
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transform: translateX(-50%);
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 */
text-align: center;
}

#confirmationModal .modal-content .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
.toast-success {
background-color: #4CAF50; /* Green for success */
}

#confirmationModal .modal-content .close:hover,
#confirmationModal .modal-content .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
.toast-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;
}
89 changes: 53 additions & 36 deletions assets/js/rate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,59 @@
document.getElementById("submit-btn").addEventListener("click", function(event) {
event.preventDefault(); // Prevent default form submission
document.addEventListener("DOMContentLoaded", function() {
const toastMessage = document.getElementById("toastMessage");

let selectedEmoji = document.querySelector('input[name="rate"]:checked');
let feedback = document.getElementById("feedback").value.trim();

if (selectedEmoji && feedback !== "") {
// Logic for submitting feedback (you can add AJAX request here if needed)
document.getElementById("submit-btn").addEventListener("click", function(event) {
event.preventDefault(); // Prevent default form submission

// Show toast message
let toastMessage = document.getElementById("toastMessage");
toastMessage.textContent = "Feedback submitted successfully :)";
toastMessage.style.display = "block";
let selectedEmoji = document.querySelector('input[name="rate"]:checked');
let feedback = document.getElementById("feedback").value.trim();

if (selectedEmoji && feedback !== "") {
// Show success toast message
toastMessage.textContent = "Feedback submitted successfully :)";
toastMessage.style.backgroundColor = "green"; // Green color for success
toastMessage.style.color = "white";
toastMessage.style.padding = "10px";
toastMessage.style.borderRadius = "5px";
toastMessage.style.position = "fixed";
toastMessage.style.bottom = "20px";
toastMessage.style.right = "20px";
toastMessage.style.zIndex = "1000";
toastMessage.style.display = "block";

// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);
// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);

// Reset form fields
document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});
} else {
let toastMessage = document.getElementById("toastMessage");
toastMessage.textContent = "Select Emoji and give Feedback :(";
toastMessage.style.display = "block";
// Reset form fields
document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});
} else {
// Show failure toast message
toastMessage.textContent = "Select Emoji and give Feedback :(";
toastMessage.style.backgroundColor = "red"; // Red color for failure
toastMessage.style.color = "white";
toastMessage.style.padding = "10px";
toastMessage.style.borderRadius = "5px";
toastMessage.style.position = "fixed";
toastMessage.style.bottom = "20px";
toastMessage.style.right = "20px";
toastMessage.style.zIndex = "1000";
toastMessage.style.display = "block";

// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);
document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});

}
// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);

document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});
}
});
});
70 changes: 64 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2594,7 +2594,7 @@ <h3 class="card-sty" style="text-align: center;">Organizations</h3>
<h3>Rate Us</h3>
<p>Tell us about your experience!</p>
</div>

<div class="stars">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5">😭</label>
Expand All @@ -2607,23 +2607,81 @@ <h3>Rate Us</h3>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1">😍</label>
</div>

<div class="feedback-container">
<textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
</div>

<div class="button">
<button id="submit-btn">Submit</button>

<center><button id="submit-btn">Submit</button></center>
</div>
</div>


<div id="toastMessage" class="toast-message"></div>

<div id="confirmationModal">
<div class="modal-content">
<span class="close" onclick="closeConfirmationModal()">&times;</span>
<p id="confirmationMessage"></p>
</div>
</div>
<div id="toastMessage" class="toast-message"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const toastMessage = document.getElementById("toastMessage");

document.getElementById("submit-btn").addEventListener("click", function(event) {
event.preventDefault(); // Prevent default form submission

let selectedEmoji = document.querySelector('input[name="rate"]:checked');
let feedback = document.getElementById("feedback").value.trim();

if (selectedEmoji && feedback !== "") {
// Show success toast message
toastMessage.textContent = "Feedback submitted successfully :)";
toastMessage.style.backgroundColor = "green"; // Green color for success
toastMessage.style.color = "white";
toastMessage.style.borderRadius = "5px";
toastMessage.style.position = "fixed";
toastMessage.style.display = "block";

// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);

// Reset form fields
document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});
} else {
// Show failure toast message
toastMessage.textContent = "Select Emoji and give Feedback :(";
toastMessage.style.backgroundColor = "red"; // Red color for failure
toastMessage.style.color = "white";
toastMessage.style.borderRadius = "5px";
toastMessage.style.position = "fixed";

toastMessage.style.display = "block";

// Hide toast message after 3 seconds (adjust as needed)
setTimeout(function() {
toastMessage.style.display = "none";
}, 3000);

document.getElementById("feedback").value = "";
let starInputs = document.querySelectorAll('input[name="rate"]');
starInputs.forEach(input => {
input.checked = false;
});
}
});
});

</script>
<div id="toastMessage"></div>

<!-- Confirmation Modal -->
<div id="confirmationModal" class="modal">
Expand Down
Loading