mirror of
https://github.com/Mayccoll/Gogh.git
synced 2023-08-10 21:12:46 +03:00
1 line
21 KiB
HTML
1 line
21 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Color Scheme for Terminals"><meta name="author" content="Miguel D. Quintero"><link rel="author" href="humans.txt"><title>Gogh - Color Scheme</title><link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon.png"><link rel="icon" href="favicons/favicon.ico"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.css"><style>@keyframes "blink"{0%,to{opacity:0}50%{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes anim-gogh{25%{fill:#83ff08}37.5%{fill:#ff8308}50%{fill:#0883ff}62.5%{fill:#8308ff}75%{fill:#08ff83}87.5%{fill:#363636}to{fill:#ff0883}}@keyframes anim-gogh-bg{25%{background-color:#ff0883}37.5%{background-color:#ff8308}50%{background-color:#0883ff}62.5%{background-color:#8308ff}75%{background-color:#3dba98}87.5%{background-color:#363636}to{background-color:#47af32}}:root{--color-blue: #65d8ee;--color-green: #A6E22E;--color-yellow: #E6DB74;--color-orange: #FD971F;--color-red: #F92672;--color-purple: #AE81FF;--color-cyan: #0F94CF;--color-grey-light: #E9E9E9;--color-grey-medium: #7E868C;--color-grey-dark: #333E47;--color-black: #000000;--color-white: #FFFFFF;--color-primary: var(--color-blue);--color-success: var(--color-green);--color-info: var(--color-yellow);--color-warning: var(--color-orange);--color-danger: var(--color-red)}body,html{height:100%;font-size:10px}body{font-family:"Roboto",sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}p{font-weight:400;font-style:normal;font-variant:normal;line-height:1.4}h1,h2,h3,h4,h5,h6{margin:0;line-height:1}h1{color:var(--color-blue);font-size:4rem}h2,h3,h4,h5,h6{font-size:3.1rem}h3,h4,h5,h6{font-size:2.5rem}h4,h5,h6{font-size:2.2rem}h5,h6{font-size:1.9rem}body,h6,p{font-size:1.6rem}strong{font-weight:900}small{font-size:-1.4rem}blockquote>p,em{font-style:italic}blockquote>p{margin:1.6rem;padding:0;border-color:#ccc;border-color:rgba(0,0,0,.2);border-top:2px solid;border-bottom:2px solid;border-radius:.25em;color:#888;letter-spacing:.05em;font-size:4.6rem}ol,ul{padding:0}ol li,ul li{margin-left:1.6rem;padding:0}.center{text-align:center}.black,body,p{color:var(--color-black)}.white{color:var(--color-white)}.red{color:var(--color-red)}.yellow{color:var(--color-yellow)}.green{color:var(--color-green)}.blue{color:var(--color-blue)}.purple{color:var(--color-purple)}.orange{color:var(--color-orange)}.cyan{color:var(--color-cyan)}.grey-light{color:var(--color-grey-light)}.grey-medium{color:var(--color-grey-medium)}.grey-dark{color:var(--color-grey-dark)}.bg-black{background-color:var(--color-black)}.bg-white{background-color:var(--color-white)}.bg-red{background-color:var(--color-red)}.bg-yellow{background-color:var(--color-yellow)}.bg-green{background-color:var(--color-green)}.bg-blue{background-color:var(--color-blue)}.bg-purple{background-color:var(--color-purple)}.bg-orange{background-color:var(--color-orange)}.bg-cyan{background-color:var(--color-cyan)}.bg-grey-light{background-color:var(--color-grey-light)}.bg-grey-medium{background-color:var(--color-grey-medium)}.bg-grey-dark{background-color:var(--color-grey-dark)}.terminal{box-sizing:border-box;margin:0 0 50px;box-shadow:5px 5px 11px #737373,-5px -5px 11px #b1b1b1;animation:slideIn ease .4s forwards}.terminal .btn--terminal{display:inline-block;width:10px;height:10px;margin:0 4px;cursor:pointer;border-radius:100px;background-color:#000}.terminal .btn--min{border:1px solid #6d6d6d;background-color:#868686}.terminal .btn--max{border:1px solid #4c4c4c;background-color:#656565}.terminal .btn--close{border:1px solid #000;background-color:#171717}.terminal .cmd__cursor{animation:1s blink step-end infinite}.terminal .bar{position:relative;width:100%;height:25px;text-align:center;border-radius:5px 5px 0 0;background-color:#d9d9d9;font-size:0}.terminal .bar .bar__title{position:absolute;top:4px;right:0;left:0;margin:0 auto;color:#424242;font-family:Arial;font-size:14px;font-weight:400;line-height:1.2}.terminal .bar .bar__btns{position:absolute;top:7px;right:10px}.terminal .body{box-sizing:border-box;padding:30px;border:1px solid #d9d9d9;border-radius:0 0 5px 5px;position:relative}.terminal .body .body__txt{margin:0 0 30px;display:none}@media (min-width:576px){.terminal .body .body__txt{display:block}}.terminal .body .body__txt p{margin:0;padding:0;font-size:20px;line-height:1.1}@media (min-width:576px){.terminal .body .body__txt p{font-size:1.2rem}}@media (min-width:768px){.terminal .body .body__txt p{font-size:1.4rem}}@media (min-width:992px){.terminal .body .body__txt p{font-size:2rem}}@media (min-width:1200px){.terminal .body .body__txt p{font-size:1.8rem}}.terminal .body .body__txt p span{letter-spacing:2px;font-size:16px}@media (min-width:768px){.terminal .body .body__txt p span{letter-spacing:1px;font-size:12px}}@media (min-width:992px){.terminal .body .body__txt p span{letter-spacing:1.5px;font-size:15px}}@media (min-width:1200px){.terminal .body .body__txt p span{font-size:10px}}.terminal .body .body__bar{font-size:0}.terminal .body .body__bar span{display:inline-block;width:12.5%;height:30px}.terminal .body .body__bar--bottom{margin:0 0 30px}.btn{display:inline-block;padding:.8rem 2.5rem .85rem;outline:0;border:1px solid #0d1926;border-radius:0;background-color:transparent;color:#0d1926;text-align:center;text-decoration:none;text-transform:uppercase;font-size:1.6rem;cursor:pointer;transition:all .3s ease}@media (min-width:650px){.btn{font-size:1.4rem;padding:.57rem 1.5rem .55rem}}@media (min-width:768px){.btn{padding:1.3rem 2.5rem .85rem}}.btn:hover{background-color:#0d1926;color:#fff}.btn:active{position:relative;top:1px}.btn:focus{box-shadow:0 1px 2px rgba(0,0,0,.2)}.gogh-header{display:flex;background-color:#0d1926;align-items:center;justify-content:center}.gogh-header h1{width:500px;text-align:center;font-size:1rem;line-height:1}.gogh-header h1 span{display:block;overflow:hidden;color:#fff;text-indent:100%;white-space:nowrap}.gogh-header h1 img{width:100%;height:auto}.gogh-content{padding:50px 0;min-height:200vh;background-color:#e7e7e7;color:#595647}.gogh-content h2{margin:0 0 25px;color:#595647;text-align:center;font-weight:700;font-size:2rem;line-height:1.2}@media (min-width:768px){.gogh-content h2{text-align:left;font-weight:400;font-size:2.8rem;line-height:1}}@media (min-width:450px){.gogh-content h3{font-size:2.8rem}}@media (min-width:650px){.gogh-content h3{font-size:3.2rem}}.gogh-content h4{font-size:1.8rem}@media (min-width:450px){.gogh-content h4{font-size:2.2rem}}@media (min-width:650px){.gogh-content h4{font-size:2.8rem}}.gogh-content h4 span{font-weight:300;font-size:1.4rem}.gogh-content p{margin:0 0 40px;color:#595647;font-size:1.6rem;line-height:1.4}.code-wrap{position:relative;margin:0 0 40px}.code-wrap .language-bash{padding:.8rem .8rem 1.5rem}@media (min-width:450px){.code-wrap .language-bash{padding:1.5rem 1.2rem}}.code-wrap .code-holder{position:relative}.code-wrap .btn-copy{position:absolute;right:0;bottom:0;display:inline-flex;padding:5px 10px;height:100%;background-color:#f5f2f0;cursor:pointer;transition:all .3s ease}@media (min-width:650px){.code-wrap .btn-copy{max-width:50px}}.code-wrap .btn-copy svg{width:100%;height:auto;transition:all .3s ease;fill:#363636}.code-wrap .btn-copy:hover svg{animation-name:anim-gogh;animation-duration:8s;fill:#ff0883}.github-int{margin:0 0 40px;text-align:center}.filters{display:flex;margin:0 0 40px;justify-content:center;flex-direction:column}@media (min-width:650px){.filters{flex-direction:row}}.filters .btn{position:relative;margin:0 0 20px}@media (min-width:650px){.filters .btn{margin:0 15px}}.filters .btn:hover::before{position:absolute;right:0;bottom:-10px;left:0;margin:0 auto;width:100%;height:1px;background-color:#0d1926;content:" ";opacity:1;animation-name:anim-gogh-bg;animation-duration:8s}@media (min-width:768px){.filters .btn::before{position:absolute;right:0;bottom:-10px;left:0;margin:0 auto;width:0;height:1px;background-color:#0d1926;content:" ";opacity:0;transition:all .3s ease}}.filters .btn.active{background-color:#0d1926;color:#e7e7e7}@media (min-width:768px){.filters .btn.active::before{position:absolute;right:0;bottom:-10px;left:0;width:100%;height:1px;background-color:#0d1926;content:" ";opacity:1}}.filter-background{margin:0 0 70px;border:1px solid #fff}.filter-background .btn--filter-bg{position:relative;padding:0;width:5%;height:40px;border:0;cursor:pointer;transition:all .3s ease,border-radius .9s ease}.filter-background .btn--filter-bg span{position:absolute;bottom:-12px;display:none;padding:1px 3px;width:100%;border-radius:1px;background:#0d1926;color:#fff;text-align:center;text-transform:none;font-size:.6rem;transition:all .3s ease}.filter-background .btn--filter-bg:hover{z-index:20;height:40px;border:1px solid #414141;border-radius:1px;transform:scale(1.6)}.filter-background .btn--filter-bg.active span,.filter-background .btn--filter-bg:hover span{display:block}.filter-background .btn--filter-bg.active{z-index:10;border:1px solid #414141;border-radius:1px;transform:scale(1.6)}@media (min-width:1400px){.gogh-terminal{margin:0 auto;max-width:96%}}@media (min-width:1800px){.gogh-terminal{max-width:84%}}@media (min-width:2200px){.gogh-terminal{max-width:74%}}</style></head><body><a href="https://github.com/Mayccoll/Gogh"><img loading="lazy" width="149" height="149" style="position: absolute; top: 0; right: 0; border: 0;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a><header class="gogh-header"><h1><span>Gogh </span><img src="https://raw.githubusercontent.com/Mayccoll/Gogh/master/images/gogh/Gogh-logo-dark.png" alt=""></h1></header><div class="gogh-content"><div class="container"><div class="row"><div class="col-md-12"><h2>Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal</h2><p>Color Schemes For Ubuntu, Linux Mint, Elementary OS and all distributions that use Gnome Terminal, Pantheon Terminal, Tilix, or XFCE4 Terminal; initially inspired by Elementary OS Luna. Also works on iTerm for macOS.</p><div class="github-int"><a class="github-button" href="https://github.com/Mayccoll/Gogh" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-size="large" aria-label="Star ntkme/github-buttons on GitHub">View </a><!-- Place this tag where you want the button to render. --> <a class="github-button" href="https://github.com/Mayccoll/Gogh" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a></div><h3>Install</h3><p>Just copy and paste One line command.</p><div class="code-wrap"><h4>Linux <span>(wget)</span></h4><div class="code-holder"><pre><code class="language-bash" id="code-linux">bash -c "$(wget -qO- https://git.io/vQgMr)" </code></pre><span class="btn-copy" data-clipboard-target="#code-linux"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"><path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/><path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/><rect width="32" height="32" fill="none"/></svg></span></div></div><div class="code-wrap"><h4>Mac <span>(curl)</span></h4><div class="code-holder"><pre><code class="language-bash" id="code-mac">bash -c "$(curl -sLo- https://git.io/vQgMr)" </code></pre><span class="btn-copy" data-clipboard-target="#code-mac"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"><path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/><path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/><rect width="32" height="32" fill="none"/></svg></span></div></div></div></div></div><main class="gogh-terminal"><div id="js-vue-app"><div class="container"><div class="row"><div class="col-md-12"><div class="filters"><button class="btn js-btn--filter" :class="{ active: filter === 'all' }" @click="setFilter('all'); resetMenuSelected()">All</button> <button class="btn js-btn--filter" :class="{ active: filter === 'light' }" @click="setFilter('light'); resetMenuSelected()">Light Themes</button> <button class="btn js-btn--filter" :class="{ active: filter === 'dark' }" @click="setFilter('dark'); resetMenuSelected()">Dark Themes</button> <button class="btn js-btn--filter-bg" :class="{ active: selected === 'background' }" @click="getBackgrounds()">by Background</button></div></div></div><div class="row"><div class="col-md-12"><div class="filter-background js-filter-background" style="display: none;"><template v-for="item in themeBackgrounds"><button class="btn btn--filter-bg" :class="{ active: filter === item.toLowerCase() }" :style="'background-color:' + item" @click="setFilter(item)"><span>{{ item.toLowerCase() }}</span></button></template></div></div></div></div><div class="container-fluid"><div class="row justify-content-center"><template v-for="theme in themes"><div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all' || filter === 'background' || filter === theme.background.toLowerCase()"><div class="terminal"><div class="bar"><div class="bar__title">{{ theme.name }}</div><div class="bar__btns"><span class="btn--terminal btn--min"></span> <span class="btn--terminal btn--max"></span> <span class="btn--terminal btn--close"></span></div></div><div class="body" :style="'background-color: ' + theme.background"><div class="body__bar body__bar--top"><span :style="'background-color: ' + theme.black"></span> <span :style="'background-color: ' + theme.red"></span> <span :style="'background-color: ' + theme.green"></span> <span :style="'background-color: ' + theme.yellow"></span> <span :style="'background-color: ' + theme.blue"></span> <span :style="'background-color: ' + theme.purple"></span> <span :style="'background-color: ' + theme.cyan"></span> <span :style="'background-color: ' + theme.white"></span></div><div class="body__bar body__bar--bottom"><span :style="'background-color: ' + theme.brightBlack"></span> <span :style="'background-color: ' + theme.brightRed"></span> <span :style="'background-color: ' + theme.brightGreen"></span> <span :style="'background-color: ' + theme.brightYellow"></span> <span :style="'background-color: ' + theme.brightBlue"></span> <span :style="'background-color: ' + theme.brightPurple"></span> <span :style="'background-color: ' + theme.brightCyan"></span> <span :style="'background-color: ' + theme.brightWhite"></span></div><div class="body__txt"><p :style="'color: ' + theme.black">███ <span>*** AaBbMmYyZz 01 ---</span> ███ <span>{{ theme.black.toLowerCase() }}</span></p><p :style="'color: ' + theme.red">███ <span>*** AaBbMmYyZz 02 ---</span> ███ <span>{{ theme.red.toLowerCase() }}</span></p><p :style="'color: ' + theme.green">███ <span>*** AaBbMmYyZz 03 ---</span> ███ <span>{{ theme.green.toLowerCase() }}</span></p><p :style="'color: ' + theme.yellow">███ <span>*** AaBbMmYyZz 04 ---</span> ███ <span>{{ theme.yellow.toLowerCase() }}</span></p><p :style="'color: ' + theme.blue">███ <span>*** AaBbMmYyZz 05 ---</span> ███ <span>{{ theme.blue.toLowerCase() }}</span></p><p :style="'color: ' + theme.purple">███ <span>*** AaBbMmYyZz 06 ---</span> ███ <span>{{ theme.purple.toLowerCase() }}</span></p><p :style="'color: ' + theme.cyan">███ <span>*** AaBbMmYyZz 07 ---</span> ███ <span>{{ theme.cyan.toLowerCase() }}</span></p><p :style="'color: ' + theme.white">███ <span>*** AaBbMmYyZz 08 ---</span> ███ <span>{{ theme.white.toLowerCase() }}</span></p><br><p :style="'color: ' + theme.brightBlack">███ <span>*** AaBbMmYyZz 09 ---</span> ███ <span>{{ theme.brightBlack.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightRed">███ <span>*** AaBbMmYyZz 10 ---</span> ███ <span>{{ theme.brightRed.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightGreen">███ <span>*** AaBbMmYyZz 11 ---</span> ███ <span>{{ theme.brightGreen.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightYellow">███ <span>*** AaBbMmYyZz 12 ---</span> ███ <span>{{ theme.brightYellow.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightBlue">███ <span>*** AaBbMmYyZz 13 ---</span> ███ <span>{{ theme.brightBlue.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightPurple">███ <span>*** AaBbMmYyZz 14 ---</span> ███ <span>{{ theme.brightPurple.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightCyan">███ <span>*** AaBbMmYyZz 15 ---</span> ███ <span>{{ theme.brightCyan.toLowerCase() }}</span></p><p :style="'color: ' + theme.brightWhite">███ <span>*** AaBbMmYyZz 16 ---</span> ███ <span>{{ theme.brightWhite.toLowerCase() }}</span></p></div><div class="cmd"><span class="cmd__ini" :style="'color: ' + theme.foreground">$ </span><span class="cmd__sudo" :style="'color: ' + theme.red">sudo </span><span class="cmd__apt" :style="'color: ' + theme.green">apt </span><span class="cmd__install" :style="'color: ' + theme.foreground">install </span><span class="cmd__linux" :style="'color: ' + theme.foreground">linux </span><span class="cmd__cursor" :style="'color: ' + theme.foreground">|</span></div></div></div></div></template></div></div></div></main></div><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/chroma-js@2.1.1/chroma.min.js"></script><script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script><script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script><script src="https://cdn.jsdelivr.net/npm/shufflejs@5.3.0/dist/shuffle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://buttons.github.io/buttons.js" async="" defer="" id="github-bjs"></script><script src="https://unpkg.com/vue@next"></script><script>function lightOrDark(e){var t,r,s;return e.match(/^rgb/)?(t=(e=e.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/))[1],r=e[2],s=e[3]):(t=(e=+("0x"+e.slice(1).replace(e.length<5&&/./g,"$&$&")))>>16,r=e>>8&255,s=255&e),Math.sqrt(t*t*.299+r*r*.587+s*s*.114)>127.5?"light":"dark"}function colorDistance(e,t){for(var r=0,s=0;s<e.length;s++)r+=(e[s]-t[s])*(e[s]-t[s]);return r}function sortColors(e){for(var t=[],r=0;r<e.length;r++){t[r]=[];for(var s=0;s<r;s++)t.push([e[r],e[s],colorDistance(e[r],e[s])])}t.sort(function(e,t){return e[2]-t[2]});for(var a,o={},n=0;n<e.length;n++)o[e[n]]=[e[n]];for(var l=0;l<t.length;l++){var c=t[l][0],h=t[l][1],i=o[c],g=o[h];i&&g&&i!=g&&(c!==i[i.length-1]&&i.reverse(),h!==g[0]&&g.reverse(),i.push.apply(i,g),delete o[c],delete o[h],o[i[0]]=i,o[i[i.length-1]]=i,a=i)}return a}new ClipboardJS(".btn-copy");var $getUrl="https://raw.githubusercontent.com/Mayccoll/Gogh/master/data/themes.json";const $app={data:()=>({themes:[],filter:"all",themeBackgrounds:null,selected:null}),created(){axios.get($getUrl).then(e=>{this.themes=e.data.themes,this.themes.forEach(e=>{e.category=lightOrDark(e.background)})})},computed:{allValues(){}},methods:{setFilter(e){this.filter="",setTimeout(()=>{this.filter=e},100)},setBackground(){this.filter="background"},getBackgrounds(){const e=this.themes.map(e=>e.background).map(e=>e.toLowerCase()),t=sortColors([...new Set(e)].map(e=>chroma(e).rgb())).map(e=>chroma(e).hex());this.themeBackgrounds=t.reverse(),this.selected="background",this.filter="background"},resetMenuSelected(){this.selected=""}}};Vue.createApp($app).mount("#js-vue-app"),$(".js-btn--filter-bg").on("click",function(){$(".js-filter-background").slideToggle()}),$(".js-btn--filter").on("click",function(){$(".js-filter-background").slideUp(400)});</script><div id="master-dev" style="display:none">4d 69 67 75 65 6c 20 44 2e 20 51 75 69 6e 74 65 72 6f 20 2d 20 6d 69 67 75 65 6c 64 61 76 69 64 71 40 67 6d 61 69 6c 2e 63 6f 6d</div></body></html> |