-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (61 loc) · 3.14 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Moodify</title>
<!--Boostrap's CSS-->
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--
To collect end-user usage analytics about your application,
insert the following script into each page you want to track.
Place this code immediately before the closing </head> tag,
and before any other scripts. Your first data will appear
automatically in just a few seconds.
-->
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;s.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(s);try{t.cookie=u.cookie}catch(h){}for(t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Dependency"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
}({
instrumentationKey:"441a2fd4-2c13-482c-acd5-be88aee46828"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<div class="container" id="page-container">
<h1 id="app-name">
<span class="glyphicon glyphicon-headphones"></span> moodify
</h1>
<!-- NB: glyphicon halflings are generally not free, but the developer made them free in bootstrap -->
<h2 id="page-header">
Get song recommendations based on your mood.
</h2>
<img id="selected-img" src="">
<h4 id="track-name"></h4>
<div class="btn-wrapper">
<label class="btn btn-info" for="my-file-selector">
<input id="my-file-selector" type="file">
Upload a picture of you
</label>
<button type="button" class="btn btn-info" id="refreshbtn">Another song please</button>
</div>
<div id="musicplayer"></div>
</div>
<!--
NB: You generally do not want to publically expose the server structure (eg. ./node_modules/...)
will sort that in later bootcamps with task-runners and the like.
For now this is just a demonstration.
Alternatively can use CDNs for bootstrap/jquery
-->
<!--jQuery Script-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!--Bootstrap Script-->
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!--Custom Script-->
<script src="./js/main.js"></script>
<!--SoundCloud SDK-->
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
</body>
</html>