src/tjts5901/static/windows-95-ui-kit/img/favicon/browserconfig.xml

+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/tjts5901/static/windows-95-ui-kit/img/favicon/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="70.000000pt" height="70.000000pt" viewBox="0 0 70.000000 70.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M20 616 c0 -14 6 -28 13 -32 6 -4 9 -4 5 1 -4 4 -3 14 3 21 6 7 8 18
+4 24 -11 18 -25 11 -25 -14z"/>
+<path d="M395 603 c-2 -7 -11 -13 -20 -13 -8 0 -23 -8 -32 -18 -16 -15 -18
+-40 -18 -230 l0 -212 23 0 c12 0 25 6 28 14 3 8 12 12 20 9 7 -3 16 1 19 9 7
+18 159 18 177 0 7 -7 20 -12 31 -12 10 0 15 -5 12 -10 -4 -6 5 -10 19 -10 l26
+0 0 219 0 219 -35 16 c-19 9 -35 20 -35 24 0 13 -209 8 -215 -5z"/>
+<path d="M67 583 c-13 -12 -7 -33 8 -33 8 0 15 9 15 20 0 20 -11 26 -23 13z"/>
+<path d="M127 552 c-19 -21 -22 -42 -6 -42 16 0 36 23 36 43 0 22 -10 22 -30
+-1z"/>
+<path d="M290 561 c0 -5 -12 -12 -26 -15 -17 -5 -24 -12 -20 -21 2 -7 1 -15
+-4 -17 -5 -2 -5 -9 1 -18 8 -11 12 -12 16 -2 2 6 11 12 19 12 8 0 17 7 20 15
+4 8 9 13 14 10 4 -2 5 7 2 20 -4 23 -22 36 -22 16z"/>
+<path d="M25 538 c-9 -22 4 -43 17 -30 7 7 7 16 0 29 -10 17 -11 17 -17 1z"/>
+<path d="M192 530 c-26 -28 -27 -36 -8 -43 15 -6 41 34 34 54 -3 8 -11 5 -26
+-11z"/>
+<path d="M75 502 c-15 -10 -13 -34 3 -39 7 -3 12 5 12 21 0 29 0 29 -15 18z"/>
+<path d="M118 458 c-13 -16 -15 -25 -7 -34 9 -11 13 -11 24 0 17 17 23 48 10
+52 -5 2 -18 -6 -27 -18z"/>
+<path d="M280 472 c0 -5 -11 -13 -25 -16 -24 -6 -36 -26 -15 -26 5 0 7 -7 4
+-15 -4 -9 0 -15 10 -15 9 0 16 5 16 10 0 6 3 9 8 9 25 -4 32 3 29 28 -3 25
+-27 47 -27 25z"/>
+<path d="M22 437 c4 -26 20 -30 24 -5 1 9 -5 19 -13 22 -10 4 -14 0 -11 -17z"/>
+<path d="M180 430 c-16 -30 -2 -45 21 -24 10 9 19 23 19 31 0 20 -28 16 -40
+-7z"/>
+<path d="M64 394 c3 -9 6 -18 6 -20 0 -3 5 -2 10 1 16 10 12 35 -6 35 -11 0
+-14 -5 -10 -16z"/>
+<path d="M117 372 c-11 -11 -13 -22 -7 -32 7 -12 12 -10 29 9 31 36 10 58 -22
+23z"/>
+<path d="M280 379 c0 -7 -3 -9 -7 -6 -12 12 -41 -23 -36 -44 6 -22 14 -24 31
+-7 7 7 12 9 12 4 0 -4 6 -1 14 7 8 8 13 22 12 33 -3 20 -26 32 -26 13z"/>
+<path d="M20 350 c0 -11 6 -20 14 -20 9 0 14 9 13 20 -1 11 -7 20 -14 20 -7 0
+-13 -9 -13 -20z"/>
+<path d="M186 351 c-9 -10 -14 -25 -10 -35 6 -15 8 -14 25 5 34 39 19 68 -15
+30z"/>
+<path d="M69 328 c-9 -32 -7 -47 6 -42 17 7 21 44 5 44 -5 0 -10 -1 -11 -2z"/>
+<path d="M122 294 c-13 -15 -16 -54 -4 -54 12 0 37 34 38 51 1 19 -17 20 -34
+3z"/>
+<path d="M270 290 c-13 -10 -28 -16 -33 -13 -5 3 -5 -3 1 -13 5 -11 7 -25 5
+-31 -6 -17 -3 -16 36 3 25 13 30 20 26 41 -6 34 -7 34 -35 13z"/>
+<path d="M20 260 c0 -13 5 -20 13 -17 6 2 12 10 12 17 0 7 -6 15 -12 18 -8 2
+-13 -5 -13 -18z"/>
+<path d="M186 264 c-20 -19 -20 -30 -1 -38 8 -3 19 3 25 14 21 39 5 54 -24 24z"/>
+<path d="M62 222 c5 -23 28 -27 28 -4 0 10 -7 19 -15 19 -9 0 -15 -7 -13 -15z"/>
+<path d="M128 206 c-18 -13 -25 -56 -10 -56 4 0 15 12 26 26 21 29 10 49 -16
+30z"/>
+<path d="M282 213 c-6 -3 -10 -8 -7 -13 3 -4 -3 -7 -13 -6 -9 0 -16 -5 -14
+-11 1 -7 -2 -13 -7 -13 -5 0 -7 -9 -4 -20 5 -20 23 -28 23 -11 0 5 11 12 25
+15 21 5 24 11 21 32 -6 31 -7 33 -24 27z"/>
+<path d="M187 177 c-9 -11 -17 -27 -17 -34 0 -22 26 -14 40 12 18 34 1 51 -23
+22z"/>
+</g>
+</svg>

src/tjts5901/static/windows-95-ui-kit/img/favicon/site.webmanifest

+{
+    "name": "W95 UI Kit",
+    "short_name": "W95 UI Kit",
+    "icons": [
+        {
+            "src": "/android-chrome-48x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/tjts5901/static/windows-95-ui-kit/js/w95.js

+/*!
+
+=========================================================
+* Pixel Bootstrap 4 UI Kit
+=========================================================
+
+* Product Page: http://pixel.themesberg.com
+* Copyright 2018 Themesberg (https://www.themesberg.com)
+
+* Coded by themesberg.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+"use strict";
+$(document).ready(function () {
+
+    // Tooltip
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Popover
+    $('[data-toggle="popover"]').each(function () {
+        var popoverClass = '';
+        if ($(this).data('color')) {
+            popoverClass = 'popover-' + $(this).data('color');
+        }
+        $(this).popover({
+            trigger: 'focus',
+            template: '<div class="popover ' + popoverClass + '" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        })
+    });
+
+    // Additional .focus class on form-groups
+    $('.form-control').on('focus blur', function (e) {
+        $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
+    }).trigger('blur');
+
+    // When in viewport
+    $('[data-toggle="on-screen"]')[0] && $('[data-toggle="on-screen"]').onScreen({
+        container: window,
+        direction: 'vertical',
+        doIn: function () {
+            //alert();
+        },
+        doOut: function () {
+            // Do something to the matched elements as they get off scren
+        },
+        tolerance: 200,
+        throttle: 50,
+        toggleClass: 'on-screen',
+        debug: false
+    });
+
+    // Scroll to anchor with scroll animation
+    $('[data-toggle="scroll"]').on('click', function (event) {
+        var hash = $(this).attr('href');
+        var offset = $(this).data('offset') ? $(this).data('offset') : 0;
+
+        // Animate scroll to the selected section
+        $('html, body').stop(true, true).animate({
+            scrollTop: $(hash).offset().top - offset
+        }, 600);
+
+        event.preventDefault();
+    });
+
+    function formatAMPM(date) {
+        var hours = date.getHours();
+        var minutes = date.getMinutes();
+        var ampm = hours >= 12 ? 'pm' : 'am';
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        minutes = minutes < 10 ? '0'+minutes : minutes;
+        var strTime = hours + ':' + minutes + ' ' + ampm;
+        return strTime;
+    }
+
+    $('.time').text(formatAMPM(new Date()));
+
+    // copy docs
+    $('.copy-docs').on('click', function () {
+        var $copy = $(this);
+        var htmlEntities = $copy.parents('.nav-wrapper').siblings('.card').find('.tab-pane:last-of-type').html();
+        var htmlDecoded = $('<div/>').html(htmlEntities).text().trim();
+
+        var $temp = $('<textarea>');
+        $('body').append($temp);
+        $temp.val(htmlDecoded).select();
+        document.execCommand('copy');
+        $temp.remove();
+
+        $copy.text('Copied!');
+        $copy.addClass('copied');
+
+        setTimeout(function () {
+            $copy.text('Copy');
+            $copy.removeClass('copied');
+        }, 1000);
+    });
+
+});   

src/tjts5901/templates/auth/login.html

+{% extends 'base.html' %}
+
+{% block header %}
+  <h1>{% block title %}Log In{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+<style>
+.login-dialog-img {
+    background-image: url("https://openai-labs-public-images-prod.azureedge.net/user-eKykIYWOdPMyg5hmQc750Q6a/generations/generation-GZTU47SaNB9GeJVLaJXUfztk/image.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 8em;
+}
+</style>
+    
+<section class="min-vh-100 d-flex align-items-center bg-secondary">
+    <div class="container">
+        <div class="row">
+            <div class="col-3">
+                <h5>Testing?</h5>
+                <hr />
+                <p class="lead">
+                    <style>
+                        @keyframes eighty-eight-mph {
+                            0% {
+                                margin-right: -90%;
+                            }
+                            100% {
+                                margin-right: 90%;
+                            }
+                        }
+                        #test-login::after {
+                            content: "🚗";
+                            font-size: 2em;
+                            margin-right: -90%;
+                            right: 0;
+                            animation-duration: 2s;
+                        }
+                        #test-login:active::after,
+                        #test-login:focus::after {
+                            animation-name: eighty-eight-mph;
+                            margin-right: 90%;
+                        }
+                    </style>
+                    Use <code class="bg-white lead">doc@ebrownindustries.org</code> and <code class="bg-white lead">greatscott</code> to log in with account that has performed purchases and sales.
+                    <form action="{{ url_for('auth.login') }}" class="mt-4" method="POST">
+                        <input type="hidden" name="email" value="doc@ebrownindustries.org">
+                        <input type="hidden" name="password" value="greatscott">
+                        <button id="test-login" type="submit" class="btn btn-block btn-primary" title="It's back to the future reference, not nazi reference. Fucking nazis.">Hit 88 mph</button>
+                    </form>
+                </p>
+            </div>
+            <div class="col-6">
+                <div class="card card-tertiary w-100">
+                    <div class="card-header text-center">
+                        <span>{{ _("Sign in to our platform") }}</span>
+                    </div>
+                    <div class="login-dialog-img"></div>
+                    <div class="card-body">
+                        <form action="{{ url_for('auth.login') }}" class="mt-4" method="POST">
+
+                            <div class="form-group">
+                                <label for="email" class="mb-2">{{ _("Email") }}</label>
+                                <input name="email" id="email" type="email" class="form-control" placeholder="{{_("Your email")}}"
+                                    required="">
+                            </div>
+
+                            <div class="form-group">
+
+                                <div class="form-group">
+                                    <label for="password" class="mb-2">{{ _("Password") }}</label>
+                                    <input name="password" id="password" type="password" class="form-control"
+                                        placeholder="{{ _("Your password") }}" required="">
+                                </div>
+
+                                <div class="d-flex justify-content-between align-items-center mb-4">
+                                    <div class="form-check">
+                                        <label class="form-check-label">
+                                            <input name="remember-me" class="form-check-input" type="checkbox">
+                                            <span class="form-check-x"></span>
+                                            <span class="form-check-sign"></span>
+                                            {{ _("Remember me") }}
+                                        </label>
+                                    </div>
+                                    <p class="m-0"><a href="#" class="text-right">{{_("Lost password?")}}</a></p>
+                                </div>
+                            </div>
+                            <button type="submit" class="btn btn-block btn-primary">{{_("Login")}}</button>
+                        </form>
+                        <div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
+                            <p class="font-weight-normal">
+                                {{_("Not registered?") }}
+                                <a href="{{ url_for('auth.register') }}" class="font-weight-bold">{{ _("Create an account") }}</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{% endblock %}

src/tjts5901/templates/auth/profile.html

+{% extends 'base.html' %}
+
+{% block header %}
+    <div class="container">
+        <h1>{% block title %}{{user|striptags}}'s' Profile Page{% endblock %}</h1>
+    </div>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  <div class="row">
+        <div class="col-sm-2 offset-sm-2">
+            <img src="{{ user.image_url }}" class="img-fluid" alt="{{_("Profile image for %(email)s", email=user.email)|e}}" style="max-width: 100%">
+        </div>
+        <div class="col-sm-6 profile-section">
+            <div class="card card-secondary">
+                <div class="card-header text-center">
+                    {{ user }}
+                </div>
+                <div class="card-body">
+                    <div class="form-group d-flex align-items-center justify-content-between">
+                        <label for="default" class="mr-3">Email:</label>
+                        <input id="default" type="text" class="form-control w-75" value="{{ user.email }}" readonly>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    {% if current_user == user %}
+                    <div class="btn-group" role="group">
+                        <ahref="{{ url_for('items.sell') }}" class="btn btn-primary">{{ _("Sell an Item") }}</a>
+                    </div>
+                    <div class="btn-group" role="group">
+                        {# Notice: I have omited the email -attribute here, and made "me" as default in auth.py for tokens page. #}
+                        <a href="{{ url_for('auth.user_access_tokens') }}" class="btn btn-primary">{{ _("Tokens") }}</a>
+                    </div>
+                    <div class="btn-group" role="group">
+                        <a href="{{ url_for('auth.logout') }}" class="btn btn-danger">{{ _("Logout") }} </a>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+  </div>
+
+  <section class="row">
+    <div class="col-md-10 offset-md-1 purchases">
+        <h3> {{ _("My items") }} </h3>
+
+        <div class="container">
+            <div class="card">
+                {% for item in won_items %}
+                    <article>
+                        <header class="card-header">
+                            <div class="row">
+                            <div class="col-sm-3">
+                                <h6>{{ _("Purchase date") }}</h5>
+                                <p>{{ item.winning_bid.created_at|dateformat }}</p>
+                            </div>
+
+                            <div class="col-sm-3">
+                                <h6>{{ _("Item ID") }}</h5>
+                                <p class="text-truncate">{{ item.id }}</p>
+                            </div>
+                            <div class="col-md-2">
+                                <h6>{{ _("Seller") }}</h5>
+                                <p><a href="{{ url_for('auth.profile', email=item.seller.email) }}">{{ item.seller }}</a></p>
+                            </div>
+                        </header>
+                        <main class="card-body">
+                            <div class="row">
+                                <div class="col-sm-2">
+                                    <img src="{{ item.image_url }}" class="img-fluid" alt="{{_("Product image for %(title)s", title=item.title)|e}}">
+                                </div>
+                                <div class="col-sm-6">
+                                    <h5>{{ item.title }}</h5>
+                                    <p>{{ item.description|truncate(1000) }}</p>
+                                </div>
+                                <div class="col-sm-1 text-nowrap ">
+                                    <h6>{{ _("Price") }}</h5>
+                                    <p>${{ item.winning_bid.amount|localcurrency }}</p>
+                                </div>
+                                <div class="col-sm-3 actions">
+                                    <form>
+                                        <div>
+                                            <button type="submit" class="btn btn-primary border-dark btn-block">{{_("Pay")}}</button>
+                                        </div>
+                                        <div>
+                                            <a href="{{ url_for('items.view', id=item.id) }}" class="btn btn-outline btn-block">{{_("View item")}}</a>
+                                        </div>
+                                    </form>
+                            </div>
+                        </main>
+                    </article>
+                {% endfor %}
+            </div>
+        </div>
+
+    </div>
+  </section>
+
+  <div class="row">
+    <div class="col-sm-3"></div>
+    <div class="col-sm-6 auction-section">
+      <h3>Recent Auctions</h3>
+      <div class="card-deck">
+        {% for auction in items %}
+        <div class="card">
+            <img src="..." class="card-img-top" alt="...">
+            <div class="card-body">
+                <h5 class="card-title">{{ auction.title }}</h5>
+                <p class="card-text">{{ auction.description }}</p>
+                <p class="card-text">Starting Bid: ${{ auction.starting_bid }}</p>
+            </div>
+            <div class="card-footer">
+                {% if auction.is_open %}
+                    {% if current_user == auction.seller %}
+                        <a href="{{ url_for('items.update', id=auction.id) }}" class="btn btn-primary">Update</a>
+                    {% else %}
+                        <a href="{{ url_for('items.bid', id=auction.id) }}" class="btn btn-primary">Place a bid</a>
+                    {% endif %}
+                {% else %}
+                    <div class="text-muted">Auction is Closed</div>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    <div class="col-sm-3"></div>
+  </div>
+</div>
+{% endblock %}
\ No newline at end of file

src/tjts5901/templates/auth/register.html

+{% extends 'base.html' %}
+
+{% block header %}
+  <h1>{% block title %}Register{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+<style>
+.login-dialog-img {
+    background-image: url("https://openai-labs-public-images-prod.azureedge.net/user-eKykIYWOdPMyg5hmQc750Q6a/generations/generation-nFKGWPKYsJ3r1eJBLrHatf4I/image.webp");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 8em;
+}
+</style>
+<section class="min-vh-100 d-flex align-items-center bg-secondary">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="card card-tertiary w-100 fmxw-400">
+          <div class="card-header text-center">
+            <span>{{ _("Register on our platform") }}</span>
+          </div>
+          <div class="login-dialog-img"></div>
+          <div class="card-body">
+            <form action="{{ url_for('auth.register') }}" method="POST" class="mt-4">
+
+              <input type="hidden" name="timezone" id="timezone">
+              <script>
+                function getTimezone() {
+                  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+                  document.getElementById('timezone').value = tz;
+                }
+                getTimezone();
+              </script>
+
+              <div class="form-group">
+                <label for="email" class="mb-2">{{ _("Email") }}</label>
+                <input name="email" id="email" type="email" class="form-control" placeholder="Your email" required="">
+              </div>
+
+              <div class="form-group">
+
+                <div class="form-group">
+                  <label for="password" class="mb-2">{{ _("Password") }}</label>
+                  <input name="password" id="password" type="password" class="form-control" placeholder="Your password" required="">
+                </div>
+                <div class="form-group">
+                  <label for="confirmPassword" class="mb-2">{{ _("Confirm password") }}</label>
+                  <input name="password2" id="confirmPassword" type="password" class="form-control" placeholder="Confirm password"
+                    required="">
+                </div>
+
+                <div class="d-flex justify-content-between align-items-center mb-4">
+                  <div class="form-check">
+                    <label class="form-check-label">
+                      <input name="terms" class="form-check-input" type="checkbox">
+                      <span class="form-check-x"></span>
+                      <span class="form-check-sign"></span>
+                      {{ _("I agree to the %(terms)s", terms="<a href=\"#\">"|safe+_("terms and conditions")+"</a>"|safe) }}.
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <button type="submit" class="btn btn-block btn-primary">{{ _("Register account") }}</button>
+            </form>
+            <div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
+              <p class="font-weight-normal">
+                {{ _("Already have an account?") }}
+                <a href="./login.html" class="font-weight-bold">{{ _("Login here") }}</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{% endblock %}

src/tjts5901/templates/auth/tokens.html

+{% extends 'base.html' %}
+
+{% block header %}
+  <h1>{% block title %}Access tokens{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-4">
+            <h4>{{_("Personal Access Tokens")}}</h4>
+            <p>
+                {%trans%}Personal access tokens allow third-party services to authenticate with our application on your behalf.{%endtrans%}
+            </p>
+        </div>
+        <div class="col-md-8">
+            {% if token %}
+            <div class="alert alert-success" role="alert">
+                <h4 class="alert-heading">{{_("Your new personal access token")}}</h4>
+                <p>
+                    {%trans%}Your new personal access token is shown below. You may now use this token to make API requests.{%endtrans%}
+                </p>
+                <div class="input-group mb-3">
+                    <input type="text" class="form-control" id="token" value="{{ token.token }}" readonly>
+                    <button class="btn btn-outline-secondary" type="button" id="copy-token" onclick="copyToken()">{{_("Copy")}}</button>
+                    <script>
+                        function copyToken() {
+                            var copyText = document.getElementById("token");
+                            copyText.select();
+                            copyText.setSelectionRange(0, 99999);
+                            document.execCommand("copy");
+                        }
+                    </script>
+                </div>
+                <small class="form-text text-muted">{{ _("Make sure to copy your new token now. You won't be able to see it again!") }}</small>
+                <hr>
+            </div>
+            {% endif %}
+            <div class="card">
+                <div class="card-header">
+                    <div class="text-center">{{ _("Create access token") }}</div>
+                </div>
+                <form action="{{url_for('auth.user_access_tokens', email='me')}}" method="post" class="card-body">
+                    <div class="form-group">
+                        <label for="name">{{ _("Name") }}</label>
+                        <input type="text" class="form-control" name="name" id="name" placeholder="{{ _(" Enter token name") }}">
+                        <div class="form-text text-muted">{{ _("Give your token a descriptive name so you can easily identify it in the future.") }}</div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-check-label" for="expires">{{ _("Expires at") }}</label>
+                        <input type="date" class="form-control" name="expires" id="expires">
+                        <div class="form-text text-muted">{{ _("Leave blank to never expire.") }}</div>
+                    </div>
+                    <button type="submit" class="btn btn-primary">{{ _("Create access token") }}</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-8 offset-md-4">
+            <h2 class="text-center mb-4">{{ _("Active Access Tokens") }}</h2>
+            <table class="table table-striped">
+                <thead>
+                    <tr>
+                        <th>{{ _("Token name") }}</th>
+                        <th>{{ _("Created") }}</th>
+                        <th>{{ _("Last used") }}</th>
+                        <th>{{ _("Expires") }}</th>
+                        <th>{{ _("Actions") }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for access_token in tokens %}
+                    <tr>
+                        <td>{{ access_token.name }}</td>
+                        <td>{{ access_token.created_at|dateformat }}</td>
+                        <td>
+                            {% if access_token.last_used_at %}
+                                {{ access_token.last_used_at|dateformat }}
+                            {% else %}{{ _("Never") }}
+                            {% endif %}
+                        </td>
+                        <td>
+                            {% if access_token.expires_at %}
+                                {{ access_token.expires_at|dateformat }}
+                            {% else %}{{ _("Never") }}
+                            {% endif %}
+                        </td>
+                        <td>
+                            <form action="{{ url_for('auth.delete_user_access_token', email='me', id=access_token.id) }}"
+                                method="post">
+                                <button type="submit" class="btn btn-danger">{{ _("Delete") }}</button>
+                            </form>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
\ No newline at end of file

src/tjts5901/templates/base.html

+<!doctype html>
+<html lang="{{get_locale()}}">
+  <head>
+    <title>{% block title %}{% endblock %} - {{ config['BRAND'] }}</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="{{ url_for('static', filename='windows-95-ui-kit/css/w95.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
+    {# Sentry tracing for client side. See: https://docs.sentry.io/platforms/javascript/install/cdn/ #}
+    {% if config['SENTRY_DSN'] %}
+      {{sentry_trace}}
+      <script
+        src="https://browser.sentry-cdn.com/7.35.0/bundle.tracing.min.js"
+        integrity="sha384-CjDPchuHUNlGb4GlhyuebuZegU12keiasU1R69+B0VhN5ShdBb06nBWZRfGi73G1"
+        crossorigin="anonymous">
+      </script>
+      <script>
+        Sentry.onLoad(function() {
+          Sentry.init({
+            dsn: {{config['SENTRY_DSN'] | tojson}},
+            release: {{config['SENTRY_RELEASE'] | tojson}},
+            environment: {{config['SENTRY_ENVIRONMENT'] | tojson}},
+            integrations: [new Sentry.BrowserTracing()],
+          });
+        });
+      </script>
+    {% endif %}
+
+  </head>
+  <body class="bg-secondary">
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <a class="navbar-brand" href="{{url_for('index')}}">{{config['BRAND']}}</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
+        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    
+      <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="{{ url_for('items.index') }}">{{_("Home")}}</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="{{ url_for('items.sell') }}">{{_("Sell")}}</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">{{_("About")}}</a>
+          </li>
+        </ul>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <div class="dropdown">
+              <button class="btn nav-link dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+                {{_("Language")}}
+              </button>
+              <div class="dropdown-menu" id="locale-selector">
+                {% for _, lang in locales.items() %}
+                  <a class="dropdown-item {% if lang|lower == get_locale()|lower %}active{% endif %}" href="{{ url_for(request.endpoint, **dict(request.view_args, locale=lang)) }}">{{lang.display_name}}</a>
+                {% endfor %}
+              </div>
+            </div>
+          </li>
+          {% if current_user.is_authenticated %}
+          <li class="nav-item"><a href="{{ url_for('auth.profile', email="me") }}" class="nav-link">{{ current_user['email'] }}</a></li>
+          <li class="nav-item"><a href="{{ url_for('auth.logout') }}" class="nav-link">{{_("Log Out")}}</a></li>
+          {% else %}
+          <li class="nav-item"><a href="{{ url_for('auth.register') }}" class="nav-link">{{_("Register")}}</a>
+          <li class="nav-item"><a href="{{ url_for('auth.login') }}" class="nav-link">{{_("Log In")}}</a>
+            {% endif %}
+        </ul>
+        <form class="form-inline">
+          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-info my-2 my-sm-0" type="submit">{{_("Search")}}</button>
+        </form>
+      </div>
+    </nav>
+
+      <header>
+        {% block header %}
+            <h1>{{ config['BRAND'] }}</h1>
+        {% endblock %}
+      </header>
+      <main class="content">
+        {% block content %}
+          <!-- MAIN CONTENT BLOCK MISSING -->
+        {% endblock %}
+      </main>
+
+      {# Flash messages #}
+      <div class="position-fixed top-0 right-0 p-3 m-5">
+        <div class="container toast-container" id="messages">
+        <template id="message-toast">
+          <!-- Template for flahed messages -->
+          <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+              <strong class="mr-auto">{{ _("Message") }}</strong>
+              <small><time class="created-at"></time></small>
+              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="{{_("Close")}}">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="toast-body">
+              <span class="message"></span>
+            </div>
+          </div>
+          <div class="clearfix"></div>
+        </template>
+        </div>
+      </div>
+      <script>
+        // Timout is in milliseconds
+        const NOTIFICATION_WAIT_TIME = 30 * 1000;
+        const NOTIFICATION_URL = {{ url_for('notification.user_notifications')|tojson }};
+
+        var notifications = {{ get_notifications()|tojson }};
+      </script>
+      <script src="{{url_for('static', filename='notifications.js')}}"></script>
+
+    <!-- Moment library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+  </body>
+</html>

src/tjts5901/templates/items/index.html

+{% extends 'base.html' %}
+
+{% block header %}
+<style>
+#header-img {
+    background-image: url("{{url_for('static', filename='img/city.png')}}");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 12em;
+    color: var(--orange);
+}
+
+#header-img h1 {
+  background-color: rgba(33, 33, 33, 0.8);
+}
+</style>
+<div id="header-img" class="d-flex container-flex align-items-center justify-content-center">
+  <h1>{% block title %}{{_("Items on sale")}}{% endblock %}</h1>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <table class="table">
+          <thead class="thead-light">
+            <tr>
+              <th>{{ _("Title") }}</th>
+              <th>{{ _("Description") }}</th>
+              <th>{{ _("Starting Bid") }}</th>
+              <th>{{ _("Seller") }}</th>
+              <th>{{ _("Created At") }}</th>
+              <th>{{ _("Closes At") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for item in items.items %}
+            <tr>
+              <td>
+                  <a href="{{ url_for('items.view', id=item.id)}}">{{ item.title }}</a>
+                  {% if current_user == item.seller %}
+                      <a class="action btn btn-primary" href="{{ url_for('items.update', id=item['id']) }}">Edit</a>
+                  {% endif %}
+              </td>
+              <td>{{ item.description }}</td>
+              <td>{{ item.starting_bid|localcurrency }}</td>
+              <td>{{ item.seller.email }}</td>
+              <td>{{ item.created_at|datetimeformat }}</td>
+              <td>{{ item.closes_at|datetimeformat }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <nav aria-label="Page navigation">
+          <ul class="pagination justify-content-center">
+            {% for page in items.iter_pages() %}
+            <li class="page-item {% if page == items.page %}active{% endif %}">
+              <a class="page-link" href="{{ url_for('items.index', page=page) }}">{{ page }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+        </nav>
+    </div>
+  </div>
+</div>
+{% endblock %}

src/tjts5901/templates/items/sell.html

+{% extends 'base.html' %}
+
+{% block header %}
+  <h1>{% block title %}{{ _("Sell an Item")}}{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-6 offset-md-3">
+            <div class="card p-4">
+                <h3 class="text-center mb-4">{{ _("Add Item") }}</h3>
+                <form method="post" action="{{ url_for('items.sell') }}">
+                    <div class="form-group">
+                        <label for="title">{{ _("Title") }}</label>
+                        <input type="text" name="title" id="title" class="form-control" value="{{ request.form['title'] }}">
+                    </div>
+                    <div class="form-group">
+                        <label for="description">{{ _("Description") }}</label>
+                        <textarea name="description" id="description" class="form-control">{{ request.form['body'] }}</textarea>
+                    </div>
+                    <div class="row">
+                        <div class="form-group col-8">
+                            <label for="starting_bid">{{ _("Starting Bid") }}</label>
+                            <input type="number" name="starting_bid" id="starting_bid" min="0" class="form-control">
+                        </div>
+                        <div class="form-group col-4">
+                            <label for="starting_bid">{{ _("Currency") }}</label>
+                            <select name="currency" id="currency" class="form-control">
+                                {% for code, name in currencies.items() %}
+                                    <option value="{{ code }}" {% if code == default_currency %}selected{% endif %}>{{ name }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    {% if config['DEBUG'] %}
+                    <div class="form-group">
+                        <input name="flash-sale" type="checkbox" id="flash-sale">
+                        <label class="form-check-label" for="flash-sale">
+                        {{_("Flash sale!")}}
+                        </label>
+                    </div>
+                    {% endif %}
+
+                    <div class="form-group">
+                        <button class="btn btn-primary btn-block">{{ _("Add to listing") }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}