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

Usability: Resizing, Redesigning & Adding Key Features #710

Closed
wants to merge 2 commits into from
Closed

Usability: Resizing, Redesigning & Adding Key Features #710

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
f418af5
Enhance Login Page Usability: Resizing, Redesigning & Adding Key Fea…
Bhupendrakumar20 Oct 29, 2024
2774a57
Usability: Resizing, Redesigning & Adding Key Features
Bhupendrakumar20 Oct 29, 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
96 changes: 79 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,43 +420,105 @@ <h3>Ergonomic Gaming Chair</h3>
<!-- FAQ Section -->
<section id="faq">
<div class="faq-container">
<h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

<div class="faq" data-aos="fade-right">
<h1 class="faq-title aos-init aos-animate" data-aos="fade-right">Frequently Asked Questions</h1>
<div class="faq aos-init aos-animate" data-aos="fade-right">
<input type="checkbox" id="faq1">
<label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span
class="arrow"></span></label>
<label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span class="arrow"></span></label>
<div class="faq-answer">
We have tried our best to make all the tools available for enthusiastic gamers.
</div>
</div>

<div class="faq" data-aos="fade-right">
<div class="faq aos-init aos-animate" data-aos="fade-right">
<input type="checkbox" id="faq2">
<label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the
product be replaced as per my need? <span class="arrow"></span></label>
<label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need? <span class="arrow"></span></label>
<div class="faq-answer">
By considering our terms and conditions, further actions will be taken.
</div>
</div>

<div class="faq" data-aos="fade-right">
<div class="faq aos-init aos-animate" data-aos="fade-right">
<input type="checkbox" id="faq3">
<label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span
class="arrow"></span></label>
<label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, you are welcome to buy multiple products at one time.
</div>
</div>

<div class="faq" data-aos="fade-right">
<div class="faq aos-init aos-animate" data-aos="fade-right">
<input type="checkbox" id="faq4">
<label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span
class="arrow"></span></label>
<label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span class="arrow"></span></label>
<div class="faq-answer">
We have courier services for our customers and it's absolutely free.
</div>
</div>

<!-- New FAQs added below -->

<div class="faq aos-init aos-animate" data-aos="fade-right">
<input type="checkbox" id="faq5">
<label for="faq5" class="faq-question">5. How do I cancel my order? <span class="arrow"></span></label>
<div class="faq-answer">
You can cancel your order before it dispatches by logging into your account and selecting 'Manage Your Order'. If no cancellation option appears, contact our support team.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq6">
<label for="faq6" class="faq-question">6. Can I change my delivery address after placing an order? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, as long as your order hasn't shipped. Update your address by contacting our Customer Care Team with your new address details.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq7">
<label for="faq7" class="faq-question">7. What payment methods are available? <span class="arrow"></span></label>
<div class="faq-answer">
Payment options include UPI, credit or debit cards, net banking, wallets like PayTM and PhonePe, and cash on delivery.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq8">
<label for="faq8" class="faq-question">8. Do I have to pay extra fees or taxes? <span class="arrow"></span></label>
<div class="faq-answer">
All prices include taxes. Some products may have additional shipping fees displayed at checkout.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq9">
<label for="faq9" class="faq-question">9. Can I track my order? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, tracking details will be emailed and texted to you once shipped. You can also check 'My Account' for order status.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq10">
<label for="faq10" class="faq-question">10. What should I do if I received a defective product? <span class="arrow"></span></label>
<div class="faq-answer">
Contact our support team with images or a video of the defective product within 24 hours for assistance.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq11">
<label for="faq11" class="faq-question">11. Is there a warranty on products? <span class="arrow"></span></label>
<div class="faq-answer">
Many of our products come with a limited warranty. Check the product page for more warranty information.
</div>
</div>

<div class="faq aos-init" data-aos="fade-right">
<input type="checkbox" id="faq12">
<label for="faq12" class="faq-question">12. How long does it take to process a refund? <span class="arrow"></span></label>
<div class="faq-answer">
Check the refund policies .
</div>
</div>
</div>
</section>

Expand Down
Binary file added login/google logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 81 additions & 23 deletions login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,39 +28,97 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
<i class="far fa-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
</div>
<button type="submit" class="login-button">Login</button>
<button id='google-login-btn' type="button">Login with Google</button>
<button id="google-login-btn" type="button" style="display: flex; align-items: center; padding: 10px 15px; border: none; background-color: #4285F4; color: white; font-weight: bold; border-radius: 5px; cursor: pointer;">
<img src="https://th.bing.com/th?id=OIP.oiwYjOqBvHy3I_LfVxRblAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" alt="Google logo" style="width: 20px; height: 20px; margin-right: 10px;">
Login with Google
</button>

</form>
<div class="links">
<a href="forgot.html" class="hal2">Forgot Password?</a>
<a href="../SignUp/signup.html" class="hal">Sign Up</a>
</div>
</div>
</div>
<footer class="footer">
<ul class="social-icon">
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a></li>
<footer class="footer" style="background-color: #2b2b2b; color: #fff; padding: 10px 0; text-align: center; font-family: Arial, sans-serif;">
<ul class="social-icon" style="display: flex; justify-content: center; list-style: none; padding: 0; margin-bottom: 5px;">
<li class="social-icon__item" style="margin: 0 8px;">
<a class="social-icon__link" href="#" style="color: #fff; font-size: 20px; transition: color 0.3s, transform 0.3s;">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li class="social-icon__item" style="margin: 0 8px;">
<a class="social-icon__link" href="#" style="color: #fff; font-size: 20px; transition: color 0.3s, transform 0.3s;">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li class="social-icon__item" style="margin: 0 8px;">
<a class="social-icon__link" href="#" style="color: #fff; font-size: 20px; transition: color 0.3s, transform 0.3s;">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li class="social-icon__item" style="margin: 0 8px;">
<a class="social-icon__link" href="#" style="color: #fff; font-size: 20px; transition: color 0.3s, transform 0.3s;">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="../index.html">Home</a></li>
<li class="menu__item"><a class="menu__link" href="">About</a></li>
<li class="menu__item"><a class="menu__link" href="../index.html#controller">Services</a></li>
<li class="menu__item"><a class="menu__link" href="../Contributors/contributor.html">Team</a></li>
<li class="menu__item"><a class="menu__link" href="../index.html#contact">Contact</a></li>
<div class="divider" style="border-top: 1px solid #555; margin: 10px 0;"></div>
<ul class="menu" style="display: flex; justify-content: center; list-style: none; padding: 0; margin-bottom: 5px;">
<li class="menu__item" style="margin: 0 10px;">
<a class="menu__link" href="../index.html" style="color: #e0e0e0; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s;">
Home
</a>
</li>
<li class="menu__item" style="margin: 0 10px;">
<a class="menu__link" href="" style="color: #e0e0e0; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s;">
About
</a>
</li>
<li class="menu__item" style="margin: 0 10px;">
<a class="menu__link" href="../index.html#controller" style="color: #e0e0e0; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s;">
Services
</a>
</li>
<li class="menu__item" style="margin: 0 10px;">
<a class="menu__link" href="../Contributors/contributor.html" style="color: #e0e0e0; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s;">
Team
</a>
</li>
<li class="menu__item" style="margin: 0 10px;">
<a class="menu__link" href="../index.html#contact" style="color: #e0e0e0; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s;">
Contact
</a>
</li>
</ul>
<p>&copy;2024 Collect your Gaming Tools | All Rights Reserved</p>
<div style="border-top: 2px dashed #444; width: 80%; margin: 10px auto;"></div>
<p style="font-size: 12px; color: #bbb; margin-top: 10px;">
©2024 Collect your Gaming Tools | All Rights Reserved
</p>
</footer>


<!-- Inline CSS for hover effects and animations -->
<style>
.social-icon__link:hover {
color: #ff5722;
transform: scale(1.2);
}

.menu__link:hover {
background-color: #ff5722;
color: #fff;
}

/* Responsive styling */
@media (max-width: 768px) {
.social-icon, .menu {
flex-direction: column;
}
.social-icon__item, .menu__item {
margin: 5px 0;
}
}
</style>

<script>
const togglePassword = document.getElementById('togglePassword');
Expand Down
Loading