-
-
open
-
-
facebook
-
reddit
-
sorry, something went wrong. maybe try again?
+
-
+
+
+
+
drag an image into the browser window to modify it.
+
this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corrupted file still shows something. inspired by soulwire s experiment in flash. this experiment was created by georg . you can follow him on twitter or explore the source code on github .
+
if you like this one, you can check out some of his other javascript experiments .
+
✕
+
diff --git a/scripts/main.js b/scripts/main.js
index 40d3f2c..879bc97 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -20,6 +20,7 @@ require(
'src/import-button',
'src/random-button',
'src/upload-imgur',
+ 'src/intro',
'util/feature-test',
'lib/signals-1.0.0'
],
@@ -33,6 +34,7 @@ require(
import_button,
random_button,
imgur,
+ intro,
testFeatures,
Signal
)
@@ -49,6 +51,7 @@ require(
'set-new-src' : new Signal(),
'control-set' : new Signal(),
'control-updated' : new Signal(),
+ 'close-intro' : new Signal(),
'image-data-url-requested' : new Signal()
}
};
@@ -62,6 +65,7 @@ require(
image.init( shared );
file.init( shared );
imgur.init( shared );
+ intro.init( shared );
}
function showError( required_features )
diff --git a/scripts/src/dragdrop.js b/scripts/src/dragdrop.js
index c24482d..80a7d51 100644
--- a/scripts/src/dragdrop.js
+++ b/scripts/src/dragdrop.js
@@ -34,6 +34,7 @@ define(
)
{
signals['load-file'].dispatch( event.dataTransfer.files[0] );
+ signals['close-intro'].dispatch();
}
}
diff --git a/scripts/src/image.js b/scripts/src/image.js
index 563cb3e..c383680 100644
--- a/scripts/src/image.js
+++ b/scripts/src/image.js
@@ -5,6 +5,7 @@ define(
var signals;
var image;
var initialized = false;
+ var defaultimage = document.body.getAttribute( 'data-defaultimage' );
function init( shared )
{
@@ -17,7 +18,7 @@ define(
// the image "Abraham Lincoln November 1863" is public domain:
// https://en.wikipedia.org/wiki/File:Abraham_Lincoln_November_1863.jpg
- setSrc( 'lincoln.jpg' );
+ setSrc( defaultimage );
}
function imageLoaded()
diff --git a/scripts/src/import-button.js b/scripts/src/import-button.js
index ccd6a52..f101b37 100644
--- a/scripts/src/import-button.js
+++ b/scripts/src/import-button.js
@@ -50,6 +50,7 @@ define(
)
{
signals['load-file'].dispatch( event.target.files[0] );
+ signals['close-intro'].dispatch();
}
}
diff --git a/scripts/src/intro.js b/scripts/src/intro.js
new file mode 100644
index 0000000..1d0426e
--- /dev/null
+++ b/scripts/src/intro.js
@@ -0,0 +1,48 @@
+/*global define*/
+define(
+ function()
+ {
+ var signals;
+ var is_open = true;
+ var element = document.querySelectorAll( '.intro' )[0];
+ var button = document.querySelectorAll( '.intro-button' )[0];
+ var close_button = element.querySelectorAll( '.close' )[0];
+
+ function init( shared )
+ {
+ signals = shared.signals;
+ button.addEventListener( 'click', buttonClicked );
+ close_button.addEventListener( 'click', close );
+ signals['close-intro'].add( close );
+ }
+
+ function buttonClicked( event )
+ {
+ if ( is_open )
+ {
+ close();
+ }
+
+ else
+ {
+ open();
+ }
+ }
+
+ function open()
+ {
+ button.classList.add( 'is-active' );
+ element.classList.add( 'is-active' );
+ is_open = true;
+ }
+
+ function close()
+ {
+ button.classList.remove( 'is-active' );
+ element.classList.remove( 'is-active' );
+ is_open = false;
+ }
+
+ return { init: init };
+ }
+);
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index db4f527..cdf0438 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,40 +1,59 @@
-*
-{
+* {
margin: 0;
padding: 0;
}
-body
-{
- padding: 50px;
+body {
font-family: sans-serif;
color: #666;
line-height: 18px;
- font-size: 12px;
+ font-size: 14px;
}
-a
-{
+a {
color: #06f;
text-decoration: none;
}
-a:hover
-{
+a:hover {
text-decoration: underline;
}
-.is-hidden
-{
+.is-hidden {
display: none;
}
-.button
-{
- background-color: #eaeaea;
+.full-width {
+ width: 100%;
+}
+
+.dark-bg {
+ background-color: #333;
+}
+
+.light-bg {
+ background-color: #efefef;
+ border-bottom: 1px #ddd solid;
+}
+
+.center {
+ max-width: 860px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.nav-wrapper {
+ padding-top: 17px;
+ padding-bottom: 17px;
+ position: relative;
+ z-index: 3;
+}
+
+.button {
+ background-color: #ddd;
padding: 5px 9px;
display: inline-block;
- color: #06f;
+ color: #666;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
@@ -43,223 +62,261 @@ a:hover
font-size: 12px;
text-decoration: none;
line-height: normal;
+ margin-right: 4px;
}
-.button:hover
-{
+.button:hover {
background-color: #06f;
color: #fff;
text-decoration: none;
}
-#random-button
-{
+.dark-bg .button {
+ background-color: #666;
+ color: #ccc;
+}
+
+.dark-bg .button:hover {
+ background-color: #999;
+ color: #fff;
+}
+
+.dark-bg a {
+ color: #ddd;
+}
+
+#random-button {
position: relative;
- top: 3px;
+ top: 6px;
}
-.headline
-{
- font-size: 12px;
- color: #333;
- margin-bottom: 10px;
+.headline {
+ font-size: 16px;
+ color: #fff;
+ display: inline-block;
+ font-weight: normal;
+ margin-right: 20px;
+ position: relative;
+ top: 1px;
}
-.intro
-{
- max-width: 650px;
+.intro {
+ width: 100%;
+ position: absolute;
+ top: -100%;
+ background-color: #fff;
+ background-color: rgba(255,255,255, 0.9);
+ -webkit-transition: all 0.5s ease-in;
+ transition: all 0.5s ease-in;
}
-#controls
-{
- float: left;
- margin-top: 30px;
+.intro.is-active {
+ top: 0;
+}
+
+.intro .center {
+ padding: 30px;
+ max-width: 580px;
+ position: relative;
+}
+
+.intro .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: block;
+ font-size: 16px;
+ background-color: transparent;
+ border: none;
+ color: #06f;
+ cursor: pointer;
+}
+
+.intro-button {
+ float: right;
+}
+
+.intro-button.is-active,
+.intro-button.is-active:hover {
+ background-color: #ddd;
+ color: #666;
+}
+
+#controls {
display: none;
}
-#controls.is-active
-{
+#controls.is-active {
display: block;
}
- .control-wrapper
- {
- float: left;
- width: 200px;
- margin-right: 20px;
- }
+.control-wrapper {
+ display: inline-block;
+ width: 160px;
+ margin-right: 20px;
+}
- .control-label
- {
- display: block;
- color: #666;
- }
+.control-label {
+ font-size: 11px;
+ display: block;
+ color: #666;
+ text-align: center;
+ max-width: 120px;
+}
- .control-slider
- {
- display: block;
- float: left;
- border: none;
- width: 160px;
- height: 1px;
- margin-top: 6px;
- background: #ddd;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
+.control-slider {
+ display: block;
+ float: left;
+ border: none;
+ width: 120px;
+ height: 1px;
+ margin-top: 6px;
+ background: #ddd;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
- .control-number
- {
- display: block;
- color: #333;
- float: right;
- border: none;
- max-width: 30px;
- font-family: sans-serif;
- }
+.control-number {
+ display: block;
+ color: #333;
+ float: right;
+ border: none;
+ max-width: 30px;
+ font-family: sans-serif;
+ background-color: transparent;
+}
-#import-input
-{
+#import-input {
display: none;
}
-.export-wrapper
-{
- clear: both;
- float: left;
- margin-top: 30px;
+.download-link {
+ display: none;
}
- .download-link
- {
- display: none;
- }
+.download-link.is-active {
+ display: inline-block;
+ margin-left: 15px;
+}
- .download-link.is-active
- {
- display: inline-block;
- margin-left: 15px;
- }
+.download-link span {
+ color: #999;
+ display: inline-block;
+ text-decoration: none;
+ margin-left: 4px;
+}
- .download-link span
- {
- color: #999;
- display: inline-block;
- text-decoration: none;
- margin-left: 4px;
- }
-
-#imgur-button
-{
+#imgur-button {
width: 85px;
}
#imgur-button.is-uploading,
-#imgur-button.is-uploading:hover
-{
- background-color: #eaeaea;
- color: #06f;
+#imgur-button.is-uploading:hover {
+ background-color: #ddd;
+ color: #666;
cursor: default;
}
- #imgur-button span
- {
- display: block;
- width: 154px;
- transition: margin-left 0.5s ease-in;
- transition-property: margin-left top;
- text-align: left;
- overflow: hidden;
- }
+#imgur-button span {
+ display: block;
+ width: 154px;
+ -webkit-transition: margin-left 0.5s ease-in;
+ transition: margin-left 0.5s ease-in;
+ -webkit-transition-property: margin-left top;
+ transition-property: margin-left top;
+ text-align: left;
+ overflow: hidden;
+}
+#imgur-button.is-uploading span {
+ margin-left: -76px;
+}
- #imgur-button.is-uploading span
- {
- margin-left: -76px;
- }
+#imgur-button span::after {
+ content: 'loading…';
+ display: inline-block;
+ padding-left: 15px;
+ color: #999;
+}
- #imgur-button span::after
- {
- content: 'loading…';
- display: inline-block;
- padding-left: 15px;
- color: #999;
- }
-
-#imgur-url-container
-{
+#imgur-url-container {
display: inline-block;
opacity: 0;
+ -webkit-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
-#imgur-url-container.is-active
-{
+#imgur-url-container.is-active {
opacity: 1;
}
- #imgur-url-input
- {
- padding: 4px 9px;
- border: 1px #CCC solid;
- border-radius: 3px;
- font-family: sans-serif;
- font-size: 13px;
- color: #7C7C7C;
- }
+#imgur-url-input {
+ padding: 5px 9px 4px 9px;
+ border: none;
+ border-radius: 2px;
+ font-family: sans-serif;
+ font-size: 13px;
+ color: #333;
+ margin-right: 7px;
+ position: relative;
+ top: 1px;
+}
- #imgur-url-error
- {
- padding: 5px 9px;
- line-height: normal;
- color: #999;
- }
+#imgur-url-error {
+ padding: 5px 9px;
+ line-height: normal;
+ color: #999;
+}
- #imgur-url-input,
- #imgur-url-link,
- #imgur-url-error
- {
- display: none;
- }
-
- #imgur-url-container.upload-successful #imgur-url-input,
- #imgur-url-container.upload-successful #imgur-url-link
- {
- display: inline-block;
- }
-
- #imgur-url-container.upload-failed #imgur-url-error
- {
- display: inline-block;
- }
-
-.social-link
-{
+#imgur-url-input,
+#imgur-url-link,
+#imgur-url-error {
display: none;
}
- .upload-successful .social-link
- {
- display: inline-block;
+#imgur-url-container.upload-successful #imgur-url-input,
+#imgur-url-container.upload-successful #imgur-url-link {
+ display: inline-block;
+}
+
+#imgur-url-container.upload-failed #imgur-url-error {
+ display: inline-block;
+}
+
+.social-link {
+ display: none;
+}
+
+.upload-successful .social-link {
+ display: inline-block;
+}
+
+.missing-feature {
+ clear: both;
+}
+
+.canvas-wrapper {
+ width: 100%;
+ position: relative;
+ background-color: rgba(255, 255, 255, 0.9);
+ line-height: 1.7;
+}
+
+#canvas {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ max-width: 100%;
+}
+
+@media all and (max-width: 860px) {
+ .nav-wrapper {
+ text-align: center;
}
-
-.missing-feature
-{
- clear: both;
-}
-
-.canvas-wrapper
-{
- width: 100%;
- clear: both;
- float: left;
- margin-top: 30px;
-
-}
- #canvas
- {
- display: block;
- max-width: 100%;
- }
\ No newline at end of file
+ .center {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
\ No newline at end of file