<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <title>Grilled Cheese Order</title>

    <meta name="description" content="Order large amounts of grilled cheeses">

    <meta name="keywords" content="grilled cheese, order, food">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <!-- Built-In Functions for Apps -->

    <script type="text/javascript">

        var localStoragePrefix = "ct-16874061529975";

        var lastSave = 0;

        // save to localstorage

        function saveLocal(data) {

            if (Date.now() - lastSave < 1000) {

                return;

            }

            // save to cookie

            let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict";

            cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();

            document.cookie = cookie;

            lastSave = Date.now();

        }



        // load from localstorage

        function loadLocal() {

            var cookiePrefix = localStoragePrefix + "=";

            var cookieStart = document.cookie.indexOf(cookiePrefix);

            if (cookieStart > -1) {

                let cookieEnd = document.cookie.indexOf(";", cookieStart);

                if (cookieEnd == -1) {

                    cookieEnd = document.cookie.length;

                }

                var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);

                return JSON.parse(cookieData);

            }

        }



        // Order function

        function orderGrilledCheese(amount) {

            alert("Thank you for your order of " + amount + " grilled cheeses!");

        }

    </script>

    

    <style>

        body {

            background-color: #f9f9f9;

            font-family: 'Roboto', sans-serif;

        }



        .container {

            max-width: 600px;

            margin: 0 auto;

            padding: 40px 20px;

            text-align: center;

            background-color: #ffffff;

            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

        }



        h1 {

            font-size: 24px;

            font-weight: bold;

            margin-bottom: 20px;

        }



        p {

            font-size: 16px;

            margin-bottom: 20px;

        }



        .form-group {

            margin-bottom: 20px;

        }



        .form-label {

            font-size: 16px;

            font-weight: bold;

        }



        .form-input {

            width: 100%;

            padding: 10px;

            font-size: 16px;

            border: 1px solid #dddddd;

            border-radius: 4px;

        }



        .form-button {

            padding: 10px 20px;

            font-size: 16px;

            font-weight: bold;

            color: #ffffff;

            background-color: #007bff;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }



        .form-button:hover {

            background-color: #0056b3;

        }

    </style>

</head>

<body>

    <div id="main-container" class="container">

        <h1>Grilled Cheese Order</h1>

        <p>Order large amounts of grilled cheeses</p>

        <div class="form-group">

            <label for="amount" class="form-label">Amount:</label>

            <input type="number" id="amount" class="form-input" placeholder="Enter the amount" required>

        </div>

        <button class="form-button" onclick="orderGrilledCheese($('#amount').val())">Place Order</button>

    </div>

</body>

</html>