tshirt-design.html 4.67 KB
<!-- Modal --><div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> <button class="black"><i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button></div><div class="modal-body"><header class="clearfix"><ul class="nav pull-left"><li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')"><i class="fa fa-jpy" aria-hidden="true"></i> 文字</li><li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"><i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ</li><li><i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真</li><li><i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去</li></ul><div class="action pull-right"><button class="white">アルバムを開く</button> <button class="white">アルバムに入れる</button></div></header><section class="tshirt-design-container clearfix"><div class="aside col-xs-4"><ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 文字を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">書体を選んでお好きな文字を入力できます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> イラストやイメージを追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-btc" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">自由にお使いいただけるデザイン画像をご用意しました</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 自分の画像・写真を追加</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">ご自分で用意した画像をアップロードして使えます</div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> おすすめデザインを使う</div><div class="content clearfix"><div class="col-xs-2 text-center"><i class="fa fa-jpy" aria-hidden="true"></i></div><div class="col-xs-10 des padding-left-0">おすすめデザインデータをご自由にカスタマイズしてお使いください</div></div></li></ul><ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'"><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> items</div><div class="content clearfix"><select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"><option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</select><div class="illustration-list"><div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"><img ng-src="{{item.path}}"></div><div class="clearfix"></div></div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Color to fill</div><div class="content clearfix"><div class="color-patterns"><div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"></div><div class="clearfix"></div></div></div></li><li><div class="hover"></div><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Layer option</div><div class="content clearfix"></div></li></ul><!-- Text design--><ul id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'"></ul></div><div class="design-content col-xs-8"><div class="content" ng-style="{'background-color' : tShirtColorCode}"><canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"></canvas></div><div class="agree-design"><img src="images/agree-design.png" alt="agree design"></div><div class="trash-design"><img src="images/trash.png" alt="trash design"></div></div></section></div></div></div></div>