Blame view
app/views/main.html
7.26 KB
|
87c93a029
|
1 |
<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> |
|
862daa8a4
|
2 3 4 |
<div class="row">
<header>
<div class="logo">
|
|
990a1e38d
|
5 6 |
<img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
MOBILE WORLD
|
|
862daa8a4
|
7 8 9 10 11 12 |
</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 |
<!-- STEP 2-->
<div class="step">
<div class="title">
2.アイテムカラーを変更する
</div>
<div class="step-box clearfix">
<div class="tshirt-color">
<ul class="choice-color clearfix">
|
|
422e7837d
|
55 56 57 |
<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>
|
|
862daa8a4
|
58 |
</ul> |
|
422e7837d
|
59 |
<div class="color-name" ng-bind="tShirtColorName"></div> |
|
862daa8a4
|
60 61 62 |
<div class="view-more">
在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
|
|
e7c9c7707
|
63 64 65 |
</div>
</div>
</div>
|
|
e7c9c7707
|
66 |
|
|
862daa8a4
|
67 68 69 70 |
<!-- BREAK DOWN-->
<div class="text-center break-down">
<img src="images/bg_step_arrow.gif" alt="arrow" />
</div>
|
|
e7c9c7707
|
71 |
|
|
862daa8a4
|
72 73 74 75 76 77 78 79 80 81 82 |
<!-- 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
|
83 |
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
|
862daa8a4
|
84 85 86 87 88 89 90 91 92 93 94 95 96 |
</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
|
97 |
</div> |
|
862daa8a4
|
98 99 |
<div class="notice">
デザインを保存するには、ログインしてください
|
|
e7c9c7707
|
100 101 |
</div>
</div>
|
|
e7c9c7707
|
102 |
</div> |
|
e7c9c7707
|
103 |
|
|
862daa8a4
|
104 105 106 107 |
<!-- BREAL LINE-->
<div class="text-center break-line">
<hr />
</div>
|
|
e7c9c7707
|
108 |
|
|
862daa8a4
|
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!-- 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
|
134 |
</div> |
|
862daa8a4
|
135 136 137 138 139 140 |
<!-- 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
|
141 |
</div> |
|
862daa8a4
|
142 |
|
|
e7c9c7707
|
143 144 |
</div>
</div>
|
|
862daa8a4
|
145 146 147 |
</aside>
<section id="tshirt-content" class="col-sm-7 text-center">
<div class="switch-border-design">
|
|
19a110aef
|
148 |
<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
|
862daa8a4
|
149 150 |
</div>
<div class="tshirt-image">
|
|
422e7837d
|
151 |
<img ng-src="{{ tShirtImg }}" alt="" />
|
|
4ae9cc634
|
152 |
<div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> |
|
80ff9bbd4
|
153 154 |
<img ng-src="{{outputImage}}" ng-show="outputImage"/>
</div>
|
|
862daa8a4
|
155 156 157 |
</div>
<div class="tshirt-choice">
<ul>
|
|
422e7837d
|
158 |
<li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
|
862daa8a4
|
159 |
<div>前</div> |
|
422e7837d
|
160 161 |
<div class="image" ng-click="choiceTShirtBackFront('front')">
<img ng-src="{{ tShirtImgFront }}" alt="" />
|
|
862daa8a4
|
162 163 164 |
</div>
</li>
|
|
422e7837d
|
165 |
<li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
|
862daa8a4
|
166 |
<div>後</div> |
|
422e7837d
|
167 168 |
<div class="image" ng-click="choiceTShirtBackFront('back')">
<img ng-src="{{ tShirtImgBack }}" alt="" />
|
|
862daa8a4
|
169 |
</div> |
|
e7c9c7707
|
170 |
|
|
862daa8a4
|
171 172 |
</li>
</ul>
|
|
e7c9c7707
|
173 |
</div> |
|
862daa8a4
|
174 |
</section> |
|
862daa8a4
|
175 |
</article> |
|
a56541cf9
|
176 177 178 179 180 181 182 183 184 |
<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
|
185 |
|
|
862daa8a4
|
186 |
<!--MODAL CONTENT--> |
|
c9d8b2fe3
|
187 |
<div ng-include="designFrameView"></div> |
|
862daa8a4
|
188 |
</div> |
|
87c93a029
|
189 |
|
|
87c93a029
|
190 |
|
|
8f087d204
|
191 |
</div> |