src/tjts5901/static/notifications.js

+/**
+ * Display message
+ */
+
+function showMessage(message, category="message", created_at=Date.now()) {
+    // Insert new toast
+    const html = document.querySelector("#message-toast").content.cloneNode(true);
+    html.classList += " " + category;
+    html.querySelector(".message").innerHTML = message;
+    html.querySelector("time.created-at").setAttribute("datetime", created_at);
+    ago = moment(created_at).fromNow();
+    html.querySelector("time.created-at").append(ago);
+    document.querySelector("#messages").append(html);
+
+    // Get the last inserted toast - the one we just appended
+    // and show it with bootsrap api
+    const toasts = document.querySelectorAll("#messages .toast");
+    const element = toasts[toasts.length-1];
+
+    let toast_options = {
+        'delay': 10000,
+        'autohide': false,
+    };
+    // Handle toast differenlty depending on category
+    switch(category) {
+        case "error":
+            element.classList += " bg-danger text-white"
+            toast_options['autohide'] = false;
+            break;
+        case "success":
+            element.classList += " bg-success text-white"
+            toast_options['autohide'] = true;
+        default:
+            break;
+    }
+
+    const toast = new bootstrap.Toast(element, toast_options);
+    toast.show();
+}
+
+/**
+ * When page is loaded, display notifications.
+ */
+ window.addEventListener('load', function() {
+    // Populate notifications from the page first
+    let delay = 0;
+    notifications.forEach(msg => {
+        // Use delay as timeout to make them appear neatly.
+        setTimeout(() => showMessage(msg.message, msg.category, msg.created_at), delay += 150);
+    });
+
+    // Start timed loop to fetch new notifications from backend
+    setInterval(() => {
+        delay = 0;
+        // Fetch notifications from backend
+        fetch(NOTIFICATION_URL)
+            .then(response => response.json())
+            .then(data => {
+                data['notifications'].forEach(msg => {
+                    setTimeout(() => showMessage(msg.message, msg.category, msg.created_at), delay += 150);
+                });
+            });
+    }, NOTIFICATION_WAIT_TIME);
+
+})
+

src/tjts5901/static/style.css

+/** Add style here **/
+@font-face {
+    font-family: "Klingon";
+    src: url("fonts/klingon.ttf");
+}
+
+#locale-selector a {
+    background-repeat: no-repeat;
+    background-position: 2px 50%;
+    background-size: 18px 12px;
+    padding-left: 24px;
+    image-rendering: crisp-edges;
+}
+
+#locale-selector a[href$="locale=en_GB"] {
+    background-image: url('flags/en_GB.png');
+}
+#locale-selector a[href$="locale=fi_FI"] {
+    background-image: url('flags/fi_FI.png');
+}
+#locale-selector a[href$="locale=sv_SE"] {
+    background-image: url('flags/sv_SE.png');
+}
+#locale-selector a[href$="locale=tlh"] {
+    background-image: url('flags/tlh.png');
+}
+
+html[lang="tlh"] *, *[lang="tlh"] {
+    font-family: "Klingon", sans-serif !important;
+}

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 %}