-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
73 lines (73 loc) · 7.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Colordrop by ApoorvSaxena</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Colordrop</h1>
<h2 class="project-tagline">Interactive Drag & Drop Coloring</h2>
<a href="https://github.com/ApoorvSaxena/colordrop" class="btn">View on GitHub</a>
<a href="https://github.com/ApoorvSaxena/colordrop/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/ApoorvSaxena/colordrop/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<div class="center">
<a href="javascript:(function()%7B(function()%7Bvar%20el%3Ddocument.createElement('script')%3Bel.type%3D'text%2Fjavascript'%3Bel.src%3D'https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js'%3Bel.onerror%3Dfunction()%7Balert(%22Looks%20like%20the%20Content%20Security%20Policy%20directive%20is%20blocking%20the%20use%20of%20bookmarklets%5Cn%5CnYou%20can%20copy%20and%20paste%20the%20content%20of%3A%5Cn%5Cn%5C%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%5C%22%5Cn%5Cninto%20your%20console%20instead%5Cn%5Cn(link%20is%20in%20console%20already)%22)%3Bconsole.log(%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%22)%3B%7D%3Bdocument.getElementsByTagName('body')%5B0%5D.appendChild(el)%3B%7D)()%7D)();" class="btn btn-demo">Click Here for Demo</a>
</div>
<p><a href="https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm"><img src="https://raw.githubusercontent.com/ApoorvSaxena/colordrop/master/chrome-extension/images/coloring_concept.gif" alt="Colordrop Interactive Drag and Drop Coloring"></a></p>
<p>Color a website by dragging and dropping a color droplet from a palette.</p>
<h2>
<a id="installation" class="anchor" href="index.html#installation" aria-hidden="true"><span class="octicon octicon-link"></span></a>Installation
</h2>
<h4>
<a id="chrome-extension-download-from-chrome-webstore" class="anchor" href="index.html#chrome-extension-download-from-chrome-webstore" aria-hidden="true"><span class="octicon octicon-link"></span></a>Chrome Extension: <a href="https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm">Download from Chrome WebStore</a>
</h4>
<p>or</p>
<h4>
<a id="bookmarklet" class="anchor" href="index.html#bookmarklet" aria-hidden="true"><span class="octicon octicon-link"></span></a>Bookmarklet:
</h4>
<p>Drag and Drop this <b><a href="javascript:(function()%7B(function()%7Bvar%20el%3Ddocument.createElement('script')%3Bel.type%3D'text%2Fjavascript'%3Bel.src%3D'https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js'%3Bel.onerror%3Dfunction()%7Balert(%22Looks%20like%20the%20Content%20Security%20Policy%20directive%20is%20blocking%20the%20use%20of%20bookmarklets%5Cn%5CnYou%20can%20copy%20and%20paste%20the%20content%20of%3A%5Cn%5Cn%5C%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%5C%22%5Cn%5Cninto%20your%20console%20instead%5Cn%5Cn(link%20is%20in%20console%20already)%22)%3Bconsole.log(%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%22)%3B%7D%3Bdocument.getElementsByTagName('body')%5B0%5D.appendChild(el)%3B%7D)()%7D)();">Colordrop</a></b> (Bookmarklet) into the Bookmarks bar</p>
<p>or</p>
<p>Just add this into the URL section of a new bookmark:</p>
<pre><code>javascript:(function()%7B(function()%7Bvar%20el%3Ddocument.createElement('script')%3Bel.type%3D'text%2Fjavascript'%3Bel.src%3D'https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js'%3Bel.onerror%3Dfunction()%7Balert(%22Looks%20like%20the%20Content%20Security%20Policy%20directive%20is%20blocking%20the%20use%20of%20bookmarklets%5Cn%5CnYou%20can%20copy%20and%20paste%20the%20content%20of%3A%5Cn%5Cn%5C%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%5C%22%5Cn%5Cninto%20your%20console%20instead%5Cn%5Cn(link%20is%20in%20console%20already)%22)%3Bconsole.log(%22https%3A%2F%2Frawgit.com%2FApoorvSaxena%2Fcolordrop%2Fmaster%2Fdist%2Fproduction.min.js%22)%3B%7D%3Bdocument.getElementsByTagName('body')%5B0%5D.appendChild(el)%3B%7D)()%7D)();</code></pre>
<p>Mozilla has a <a href="https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks#w_how-do-i-install-a-bookmarklet">step by step description</a> on how to add a bookmarklet.</p>
<p>Or alternatifly just copy and paste the content of <a href="https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js">production.min.js</a> to your browser console.</p>
<p><strong>You need to fall back to the browser extension or the copy and paste version for sites that block external scripts in their Content Security Policy directives.</strong></p>
<hr>
<h2>
<a id="usage" class="anchor" href="index.html#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage
</h2>
<p>Drag a color from the color palette(inspired by Material Design) to a website and color designated areas of it (like sections or texts). One can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements.</p>
<p>Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle.</p>
<hr>
<h2>
<a id="browser-support" class="anchor" href="index.html#browser-support" aria-hidden="true"><span class="octicon octicon-link"></span></a>Browser Support
</h2>
<p><strong>Colordrop</strong> works best on latest browsers supporting transitions.</p>
<p>For all non-supported browsers, the extension does nothing and fallbacks to normal behavior without any explicit handling in your code.</p>
<hr>
<h2>
<a id="license" class="anchor" href="index.html#license" aria-hidden="true"><span class="octicon octicon-link"></span></a>License
</h2>
<p>Copyright (c) 2015 Apoorv Saxena, <a href="../index.html">http://apoorvsaxena.github.io</a>
Licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
</p>
<hr>
<h2>
<a id="credits" class="anchor" href="index.html#credits" aria-hidden="true"><span class="octicon octicon-link"></span></a>Credits
</h2>
<p>Mary Lou - for her contribution <a href="http://tympanus.net/codrops/2015/04/22/interactive-drag-drop-coloring-concept/">interactive drag and drop coloring concept</a>.</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/ApoorvSaxena/colordrop">Colordrop</a> is maintained by <a href="https://github.com/ApoorvSaxena">ApoorvSaxena</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
<link rel="stylesheet" type="text/css" href="static/stylesheets/normalize.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="static/stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="static/stylesheets/github-light.css" media="screen">
</body>
</html>