From b2e3f7091173bb8c48b5df5c019eef63775ac34b Mon Sep 17 00:00:00 2001
From: samueldelesque <contact@samueldelesque.com>
Date: Tue, 2 Dec 2014 00:41:06 -0500
Subject: [PATCH] added json output

---
 app/css/index.css            |  2 +-
 app/css/index.less           | 15 +++++++++++++--
 app/index.html               |  2 +-
 app/views/colors/colors.html |  4 ++++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/css/index.css b/app/css/index.css
index 4133d08..f240d36 100644
--- a/app/css/index.css
+++ b/app/css/index.css
@@ -1 +1 @@
-body{background:#efefef}*{box-sizing:border-box}a,a:visited{color:#3bbf6d;text-decoration:none}a:hover{color:#2baf5d}.menu{list-style:none;margin:0;position:fixed;z-index:99;bottom:0;width:100%;left:0;right:0;height:44px;padding:10px 20px;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.menu li{display:inline;font-size:14px;font-weight:bold;margin:0 6px}.info{position:absolute;z-index:9;top:10px;width:220px;padding:20px;height:432px;max-width:90%;left:10px;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.info input{border:none;color:#111;width:100%;margin:5px 0;padding:10px 20px;-moz-box-shadow:0 0 5px rgba(120,120,120,0.2);-webkit-box-shadow:0 0 5px rgba(120,120,120,0.2);box-shadow:0 0 5px rgba(120,120,120,0.2);outline:none}.info button{width:100%;background:#18f66b;color:#fff;border:none;margin:5px 0;padding:10px 20px;outline:none;-moz-box-shadow:0 0 5px rgba(120,120,120,0.2);-webkit-box-shadow:0 0 5px rgba(120,120,120,0.2);box-shadow:0 0 5px rgba(120,120,120,0.2)}.info button.export{background:#88fefe}.info .col{display:inline-block;vertical-align:top;width:80px}.info .col:last-child{margin-left:15px}.palette{position:absolute;z-index:9;width:220px;left:10px;padding:10px;top:452px;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);text-align:center}.palette .inner{margin:0 auto}.palette .color{width:40px;height:40px;display:inline-block;vertical-align:top;cursor:pointer;position:relative}.palette .color .remove{display:block;position:absolute;top:0;right:0;width:8px;height:8px;background:rgba(0,0,0,0.2);text-align:center;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s;transition:.4s}.palette .color .remove:before{content:"X";font-family:Helvetica,Arial,sans-serif;font-size:4px;line-height:2.66666667px;vertical-align:middle;color:rgba(255,255,255,0.1);-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-ms-transition:.1s;transition:.1s;-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;-ms-transition-delay:0;transition-delay:0}.palette .color .remove:hover{background:rgba(0,0,0,0.7);width:40px;height:40px}.palette .color .remove:hover:before{font-size:8px;line-height:40px;color:rgba(255,255,255,0.7);-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.4s;-ms-transition-delay:.4s;transition-delay:.4s}.colors .color{width:50px;height:50px;display:inline-block;vertical-align:top;border:5px solid transparent;cursor:crosshair}.colors .color:hover{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;-ms-transition:.2s;transition:.2s;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border:5px solid rgba(255,255,255,0.7);-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.results{position:absolute;z-index:9;top:10px;width:240px;left:240px;padding:20px;height:auto;max-width:100%;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.results .color{width:10px;height:10px;display:inline-block;vertical-align:middle;margin-right:5px}.results p{margin:8px 0}.about{margin:20px auto;width:400px;padding:20px;background:#fff;max-width:100%;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.about p{margin:0 0 10px 0}
\ No newline at end of file
+body{background:#efefef}*{box-sizing:border-box}a,a:visited{color:#3bbf6d;text-decoration:none}a:hover{color:#2baf5d}.menu{list-style:none;margin:0;position:fixed;z-index:99;bottom:0;width:100%;left:0;right:0;height:44px;padding:10px 20px;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.menu li{display:inline;font-size:14px;font-weight:bold;margin:0 6px}.info{position:absolute;z-index:9;top:10px;width:220px;padding:20px;height:432px;max-width:90%;left:10px;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.info input{border:none;color:#111;width:100%;margin:5px 0;padding:10px;-moz-box-shadow:0 0 5px rgba(120,120,120,0.2);-webkit-box-shadow:0 0 5px rgba(120,120,120,0.2);box-shadow:0 0 5px rgba(120,120,120,0.2);outline:none}.info button{width:100%;background:#18f66b;color:#fff;border:none;margin:5px 0;padding:10px;outline:none;-moz-box-shadow:0 0 5px rgba(120,120,120,0.2);-webkit-box-shadow:0 0 5px rgba(120,120,120,0.2);box-shadow:0 0 5px rgba(120,120,120,0.2)}.info button.export{background:#88fefe}.info .col{display:inline-block;vertical-align:top;width:80px}.info .col:last-child{margin-left:15px}.palette{position:absolute;z-index:9;width:220px;left:10px;padding:10px;top:452px;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);text-align:center}.palette .inner{margin:0 auto}.palette .color{width:40px;height:40px;display:inline-block;vertical-align:top;cursor:pointer;position:relative}.palette .color .remove{display:block;position:absolute;top:0;right:0;width:8px;height:8px;background:rgba(0,0,0,0.2);text-align:center;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s;transition:.4s}.palette .color .remove:before{content:"X";font-family:Helvetica,Arial,sans-serif;font-size:4px;line-height:2.66666667px;vertical-align:middle;color:rgba(255,255,255,0.1);-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-ms-transition:.1s;transition:.1s;-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;-ms-transition-delay:0;transition-delay:0}.palette .color .remove:hover{background:rgba(0,0,0,0.7);width:40px;height:40px}.palette .color .remove:hover:before{font-size:8px;line-height:40px;color:rgba(255,255,255,0.7);-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.4s;-ms-transition-delay:.4s;transition-delay:.4s}.colors .color{width:50px;height:50px;display:inline-block;vertical-align:top;border:5px solid transparent;cursor:crosshair}.colors .color:hover{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;-ms-transition:.2s;transition:.2s;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border:5px solid rgba(255,255,255,0.7);-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.results{position:absolute;z-index:9;top:10px;width:240px;left:240px;padding:20px;height:auto;max-width:100%;overflow:auto;background:#fff;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.results textarea{border:none;font-size:10px;font-family:Arial;color:#111;width:100%;margin:5px 0;padding:10px 10px;-moz-box-shadow:0 0 5px rgba(120,120,120,0.2);-webkit-box-shadow:0 0 5px rgba(120,120,120,0.2);box-shadow:0 0 5px rgba(120,120,120,0.2);outline:none}.results .color{width:10px;height:10px;display:inline-block;vertical-align:middle;margin-right:5px}.results p{margin:8px 0}.about{margin:20px auto;width:400px;padding:20px;background:#fff;max-width:100%;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2)}.about p{margin:0 0 10px 0}
\ No newline at end of file
diff --git a/app/css/index.less b/app/css/index.less
index 3dcf5af..344734d 100644
--- a/app/css/index.less
+++ b/app/css/index.less
@@ -52,7 +52,7 @@ a:hover{
 		color: #111;
 		width: 100%;
 		margin: 5px 0;
-		padding: 10px 20px;
+		padding: 10px;
 		.box-shadow(0 0 5px rgba(120,120,120,.2));
 		outline: none;
 	}
@@ -62,7 +62,7 @@ a:hover{
 		color: #fff;
 		border:none;
 		margin:5px 0;
-		padding: 10px 20px;
+		padding: 10px;
 		outline: none;
 		.box-shadow(0 0 5px rgba(120,120,120,.2));
 		&.export{
@@ -173,6 +173,17 @@ a:hover{
 	overflow: auto;
 	background: #fff;
 	.box-shadow(0 0 5px rgba(0,0,0,.2));
+	textarea{
+		border:none;
+		font-size: 10px;
+		font-family: Arial;
+		color: #111;
+		width: 100%;
+		margin: 5px 0;
+		padding: 10px 10px;
+		.box-shadow(0 0 5px rgba(120,120,120,.2));
+		outline: none;
+	}
 	.color{
 		width: @resultColorSize;
 		height: @resultColorSize;
diff --git a/app/index.html b/app/index.html
index c5ee7d2..f50ee97 100644
--- a/app/index.html
+++ b/app/index.html
@@ -6,7 +6,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My AngularJS App</title>
+  <title>Random Colors</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
diff --git a/app/views/colors/colors.html b/app/views/colors/colors.html
index 173f39f..156d0bc 100644
--- a/app/views/colors/colors.html
+++ b/app/views/colors/colors.html
@@ -39,6 +39,10 @@
 	<p ng-repeat="color in palette">
 		<span class="color" style="background:#{{color.hex}}"></span> #{{color.hex}}
 	</p>
+	<p>
+		JSON:
+		<textarea>{{palette}}</textarea>
+	</p>
 </div>
 <div class="colors">
 	<div class="color" ng-repeat="color in patrone" ng-click="toggleColor(color)" style="background:#{{color.hex}}"></div>