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

Done fixes in feedback #644

Merged
merged 1 commit into from
Oct 12, 2024
Merged

Done fixes in feedback #644

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
287 changes: 187 additions & 100 deletions Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,26 @@
background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
transition: transform 0.1s, left 0.1s, top 0.1s;
}

#backToTopBtn {
display: none; /* Hidden by default */
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #e81a1a;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}

#backToTopBtn:hover {
background-color: #555;
}
</style>
</head>

Expand Down Expand Up @@ -491,116 +511,183 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
">↑</button>
</div>
</footer>
<script src="preloader.js"></script>
<script>
// Add event listeners to each star label for toggling the selection
const stars = document.querySelectorAll('.star-rating input');
stars.forEach(star => {
star.addEventListener('change', function () {
// Remove the checked state from all stars
stars.forEach(s => {
const label = document.querySelector(`label[for="${s.id}"]`);
label.style.color = '#ddd'; // Reset color for unselected stars
});
// Highlight the selected star and all previous stars
this.checked = true;
const currentStarValue = this.value;
for (let i = 1; i <= currentStarValue; i++) {
const label = document.querySelector(`label[for="star${i}"]`);
label.style.color = '#ffdd00'; // Highlight selected stars
}
});
});

// Handle form submission
const form = document.getElementById('feedback-box');
const feedbackBox = document.querySelector('.feedback-box');
const thankYouMessage = document.getElementById('thank-you-message');

form.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the default form submission
<!-- FAQ Popup Button -->
<button id="faqButton" style="position: fixed; bottom: 20px; right: 80px; z-index: 1000; background-color: #2980b9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; display: none;">FAQ</button>

// Hide the feedback-box div
feedbackBox.style.display = 'none';

// Show the thank-you message
thankYouMessage.style.display = 'flex';

// Hide the form to avoid further submissions
form.style.display = 'none';
<!-- FAQ Popup -->
<div id="faqPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1001; max-width: 80%; max-height: 80%; overflow-y: auto;">
<h2>Frequently Asked Questions</h2>
<div class="faq-content">
<div class="faq-item">
<h3>What is AmbuFlow?</h3>
<p>AmbuFlow is an advanced ambulance monitoring system designed to optimize emergency response times and improve patient care.</p>
</div>
<div class="faq-item">
<h3>How does real-time tracking work?</h3>
<p>Our system uses GPS technology to track ambulances in real-time, allowing for efficient dispatch and route optimization.</p>
</div>
<div class="faq-item">
<h3>Is the service available 24/7?</h3>
<p>Yes, AmbuFlow operates round the clock to ensure emergency services are always available when needed.</p>
</div>
<div class="faq-item">
<h3>How can hospitals benefit from AmbuFlow?</h3>
<p>Hospitals can improve resource management, reduce response times, and enhance overall patient care through our integrated system.</p>
</div>
</div>
<button id="closeFaqPopup" style="background-color: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px;">Close</button>
</div>

// Redirect to the home page after 2 seconds
setTimeout(function () {
window.location.href = 'index.html';
}, 5000); // Adjust the delay as needed
<script src="preloader.js"></script>
<script>
// Add event listeners to each star label for toggling the selection
const stars = document.querySelectorAll('.star-rating input');
stars.forEach(star => {
star.addEventListener('change', function () {
// Remove the checked state from all stars
stars.forEach(s => {
const label = document.querySelector(`label[for="${s.id}"]`);
label.style.color = '#ddd'; // Reset color for unselected stars
});
// Highlight the selected star and all previous stars
this.checked = true;
const currentStarValue = this.value;
for (let i = 1; i <= currentStarValue; i++) {
const label = document.querySelector(`label[for="star${i}"]`);
label.style.color = '#ffdd00'; // Highlight selected stars
}
});

// Update or add this JavaScript for the cursor effect
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];
});

// Handle form submission
const form = document.getElementById('feedback-box');
const feedbackBox = document.querySelector('.feedback-box');
const thankYouMessage = document.getElementById('thank-you-message');

form.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the default form submission

// Hide the feedback-box div
feedbackBox.style.display = 'none';

// Show the thank-you message
thankYouMessage.style.display = 'flex';

// Hide the form to avoid further submissions
form.style.display = 'none';

// Redirect to the home page after 2 seconds
setTimeout(function () {
window.location.href = 'index.html';
}, 5000); // Adjust the delay as needed
});

// Update or add this JavaScript for the cursor effect
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";

window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.style.scale = (circles.length - index) / circles.length;
circle.x = x;
circle.y = y;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
</script>
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

<!-- Add this if it's not already present -->
<div class="circle"></div>
requestAnimationFrame(animateCircles);
}

animateCircles();

// Add this new code for the Back to Top functionality
const backToTopBtn = document.getElementById('backToTopBtn');
const faqButton = document.getElementById('faqButton');
const faqPopup = document.getElementById('faqPopup');
const closeFaqPopup = document.getElementById('closeFaqPopup');

// Show/hide buttons when user scrolls
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopBtn.style.display = "block";
faqButton.style.display = "block";
} else {
backToTopBtn.style.display = "none";
faqButton.style.display = "none";
}
};

// Scroll to top when button is clicked
backToTopBtn.addEventListener('click', function() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
});

// FAQ Popup functionality
faqButton.addEventListener('click', () => {
faqPopup.style.display = 'block';
});

closeFaqPopup.addEventListener('click', () => {
faqPopup.style.display = 'none';
});

// Close popup when clicking outside
window.addEventListener('click', (event) => {
if (event.target === faqPopup) {
faqPopup.style.display = 'none';
}
});
</script>

<!-- Add this if it's not already present -->
<div class="circle"></div>
</body>

</html>