This repository has been archived by the owner on Oct 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
58 lines (56 loc) · 18.6 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
<!DOCTYPE html>
<html data-n-head="" data-n-head-ssr>
<head>
<meta data-n-head="true" charset="utf-8"><meta data-n-head="true" content="width=device-width,initial-scale=1" name="viewport"><meta data-n-head="true" content="Duotone - Online Colour Gradient Mapper" name="description" data-hid="description"><title data-n-head="true">duotone</title><link href="/favicon.ico" rel="icon" data-n-head="true" type="image/x-icon"><link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet" data-n-head="true"><base href="/duotone/"><link href="/duotone/_nuxt/manifest.f4155d4ceb3052f41145.js" rel="preload" as="script"><link href="/duotone/_nuxt/vendor.1345a7503a804bbac5e1.js" rel="preload" as="script"><link href="/duotone/_nuxt/app.7aca63b395a807754ba1.js" rel="preload" as="script"><link href="/duotone/_nuxt/layouts/default.a6dda0bc47038d40120a.js" rel="preload" as="script"><link href="/duotone/_nuxt/pages/index.bbef4ef816a5da66798a.js" rel="preload" as="script"><link href="/duotone/_nuxt/pages/extract.cc34f74dc5d483bfcad0.js" rel="prefetch"><style data-vue-ssr-id="aafbe1c8:0">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;-webkit-transition:width .2s,opacity .4s;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999}</style><style data-vue-ssr-id="46314aec:0">html{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;word-spacing:1px;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;overflow:hidden}*,:after,:before,html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{margin:0}</style><style data-vue-ssr-id="8a6070c8:0">*{-webkit-box-sizing:border-box;box-sizing:border-box}main{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100vw;height:100vh}header,main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}header{background:#333;font-family:Nunito,sans-serif;color:#fff;padding:.8em 1em;font-size:1.2em;font-weight:700;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}header .duo{color:#fdc66c}header .tone{color:#ed3ea4}header .attribution{font-size:.8em;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-top:.2em;text-align:right}header a,header a:active,header a:hover,header a:link,header a:visited{color:#14bdcc;text-decoration:none}button{font-family:Nunito,sans-serif;color:#fff;font-size:1em;padding:.8em 1em;background:#14bdcc;border-radius:3px;border:none}section{overflow:hidden}aside{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;padding:.8em 1em;color:#333}.preview,aside{display:-webkit-box;display:-ms-flexbox;display:flex}.preview{-webkit-box-flex:1;-ms-flex:1;flex:1;background:#f0f0f0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;text-align:center;padding:2em;background-image:-moz-linear-gradient(45deg,#e6e6e6 25%,transparent 25%),-moz-linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),-moz-linear-gradient(45deg,transparent 75%,#e6e6e6 75%),-moz-linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,#e6e6e6),color-stop(.25,transparent)),-webkit-gradient(linear,0 0,100% 100%,color-stop(.25,#e6e6e6),color-stop(.25,transparent)),-webkit-gradient(linear,0 100%,100% 0,color-stop(.75,transparent),color-stop(.75,#e6e6e6)),-webkit-gradient(linear,0 0,100% 100%,color-stop(.75,transparent),color-stop(.75,#e6e6e6));background-size:50px 50px;-webkit-background-size:50px 51px;background-position:0 0,25px 0,25px -25px,0 25px;position:relative}.preview-image{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1}.image-preview{width:100%;height:100%}.offscreen{visibility:hidden;position:absolute}h3{margin:1em 0 .5em}.gradient-wrapper{text-decoration:none;font-size:.9em;color:#fff}.gradient{width:100%;border:.2em solid #fff;padding:.3em}.gradient .label{background:#000;color:#fff;display:inline-block;padding:0 .2em}.gradient.active{border-color:#000}.gradient.active .label{color:#000;background:#fff}.scrolling-panel{overflow:scroll}</style>
</head>
<body data-n-head="">
<div id="__nuxt" data-server-rendered="true"><div class="nuxt-progress" style="width:0%;height:2px;background-color:#3b8070;opacity:0"></div><div id="__layout"><main><header><div class="brand"><span class="duo">duo</span><span class="tone">tone</span></div><div class="attribution">
made by <a href="https://twitter.com/psyked">@psyked</a></div></header><section class="container"><aside class="sidebar"><h3>1. Select a file</h3><input accept="image/*" type="file"><h3>2. Choose a filter</h3><div class="scrolling-panel"><a href="#" class="gradient-wrapper"><div class="gradient active"><div class="label">No filter</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#000,#fff)"><div class="label">Greyscale</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#0f7073,#65b993,#e8e280)"><div class="label">Avocado</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#26454d,#684c64,#8b9e88,#ade0ab,#fdf8cc)"><div class="label">Asparagus</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#433c45,#39725a,#8aad63,#fe9a65,#e5e79c)"><div class="label">Green / Orange</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#01283c,#026192)"><div class="label">Dark Blue</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#011d67,#ef3124)"><div class="label">Red / Blue</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#320a41,#93d7fa)"><div class="label">Light Blue</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#002436,#fc7c51)"><div class="label">Blue / Dark Orange</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#002436,#f49722)"><div class="label">Blue / Orange</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#002436,#2aa88c)"><div class="label">Seafoam</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#002436,#f0efe1)"><div class="label">Blue / Tan</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#4222f1,#9eefe1)"><div class="label">Spotify Blue</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#ed3ea4,#fec76c)"><div class="label">Spotify Peachy</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#3eb09b,#edeee9)"><div class="label">Deeson Green</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#5595d2,#edeee9)"><div class="label">Deeson Blue</div></div></a><a href="#" class="gradient-wrapper"><div class="gradient" style="background:linear-gradient(to right,#ff0046,#edeee9)"><div class="label">Deeson Red</div></div></a></div><h3>3. Download the result</h3><button>Download</button></aside><div class="preview"><div class="preview-image" id="svg-container"><svg class="image-preview" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="greyscale"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0 1" type="table"></feFuncR><feFuncG tableValues="0 1" type="table"></feFuncG><feFuncB tableValues="0 1" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="avocado"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.058823529411764705 0.396078431372549 0.9098039215686274" type="table"></feFuncR><feFuncG tableValues="0.4392156862745098 0.7254901960784313 0.8862745098039215" type="table"></feFuncG><feFuncB tableValues="0.45098039215686275 0.5764705882352941 0.5019607843137255" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="asparagus"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.14901960784313725 0.40784313725490196 0.5450980392156862 0.6784313725490196 0.9921568627450981" type="table"></feFuncR><feFuncG tableValues="0.27058823529411763 0.2980392156862745 0.6196078431372549 0.8784313725490196 0.9725490196078431" type="table"></feFuncG><feFuncB tableValues="0.30196078431372547 0.39215686274509803 0.5333333333333333 0.6705882352941176 0.8" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="greenorange"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.2627450980392157 0.2235294117647059 0.5411764705882353 0.996078431372549 0.8980392156862745" type="table"></feFuncR><feFuncG tableValues="0.23529411764705882 0.4470588235294118 0.6784313725490196 0.6039215686274509 0.9058823529411765" type="table"></feFuncG><feFuncB tableValues="0.27058823529411763 0.35294117647058826 0.38823529411764707 0.396078431372549 0.611764705882353" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="darkblue"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.00392156862745098 0.00784313725490196" type="table"></feFuncR><feFuncG tableValues="0.1568627450980392 0.3803921568627451" type="table"></feFuncG><feFuncB tableValues="0.23529411764705882 0.5725490196078431" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="redblue"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.00392156862745098 0.9372549019607843" type="table"></feFuncR><feFuncG tableValues="0.11372549019607843 0.19215686274509805" type="table"></feFuncG><feFuncB tableValues="0.403921568627451 0.1411764705882353" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="lightblue"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.19607843137254902 0.5764705882352941" type="table"></feFuncR><feFuncG tableValues="0.0392156862745098 0.8431372549019608" type="table"></feFuncG><feFuncB tableValues="0.2549019607843137 0.9803921568627451" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="bluedarkorange"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0 0.9882352941176471" type="table"></feFuncR><feFuncG tableValues="0.1411764705882353 0.48627450980392156" type="table"></feFuncG><feFuncB tableValues="0.21176470588235294 0.3176470588235294" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="blueorange"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0 0.9568627450980393" type="table"></feFuncR><feFuncG tableValues="0.1411764705882353 0.592156862745098" type="table"></feFuncG><feFuncB tableValues="0.21176470588235294 0.13333333333333333" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="seafoam"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0 0.16470588235294117" type="table"></feFuncR><feFuncG tableValues="0.1411764705882353 0.6588235294117647" type="table"></feFuncG><feFuncB tableValues="0.21176470588235294 0.5490196078431373" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="bluetan"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0 0.9411764705882353" type="table"></feFuncR><feFuncG tableValues="0.1411764705882353 0.9372549019607843" type="table"></feFuncG><feFuncB tableValues="0.21176470588235294 0.8823529411764706" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="spotify_blue"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.25882352941176473 0.6196078431372549" type="table"></feFuncR><feFuncG tableValues="0.13333333333333333 0.9372549019607843" type="table"></feFuncG><feFuncB tableValues="0.9450980392156862 0.8823529411764706" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="spotify_peachy"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.9294117647058824 0.996078431372549" type="table"></feFuncR><feFuncG tableValues="0.24313725490196078 0.7803921568627451" type="table"></feFuncG><feFuncB tableValues="0.6431372549019608 0.4235294117647059" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="deeson_green"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.24313725490196078 0.9294117647058824" type="table"></feFuncR><feFuncG tableValues="0.6901960784313725 0.9333333333333333" type="table"></feFuncG><feFuncB tableValues="0.6078431372549019 0.9137254901960784" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="deeson_blue"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="0.3333333333333333 0.9294117647058824" type="table"></feFuncR><feFuncG tableValues="0.5843137254901961 0.9333333333333333" type="table"></feFuncG><feFuncB tableValues="0.8235294117647058 0.9137254901960784" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><filter id="deeson_red"><feColorMatrix result="gray" type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB" result="duotone"><feFuncR tableValues="1 0.9294117647058824" type="table"></feFuncR><feFuncG tableValues="0 0.9333333333333333" type="table"></feFuncG><feFuncB tableValues="0.27450980392156865 0.9137254901960784" type="table"></feFuncB><feFuncA tableValues="0 1" type="table"></feFuncA></feComponentTransfer></filter><image filter="" height="100%" width="100%" x="0" xlink:href="./preview.jpg" y="0"></image></svg></div></div></section><div class="offscreen"><canvas height="400" id="canvas" width="800"></canvas><div id="png-container"></div></div></main></div></div><script type="text/javascript">window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:!0}</script><script defer src="/duotone/_nuxt/manifest.f4155d4ceb3052f41145.js"></script><script defer src="/duotone/_nuxt/layouts/default.a6dda0bc47038d40120a.js"></script><script defer src="/duotone/_nuxt/pages/index.bbef4ef816a5da66798a.js"></script><script defer src="/duotone/_nuxt/vendor.1345a7503a804bbac5e1.js"></script><script defer src="/duotone/_nuxt/app.7aca63b395a807754ba1.js"></script>