From 68e4aae449ad7c434b2e3bb3d07aca271cb46a88 Mon Sep 17 00:00:00 2001
From: KaKi87 <tiana.lemesle@live.fr>
Date: Thu, 19 Nov 2020 18:18:50 +0100
Subject: [PATCH] :tada: Initial commit

---
 index.html | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..71e9829
--- /dev/null
+++ b/index.html
@@ -0,0 +1,318 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        <title>Gitmoji Lite</title>
+        <link rel="stylesheet" href="https://unpkg.com/destyle.css@2.0.2/destyle.css">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900">
+        <!--suppress CssUnusedSymbol -->
+        <style>
+            :root {
+                --color-dark:   #202225;
+                --color-medium: #2F3136;
+                --color-light:  #B9BBBE;
+                --color-red:    #96001C;
+
+                --size-biggest: 6rem;
+                --size-bigger: 3rem;
+                --size-big: 2rem;
+                --size-normal: 1.3rem;
+                --size-small: 1rem;
+            }
+
+            @font-face {
+                font-family: 'Avenir';
+                font-weight: 400;
+                src: url('https://rawcdn.githack.com/bitcamp/bitcamp-branding/6398cd8d73108dac7fe9c85a991aee07a58119e3/fonts/Avenir/Avenir-Regular.woff2') format('woff2');
+            }
+
+            @font-face {
+                font-family: 'Avenir';
+                font-weight: 700;
+                src: url('https://rawcdn.githack.com/bitcamp/bitcamp-branding/6398cd8d73108dac7fe9c85a991aee07a58119e3/fonts/Avenir/Avenir-Bold.woff2') format('woff2');
+            }
+
+            ::placeholder {
+                color: inherit;
+            }
+
+            .app {
+                background-color: var(--color-dark);
+                color: var(--color-light);
+                font-family: 'Avenir', sans-serif;
+                font-size: var(--size-normal);
+                display: flex;
+                flex-direction: column;
+            }
+            .app__header,
+            .app__header__title,
+            .app__header__subtitle,
+            .app__header__github,
+            .app__header__search,
+            .app__main__gitmojis,
+            .app__footer {
+                margin: var(--size-normal) 0;
+            }
+            .app__header {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            .app__header__title,
+            .app__header__subtitle {
+                font-weight: 700;
+            }
+            .app__header__title {
+                font-size: var(--size-biggest);
+            }
+            .app__header__title__emoji {
+                height: var(--size-biggest);
+            }
+            .app__header__subtitle {
+                font-size: var(--size-big);
+            }
+            .app__header__github {
+                background-color: var(--color-red);
+                font-size: var(--size-small);
+                padding: var(--size-small);
+                font-weight: 700;
+            }
+            .app__header__search__input {
+                padding: var(--size-normal);
+                border-radius: var(--size-bigger);
+                background-color: var(--color-medium);
+                width: 50vw;
+            }
+            .app__main {
+                background-color: var(--color-medium);
+                padding: 0 12.5vw;
+            }
+            .app__main__gitmojis {
+                display: grid;
+                grid-template-columns: repeat(4, minmax(0, 1fr));
+            }
+            .app__main__gitmojis__item {
+                margin: var(--size-normal);
+                background-color: var(--color-dark);
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            .app__main__gitmojis__item__emoji,
+            .app__main__gitmojis__item__code {
+                cursor: pointer;
+            }
+            .app__main__gitmojis__item__emoji {
+                /*noinspection CssUnresolvedCustomProperty*/
+                background-color: var(--item-color);
+                padding: var(--size-small) 0 var(--size-normal) 0;
+                font-size: var(--size-biggest);
+                width: 100%;
+                text-align: center;
+                font-family:
+                    'Apple Color Emoji',
+                    'Segoe UI Emoji',
+                    'Noto Color Emoji',
+                    'Segoe UI Symbol',
+                    'Android Emoji',
+                    'EmojiSymbols',
+                    sans-serif;
+                color: rgba(0, 0, 0, 0.80);
+            }
+            .app__main__gitmojis__item__emoji:hover {
+                color: rgba(0, 0, 0, 1);
+            }
+            .app__main__gitmojis__item__code,
+            .app__main__gitmojis__item__description {
+                margin: var(--size-small);
+            }
+            .app__main__gitmojis__item__code {
+                font-weight: 700;
+            }
+            .app__main__gitmojis__item__code:hover {
+                /*noinspection CssUnresolvedCustomProperty*/
+                color: var(--item-color);
+            }
+            .app__main__gitmojis__item__description {
+                text-align: center;
+                font-size: var(--size-small);
+                height: calc(var(--size-small) * 2);
+            }
+            .app__footer {
+                text-align: center;
+            }
+            .app__footer__credits {
+                line-height: var(--size-big);
+            }
+            .app__footer__credits__link {
+                border-bottom: 1px dotted var(--color-light);
+            }
+            .app__footer__credits__link:hover {
+                border-bottom-style: solid;
+            }
+            .app__notification,
+            .app__scrollTop {
+                position: fixed;
+                height: var(--size-bigger);
+                line-height: var(--size-bigger);
+                text-align: center;
+                color: var(--color-dark);
+                background-color: var(--color-light);
+            }
+            .app__notification {
+                top: var(--size-normal);
+                left: var(--size-normal);
+                border-radius: var(--size-normal);
+                padding: 0 var(--size-normal);
+                opacity: 0;
+                transition: opacity 0.25s;
+            }
+            .app__scrollTop {
+                bottom: var(--size-normal);
+                right: var(--size-normal);
+                width: var(--size-bigger);
+                border-radius: 50%;
+                cursor: pointer;
+            }
+        </style>
+        <script>module = {}</script>
+        <script defer src="https://unpkg.com/fast-dice-coefficient@1.0.3/dice.js"></script>
+        <script>
+            const copyToClipboard = text => {
+                const el = document.createElement('textarea');
+                el.style.position = 'absolute';
+                el.style.opacity = '0';
+                el.style.zIndex = '-1';
+                el.value = text;
+                document.body.appendChild(el);
+                el.select();
+                document.execCommand('copy');
+                document.body.removeChild(el);
+            };
+            const notify = text => {
+                const el = document.querySelector('.app__notification');
+                el.textContent = text;
+                el.style.opacity = '1';
+                setTimeout(() => el.style.opacity = '0', 2000);
+            };
+            window.addEventListener('DOMContentLoaded', async () => {
+                document.querySelector('.app__scrollTop').onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+
+                const
+                    colors = (await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/styles/_includes/_vars.scss')).text())
+                        .split('\n').filter(line => line.includes(':')).map(item => item.replace(/[\s$,;]/g, '').split(':')),
+                    { gitmojis } = await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/data/gitmojis.json')).json();
+                gitmojis.forEach(({ emoji, code, description, name }) => {
+                    const
+                        itemEmoji = document.createElement('span'),
+                        itemCode = document.createElement('span'),
+                        itemDescription = document.createElement('span'),
+                        item = document.createElement('li');
+                    itemEmoji.classList.add('app__main__gitmojis__item__emoji');
+                    itemEmoji.textContent = emoji;
+                    itemEmoji.onclick = () => {
+                        copyToClipboard(emoji);
+                        notify(`${emoji} copied !`);
+                    };
+                    itemCode.classList.add('app__main__gitmojis__item__code')
+                    itemCode.textContent = code;
+                    itemCode.onclick = () => {
+                        copyToClipboard(code);
+                        notify(`${code} copied !`);
+                    };
+                    itemDescription.classList.add('app__main__gitmojis__item__description');
+                    itemDescription.textContent = description;
+                    item.classList.add('app__main__gitmojis__item');
+                    item.appendChild(itemEmoji);
+                    item.appendChild(itemCode);
+                    item.appendChild(itemDescription);
+                    item.style.setProperty('--item-color', colors.find(([key]) => key === name)[1] || 'transparent');
+                    document.querySelector('.app__main__gitmojis').appendChild(item);
+                });
+
+                document.querySelector('.app__header__search__input').oninput = ({ target: { value } }) => {
+                    if(!value)
+                        document.querySelectorAll('.app__main__gitmojis__item').forEach((el, index) => el.style.order = (index + 1).toString());
+                    else
+                        [...document.querySelectorAll('.app__main__gitmojis__item')]
+                            .sort((a, b) => dice(value, b.textContent) - dice(value, a.textContent))
+                            .forEach((el, index) => el.style.order = (index + 1).toString());
+                };
+            });
+        </script>
+    </head>
+    <body class="app">
+        <header class="app__header">
+            <h1 class="app__header__title">
+                gitm<!--
+                --><img
+                    class="app__header__title__emoji"
+                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Emojione_1F602.svg/1200px-Emojione_1F602.svg.png"
+                    alt="o"
+                ><!--
+                -->ji
+            </h1>
+            <h2 class="app__header__subtitle">An emoji guide for your commit messages.</h2>
+            <a class="app__header__github" href="https://github.com/carloscuesta/gitmoji">⭐ GitHub</a>
+            <label class="app__header__search">
+                <input
+                    class="app__header__search__input"
+                    type="text"
+                    placeholder="Search"
+                    autofocus
+                >
+            </label>
+        </header>
+        <main class="app__main">
+            <ul class="app__main__gitmojis"></ul>
+        </main>
+        <footer class="app__footer">
+            <p class="app__footer__credits">
+                <a
+                    class="app__footer__credits__link"
+                    href="https://github.com/carloscuesta/gitmoji"
+                    target="_blank"
+                ><!--
+                    -->Original Gitmoji project by carloscuesta<!--
+                --></a>
+                —
+                <a
+                    class="app__footer__credits__link"
+                    href="https://git.kaki87.net/KaKi87/gitmoji-lite"
+                    target="_blank"
+                ><!--
+                    -->Modified Gitmoji Lite project by KaKi87<!--
+                --></a>
+                <br>
+                Both released under the MIT license.
+            </p>
+        </footer>
+        <div class="app__notification"></div>
+        <button class="app__scrollTop">▲</button>
+    </body>
+</html>
+
+<!--
+MIT License
+
+Copyright (c) 2020 Tiana Lemesle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+-->
\ No newline at end of file
