Blame view
app/views/main.html
6.77 KB
87c93a029
|
1 |
<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> |
862daa8a4
|
2 3 4 5 6 7 8 9 10 11 12 |
<div class="row"> <header> <div class="logo"> <img src="images/uniqlo_logo.png" alt="Logo Uniqlo" /> Uniqlo Customize </div> </header> <nav class="clearfix"> <div class="col-sm-12"> <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> <ul class="pull-right"> |
a56541cf9
|
13 14 |
<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> |
862daa8a4
|
15 16 17 18 |
<li class="action">デザインする</li> </ul> </div> </nav> |
a56541cf9
|
19 |
<article class="clearfix"> |
862daa8a4
|
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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> |
8f087d204
|
38 39 40 |
</div> </div> </div> |
e7c9c7707
|
41 |
|
862daa8a4
|
42 43 44 |
<!-- BREAK DOWN--> <div class="text-center break-down"> <img src="images/bg_step_arrow.gif" alt="arrow" /> |
e7c9c7707
|
45 |
</div> |
862daa8a4
|
46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!-- 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 class="white"><div></div></li> <li class="blue"><div></div></li> </ul> <div class="color-name"> color: 00 WHITE </div> <div class="view-more"> 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> </div> |
e7c9c7707
|
64 65 66 |
</div> </div> </div> |
e7c9c7707
|
67 |
|
862daa8a4
|
68 69 70 71 |
<!-- BREAK DOWN--> <div class="text-center break-down"> <img src="images/bg_step_arrow.gif" alt="arrow" /> </div> |
e7c9c7707
|
72 |
|
862daa8a4
|
73 74 75 76 77 78 79 80 81 82 83 |
<!-- 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"> |
e7c9c7707
|
84 |
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
862daa8a4
|
85 86 87 88 89 90 91 92 93 94 95 96 97 |
</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> |
e7c9c7707
|
98 |
</div> |
862daa8a4
|
99 100 |
<div class="notice"> デザインを保存するには、ログインしてください |
e7c9c7707
|
101 102 |
</div> </div> |
e7c9c7707
|
103 |
</div> |
e7c9c7707
|
104 |
|
862daa8a4
|
105 106 107 108 |
<!-- BREAL LINE--> <div class="text-center break-line"> <hr /> </div> |
e7c9c7707
|
109 |
|
862daa8a4
|
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!-- 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> |
e7c9c7707
|
135 |
</div> |
862daa8a4
|
136 137 138 139 140 141 |
<!-- 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> |
e7c9c7707
|
142 |
</div> |
862daa8a4
|
143 |
|
e7c9c7707
|
144 145 |
</div> </div> |
862daa8a4
|
146 147 148 |
</aside> <section id="tshirt-content" class="col-sm-7 text-center"> <div class="switch-border-design"> |
19a110aef
|
149 |
<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
862daa8a4
|
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
</div> <div class="tshirt-image"> <img src="images/t-shirt/front.png" alt="" /> </div> <div class="tshirt-choice"> <ul> <li class="front focus"> <div>前</div> <div class="image"> <img src="images/t-shirt_icon/tshirt1-front.png" alt="" /> </div> </li> <li class="back"> <div>後</div> <div class="image"> <img src="images/t-shirt_icon/tshirt1-back.png" alt="" /> </div> |
e7c9c7707
|
168 |
|
862daa8a4
|
169 170 |
</li> </ul> |
e7c9c7707
|
171 |
</div> |
862daa8a4
|
172 |
</section> |
862daa8a4
|
173 |
</article> |
a56541cf9
|
174 175 176 177 178 179 180 181 182 |
<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> |
c87bc1f33
|
183 |
|
862daa8a4
|
184 185 186 |
<!--MODAL CONTENT--> <div ng-include="'views/tshirt-design.html'"></div> </div> |
87c93a029
|
187 |
|
87c93a029
|
188 |
|
8f087d204
|
189 |
</div> |