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

Star rating feature with feedback . #542

Closed
wants to merge 1 commit into from
Closed

Star rating feature with feedback . #542

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
301 changes: 157 additions & 144 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,155 +613,168 @@ <h2>Contact Our Customer Support Team</h2>
</div>
</section>


<footer class="footer">
<div class="footer-content">
<div class="footer-section about">
<div class="logo-container">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
<h2 class="logo-text">Collect your GamingTools</h2>
<footer class="footer">
<div class="footer-content">
<div class="footer-section about">
<div class="logo-container">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
<h2 class="logo-text">Collect your GamingTools</h2>
</div>
<p class="about-text">
Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated selection of controllers, VR gear, and more.
</p>
<div class="contact">
<span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
<span><i class="fas fa-envelope"></i> &nbsp; [email protected]</span>
</div>
<div class="socials">
<!-- Added classes to the <a> tags to add the Hover animations -->
<a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
<a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
<a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a>
<a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<p class="about-text">
Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated
selection of controllers, VR gear, and more.
</p>
<div class="contact">
<span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
<span><i class="fas fa-envelope"></i> &nbsp; [email protected]</span>
<div class="footer-section quick-links">
<!-- Quick Links Content -->
</div>
<div class="footer-section links">
<h2>Quick Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="Contributors/contributor.html">Contributors</a></li>
<li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
</ul>
</div>
<div class="socials">
<!-- Added classes to the <a> tags to add the Hover animations -->
<a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
<a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
<a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
<div class="footer-section contact-form">
<h2>Feedback Form</h2>


<!-- Feedback Star Rating -->


<div class="star_rating" aria-label="Rating" role="radiogroup">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5" title="5 stars">★</label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4" title="4 stars">★</label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3" title="3 stars">★</label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2" title="2 stars">★</label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1" title="1 star">★</label>
</div>
<form action="#" method="post">
<input type="email" name="email" class="text-input contact-input" placeholder="Your email address...">
<textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
<button type="submit" class="btn btn-big contact-btn">
<i class="fas fa-envelope"></i>
Send
</button>
</form>
</div>
</div>
<div class="footer-section quick-links">
<!-- Quick Links Content -->
</div>
<div class="footer-section links">
<h2>Quick Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="Contributors/contributor.html">Contributors</a></li>
<li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-section contact-form">
<h2>Feedback Form</h2>
<form action="#" method="post">
<input type="email" name="email" class="text-input contact-input"
placeholder="Your email address...">
<textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
<button type="submit" class="btn btn-big contact-btn">
<i class="fas fa-envelope"></i>
Send
</button>
</form>
</div>
<div class="footer-bottom">
<p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
<p>Developed by <span><a href="https://my-portfolio-git-main-swaraj-das-projects.vercel.app/" target="_blank">Swaraj</a></span></p>
</div>
</footer>

<!-- SIDEBAR -->
<div class="social-sidebar">
<div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
<ul id="sidebar-content">
<li><a class= "facebook" href="#"><i class="fa-brands fa-meta"></i></a></li>
<li><a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a class= "instagram" href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a class= "youtube" href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
<p>Developed by <span><a href="https://my-portfolio-git-main-swaraj-das-projects.vercel.app/"
target="_blank">Swaraj</a></span></p>
<div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
<i class="fas fa-arrow-left"></i>
</div>

</footer>

<!-- SIDEBAR -->

<div class="social-sidebar">
<div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
<ul id="sidebar-content">
<li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
<li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
<li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
<div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
<i class="fas fa-arrow-left"></i>
</div>


<!-- Scroll to Top Button -->
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<ion-icon name="arrow-up-outline"></ion-icon>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>

<script>
let cartItemCount = 0;

// Function to handle Add to Cart button click
document.getElementById('cart-btn').addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
alert('Item added to cart'); // Show alert
});

</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

</script>

<!-- this script is for twitter icon starts -->
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->

<!-- Scripts -->
<!-- testimonial script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script src="script.js"></script>
<script src="popup/popup.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

<script>
window.embeddedChatbotConfig = {
chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
domain: "www.chatbase.co"
}
</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


<!-- Scroll to Top Button -->
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<ion-icon name="arrow-up-outline"></ion-icon>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30" cy="30"></circle>
</svg>
</button>


<script>
let cartItemCount = 0;

// Function to handle Add to Cart button click
document.getElementById('cart-btn').addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
alert('Item added to cart'); // Show alert
});
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

<!-- this script is for twitter icon starts -->
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->

<!-- Scripts -->
<!-- testimonial script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script src="script.js"></script>
<script src="popup/popup.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

<script>
window.embeddedChatbotConfig = {
chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
domain: "www.chatbase.co"
}
main
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="awMKW3zFwW7jzUNsN4Q8O"
domain="www.chatbase.co"
defer>
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>




</body>


</html>
</html>
33 changes: 29 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1917,8 +1917,33 @@ button {
}
}

@media only screen and (max-width: 700px) {
.footer-bottom {
width: 1000vw !important;
}
/* Feedback Star Rating */

.star_rating {
display: flex;
justify-content: center;
margin-top: -20px;
margin-left: 30px;
flex-direction: row-reverse;
}

.star_rating input {
display: none;
}

.star_rating label {
font-size: 46px;
color: #ddd;
cursor: pointer;
transition: color 0.2s;
}

.star_rating input:checked ~ label {
color: #ffca28;
}

.star_rating label:hover,
.star_rating label:hover ~ label {
color: #ffca28;
}