Recipe-Rover/index.html at main · Tylermui/Recipe-Rover · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Recipe Rover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- Local Styles -->
    <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
    <h1 id="title">Recipe Rover</h1>
    <div class="search">
        <div class="search-container">
            <input class="search-input" type="text" placeholder="Enter Ingredients" id="foodInput">
            <button class="search-button" type="submit" id="searchButton">Search</button>
        </div>
    </div>

    <div>
        <h2>Find your recipe here</h2>
    </div>

    <span style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size:14px;">
        <button class="menu-icon">Change View</button>
    </span>

    <div class="api-container row" id="container">
        <!-- API data will be displayed here, each food will be its own object -->
    </div>

    <footer>
        <div>
            <svg class="footer-wave" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 131.2" style="enable-background:new 0 0 2000 131.2;" xml:space="preserve">
                <style type="text/css">
                   .st0 {
                   opacity: 0.25;
                   enable-background: new;
                   }
                   .st1 {
                   opacity: 0.35;
                   enable-background: new;
                   }
                </style>
                <path class="st0" d="M-0.5,83.4c59.6,40.5,193.3,35,316.7-12.3C525.6-9.2,756.7-9.6,979.8,12.3s445.6,57.9,669.8,54.1C1821.1,63.5,1932,56,2000,53c0,36,0,76.4,0,76.4H1L-0.5,83.4z" fill="#7e184e"></path>
                <path class="st1" d="M309.2,46.1c265.1-57.8,453.7-19.6,687.9,6.8c285.1,32.2,564.2,63,863.4,33.4c94-9.3,119.5-19.6,139.5-19c0,32.2,0,63,0,63H0v-66C0,64.3,152.7,80.2,309.2,46.1z" fill="#7e184e"></path>
                <path class="st1" d="M344.5,54.9c82.3-26.3,167.2-46,253-36.5S767,51.6,851.9,67.8c272.3,52,522.5,16.7,819.3,5c90-3.5,293.8-13.6,328.8-12.6c0,24,0,71,0,71H-1v-59C-1,72.3,198.7,101.6,344.5,54.9z" fill="#7e184e"></path>
                <path d="M1731.8,97.1c-289.3,18.5-590.4,17.2-873.9-16.8C746,66.9,641.1,42.1,528.5,39.5s-249.3,31-353.7,69.9c-57.5,21.4-164.7,2.3-175.7-4.7c0,8,0,26.5,0,26.5h2003v-58C2002,73.3,1854.2,89.2,1731.8,97.1z" fill="#7e184e"></path>
           </svg>
        </div>
        <div class="footer-tag">
            A Tyler, Dan and Laurent cooperated work.
        </div>
    </footer>
    <!-- Local Scripts -->
    <script src="./static/index.js" type="module"></script>
    <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>