TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 334431aebad6750c345cdc9b20d93ed94e115c0f

Authored by Dang YoungWorld
1 parent 6ac3013ec2
Exists in master

update image

Showing 2 changed files with 4 additions and 4 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script> 44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
45 <!--[if lt IE 9]> 45 <!--[if lt IE 9]>
46 <script src="bower_components/es5-shim/es5-shim.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
47 <script src="bower_components/json3/lib/json3.min.js"></script> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
48 <![endif]--> 48 <![endif]-->
49 <script type="text/javascript"> 49 <script type="text/javascript">
50 var VERSION = '30-11_01'; 50 var VERSION = '30-11_02';
51 var require = { 51 var require = {
52 urlArgs: "ver="+VERSION, 52 urlArgs: "ver="+VERSION,
53 }; 53 };
54 </script> 54 </script>
55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
56 </body> 56 </body>
57 </html> 57 </html>
58 58
1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> 1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2 <div class="row"> 2 <div class="row">
3 <header class="clearfix"> 3 <header class="clearfix">
4 <div class="col-sm-4 logo"> 4 <div class="col-sm-4 logo">
5 <img src="images/logo.png" alt="Logo Mobile World" /> 5 <img src="images/logo.png" alt="Logo Mobile World" />
6 </div> 6 </div>
7 <div class="col-sm-2"> 7 <div class="col-sm-2">
8 <ul class="social-share clearfix"> 8 <ul class="social-share clearfix">
9 <li> 9 <li>
10 <a href="#"> 10 <a href="#">
11 <i class="fa fa-facebook"></i> 11 <i class="fa fa-facebook"></i>
12 </a> 12 </a>
13 </li> 13 </li>
14 <li> 14 <li>
15 <a href="#"> 15 <a href="#">
16 <i class="fa fa-twitter"></i> 16 <i class="fa fa-twitter"></i>
17 </a> 17 </a>
18 </li> 18 </li>
19 </ul> 19 </ul>
20 </div> 20 </div>
21 <div class="col-sm-6 clearfix" style="padding-right: 0"> 21 <div class="col-sm-6 clearfix" style="padding-right: 0">
22 <div class="pull-left"> 22 <div class="pull-left">
23 <ul class="top-menu clearfix"> 23 <ul class="top-menu clearfix">
24 <li> 24 <li>
25 <a href="#">はじめての方へ</a> 25 <a href="#">はじめての方へ</a>
26 </li> 26 </li>
27 <li> 27 <li>
28 <a href="#">料金表</a> 28 <a href="#">料金表</a>
29 </li> 29 </li>
30 <li> 30 <li>
31 <a href="#">新規会員登録</a> 31 <a href="#">新規会員登録</a>
32 </li> 32 </li>
33 </ul> 33 </ul>
34 <ul class="top-control clearfix"> 34 <ul class="top-control clearfix">
35 <li> 35 <li>
36 <div class="bt-yellow"> 36 <div class="bt-yellow">
37 <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成 37 <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成
38 </div> 38 </div>
39 </li> 39 </li>
40 <li> 40 <li>
41 <div class="bt-yellow"> 41 <div class="bt-yellow">
42 <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート 42 <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート
43 </div> 43 </div>
44 </li> 44 </li>
45 </ul> 45 </ul>
46 </div> 46 </div>
47 <div class="pull-right"> 47 <div class="pull-right">
48 <div class="user-control"> 48 <div class="user-control">
49 <div> 49 <div>
50 マイページ 50 マイページ
51 </div> 51 </div>
52 <div class="login"> 52 <div class="login">
53 <i class="fa fa-lock" aria-hidden="true"></i> ログイン 53 <i class="fa fa-lock" aria-hidden="true"></i> ログイン
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </header> 58 </header>
59 <nav class="clearfix"> 59 <nav class="clearfix">
60 <div class="col-sm-12"> 60 <div class="col-sm-12">
61 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> 61 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
62 <ul class="pull-right"> 62 <ul class="pull-right">
63 <li class="circle"><a href="#">商品に戻る</a></li> 63 <li class="circle"><a href="#">商品に戻る</a></li>
64 <li class="line"></li> 64 <li class="line"></li>
65 <li class="circle"><a href="#">加工方法に戻る</a></li> 65 <li class="circle"><a href="#">加工方法に戻る</a></li>
66 <li class="line line-action"></li> 66 <li class="line line-action"></li>
67 <li class="circle action"><a href="#">デザインする</a></li> 67 <li class="circle action"><a href="#">デザインする</a></li>
68 </ul> 68 </ul>
69 </div> 69 </div>
70 </nav> 70 </nav>
71 <div style="height: 29px; width: 100%; background: url('../images/linebg.png') repeat-x"> 71 <div style="height: 29px; width: 100%; background: url('images/linebg.png') repeat-x">
72 72
73 </div> 73 </div>
74 <article class="clearfix"> 74 <article class="clearfix">
75 <aside class="col-sm-5"> 75 <aside class="col-sm-5">
76 <div class="clearfix row" style="position: relative"> 76 <div class="clearfix row" style="position: relative">
77 <div class="step col-xs-6"> 77 <div class="step col-xs-6">
78 <div class="title clearfix"> 78 <div class="title clearfix">
79 <span><img src="../images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span> 79 <span><img src="images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span>
80 </div> 80 </div>
81 <div class="step-box"> 81 <div class="step-box">
82 <div class="tshirt-design clearfix"> 82 <div class="tshirt-design clearfix">
83 <div class="icon"> 83 <div class="icon">
84 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> 84 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
85 </div> 85 </div>
86 <div class="name"> 86 <div class="name">
87 背中背中 (28x22) 87 背中背中 (28x22)
88 </div> 88 </div>
89 <div class="action"> 89 <div class="action">
90 <button class="yellow2" ng-click="modalTShirtDesign()"> 90 <button class="yellow2" ng-click="modalTShirtDesign()">
91 デザインを作る 91 デザインを作る
92 </button> 92 </button>
93 </div> 93 </div>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 97
98 <!--&lt;!&ndash; BREAK DOWN&ndash;&gt;--> 98 <!--&lt;!&ndash; BREAK DOWN&ndash;&gt;-->
99 <div class="text-center break-left"> 99 <div class="text-center break-left">
100 <img src="images/arrow1.png" alt="arrow" /> 100 <img src="images/arrow1.png" alt="arrow" />
101 </div> 101 </div>
102 102
103 <!-- STEP 2--> 103 <!-- STEP 2-->
104 <div class="step col-xs-6"> 104 <div class="step col-xs-6">
105 <div class="title clearfix"> 105 <div class="title clearfix">
106 <span><img src="../images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span> 106 <span><img src="images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span>
107 </div> 107 </div>
108 <div class="step-box clearfix" style="min-height: 150px;"> 108 <div class="step-box clearfix" style="min-height: 150px;">
109 <div class="tshirt-color"> 109 <div class="tshirt-color">
110 <ul class="choice-color clearfix"> 110 <ul class="choice-color clearfix">
111 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> 111 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
112 <div ng-style="{'background-color' : color.code}"></div> 112 <div ng-style="{'background-color' : color.code}"></div>
113 </li> 113 </li>
114 </ul> 114 </ul>
115 </div> 115 </div>
116 <div class="choice-color-bottom"> 116 <div class="choice-color-bottom">
117 <div class="color-name" ng-bind="tShirtColorName"></div> 117 <div class="color-name" ng-bind="tShirtColorName"></div>
118 <div class="view-more"> 118 <div class="view-more">
119 在庫確認 119 在庫確認
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 125
126 126
127 <!-- BREAK DOWN--> 127 <!-- BREAK DOWN-->
128 <div class="text-center break-down"> 128 <div class="text-center break-down">
129 <img src="images/arrow2.png" alt="arrow" /> 129 <img src="images/arrow2.png" alt="arrow" />
130 </div> 130 </div>
131 131
132 <!-- STEP 3--> 132 <!-- STEP 3-->
133 <div class="step"> 133 <div class="step">
134 <div class="step-box clearfix"> 134 <div class="step-box clearfix">
135 <div class="tshirt-saveorder"> 135 <div class="tshirt-saveorder">
136 <div class="clearfix"> 136 <div class="clearfix">
137 <div class="action"> 137 <div class="action">
138 <button class="white"> 138 <button class="white">
139 このデザインを保存する 139 このデザインを保存する
140 </button> 140 </button>
141 </div> 141 </div>
142 <div class="action"> 142 <div class="action">
143 <button class="yellow1"> 143 <button class="yellow1">
144 このデザインで注文する 144 このデザインで注文する
145 </button> 145 </button>
146 </div> 146 </div>
147 </div> 147 </div>
148 148
149 </div> 149 </div>
150 </div> 150 </div>
151 151
152 <!-- BREAL LINE--> 152 <!-- BREAL LINE-->
153 <div class="text-center break-line"> 153 <div class="text-center break-line">
154 <hr /> 154 <hr />
155 </div> 155 </div>
156 156
157 <!-- STEP 4--> 157 <!-- STEP 4-->
158 <div class="step"> 158 <div class="step">
159 <div class="title-notice"> 159 <div class="title-notice">
160 <strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span> 160 <strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span>
161 </div> 161 </div>
162 <div class="step-box"> 162 <div class="step-box">
163 <div class="change-design"> 163 <div class="change-design">
164 <table> 164 <table>
165 <tr> 165 <tr>
166 <td class="text-center">商品</td> 166 <td class="text-center">商品</td>
167 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> 167 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
168 <td class="text-center"> 168 <td class="text-center">
169 <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button> 169 <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
170 </td> 170 </td>
171 </tr> 171 </tr>
172 <tr> 172 <tr>
173 <td width="10%" class="text-center">加工方法</td> 173 <td width="10%" class="text-center">加工方法</td>
174 <td width="70%">シルク：胸中央 (27×27)</td> 174 <td width="70%">シルク：胸中央 (27×27)</td>
175 <td width="20%" class="text-center"> 175 <td width="20%" class="text-center">
176 <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button> 176 <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
177 </td> 177 </td>
178 </tr> 178 </tr>
179 </table> 179 </table>
180 </div> 180 </div>
181 </div> 181 </div>
182 </div> 182 </div>
183 <!-- STEP 5- finish--> 183 <!-- STEP 5- finish-->
184 <div class="step"> 184 <div class="step">
185 <div class="finish-design"> 185 <div class="finish-design">
186 <button class="white"> 186 <button class="white">
187 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 187 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
188 </button> 188 </button>
189 </div> 189 </div>
190 190
191 </div> 191 </div>
192 </div> 192 </div>
193 </aside> 193 </aside>
194 <section id="tshirt-content" class="col-sm-7 text-center"> 194 <section id="tshirt-content" class="col-sm-7 text-center">
195 <div class="switch-border-design" ng-click="hideShowReviewDesign()"> 195 <div class="switch-border-design" ng-click="hideShowReviewDesign()">
196 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す 196 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
197 </div> 197 </div>
198 <div class="tshirt-image"> 198 <div class="tshirt-image">
199 <img ng-src="{{ tShirtImg }}" alt="" /> 199 <img ng-src="{{ tShirtImg }}" alt="" />
200 <div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()"> 200 <div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()">
201 <img ng-src="{{outputImage}}" ng-show="outputImage"/> 201 <img ng-src="{{outputImage}}" ng-show="outputImage"/>
202 </div> 202 </div>
203 </div> 203 </div>
204 <div class="tshirt-choice"> 204 <div class="tshirt-choice">
205 <ul> 205 <ul>
206 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 206 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
207 <div>前</div> 207 <div>前</div>
208 <div class="image" ng-click="choiceTShirtBackFront('front')"> 208 <div class="image" ng-click="choiceTShirtBackFront('front')">
209 <img ng-src="{{ tShirtImgFront }}" alt="" /> 209 <img ng-src="{{ tShirtImgFront }}" alt="" />
210 </div> 210 </div>
211 211
212 </li> 212 </li>
213 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 213 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
214 <div>後</div> 214 <div>後</div>
215 <div class="image" ng-click="choiceTShirtBackFront('back')"> 215 <div class="image" ng-click="choiceTShirtBackFront('back')">
216 <img ng-src="{{ tShirtImgBack }}" alt="" /> 216 <img ng-src="{{ tShirtImgBack }}" alt="" />
217 </div> 217 </div>
218 218
219 </li> 219 </li>
220 </ul> 220 </ul>
221 </div> 221 </div>
222 </section> 222 </section>
223 </article> 223 </article>
224 <footer class="clearfix"> 224 <footer class="clearfix">
225 <ul class="nav-footer"> 225 <ul class="nav-footer">
226 <li><a href="#">店舗検索</a></li> 226 <li><a href="#">店舗検索</a></li>
227 <li><a href="#">お客様窓口</a></li> 227 <li><a href="#">お客様窓口</a></li>
228 <li><a href="#">企業情報</a></li> 228 <li><a href="#">企業情報</a></li>
229 <li><a href="#">採用情報</a></li> 229 <li><a href="#">採用情報</a></li>
230 <li><a href="#">プライバシーポリシー</a></li> 230 <li><a href="#">プライバシーポリシー</a></li>
231 </ul> 231 </ul>
232 <div class="logo-bottom"> 232 <div class="logo-bottom">
233 <img src="../images/logobottom.png" alt="Logo" /> 233 <img src="../images/logobottom.png" alt="Logo" />
234 </div> 234 </div>
235 </footer> 235 </footer>
236 <div class="footer text-center"> 236 <div class="footer text-center">
237 Copyright &copy; CREVASSE - All Rights Reserved 237 Copyright &copy; CREVASSE - All Rights Reserved
238 </div> 238 </div>
239 239
240 <!--MODAL CONTENT--> 240 <!--MODAL CONTENT-->
241 <div ng-include="designFrameView"></div> 241 <div ng-include="designFrameView"></div>
242 </div> 242 </div>
243 243
244 244
245 </div> 245 </div>
246 246