<!DOCTYPE html>
SmartCart AI | Hackathon Project
/* ========================= GLOBAL ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f3f4f6; color: #222; } /* ========================= NAVBAR ========================= */ .navbar { background: #131921; color: white; padding: 15px 5%; display: flex; align-items: center; gap: 25px; } .logo { font-size: 24px; font-weight: bold; white-space: nowrap; } .logo span { color: #ff9900; } .search-box { flex: 1; display: flex; } .search-box input { width: 100%; padding: 12px; border: none; outline: none; font-size: 16px; } .search-box button { width: 55px; border: none; background: #ff9900; cursor: pointer; } .nav-actions { display: flex; gap: 10px; } .nav-actions button { background: transparent; color: white; border: 1px solid #777; padding: 9px 12px; cursor: pointer; } /* ========================= MENU ========================= */ .menu { background: #232f3e; display: flex; justify-content: center; gap: 35px; padding: 12px; } .menu a { color: white; text-decoration: none; } /* ========================= HERO ========================= */ .hero { min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient( rgba(0,0,0,.65), rgba(0,0,0,.65) ), linear-gradient(135deg,#ff9900,#146eb4); color: white; } .hero-content { max-width: 750px; padding: 20px; } .hero h1 { font-size: 50px; margin-bottom: 20px; } .hero h1 span { color: #ff9900; } .hero p { font-size: 20px; margin-bottom: 30px; } .primary-btn { background: #ff9900; border: none; padding: 14px 30px; font-size: 17px; font-weight: bold; cursor: pointer; } /* ========================= SECTION ========================= */ .section { padding: 50px 7%; } .section h2 { margin-bottom: 25px; } /* ========================= CATEGORIES ========================= */ .categories { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 20px; } .category { background: white; padding: 30px 15px; text-align: center; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.1); cursor: pointer; transition: .3s; } .category:hover { transform: translateY(-5px); } /* ========================= PRODUCTS ========================= */ .products { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 25px; } .product-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.12); transition: .3s; } .product-card:hover { transform: translateY(-6px); } .product-image { height: 150px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-size: 75px; margin-bottom: 15px; } .product-card h3 { margin-bottom: 10px; } .rating { margin-bottom: 10px; } .price { font-size: 22px; font-weight: bold; margin-bottom: 15px; } .product-card button, .offer-card button { width: 100%; padding: 12px; background: #ff9900; border: none; cursor: pointer; font-weight: bold; } /* ========================= AI ASSISTANT ========================= */ .ai-section { padding: 60px 7%; background: #131921; color: white; } .ai-container { max-width: 800px; margin: auto; } .ai-container h2 { margin-bottom: 10px; } .chat-box { background: white; color: #222; margin-top: 25px; border-radius: 10px; overflow: hidden; } .chat-messages { min-height: 250px; max-height: 350px; overflow-y: auto; padding: 20px; } .bot-message, .user-message { padding: 12px; margin-bottom: 10px; border-radius: 8px; max-width: 80%; } .bot-message { background: #eee; } .user-message { background: #ff9900; margin-left: auto; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; padding: 15px; border: none; outline: none; } .chat-input button { padding: 15px 25px; border: none; background: #ff9900; cursor: pointer; } /* ========================= OFFERS ========================= */ .offers { padding: 50px 7%; text-align: center; } .offer-card { max-width: 500px; margin: 20px auto; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.1); } .offer-card p { font-size: 25px; margin: 20px; } /* ========================= FOOTER ========================= */ footer { background: #131921; color: white; text-align: center; padding: 35px; } footer p { margin-top: 10px; } /* ========================= LOGIN MODAL ========================= */ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); align-items: center; justify-content: center; z-index: 999; } .modal-content { width: 350px; background: white; padding: 30px; border-radius: 10px; position: relative; } .modal-content h2 { margin-bottom: 15px; } .modal-content input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; } .modal-content button { width: 100%; padding: 12px; background: #ff9900; border: none; cursor: pointer; } .close { position: absolute; right: 15px; top: 10px; font-size: 25px; cursor: pointer; } /* ========================= MOBILE ========================= */ @media(max-width:700px) { .navbar { flex-direction: column; } .search-box { width: 100%; } .nav-actions { width: 100%; justify-content: center; } .menu { flex-wrap: wrap; gap: 15px; } .hero h1 { font-size: 35px; } } š SmartCart AI š š¤ Login š Cart 0 Home Products Categories AI Assistant Today's DealsShop Smarter with SmartCart AI
AI-powered shopping recommendations, smart search and personalized deals.
Start Shopping<section id="categories" class="section"
<h2>
šļø Shop by Category
</h2>
<div class="categories">
<div
class="category"
onclick="categorySearch('Electronics')"
>
š± Electronics
</div>
<div
class="category"
onclick="categorySearch('Computer')"
>
š» Computers
</div>
<div
class="category"
onclick="categorySearch('Fashion')"
>
š Fashion
</div>
<div
class="category"
onclick="categorySearch('Home')"
>
š Home
</div>
<div
class="category"
onclick="categorySearch('Gaming')"
>
š® Gaming
</div>
<div
class="category"
onclick="categorySearch('Book')"
>
š Books
</div>
</div>
<section id="products" class="section"
<h2>
š„ Recommended Products
</h2>
<div
id="productContainer"
class="products"
>
<!-- PRODUCT 1 -->
<div
class="product-card"
data-name="Wireless Headphones"
>
<div class="product-image">
š§
</div>
<h3>
Wireless Headphones
</h3>
<p class="rating">
āāāāā
</p>
<p class="price">
ā¹2,499
</p>
<button
onclick="addToCart(
'Wireless Headphones',
2499
)"
>
Add to Cart
</button>
</div>
<!-- PRODUCT 2 -->
<div
class="product-card"
data-name="Smart Watch"
>
<div class="product-image">
ā
</div>
<h3>
Smart Watch
</h3>
<p class="rating">
āāāā
</p>
<p class="price">
ā¹3,999
</p>
<button
onclick="addToCart(
'Smart Watch',
3999
)"
>
Add to Cart
</button>
</div>
<!-- PRODUCT 3 -->
<div
class="product-card"
data-name="Gaming Laptop"
>
<div class="product-image">
š»
</div>
<h3>
Gaming Laptop
</h3>
<p class="rating">
āāāāā
</p>
<p class="price">
ā¹74,999
</p>
<button
onclick="addToCart(
'Gaming Laptop',
74999
)"
>
Add to Cart
</button>
</div>
<!-- PRODUCT 4 -->
<div
class="product-card"
data-name="Bluetooth Speaker"
>
<div class="product-image">
š
</div>
<h3>
Bluetooth Speaker
</h3>
<p class="rating">
āāāā
</p>
<p class="price">
ā¹1,799
</p>
<button
onclick="addToCart(
'Bluetooth Speaker',
1799
)"
>
Add to Cart
</button>
</div>
</div>
<section id="ai" class="ai-section"
<div class="ai-container">
<h2>
š¤ SmartCart AI Assistant
</h2>
<p>
Ask me what product you should buy.
</p>
<div class="chat-box">
<div
id="chatMessages"
class="chat-messages"
>
<div class="bot-message">
š Hello!
I'm SmartCart AI.
<br><br>
Tell me what you're
looking for.
</div>
</div>
<div class="chat-input">
<input
type="text"
id="aiInput"
placeholder="Ask AI..."
onkeypress="handleEnter(event)"
>
<button onclick="askAI()">
Send
</button>
</div>
</div>
</div>
<section id="offers" class="offers"
<h2>
š„ Today's Deals
</h2>
<div class="offer-card">
<h3>
Smart Electronics Sale
</h3>
<p>
Up to 40% OFF
</p>
<button
onclick="scrollToProducts()"
>
Shop Now
</button>
</div>
š SmartCart AI
Amazon Hackathon Project
Built with HTML ā¢ CSS ā¢ JavaScript ā¢ TypeScript
Ā© 2026 SmartCart AI
<div id="loginModal" class="modal"
<div class="modal-content">
<span
class="close"
onclick="closeLogin()"
>
Ć
</span>
<h2>
š¤ Login
</h2>
<input
id="email"
type="email"
placeholder="Email"
>
<input
id="password"
type="password"
placeholder="Password"
>
<button onclick="login()">
Login
</button>
</div>
</p> <h1 id="part-59707e">/*</h1> <p>SMARTCART AI</p> <h1 id="javascript-typescript-style">JAVASCRIPT + TYPESCRIPT STYLE</h1> <p>*/</p> <p>/* ========================= PRODUCT TYPE ========================= */</p> <p>/* TypeScript equivalent:</p> <p>interface Product { name: string; price: number; }</p> <p>JavaScript implementation: */</p> <p>let cart = [];</p> <p>/* ========================= ADD PRODUCT ========================= */</p> <p>function addToCart(name, price) {</p> <pre class="language-nolang"><code>const product = { name: name, price: price }; cart.push(product); updateCartCount(); alert( name + " added to cart š" ); </code></pre> <p>}</p> <p>/* ========================= CART COUNT ========================= */</p> <p>function updateCartCount() {</p> <pre class="language-nolang"><code>document.getElementById( "cartCount" ).innerText = cart.length; </code></pre> <p>}</p> <p>/* ========================= SHOW CART ========================= */</p> <p>function showCart() {</p> <pre class="language-nolang"><code>if (cart.length === 0) { alert( "Your cart is empty š" ); return; } let message = "š YOUR CART\n\n"; let total = 0; cart.forEach( function(item, index) { message += (index + 1) + ". " + item.name + " - ā¹" + item.price + "\n"; total += item.price; } ); message += "\nš° Total: ā¹" + total; alert(message); </code></pre> <p>}</p> <p>/* ========================= SEARCH ========================= */</p> <p>function searchProducts() {</p> <pre class="language-nolang"><code>const input = document.getElementById( "searchInput" ).value.toLowerCase(); const products = document.querySelectorAll( ".product-card" ); products.forEach( function(product) { const name = product .getAttribute( "data-name" ) .toLowerCase(); if ( name.includes(input) ) { product.style.display = "block"; } else { product.style.display = "none"; } } ); </code></pre> <p>}</p> <p>/* ========================= CATEGORY SEARCH ========================= */</p> <p>function categorySearch(category) {</p> <pre class="language-nolang"><code>document.getElementById( "searchInput" ).value = category; searchProducts(); scrollToProducts(); </code></pre> <p>}</p> <p>/* ========================= AI ASSISTANT ========================= */</p> <p>function askAI() {</p> <pre class="language-nolang"><code>const input = document.getElementById( "aiInput" ); const message = input.value.trim(); if (message === "") { return; } const chat = document.getElementById( "chatMessages" ); /* USER MESSAGE */ const userMessage = document.createElement( "div" ); userMessage.className = "user-message"; userMessage.innerText = message; chat.appendChild( userMessage ); /* AI RESPONSE */ const response = generateAIResponse( message ); setTimeout( function() { const botMessage = document.createElement( "div" ); botMessage.className = "bot-message"; botMessage.innerText = response; chat.appendChild( botMessage ); chat.scrollTop = chat.scrollHeight; }, 500 ); input.value = ""; </code></pre> <p>}</p> <p>/* ========================= AI LOGIC ========================= */</p> <p>function generateAIResponse( message ) {</p> <pre class="language-nolang"><code>const text = message.toLowerCase(); if ( text.includes( "laptop" ) ) { return ` </code></pre> <p>š» Laptop Recommendation:</p> <p>Look for: ā¢ Intel/AMD processor ā¢ 16GB RAM ā¢ 512GB SSD ā¢ Good battery ā¢ High-quality display</p> <p>For gaming, choose a dedicated GPU. `;</p> <pre class="language-nolang"><code>} if ( text.includes( "phone" ) ) { return ` </code></pre> <p>š± Smartphone Recommendation:</p> <p>Compare: ā¢ Processor ā¢ Camera ā¢ Battery ā¢ Display ā¢ Storage</p> <p>I recommend choosing a phone based on your budget and usage. `;</p> <pre class="language-nolang"><code>} if ( text.includes( "headphone" ) ) { return ` </code></pre> <p>š§ Headphone Recommendation:</p> <p>Look for: ā¢ Active Noise Cancellation ā¢ Good battery life ā¢ Comfortable design ā¢ Bluetooth 5+ ā¢ Good microphone `;</p> <pre class="language-nolang"><code>} if ( text.includes( "cheap" ) || text.includes( "budget" ) ) { return ` </code></pre> <p>š° Budget Shopping:</p> <p>Tell me your budget, for example:</p> <p>"Best laptop under ā¹50,000"</p> <p>or</p> <p>"Best headphones under ā¹3,000" `;</p> <pre class="language-nolang"><code>} return ` </code></pre> <p>š¤ SmartCart AI:</p> <p>I can help you with:</p> <p>š± Phones š» Laptops š§ Headphones ā Smart Watches š® Gaming š° Budget products</p> <p>Try asking:</p> <p>"Best laptop under ā¹50,000" `; }</p> <p>/* ========================= ENTER KEY ========================= */</p> <p>function handleEnter(event) {</p> <pre class="language-nolang"><code>if ( event.key === "Enter" ) { askAI(); } </code></pre> <p>}</p> <p>/* ========================= LOGIN ========================= */</p> <p>function openLogin() {</p> <pre class="language-nolang"><code>document.getElementById( "loginModal" ).style.display = "flex"; </code></pre> <p>}</p> <p>function closeLogin() {</p> <pre class="language-nolang"><code>document.getElementById( "loginModal" ).style.display = "none"; </code></pre> <p>}</p> <p>function logi</p>
Log in or sign up for Devpost to join the conversation.