ShellHacksLeftovers/info-type.html at main · tinabyte/ShellHacksLeftovers · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="Public/Scripts/filename.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="info-type.css">
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function(){
         $("#country").select2();
        });
    </script>
    <title>Meal Info</title>
</head>
<body>

    <div class="header">
        <p>
            <a href="home.html">
                <img src="assets/leftoversLogo.png" alt="Logo" style= "width: 10%" >
            </a>
        </p>
    </div>

    <div class="topnav">
        <a href="contact.html">Contact</a>
        <a href="impacts.html">Impacts of Food Waste</a>
        <a href="info-type.html">Nutritional Information</a>
        <a href="login.html" style="font-weight: bold; float: right;">Log in</a>
    </div>

    <div class="signupdiv">
        <form id="signupform">
            <h3 class="text-center">Meal Saving Form</h3>
            <input type="number" id="phone-num" placeholder="Your Phone Number *" required>
            <select id = 'country'>
                <option value="">Select your meal</option>
                <option value="egg-salad">Egg Salad</option>
                <option value="chicken-salad">Chicken Salad</option>
                <option value="tuna-salad">Tuna Salad</option>
                <option value="macaroni-salad">Macaroni Salad</option>
                <option value="hot-dogs">Hot dogs</option>
                <option value="deli-meat">Deli Meat</option>
                <option value="bacon">Bacon</option>
                <option value="sausage">Sausage</option>
                <option value="hamburger">Hamburger</option>
                <option value="ground-beef">Ground Beef</option>
                <option value="turkey">Turkey</option>
                <option value="chicken">Chicken</option>
                <option value="veal">Veal</option>
                <option value="pork">Pork</option>
                <option value="lamb">Lamb</option>
                <option value="steak">Steak</option>
                <option value="pork-chop">Pork Chop</option>
                <option value="pot-roast">Pot Roast</option>
                <option value="ham">Ham</option>
                <option value="fish">Fish</option>
                <option value="crab">Crab</option>
                <option value="lobster">Lobster</option>
                <option value="hard-boiled-eggs">Hard-boiled Eggs</option>
                <option value="soup">Soup</option>
                <option value="pizza">Pizza</option>
                <option value="chicken-nuggets">Chicken Nuggets</option>
            </select>
            <script>
                function findVals() {
                    var phone = document.getElementById("phone-num");
                    var ele = document.getElementById("country");
                    var meal = ele.value;
                }
            </script>
            <script src="send-sms.js"></script>
            <button class = "submit" type="button" onclick="findVals()">No More Waste!</button>
        </form>
    </div>
</div>
</body>