<!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">

    <link rel=stylesheet href=./css/main.min.css inline>
</head>

<body>
    <a href=https://github.com/Gogh-Co/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/Gogh-Co/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&nbsp;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/Gogh-Co/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/Gogh-Co/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">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 01 ---</span>  &block;&block;&block; <span> {{ theme.black.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.red">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 02 ---</span>  &block;&block;&block; <span> {{ theme.red.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.green">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 03 ---</span>  &block;&block;&block; <span> {{ theme.green.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.yellow">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 04 ---</span>  &block;&block;&block; <span> {{ theme.yellow.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.blue">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 05 ---</span>  &block;&block;&block; <span> {{ theme.blue.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.purple">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 06 ---</span>  &block;&block;&block; <span> {{ theme.purple.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.cyan">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 07 ---</span>  &block;&block;&block; <span> {{ theme.cyan.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.white">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 08 ---</span>  &block;&block;&block; <span> {{ theme.white.toLowerCase() }}</span>
                                            </p>
                                            <br>
                                            <p :style="'color: ' + theme.brightBlack">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 09 ---</span>  &block;&block;&block; <span> {{ theme.brightBlack.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightRed">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 10 ---</span>  &block;&block;&block; <span> {{ theme.brightRed.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightGreen">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 11 ---</span>  &block;&block;&block; <span> {{ theme.brightGreen.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightYellow">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 12 ---</span>  &block;&block;&block; <span> {{ theme.brightYellow.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightBlue">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 13 ---</span>  &block;&block;&block; <span> {{ theme.brightBlue.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightPurple">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 14 ---</span>  &block;&block;&block; <span> {{ theme.brightPurple.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightCyan">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 15 ---</span>  &block;&block;&block; <span> {{ theme.brightCyan.toLowerCase() }}</span>
                                            </p>
                                            <p :style="'color: ' + theme.brightWhite">
                                                 &block;&block;&block; <span>*** AaBbMmYyZz 16 ---</span>  &block;&block;&block; <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@0.27.2/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 src=./js/main.js inline></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>
