SUPER DAD

by mgrassotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/bootstrap.css">
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/flat-ui.css">

<script type="text/x-handlebars">
  <div class="section-container">
      <div class="section">
          <a class="logo btn btn-block">Super Dad</a>
          <p class="prompt lead">{{q}}</p>
          <a {{action a}} class="btn response btn-block">{{a}}</a>
          <a {{action b}} class="btn response btn-block">{{b}}</a>
      </div>
  </div>
</script>

CSS

.section-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px 20px;
    margin-top: 20px;
}

.logo {
    line-height: 40px;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    padding: 8px 0;
}

.response {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 26px;
    padding: 8px;
}

.prompt {
    margin-top: 22px;
}

.section {
    text-align: center;
}

JavaScript

App = Ember.Application.create({});

App.Router.map(function() {
  this.route("index", { path: "/about" });
  this.route("list", { path: "/favs" });
});

App.ApplicationController = Ember.Controller.extend({
    q: 'Do you want to be',
    a: 'Yes',
    b: 'No'
});

App.IndexController = Ember.Controller.extend({
  message: 'Hello! See how index.hbs is evaluated in the context of IndexController' 
});

App.ListRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
  }
});