TRUONG / T-Shats Frontend

Blame view

app/views/main.html 8.64 KB
edit raw normal view history
87c93a029   Dang YoungWorld   add modal 
1
 
  <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
862daa8a4   DANG   commit theme 
2
 
    <div class="row">
5c778530c   Dang YoungWorld   update theme 
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
      <header class="clearfix">
        <div class="col-sm-4 logo">
          <img src="images/logo.png" alt="Logo 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>
862daa8a4   DANG   commit theme 
57
58
59
60
61
62
 
        </div>
      </header>
      <nav class="clearfix">
        <div class="col-sm-12">
          <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
          <ul class="pull-right">
a56541cf9   DANG   add css 
63
64
 
            <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   DANG   commit theme 
65
66
67
68
 
            <li class="action">デザインする</li>
          </ul>
        </div>
      </nav>
a56541cf9   DANG   add css 
69
 
      <article class="clearfix">
862daa8a4   DANG   commit theme 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
          <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   DANG   Theme + add bower... 
88
89
90
 
                </div>
              </div>
            </div>
e7c9c7707   DANG   Commit theme 
91
 








862daa8a4
 
 DANG
 
commit theme




92
93
94




            <!--  BREAK DOWN-->
            <div class="text-center break-down">
              <img src="images/bg_step_arrow.gif" alt="arrow" />









e7c9c7707
 
 DANG
 
Commit theme




95




            </div>









862daa8a4
 
 DANG
 
commit theme




96
97
98
99
100
101
102
103
104




  
            <!-- 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
 
 DANG
 
Change color t-shirt




105
106
107




                    <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
 
 DANG
 
commit theme




108




                  </ul>









422e7837d
 
 DANG
 
Change color t-shirt




109




                  <div class="color-name" ng-bind="tShirtColorName"></div>









862daa8a4
 
 DANG
 
commit theme




110
111
112




                  <div class="view-more">
                    在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                  </div>









e7c9c7707
 
 DANG
 
Commit theme




113
114
115




                </div>
              </div>
            </div>









e7c9c7707
 
 DANG
 
Commit theme




116












862daa8a4
 
 DANG
 
commit theme




117
118
119
120




            <!--  BREAK DOWN-->
            <div class="text-center break-down">
              <img src="images/bg_step_arrow.gif" alt="arrow" />
            </div>









e7c9c7707
 
 DANG
 
Commit theme




121












862daa8a4
 
 DANG
 
commit theme




122
123
124
125
126
127
128
129
130
131
132




            <!-- 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
 
 DANG
 
Commit theme




133




                          <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>









862daa8a4
 
 DANG
 
commit theme




134
135
136
137
138
139
140
141
142
143
144
145
146




                        </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
 
 DANG
 
Commit theme




147




                  </div>









862daa8a4
 
 DANG
 
commit theme




148
149




                  <div class="notice">
                    デザインを保存するには、ログインしてください









e7c9c7707
 
 DANG
 
Commit theme




150
151




                  </div>
                </div>









e7c9c7707
 
 DANG
 
Commit theme




152




              </div>









e7c9c7707
 
 DANG
 
Commit theme




153












862daa8a4
 
 DANG
 
commit theme




154
155
156
157




              <!-- BREAL LINE-->
              <div class="text-center break-line">
                <hr />
              </div>









e7c9c7707
 
 DANG
 
Commit theme




158












862daa8a4
 
 DANG
 
commit theme




159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183




              <!-- 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
 
 DANG
 
Commit theme




184




              </div>









862daa8a4
 
 DANG
 
commit theme




185
186
187
188
189
190




              <!-- 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
 
 DANG
 
Commit theme




191




                </div>









862daa8a4
 
 DANG
 
commit theme




192












e7c9c7707
 
 DANG
 
Commit theme




193
194




              </div>
            </div>









862daa8a4
 
 DANG
 
commit theme




195
196
197




          </aside>
          <section id="tshirt-content" class="col-sm-7 text-center">
            <div class="switch-border-design">









19a110aef
 
 DANG
 
add css




198




              <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す









862daa8a4
 
 DANG
 
commit theme




199
200




            </div>
            <div class="tshirt-image">









422e7837d
 
 DANG
 
Change color t-shirt




201




              <img ng-src="{{ tShirtImg }}" alt="" />









4ae9cc634
 
 DANG
 
fix reponsive




202




              <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">









80ff9bbd4
 
 TRUONG
 
fix bugs and optimal




203
204




                <img ng-src="{{outputImage}}" ng-show="outputImage"/>
              </div>









862daa8a4
 
 DANG
 
commit theme




205
206
207




            </div>
            <div class="tshirt-choice">
              <ul>









422e7837d
 
 DANG
 
Change color t-shirt




208




                <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">









862daa8a4
 
 DANG
 
commit theme




209




                  <div>前</div>









422e7837d
 
 DANG
 
Change color t-shirt




210
211




                  <div class="image" ng-click="choiceTShirtBackFront('front')">
                    <img ng-src="{{ tShirtImgFront }}" alt="" />









862daa8a4
 
 DANG
 
commit theme




212
213
214




                  </div>
  
                </li>









422e7837d
 
 DANG
 
Change color t-shirt




215




                <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">









862daa8a4
 
 DANG
 
commit theme




216




                  <div>後</div>









422e7837d
 
 DANG
 
Change color t-shirt




217
218




                  <div class="image"  ng-click="choiceTShirtBackFront('back')">
                    <img ng-src="{{ tShirtImgBack }}" alt="" />









862daa8a4
 
 DANG
 
commit theme




219




                  </div>









e7c9c7707
 
 DANG
 
Commit theme




220












862daa8a4
 
 DANG
 
commit theme




221
222




                </li>
              </ul>









e7c9c7707
 
 DANG
 
Commit theme




223




            </div>









862daa8a4
 
 DANG
 
commit theme




224




          </section>









862daa8a4
 
 DANG
 
commit theme




225




      </article>









a56541cf9
 
 DANG
 
add css




226
227
228
229
230
231
232
233
234




      <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
 
 TRUONG
 
first commit: ini...




235












862daa8a4
 
 DANG
 
commit theme




236




      <!--MODAL CONTENT-->









c9d8b2fe3
 
 Truong LD
 
update version




237




      <div ng-include="designFrameView"></div>









862daa8a4
 
 DANG
 
commit theme




238




    </div>









87c93a029
 
 Dang YoungWorld
 
add modal




239












87c93a029
 
 Dang YoungWorld
 
add modal




240












8f087d204
 
 DANG
 
Theme + add bower...




241




  </div>