Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WiseFind - Personalized Product Recommendations</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #ffffff; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: #fff; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| color: #4361ee; | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| color: #4361ee; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 25px; | |
| } | |
| nav ul li a { | |
| text-decoration: none; | |
| color: #333; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| nav ul li a:hover { | |
| color: #4361ee; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| display: inline-block; | |
| margin-left: 15px; | |
| } | |
| .btn-outline { | |
| border: 2px solid #4361ee; | |
| color: #4361ee; | |
| background: transparent; | |
| } | |
| .btn-outline:hover { | |
| background-color: #4361ee; | |
| color: white; | |
| } | |
| .btn-primary { | |
| background-color: #4361ee; | |
| color: white; | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| background-color: #3a56d4; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 100px 0; | |
| background: white; | |
| } | |
| .hero .container { | |
| display: flex; | |
| align-items: center; | |
| gap: 50px; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| } | |
| .hero-image { | |
| flex: 1; | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 15px; | |
| color: #333; | |
| line-height: 1.2; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| color: #666; | |
| margin-bottom: 30px; | |
| } | |
| .search-box { | |
| display: flex; | |
| max-width: 600px; | |
| margin-bottom: 30px; | |
| } | |
| .search-input { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 15px; | |
| border: 2px solid #4361ee; | |
| border-radius: 8px 0 0 8px; | |
| background: white; | |
| } | |
| .search-input i { | |
| color: #666; | |
| margin-right: 10px; | |
| } | |
| .search-input input { | |
| flex: 1; | |
| border: none; | |
| padding: 15px 0; | |
| font-size: 1rem; | |
| outline: none; | |
| } | |
| .search-btn { | |
| background: #4361ee; | |
| color: white; | |
| border: none; | |
| padding: 0 30px; | |
| border-radius: 0 8px 8px 0; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .search-btn:hover { | |
| background: #3a56d4; | |
| } | |
| .hero-categories { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .category-tag { | |
| background: #f5f7ff; | |
| color: #4361ee; | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .category-tag:hover { | |
| background: #4361ee; | |
| color: white; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #444; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| transition: border 0.3s; | |
| } | |
| .form-control:focus { | |
| border-color: #4361ee; | |
| outline: none; | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .form-row .form-group { | |
| flex: 1; | |
| } | |
| /* Budget Slider */ | |
| .budget-slider-container { | |
| margin-top: 10px; | |
| } | |
| .budget-slider { | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 5px; | |
| background: #ddd; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| .budget-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #4361ee; | |
| cursor: pointer; | |
| } | |
| .budget-slider::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #4361ee; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .budget-display { | |
| text-align: center; | |
| margin-top: 10px; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: #4361ee; | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 80px 0; | |
| background-color: #f8f9fa; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 15px; | |
| color: #333; | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| text-align: center; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| color: #4361ee; | |
| margin-bottom: 20px; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: #333; | |
| } | |
| .feature-card p { | |
| color: #666; | |
| } | |
| /* Categories Section */ | |
| .categories { | |
| padding: 80px 0; | |
| } | |
| .categories-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .category-card { | |
| background: white; | |
| border: 1px solid #eee; | |
| border-radius: 10px; | |
| padding: 30px 20px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .category-card:hover { | |
| border-color: #4361ee; | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); | |
| } | |
| .category-icon { | |
| font-size: 2.5rem; | |
| color: #4361ee; | |
| margin-bottom: 15px; | |
| } | |
| .category-card h4 { | |
| font-size: 1.2rem; | |
| color: #333; | |
| } | |
| /* Recommendations Modal */ | |
| .recommendations-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 1002; | |
| overflow-y: auto; | |
| } | |
| .recommendations-content { | |
| background-color: white; | |
| margin: 3% auto; | |
| padding: 30px; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 900px; | |
| position: relative; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| font-size: 2rem; | |
| cursor: pointer; | |
| color: #aaa; | |
| } | |
| .close-modal:hover { | |
| color: #333; | |
| } | |
| .ai-recommendation { | |
| background-color: #f8f9fa; | |
| border-left: 4px solid #4361ee; | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| border-radius: 0 10px 10px 0; | |
| } | |
| .ai-disclaimer { | |
| font-style: italic; | |
| color: #e74c3c; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| } | |
| .ai-suggestion { | |
| margin-bottom: 15px; | |
| } | |
| .product-list { | |
| margin-top: 20px; | |
| } | |
| .product-item { | |
| background-color: white; | |
| border: 1px solid #eee; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| transition: transform 0.3s; | |
| } | |
| .product-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| } | |
| .product-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .product-name { | |
| font-weight: bold; | |
| font-size: 1.1rem; | |
| color: #333; | |
| } | |
| .product-price { | |
| font-weight: bold; | |
| color: #4361ee; | |
| font-size: 1.1rem; | |
| } | |
| .product-details { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .product-source { | |
| display: flex; | |
| align-items: center; | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .product-source i { | |
| margin-right: 5px; | |
| } | |
| .product-link { | |
| background-color: #4361ee; | |
| color: white; | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: background-color 0.3s; | |
| } | |
| .product-link:hover { | |
| background-color: #3a56d4; | |
| } | |
| .experts-section { | |
| margin-top: 30px; | |
| } | |
| .experts-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| color: #333; | |
| text-align: center; | |
| } | |
| .experts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .expert-card { | |
| background-color: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: transform 0.3s; | |
| } | |
| .expert-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .expert-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| margin: 0 auto 15px; | |
| object-fit: cover; | |
| } | |
| .expert-name { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| color: #333; | |
| } | |
| .expert-specialty { | |
| color: #4361ee; | |
| margin-bottom: 10px; | |
| } | |
| .expert-rating { | |
| color: #f39c12; | |
| margin-bottom: 15px; | |
| } | |
| .btn-expert { | |
| background-color: #4361ee; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: background-color 0.3s; | |
| } | |
| .btn-expert:hover { | |
| background-color: #3a56d4; | |
| } | |
| /* CTA Section */ | |
| .cta-section { | |
| padding: 80px 0; | |
| background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%); | |
| color: white; | |
| text-align: center; | |
| } | |
| .cta-section h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 20px; | |
| } | |
| .cta-section p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 30px; | |
| } | |
| .btn-light { | |
| background-color: white; | |
| color: #4361ee; | |
| border: none; | |
| padding: 12px 30px; | |
| font-size: 1.1rem; | |
| } | |
| .btn-light:hover { | |
| background-color: #f8f9fa; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: #333; | |
| color: #ddd; | |
| padding: 60px 0 20px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 20px; | |
| color: white; | |
| } | |
| .footer-col ul { | |
| list-style: none; | |
| } | |
| .footer-col ul li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-col ul li a { | |
| color: #ddd; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-col ul li a:hover { | |
| color: #4361ee; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background-color: #444; | |
| color: white; | |
| border-radius: 50%; | |
| transition: background-color 0.3s; | |
| } | |
| .social-links a:hover { | |
| background-color: #4361ee; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid #444; | |
| font-size: 0.9rem; | |
| } | |
| /* Mobile Responsive */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: #333; | |
| } | |
| @media (max-width: 992px) { | |
| .hero .container { | |
| flex-direction: column; | |
| } | |
| .hero-content, | |
| .hero-image { | |
| width: 100%; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-container { | |
| padding: 15px; | |
| } | |
| nav { | |
| position: fixed; | |
| top: 70px; | |
| left: 0; | |
| width: 100%; | |
| background: white; | |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); | |
| padding: 20px; | |
| transform: translateY(-150%); | |
| transition: transform 0.3s; | |
| z-index: 999; | |
| } | |
| nav.active { | |
| transform: translateY(0); | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| } | |
| nav ul li { | |
| margin: 10px 0; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .cta-buttons { | |
| display: none; | |
| } | |
| .hero { | |
| padding: 120px 0 60px; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .hero-form { | |
| padding: 20px; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .features, .categories, .cta-section { | |
| padding: 60px 0; | |
| } | |
| .footer-grid { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .social-links { | |
| justify-content: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container header-container"> | |
| <div class="logo"> | |
| <img src="https://huggingface.co/spaces/Akshansh115/logo/resolve/main/images/Screenshot%202026-01-04%20214848.png" alt="WiseFind Logo" style="height: 40px;"> | |
| </div> | |
| <button class="mobile-menu-btn" id="mobileMenuBtn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <nav id="mainNav"> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">How It Works</a></li> | |
| <li><a href="#categories">Categories</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="cta-buttons"> | |
| <a href="#" class="btn btn-outline">Log In</a> | |
| <a href="#" class="btn btn-primary">Sign Up</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Find the Perfect Product for You</h1> | |
| <p class="hero-subtitle">Get personalized recommendations from experts and community members</p> | |
| <div class="search-box"> | |
| <div class="search-input"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="What are you looking for?"> | |
| </div> | |
| <button class="search-btn">Search</button> | |
| </div> | |
| <div class="hero-categories"> | |
| <div class="category-tag">Electronics</div> | |
| <div class="category-tag">Fashion</div> | |
| <div class="category-tag">Home & Kitchen</div> | |
| <div class="category-tag">Beauty</div> | |
| <div class="category-tag">Sports</div> | |
| <div class="category-tag">Books</div> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="https://huggingface.co/spaces/Akshansh115/logo/resolve/main/images/Screenshot%202026-01-04%20214848.png" alt="WiseFind Hero Image" style="max-height: 400px;"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>How It Works</h2> | |
| <p>Our simple three-step process connects you with the perfect products for your needs</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-edit"></i> | |
| </div> | |
| <h3>Tell Us Your Needs</h3> | |
| <p>Share your budget, category, and purpose. The more details you provide, the better our recommendations.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Get Expert Advice</h3> | |
| <p>Our community of experts, moderators, and enthusiasts will provide tailored recommendations based on your needs.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| <h3>Make Your Choice</h3> | |
| <p>Compare recommendations, read reviews, and make your purchase with confidence knowing you've made the right choice.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="categories" id="categories"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Explore Categories</h2> | |
| <p>We cover a wide range of product categories to meet all your needs</p> | |
| </div> | |
| <div class="categories-grid"> | |
| <div class="category-card" data-category="tech"> | |
| <div class="category-icon"> | |
| <i class="fas fa-laptop"></i> | |
| </div> | |
| <h4>Tech & Electronics</h4> | |
| </div> | |
| <div class="category-card" data-category="sports"> | |
| <div class="category-icon"> | |
| <i class="fas fa-football-ball"></i> | |
| </div> | |
| <h4>Sports Equipment</h4> | |
| </div> | |
| <div class="category-card" data-category="fitness"> | |
| <div class="category-icon"> | |
| <i class="fas fa-dumbbell"></i> | |
| </div> | |
| <h4>Gym & Fitness</h4> | |
| </div> | |
| <div class="category-card" data-category="home"> | |
| <div class="category-icon"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <h4>Household Products</h4> | |
| </div> | |
| <div class="category-card" data-category="outdoor"> | |
| <div class="category-icon"> | |
| <i class="fas fa-campground"></i> | |
| </div> | |
| <h4>Outdoor & Recreation</h4> | |
| </div> | |
| <div class="category-card" data-category="fashion"> | |
| <div class="category-icon"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| <h4>Fashion & Accessories</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recommendations Modal --> | |
| <div id="recommendationsModal" class="recommendations-modal"> | |
| <div class="recommendations-content"> | |
| <span class="close-modal">×</span> | |
| <div class="ai-recommendation"> | |
| <div class="ai-disclaimer">This is a suggestion of AI. Do not consider as expert advice.</div> | |
| <div class="ai-suggestion" id="aiSuggestion"> | |
| <!-- AI recommendation will be populated by JavaScript --> | |
| </div> | |
| <div class="product-list" id="productList"> | |
| <!-- Product recommendations will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="experts-section"> | |
| <h2 class="experts-title">Our Experts</h2> | |
| <div class="experts-grid" id="expertsGrid"> | |
| <!-- Experts will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <section class="cta-section"> | |
| <div class="container"> | |
| <h2>Ready to Find Your Perfect Product?</h2> | |
| <p>Join our community today and get personalized recommendations from experts and enthusiasts.</p> | |
| <a href="#" class="btn btn-light">Get Started Now</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-col"> | |
| <h3>WiseFind | |
| </h3> | |
| <p>Your trusted platform for personalized product recommendations across all categories.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">How It Works</a></li> | |
| <li><a href="#">Categories</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Categories</h3> | |
| <ul> | |
| <li><a href="#">Tech & Electronics</a></li> | |
| <li><a href="#">Sports Equipment</a></li> | |
| <li><a href="#">Gym & Fitness</a></li> | |
| <li><a href="#">Household Products</a></li> | |
| <li><a href="#">Outdoor & Recreation</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Contact Us (India)</h3> | |
| <ul> | |
| <li><i class="fas fa-map-marker-alt"></i> 123, Brigade Road, Bangalore, Karnataka 560001</li> | |
| <li><i class="fas fa-phone"></i> +91 80 1234 5678</li> | |
| <li><i class="fas fa-envelope"></i> info@WiseFind | |
| .in</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 WiseFind | |
| . All Rights Reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Subcategories data | |
| const subcategories = { | |
| tech: [ | |
| 'Laptops & Computers', | |
| 'Smartphones & Tablets', | |
| 'TVs & Home Entertainment', | |
| 'Cameras & Photography', | |
| 'Audio & Headphones', | |
| 'Gaming Consoles', | |
| 'Wearables', | |
| 'Smart Home Devices', | |
| 'Computer Accessories', | |
| 'Networking Devices' | |
| ], | |
| sports: [ | |
| 'Cricket Equipment', | |
| 'Football Gear', | |
| 'Badminton', | |
| 'Tennis', | |
| 'Basketball', | |
| 'Fitness Accessories', | |
| 'Outdoor Sports', | |
| 'Indoor Games', | |
| 'Cycling', | |
| 'Swimming' | |
| ], | |
| fitness: [ | |
| 'Cardio Equipment', | |
| 'Strength Training', | |
| 'Yoga & Pilates', | |
| 'Fitness Accessories', | |
| 'Gym Wearables', | |
| 'Supplements', | |
| 'Home Gym Setup', | |
| 'Exercise Mats', | |
| 'Resistance Bands', | |
| 'Fitness Trackers' | |
| ], | |
| home: [ | |
| 'Kitchen Appliances', | |
| 'Furniture', | |
| 'Home Decor', | |
| 'Cleaning Tools', | |
| 'Storage Solutions', | |
| 'Lighting', | |
| 'Bathroom Essentials', | |
| 'Home Security', | |
| 'Bedding', | |
| 'Laundry Appliances' | |
| ], | |
| outdoor: [ | |
| 'Camping Gear', | |
| 'Hiking Equipment', | |
| 'Cycling', | |
| 'Water Sports', | |
| 'Travel Accessories', | |
| 'Adventure Sports', | |
| 'Picnic & Beach', | |
| 'Fishing', | |
| 'Climbing', | |
| 'Winter Sports' | |
| ], | |
| fashion: [ | |
| 'Men\'s Clothing', | |
| 'Women\'s Clothing', | |
| 'Footwear', | |
| 'Bags & Wallets', | |
| 'Watches', | |
| 'Jewelry', | |
| 'Sunglasses', | |
| 'Winter Wear', | |
| 'Accessories', | |
| 'Ethnic Wear' | |
| ] | |
| }; | |
| // Products database | |
| const products = { | |
| 'laptops-&-computers': [ | |
| { | |
| name: 'Dell Inspiron 15 3501', | |
| price: 34990, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '15.6 inch FHD Display, 11th Gen Intel Core i3, 8GB RAM, 1TB HDD' | |
| }, | |
| { | |
| name: 'HP 15s-er0023AU', | |
| price: 32999, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: '15.6 inch FHD Display, AMD Ryzen 3, 8GB RAM, 512GB SSD' | |
| }, | |
| { | |
| name: 'Lenovo IdeaPad Slim 3', | |
| price: 35990, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '15.6 inch FHD Display, 11th Gen Intel Core i3, 8GB RAM, 256GB SSD' | |
| } | |
| ], | |
| 'smartphones-&-tablets': [ | |
| { | |
| name: 'Redmi Note 12', | |
| price: 14999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '6.67 inch FHD+ AMOLED Display, Snapdragon 4 Gen 1, 6GB RAM, 128GB Storage' | |
| }, | |
| { | |
| name: 'Samsung Galaxy M13', | |
| price: 13999, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: '6.6 inch FHD+ Display, Exynos 850, 6GB RAM, 128GB Storage' | |
| }, | |
| { | |
| name: 'Realme 10', | |
| price: 15999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '6.4 inch FHD+ AMOLED Display, MediaTek Dimensity 700, 8GB RAM, 128GB Storage' | |
| } | |
| ], | |
| 'tvs-&-home-entertainment': [ | |
| { | |
| name: 'Mi 5X 43 inch', | |
| price: 24999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '43 inch 4K Ultra HD Smart Android TV, Dolby Vision, HDR10' | |
| }, | |
| { | |
| name: 'Samsung Crystal 4K Pro', | |
| price: 27999, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: '43 inch 4K Ultra HD Smart TV, Crystal Processor 4K, HDR' | |
| }, | |
| { | |
| name: 'LG UM7290PTD', | |
| price: 29999, | |
| source: 'Croma', | |
| link: '#', | |
| description: '43 inch 4K Ultra HD Smart TV, Active HDR, ThinQ AI' | |
| } | |
| ], | |
| 'cricket-equipment': [ | |
| { | |
| name: 'SG Sunny Tonny English Willow', | |
| price: 12999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: 'English Willow Cricket Bat, Short Handle, Size 6' | |
| }, | |
| { | |
| name: 'Kookaburra Kahuna 150', | |
| price: 14999, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: 'English Willow Cricket Bat, Short Handle, Size 5' | |
| }, | |
| { | |
| name: 'SS Ton Gold', | |
| price: 9999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: 'English Willow Cricket Bat, Short Handle, Size 6' | |
| } | |
| ], | |
| 'fitness-accessories': [ | |
| { | |
| name: 'Fitbit Charge 5', | |
| price: 12999, | |
| source: 'Amazon', | |
| link: '#', | |
| description: 'Advanced Health & Fitness Tracker with GPS, 24/7 Heart Rate' | |
| }, | |
| { | |
| name: 'Mi Band 6', | |
| price: 3499, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: 'Fitness Tracker with 1.56 inch AMOLED Display, SpO2 Monitoring' | |
| }, | |
| { | |
| name: 'Realme Band 2', | |
| price: 2499, | |
| source: 'Amazon', | |
| link: '#', | |
| description: 'Fitness Tracker with 1.4 inch Large Color Display, 50m Water Resistant' | |
| } | |
| ], | |
| 'kitchen-appliances': [ | |
| { | |
| name: 'Philips Air Fryer HD9252', | |
| price: 8995, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '4.1 Liters, 1400W, Rapid Air Technology, Black' | |
| }, | |
| { | |
| name: 'Prestige PAF 4.0', | |
| price: 6495, | |
| source: 'Flipkart', | |
| link: '#', | |
| description: '4 Liters, 1500W, Air Fryer with Digital Control Panel' | |
| }, | |
| { | |
| name: 'Inalsa Air Fryer', | |
| price: 7495, | |
| source: 'Amazon', | |
| link: '#', | |
| description: '4.2 Liters, 1500W, Digital Control Panel, 7 Presets' | |
| } | |
| ] | |
| }; | |
| // Experts data | |
| const experts = [ | |
| { | |
| name: "Rajesh Sharma", | |
| specialty: "Tech & Electronics", | |
| rating: 4.8, | |
| avatar: "https://randomuser.me/api/portraits/men/32.jpg" | |
| }, | |
| { | |
| name: "Priya Patel", | |
| specialty: "Fashion & Accessories", | |
| rating: 4.9, | |
| avatar: "https://randomuser.me/api/portraits/women/44.jpg" | |
| }, | |
| { | |
| name: "Amit Kumar", | |
| specialty: "Sports Equipment", | |
| rating: 4.7, | |
| avatar: "https://randomuser.me/api/portraits/men/67.jpg" | |
| }, | |
| { | |
| name: "Neha Singh", | |
| specialty: "Home & Kitchen", | |
| rating: 4.6, | |
| avatar: "https://randomuser.me/api/portraits/women/28.jpg" | |
| } | |
| ]; | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const mainNav = document.getElementById('mainNav'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mainNav.classList.toggle('active'); | |
| }); | |
| // Budget slider | |
| const budgetSlider = document.getElementById('budget'); | |
| const budgetDisplay = document.getElementById('budgetDisplay'); | |
| budgetSlider.addEventListener('input', () => { | |
| const value = parseInt(budgetSlider.value); | |
| budgetDisplay.textContent = `₹${value.toLocaleString('en-IN')}`; | |
| }); | |
| // Category and subcategory handling | |
| const categorySelect = document.getElementById('category'); | |
| const subcategorySelect = document.getElementById('subcategory'); | |
| categorySelect.addEventListener('change', () => { | |
| const selectedCategory = categorySelect.value; | |
| // Clear existing subcategories | |
| subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>'; | |
| if (selectedCategory && subcategories[selectedCategory]) { | |
| // Populate subcategories | |
| subcategories[selectedCategory].forEach(sub => { | |
| const option = document.createElement('option'); | |
| option.value = sub.toLowerCase().replace(/\s+/g, '-'); | |
| option.textContent = sub; | |
| subcategorySelect.appendChild(option); | |
| }); | |
| } | |
| }); | |
| // Category cards interaction | |
| const categoryCards = document.querySelectorAll('.category-card'); | |
| categoryCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| const category = card.getAttribute('data-category'); | |
| const categoryName = card.querySelector('h4').textContent; | |
| // Set category in form | |
| categorySelect.value = category; | |
| // Trigger change event to populate subcategory dropdown | |
| const event = new Event('change'); | |
| categorySelect.dispatchEvent(event); | |
| // Scroll to form | |
| window.scrollTo({ | |
| top: document.querySelector('.hero-form').offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Close modal when clicking on X or outside modal | |
| document.querySelectorAll('.close-modal').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.getElementById('recommendationsModal').style.display = 'none'; | |
| }); | |
| }); | |
| window.addEventListener('click', (e) => { | |
| if (e.target === document.getElementById('recommendationsModal')) { | |
| document.getElementById('recommendationsModal').style.display = 'none'; | |
| } | |
| }); | |
| // Form submission | |
| const recommendationForm = document.getElementById('recommendationForm'); | |
| const recommendationsModal = document.getElementById('recommendationsModal'); | |
| const aiSuggestion = document.getElementById('aiSuggestion'); | |
| const productList = document.getElementById('productList'); | |
| const expertsGrid = document.getElementById('expertsGrid'); | |
| recommendationForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const budget = document.getElementById('budget').value; | |
| const category = document.getElementById('category').value; | |
| const subcategory = document.getElementById('subcategory').value; | |
| const purpose = document.getElementById('purpose').value; | |
| // Get budget text for display | |
| const budgetText = `₹${parseInt(budget).toLocaleString('en-IN')}`; | |
| const categoryText = document.getElementById('category').options[document.getElementById('category').selectedIndex].text; | |
| const subcategoryText = document.getElementById('subcategory').options[document.getElementById('subcategory').selectedIndex].text; | |
| // Generate AI recommendation | |
| aiSuggestion.innerHTML = ` | |
| <p>Based on your requirements for a <strong>${subcategoryText}</strong> in the <strong>${categoryText}</strong> category with a budget of <strong>${budgetText}</strong> for <strong>${purpose}</strong>, our AI suggests the following:</p> | |
| <p>Consider products with high ratings in the mid-range of your budget. Look for items that offer the best value for money with features specifically suited to your stated purpose. Check for warranty options and after-sales service availability in your area.</p> | |
| <p>Popular options in this category typically include brands that offer a good balance of quality and affordability. Be sure to read recent customer reviews focusing on durability and performance for your specific use case.</p> | |
| `; | |
| // Clear existing products | |
| productList.innerHTML = ''; | |
| // Add product list heading | |
| const productHeading = document.createElement('h3'); | |
| productHeading.textContent = 'Recommended Products'; | |
| productHeading.style.marginTop = '20px'; | |
| productHeading.style.marginBottom = '15px'; | |
| productHeading.style.color = '#333'; | |
| productList.appendChild(productHeading); | |
| // Get products for the selected subcategory | |
| const subcategoryKey = subcategory.toLowerCase().replace(/\s+/g, '-'); | |
| const categoryProducts = products[subcategoryKey] || []; | |
| // Filter products by budget (within ±20% of user's budget) | |
| const minBudget = parseInt(budget) * 0.8; | |
| const maxBudget = parseInt(budget) * 1.2; | |
| const filteredProducts = categoryProducts.filter(product => | |
| product.price >= minBudget && product.price <= maxBudget | |
| ); | |
| // Display up to 3 products | |
| const productsToShow = filteredProducts.slice(0, 3); | |
| if (productsToShow.length > 0) { | |
| productsToShow.forEach(product => { | |
| const productItem = document.createElement('div'); | |
| productItem.className = 'product-item'; | |
| productItem.innerHTML = ` | |
| <div class="product-header"> | |
| <div class="product-name">${product.name}</div> | |
| <div class="product-price">₹${product.price.toLocaleString('en-IN')}</div> | |
| </div> | |
| <div class="product-details"> | |
| <div class="product-source"> | |
| <i class="fas fa-shopping-cart"></i> ${product.source} | |
| </div> | |
| <a href="${product.link}" target="_blank" class="product-link">View Product</a> | |
| </div> | |
| <div style="margin-top: 10px; font-size: 0.9rem; color: #666;"> | |
| ${product.description} | |
| </div> | |
| `; | |
| productList.appendChild(productItem); | |
| }); | |
| } else { | |
| const noProducts = document.createElement('div'); | |
| noProducts.style.padding = '15px'; | |
| noProducts.style.textAlign = 'center'; | |
| noProducts.style.color = '#666'; | |
| noProducts.textContent = 'No products found in your budget range. Please adjust your budget or try a different category.'; | |
| productList.appendChild(noProducts); | |
| } | |
| // Clear existing experts | |
| expertsGrid.innerHTML = ''; | |
| // Populate experts | |
| experts.forEach(expert => { | |
| const expertCard = document.createElement('div'); | |
| expertCard.className = 'expert-card'; | |
| expertCard.innerHTML = ` | |
| <img src="${expert.avatar}" alt="${expert.name}" class="expert-avatar"> | |
| <div class="expert-name">${expert.name}</div> | |
| <div class="expert-specialty">${expert.specialty}</div> | |
| <div class="expert-rating"> | |
| ${generateStars(expert.rating)} ${expert.rating} | |
| </div> | |
| <button class="btn-expert" data-expert="${expert.name}">Get Advice</button> | |
| `; | |
| expertsGrid.appendChild(expertCard); | |
| }); | |
| // Add event listeners to expert buttons | |
| document.querySelectorAll('.btn-expert').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const expertName = btn.getAttribute('data-expert'); | |
| alert(`Your request has been sent to ${expertName}. They will contact you soon with personalized recommendations!`); | |
| }); | |
| }); | |
| // Show recommendations modal | |
| recommendationsModal.style.display = 'block'; | |
| }); | |
| // Generate star rating | |
| function generateStars(rating) { | |
| let stars = ''; | |
| const fullStars = Math.floor(rating); | |
| const hasHalfStar = rating % 1 >= 0.5; | |
| for (let i = 0; i < fullStars; i++) { | |
| stars += '<i class="fas fa-star"></i>'; | |
| } | |
| if (hasHalfStar) { | |
| stars += '<i class="fas fa-star-half-alt"></i>'; | |
| } | |
| const emptyStars = 5 - Math.ceil(rating); | |
| for (let i = 0; i < emptyStars; i++) { | |
| stars += '<i class="far fa-star"></i>'; | |
| } | |
| return stars; | |
| } | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mainNav.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |