layout.html · Lunchbell

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Comfortaa:wght@300..700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 
        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 

    
        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></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">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

        <!--ICON-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
        <!--CSS-->
        <link href="/static/styles.css" rel="stylesheet">
        <title>Lunchbell: {% block title %}{% endblock %}</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>

    <body style="background-color:#FFFFFF">

        <nav class="navbar" style="background-color: #FCFFE0;" ><!--#E1ADDB;"-->
            <div class="container-fluid">
                <a class="navbar-brand" href="/">
                    <span class="styling" style="color:#52734D"><img src='/static/lunchbell.png' width="200" height="70"></span></a>

                
                <div id="navbar">
                    {% if session["user_id"] %}
                        <ul class="nav">
                            <li class="nav-item"><a class="nav-link" href="/quantity" style="color: #004225">Quantity Lookup</a></li>
                            <br>
                            <li class="nav-item"><a class="nav-link" href="/purchase" style="color: #004225">Purchase Now</a></li>
                            <br>
                            <li class="nav-item"><a class="nav-link" href="/cart" style="color: #004225">My Cart</a></li>
                            <br>
                            <li class="nav-item"><a class="nav-link" href="/logout" style="color: #004225">Log Out</a></li>
                        </ul>
                    {% else %}
                        <ul class="nav">
                            <li class="nav-item"><a class="nav-link" href="/" style="color: #004225"><b>About Us</b></a></li>
                            <li class="nav-item"><a class="nav-link" href="/register" style="color: white; background-color: #004225"><b>Get Started</b></a></button></li>
                            <li class="nav-item"><a class="nav-link" href="/login" style="color: #91C788"><b>Log In</b></a></li>
                        </ul>
                    {% endif %}
                </div>
            </div>
        </nav>

        <main class="container py-5 text-center">
            {% block main %}{% endblock %}
        </main>

        <footer class="mb-5">
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    // Adapted from https://stackoverflow.com/a/10162353
                    const html = '<!DOCTYPE ' +
                    document.doctype.name +
                    (document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '') +
                    (!document.doctype.publicId && document.doctype.systemId ? ' SYSTEM' : '') +
                    (document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '') +
                    '>\n' + document.documentElement.outerHTML;
                    document.querySelector('form[action="https://validator.w3.org/check"] > input[name="fragment"]').value = html;
                });

            </script>
        </footer>

    </body>

</html>