This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> | |
| <head runat="server"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> | |
| <title></title> | |
| <script type="text/javascript"> | |
| var app = angular.module('app', []); | |
| app.controller('GiftCtrl', function ($scope, $http) { | |
| $scope.giftList = [ | |
| { item: 'item1', gift: 'GIFT' }, { item: 'item2', gift: 'GIFT' }, | |
| { item: 'item3', gift: 'GIFT' }, { item: 'item4', gift: 'GIFT' }, | |
| { item: 'item5', gift: 'GIFT' }, { item: 'item6', gift: 'GIFT' }, | |
| { item: 'item7', gift: 'GIFT' }, { item: 'item8', gift: 'GIFT' } | |
| ]; | |
| $scope.giftList2 = [ | |
| { item: 'item1', gift: 'GIFT' }, { item: 'item2', gift: 'GIFT' }, | |
| { item: 'item3', gift: 'GIFT' }, { item: 'item4', gift: 'GIFT' }, | |
| { item: 'item5', gift: 'GIFT' }, { item: 'item6', gift: 'GIFT' }, | |
| { item: 'item7', gift: 'GIFT' }, { item: 'item8', gift: 'GIFT' } | |
| ]; | |
| }); | |
| $scope.whatColorIsIt = function (index) { | |
| if(index % 2 == 0) | |
| { | |
| return "azure"; | |
| } | |
| else { | |
| return "emerald"; | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| #container { text-align: center; margin: 20px; } | |
| h1{ | |
| color: #e50; | |
| text-shadow: 0 2px white; | |
| text-align: center; | |
| margin-top: 10px; | |
| /*color: white;*/ | |
| } | |
| a { text-decoration: none; color: #EC5C93; } | |
| .bar-main-container { | |
| margin: 10px auto; | |
| width: 500px; | |
| height: 80px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| font-family: sans-serif; | |
| font-weight: normal; | |
| font-size: 0.8em; | |
| color: #FFF; | |
| } | |
| .wrap { | |
| padding: 8px; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| .bar-percentage { | |
| float: left; | |
| background: rgba(0,0,0,0.13); | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| padding: 13px 14px 12px 10px; | |
| width: 20%; | |
| height: 30px; | |
| margin-top: 5px; | |
| /*margin-right: 10px;*/ | |
| } | |
| .bar-container { | |
| float: right; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| height: 10px; | |
| background: rgba(0,0,0,0.13); | |
| width: 78%; | |
| margin: 12px 0px; | |
| overflow: hidden; | |
| line-height: initial; | |
| } | |
| .itemFont{ | |
| margin-left:10px; | |
| font-size:20px; | |
| line-height: initial; | |
| } | |
| .giftFont { | |
| color:white; | |
| font-size:24px; | |
| line-height: initial; | |
| margin-left:10px; | |
| } | |
| .img { | |
| background-color:#EFC32F ; /*#026873*/ | |
| background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), | |
| linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), | |
| linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), | |
| linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); | |
| background-size: 13px, 29px, 37px, 53px; | |
| } | |
| .check { | |
| background-color: #9c9; /*E4B363*/ | |
| background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(255,255,255, .1)), color-stop(.5, rgba(255,255,255, .1)), color-stop(.5, rgba( 0, 0, 0, .1)), to(rgba( 0, 0, 0, .1))), -webkit-gradient( linear, left top, right top, from(rgba(255,255,255, .1)), color-stop(.5, rgba(255,255,255, .1)), color-stop(.5, rgba( 0, 0, 0, .1)), to(rgba( 0, 0, 0, .1))); | |
| background-image: -moz-linear-gradient( top, rgba(255,255,255, .1) 0, rgba(255,255,255, .1) 50%, rgba( 0, 0, 0, .1) 50%, rgba( 0, 0, 0, .1) 100%), -moz-linear-gradient( left, rgba(255,255,255, .1) 0, rgba(255,255,255, .1) 50%, rgba( 0, 0, 0, .1) 50%, rgba( 0, 0, 0, .1) 100%); | |
| background-size: 8px 8px; | |
| -webkit-background-size: 8px 8px; | |
| -moz-background-size: 8px 8px; | |
| } | |
| /* COLORS */ | |
| .azure { background: #38B1CC; } | |
| .emerald { background: #2CB299; } | |
| .violet { background: #8E5D9F; } | |
| .yellow { background: #EFC32F; } | |
| .red { background: #E44C41; } | |
| </style> | |
| </head> | |
| <body class="img"> | |
| <form id="form1" runat="server"> | |
| <div> | |
| <h1 >禮品清單</h1> | |
| </div> | |
| <div> | |
| <div class="well span7 check " style="margin-top:20px;" ng-controller="GiftCtrl"> | |
| <div ng-repeat="g in giftList" id="bar-2" class="bar-main-container" ng-class="{{$index}} % 2 == 0 ? 'azure' :'red'"> | |
| <div class="wrap"> | |
| <div class="bar-percentage" > | |
| <span class="itemFont">{{g.item}}</span> | |
| </div> | |
| <span class="giftFont">{{g.gift}}{{$index+1}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="well span7 check" style="margin-top:20px;" ng-controller="GiftCtrl"> | |
| <div ng-repeat="g2 in giftList2" id="bar-2" class="bar-main-container" ng-class="{{$index}} % 2 == 0 ? 'red' :'azure'"> | |
| <div class="wrap"> | |
| <div class="bar-percentage" > | |
| <span class="itemFont" >{{g2.item}}</span> | |
| </div> | |
| <span class="giftFont">{{g2.gift}}{{$index+1}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |
沒有留言:
張貼留言