colordrop - GitLite

KO | EN

gitlite — search

#javascript #python #typescript #llm #golang #machine-learning #rust #deep-learning #docker #nodejs #awesome #cli #vue #mcp

colordrop

(★ 132)

Interactive Drag & Drop Coloring with Material Design Color palette

파일 탐색기

최종 버전 다운로드 (.zip)

- - icon128.png
  - icon16.png
  - icon19.png
  - icon48.png
- - coloring_concept.gif
  - drag.svg
  - drop_reset.svg
  - time.svg
- manifest.json
- production.min.js
- - github-light.css
  - normalize.css
  - stylesheet.css
.gitignore
_config.yml
Gemfile
Gruntfile.js
index.html
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ApoorvSaxena/colordrop

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd colordrop

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

3. Ruby

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Ruby bundle 명령어를 쓰려면 Ruby가 필요합니다.

bundle install

Gemfile에 명시된 루비 라이브러리를 설치합니다.

✅ bundle install이 에러 없이 끝나면 README에 안내된 실행 명령어(예: rails server)로 마저 실행해보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Colordrop
=====
*Interactive Drag and Drop Coloring*
***

[![Colordrop Interactive Drag and Drop Coloring](https://raw.githubusercontent.com/ApoorvSaxena/colordrop/master/chrome-extension/images/coloring_concept.gif)](https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm)

Color a website by dragging and dropping a color droplet from a palette.

Installation
-----

#### Chrome Extension: [Download from Chrome WebStore](https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm)

or

#### Bookmarklet:
Just add this into the URL section of a new bookmark:

```
javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();
```
Mozilla has a [step by step description](https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks#w_how-do-i-install-a-bookmarklet) on how to add a bookmarklet.

Or alternatifly just copy and paste the content of [production.min.js](https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js) to your browser console.

**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.**
***

Usage
-----

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.

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.
***

Browser Support
-----

**Colordrop** works best on latest browsers supporting transitions.

For all non-supported browsers, the extension does nothing and fallbacks to normal behavior without any explicit handling in your code.
***

License
-----

Copyright (c) 2015 Apoorv Saxena, http://apoorvsaxena.github.io
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
***

Credits
-----

Mary Lou - for her contribution [interactive drag and drop coloring concept](http://tympanus.net/codrops/2015/04/22/interactive-drag-drop-coloring-concept/).