TRUONG / T-Shats Frontend

Blame view

app/views/main.html 9.05 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
 
      <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>
c55955c06   DANG   new menu 
25
 
                <a href="#">はじめての方へ</a>
5c778530c   Dang YoungWorld   update theme 
26
27
 
              </li>
              <li>
c55955c06   DANG   new menu 
28
 
                <a href="#">料金表</a>
5c778530c   Dang YoungWorld   update theme 
29
30
 
              </li>
              <li>
c55955c06   DANG   new menu 
31
 
                <a href="#">新規会員登録</a>
5c778530c   Dang YoungWorld   update theme 
32
33
34
35
36
 
              </li>
            </ul>
            <ul class="top-control clearfix">
              <li>
                <div class="bt-yellow">
c55955c06   DANG   new menu 
37
 
                  <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成
5c778530c   Dang YoungWorld   update theme 
38
39
40
41
 
                </div>
              </li>
              <li>
                <div class="bt-yellow">
c55955c06   DANG   new menu 
42
 
                  <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート
5c778530c   Dang YoungWorld   update theme 
43
44
45
46
47
48
49
 
                </div>
              </li>
            </ul>
          </div>
          <div class="pull-right">
            <div class="user-control">
              <div>
c55955c06   DANG   new menu 
50
 
                マイページ
5c778530c   Dang YoungWorld   update theme 
51
 
              </div>
c55955c06   DANG   new menu 
52
53
 
              <div class="login">
                <i class="fa fa-lock" aria-hidden="true"></i> ログイン
5c778530c   Dang YoungWorld   update theme 
54
55
56
 
              </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">
c55955c06   DANG   new menu 
63
64
65
66
67
68
69
 
  
  
            <li class="circle"><a href="#">商品に戻る</a></li>
            <li class="line"></li>
            <li class="circle"><a href="#">加工方法に戻る</a></li>
            <li class="line line-action"></li>
            <li class="circle action"><a href="#">デザインする</a></li>
862daa8a4   DANG   commit theme 
70
71
72
 
          </ul>
        </div>
      </nav>
a56541cf9   DANG   add css 
73
 
      <article class="clearfix">
862daa8a4   DANG   commit theme 
74
 
          <aside class="col-sm-5">
c55955c06   DANG   new menu 
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
            <div class="clearfix row" style="position: relative">
              <div class="step col-xs-6">
                <div class="title clearfix">
                  <span style="float: left;width: 28%"><img src="../images/stepicon1.png" alt="1" /></span> <span style="float: left;width: 72%; padding: 16px 0">デザインを作る</span>
                </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()">
                        デザインを作る
                      </button>
                    </div>
862daa8a4   DANG   commit theme 
93
 
                  </div>
8f087d204   DANG   Theme + add bower... 
94
95
 
                </div>
              </div>
e7c9c7707   DANG   Commit theme 
96
 








c55955c06
 
 DANG
 
new menu




97
98
99




              <!--&lt;!&ndash;  BREAK DOWN&ndash;&gt;-->
              <div class="text-center break-left">
                <img src="images/arrow1.png" alt="arrow" />









862daa8a4
 
 DANG
 
commit theme




100




              </div>









c55955c06
 
 DANG
 
new menu




101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117




  
              <!-- STEP 2-->
              <div class="step col-xs-6">
                <div class="title clearfix">
                  <span style="float: left;width: 28%"><img src="../images/stepicon2.png" alt="2" /></span><span style="float: left;width: 72%;padding: 6px 0"> アイテムカラーを変更する</span>
                </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>









862daa8a4
 
 DANG
 
commit theme




118




                  </div>









e7c9c7707
 
 DANG
 
Commit theme




119
120
121




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









e7c9c7707
 
 DANG
 
Commit theme




122












c55955c06
 
 DANG
 
new menu




123












862daa8a4
 
 DANG
 
commit theme




124
125
126
127




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









e7c9c7707
 
 DANG
 
Commit theme




128












862daa8a4
 
 DANG
 
commit theme




129
130
131
132
133
134
135
136
137
138
139




            <!-- 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




140




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









862daa8a4
 
 DANG
 
commit theme




141
142
143
144
145
146
147
148
149
150
151
152
153




                        </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




154




                  </div>









c55955c06
 
 DANG
 
new menu




155












e7c9c7707
 
 DANG
 
Commit theme




156




                </div>









e7c9c7707
 
 DANG
 
Commit theme




157




              </div>









e7c9c7707
 
 DANG
 
Commit theme




158












862daa8a4
 
 DANG
 
commit theme




159
160
161
162




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









e7c9c7707
 
 DANG
 
Commit theme




163












862daa8a4
 
 DANG
 
commit theme




164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188




              <!-- 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




189




              </div>









862daa8a4
 
 DANG
 
commit theme




190
191
192
193
194
195




              <!-- 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




196




                </div>









862daa8a4
 
 DANG
 
commit theme




197












e7c9c7707
 
 DANG
 
Commit theme




198
199




              </div>
            </div>









862daa8a4
 
 DANG
 
commit theme




200
201
202




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









19a110aef
 
 DANG
 
add css




203




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









862daa8a4
 
 DANG
 
commit theme




204
205




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









422e7837d
 
 DANG
 
Change color t-shirt




206




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









4ae9cc634
 
 DANG
 
fix reponsive




207




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









80ff9bbd4
 
 TRUONG
 
fix bugs and optimal




208
209




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









862daa8a4
 
 DANG
 
commit theme




210
211
212




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









422e7837d
 
 DANG
 
Change color t-shirt




213




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









862daa8a4
 
 DANG
 
commit theme




214




                  <div>前</div>









422e7837d
 
 DANG
 
Change color t-shirt




215
216




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









862daa8a4
 
 DANG
 
commit theme




217
218
219




                  </div>
  
                </li>









422e7837d
 
 DANG
 
Change color t-shirt




220




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









862daa8a4
 
 DANG
 
commit theme




221




                  <div>後</div>









422e7837d
 
 DANG
 
Change color t-shirt




222
223




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









862daa8a4
 
 DANG
 
commit theme




224




                  </div>









e7c9c7707
 
 DANG
 
Commit theme




225












862daa8a4
 
 DANG
 
commit theme




226
227




                </li>
              </ul>









e7c9c7707
 
 DANG
 
Commit theme




228




            </div>









862daa8a4
 
 DANG
 
commit theme




229




          </section>









862daa8a4
 
 DANG
 
commit theme




230




      </article>









a56541cf9
 
 DANG
 
add css




231
232
233
234
235
236
237
238
239




      <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...




240












862daa8a4
 
 DANG
 
commit theme




241




      <!--MODAL CONTENT-->









c9d8b2fe3
 
 Truong LD
 
update version




242




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









862daa8a4
 
 DANG
 
commit theme




243




    </div>









87c93a029
 
 Dang YoungWorld
 
add modal




244












87c93a029
 
 Dang YoungWorld
 
add modal




245












8f087d204
 
 DANG
 
Theme + add bower...




246




  </div>