Better instructions and compression

javierbyte · javierbyte · commit 7d41260f97bf · 2015-10-31T01:29:20.000-06:00
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>img2css</title>
     <link rel="stylesheet" href="style/main.css">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:300,300italic,100' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <div id='root'></div>
diff --git a/src/App.js b/src/App.js
@@ -9,40 +9,51 @@ export const App = React.createClass({
 
   getInitialState () {
     return {
-      rgbArray: null
+      rgbArray: null,
+      loadingImage: false
     }
   },
 
   onDrop (files) {
     var file = files[0]
     var fr = new window.FileReader()
+
+    this.setState({
+      loadingImage: true
+    })
+
     fr.onload = (data) => {
       const base64 = data.currentTarget.result
 
       base64ImageToRGBArray(base64, (err, data) => {
         if (err) return console.error(err)
 
         this.setState({
-          rgbArray: data
+          rgbArray: data,
+          loadingImage: false
         })
       })
     }
     fr.readAsDataURL(file)
   },
 
   render () {
-    var {rgbArray} = this.state
+    var {rgbArray, loadingImage} = this.state
 
     var masterShadow = _.map(rgbArray, (row, rowIndex) => {
       return _.map(row, (col, colIndex) => {
-        return `rgb(${col.r}, ${col.g}, ${col.b}) ${colIndex}px ${rowIndex}px`
+        return `rgb(${col.r},${col.g},${col.b}) ${colIndex ? colIndex + 'px' : 0} ${rowIndex ? rowIndex + 'px' : 0}`
       }).join(',')
     }).join(',')
 
     return (
-      <div>
+      <div className='padding-2x'>
+        <h1>img2css.</h1>
+        <div>This is a tool that can convert any image into a <i>pure css</i> image.</div>
+        <div>Try it! (It's cpu heavy, please try with a small image first).</div>
+
         <Dropzone onDrop={this.onDrop} className='dropZone'>
-          <div>Drop image here, or click to upload.</div>
+          {loadingImage ? 'Processing...' : 'Drop an image here, or click to upload.'}
         </Dropzone>
 
         {rgbArray && (
@@ -57,15 +68,19 @@ export const App = React.createClass({
             }} />
 
             <div className='tutorial'>
-              Now you can create a single pixel 'div' and with these styles you will get your image!
+              The code:
             </div>
 
             <div className='code'>
-              {`box-shadow: ${masterShadow}`}
+              {`<div style="height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
             </div>
           </div>
         )}
 
+        <div className='tutorial'>
+          Created by <a href='http://github.com/javierbyte/'>javierbyte</a>.
+        </div>
+
       </div>
     )
   }
diff --git a/style/main.css b/style/main.css
@@ -1,42 +1,60 @@
-@import 'san-francisco.css';
-
 * {
 	padding: 0;
 	margin: 0;
 	position: relative;
 }
 
 body {
-	font-family: 'San Francisco', serif;
+	font-family: 'Roboto', sans-serif;
+	font-size: 16px;
+	line-height: 1.618;
 	font-weight: 300;
+	color: #404143;
+}
+
+h1 {
+	font-weight: 100;
+	font-size: 3em;
+	line-height: 1;
+	padding-bottom: 0.309em;
+}
+
+.padding-2x {
+	padding: 2em;
 }
 
 .pixel {
 	height: 1px;
 	width: 1px;
 	background: #000;
-	margin-left: 1em;
 }
 
 .dropZone {
 	height: 150px;
 	width: 150px;
-	margin: 1em;
+	margin: 1em 0;
 	display: flex;
 	text-align: center;
 	align-items: center;
 	border: 2px dashed #ccc;
 	padding: 2em;
 	cursor: pointer;
 }
+.dropZone span {
+	width: 100%;
+}
+.dropZone:hover {
+	border-color: #999;
+}
 
 .tutorial {
-	padding: 1em;
+	padding: 1em 0;
 }
 
 .code {
 	font-family: monaco, monospace;
 	font-size: 0.6em;
+	line-height: 1.309;
 	padding: 2em;
 	background: #f0f0f0;
 }
