Skip to content

Commit

Permalink
Plus: Eye Dropper Plus
Browse files Browse the repository at this point in the history
Eye Dropper Plus is version with little more features than basic. And more to
come.

Unlocking Plus is possible with in app payments, donations or for free with
simple click.
  • Loading branch information
kepi committed Sep 3, 2017
1 parent eea0982 commit 84bfe68
Show file tree
Hide file tree
Showing 13 changed files with 507 additions and 32 deletions.
36 changes: 34 additions & 2 deletions background.js
@@ -1,4 +1,4 @@
const BG_VERSION = 13
const BG_VERSION = 14
const NEED_DROPPER_VERSION = 11
const DEFAULT_COLOR = "#b48484"

Expand Down Expand Up @@ -42,7 +42,9 @@ var bg = {
enableColorToolbox: true,
enableColorTooltip: true,
enableRightClickDeactivate: true,
dropperCursor: 'default'
dropperCursor: 'default',
plus: false,
plus_type: null
},
settings: {},
edCb: null,
Expand Down Expand Up @@ -675,6 +677,36 @@ var bg = {
})
},

unlockPlus(type) {
bg.settings.plus = true
bg.settings.plus_type = type
bg.saveSettings()
},

lockPlus() {
bg.settings.plus = false
bg.settings.plus_type = null
bg.saveSettings()
},

plus() {
return bg.settings.plus ? bg.settings.plus_type : false
},

plusColor(color = bg.settings.plus_type) {
switch(color) {
case 'free':
return 'gray'
break;
case 'alpha':
return 'silver'
break;
default:
return color
}

},

init() {
console.group("init")

Expand Down
67 changes: 50 additions & 17 deletions html/options.html
Expand Up @@ -9,8 +9,13 @@

<link type="text/css" rel="stylesheet" href="/inc/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="/src/options.js"></script>
<!-- cointipper -->
<script type="text/javascript" src="/inc/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/inc/cointipper/jquery.cointipper-pack.min.js"></script>
<link rel="stylesheet" href="/inc/cointipper/jquery.cointipper.min.css">
<!-- cointipper end -->

<script src="/src/options.js"></script>
</head>

<body id="options-body">
Expand Down Expand Up @@ -88,22 +93,50 @@ <h4>Update Colors: <kbd>U</kbd></h4>

</div>

<div id="donation" class="col-lg-offset-1 col-sm-3 col-md-3">
<div>
<h3>Do you like Eye Dropper?</h3>
<p class="alert alert-success">First of all - if you like Eye Dropper <a href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka/reviews">rate it on Chrome Webstore</a> please.</p>
<div class="media">
<div class="media-body">
<p>If you find Eye Dropper useful, you can show your support by donation through Paypal. Any amount will encourage me to spend more time with Eye Dropper development. Thanks!</p>
</div>

</div>
<!-- Begin PayPal Donations -->
<form id="paypal-donation-options" class="text-center" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations"><input type="hidden" name="cmd" value="_donations" class="form-control"><input type="hidden" name="business" value="kepi@orthank.net" class="form-control"><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control"><input type="hidden" name="currency_code" value="USD" class="form-control"><input type="image" class="btn" src="/inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." class="form-control"></div>
</form>
</div>
</div>
<section id="donation" class="col-lg-offset-1 col-sm-3 col-md-3">
<section>
<h3>Like Eye Dropper?</h3>
<p class="alert alert-success">Give us 5 stars on <a href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka/reviews">Chrome Webstore</a>. Thanks!</p>

</section>

<br>
<section>
<h3>Found a bug? Have a wish?</h3>
<p>Create new issue at <a href="https://github.com/kepi/chromeEyeDropper/issues">Github page</a> please. Include as much details as you can.</p>
</section>

<br>
<h3>Want to support future development?</h3>
<br>

<section>
<section class="col-sm-3 col-md-3">
<a href="/html/plus.html" class="donate-btn" style="background-color: red">Unlock <span style="font-variant: small-caps; font-weight: bold;">Plus</span></a>
</section>

<section class="col-sm-3 col-md-3" style="text-align: left">
<!-- Begin PayPal Donations -->
<form id="paypal-donation-options" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<div class="paypal-donations"><input type="hidden" name="cmd" value="_donations" class="form-control">
<input type="hidden" name="business" value="kepi@orthank.net" class="form-control">
<input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/"
class="form-control"><input type="hidden" name="item_name"
value="Eye Dropper" class="form-control">
<input type="hidden" name="currency_code" value="USD" class="form-control">
<input
type="image" class="btn" src="/inc/btn_donate_LG.gif" name="submit"
alt="PayPal - The safer, easier way to pay online." class="form-control"></div>
</form>
</section>

<section class="col-sm-3 col-md-3">
<div id="donate-bitcoin" class="center"></div>
</section>

</section>
</section>
</div>
</div>
</body>
Expand Down
152 changes: 152 additions & 0 deletions html/plus.html
@@ -0,0 +1,152 @@
<!doctype html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Eye Dropper PLUS</title>

<script type="text/javascript" src="/inc/buy.js"></script>
<script type="text/javascript" src="/src/plus.js"></script>

<link rel="stylesheet" href="/inc/tachyons-4.0.4.css">


<!-- cointipper -->
<script type="text/javascript" src="/inc/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/inc/cointipper/jquery.cointipper-pack.min.js"></script>
<link rel="stylesheet" href="/inc/cointipper/jquery.cointipper.min.css">
<!-- cointipper end -->

<style type="text/css">
ul {
list-style: none;
padding: 0px;
margin: 0px;
padding-left: 2rem;
}

li {
position: relative;
}

li:before {
background-image: url('/img/square-o.svg');
content: '';
height: 1rem;
width: 1rem;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: -1.5rem;
top: 0.1rem;
}

li.done:before {
background-image: url('/img/check-square-o.svg');
}
</style>
</head>
<body>
<section class="bg-black-10 h4 cf">
<header class="center w-50-l w-75-m w-100-ns">
<h1 class="f1 helvetica">Eye Dropper <span class="small-caps">Plus</span></h1>
</header>
</section>

<section class="center w-50-l w-75-m w-100-ns">

<section class="w-100 bg-washed-green br1 mv3 pv1 ph4 f5 lh-copy">
<p><span class="small-caps">Plus</span> is little experiment of mine. There are some new futures not available in "basic version". You can unlock them either using few bucks or for free.</p>

<p>If enough people use money option, I'll be able to spend more time working on new features, fixes and polishing.</p>
</section>

<section class="fl w-50 lh-copy">
<h2><span class="small-caps">Plus</span> Features</h2>
<h3>Color Palettes</h3>
<ul>
<li class="done">Create separate palettes for different projects</li>
<li>TODO: Export all colors and palettes to one CSV</li>
<li>TODO: Possibility to rename palettes</li>
<li>TODO: Trash Colors Undo</li>
<li>TODO: Palette Destroy Undo</li>
</ul>

<h3>Color Features</h3>
<ul>
<li class="done">Date and time when color was picked</li>
<li class="done">Source of picking - Web Page, Color Picker, Conversion (from old history)</li>
<li>TODO: Possibility to add color to favorites</li>
</ul>

<h3>New Pick from Web Page Features</h3>
<ul>
<li>TODO: Pick multpile colors at once</li>
<li>TODO: New picker cursor with magnifier</li>
</ul>


<p>and more later&hellip;</p>

</section>

<section class="fr w-33 lh-copy">

<section id="plus-locked">

<h2>Unlock <span class="small-caps">Plus</span></h2>
<p>Any option will unlock all <span class="small-caps">Plus</span> features for all your Chrome browsers (with same google account). Its up to you.</p>

<div id="edplus-failed"></div>

<section id="edplus-products">
</section>

<p>Already donated or can't spare coins now?</p>

<div class="cf">
<div id="unlock-free" class="cf pa2 mb1"><button class="dib fr w-50 tr">Unlock for free</button></div>
</div>

<h2>Donate</h2>

<p>Can't use Google's payment system, and still want to support Eye Dropper's development? You can always send donation using Paypal or Bitcoins and
<a href="#" id="unlock-donations">unlock by donation here</a>.</p>

</section>

<section id="plus-unlocked">
<h2><span class="small-caps">Plus</span> unlocked</h2>

<p>Thanks! All Eye Dropper <span class="small-caps">Plus</span> features are unlocked in all Chrome browsers where you are signed in with same account.</p>

<div id="plus-type"></div>

<h2>Donate</h2>

<p>If you want to support Eye Dropper development in the future, you can always use donate buttons.</p>

</section>

<section>
<section class="fl w-50">
<div id="donate-bitcoin" class="center"></div>
</section>

<section class="fr w-50 mt1">
<!-- Begin PayPal Donations -->
<form id="paypal-donation-options" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations"><input type="hidden" name="cmd" value="_donations" class="form-control">
<input type="hidden" name="business" value="kepi@orthank.net" class="form-control">
<input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control">
<input type="hidden" name="currency_code" value="USD" class="form-control">
<input type="image" class="btn" src="/inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." class="form-control"></div>
</form>
</section>
</section>

</section>
</body>
</html>
5 changes: 1 addition & 4 deletions html/popup.html
Expand Up @@ -104,10 +104,7 @@
</article>
<section class="mw5 mw7-ns center bg-light-gray cf pa2" style="width: 34rem">
<section class="fl">
<!-- Begin PayPal Donations -->
<form id="paypal-donation-footer" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<div class="paypal-donations hint--top hint--no-animate hint--rounded hint--small" aria-label="Want to support my Steam addiction?"><input type="hidden" name="cmd" value="_donations" class="form-control"><input type="hidden" name="business" value="kepi@orthank.net" class="form-control"><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control"><input type="hidden" name="currency_code" value="USD" class="form-control"><input type="image" class="btn grow" src="/inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."></div>
</form>
<a href="#" data-url="/html/plus.html" aria-label="Unlock more features" id="plus-badge" class="ed-external link hint--right hint--no-animate block bg-red pv1 ph2 br1 mt1 db white no-underline">Unlock <span class="small-caps b">Plus</span></a>
</section>
<section class="fr">
<a href="#" data-url="http://eye-dropper.kepi.cz/" class="ed-external link gray dib h1 w1 bg-near-white ba b--black-10 br-100 pa1 mr1 hint--top hint--no-animate hint--rounded" aria-label="It's Bigger On the Inside">
Expand Down
2 changes: 2 additions & 0 deletions img/check-square-o.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions img/icons.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 84bfe68

Please sign in to comment.