MoodyProject/index.html at master · wehbs/MoodyProject · 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
137
138
139
140
141
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Added link to the jQuery Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <!-- Plugin jQuery Easing JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

  <!-- Google map API -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB17PLXf3yC5S-gh9hDuFBUKVqvFZajmX8&libraries=places"></script>

  <!-- Link to external javaScript -->
  <script src="assets/javascript/app.js" type="text/javascript"></script>

  <!-- Link to colors CSS -->
  <link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">

  <!-- Added link to the Bootstrap Library -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <!-- Custom Fonts -->
  <script src="https://use.fontawesome.com/7c7cf4a181.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">


  <!-- Link to external CSS -->
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Moody</title>

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">


  <!-- Navigation -->
  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand page-scroll" href="#page-top">
          <i class="fa fa-hashtag"></i> <span class="light">Moody</span>
        </a>
      </div>
    </div>
  </nav>

  <!-- Intro Header -->
  <header class="intro">
    <div class="intro-body">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <h1 style="font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="brand-heading">
              <span style="color: #0074D9">M</span>
              <span style="color:#01FF70">O</span>
              <span style="color:#FF851B">O</span>
              <span style="color:#FFDC00">D</span>
              <span style="color:#7FDBFF">Y</span></h1>
            <p class="intro-text">
              Show me your mood and I'll try to match it
            </p>
            <a href="#upload" class="btn btn-circle page-scroll">
              <i class="fa fa-angle-down animated"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Upload photo Section -->
  <section id="upload" class="container content-section text-center">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2">
        <div class="form-group">
          <h2>Upload a photo</h2>
          <label for="pic"><i class="fa fa-cloud-upload fa-5x" aria-hidden="true" id="loadPicIcon"></i></label>
          <input type="file" id="pic" style="display: none">
          <p class="help-block">Once you upload I can figure out your mood</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Google voice -->
  <section id="voice" class="container results-section text-center">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
        <h2>Lets talk about it</h2>
        <div id="A" class="form-group">
          <label for="comment">Say: "I want to eat something"</label><br>
          <label for="comment">Say: "I want to watch a movie"</label><br>
          <label for="comment">Say: "I want to get out of the house"</label><br>
          <label for="comment">Say: "Go" to open google search</label><br>
          <label for="comment">Say: "Stop" to stop listening</label><br>
          <br>
          <textarea class="form-control" rows="1" id="comment"></textarea>
          <br>
          <div id="button">
            <i id="mic" class="fa fa-microphone fa-lg" style="font-size: 8.333333em" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="mapSection" class="container results-section text-center">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
        <h2>Match the mood</h2>
        <div id="map" class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container text-center">
      <p>Hope you enjoyed</p>
    </div>
  </footer>

</body>


</html>