date-concierge/index.html at main · ProjectOneTeamFour/date-concierge · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <!-- Materlialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Custom Stylesheet -->
    <link rel="stylesheet" href="./assets/css/styles.css" />

    <title>Date Concierge</title>
</head>
<body class="grey-background">
    <main class="valign-wrapper" id="landing-page">
        <div class="row">
            <div class="col s12">
              <div class="card" id="main-page-card">
                    <div class="card-image main-background">
                        <img src="assets/images/logo - stacked.png">
                      </div>
                    <div class="card-content">
                        <p>Dating sucks. Especially right now. Let us take the planning off of your hands.</p>
                    </div>
                    <div class="card-action">
                        <form id="submit-form">
                            <div class="input-field">
                                <input placeholder="Your name" id="user-name" name="user-name" type="text" class="validate" />
                            </div>
                            <input type="text" id="date" name="date" class="datepicker" placeholder="When's the big day" id="" autocomplete="off" />
                            <div class="input-field" id="date-mood" name="date-mood">
                                <select id="mood">
                                    <option value="" disabled selected>What mood are you trying to set?</option>
                                    <option value="spontaneous">Spontaneous</option>
                                    <option value="romantic">Romantic</option>
                                    <option value="adventurous">Adventurous</option>
                                    <option value="relaxed">Relaxed</option>
                                </select>
                            </div>
                            <div>
                                <div action="#">
                                    <p>
                                      <label>
                                        <input id="GPS" class="with-gap"  name="your-location" type="radio" checked />
                                        <span>Your Location</span>
                                      </label>
                                      <label>
                                        <input id="cityRB" class="with-gap" name="your-location" type="radio" />
                                        <span><input placeholder="Enter the City Name" id="city-name" name="city-name" type="text" class="validate" disabled/></span>
                                      </label>
                                    </p>
                                </div>
                            </div>
                            <div class="center-align">
                                <button class="btn nav-button-background" id="generate-date" type="submit">Get Date Ideas</button>
                            </div>
                        </form>
                    </div>
              </div>
            </div>
          </div>
        <!-- Message Modal -->
        <div id="homepageMessageModal" class="modal">
            <div class="modal-content color-error">
                <ul id="message"></ul>
            </div>
            <div class="modal-footer red accent-1">
                <a href="#!" class="modal-close waves-effect waves-light btn nav-button-background">Go Back</a>
            </div>
        </div>
        <!--End of Message Modal-->
    </main>

    <!-- sources for jquery, jqueryui, touch punch and momentjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <!-- custom scripts -->
    <script src="./assets/js/homepage.js"></script>
</body>
</html>