-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (105 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<title>CDN Icon searcher - Find your icon!</title>
<meta content="Icon searcher of the most popular libraries that are distributed with CDN links."name=description><meta content="CDN Icon searcher - Find your icon!"property=og:title><meta content="Icon searcher of the most popular libraries that are distributed with CDN links."property=og:description><meta content=/img/logo-black.png property=og:image><meta content=summary name=twitter:card>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-snack.min.css">
<style>*,:after,:before{box-sizing:inherit;outline:0}body{box-sizing:border-box;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5;color:#343a40;background-color:#f8f9fa}.co7yhbm{padding:1rem 1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.crkk3mp{font-size:1.25rem}.c19ihgg3{color:inherit;-webkit-text-decoration:none;text-decoration:none;font-size:1.25rem}.c19ihgg3:hover{color:#06f}.cf44av9{padding:.25rem .5rem;margin-left:.5rem;font-size:.875rem;line-height:1.25;font-weight:500;-webkit-text-decoration:none;text-decoration:none;color:#495057;background-color:#f1f3f5;border-radius:4px}.cf44av9:hover{background-color:#e9ecef}.c13o6z6d{margin:0 auto}.c1a0y4o1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.c1a0y4o1>:not(:last-child):not(.dark-button){margin-right:1.5rem}.c1rtujlr{color:inherit;-webkit-text-decoration:none;text-decoration:none}.c1rtujlr:hover{color:#06f}.c13c6898{position:-webkit-sticky;position:sticky;top:0;background:linear-gradient(0deg,transparent,#f8f9fa);z-index:99}.c1ji0wm6{max-width:1200px;margin:auto;padding:1rem 1.5rem}.c79elbk{position:relative}.c1ig0msb{position:absolute;top:0;bottom:0;left:1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ci6dzq1{vertical-align:text-bottom}.cb9wur4{width:100%;margin:0;padding:1rem;padding-left:3.25rem;font-size:inherit;line-height:1;font-family:inherit;color:inherit;background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);border:0;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.cb9wur4::-webkit-search-decoration{display:none}.cb9wur4:focus{box-shadow:0 0 0 3px rgba(0,102,255,.5)}.c1ji0wm6{max-width:1200px;margin:auto;padding:1rem 1.5rem}.c9q74t9{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));row-gap:1.5rem;-webkit-column-gap:1rem;column-gap:1rem;margin:0 auto}@media screen and (min-width:64em){.c9q74t9{-webkit-column-gap:1.5rem;column-gap:1.5rem}}.clp93mb{font-size:1.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;text-align:center;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;cursor:pointer;outline:0}.clp93mb:hover .icon-container{color:#06f;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.clp93mb:focus .icon-container{box-shadow:0 0 0 3px rgba(0,102,255,.5)}.c15l8o45{width:100%;line-height:76px;background-color:#fff;border-radius:4px;margin-bottom:8px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.ci6dzq1{vertical-align:text-bottom}.c1ikrz9p{font-size:.875rem;color:#343a40}.c11wgmaa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem;font-size:.875rem}.c1rtujlr{color:inherit;-webkit-text-decoration:none;text-decoration:none}.c1rtujlr:hover{color:#06f}.c1jlqu4c{margin:0 0 1.5rem;font-size:1.75rem;font-weight:400;line-height:1.25}.c1jlqu4c small{font-size:.65em;color:#999}.f44{cursor:pointer;background-color:#e9ecef;position:relative;top:-2px!important}.mega-octicon,.octicon{font:inherit;font-style:normal;font-variant:normal;font-family:Octicons}
/*dark theme*/
body.dark{background-color:#24292e}.dark .c11wgmaa,.dark .c1jlqu4c{color:#fff}.dark .co7yhbm{background-color:#2f363d;color:#fff}.dark .c13c6898{background:linear-gradient(#24292e,50%,#24292e00)}.dark .cb9wur4{color:#fff;background:#2f363d;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.dark .c15l8o45{color:#fff;background-color:#2f363d;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.dark .c1ikrz9p{color:#999}
.dark-button,.light-button{background:0 0;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}</style>
</head>
<body>
<div id="app">
<div tabindex="-1" role="group">
<div class="co7yhbm"><a class="c19ihgg3" href="/"><i class="fab fa-pushed"></i> CDN Icon searcher</a>
<!-- <a target="_blank" rel="noopener noreferrer" href="https://github.com/nicolauns/cdni" class="cf44av9">v1.0</a> -->
<div class="c13o6z6d"></div>
<div class="c1a0y4o1">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/nicolauns/cdni" class="c1rtujlr"><i class="octicon octicon-mark-github"></i> GitHub</a>
<button class="dark-button"><i class="far fa-moon"></i></button>
<button class="light-button" hidden><i class="fad fa-sun"></i></button>
</div>
</div>
<main>
<div class="c13c6898">
<div class="c1ji0wm6">
<div class="c79elbk">
<div class="c1ig0msb">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" color="#868e96" class="ci6dzq1">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<input :value="searchText" @input="$event.target.value?debounceInput():(searchText='')" :placeholder="searchPlaceholder" type="search" id="search" class="cb9wur4" autocomplete="off" />
</div>
</div>
</div>
<div v-if="loading" style="text-align:center"><svg width="112px" height="112px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" stroke="#343a40" stroke-width="4" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(223.983 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.6s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg></div>
<div v-show="!searchText" v-html="emptySearch()" style="text-align:center"></div>
<div v-if="searchText" v-for="(lib, index) in libs" :id="index" class="c1ji0wm6">
<h1 v-html="label(lib,index)" class="c1jlqu4c"></h1>
<div class="c9q74t9">
<div v-for="icon in search(lib.icons,index)" @click="toast(el(lib.element,lib.class+icon,'#2C89F1'),'Successfully copied icon.')" role="button" tabindex="0" :data-clipboard-text="el(lib.element,lib.class+icon)" title="Click to copy to clipboard!" class="clp93mb">
<div v-html="el(lib.element,lib.class+icon)" class="icon-container c15l8o45"></div>
<span v-html="-1<icon.indexOf('fa-')?icon.replace('fa-',''):icon" class="c1ikrz9p"></span>
</div>
</div>
</div>
<div v-if="searchText" id="noResults" class="c1ji0wm6">
<h1 class="c1jlqu4c" v-html="`<i class='fal fa-sad-tear'></i> No results found for “${searchText}”.`"></h1>
</div>
<footer class="c11wgmaa">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/nicolauns" class="c1rtujlr">Made with <i class="fa fa-heart" style="color:#fd192b"></i> by @nicolauns</a>
</footer>
</main>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<!-- vue-snack 0.1.4 -->
<script>!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.VueSnackPlugin=n()}(this,function(){"use strict";var t={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("transition",{attrs:{name:"snack"}},[t.active?e("div",{staticClass:"snackbar",class:t.config.position,style:t.styles},[e("div",{staticClass:"snackbar__text",domProps:{innerHTML:t.text}},[]),t._v(" "),t.button?[e("div",{staticClass:"snackbar__action",on:{click:function(n){return n.preventDefault(),t.action(n)}}},[t._v(t._s(t.button))])]:t._e(),t._v(" "),t.config.close?[e("div",{staticClass:"times",on:{click:function(n){t.$emit("close")}}},[e("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[e("path",{attrs:{fill:"#E3E3E3",d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}}),t._v(" "),e("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})])])]:t._e()],2):t._e()])},staticRenderFns:[],name:"Snackbar",props:{config:Object},data:function(t){return{active:!1,text:"",button:"",theme:"default",action:null}},computed:{styles:function(){return"--primary: "+this.config[this.theme].primary}}},n={default:{primary:"#2C89F1"},success:{primary:"#00DEB2"},danger:{primary:"#FF0057"},background:"#353535",text:"#E3E3E3",time:1300,position:"bottom",close:!0},e=void 0,i=null,a=null,o=null,s=null,c={},r={danger:"danger",show:"default",success:"success"},u=function(){i.active=!1,clearTimeout(a)},d=async function(t,e){if(s=t,!i.active||!o){var r;i.active&&(u(),o=!0,await(r=400,new Promise(function(t,n){return setTimeout(function(n){return t()},r)})),o=!1),"string"==typeof s&&(s={text:s});var d=s.action;s.action=async function(){if(!d)return u();d(),u()},Object.assign(c.config,n[e]),Object.assign(i,Object.assign({},s,{theme:e})),i.active=!0,a=setTimeout(u,n.time)}},l={install:function(a){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e=a.extend(t),document.addEventListener("DOMContentLoaded",function(t){var a=document.createElement("div");a.id="snackbar-"+Date.now(),document.body.appendChild(a),c.config=n,(i=new e({propsData:c})).$on("close",function(t){return u()}),i.$mount("#"+a.id)}),Object.assign(n,o),a.prototype.$snack=function(t){var e={},i={};t.methods=t.methods||[],t.methods.forEach(function(t){e[t.name]=t.name,i[t.name]={primary:t.color||n.default.primary}}),Object.assign(n,i);var a={},o=Object.assign({},r,e),s=function(t){a[t]=function(n){return d(n,o[t])}};for(var c in o)s(c);return a}(o)}},f=null;return"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(l),l});</script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="/js/libs.js"></script>
<script src="/js/app.js"></script>
<script>
var darkMode = localStorage.getItem('dark-mode');
if (darkMode === null){
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
darkMode = 'dark';
}else{
darkMode = 'light';
}
localStorage.setItem('dark-mode', darkMode);
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (e.matches){
activeDarkMode(true);
}else{
activeLightMode(true);
}
});
function activeLightMode(save = false){
$('.light-button').hide();
$('.dark-button').show();
$('body').removeClass('dark');
if (save) localStorage.setItem('dark-mode', 'light');
}
function activeDarkMode(save = false){
$('body').addClass('dark');
$('.dark-button').hide();
$('.light-button').show();
if (save) localStorage.setItem('dark-mode', 'dark');
}
if (localStorage.getItem('dark-mode') == 'dark'){
activeDarkMode();
}
$('.dark-button').on('click', function () {
activeDarkMode(true)
});
$('.light-button').on('click', function () {
activeLightMode(true)
});
</script>
</html>