TRUONG / T-Shats Frontend

Browse Code »

Commit 97d46dae2bc7953e638b27a7aaa995a128484369

Authored by Dang YoungWorld 2016-11-30 16:06:01 +0900

1 parent 2f1fcd7ad6

Exists in master

update font text

Showing 3 changed files with 226 additions and 37 deletions Inline Diff

app/index.html
app/scripts/controllers/tshirtdesign.js
app/styles/main.css

app/index.html

Diff comments View file @ 97d46da

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_03';	50	var VERSION = '30-11_04';
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

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ 97d46da

 define(['app'], function (app) {
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
 		$scope.Math = window.Math;
 		$scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
 		var canvas = new fabric.Canvas('main-design-container');
 		var diffX = 40, diffY = 40;
 		var _coorTrash_x = 567;
 		var _coorTrash_y = 545;
 		var ObjectOrd=0;
 		//Set width and height canvas
 		function setSizeCanvas() {
 			if(typeof $rootScope.placeTshirt.place == 'undefined')
 				return;
 			var _modalWidth = $('.modal-dialog').width();
 			var _windowWidth = window.innerWidth;
 			var place = $rootScope.placeTshirt.place;
 			switch (place) {
 				case 't_shirt_p_1' :
 					$scope.designCanvasClass = 'design-content-t_shirt_p_1';
 					if(_windowWidth > 762) {
 						var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
 						var _contentCanvasHeight = _contentCanvasWidth;
 					} else {
 						var _contentCanvasWidth = _windowWidth-70;
 						var _contentCanvasHeight = _contentCanvasWidth;
 					}
 					break;
 				case 't_shirt_p_2' :
 					$scope.designCanvasClass = 'design-content-t_shirt_p_2';
 					if(_windowWidth > 762) {
 						var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
 						var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
 					} else {
 						var _contentCanvasWidth = _windowWidth-70;
 						var _contentCanvasHeight = (_windowWidth)/2.5;
 					}
 					break;
 				default:
 					break;
 			}
 			canvas.setWidth(_contentCanvasWidth);
 			canvas.setHeight(_contentCanvasHeight);
 			var mainDsWidth = (_modalWidth*8/12)-30;
 			var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
 			// console.log(mainDsWidth, mainDsHeight);
 			diffX = 40;
 			diffY = (mainDsHeight - _contentCanvasHeight)/2;
 			_coorTrash_x = _contentCanvasWidth + 20;
 			_coorTrash_y = _contentCanvasHeight + diffY - 90;
 			console.log(_coorTrash_x, _coorTrash_y);
 		}
 		setSizeCanvas();
 		//Window resize event
 		$(window).resize(function () {
 			setSizeCanvas();
 		});
 		//Custom control
 		fabric.Object.prototype.transparentCorners = true;
 		fabric.Object.prototype.hasRotatingPoint = false;
 		canvas.selection = false;
 		var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
 		for(key in ctrVisible) {
 			fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
 		}
 		fabric.Object.prototype.customiseCornerIcons({
 			settings: {
 				borderColor: '#0000ff',
 				cornerSize: 25,
 				cornerShape: 'circle',
 				cornerBackgroundColor: '#0171b4',
 				cornerPadding: 6
 			},
 			mt: {
 				icon: 'images/control-icon/ok.png'
 			},
 			br: {
 				icon: 'images/control-icon/resize.png'
 			},
 			tr: {
 				icon: 'images/control-icon/rotate.png'
 			}
 		});
 		fabric.Canvas.prototype.customiseControls({
 			mt: {
 				cursor: 'pointer',
 				action: function(e, target) {
 					fabric.Object.prototype.selectable = false;
 					canvas.deactivateAll().renderAll();
 					delete currentObj;
 					$scope.designTextValue = '';
 					$timeout(function(){
 						fabric.Object.prototype.selectable = true;
 					},20);
 				}
 			},
 			br: {
 			},
 			tr: {
 				action: 'rotate',
 				cursor: 'crosshair'
 			}
 		});
 		canvas.on({
 			'object:added'      : onIllustrationAdded,
 			'object:moving'     : onIllustrationMoving,
 			'object:scaling'    : onIllustrationChange,
 			'object:rotating'   : onIllustrationChange,
 			'object:selected'   : onObjectSelected,
 			'object:modified'   : onIllustrationModifield,
 			'selection:cleared' : onObjectOut,
 		});
 		var currentObj;
 		var listObj = [];
 		var stateObj = [];
 		var indexCurr = 0;
 		var indexCurr2 = 0;
 		var actionObj = false;
 		var refreshObj = true;
 		var spacingNum = 0;
 		$scope.itemFont = 0;
 		$scope.showDesignTab = function(tab){
 			canvas.deactivateAll().renderAll();
 			$rootScope.isShowLeftPanel = tab;
 			switch (tab) {
 				case 'illustration': {
 					$scope.IllustrationList = $illustration.getAll();
 					$rootScope.outputImage = false;
 					$scope.illustrationSelectConfig = {
 						allowClear:true
 					};
 					$timeout(function(){
 						$('.illstration-item').tooltip({
 							animated: 'fade',
 							placement: 'bottom',
 							html: true
 						});
 					},1000);
 					break;
 				}
 				case 'text': {
 					break;
 				}
 			}
 		};
 		$scope.showDesignTab('default');
 		function onIllustrationAdded(options){
 			var object = options.target;
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    // console.log(object.originalState);
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    refreshObj = true;
 		}
 		function onIllustrationModifield(options){
 			$('.object-border').hide();
 			//
 		    var pointer = canvas.getPointer(options.e);
 			if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
 				canvas.getActiveObject().remove();
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 				return;
 			}
 			//
 			try{
 				var objOffset = canvas.getActiveObject().getBoundingRect();
 				var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
 				//console.log(objOffset,canvas.height,canvas.width);
 				if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
 					if (confirm('削除してもよろしいですか')){
 						canvas.getActiveObject().remove();
 					}else{
 						undoCanvas();
 						return;
 					}
 				}
 			}catch (e){
 				//
 			}
 			var object = options.target;
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    refreshObj = true;
 		}
 		function onIllustrationChange(options) {
 		}
 		function onIllustrationMoving(options) {
 			var object = options.target;
 			var pointer = canvas.getPointer(options.e);
 			// console.log(pointer.x, pointer.y);
 			if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
 				$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
 			}else{
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 			}
 			// console.log(object.oCoords,object.originalState);
 			object.setCoords();
 			var Coords = object.oCoords;
 			var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
 			var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
 			$('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
 			$('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
 			$('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
 			$('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
 			$('.object-border').css({
 				'-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
     			'-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
     			'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
 			});
 			$('.object-border').show();
 		}
 		function onObjectOut() {
 			console.log('onObjectOut');
 			canvas.deactivateAll().renderAll();
 			delete currentObj;
 			$scope.designTextValue = '';
 			$scope.safeApply();
 		}
 		function undoCanvas() {
 		    if (indexCurr <= 0) {
 		        indexCurr = 0;
 		        return;
 		    }
 		    if (refreshObj === true) {
 		        indexCurr--;
 		        refreshObj = false;
 		    }
 		    console.log('undo');
 		    indexCurr2 = indexCurr - 1;
 		    currentObj = listObj[indexCurr2];
 		    if (currentObj){
 		    	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    }
 		    indexCurr--;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		    actionObj = true;
 		}
 		function redoCanvas() {
 		    actionObj = true;
 		    if (indexCurr >= stateObj.length - 1) {
 		        return;
 		    }
 		    console.log('redo');
 		    indexCurr2 = indexCurr + 1;
 		    currentObj = listObj[indexCurr2];
 		    currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    indexCurr++;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		}
 		$scope.canvasClearAll = function(){
 			if (confirm('配置されたすべての文字や画像を消去します')){
 				canvas.clear();
 				ObjectOrd = 0;
 			}
 		}
 		function onObjectSelected(options) {
 			var currentObj = options.target;
 			if (typeof currentObj.toOrd != 'function'){
 				var currentObjOrd = ++ObjectOrd;
 				currentObj.toOrd = function(){
 					return currentObjOrd;
 				}
 			}
 			console.log(currentObj.toOrd());
 			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
 					$rootScope.isShowLeftPanel = 'text';
 					var text = currentObj.text;
 					if(text != '') {
 						$scope.designText = text;
 						$scope.designTextValue = text;
 					}
 					break;
 				case 'path-group' :
 					$rootScope.isShowLeftPanel = 'illustration';
 					break;
 				case 'image':
 					$rootScope.isShowLeftPanel = 'image';
 					break;
 				default :
 					$rootScope.isShowLeftPanel = 'default';
 					break;
 			}
 			$rootScope.safeApply();
 		}
 		// Illustration process
 		$scope.changeIllustrationCategory = function(currentIllustration){
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 		};
 		var arrSvgOriginal = [];
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
 				var currentObjOrd = ++ObjectOrd;
 				arrSvgOriginal[currentObjOrd] = item.path;
 				shape.toOrd = function(){
 					return currentObjOrd;
 				}
 				canvas.add(shape.scale(0.6));
 				shape.set({ left: 150, top: 100 }).setCoords();
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
 		};
 		// color pattern
 		$scope.listColorPatterns = [
 			'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
 			'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
 			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
 			'#333333'
 		];
 		$scope.changeColorPattern = function(color){
 			var obj = canvas.getActiveObject();
 			if (!color){
 				color = 'none';
 				// console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
 				if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
 					var currentObjOrd = obj.toOrd();
 					fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
 						var shape = fabric.util.groupSVGElements(objects, options);
 						shape.toOrd = function(){
 							return currentObjOrd;
 						}
 						obj.setCoords();
 						shape.setScaleX(obj.getScaleX());
 						shape.setScaleY(obj.getScaleY());
 						shape.set('top',obj.getTop());
 						shape.set('left',obj.getLeft());
 						shape.set('angle',obj.getAngle());
 						// shape.set('height',obj.getHeight());
 						// shape.set('width',obj.getWidth());
 						canvas.add(shape);
 						shape.setCoords();
 						// shape.set({ left: 150, top: 100 }).setCoords();
 						canvas.renderAll();
 						canvas.setActiveObject(shape);
 						obj.remove();
 					});
 				}
 			}else{
 				if (obj instanceof fabric.PathGroup) {
 					obj.getObjects().forEach(function(o) {
 						o.fill = color;
 					});
 				}
 				else {
 					obj.fill = color;
 				}
 				canvas.renderAll();
 			}
 		};
 		//Font
 		$scope.listFontFamily = [
+			// {
+			// 	name : 'GN Aki iro Sesami Cookies',
+			// 	slug : 'gn_aki_iro_sesami_cookies',
+			// },
+			// {
+			// 	name : 'GN-Fuyu-iro_Script_Bold',
+			// 	slug : 'gn_fuyu_iro_script_bold'
+			// },
+			// {
+			// 	name : 'GN Killgothic U Kanana',
+			// 	slug : 'gn_killgothic_u_kanana'
+			// },
+			// {
+			// 	name : 'GN-Kin-iro_Alphabet_Cookies',
+			// 	slug : 'gn_kin_iro_alphabet_cookies'
+            //
+			// },
+			// {
+			// 	name : 'GN-Kin-iro_SansSerif',
+			// 	slug : 'gn_kin_iro_sansserif'
+            //
+			// },
+			// {
+			// 	name : 'GN-Koharuiro_Sunray',
+			// 	slug : 'gn_koharuiro_sunray'
+            //
+			// },
+			// {
+			// 	name : 'GN-Kyu-pin',
+			// 	slug : 'gn_kyu_pin'
+			// },
+			// {
+			// 	name : 'gn_natsu_iro_schedule',
+			// 	slug : 'gn_natsu_iro_schedule'
+            //
+			// },
+			// {
+			// 	name : 'gnkana_kiniro_sansserif_l',
+			// 	slug : 'gnkana_kiniro_sansserif_l'
+            //
+			// },
+			// {
+			// 	name : 'gnkana_kiniro_sansserif_st',
+			// 	slug : 'gnkana_kiniro_sansserif_st'
+			// },
+			// {
+			// 	name : 'gnkana_kon_iro_nightfall',
+			// 	slug : 'gnkana_kon_iro_nightfall'
+            //
+			// },
+			// {
+			// 	name : 'ms_gothic',
+			// 	slug : 'ms_gothic'
+            //
+			// },
+			// {
+			// 	name : 'msmincho',
+			// 	slug : 'msmincho'
+			// },
+			// {
+			// 	name : 'ufonts_com_ms_pgothic',
+			// 	slug : 'ufonts_com_ms_pgothic'
+			// }
 			{
-				name : 'GN Aki iro Sesami Cookies',
+				name: 'Roboto',
-				slug : 'gn_aki_iro_sesami_cookies',
+				slug: "'Roboto', sans-serif"
 			},
 			{
-				name : 'GN-Fuyu-iro_Script_Bold',
+				name: 'Bungee',
-				slug : 'gn_fuyu_iro_script_bold'
+				slug: "'Bungee', cursive"
 			},
 			{
-				name : 'GN Killgothic U Kanana',
+				name: 'Aref Ruqaa',
-				slug : 'gn_killgothic_u_kanana'
+				slug: "'Aref Ruqaa', serif"
 			},
 			{
-				name : 'GN-Kin-iro_Alphabet_Cookies',
+				name: 'Open Sans',
-				slug : 'gn_kin_iro_alphabet_cookies'
+				slug: "'Open Sans', sans-serif"
 			},
 			{
-				name : 'GN-Kin-iro_SansSerif',
+				name: 'Lato',
-				slug : 'gn_kin_iro_sansserif'
+				slug: "'Lato', sans-serif"
 			},
 			{
-				name : 'GN-Koharuiro_Sunray',
+				name: 'Slabo 27px',
-				slug : 'gn_koharuiro_sunray'
+				slug: "'Slabo 27px', serif"
 			},
 			{
-				name : 'GN-Kyu-pin',
+				name: 'Oswald',
-				slug : 'gn_kyu_pin'
+				slug: "'Oswald', sans-serif"
 			},
 			{
-				name : 'gn_natsu_iro_schedule',
+				name: 'Yrsa',
-				slug : 'gn_natsu_iro_schedule'
+				slug: "'Yrsa', serif"
 			},
 			{
-				name : 'gnkana_kiniro_sansserif_l',
+				name: 'Source Sans Pro',
-				slug : 'gnkana_kiniro_sansserif_l'
+				slug: "'Source Sans Pro', sans-serif"
 			},
 			{
-				name : 'gnkana_kiniro_sansserif_st',
+				name: 'Montserrat',
-				slug : 'gnkana_kiniro_sansserif_st'
+				slug: "'Montserrat', sans-serif"
 			},
 			{
-				name : 'gnkana_kon_iro_nightfall',
+				name: 'Raleway',
-				slug : 'gnkana_kon_iro_nightfall'
+				slug: "'Raleway', sans-serif"
 			},
 			{
-				name : 'ms_gothic',
+				name: 'Merriweather',
-				slug : 'ms_gothic'
+				slug: "'Merriweather', serif"
 			},
 			{
-				name : 'msmincho',
+				name: 'Open Sans Condensed',
-				slug : 'msmincho'
+				slug: "'Open Sans Condensed', sans-serif"
 			},
 			{
-				name : 'ufonts_com_ms_pgothic',
+				name: 'Maitree',
-				slug : 'ufonts_com_ms_pgothic'
+				slug: "'Maitree', serif"
+			},
+			{
+				name: 'Lora',
+				slug: "'Lora', serif"
+			},
+			{
+				name: 'Playfair Display',
+				slug: "'Playfair Display', serif"
+			},
+			{
+				name: 'Noto Sans',
+				slug: "''Noto Sans', sans-serif', sans-serif"
+			},
+			{
+				name: 'PT Sans Narrow',
+				slug: "'PT Sans Narrow', sans-serif"
+			},
+			{
+				name: 'Titillium Web',
+				slug: "'Titillium Web', sans-serif"
+			},
+			{
+				name: 'Muli',
+				slug: "'Muli', sans-serif"
+			},
+			{
+				name: 'Inconsolata',
+				slug: "'Inconsolata', monospace"
+			},
+			{
+				name: 'Indie Flower',
+				slug: "'Indie Flower', cursive"
+			},
+			{
+				name: 'Bitter',
+				slug: "'Bitter', serif"
+			},
+			{
+				name: 'Dosis',
+				slug: "'Dosis', sans-serif"
+			},
+			{
+				name: 'Oxygen',
+				slug: "'Oxygen', sans-serif"
+			},
+			{
+				name: 'Hind',
+				slug: "'Hind', sans-serif"
+			},
+			{
+				name: 'Tillana',
+				slug: "'Tillana', cursive"
+			},
+			{
+				name: 'Fjalla One',
+				slug: "'Fjalla One', sans-serif"
+			},
+			{
+				name: 'Cabin',
+				slug: "'Cabin', sans-serif"
+			},
+			{
+				name: 'Nunito',
+				slug: "'Nunito', sans-serif"
+			},
+			{
+				name: 'Anton',
+				slug: "'Anton', sans-serif"
+			},
+			{
+				name: 'Lobster',
+				slug: "'Lobster', cursive"
+			},
+			{
+				name: 'Yanone Kaffeesatz',
+				slug: "'Yanone Kaffeesatz', sans-serif"
+			},
+			{
+				name: 'Reem Kufi',
+				slug: "'Reem Kufi', sans-serif"
+			},
+			{
+				name: 'Merriweather Sans',
+				slug: "'Merriweather Sans', sans-serif"
+			},
+			{
+				name: 'Bree Serif',
+				slug: "'Bree Serif', serif"
+			},
+			{
+				name: 'Josefin Sans',
+				slug: "'Josefin Sans', sans-serif"
+			},
+			{
+				name: 'Abel',
+				slug: "'Abel', sans-serif"
+			},
+			{
+				name: 'Crimson Text',
+				slug: "'Crimson Text', serif"
+			},
+			{
+				name: 'Gloria Hallelujah',
+				slug: "'Gloria Hallelujah', cursive"
+			},
+			{
+				name: 'Bungee Inline',
+				slug: "'Bungee Inline', cursive"
+			},
+			{
+				name: 'Amatic SC',
+				slug: "'Amatic SC', cursive"
+			},
+			{
+				name: 'Shadows Into Light',
+				slug: "'Shadows Into Light', cursive"
+			},
+			{
+				name: 'Dancing Script',
+				slug: "'Dancing Script', cursive"
+			},
+			{
+				name: 'Orbitron',
+				slug: "'Orbitron', sans-serif"
+			},
+			{
+				name: 'Source Code Pro',
+				slug: "'Source Code Pro', monospace"
+			},
+			{
+				name: 'Permanent Marker',
+				slug: "'Permanent Marker', cursive"
 			}
 		];
 		// layer process
 		$scope.layerProcess = function(mode) {
 			// console.log('layerProcess');
 			var activeObject = canvas.getActiveObject();
 			if (activeObject){
 				switch (mode) {
 					case 1:
 						activeObject.bringForward();
 						break;
 					case 2:
 						activeObject.sendBackwards();
 						break;
 					case 3:
 						activeObject.bringToFront();
 						break;
 					case 4:
 						activeObject.sendToBack();
 						break;
 				}
 				canvas.deactivateAll().renderAll();
 			}
 		};
 		//Design text
 		$scope.inputText = function(e) {
 			currentObj = canvas.getActiveObject();
 			var _iText = new fabric.IText('', {
 				left: 150,
 				top: 200,
 				fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
 				fontWeight: 'normal',
 				textAlign:  'center',
 				fontSize: 28,
 				fill: 'black',
 				editable: false
 			});
 			if(typeof currentObj != 'undefined' && currentObj != null) {
 				_iText.set({
 					left: currentObj.left,
 					top: currentObj.top,
 					fontFamily: currentObj.fontFamily,
 					fontSize: currentObj.fontSize,
 					fill: currentObj.fill
 				})
 			}
 			if(canvas.getActiveObject())
 				canvas.getActiveObject().remove();
 			_iText.set('text', e);
 			canvas.add(_iText);
 			canvas.setActiveObject(_iText);
 			canvas.renderAll();
 		};
 		$scope.setFontFamily = function(font,index) {
 			$scope.itemFont = index;
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					currentObj.set('fontFamily', font);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		//Set letter spacing text
 		$scope.setLetterSpacingText = function(e) {
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					if(e == 'plus')
 						spacingNum = spacingNum + 30;
 					else if (spacingNum >= -30){
 						spacingNum = spacingNum - 30;
 					}
 					if(e == 'default')
 						spacingNum = 0;
 					currentObj.set('charSpacing', spacingNum);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		/**** process insert image */
 		if (typeof($window.localStorage.recentImages) != 'undefined'){
 			$scope.recentImages = JSON.parse($window.localStorage.recentImages);
 		}else{
 			$scope.recentImages = {};
 		}
 		var addToRecentImage = function(name, data){
 			if (typeof($window.localStorage.recentImages) != 'undefined'){
 				$scope.recentImages = JSON.parse($window.localStorage.recentImages);
 			}else{
 				$scope.recentImages = {};
 			}
 			if (typeof($scope.recentImages[name]) == 'undefined'){
 				var ii=0;
 				var II = 0;
 				for(var item in $scope.recentImages){
 					if (II==0){
 						II = item;
 					}
 					ii++;
 				}
 				if (ii>16 && II!=0){
 					delete $scope.recentImages[II];
 				}
 				$scope.recentImages[name] = data;
 				$window.localStorage.recentImages = JSON.stringify($scope.recentImages);
 			}
 		}
 		$scope.chooseImage = function(e){//console.log(e);
 			if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
 				alert('アップロードできませんでした');
 				return;
 			}
 			var reader = new FileReader();
 		    reader.onload = function (event) {
 		    	addToRecentImage ($('#imgLoader').val(), event.target.result);
 		        var imgObj = new Image();//console.log($('#imgLoader').val());
 		        imgObj.src = event.target.result;
 		        imgObj.onload = function () {
 		            // start fabricJS stuff
 		            var image = new fabric.Image(imgObj);
 		            image.set({
 		                left: 50,
 		                top: 50
 		            });
 		            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
 		            image.scaleToWidth(200);
 		            canvas.add(image);
 		        }
 		    }
     		reader.readAsDataURL(e.target.files[0]);
 		}
 		$scope.insertRecentImage = function(data){
 	        var imgObj = new Image();
 	        imgObj.src = data;
 	        imgObj.onload = function () {
 	            // start fabricJS stuff
 	            var image = new fabric.Image(imgObj);
 	            image.set({
 	                left: 50,
 	                top: 50
 	            });
 	            image.scaleToWidth(200);
 	            canvas.add(image);
 	        }
 		}
 		//Traslation text
 		$scope.rotateText =  function(style) {
 			if(canvas.getActiveObject()) {
 				var currentObj = canvas.getActiveObject();
 				if(currentObj.type == 'i-text') {
 					currentObj.set('rotate', Math.PI / 4);
 					canvas.renderAll();
 					canvas.setActiveObject(currentObj);
 				}
 			}
 		};
 		/* Process output */
 		$scope.outputDesign = function(){
 			$rootScope.outputImage = canvas.toDataURL('png');
 			// console.log();
 			$('#tshirt-design').modal('hide');
 		}
 		$scope.showRecommend = function(){
 			$scope.recommendList = $favorite.getAll();
 			$scope.favoriteList = $favorite.getAll();
 			$('#tshirt-design-saved').modal({
 				backdrop: 'static',
 				keyboard: false
 			});
 			$timeout(function(){
 				$('.saved-item').tooltip({
 					animated: 'fade',
 					placement: 'bottom',
 					html: true
 				});
 			},1000);
 		}
 		$scope.closeSavedModal = function(){
 			$('#tshirt-design-saved').modal('hide');
 		}
 		$scope.openSavedTab = function(tab){
 			$('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
 			$('#tab-saved-'+tab).addClass('active');
 			$('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
 			$('#content-saved-'+tab).addClass('active');
 			$timeout(function(){
 				$('.saved-item img').tooltip({
 					animated: 'fade',
 					placement: 'bottom',
 					html: true
 				});
 			},500);
 		}
 		$favorite.loadFromRemote();
 		$scope.saveFavorite = function(){
 			if (!confirm('Do you want to put current design to your favorite?')){
 				return;
 			}
 			var dataDump = {
 				thumb: canvas.toDataURL('png'),
 				data: JSON.stringify(canvas)
 			}
 			$favorite.addToFavorite({
 				data: dataDump
 			})
 			// console.log(JSON.stringify(dataDump));
 			alert('saved');
 		}
 		$scope.restoreSaved = function(item){
 			if (!confirm('this may be clear all current design frame, are you sure ?')){
 				return;
 			}
 			$('#tshirt-design-saved').modal('hide');
 			canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
 			ObjectOrd = 0;
 			canvas.forEachObject(function(obj){
 				var currentObjOrd = ++ObjectOrd;
 			    obj.toOrd = function(){
 			    	return currentObjOrd;
 			    }
 			});
 		}
 		$scope.deleteFavorite = function(idx){
 			if (confirm('are you sure?')){
 				$favorite.removeFromFavorite({
 					idx: idx
 				});

app/styles/main.css

Diff comments View file @ 97d46da

 /* Space out content a bit */
 @import "../fonts/font.css";
-@import "../fonts/font_canvas/font-canvas.css";
+/*@import "../fonts/font_canvas/font-canvas.css";*/
+@import url('https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Anton|Aref+Ruqaa|Bitter|Bree+Serif|Bungee|Bungee+Inline|Cabin|Crimson+Text|Dancing+Script|Dosis|Fjalla+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Lato|Lobster|Lora|Maitree|Merriweather|Merriweather+Sans|Montserrat|Muli|Noto+Sans|Nunito|Open+Sans|Open+Sans+Condensed:300|Orbitron|Oswald|Oxygen|PT+Sans+Narrow|Permanent+Marker|Playfair+Display|Raleway|Reem+Kufi|Roboto|Shadows+Into+Light|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Tillana|Titillium+Web|Yanone+Kaffeesatz|Yrsa');
 @import "placedesign.css";
 html{
   height:100%;
   width:100%;
 }
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   height:100%;
   width:100%;
 }
 /*Scroll bar style*/
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
 }
 /*End scroll bar style*/
 .padding-right-0{
   padding-right: 0!important;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.yellow1{
   background:url("../images/bgbutton1.png") repeat #ff801d;
   color: #ffffff;
   border: 1px solid #ff801d;
 }
 button.yellow2{
   background:url("../images/bgbutton2.png") repeat #ff801d;
   color: #ffffff;
   border: 1px solid #ff801d;
 }
 button.white{
   border: 1px solid #ff801d;
   color: #ff801d;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 button.none{
   border: 0;
   background-color: transparent;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   padding-left: 0!important;
 }
 header .logo img{
   height: 60px;
 }
 header .social-share{
   list-style: none;
   background-color: #eeeeee;
   display: table;
   padding-left: 0;
   margin-bottom: 0;
 }
 header .social-share li{
   float: left;
   margin: 15px 15px;
   background-color: #c5c5c5;
   width: 30px;
   height: 30px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
   text-align: center;
   padding: 6px 0;
 }
 header .social-share li i{
   font-size: 20px;
   color: #ffffff;
 }
 header .top-menu{
   list-style: none;
   padding-left: 0;
   margin-bottom: 5px;
 }
 header .top-menu li{
   float: left;
   padding: 6px 0;
 }
 header .top-menu li a{
   color: #000000;
   padding: 0 10px;
   border-right: 1px solid #000000;
   font-size: 12px;
 }
 header .top-menu li:last-child a{
   border-right: 0;
 }
 header .top-control{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 header .top-control li{
   float: left;
   margin: 0 10px;
 }
 header .top-control li .bt-yellow{
   background-color: #fe6a00;
   color: #ffffff;
   padding: 3px 10px;
   font-size: 12px;
 }
 header .user-control{
   background-color: #888888;
   text-align: center;
 }
 header .user-control div{
   font-size: 12px;
   color: #ffffff;
 }
 header .user-control div:first-child{
   padding: 10px 10px;
 }
 header .user-control div:last-child{
   background-color: #fe6a00;
   padding: 3px 10px;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 5px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 20px 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   float: left;
 }
 nav ul li.line{
   border-bottom: 2px dashed #000000;
   width: 34px;
   height: 34px;
 }
 nav ul li.line-action{
   border-bottom: 2px dashed #fe6a00;
 }
 nav ul li.circle{
   width: 70px;
   height: 70px;
   -moz-border-radius: 35px;
   -webkit-border-radius: 35px;
   border-radius: 35px;
   text-align: center;
   font-size: 12px;
   /*margin-left: 26px;*/
   background-color: #999999;
   position: relative;
   display: inline;
   cursor: pointer;
 }
 nav ul li.circle a{
   color: #ffffff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   background-color: #fe6a00;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-left{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title span:first-child {
   float: left;
   width: 28%
 }
 aside .step .title span:last-child{
   float: left;
   width: 72%;
   padding: 6px 0;
 }
 aside .step .title span:last-child {
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 5px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
   position: relative;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   margin: 4px 4px;
 }
 aside .step .step-box .tshirt-design:hover{
   /*border: 1px solid #ff0000;*/
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   /*float: left;*/
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   text-align: center;
   width: 100%;
 }
 aside .step .step-box .tshirt-design .icon img{
   max-width: 100%;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 2px 4px;
   text-align: center;
 }
 aside .step .step-box .tshirt-design .action{
   /*padding: 10px 10px;*/
   /*float: right;*/
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 6px 8px;
   width: 100%;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 6px;
   height: 100%;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 6px 6px 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 26px;
   width: 26px;
   margin: 0;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .choice-color-bottom{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 80%;
   margin: 0 10%;
 }
 aside .step .step-box .choice-color-bottom .color-name{
   width: 100%;
   font-size: 12px;
   text-align: center;
   padding: 4px 0;
 }
 aside .step .step-box .choice-color-bottom .view-more{
   text-align: right;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 10px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 4px 10px;
   width: 100%;
 }
 /*Step 4*/
 aside .step .step-box .change-design{
   /*padding: 4px 4px;*/
 }
 aside .step .step-box .change-design table{
   width: 100%;
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr td{
   padding: 4px 3px;
 }
 aside .step .step-box .change-design table tr td:first-child{
   background-color: #ededed;
 }
 aside .step .step-box .change-design table tr td:last-child{
   background: url("../images/bgbutton2.png");
   color: #ffffff;
   font-size: 15px;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
   cursor: pointer;
   z-index: 99;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
   position: relative;
   height: 100%;
   width: 100%;
 }
 #tshirt-content .tshirt-image img{
   width: 100%;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
   cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
 #tshirt-content .tshirt-choice ul li .image img{
   width: 50px;
   height: auto;
 }
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
 }
 #tshirt-design .modal-dialog{
   /*width: 800px!important;*/
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: #ff7200;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fc7500;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside .box-design-option{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
   margin-bottom: 10px;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside .box-design-option li:hover .hover{
   display: block;
 }
 .aside .box-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside .box-design-option li .title i.fa{
   color: #000000;
 }
 .aside .box-design-option li .content{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
   color: #ff7200;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside .box-design-option li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 65px;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item{
   height: 20px;
   float: left;
   margin-left: 4px;
   margin-top: 2px;
   width: 20px;
   cursor: pointer;
   border: 1px solid #ddd;
 }
 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 .aside .box-design-option li .title .reset-color-patterns {
   cursor: pointer;
 }
 .aside .box-design-option li .title .reset-color-patterns:hover {
   opacity: 0.6;
 }
 .aside .box-design-option li .content .layer-item {
   text-align: center;
   border: 1px #ddd solid;
   background: #FFF;
   padding: 5px;
   font-size: 12px;
   cursor: pointer;
 }
 .aside .box-design-option li .content .layer-item:hover {
   background: #ffcccc;
 }
 /*Design Text*/
 .aside #choice-text{
 }
 .aside #choice-text .content{
   padding: 10px 10px;
 }
 .aside #choice-text .content ul.font-family-box{
   list-style: none;
   margin: 10px 0;
   padding-left: 0;
   height: 180px;
   width: 100%;
   overflow-y: scroll;
   border: 1px solid #c0c0c0;
 }
 .aside #choice-text .content .font-family-box li{
   cursor: pointer;
   padding: 4px 8px;
   border: 0;
   border-bottom: 1px solid #c0c0c0;
   border-right: 1px solid #c0c0c0;
   font-size: 16px;
   margin-bottom: 0;
 }
 .aside #choice-text .content .font-family-box li.active{
   border: 1px solid #fe070f;
 }
 .aside #choice-text .content .spacing-letter{
 }
 .aside #choice-text .content .spacing-letter .text-label{
   font-size: 16px;
   padding: 4px 0;
 }
 .aside #choice-text .content .spacing-letter .box{
   border: 1px solid #8c8c8c;
   box-shadow: 0 0 5px #888888;
   background-color: #f0f0f0;
 }
 .aside #choice-text .content .spacing-letter .item{
   float: left;
 }
 .aside #choice-text .content .spacing-letter .item:hover{
   background-color: #fddad4;
 }
 .aside #choice-text .content .spacing-letter .item i.fa{
   font-size: 22px;
   margin: 0 0;
   color: #000000;
 }
 .aside #choice-text .content .spacing-letter .item-text{
   padding: 6px 20px;
   font-size: 13px;
 }
 .aside #choice-text .content .spacing-letter .item-plus{
   border-right: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-minus{
   border-left: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
   padding: 5px 6px 1px 6px;
   cursor: pointer;
 }
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 310px;
   padding-bottom: 20px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
   width: 50px;
   cursor: pointer;
 }
 .illustration-list .footer-bar, .saved-list .footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
     position: absolute;
     width: 100%;
     padding-right: 20px;
 }
 .footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
   color: #FFF;
   background: #666666;
   text-transform: uppercase;
   padding: 2px 5px;
 }
 .footer-bar .footer-pagination:hover {
   background: #999999;
 }
 .tooltip-arrow,
 .red-tooltip + .tooltip > .tooltip-inner {
   background-color: #FFF;
   margin:0;
   padding:0;
 }
 /* Insert image*/
 #btn-choose-image {
   background: #ff0f00;
   cursor: pointer;
   margin: 10px 0px;
   padding: 0 10px;
   color: #FFF;
   font-size: 12px;
 }
 #btn-choose-image:hover {
   background: #f8aeae;
 }
 .aside #choice-image li .content {
   margin: 0 10px;
   padding: 10px 0;
 }
 .aside #choice-image li .content .small-text {
   font-size:10px;
   margin-bottom: 10px;
 }
 .aside #choice-image {
   font-size: 13px;
 }
 .aside #imgLoader{
   display: none;
 }
 .aside #choice-image li .content .list-images {
   height: 300px;
   background: #FFF;
   border: 1px solid #DDD;
 }
 .aside #choice-image li .content .list-images .recent-img{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-image li .content .list-images .recent-img:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-image li .content .list-images .recent-img img {
   width: 50px;
   cursor: pointer;
 }
 /*Design content*/
 .tshirt-design-container{
 }
 .tshirt-design-container .design-content{
   padding: 10px 0;
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   height: 100%;
   min-height: 600px;
   position: relative;
   padding: 40px 40px;
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
   cursor: pointer;
 }
 .tshirt-design-container .agree-design:hover{
   opacity: 0.8;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 .tshirt-design-container .trash-design:hover{
   opacity: 0.5;
 }
 .object-border{
   position: absolute;
   background-color: rgb(0, 108, 255);
   border: 0;
   display:none;
   transform-origin: 0% 0%;
 }
 #object-border-top, #object-border-bottom{
   height: 2px;
 }
 #object-border-right, #object-border-left{
   width: 2px;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
   float: left;
   width: 80%;
   margin-bottom: 0
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 footer .logo-bottom{
   float: left;
   width: 20%;
   margin-bottom: 0;
   text-align: right;
 }
 footer .logo-bottom img{
   height: 25px;
   max-width: 100%;
 }
 .footer{
   padding: 15px 0;
   text-align: center;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
 }
 @media (min-width: 1024px) {
   #tshirt-design .modal-dialog{
     min-width: 1000px;
     width: 1000px;
   }
 }
 /*Mobile responsive*/
 @media (max-width: 762px) {
   .modal-dialog{
     margin: 0 0!important;
   }
   #tshirt-design header .menu-nav{
     overflow-x: scroll!important;
     -webkit-overflow-scrolling: touch;
   }
   #tshirt-design header ul.nav {
     text-align: justify;
     width: 680px;
   }
   #tshirt-design header ul.nav li {
     display: inline-block; /* 6 */
   }
   .tshirt-design-container .design-content .content{
     padding: 14px 14px;
   }
   .tshirt-design-container .design-content{
     padding: 0 0;
   }
   /*Header*/
   header .logo{
     text-align: left;
   }
   header .top-control li{
     margin: 0 4px;
   }
   header .top-menu{
     display: table;
     margin: auto;
   }
   header .social-share{
     display: none;
   }
   header .col-sm-6{
     padding: 0!important;
   }
   header .user-control{
     position: absolute;
     right: 0;
     top: -120%;
   }
   /*Footer*/
   footer ul.nav-footer{
     width: 100%;
   }
   footer .logo-bottom{
     display: none;
   }
 }
 #tshirt-design-saved .subframe-design {
   width: 80%;
   margin: auto;
   margin-top: 100px;
   border: 10px solid rgb(0, 0, 0);
   border: 20px solid rgba(0, 0, 0, .5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   background: #FFF;
 }
 #tshirt-design-saved .modal-content button.close {
   margin-right: 103px;
   font-size: 41px;
   margin-top: -8px;
 }
 #tshirt-design-saved .subframe-design .nav-tabs {
   background: rgba(0, 0, 0, .5);
   border-bottom: 1px solid #F5F5F5;
 }
 #tshirt-design-saved .subframe-design .nav-tabs li a {
   text-decoration: none;
   background-color: #CCC;
   cursor: pointer;
   margin-right: 10px;
   padding: 2px 30px;
   color: #000;
   font-weight: 600;
   border-bottom: 1px solid #F5F5F5
 }
 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
   background: #F5F5F5;
   color: #fe070f;
 }
 #tshirt-design-saved .subframe-design .tab-content {
   background: #F5F5F5;
     width: 100%;
     min-height: 400px;
 }
 #tshirt-design-saved .saved-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 0px;
   min-height: 400px;
   padding: 10px;
 }
 #tshirt-design-saved .saved-list .saved-item{
   width: 100px;
   height: 100px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item:hover {
   outline: 2px solid #ed1d24;
 }
 #tshirt-design-saved .saved-list .saved-item img {
   width: 100px;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item button {
   background: #ff0f00;
   color: #FFF;
   border: 0;
   position: absolute;
   margin-left: -5px;
   margin-top: -5px;
   padding: 0 5px;
 }
 #tshirt-design-saved .saved-list .saved-item button:hover {
   background: #ffcccc;
 }
 #tshirt-design-saved .saved-list .footer-bar {
   bottom: 20px;
   width: 75%;
 }