toddler_shop_frontend/templates/index.jinja

<!DOCTYPE html> 
<html data-theme="light"> 
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 
        Toddler Shop
    </title>
    <script src="{{url_for('static', filename='scripts/main.js')}}"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename='style/main.css')}}">
</head> 
 
<body onload="loadProducts()">
    <form action="" id="barcode_form">
        <input id="barcode_input" type="text" autofocus>
        <input type="submit" value="Submit">
    </form>

    <img class="product_image">

    <div class="text-center product_placeholder"> 
        <div class="row" style="margin-bottom: 5rem;">
          <div class="col product_col">
            <div class="card h-100">
                <img src="" class="card-img-top product_image" alt="">
                <div class="card-body">
                  <h5 class="card-title product_price"></h5>
                </div>
            </div>
          </div>
          <div class="col product_col">
            <div class="card h-100">
                <img src="" class="card-img-top product_image" alt="">
                <div class="card-body">
                  <h5 class="card-title product_price"></h5>
                </div>
            </div>
          </div>
          <div class="col product_col">
            <div class="card h-100">
                <img src="" class="card-img-top product_image" alt="">
                <div class="card-body">
                  <h5 class="card-title product_price"></h5>
                </div>
            </div>
          </div>
          <div class="col product_col">
            <div class="card h-100">
                <img src="" class="card-img-top product_image" alt="">
                <div class="card-body">
                  <h5 class="card-title product_price"></h5>
                </div>
            </div>
          </div>
          <div class="col product_col">
            <div class="card h-100">
                <img src="" class="card-img-top product_image" alt="">
                <div class="card-body">
                  <h5 class="card-title product_price"></h5>
                </div>
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col-8">
                <div class="card">
                    <div class="container text-center product_placeholder">
                        <div class="row" style="width: 70%;margin-left: auto;margin-right: auto;">
                            <div class="col"> 
                                <img src="{{api_url}}/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">
                            </div>
                            <div class="col" id="price_container">
                                <h2 class="card-title" id="totalprice">&euro; 0</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="" />
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <input type="image" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />
                </div>
            </div>
        </div>
    </div>

</body>


</html>
Load products on page load 2024-08-04 10:29:43 +02:00			`<!DOCTYPE html>`
Now uses svg's from API 2024-08-04 17:59:05 +02:00			`<html data-theme="light">`
Load products on page load 2024-08-04 10:29:43 +02:00
Now uses svg's from API 2024-08-04 17:59:05 +02:00			`<head>`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Load products on page load 2024-08-04 10:29:43 +02:00			`<title>`
			`Toddler Shop`
			`</title>`
Started work on Flask application 2024-08-24 12:14:18 +02:00			`<script src="{{url_for('static', filename='scripts/main.js')}}"></script>`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">`
Added paycash template 2024-08-24 13:21:02 +02:00			`<link rel="stylesheet" href="{{url_for('static', filename='style/main.css')}}">`
Load products on page load 2024-08-04 10:29:43 +02:00			`</head>`

Added paycash template 2024-08-24 13:21:02 +02:00			`<body onload="loadProducts()">`
Catch barcode form submit for scanning 2024-08-04 11:01:52 +02:00			`<form action="" id="barcode_form">`
			`<input id="barcode_input" type="text" autofocus>`
			`<input type="submit" value="Submit">`
			`</form>`

			`<img class="product_image">`
Now uses svg's from API 2024-08-04 17:59:05 +02:00
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="text-center product_placeholder">`
			`<div class="row" style="margin-bottom: 5rem;">`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`<div class="col product_col">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="card h-100">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<img src="" class="card-img-top product_image" alt="">`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`<div class="card-body">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<h5 class="card-title product_price"></h5>`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`</div>`
			`</div>`
			`</div>`
			`<div class="col product_col">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="card h-100">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<img src="" class="card-img-top product_image" alt="">`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`<div class="card-body">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<h5 class="card-title product_price"></h5>`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`</div>`
			`</div>`
			`</div>`
			`<div class="col product_col">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="card h-100">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<img src="" class="card-img-top product_image" alt="">`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`<div class="card-body">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<h5 class="card-title product_price"></h5>`
			`</div>`
			`</div>`
			`</div>`
			`<div class="col product_col">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="card h-100">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<img src="" class="card-img-top product_image" alt="">`
			`<div class="card-body">`
			`<h5 class="card-title product_price"></h5>`
			`</div>`
			`</div>`
			`</div>`
			`<div class="col product_col">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="card h-100">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<img src="" class="card-img-top product_image" alt="">`
			`<div class="card-body">`
			`<h5 class="card-title product_price"></h5>`
Switched to Bootstrap 2024-08-05 17:03:10 +02:00			`</div>`
			`</div>`
			`</div>`
Now uses svg's from API 2024-08-04 17:59:05 +02:00			`</div>`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="row">`
			`<div class="col-8">`
Made layout prettier 2024-08-24 12:28:56 +02:00			`<div class="card">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`<div class="container text-center product_placeholder">`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="row" style="width: 70%;margin-left: auto;margin-right: auto;">`
Made layout prettier 2024-08-24 12:28:56 +02:00			`<div class="col">`
Made api_url a variable 2024-09-04 10:07:55 +02:00			`<img src="{{api_url}}/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`</div>`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="col" id="price_container">`
			`<h2 class="card-title" id="totalprice">€ 0</h2>`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`</div>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="col-2">`
Made layout prettier 2024-08-24 12:28:56 +02:00			`<div class="card">`
Made api_url a variable 2024-09-04 10:07:55 +02:00			`<input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="" />`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`</div>`
			`</div>`
Added price container styling 2024-08-24 12:49:53 +02:00			`<div class="col-2">`
Made layout prettier 2024-08-24 12:28:56 +02:00			`<div class="card">`
Made api_url a variable 2024-09-04 10:07:55 +02:00			`<input type="image" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />`
Implemented bootstrap grid 2024-08-05 17:51:55 +02:00			`</div>`
			`</div>`
			`</div>`
Added total price 2024-08-05 13:14:24 +02:00			`</div>`
Now uses svg's from API 2024-08-04 17:59:05 +02:00
Load products on page load 2024-08-04 10:29:43 +02:00			`</body>`
Catch barcode form submit for scanning 2024-08-04 11:01:52 +02:00

Load products on page load 2024-08-04 10:29:43 +02:00			`</html>`