You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
401 lines
16 KiB
401 lines
16 KiB
<!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="icon" href="https://raw.githubusercontent.com/carloscuesta/gitmoji/master/public/static/favicon.ico">
|
|
<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;
|
|
|
|
--size-biggest: 6rem;
|
|
--size-bigger: 3rem;
|
|
--size-big: 2rem;
|
|
--size-normal: 1.3rem;
|
|
--size-small: 1rem;
|
|
|
|
--column-count: 4;
|
|
}
|
|
|
|
@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__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);
|
|
text-align: center;
|
|
}
|
|
.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;
|
|
}
|
|
@keyframes loader {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.app__main__loader {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
width: var(--size-biggest);
|
|
height: var(--size-biggest);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.app__main__loader--hidden {
|
|
display: none;
|
|
}
|
|
.app__main__loader:after {
|
|
content: ' ';
|
|
display: block;
|
|
width: var(--size-big);
|
|
height: var(--size-big);
|
|
border-radius: 50%;
|
|
border: 6px solid #fff;
|
|
border-color: #fff transparent #fff transparent;
|
|
animation: loader 1.2s linear infinite;
|
|
}
|
|
.app__main__gitmojis {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--column-count), 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;
|
|
}
|
|
@media (max-width: 1900px) {
|
|
:root {
|
|
--size-biggest: 5rem;
|
|
--size-normal: 1rem;
|
|
}
|
|
}
|
|
@media (max-width: 1400px) {
|
|
.app__main {
|
|
padding: 0 6.25vw;
|
|
}
|
|
}
|
|
@media (max-width: 1200px) {
|
|
:root {
|
|
--size-biggest: 4rem;
|
|
--size-small: 0.75rem;
|
|
}
|
|
.app__main {
|
|
padding: 0 var(--size-normal);
|
|
}
|
|
}
|
|
@media (max-width: 1100px) {
|
|
:root {
|
|
--column-count: 3;
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
:root {
|
|
--size-normal: 1.3rem;
|
|
--size-small: 1rem;
|
|
|
|
--column-count: 2;
|
|
}
|
|
}
|
|
@media (max-width: 750px) {
|
|
:root {
|
|
--size-normal: 1rem;
|
|
--size-small: 0.75rem;
|
|
}
|
|
}
|
|
@media (max-width: 550px) {
|
|
:root {
|
|
--size-normal: 0.75rem;
|
|
--size-small: 0.5rem;
|
|
}
|
|
}
|
|
@media (max-width: 450px) {
|
|
:root {
|
|
--size-big: 1.5rem;
|
|
--size-normal: 1rem;
|
|
--size-small: 0.75rem;
|
|
|
|
--column-count: 1;
|
|
}
|
|
}
|
|
@media (max-width: 300px) {
|
|
:root {
|
|
--size-normal: 0.75rem;
|
|
--size-small: 0.5rem;
|
|
}
|
|
}
|
|
</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/components/GitmojiList/emojiColorsMap.js')).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());
|
|
};
|
|
|
|
document.querySelector('.app__main__loader').classList.add('app__main__loader--hidden');
|
|
});
|
|
</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>
|
|
<label class="app__header__search">
|
|
<input
|
|
class="app__header__search__input"
|
|
type="text"
|
|
placeholder="Search"
|
|
autofocus
|
|
>
|
|
</label>
|
|
</header>
|
|
<main class="app__main">
|
|
<div class="app__main__loader"></div>
|
|
<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.
|
|
-->
|