var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.symbols = {
"GovernmentPurchases": {
symbolName: "G_t",
image: "images/G_t.png",
symbol: "G<sub>t</sub>",
tex: "G_{t}",
useTex: "F"
},
"NominalInterestRate": {
symbolName: "i_t",
image: "images/interest_t.png",
symbol: "i<sub>t</sub>",
tex: "i_{t}",
useTex: "F"
},
"TaxRate": {
symbolName: "tau_t",
image: "images/tau_t.png",
symbol: "τ<sub>t</sub>",
tex: "\\tau_{t}",
useTex: "F"
},
};
$scope.rounds = [ 3, 2, 1];
$scope.decisionKeys = ["NominalInterestRate", "TaxRate", "GovernmentPurchases"];
$scope.decisionsMetadata = { "NominalInterestRate": { "isPercent": true, "show": true }, "TaxRate": { "isPercent": true, "show": true }, "GovernmentPurchases": { "isPercent": false, "show": true } }
$scope.playerDecisionMetadata = {
"NominalInterestRate": {
"label": "Interest rate",
"role": "MonetaryPolicyMaker",
"help": "Set value greater than or equal to -1 percent and less than 909.96 percent.",
"isPercent": true,
"show": true
},
"TaxRate": {
"label": "Tax rate",
"role": "FiscalPolicyMaker",
"help": "Set value greater than or equal to 0 and less than 100 percent.",
"isPercent": true,
"show": true
},
"GovernmentPurchases": {
"label": "Government purchases",
"role": "FiscalPolicyMaker",
"help": "Set value to greater than 0 and less than 21941.899559905632.",
"isPercent": false,
"show": false
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.29/angular.js" data-semver="1.2.29"></script>
<script data-require="angular-bootstrap@0.12.0" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<!--<p>Hello {{name}}!</p>-->
<div class="panel">
<div class="container">
<div class="content-panel-white col-md-8" style="white-space: nowrap;">
<div class="content-panel-inner">
<div class="table-responsive table-space">
<table fixed-first-column class="table table-bordered">
<thead>
<tr class="active">
<th class="label-text table-first-column-fixed-width">Policy Maker Decisions</th>
<th ng-repeat="t in rounds">Rnd {{t}}</th>
</tr>
</thead>
<tbody>
<tr ng-show="decisionsMetadata[key].show" ng-repeat="key in decisionKeys">
<td class="label-text">{{playerDecisionMetadata[key].label}}
<img class="image-symbol" src="{{symbols[key].image}}" alt="{{symbols[key].symbolName}}"></td>
<td ng-repeat="t in rounds">Result {{t}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #333333;
padding-top: 50px;
}
h1 {
font-size: 24px;
margin-top: 0;
margin-bottom: 20px !important;
}
h1 .dark {
color: #666666;
}
h1 .lite {
color: #FFFFFF;
}
.content-home {
font-size: 16px;
}
.tab-pane h1 {
color: #002C77;
font-size: 24px;
margin-top: 30px;
margin-bottom: 20px !important;
}
.currency {
color: #008000;
font-weight: bold;
}
.demo-box {
width: 180px;
padding: 12px;
color: #ffffff;
}
/* --- colors --- */
.btn-control {
color: #FFFFFF;
background-color: #FF5A09;
}
.btn-control-selected, .btn-control:hover {
color: #FFFFFF;
background-color: #F3843E;
}
/* --- nav --- */
.navbar-default {
background-color: #F8F8F8;
height: 50px;
border: none;
}
.navbar-brand {
padding: 5px 20px 0 20px;
color: #333333 !important;
font-weight: bold;
}
.user-icon {
font-size: 32px;
color: #293E6A;
margin-top: 6px;
}
.user-info {
padding: 8px 30px 0 8px;
}
.user-name {
font-weight: bold;
}
.user-title {
margin-top: -3px;
font-size: 13px;
color: #3B5998;
}
.user-title span {
margin-top: -4px;
color: #FFFFFF;
font-size: 12px;
background-color: #3B5998;
padding: 2px 6px;
margin-left: 3px;
border-radius: 2px;
}
.btn-menu {
background-color: transparent;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-nav > li > a {
padding-bottom: 10px !important;
padding-top: 14px !important;
}
.img-wharton-logo {
padding-top: 1px;
}
.top-nav-divider {
margin: 8px 14px 0 0;
font-size: 24px;
border-left: 1px solid #CCCCCC;
}
.top-nav-game-name {
font-size: 28px;
margin-top: 5px;
}
.top-header-sub {
color: #FFFFFF;
font-size: 38px;
margin-top:-24px;
}
.top-header-sub-sub {
color: #FFFFFF;
font-size: 26px;
}
.fixed-header {
width: 100%;
height: auto;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
/* --- content --- */
.content-panel {
width: 100%;
}
.content-panel-inner {
padding: 30px 0 30px 0;
}
.content-panel-blue-dark {
color: #FFFFFF;
background-color: #293E6A;
}
.content-panel-arrow {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top-width: 30px;
border-top-style: solid;
}
.content-panel-arrow-blue-dark {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #293E6A;
}
.content-panel-blue-medium {
color: #FFFFFF;
background-color: #3B5998;
}
.content-panel-arrow-blue-medium {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #3B5998;
}
.content-panel-blue-lite {
color: #FFFFFF;
background-color: #639BF1;
}
.content-panel-arrow-blue-lite {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #639BF1;
}
.content-panel-green {
color: #FFFFFF;
background-color: #77BA9B;
}
.content-panel-arrow-green {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #77BA9B;
}
.content-panel-tan {
color: #FFFFFF;
background-color: #B6A754;
}
.content-panel-arrow-tan {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #B6A754;
}
.content-panel-white {
color: #333333;
background-color: #FFFFFF;
}
.content-panel-arrow-white {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #FFFFFF;
}
.content-panel-gray {
color: #333333;
background-color: #EEEEEE;
}
.content-panel-arrow-gray {
margin: 0px auto;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #EEEEEE;
}
.btn-blue-medium {
color: #FFFFFF;
background-color: #3B5998;
}
.btn-orange {
color: #FFFFFF;
background-color: #FF5A09;
}
.btn-orange-selected, .btn-orange:hover {
color: #FFFFFF;
background-color: #F3843E;
}
.primary-color {
color: #3B5998;
}
.secondary-color {
color: #393939;
}
.plain-color {
color: #FFFFFF;
}
.alternate-color {
color: #E4E4E7;
}
.primary-color-container {
color: #FFFFFF;
background-color: #3B5998;
}
.secondary-color-container {
color: #FFFFFF;
background-color: #393939;
}
.plain-color-container {
color: #333333;
background-color: #FFFFFF;
}
.alternate-color-container {
color: #333333;
background-color: #E4E4E7;
}
.white-text {
color: #FFFFFF;
}
label {
font-weight: normal;
}
.label {
padding: 0.3em 0.6em 0.3em;
}
@media screen and (max-width: 768px) {
.img-home {
margin-bottom: 20px;
}
}
@media screen and (max-width: 1199px) {
.panel-responsive-display {
display: block;
}
}
@media screen and (min-width: 1200px) {
.panel-responsive-display {
display: inline-block;
}
}
/* --- game page --- */
.game-status-label-sm {
font-size: 14px;
text-align: center;
color: #666666;
}
.game-status-label {
font-size: 16px;
text-align: center;
color: #666666;
}
.game-status-header {
font-size: 18px;
text-align: center;
color: #666666;
}
.game-status-value {
font-size: 24px;
text-align: center;
color: #3b5998;
margin-top: 10px;
}
.game-status-notification {
font-size: 18px;
text-align: center;
color: #d9534f;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
display:block;
}
.game-form-hide-label {
display: none;
}
.panel-game-status {
margin-bottom: 0 !important;
}
#game-form .form-group {
margin-bottom: 0 !important;
}
.game-chart {
width: 100%;
height: 200px;
}
@media screen and (max-width: 768px) {
#chart1 {
margin-bottom: 20px;
}
}
.btn-game-submit {
margin-top: 12px;
}
.table-responsive {
/*min-height: .01%;*/
overflow-x: auto;
}
.table-responsive > .first-column-fixed {
position: absolute;
display: inline-block;
width: 200px;
background-color: #FFFFFF;
}
.table-first-column-fixed-width {
min-width: 230px;
width: 230px;
}
.table > thead > tr > th.merged-cell-left, .table > tbody > tr > td.merged-cell-left {
border-right-width: 0;
}
.table > thead > tr > th.merged-cell-right, .table > tbody > tr > td.merged-cell-right {
border-left-width: 0;
}
.table-centered > thead > tr > th, .table-centered > tbody > tr > td {
text-align: center;
}
div.clear {
clear: both;
}
.auto-width {
width: auto;
}
td,
th {
text-align: right;
}
td.label-text,
th.label-text {
text-align: left;
white-space: nowrap;
background-color: #F5F5F5;
}
.table {
margin-bottom: 0 !important;
}
.table-space {
margin-top: 20px !important;
}
/* --- feature box --- */
.feature-box {
background-color: #EEEEEE;
text-align: left;
padding: 20px 20px 20px 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.feature-box-header {
color: #002C77;
font-size: 22px;
font-weight: bold;
}
.feature-box-arrow {
margin-left: 12px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #EEEEEE;
margin-bottom: 12px;
}
/* --- slider menu --- */
.btn-menu {
font-size: 22px;
background-color: transparent;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 1250; /* 15;*/
width: 100%;
height: 100%;
/* background: rgba(0, 0, 0, 0.8); */
background: rgba(0, 0, 0, 0.3);
}
nav.menu {
position: fixed;
z-index: 1400; /*20;*/
background-color: #F8F8F8; /*#67b5d1;*/
overflow: hidden;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.menu-header {
padding: 12px;
font-weight: bold;
font-size: 16px;
margin-bottom: 8px;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.menu ul li {
margin-bottom: 1px;
}
nav.menu a {
color: #333333;
font-size: 14px;
background-color: #DDDDDD;
display: block;
padding: 12px;
border-right: 4px solid #CCCCCC;
text-decoration: none;
}
nav.menu a:hover {
color: #333333;
font-size: 14px;
background-color: #CCCCCC;
display: block;
padding: 12px;
border-right: 4px solid #002C77;
text-decoration: none;
}
.menu-close {
font-weight: bold;
color: #9F1F2A;
}
.menu-close i {
font-weight: normal !important;
}
.menu-logo {
text-align: center;
margin-top: 20px;
}
nav.slide-menu-right {
top: 0;
width: 200px;
height: 100%;
}
nav.slide-menu-right {
right: -200px
}
body.smr-open nav.slide-menu-right {
right: 0
}
/* --- footer --- */
.footer {
padding: 20px 0;
color: #333333;
background-color: #DDDDDD;
border-top: 4px solid #CCCCCC;
}
/* -- form -- */
form .ng-invalid.ng-dirty {
background-color: lightpink;
}
/* -- icon styling -- */
.login-icon {
font-size: 36px;
}
.menu-icon {
font-size: 36px;
}
/* -- popover -- */
.popover-content {
padding: 9px 14px;
color: black;
}
/* --- gameboard page --- */
.gameboard-status-header {
font-size: 18px;
text-align: center;
color: #666666;
}
.gameboard-status-value {
font-size: 24px;
text-align: center;
color: #3B5998;
margin-top: 10px;
}
.gameboard-header-label {
font-size: 16px;
color: #FFFFFF;
}
.header-blue {
font-size: 20px;
color:#293E6A
}
span.gameboard-circle {
display: block;
height: 75px;
width: 75px;
line-height: 75px;
border-radius: 50%;
background-color: #FF5A09;
color: white;
text-align: center;
font-size: 14px;
}
span.play-circle {
display: block;
height: 75px;
width: 75px;
line-height: 75px;
border-radius: 50%;
margin: 0 auto;
background-color: #FF5A09;
color: white;
text-align: center;
font-size: 14px;
}
.chevron-spacing-right {
margin-right: 50px;
}
.top-spacing-small {
margin-top: 10px;
}
.bottom-spacing-small {
margin-bottom: 10px;
}
.bottom-spacing-med {
margin-bottom: 20px;
}
.bottom-spacing-large {
margin-bottom: 50px;
}
.label-vertical-align {
line-height: 30px;
}
.img-left {
margin-right: 16px;
}
.img-button {
border: 1px solid #AAAAAA;
border-radius: 4px;
padding: 2px 2px 2px 2px;
cursor: pointer;
}
.img-button-disabled {
cursor: default;
opacity: 0.5;
}
.panel-heading-label {
font-size: 20px;
font-weight: bold;
}
/* --- statusbar --- */
.statusbar a {
padding: 14px 16px;
margin-right: 5px;
background: #EFEFEF;
color: #333333;
font-size: 16px;
font-weight: bold;
position: relative;
display: inline-block;
text-decoration: none;
}
.statusbar a:before {
width: 0;
height: 0;
border-top: 25px inset transparent;
border-bottom: 25px inset transparent;
border-left: 25px solid #3B5998;
position: absolute;
content: "";
top: 0;
left: 0;
}
.statusbar a:after {
width: 0;
height: 0;
border-top: 25px inset transparent;
border-bottom: 25px inset transparent;
border-left: 25px solid #EFEFEF;
position: absolute;
content: "";
top: 0;
right: -25px;
z-index: 2;
}
.statusbar a:first-child:before,
.statusbar a:last-child:after {
border: none;
}
.statusbar a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.statusbar a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.statusbar .status-text {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.statusbar a:first-child .status-text {
margin-left: 0;
}
.statusbar .done {
background: #FF5A09;
color: #FFFFFF;
}
.statusbar .done:after {
border-left-color: #FF5A09;
}
.statusbar .current {
background: #FF5A09;
color: #FFFFFF;
}
.statusbar .current:after {
border-left-color: #FF5A09;
}
.status-icon-ok {
float: left;
width: 2.0em !important;
color: green;
text-align: center;
margin-right: 4px;
}
.status-icon-no {
float: left;
width: 2.0em !important;
color: red;
text-align: center;
margin-right: 4px;
}
.help-icon-black {
color: #333333;
font-size: 14px;
}
.help-icon-white {
color: #FFFFFF;
font-size: 20px;
}
.table-outside-border {border:3px solid #fff;}
.table-outside-border tr {border-top:3px solid #fff;}
.table-outside-border tr + tr {border: none;}
.table-outside-border td {border-left:3px solid #fff; padding: 6px;}
.table-outside-border td + td {border: none;}
.gameboard-panel-body {
padding: 5px 25px 10px 25px;
}
.status-message {
color: white;
padding: 10px 0 10px 10px;
}
.image-symbol {
float: right;
margin-top: 0;
}
.html-symbol-float-right {
font-style: italic;
float: right;
}
.html-symbol {
font-style: italic;
}
.modal-content {
width: 750px;
margin-left: -75px;
}
@media (min-width: 768px) {
.form-horizontal .setting-label {
padding-top: 7px;
margin-bottom: 0;
text-align: left;
}
}
.panel-heading-buttons {
float:right;
margin-top:-2px;
}
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
.styled-chart {
min-width: 700px;
max-width: 850px;
/*height: 250px;*/
margin: 0 auto
}
.csv-panel {
width: 700px;
margin-top: 10px;
}
.csv-pane {
width: 620px;
font-size: 10px;
}
.embedded-table {
color: black;
}
.condensed-text {
font-size: 13px;
}
/* angular-bootstrap says to add this */
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }