TRUONG / T-Shats Frontend

Browse Code »

Commit 5c778530c5dd1a3c8a1f58ac054b257ebc4d825f

Authored by Dang YoungWorld 2016-11-29 19:57:22 +0900

1 parent afc65cdc72

Exists in master and in 1 other branch

update theme

Showing 3 changed files with 107 additions and 9 deletions Inline Diff

app/images/logo.png
app/styles/main.css
app/views/main.html

app/images/logo.png

Diff comments View file @ 5c77853

20.1 KB

app/styles/main.css

Diff comments View file @ 5c77853

 /* Space out content a bit */
 @import "../fonts/font.css";
 @import "../fonts/font_canvas/font-canvas.css";
 @import "placedesign.css";
 html{
   height:100%;
   width:100%;
 }
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   height:100%;
   width:100%;
 }
 /*Scroll bar style*/
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
 }
 /*End scroll bar style*/
 .padding-right-0{
   padding-right: 0!important;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.white{
   border: 1px solid #ff8080;
   color: #ff8080;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
-  color: #ed1d24;
+  padding-left: 0!important;
-  font-size: 30px;
-  text-transform: uppercase;
-  font-weight: bold;
 }
 header .logo img{
-  width: 60px;
+  height: 60px;
+}
+header .social-share{
+  list-style: none;
+  background-color: #eeeeee;
+  display: table;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+header .social-share li{
+  float: left;
+  margin: 15px 15px;
+  background-color: #c5c5c5;
+  width: 30px;
+  height: 30px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  text-align: center;
+  padding: 6px 0;
+}
+header .social-share li i{
+  font-size: 20px;
+  color: #ffffff;
+}
+header .top-menu{
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 3px;
+}
+header .top-menu li{
+  float: left;
+  padding: 6px 10px;
+}
+header .top-control{
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+header .top-control li{
+  float: left;
+  margin: 0 10px;
+}
+header .top-control li .bt-yellow{
+  background-color: #fe6a00;
+  color: #ffffff;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+header .user-control{
+  background-color: #888888;
+  text-align: center;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 10px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 0 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
   position: relative;
 }
 nav ul li i.fa{
   position: absolute;
   color: #ffffff;
   font-size: 18px;
   right: -4px;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 3px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   border: 1px solid #cccccc;
   background-color: #f5f5f5;
   margin: 10px 10px;
 }
 aside .step .step-box .tshirt-design:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   float: left;
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   border-right: 1px solid #cccccc;
 }
 aside .step .step-box .tshirt-design .icon img{
   height: 50px;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 10px 10px;
 }
 aside .step .step-box .tshirt-design .action{
   padding: 10px 10px;
   float: right;
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 8px 10px;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 10px;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 8px 4px 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 30px;
   width: 30px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .tshirt-color .color-name{
   width: 100%;
   font-size: 10px;
 }
 aside .step .step-box .tshirt-color .view-more{
   position: absolute;
   bottom: 6px;
   right: 10px;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 6px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 8px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action button .text{
   float: left;
   width: 80%;
   text-align: center;
   padding-left: 10px;
   vertical-align: bottom;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow{
   float: left;
   width: 20%;
   height: 40px;
   position: relative;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
   position: absolute;
   top: 50%;
   right: -6px;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .step .step-box .tshirt-saveorder .notice{
   padding: 5px 0 0 0;
 }
 /*Step 4*/
 aside .step .title-notice{
 }
 aside .step .step-box .change-design{
   padding: 4px 4px;
 }
 aside .step .step-box .change-design table{
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
   position: relative;
   height: 100%;
   width: 100%;
 }
 #tshirt-content .tshirt-image img{
   width: 100%;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
   cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
 #tshirt-content .tshirt-choice ul li .image img{
   width: 50px;
   height: auto;
 }
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
 }
 #tshirt-design .modal-dialog{
   /*width: 800px!important;*/
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: red;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fe070f;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside .box-design-option{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
   margin-bottom: 10px;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside .box-design-option li:hover .hover{
   display: block;
 }
 .aside .box-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside .box-design-option li .title i.fa{
   color: #000000;
 }
 .aside .box-design-option li .content{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
   color: #fe070f;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside .box-design-option li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 65px;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item{
   height: 20px;
   float: left;
   margin-left: 4px;
   margin-top: 2px;
   width: 20px;
   cursor: pointer;
   border: 1px solid #ddd;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 .aside .box-design-option li .title .reset-color-patterns {
   cursor: pointer;
 }
 .aside .box-design-option li .title .reset-color-patterns:hover {
   opacity: 0.6;
 }
 .aside .box-design-option li .content .layer-item {
   text-align: center;
   border: 1px #ddd solid;
   background: #FFF;
   padding: 5px;
   font-size: 12px;
   cursor: pointer;
 }
 .aside .box-design-option li .content .layer-item:hover {
   background: #ffcccc;
 }
 /*Design Text*/
 .aside #choice-text{
 }
 .aside #choice-text .content{
   padding: 10px 10px;
 }
 .aside #choice-text .content ul.font-family-box{
   list-style: none;
   margin: 10px 0;
   padding-left: 0;
   height: 180px;
   width: 100%;
   overflow-y: scroll;
   border: 1px solid #c0c0c0;
 }
 .aside #choice-text .content .font-family-box li{
   cursor: pointer;
   padding: 4px 8px;
   border: 0;
   border-bottom: 1px solid #c0c0c0;
   border-right: 1px solid #c0c0c0;
   font-size: 16px;
   margin-bottom: 0;
 }
 .aside #choice-text .content .font-family-box li.active{
   border: 1px solid #fe070f;
 }
 .aside #choice-text .content .spacing-letter{
 }
 .aside #choice-text .content .spacing-letter .text-label{
   font-size: 16px;
   padding: 4px 0;
 }
 .aside #choice-text .content .spacing-letter .box{
   border: 1px solid #8c8c8c;
   box-shadow: 0 0 5px #888888;
   background-color: #f0f0f0;
 }
 .aside #choice-text .content .spacing-letter .item{
   float: left;
 }
 .aside #choice-text .content .spacing-letter .item:hover{
   background-color: #fddad4;
 }
 .aside #choice-text .content .spacing-letter .item i.fa{
   font-size: 22px;
   margin: 0 0;
   color: #000000;
 }
 .aside #choice-text .content .spacing-letter .item-text{
   padding: 6px 20px;
   font-size: 13px;
 }
 .aside #choice-text .content .spacing-letter .item-plus{
   border-right: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-minus{
   border-left: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
   padding: 5px 6px 1px 6px;
   cursor: pointer;
 }
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 310px;
   padding-bottom: 20px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
   width: 50px;
   cursor: pointer;
 }
 .illustration-list .footer-bar, .saved-list .footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
     position: absolute;
     width: 100%;
     padding-right: 20px;
 }
 .footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
   color: #FFF;
   background: #666666;
   text-transform: uppercase;
   padding: 2px 5px;
 }
 .footer-bar .footer-pagination:hover {
   background: #999999;
 }
 .tooltip-arrow,
 .red-tooltip + .tooltip > .tooltip-inner {
   background-color: #FFF;
   margin:0;
   padding:0;
 }
 /* Insert image*/
 #btn-choose-image {
   background: #ff0f00;
   cursor: pointer;
   margin: 10px 0px;
   padding: 0 10px;
   color: #FFF;
   font-size: 12px;
 }
 #btn-choose-image:hover {
   background: #f8aeae;
 }
 .aside #choice-image li .content {
   margin: 0 10px;
   padding: 10px 0;
 }
 .aside #choice-image li .content .small-text {
   font-size:10px;
   margin-bottom: 10px;
 }
 .aside #choice-image {
   font-size: 13px;
 }
 .aside #imgLoader{
   display: none;
 }
 .aside #choice-image li .content .list-images {
   height: 300px;
   background: #FFF;
   border: 1px solid #DDD;
 }
 .aside #choice-image li .content .list-images .recent-img{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-image li .content .list-images .recent-img:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-image li .content .list-images .recent-img img {
   width: 50px;
   cursor: pointer;
 }
 /*Design content*/
 .tshirt-design-container{
 }
 .tshirt-design-container .design-content{
   padding: 10px 0;
   /*min-height: 580px;*/
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   height: 100%;
   min-height: 600px;
   position: relative;
   padding: 40px 40px;
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
   cursor: pointer;
 }
 .tshirt-design-container .agree-design:hover{
   opacity: 0.8;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 .tshirt-design-container .trash-design:hover{
   opacity: 0.5;
 }
 .object-border{
   position: absolute;
   background-color: rgb(0, 108, 255);
   border: 0;
   display:none;
   transform-origin: 0% 0%;
 }
 #object-border-top, #object-border-bottom{
   height: 2px;
 }
 #object-border-right, #object-border-left{
   width: 2px;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
 }
 @media (min-width: 1024px) {
   #tshirt-design .modal-dialog{
     min-width: 1000px;
     width: 1000px;
   }
 }
 @media (max-width: 762px) {
   .modal-dialog{
     margin: 0 0!important;
   }
   #tshirt-design header .menu-nav{
     overflow-x: scroll!important;
     -webkit-overflow-scrolling: touch;
   }
   #tshirt-design header ul.nav {
     text-align: justify;
     width: 680px;
   }
   #tshirt-design header ul.nav li {
     display: inline-block; /* 6 */
   }
   .tshirt-design-container .design-content .content{
     padding: 14px 14px;
   }
   .tshirt-design-container .design-content{
     padding: 0 0;
   }
 }
 #tshirt-design-saved .subframe-design {
   width: 80%;
   margin: auto;
   margin-top: 100px;
   border: 10px solid rgb(0, 0, 0);
   border: 20px solid rgba(0, 0, 0, .5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   background: #FFF;
 }
 #tshirt-design-saved .modal-content button.close {
   margin-right: 103px;
   font-size: 41px;
   margin-top: -8px;
 }
 #tshirt-design-saved .subframe-design .nav-tabs {
   background: rgba(0, 0, 0, .5);
   border-bottom: 1px solid #F5F5F5;
 }
 #tshirt-design-saved .subframe-design .nav-tabs li a {
   text-decoration: none;
   background-color: #CCC;
   cursor: pointer;
   margin-right: 10px;
   padding: 2px 30px;
   color: #000;
   font-weight: 600;
   border-bottom: 1px solid #F5F5F5
 }
 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
   background: #F5F5F5;
   color: #fe070f;
 }
 #tshirt-design-saved .subframe-design .tab-content {
   background: #F5F5F5;
     width: 100%;
     min-height: 400px;
 }
 #tshirt-design-saved .saved-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 0px;
   min-height: 400px;
   padding: 10px;
 }
 #tshirt-design-saved .saved-list .saved-item{
   width: 100px;
   height: 100px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item:hover {
   outline: 2px solid #ed1d24;
 }
 #tshirt-design-saved .saved-list .saved-item img {
   width: 100px;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item button {
   background: #ff0f00;
   color: #FFF;
   border: 0;
   position: absolute;
   margin-left: -5px;
   margin-top: -5px;
   padding: 0 5px;
 }
 #tshirt-design-saved .saved-list .saved-item button:hover {
   background: #ffcccc;
 }
 #tshirt-design-saved .saved-list .footer-bar {

app/views/main.html

Diff comments View file @ 5c77853

 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
   <div class="row">
-    <header>
+    <header class="clearfix">
-      <div class="logo">
+      <div class="col-sm-4 logo">
-        <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
+        <img src="images/logo.png" alt="Logo Mobile World" />
-        MOBILE WORLD
+      </div>
+      <div class="col-sm-2">
+        <ul class="social-share clearfix">
+          <li>
+            <a href="#">
+              <i class="fa fa-facebook"></i>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fa fa-twitter"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-sm-6 clearfix" style="padding-right: 0">
+        <div class="pull-left">
+          <ul class="top-menu clearfix">
+            <li>
+              <a href="#">ABC</a>
+            </li>
+            <li>
+              <a href="#">ABC</a>
+            </li>
+            <li>
+              <a href="#">ABC</a>
+            </li>
+          </ul>
+          <ul class="top-control clearfix">
+            <li>
+              <div class="bt-yellow">
+                <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN に戻る
+              </div>
+            </li>
+            <li>
+              <div class="bt-yellow">
+                <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加工方法に戻る
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="pull-right">
+          <div class="user-control">
+            <div>
+              方法に戻る
+            </div>
+            <div>
+              <i class="fa fa-lock" aria-hidden="true"></i> に戻る
+            </div>
+          </div>
+        </div>
       </div>
     </header>
     <nav class="clearfix">
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
           <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li class="action">デザインする</li>
         </ul>
       </div>
     </nav>
     <article class="clearfix">
         <aside class="col-sm-5">
           <div class="step">
             <div class="title">
               1. デザインを作る
             </div>
             <div class="step-box">
               <div class="tshirt-design clearfix">
                 <div class="icon">
                   <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
                 </div>
                 <div class="name">
                   背中背中 (28x22)
                 </div>
                 <div class="action">
                   <button class="red" ng-click="modalTShirtDesign()">
                     <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
                   </button>
                 </div>
               </div>
             </div>
           </div>
           <!--  BREAK DOWN-->
           <div class="text-center break-down">
             <img src="images/bg_step_arrow.gif" alt="arrow" />
           </div>
           <!-- STEP 2-->
           <div class="step">
             <div class="title">
               2.アイテムカラーを変更する
             </div>
             <div class="step-box clearfix">
               <div class="tshirt-color">
                 <ul class="choice-color clearfix">
                   <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
                     <div ng-style="{'background-color' : color.code}"></div>
                   </li>
                 </ul>
                 <div class="color-name" ng-bind="tShirtColorName"></div>
                 <div class="view-more">
                   在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                 </div>
               </div>
             </div>
           </div>
           <!--  BREAK DOWN-->
           <div class="text-center break-down">
             <img src="images/bg_step_arrow.gif" alt="arrow" />
           </div>
           <!-- STEP 3-->
           <div class="step">
             <div class="step-box clearfix">
               <div class="tshirt-saveorder">
                 <div class="clearfix">
                   <div class="action">
                     <button class="white">
                       <div class="text">
                         このデザインを保存する
                       </div>
                       <div class="arrow">
                         <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                       </div>
                     </button>
                   </div>
                   <div class="action">
                     <button class="red">
                       <div class="text">
                         このデザインで注文する
                       </div>
                       <div class="arrow clearfix">
                         <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                       </div>
                     </button>
                   </div>
                 </div>
                 <div class="notice">
                   デザインを保存するには、ログインしてください
                 </div>
               </div>
             </div>
             <!-- BREAL LINE-->
             <div class="text-center break-line">
               <hr />
             </div>
             <!-- STEP 4-->
             <div class="step">
               <div class="title-notice">
                 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
               </div>
               <div class="step-box">
                 <div class="change-design">
                   <table>
                     <tr>
                       <td class="text-center">商品</td>
                       <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
                       <td class="text-right">
                         <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                     <tr>
                       <td width="10%" class="text-center">加工方法</td>
                       <td width="70%">シルク：胸中央 (27×27)</td>
                       <td width="20%" class="text-right">
                         <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                   </table>
                 </div>
               </div>
             </div>
             <!-- STEP 5- finish-->
             <div class="step">
               <div class="finish-design">
                 <button class="white">
                   自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </aside>
         <section id="tshirt-content" class="col-sm-7 text-center">
           <div class="switch-border-design">
             <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
           </div>
           <div class="tshirt-image">
             <img ng-src="{{ tShirtImg }}" alt="" />
             <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
               <img ng-src="{{outputImage}}" ng-show="outputImage"/>
             </div>
           </div>
           <div class="tshirt-choice">
             <ul>
               <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                 <div>前</div>
                 <div class="image" ng-click="choiceTShirtBackFront('front')">
                   <img ng-src="{{ tShirtImgFront }}" alt="" />
                 </div>
               </li>
               <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                 <div>後</div>
                 <div class="image"  ng-click="choiceTShirtBackFront('back')">
                   <img ng-src="{{ tShirtImgBack }}" alt="" />
                 </div>
               </li>
             </ul>
           </div>
         </section>
     </article>
     <footer class="clearfix">
       <ul class="nav-footer">
         <li><a href="#">店舗検索</a></li>
         <li><a href="#">お客様窓口</a></li>
         <li><a href="#">企業情報</a></li>
         <li><a href="#">採用情報</a></li>
         <li><a href="#">プライバシーポリシー</a></li>
       </ul>
     </footer>
     <!--MODAL CONTENT-->
     <div ng-include="designFrameView"></div>
   </div>
 </div>