ADD: prototype

Pandi20 · May 31, 2024 · 5cd265d · 5cd265d
1 parent 9d64552
commit 5cd265d
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,60 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+    color: #333;
+}
+
+header {
+    background-color: #4CAF50;
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+.search-container {
+    text-align: center;
+    margin: 20px;
+}
+
+.search-container input {
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+}
+
+.product-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.product-item {
+    background-color: white;
+    border: 1px solid #ddd;
+    margin: 10px;
+    padding: 20px;
+    width: calc(33% - 40px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+}
+
+.product-item:hover {
+    transform: scale(1.05);
+}
+
+.product-item img {
+    max-width: 100%;
+    height: auto;
+}
+
+footer {
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AlatPraktisID</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Welcome to AlatPraktisID</h1>
+        <p>Your go-to place for practical tools and gadgets!</p>
+    </header>
+    <main>
+        <div class="search-container">
+            <input type="text" id="searchInput" placeholder="Search for products..." onkeyup="searchProducts()">
+        </div>
+        <div class="product-list" id="productList">
+            <!-- Product items will be injected here by JavaScript -->
+        </div>
+    </main>
+    <footer>
+        <p>&copy; 2024 AlatPraktisID. All rights reserved.</p>
+    </footer>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,33 @@
+const products = [
+    { name: 'Portable Blender', image: 'images/blender.jpg', link: '#', description: 'Perfect for smoothies on the go.' },
+    { name: 'Wireless Earbuds', image: 'images/earbuds.jpg', link: '#', description: 'Experience music wirelessly.' },
+    { name: 'Smart Watch', image: 'images/smartwatch.jpg', link: '#', description: 'Track your fitness and notifications.' },
+    { name: 'Electric Screwdriver', image: 'images/screwdriver.jpg', link: '#', description: 'Handy tool for DIY projects.' },
+    { name: 'Portable Charger', image: 'images/charger.jpg', link: '#', description: 'Keep your devices charged on the go.' }
+];
+
+function displayProducts(filteredProducts) {
+    const productList = document.getElementById('productList');
+    productList.innerHTML = '';
+
+    filteredProducts.forEach(product => {
+        const productItem = document.createElement('div');
+        productItem.className = 'product-item';
+        productItem.innerHTML = `
+            <img src="${product.image}" alt="${product.name}">
+            <h3>${product.name}</h3>
+            <p>${product.description}</p>
+            <a href="${product.link}" target="_blank">Buy Now</a>
+        `;
+        productList.appendChild(productItem);
+    });
+}
+
+function searchProducts() {
+    const query = document.getElementById('searchInput').value.toLowerCase();
+    const filteredProducts = products.filter(product => product.name.toLowerCase().includes(query));
+    displayProducts(filteredProducts);
+}
+
+// Initial display of all products
+displayProducts(products);