mirror of
https://github.com/Mayccoll/Gogh.git
synced 2023-08-10 21:12:46 +03:00
1 line
20 KiB
HTML
1 line
20 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://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css" integrity="sha512-QTQigm89ZvHzwoJ/NgJPghQPegLIwnXuOXWEdAjjOvpE9uaBGeI05+auj0RjYVr86gtMaBJRKi8hWZVsrVe/Ug==" crossorigin="anonymous"><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:#5e5e5e;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}.terminal .body .body__txt{margin:0 0 30px}.terminal .body .body__txt p{margin:0;padding:0;font-size:20px;line-height:1.1}@media (min-width:768px){.terminal .body .body__txt p{font-size:14px}}@media (min-width:992px){.terminal .body .body__txt p{font-size:20px}}@media (min-width:1200px){.terminal .body .body__txt p{font-size:18px}}.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:.5rem 2.5rem .55rem;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:16px;cursor:pointer;transition:all .3s ease}.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;align-items:center;justify-content:center;background-color:#0d1926}.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;font-weight:400;font-size:2.8rem}.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 .btn-copy{position:absolute;right:10px;bottom:14px;display:inline-block;width:25px;cursor:pointer;transition:all .3s ease}.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;justify-content:center;margin:0 0 40px}.filters .btn{position:relative;margin:0 15px}.filters .btn:hover::before{margin:0 auto;width:100%;opacity:1;animation-name:anim-gogh-bg;animation-duration:8s}.filters .btn.active::before,.filters .btn::before,.filters .btn:hover::before{position:absolute;right:0;bottom:-10px;left:0;height:1px;background-color:#0d1926;content:" "}.filters .btn::before{margin:0 auto;transition:all .3s ease;width:0;opacity:0}.filters .btn.active{background-color:#0d1926;color:#e7e7e7}.filters .btn.active::before{width:100%;opacity:1}.filter-background{margin:0 0 70px}.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</h4><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 class="code-wrap"><h4>Mac</h4><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><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"><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 . Color 01 ---</span> ███</p><p :style="'color: ' + theme.red">███ <span>*** AaBbMmYyZz . Color 02 ---</span> ███</p><p :style="'color: ' + theme.green">███ <span>*** AaBbMmYyZz . Color 03 ---</span> ███</p><p :style="'color: ' + theme.yellow">███ <span>*** AaBbMmYyZz . Color 04 ---</span> ███</p><p :style="'color: ' + theme.blue">███ <span>*** AaBbMmYyZz . Color 05 ---</span> ███</p><p :style="'color: ' + theme.purple">███ <span>*** AaBbMmYyZz . Color 06 ---</span> ███</p><p :style="'color: ' + theme.cyan">███ <span>*** AaBbMmYyZz . Color 07 ---</span> ███</p><p :style="'color: ' + theme.white">███ <span>*** AaBbMmYyZz . Color 08 ---</span> ███</p><br><p :style="'color: ' + theme.brightBlack">███ <span>*** AaBbMmYyZz . Color 09 ---</span> ███</p><p :style="'color: ' + theme.brightRed">███ <span>*** AaBbMmYyZz . Color 10 ---</span> ███</p><p :style="'color: ' + theme.brightGreen">███ <span>*** AaBbMmYyZz . Color 11 ---</span> ███</p><p :style="'color: ' + theme.brightYellow">███ <span>*** AaBbMmYyZz . Color 12 ---</span> ███</p><p :style="'color: ' + theme.brightBlue">███ <span>*** AaBbMmYyZz . Color 13 ---</span> ███</p><p :style="'color: ' + theme.brightPurple">███ <span>*** AaBbMmYyZz . Color 14 ---</span> ███</p><p :style="'color: ' + theme.brightCyan">███ <span>*** AaBbMmYyZz . Color 15 ---</span> ███</p><p :style="'color: ' + theme.brightWhite">███ <span>*** AaBbMmYyZz . Color 16 ---</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><footer>credits: <a target="_blank" href="https://clipboardjs.com/">Clipboardjs </a>put it all together :</footer><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script><script src="https://buttons.github.io/buttons.js" async="" defer="" id="github-bjs"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.3/shuffle.min.js" integrity="sha512-VHIYn9ssmuPBliadBEgGCTRtCO4agkhQCxiPaTBKaAq0cm2KKpX+PE2klG1VfOHKKcN5eZcev0M3s5V2xXxVew==" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></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)})})},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,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> |