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

Addtocart #574

Closed
wants to merge 2 commits into from
Closed

Addtocart #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3b1228
improved about us page
aditya07389 Oct 19, 2024
2966956
addtocart
aditya07389 Oct 19, 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
75 changes: 60 additions & 15 deletions aboutus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@

<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>

<style>
body {

Expand All @@ -37,16 +40,20 @@
padding: 40px 0;
}

h1,h2
h2
{
color: #c7becf;
text-align: center;
margin-bottom: 40px;
}
h1 span{
color: #f4be0c;
h1{
color: black;
text-align: center;
}
h1:hover{
transform: scale(1.2);
animation: zoom-out 1200 300;
}

/* h2{
color: #f4be0c;
text-align: center;
Expand Down Expand Up @@ -122,10 +129,44 @@
opacity: 1;
}
}
.head{
text-align: center;
}
.h2 {
display: inline-block; /* Ensures the animation applies correctly */
overflow: hidden; /* Hides the text that is not yet visible */
white-space: nowrap; /* Prevents the text from wrapping */
border-right: 3px solid; /* Creates a cursor effect */

animation: typing 2.5s steps(15), blink-caret 0.75s step-end infinite; /* Adjust steps based on characters */
}

/* Typing effect */
@keyframes typing {
from {
width: 0; /* Start with no width */
}
to {
width: 15ch; /* End with width equal to the length of the text */
}
}

/* Blinking cursor effect */
@keyframes blink-caret {
from, to {
border-color: transparent; /* No border */
}
50% {
border-color: black; /* Visible border */
}
}

</style>
</head>

<body>


<div class="navbar">
<div class="logo-outer">
<a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
Expand Down Expand Up @@ -173,55 +214,57 @@

<div class="container main-content">
<h1>About <span> Gaming </span>Tools</h1>
<p class="intro">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
<p class="intro typewriter">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
<div class="head">
<h2 class="h2">Why Choose Us?</h2>
</div>

<h2>Why Choose Us?</h2>

<div class="features-grid">
<div class="feature">
<div class="feature" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-gamepad feature-icon"></i>
<h3>Wide Range of Accessories</h3>
<p>From controllers to VR headsets, we offer a comprehensive selection for all gaming platforms.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-tags feature-icon"></i>
<h3>Competitive Pricing</h3>
<p>Get the best gaming gear at unbeatable prices, with regular discounts and promotions.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-truck feature-icon"></i>
<h3>Free Shipping</h3>
<p>Enjoy free courier services on all orders, making it easy to get your hands on the latest gear.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-user-shield feature-icon"></i>
<h3>Secure Shopping</h3>
<p>Shop with confidence using our secure checkout process to protect your information.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-exchange-alt feature-icon"></i>
<h3>Easy Returns</h3>
<p>Hassle-free returns and exchanges to ensure your complete satisfaction with every purchase.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-headset feature-icon"></i>
<h3>Customer Support</h3>
<p>Our dedicated team is always ready to assist you with any questions or concerns.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-star feature-icon"></i>
<h3>Product Reviews</h3>
<p>Make informed decisions with help from our customer reviews and ratings.</p>
</div>

<div class="feature">
<div class="feature" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
<i class="fas fa-question-circle feature-icon"></i>
<h3>FAQs Section</h3>
<p>Find quick answers to common questions in our comprehensive FAQ section.</p>
Expand Down Expand Up @@ -362,7 +405,9 @@ <h2>Feedback Form</h2>
<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>

<script>
AOS.init();
</script>

</body>

Expand Down
86 changes: 70 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,27 @@
<span class="slider"></span>
</label></li>
<!-- Inside the navbar ul -->
<a href="#" class="cart-button">
<a href="#" class="cart-button" id="cart-icon">
<img src="images/cart.png" alt="Cart Icon">
<span id="cart-count">0</span>
</a>
</ul>



<!-- Hamburger Menu Icon -->
<img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
</nav>
</div>
<div id="cart-popover" class="popover">
<div class="popover-content" id="popover-content">
<p>Your cart is empty</p>

</div>
<div style="align-items: center;">
<button style="border-radius: 4px;">Checkout</button>
</div>
</div>
</nav>

<nav>
Expand Down Expand Up @@ -152,7 +163,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -182,7 +193,7 @@ <h3>Controllers for Xbox One and Series X</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -214,7 +225,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -246,7 +257,7 @@ <h3>VR Headset from Meta</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -278,7 +289,7 @@ <h3>VR Headset from Apple</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -310,7 +321,7 @@ <h3>High Performance Gaming Mouse</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -341,7 +352,7 @@ <h3>Mechanical Gaming Keyboard</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -372,7 +383,7 @@ <h3>Wireless Gaming Headset</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -403,7 +414,7 @@ <h3>Ergonomic Gaming Chair</h3>
</div>
<div class="btn-section">
<button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
<button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
<button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
</div>
</div>
<div class="col-2" data-aos="fade-left">
Expand Down Expand Up @@ -719,13 +730,56 @@ <h2>Feedback Form</h2>

<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
let cartItems = [];

// Handle Add to Cart button click for all buttons with the class 'cart-btn'
const cartButtons = document.querySelectorAll('.cart-btn');

cartButtons.forEach((button) => {
button.addEventListener('click', function () {
cartItemCount++; // Increment cart count
document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display

// Get the item name from the closest .col-1 element
const itemName = this.closest('.col-1').querySelector('.card-heading').textContent;

const newItem = `${itemName} ${cartItemCount}`; // Example item, you can change this
cartItems.push(newItem); // Add item to the cart


});
});

// Handle Cart Button click to toggle popover
document.getElementById('cart-icon').addEventListener('click', function (e) {
e.preventDefault();
const popover = document.getElementById('cart-popover');
const popoverContent = document.getElementById('popover-content');

if (cartItems.length > 0) {
popoverContent.innerHTML = ''; // Clear the popover content
cartItems.forEach((item, index) => {
const itemElement = document.createElement('p');
itemElement.textContent = `${index + 1}. ${item}`;
popoverContent.appendChild(itemElement);
});
} else {
popoverContent.innerHTML = '<p>Your cart is empty</p>';
}

// Toggle popover visibility
popover.style.display = popover.style.display === 'block' ? 'none' : 'block';
});

// Close the popover if clicked outside
document.addEventListener('click', function (e) {
const cartButton = document.getElementById('cart-icon');
const popover = document.getElementById('cart-popover');

if (!cartButton.contains(e.target) && !popover.contains(e.target)) {
popover.style.display = 'none';
}
});

</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Expand Down
34 changes: 30 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,32 @@ html {
scroll-behavior: smooth;
}

/* Style for the popover */
.popover {
display: none;
position: fixed;
top: 50px;
right: 20px;
background-color: bisque;
border: 1px solid black;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 200px;
height: 200px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
}


.popover-content {
padding: 10px;
max-height: 200px;

}
.popover-content p{
color: black;
}
html::-webkit-scrollbar {
width: 12px; /* Increased the scrollbar width */
transition: width 0.3s ease;
Expand Down Expand Up @@ -537,7 +563,7 @@ button {
transform: translateX(5px); /* Slightly move the icon to the right on hover */
}

#cart-btn {
.cart-btn {
padding: 12px 14px; /* Padding for the cart button */
display: flex; /* Use flexbox for alignment */
align-items: center; /* Center align items vertically */
Expand All @@ -550,18 +576,18 @@ button {
transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for background color */
}

#cart-btn:hover {
.cart-btn:hover {
width: 160px; /* Increased width on hover */
background-color: #e53935; /* Darker red on hover */
}

#cart-btn img {
.cart-btn img {
width: 18px; /* Icon size */
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
}

#cart-btn:hover img {
.cart-btn:hover img {
opacity: 1; /* Fully visible on hover */
transform: translateX(5px); /* Slightly move the icon to the right on hover */
}
Expand Down