-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
193 lines (170 loc) · 6.29 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
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE HTML>
<html manifest="phraffle.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name = "viewport" content = "user-scalable = yes, width = 700">
<link rel="apple-touch-icon" href="icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon144.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://use.typekit.com/hqs2kgo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">
var addToHomeConfig = {
message:'Install Phraffle on your home screen<br>Tap %icon and then <strong>"Add to Home Screen".',
lifespan: 3500
};
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31679804-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="add2home.js"></script>
<link rel="stylesheet" href="add2home.css">
<title>Phraffle</title>
<style>
body {
font-family:arial,verdana;
margin:0px;
padding:0px;
background: #0c2aef;
}
a {color:white;}
.bd {text-align:center;}
.hd {
text-align:center;
color:white;
font-family: "bello-pro";
text-shadow: 2px 2px #353535;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color='#353535')";
font-size:76px;
margin-left: 0px;
margin-right:0px;
margin-bottom: 10px;
padding-top:5%;
}
.outercontainer {
position:absolute;
height:100%;
width:100%;
background: #0c2aef;
/* Some day, we won't have to do this sillyness */
background-image: -ms-radial-gradient(center, circle farthest-corner, #19ABFF 0%, #0C2AEF 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #19ABFF 0%, #0C2AEF 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #19ABFF 0%, #0C2AEF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 484, color-stop(0, #19ABFF), color-stop(1, #0C2AEF));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #19ABFF 0%, #0C2AEF 100%);
background-image: radial-gradient(center, circle farthest-corner, #19ABFF 0%, #0C2AEF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19ABFF', endColorstr='#0C2AEF');
}
.desc {text-align:center; color:white;font-size:12px;margin-bottom: 10px;}
.instructions {width:600px; margin-left:auto; margin-right:auto; padding-top:30px; text-align:left; color:white;font-size:12px;margin-bottom: 10px;}
.footer {text-align:center;color:white;font-size:12px; margin:20px;}
.container {margin:0 auto;width:652px;}
.slot-wrapper {
width:650px;
border: 1px solid #000000;
background: #cccccc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #888888));
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #888888 100%);
border-radius: 0px;
}
.slot {
background:url("images/reel_normal_numbers.png") repeat-y;
width:86px;
height:70px;
float:left;
border:1px solid #aaa;
border-radius: 0px;
background-position:0 0px;
}
.slotstopped {border: 1px solid #000;}
.slotx {
background:url("images/reel_x.png") repeat-y;
width:86px;
height:70px;
float:left;
border:0px solid #aaa;
background-position:0 0px;
}
.slotdash {
background:url("images/reel_dash.png") repeat-y;
width:40px;
height:70px;
float:left;
border:0px solid #aaa;
background-position:0 0px;
}
.motion {
background:url("images/reel_blur_numbers.png") repeat-y;
}
button {
display:block;
align: center;
width:138px;
height:33px;
margin:20px;
margin-left: auto;
margin-right: auto;
font-size:14px;
border-radius: 15px;
cursor:pointer;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #888888));
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: linear-gradient(top, #FFFFFF 0%, #888888 100%);
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #888888 100%);
}
.clear {clear:both;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.spritely.js"></script>
<script src="jquery.backgroundPosition.js"></script>
<script src="raffle.js"></script>
</head>
<body>
<div class="outercontainer">
<div class="hd">Phraffle!</div>
<div class="desc">Create an instant raffle using mobile phone numbers as raffle tickets</div>
<div class="bd">
<div class="container">
<div class="slot-wrapper">
<div id="slotx" class="slotx"></div>
<div id="slotx" class="slotx"></div>
<div id="slotx" class="slotx"></div>
<div id="slotdash" class="slotdash"></div>
<div id="slot1" class="slot"></div>
<div id="slot2" class="slot"></div>
<div id="slot3" class="slot"></div>
<div id="slot4" class="slot"></div>
<div class="clear"></div>
</div>
<!-- <div><button id="control">Reset</button></div>-->
</div>
<div class="instructions">
<center><b>Suggested Instructions for Audience Giveaways</b></center>
<ul>
<li>Have everyone in the audience stand up
<li>Tell the audience to remain standing while their phone number matches the pattern
<li>Click/Tap the last digit to make it stop spinning. 90% of the audience should now be seated
<li>Click/Tap the next digit and see if anyone is left standing. If not, re-spin it and try again
<li>The last person standing wins
<li>With an audience of 100 people, it typically works between 2 to 4 clicks to narrow it to one winner
<li>Audiences of more than 10,000 people require an enterprise license. Cost=$20k -- Venmo accepted ;-)
</ul>
</div>
<div class="footer">
<a href="https://gregsramblings.com">https://gregsramblings.com</a><br><br><br>
</div>
</div>
</div>
</body>
</html>