toomy422.github.io/order-breadsticks.html at TSAWebmaster · Toomy422/toomy422.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css">


        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const images = document.getElementsByTagName('img');
                const maxRetries = 3;

                for (let img of images) {

                    let retryCount = 0;

                    const errorHandler = function() {
                        if (retryCount < maxRetries) {
                            retryCount++;
                            console.log(`Retrying to load the image ${img.src}... Attempt ${retryCount}`);
                            setTimeout(() => {
                                // Use a random query parameter to ensure the browser attempts to reload the image
                                img.src = `${img.src.split('?')[0]}?retry=${new Date().getTime()}`;
                            }, 1000); // Retry after 1 second
                        } else {
                            console.error(`Failed to load the image ${img.src} after several attempts.`);
                        }
                    };

                    img.addEventListener('error', errorHandler);

                    // If the image is already in an error state when the script runs, trigger the error handler manually
                    if (img.complete && img.naturalWidth === 0) {
                        errorHandler();
                    }
                }
            });

            window.addEventListener("load", () => {
                const images = document.getElementsByTagName('img');
                for (let img of images) {
                    // If any image is in an error state after the page has loaded, manually trigger the error handler
                    if (img.complete && img.naturalWidth === 0) {
                        img.dispatchEvent(new Event('error'));
                    }
                }
            });
        </script>
    </head>
    <title>

Breadsticks

    </title>
    <body style="background-color:white; color:black;">
        <nav class="navbar navbar-expand-lg navbar-light bg-primary">
            <a class="navbar-brand" href="home.html">
                <img src="../static/img/Home-icon.svg" width="30" height="30" alt="Home icon">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="sourcing.html">
                        <img src="../static/img/sourcing-icon.svg" width="30" height="30" alt="Icon of plant in a pot"> Sourcing
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="safety.html">
                        <img src="../static/img/safety-icon.svg" width="30" height="30" alt="Hard hat icon"> Safety
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="order.html">
                        <img src="../static/img/order-icon.svg" width="30" height="30" alt="Menu icon"> Order
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="citations.html">
                        <img src="../static/img/citation-icon.svg" width="30" height="30" alt="Document icon"> Citations
                    </a>
                </li>
                </ul>
            </div>
        </nav>


<h1 align="center">
Breadsticks
</h1>
<br>
<img src="
../static/img/breadsticks.jpg
" alt="
Five breadsticks in a wire basket with a side of cheese sauce.
" class="product-image" style="margin: auto; display: block; height: auto; max-width: 500px;"></img>


<form action="order-bag.html" method="post" style="margin: 20px;">
    <div class="form-group">
        <label for="dipping-sauce">Dipping Sauce</label>
        <select class="form-control" id="dipping-sauce" name="dipping-sauce">
            <option value="marinara">Marinara</option>
            <option value="ranch">Ranch</option>
            <option value="cheese">Cheese</option>
            <option value="garlic">Garlic</option>
            <option value="buffalo">Buffalo</option>
            <option value="bbq">BBQ</option>
            <option value="honey-mustard">Honey Mustard</option>
            <option value="no-sauce">No sauce</option>
        </select>
    </div>
    <div class="form-group">
        <label for="quantity">Quantity</label>
        <input type="number" class="form-control" id="quantity" name="quantity" min="1" max="10" value="1">
    </div>


<div>
    <a id="add_to_bag_button" style="margin:10px" class="btn btn-primary" role="button">Add to order</a>
    <a href="order.html" class="btn btn-secondary" style="margin:10px" role="button">Back to order</a>
</div>

<script src= "
../static/js/order-breadsticks.js
"></script>


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>