lol

app.js

@@ -0,0 +1,108 @@
+$(function() {
+
+  var compileTemplate = function(content) {
+    var ret = { 
+      render: function() { 
+        return "No templating engine found..."; 
+      }
+    };
+    // if (typeof(Handlebars) !== undefined && _.isFunction(Handlebars.compile)) {
+    //   ret = { render: Handlebars.compile(content).apply(null, arguments) };
+    //   return ret;
+    // } else 
+    if (typeof(Hogan) !== undefined && _.isFunction(Hogan.compile)) {
+      return Hogan.compile(content);
+    }
+    return ret;
+  };
+
+  var templates = {};
+  $('[data-template]').each(function(i,e) {
+    var tpl = $(e), tpl_name = tpl.data("template");
+    templates[tpl_name] = templates[tpl_name] || compileTemplate(tpl.html());
+    tpl.remove();
+  });
+
+  var renderTemplate = function(tpl, data) {
+    $('.form.registration').addClass("pathe_formulaire_" + tpl);
+    // $('.form.registration').html($("#" + tpl + "_template").html());
+    $('.form.registration').html(templates[tpl].render(data));
+  };
+
+  var render = function(account) {
+    var name, email, phone;
+    if (account.player && account.player.extra) {
+      name  = account.player.extra.name || account.player.name || account.name;
+      email = account.player.extra.email || account.email;
+      phone = account.player.extra.phone;
+    } else {
+      name  = account.name;
+      email = account.email;
+    }
+    data = { email: (email || ""), name: (name || ""), phone: (phone || "") };
+    try {
+      if (account && account.player.extra.email) {
+        renderTemplate("confirmation", data);
+      } else {
+        renderTemplate("inscription", data);
+      }
+    } catch (e) {
+      renderTemplate("inscription", data);
+    }
+  };
+
+  var register = function(extra) {
+    Oahu.account.player.extra = extra;
+    Oahu.app.updatePlayer({ extra: extra }, function() {
+      render(Oahu.account);
+    });
+  };
+
+  $('form').live('submit', function(e) {
+    e.preventDefault();
+    var val, extra = {}, fields = _.clone(Oahu.app.registration_fields);
+    while (fields.length > 0) {
+      field = fields.pop();
+      val = $('#' + field + "_field").val();
+      if (val.length === 0) {
+        alert("Tous les champs sont obligatoires");
+        return false;
+      } else if (field === "email" && !/[A-Z0-9._%\-]+@[A-Z0-9.\-]+\.[A-Z]{2,4}/i.test(val)) {
+        alert("Veuillez saisir un email valide");
+        return false;            
+      } else {
+        extra[field] = val;
+      }
+    }
+    if (Oahu.account) {
+      register(extra);
+    } else {
+      Oahu.once('oahu:account', function() { register(extra); });
+      Oahu.login('facebook');
+    }
+  });
+
+  $('.share').live('click', function() {
+    Oahu.ui.share('facebook', { 
+      link: page_url,
+      description: "Venez découvrir en avant-première le film LOL US avec Miley Cyrus et Demi Moore !",
+      name: "Projection LOL US le 12 juillet à Paris",
+      picture: "https://pathe-projections.herokuapp.com/img/logo-fondjaune.png"
+    });
+  });
+
+  Oahu.bind("oahu:account", function(msg, account) {
+    render(account);
+  });
+  _oahu_config = { appId: oahu_app_id };
+
+  if(fb_app_id){
+    _oahu_config.facebook = { appId: fb_app_id, status:true, cookie:true, xfbml:true, oauth:true, logging:true, frictionlessRequests : true };
+  }
+
+  if(ga_code){
+    _oahu_config.ga = { code: ga_code };
+  }
+
+  Oahu.init(_oahu_config);
+});

fonts/stylesheet.css

@@ -0,0 +1,29 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2012 */
+
+
+
+
+
+
+
+@font-face {
+    font-family: 'Helvetica Condensed';
+    src: url('helveticaltstd-cond-webfont.eot');
+    src: url('helveticaltstd-cond-webfont.eot?#iefix') format('embedded-opentype'),
+         url('helveticaltstd-cond-webfont.woff') format('woff'),
+         url('helveticaltstd-cond-webfont.ttf') format('truetype'),
+         url('helveticaltstd-cond-webfont.svg#HelveticaLTStdCondRegular') format('svg');
+    font-weight: normal;
+}
+
+
+
+@font-face {
+    font-family: 'Helvetica Condensed';
+    src: url('helveticaltstd-boldcond-webfont.eot');
+    src: url('helveticaltstd-boldcond-webfont.eot?#iefix') format('embedded-opentype'),
+         url('helveticaltstd-boldcond-webfont.woff') format('woff'),
+         url('helveticaltstd-boldcond-webfont.ttf') format('truetype'),
+         url('helveticaltstd-boldcond-webfont.svg#HelveticaLTStdCondBold') format('svg');
+    font-weight: bold;
+}

index.php

@@ -1,107 +1,42 @@
 <?php
-$oahu_host    = getenv('OAHU_HOST');
-$oahu_app_id  = getenv('OAHU_APP_ID');
-$page_url     = getenv('PAGE_URL');
-$fb_app_id    = getenv('FACEBOOK_APP_ID');
-$ga_code      = getenv('GOOGLE_ANALYTICS_CODE');
+  $oahu_host    = getenv('OAHU_HOST');
+  $oahu_app_id  = getenv('OAHU_APP_ID');
+  $page_url     = getenv('PAGE_URL');
+  $fb_app_id    = getenv('FACEBOOK_APP_ID');
+  $ga_code      = getenv('GOOGLE_ANALYTICS_CODE');
 ?>
 
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml/video">
 <head>
   <title>Pathe</title>
   <meta charset="utf-8" />  
-
   <meta property="og:url" content="<?php echo $page_url; ?>" />
   <meta property="og:title" content="Project test Pathé" />
   <meta property="og:description" content="Gagnez votre place pour une projetion test d'un film Pathé à Paris !" />
+  <script type="text/javascript">
+    page_url = '<?php echo $page_url?>'
+    fb_app_id = '<?php echo $fb_app_id?>'
+    oahu_app_id = '<?php echo $oahu_app_id?>'
+    ga_code = '<?php echo $ga_code?>'
+  </script>
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="//<?php echo $oahu_host; ?>/assets/oahu.js" type="text/javascript"></script>
   <script src="//<?php echo $oahu_host; ?>/assets/oahu-apps.js" type="text/javascript"></script>
+  <script src="app.js" type="text/javascript"></script>
   <link href="//<?php echo $oahu_host; ?>/assets/oahu-apps.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="./style.css" media="screen" rel="stylesheet" type="text/css" />
-  <script type="text/javascript" charset="utf-8">
-    $(function() {
-      var renderTemplate = function(tpl) {
-        $('#pathe_formulaire').attr("class", "pathe_formulaire_" + tpl);
-        $('#pathe_formulaire').html($("#" + tpl + "_template").html());
-      };
-      var render = function(account) {
-        try {
-          if (account && account.player.extra.email) {
-            renderTemplate("confirmation");
-          } else {
-            renderTemplate("inscription");
-          }
-        } catch (e) {
-          renderTemplate("inscription");
-        }
-      };
-
-      var register = function(extra) {
-        Oahu.account.player.extra = extra;
-        Oahu.app.updatePlayer({ extra: extra }, function() {
-          render(Oahu.account);
-        });
-      };
-
-      $('form').live('submit', function(e) {
-        e.preventDefault();
-        var val, extra = {}, fields = _.clone(Oahu.app.registration_fields);
-        while (field = fields.pop()) {
-          val = $('#' + field + "_field").val();
-          if (val.length == 0 ) {
-            alert("Tous les champs sont obligatoires");
-            return false;
-          } else if (field=="email" && !/[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/i.test(val)) {
-            alert("Veuillez saisir un email valide");
-            return false;            
-          } else {
-            extra[field] = val;
-          }
-        }
-
-        if (Oahu.account) {
-          register(extra);
-        } else {
-          Oahu.once('oahu:account', function() { register(extra); });
-          Oahu.login('facebook');
-        }
-      });
-
-      $('.pathe_formulaire_partager').live('click', function() {
-        Oahu.ui.share('facebook', { 
-          link: '<?php echo $page_url; ?>',
-          description: "Gagnez votre place pour une projetion test d'un film Pathé à Paris !",
-          name: "Projection test Pathé",
-          picture: "https://pathe-projections.herokuapp.com/img/logo-fondjaune.png"
-        });
-      });
-
-      Oahu.bind("oahu:account", function(msg, account) {
-        render(account);
-      });
-      _oahu_config = { appId: '<?php echo $oahu_app_id ?>' };
-      <?php if ($fb_app_id) : ?>
-      _oahu_config.facebook = { appId: "<?php echo $fb_app_id; ?>", status:true, cookie:true, xfbml:true, oauth:true, logging:true, frictionlessRequests : true };
-      <?php endif ?>
-      <?php if ($ga_code) :  ?>
-      _oahu_config.ga = { code: "<?php echo $ga_code ?>" };
-      <?php endif ?>
-      Oahu.init(_oahu_config);
-    })
-  </script>
 </head>
 
-<body>
-  <div id="pathe_formulaire"></div>
-  <script type="text/template" id="inscription_template">
+<body id="pathe">
+  <div class="registration form"></div>
+  <script type="text/template" id="inscription_template" data-template="inscription">
   <?php require('templates/inscription.html'); ?>
   </script>
-  <script type="text/template" id="confirmation_template">
+  <script type="text/template" id="confirmation_template"  data-template="confirmation">
   <?php require('templates/confirmation.html'); ?>
   </script>
 </body>
 
-</html>
+</html>

style.css

@@ -1,58 +1,79 @@
+@import 'fonts/stylesheet.css';
+
 body {
-  font-family: "Helvetica";
+  font-family: "Helvetica Condensed",'Helvetica', Arial, Verdana, sans-serif;
+  font-size: 62.5%;
+  font-size: 14px;
   background: #fdc400 url('img/logo.png') no-repeat 20px 40px;
 }
 
-#pathe_formulaire {
-	width: 800px;
-	height: 400px;
-	background-repeat: no-repeat;
+.form.registration{
+  text-transform: uppercase;
 }
-div.pathe_formulaire_inscription {
-	background: url("img/fond_inscription.gif");
+
+.summary{
+  font-size: 24px;
 }
-div.pathe_formulaire_confirmation {
-	background: url("img/fond_confirmation.gif");
+
+.legend{
+  font-size: 16px;
 }
-#pathe_formulaire_champs {
-	clear: right;
-	padding: 215px 26px 0px 0px;
+
+#pathe .form.registration{
+  width:600px;
+  margin-left:270px;
 }
-div.pathe_formulaire_champ {
-	clear: both;
-	height: 26px;
-	padding-right: 10px;
+
+.field{
+  width:511px;
+  margin-bottom: 5px;
 }
-label {
-  position: absolute;
-  margin-left: 290px;
-  padding-top: 3px;
-  color: #222;
-  font-size: 14px;
+
+.form.registration label{
+  display: inline-block;
+  width:150px;
+  text-align: right;
+  margin-right: 5px;
+}
+.form.registration input.text{
+  font-family: 'Helvetica', Arial, Verdana, sans-serif;
+  font-weight: normal;
+  width: 340px;
+  font-size:18px;
+  background: white;
+  -webkit-border-radius:2px;
+  -moz-border-radius:2px;
+  -ms-border-radius:2px;
+  -o-border-radius:2px;
+  border-radius:2px;
+  border:none;
+  padding:7px 5px;
+}
+
+.form.registration input.submit{
+  font-family: 'Helvetica Condensed', Arial, Verdana, sans-serif;
+  font-weight: bold;
+  font-size: 24px;
+  text-transform: uppercase;
+  padding:10px;
+  background: white;
+  -webkit-border-radius:2px;
+  -moz-border-radius:2px;
+  -ms-border-radius:2px;
+  -o-border-radius:2px;
+  border-radius:2px;
+  border:none;
+  padding:7px 15px;
+}
+
+.submit{
+  float:right;
+}
+
+.logo{
+  margin-top: 40px;
+  background: url('img/lol.png') top left no-repeat;
+  text-indent: -9999px;
+  height:55px;  
+  width:285px;  
 }
-input.pathe_formulaire_champ {
-  float: right;
-	font-family: arial, helvetica, verdana, sans-serif;
-	color: #7f7d7f;
-	font-size: 14px;
-	padding: 2px 3px 0px 3px;
-	height: 18px;
-	font-size: 12px;
-	border: 0px;
-	margin: 0px;
-	display: block;
-	background-color: #fff;
-	-moz-box-shadow: 2px 2px 5px #666;
-  -webkit-box-shadow: 2px 2px 5px #666;
-  box-shadow: 2px 2px 5px #666;
-}
-div.pathe_formulaire_valider {
-	clear: both;
-	float: right;
-	height: 26px;
-	padding-top: 4px;
-}
-div.pathe_formulaire_partager {
-	float: left;
-	padding: 224px 0px 0px 293px;
-}