<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Website</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <script src="./index.js"></script>
</head>
<body>
  <main>
    <nav id='menu'>
      <ul>
        <li><a href='http://'>Главная</a></li>
        <li><a class='dropdown-arrow' href='http://'>Купить</a>
          <ul class='sub-menus'>
            <li><a href='http://'>Mann.co crate Keys</a></li>
            <li><a href='http://'>Tour of Duty Ticket</a></li>
            <li><a href='http://'>Products 3</a></li>
            <li><a href='http://'>Products 4</a></li>
          </ul>
        </li>
        <li><a href='http://'>Обмен</a></li>
        <li><a class='dropdown-arrow' href='http://'>Правила</a>
          <ul class='sub-menus'>
            <li><a href='http://'>Services 1</a></li>
            <li><a href='http://'>Services 2</a></li>
            <li><a href='http://'>Services 3</a></li>
          </ul>
        </li>
        <li><a href='http://'>Связаться с нами</a></li>
      </ul>
    </nav>

    <div class="goods-container">
      <div class="good-block">
        <div class="product-details">
          <img src="key.png" alt="Product 1">
        </div>
        <div class="details-wrapper">
          <div class="details-container">
            <div class="description-section">
              <h3>Mann co. Crate Key</h3>
            </div>
            <span class="product-price">160 ₽</span>
            <div class="order-section">
              <input type="number" id="quantity1" min="1" value="1">
              <button onclick="addToCart(1)">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>
    
      <div class="good-block">
        <div class="product-details">
          <img src="tour.png" alt="Product 2">
        </div>
        <div class="details-wrapper">
          <div class="details-container">
            <div class="description-section">
              <h3>Tour of Duty Ticket</h3>
            </div>
            <span class="product-price">60 ₽</span>
            <div class="order-section">
              <input type="number" id="quantity2" min="1" value="1">
              <button onclick="addToCart(2)">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>
    
      <div class="good-block">
        <div class="product-details">
          <img src="ref.png" alt="Product 3">
        </div>
        <div class="details-wrapper">
          <div class="details-container">
            <div class="description-section">
              <h3>Refined metal</h3>
            </div>
            <span class="product-price">2.8 ₽</span>
            <div class="order-section">
              <input type="number" id="quantity3" min="1" value="1">
              <button onclick="addToCart(3)">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="cart-container">
      <h3>Shopping Cart</h3>
      <ul id="cart-items"></ul>
      <div class="total-section">
        <span>Total:</span>
        <span id="cart-total">0 ₽</span>
      </div>
      <div class="button-container">
        <button class="clear-button" onclick="clearCart()">Clear Cart</button>
        <button class="payment-button" onclick="processPayment()">Pay</button>
      </div>
    </div>
    

    <div class="reviews-custom-container">
      <div class="reviews-container">
        <div class="reviews-block">
          <h3>Памятка #1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo sit amet sem ultrices rutrum vel ut odio. Ut dapibus, nulla ac interdum lacinia, nisi lorem ultricies arcu, non rhoncus urna lectus ut nunc.</p>
        </div>
  
        <div class="reviews-block">
          <h3>Памятка #2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo sit amet sem ultrices rutrum vel ut odio. Ut dapibus, nulla ac interdum lacinia, nisi lorem ultricies arcu, non rhoncus urna lectus ut nunc.</p>
        </div>
      </div>
  
      <div class="custom-block">
        <h2>Our Supply</h2>
        <div class="supply-bar">
          <span class="supply-count">1350</span> Keys remaining
        </div>
        <div class="supply-bar">
          <span class="supply-count">500</span> Tickets remaining
        </div>
        <div class="supply-bar">
          <span class="supply-count">350</span> Metals remaining
        </div>
      </div>
    </div>
    </div>
  </main>
</body>
</html>  can we rebuild this in django?