Spaces:
Sleeping
Sleeping
| <!-- Replace the existing HTML code with this --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Catalogue Page</title> | |
| <!-- Include Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | |
| <style> | |
| .catalogue-container { | |
| padding: 20px; | |
| } | |
| .search-bar-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .card { | |
| margin-bottom: 20px; | |
| } | |
| .voice-edit-btn:hover { | |
| text-decoration: none; /* Remove underline on hover */ | |
| color: #007bff; /* Change text color on hover */ | |
| } | |
| </style> | |
| </head> | |
| <header> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="{% url 'index' %}" style="font-weight: bold;">HomePage</a> | |
| <a href="http://34.122.223.224:9003/" class="btn btn-secondary ml-1" target="_blank" style="font-weight: bold;">Database</a> | |
| <a href="{% url 'add_product_by_image' %}" class="btn btn-primary ml-1" style="padding: 0.5rem 1rem; font-size: 1rem;">Add a Product by Image</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <body> | |
| <div class="container catalogue-container"> | |
| <div class="search-bar-container"> | |
| <form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'index' %}"> | |
| <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q" value="{{ request.GET.q }}"> | |
| <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | |
| </form> | |
| <span id="product-count">Number of Products: {{ products|length }}</span> | |
| </div> | |
| <div class="row" id="product-row"> | |
| <!-- Product cards will be inserted here --> | |
| {% for product in products %} | |
| <div class="col-md-4"> | |
| <div class="card"> | |
| {% if product.first_image_url %} | |
| <img class="card-img-top" src="{{ product.first_image_url }}" alt="Product Image"> | |
| {% endif %} | |
| <div class="card-body"> | |
| <h5 class="card-title">{{ product.product_name }}</h5> | |
| <p class="card-text">Description: {{ product.parent_category }}</p> | |
| <p class="card-text">Brand: {{ product.brand }}</p> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <a href="{% url 'product_detail' product.id %}" class="btn btn-primary btn-sm mb-2">View</a> | |
| <a href="{% url 'voice_product_detail' product.id %}" class="btn btn-secondary btn-sm mb-2">Voice Edit</a> | |
| <a href="{% url 'delete_product_api' product.id %}" class="btn btn-danger btn-sm mb-2">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <!-- Include Bootstrap JS and its dependencies --> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |