Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

335 lines (310 sloc) 11.714 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DevHouse, Welcome</title>
<style type="text/css">
body {text-align: center; font-size: 24px; font-family: "Trebuchet MS" Verdana, Arial; color: #606060; background: white;}
body div div {margin-bottom: 10px;}
div.pane {margin: 0px auto; width: 725px;}
div.pane table {margin: 0px auto;}
div.pane table input.textinput {width: 320px;}
form {margin: 0px; padding: 0px;}
img {border: none; vertical-align: middle; margin: 0px;}
/*
input {font-size: 20px; padding: 3px 5px;}
input.text {width: 300px;}
*/
#header {margin: 40px; margin-bottom: 20px; height: 225px;}
#container {padding-top:40px;}
input, textarea {
font-family:Arial, Helvetica, sans-serif;
color:#404040;
}
label {
cursor:pointer;
font-family:"Trebuchet MS";
font-size: 36px;
color:#606060;
line-height:50px;
}
label.chosen {color:#333;}
/*Text inputs*/
.textinput, .textinputHovered {
height:84px;
cursor:pointer;
background:url(images/input_bg.gif) repeat-x left top;
border:none;
padding:12px 0;
text-align: center;
font-size: 64px;
font-family:"Trebuchet MS";
font-weight:bold;
vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
padding-bottom:0;
vertical-align:middle;
}
/*Button*/
.buttonSubmit, .buttonSubmitHovered {
width:auto;
height:88px;
color:#FFF;
font-weight:bold;
font-family: Helvetica;
font-size: 36px;
padding:2px;
margin-top:30px;
background:url(images/button_bg.jpg) repeat-x left top;
cursor:pointer;
border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript"><!--
var WelcomeSystem = {
BASE_PATH: '/',
PATH_SEPERATOR: '/',
moniker: null,
timer: null,
polling: false,
key: '',
printJob: null,
data: null,
panels: {
email: 'email_form',
details: 'details_form',
thanks: 'thanks'
},
visiblePanel: '',
initialize: function() {
this.moniker = $('moniker');
this._event_submitEmail = this.event_submitEmail.bindAsEventListener(this);
this._event_submitDetails = this.event_submitDetails.bindAsEventListener(this);
Event.observe('email_form', 'submit', this._event_submitEmail);
Event.observe('details_form', 'submit', this._event_submitDetails);
Event.observe('header', 'click', function(){Effect.Pulsate($('header'),{pulses: 1, duration: 0.2});});
this.startOver();
},
clearData: function() {
this.key = '';
this.printJob = null;
this.data = {
first_name: '',
last_name: '',
tags: ''
};
for (var i in this.data) {
$(i).value = '';
}
},
showPane: function(key, focus) {
var focus = focus || null;
if (this.visiblePane && this.panels[this.visiblePane]) {
$(this.panels[this.visiblePane]).hide();
Effect.SlideUp(this.panels[this.visiblePane], {
duration: .2,
afterFinish: function (key, focus) {
this.showAnimation(key, focus)
}.bind(this, key, focus)
});
} else {
this.visiblePane = '';
this.showAnimation(key, focus);
}
},
showAnimation: function(key, focus) {
var focus = focus || '';
if (focus) {
var afterFinish = function(focus) {
$(focus).select();
}.bind(this, focus);
} else {
var afterFinish = Prototype.emptyFunction;
}
if (this.panels[key]) {
Effect.SlideDown(this.panels[key], {
duration: .2,
afterFinish: afterFinish
});
this.visiblePane = key;
}
},
startOver: function() {
this.clearData();
$('email').value = this.key;
this.showPane('email', 'email');
this.enableButtons();
},
startDetails: function() {
this.showPane('details', 'first_name');
$('first_name').focus();
this.enableButtons();
},
startThanking: function() {
if (!this.timer) {
this.disableButtons();
this.showPane('thanks');
this.moniker.update(this.data.first_name);
this.timer = new PeriodicalExecuter(function() {
if (!this.polling) {
this.polling = true;
new Ajax.Request(this.BASE_PATH+'printer'+this.PATH_SEPERATOR+this.printJob, {
method: 'get',
onSuccess: function(t) {
var json = eval('('+t.responseText+')');
switch (json.status) {
case 'finished':
this.finishThanking(2500);
break;
case 'failed':
alert("Your badge (job "+this.printJob+") failed to print. Please notify an event host.");
this.finishThanking();
break;
case 'outstanding':
break;
default:
}
this.polling = false;
}.bind(this),
onFailure: function() {
alert("Failed to get the print status for your badge (job "+this.printJob+"). Please notify an event host.");
this.finishThanking();
this.polling = false;
}.bind(this)
});
}
}.bind(this), 1);
}
},
finishThanking: function(timeout) {
var timeout = timeout || 0;
if (this.timer) {
this.timer.stop();
this.timer = null;
}
if (timeout) {
setTimeout(this.startOver.bind(this), timeout);
} else {
this.startOver();
}
},
disableButtons: function() {
var buttons = document.getElementsByTagName('input');
for (var i = 0, c = buttons.length; i < c; i++) {
if ('button' == buttons[i].type || 'submit' == buttons[i].type) {
buttons[i].disabled = true;
}
}
},
enableButtons: function() {
var buttons = document.getElementsByTagName('input');
for (var i = 0, c = buttons.length; i < c; i++) {
if ('button' == buttons[i].type || 'submit' == buttons[i].type) {
buttons[i].disabled = false;
}
}
},
event_submitEmail: function(event) {
Event.stop(event);
var email = $F('email');
if (email.match(/^[0-9a-zA-Z][-_\.0-9a-zA-Z+]*[0-9a-zA-Z]+@([0-9a-zA-Z]+[-_\.0-9a-zA-Z]*[0-9a-zA-Z]+)+\.[a-zA-Z]{2,6}$/)) {
this.key = email;
new Ajax.Request(this.BASE_PATH+'prefill'+this.PATH_SEPERATOR+this.key, {
method: 'get',
onSuccess: function(t) {
var json = eval('('+t.responseText+')');
for (var i in json) {
var el = $(i);
if (el) {
el.value = json[i];
}
}
this.startDetails();
}.bind(this),
onFailure: function() {
alert('Failed to fetch prefill details, server did not respond. Please notify an event host.');
}
});
} else {
Effect.Shake($('email').parentNode)
}
},
event_submitDetails: function(event) {
Event.stop(event);
for (var i in this.data) {
this.data[i] = $F(i).strip();
}
if (this.data.first_name.length) {
new Ajax.Request(this.BASE_PATH+'attend'+this.PATH_SEPERATOR+this.key, {
method: 'post',
parameters: this.data,
onSuccess: function(t) {
var json = eval('('+t.responseText+')');
this.printJob = json.printJobId;
this.startThanking();
}.bind(this),
onFailure: function() {
alert('Failed to submit your badge details. Please notify an event host.');
}
});
} else {
Effect.Shake($('first_name').parentNode);
}
}
};
Event.observe(window, 'load', function() {
WelcomeSystem.initialize();
});
//-->
</script>
</head>
<body>
<div id="header"><img src="shdh_logo.gif" alt="SHDH" /></div>
<form id="email_form" action="#" style="display: none;">
<div class="pane">
<div>
<label for="email">Email:</label><br />
<img src="images/input_left.gif" alt="" /><input type="text" id="email" value="" class="textinput" autocomplete="off" /><img src="images/input_right.gif" alt="" />
</div>
<div><img src="images/button_left.jpg" alt="" class="buttonImg"/><input type="submit" value="Get this party started!" class="buttonSubmit"/><img src="images/button_right.jpg" alt="" class="buttonImg"/>
</div>
</div>
</form>
<form id="details_form" action="#" style="display: none;">
<div class="pane">
<table>
<tr>
<td>
<div>
<label for="first_name">First:</label><br />
<img src="images/input_left.gif" alt="" /><input type="text" id="first_name" value="" class="textinput" autocomplete="off" /><img src="images/input_right.gif" alt="" />
</div>
</td>
<td>&nbsp;</td>
<td>
<div>
<label for="last_name">Last:</label><br />
<img src="images/input_left.gif" alt="" /><input type="text" id="last_name" value="" class="textinput" autocomplete="off" /><img src="images/input_right.gif" alt="" />
</div>
</td>
</tr>
</table>
<div>
<label for="tags">Tags:</label><br />
<img src="images/input_left.gif" alt="" /><input type="text" id="tags" value="" class="textinput" autocomplete="off" /><img src="images/input_right.gif" alt="" />
</div>
<div>
<img src="images/button_left.jpg" alt="" class="buttonImg"/><input type="button" value="&lt;&lt; Oops!" onclick="WelcomeSystem.startOver();" class="buttonSubmit"/><img src="images/button_right.jpg" alt="" class="buttonImg"/>
<img src="images/button_left.jpg" alt="" class="buttonImg"/><input type="submit" value="Finish this up!" class="buttonSubmit"/><img src="images/button_right.jpg" alt="" class="buttonImg"/>
</div>
</div>
</form>
<div id="thanks" class="pane" style="display: none;">Thanks for showing up, <span id="moniker">dude</span>!</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.