main.html 9.05 KB
<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
  <div class="row">
    <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="#">はじめての方へ</a>
            </li>
            <li>
              <a href="#">料金表</a>
            </li>
            <li>
              <a href="#">新規会員登録</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 class="login">
              <i class="fa fa-lock" aria-hidden="true"></i> ログイン
            </div>
          </div>
        </div>
      </div>
    </header>
    <nav class="clearfix">
      <div class="col-sm-12">
        <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
        <ul class="pull-right">


          <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>
        </ul>
      </div>
    </nav>
    <article class="clearfix">
        <aside class="col-sm-5">
          <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>
                </div>
              </div>
            </div>

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

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


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

          <!-- 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">
                        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                      </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>
                </div>

              </div>
            </div>

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

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

            </div>
          </div>
        </aside>
        <section id="tshirt-content" class="col-sm-7 text-center">
          <div class="switch-border-design">
            <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
          </div>
          <div class="tshirt-image">
            <img ng-src="{{ tShirtImg }}" alt="" />
            <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
              <img ng-src="{{outputImage}}" ng-show="outputImage"/>
            </div>
          </div>
          <div class="tshirt-choice">
            <ul>
              <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                <div>前</div>
                <div class="image" ng-click="choiceTShirtBackFront('front')">
                  <img ng-src="{{ tShirtImgFront }}" alt="" />
                </div>

              </li>
              <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
                <div>後</div>
                <div class="image"  ng-click="choiceTShirtBackFront('back')">
                  <img ng-src="{{ tShirtImgBack }}" alt="" />
                </div>

              </li>
            </ul>
          </div>
        </section>
    </article>
    <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>

    <!--MODAL CONTENT-->
    <div ng-include="designFrameView"></div>
  </div>


</div>