Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  
</head>
<body>
  
  <script type="text/x-handlebars" data-template-name="application">
    <div class="span11">{{render display}}</div>
</script>
​
<script type="text/x-handlebars" data-template-name="display">
    
    {{!-- Navbar: concept inherited from Reddit Tutorial --}}
  <div id="vec-app" style="text-align:left">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
                    </a>
                    <a href="/" class="brand">Eval App</a>
                    <div class="nav-collapse collapse" id="main-menu">
                        <ul class="nav" id="main-menu-left">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Display Presets<b class="caret"></b></a>
                  <ul class="dropdown-menu" id="swatch-menu">
                    <li>Create Your Own</li>
                    <li>See Sample: Lowest Cost</li>
                    <li>See Sample: Highest Total</li>
                    <li>See Sample: Public Favorite</li>
                  </ul>
                </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
​
        <h1 class='span10'>Selection Evaluation App</h1>
        <div class="span10">{{render dashboard}}</div>
        <div class="span10">{{render items}}</div>
​
        <footer class="span10">&nbsp;</footer>
        
</script>
​
​
<script type="text/x-handlebars" data-template-name="dashboard">
    <div class="span10 dashboard">
        
        <img src="http://dev.piwik.org/trac/raw-attachment/ticket/1721/VisitsPerLocalTime_BasicBar.png" height="300px"/>
        
        <span class="span2 offset1"><h2>Total: XX</h2></span>
        <span class="span3"><h2>Average: XX</h2></span>
        <span class="span3"><h2>Cost: $XX.xx</h2></span>
        
        <div class="span10">
          <ul>
            <li>All Dashboard properties should be updated when item selections change.</li>
            <li>Dashboard should have access to all items.</li>
          </ul>
        </div>
        
    </div>
</script>
​
​
<script type="text/x-handlebars" data-template-name="items">
            
        <div class='span10 row item'>
            <h3 class="span10">Item Title</h3>
            <div class="row">
                <div class="span2 offset1 item-image">
                    <img src="http://www.placehold.it/180x180" class="img-polaroid">
                </div>
                    
                    {{!-- SOURCE INFO --}}
                    <div class="item-info span7">
                        <div class="span2">
                            <p>Item properties should observe child options.</p>
                        </div>
                        
                        <div class="span2 calculated text-right">
                            <p>Quantity</p>
                            <h3>XX</h3>
                        </div>
                        <div class="span2 calculated text-right">
                            <p>Cost per Item</p>
                            <h3>$XX.xx<h3>
                        </div>
                    </div>
                    
                            {{render options}}
                    
            </div>
        </div>
</script>
​
​
<script type="text/x-handlebars" data-template-name="options">
    {{!-- ENERGY SEGMENTS --}}
    <div class="span7 offset3">
        <div class="options">
            <div class="option-header">
                <span class="span2 offset2 text-middle">Quantity</span>
                <span class="span2 text-middle">Cost</span>
            </div>
            <div class="option">
                <span class="span2">Option Title</span>
                <span class="span2 text-middle">-- </span>
                <span class="span2 text-middle">$--.--</span>
            </div>
            <div class="option is-selected">
                <span class="span2">Option Title</span>
                <span class="span2 text-middle">-- </span>
                <span class="span2 text-middle">$--.--</span>
            </div>
        </div>
    </div>
</script>
  
  
</body>
</html>
 
/* Styling based on http://getbootstrap.com/2.3.2/examples/marketing-narrow.html */
​
​
/*****************************/
/**** BASIC HTML ELEMENTS ****/
/*****************************/
html,
body {
  margin: 0;
  padding: 0;
    overflow: auto;
  background: #eaeaea url('../img/bg.png');
}
html {
    text-align: center;
}
body{
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  color: #4d4d4d;
    width: 1170px;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
body.html {
    margin: 0 auto;
    text-align: left;
}
​
/*****************************/
/****   STYLE SHORTCUTS   ****/
/*****************************/
.hidden{
  display:none;
}
​
​
/*****************************/
/****   SPECIFIC STYLES   ****/
/*****************************/
​
/* DASHBOARD */
.dashboard {
    border: 2px solid #999; 
    margin: 0 0 40px;
    padding: 20px 0;
    background-color: white;
}
​
/* ITEMS */
.item.row {
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    border: 1px solid #ccc;
}
.item .item-info {
    overflow-y: auto;
    overflow-x: hidden;
}
​
/* ITEM OPTIONS */
.option {
    background-color: #ccc;
    border: rgba(255, 255, 255, 0.3) solid 1px;
    padding: 5px 10px;
    margin: 10px 10px;
    cursor: pointer;
    transition: all .7s ease;
    clear: both;
    overflow: auto;
}
.option:hover {
    background-color: rgba(157, 255, 148, 0.3);
    border-color: rgba(157, 255, 148, 0.3);
}
.option-header {
    background: none;
    border: none;
    font-weight: bold;
    margin: 0;
}
.option.is-selected {
    border: solid green 1px;
    background-color: rgba(157, 255, 148, 0.3);
}
.option.is-supressed {
    color: #999999;
}
​
​
/* ITEM POPUP */
.popup {
  position: fixed;
  top: 70px;
    left: 30%;
  width: 600px;
  height: 500px;
  background-color: white;
  padding: 10px 20px;
  z-index: 100;
  border: 10px solid #eee;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.popup .close {
  float: right;
  font-size: 15px;
}
.popup h1 {
  font-size: 20px;
  margin: 0 0 10px 0;
  line-height: 23px;
}
.popup img {
  max-width: 750px;
  max-height: 330px;
}
​
/* FOOTER */
footer {
    min-height: 100px !important;
}
 
App = Ember.Application.create({});
​
/*=================================*/
/*=========== ROUTES ==============*/
/*=================================*/
​
App.Router.map(function () {
  this.resource('display', { path: '/' });
});
​
​
​
/*=================================*/
/*=========== MODELS ==============*/
/*=================================*/
​
​
​
​
​
/*=================================*/
/*======== CONTROLLERS ===========*/
/*=================================*/
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
doub1ejackpro
0viewers