-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
51 lines (47 loc) · 4.95 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
<!DOCTYPE html>
<head>
<title>Ring measurement using your webcam</title>
<script src="fabric.js"></script>
<script type="text/javascript">var switchTo5x=true;</SCRIPT>
<!--
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></SCRIPT>
<script type="text/javascript">stLight.options({publisher: "ur-82b28e40-dfa0-3bea-2591-957debb1a75", doNotHash: false, doNotCopy: false, hashAddressBar: false});</SCRIPT>
-->
</head>
<body style="margin:0;padding:0;font-family:Arial">
<div id="container" style="position:relative;max-width:800px;text-align:center;margin:0;padding:0;overflow:hidden;">
<video autoplay width=800 style="position:absolute;top:0;left:0"></video>
<canvas id="canvas" style="position:absolute;top:0;left:0;z-index:6" width=800 height=600></canvas>
<canvas id="canvas2" style="position:absolute;top:0;left:0;z-index:1;display:none;" width=800 height=600></canvas>
<img id="snapshot" width=800 height=600 style="position:absolute;top:0;left:0;z-index:5" src>
<div id="instructions" style="font-size:40px;position:absolute;top:0;left:10px;display:none;z-index:5;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"> Hold a Credit card with the magnetic strip showing in the box and hit the Get Started button, you will have 5 seconds to get into position. For best results try keep your palm as parallel to the lens of your webcam as possible. </div>
<div id="timer" style="font-size:160px;position:absolute;top:0;left:10px;display:none;z-index:5;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;" ></div>
<div id="msi" style="font-size:40px;position:absolute;top:0;left:10px;display:none;z-index:5;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">Put the white box over the card magnetic strip resizing it to fit</div>
<div id="fsi" style="font-size:40px;position:absolute;top:0;left:10px;display:none;z-index:5;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">Put the blue box over the ring finger resizing it to fit</div>
<button id="msn" style="font-size:40px;position:absolute;top:530px;right:10px;display:none;z-index:7;" >Next</button>
<button id="finish" style="font-size:40px;position:absolute;top:530px;right:10px;display:none;z-index:7;" >Finish</button>
<canvas id="mag" style="position:absolute;bottom:0;left:0;z-index:5"></canvas>
<div id="guide" style="position:absolute;top:35px;left:0;display:none;z-index:5;width:100%;text-align:center" ><img style="height:1000px; top:-200px;position:relative;left:25px;" src="guide.svg"></div>
<button id="go" style="z-index:8;position:absolute;top:530px;font-size:60px;display:none;width:100%;">Begin 10 Second Countdown</button>
<div id="prompt" style="text-align:center;font-size:80px;position:absolute;top:50px;width:100%;">Click "Allow" above</div>
<div id="sizes" style="height:100%;z-index:150px;background-color:black;font-size:40px;position:absolute;top:0px;left:0px;width:100%;display:none;z-index:6;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
<div id="finished" style="display:none;font-size:70px;display:none;z-index:5;margin-bottom:40px;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
Congratulations!
</div>
Finger Diameter Size:
<div id="fingerMM" style="font-size:80px;display:none;z-index:5;width:100%;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"></div>
Ring Size:
<div id="fingerEU" style="font-size:80px;display:none;z-index:5;width:100%;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"></div>
<div id="fingerUS" style="font-size:80px;display:none;z-index:5;width:100%;-webkit-text-stroke: 1px black;color: white;text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"></div>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<button id="reset" onClick="location.reload()" style="font-size:40px;position:absolute;top:530px;right:10px;display:none;z-index:7;">Start Again</div>
</div>
<script src="fingers.js"></script>
</body>
</html>