glow-up/index.html at master · qhou/glow-up · 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
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
	<!-- Website Template designed by www.downloadwebsitetemplates.co.uk -->
	<meta charset="UTF-8">
	<title>Glow Up</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
	 crossorigin="anonymous">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72.png">
	<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57.png">
	<!--[if IE]><![endif]-->

	<!-- Bootstrap -->
	<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>

<body id="backtotop">
	<div class="fullwidth clearfix">
		<div id="topcontainer" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">

			<p>
				<span class="fa fa-smile-o"></span>
			</p>

			<h1>
				<span>Glow</span> Up</h1>

			<div class="container">
				<p>Here's you and your glow: it's a</p>
				<div id ="gift">
				</div>
			</div>
		</div>
	</div>
	<div class="arrow-separator arrow-white"></div>

	<div class="fullwidth colour1 clearfix container">
		<div id="countdown" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">
			<div id="responseContainer">
				<pre id="json"></pre>
				<img id="response" />
			</div>
		</div>
	</div>
	</div>

	<div id="webCamModal" class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title">
						<h3>
							<span class="fa sm fa-smile-o">
								<span>
									<span>Glow</span> Up</h3>
						</span>
						</span>
					</div>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-8">
							<div id="videoContainer">
									<button type="button" id="snapPhoto" class="btn">Snap a photo</button>
								<p>
									Click on your face once to snap a photo!
									<br> We'll give you the best remedy for your current emotion.
								</p>
								<video id="video" width="100%" autoplay></video>
							</div>
						</div>
						<div class="col-md-4">
							<div class="emotions">
								<h2>Face Rectangle</h2>
								<ul id="faceRectangle">
									<!-- Will populate list with response content -->
								</ul>

								<h2>Emotions</h2>
								<ul id="scores">
									<!-- Will populate list with response content -->
								</ul>
								<div>
									<div id="loadingContainer">
										<p> Photo taken!</p>
										<img id="loading" src="load.gif"></img>
									</div>
								</div>
							</div>
							<button type="button" id="respondBtn" class="btn">Claim your glow</button>
						</div>

					</div>
				</div>
				<div class="modal-footer">
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.js"></script>
	<script src="js/uikit.scrollspy.js"></script>
	<script src="js/scripts.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="./bootstrap/js/bootstrap.min.js"></script>
	<!--
	<script src="./js/content.js"></script>
	-->
	<script src="./js/lib.js"></script>
	<script src="./js/content.js"></script>


</body>

</html>