Index page
This commit is contained in:
I'm not a developer
parent
2c5fe17153
commit
4d91aec999
|
|
@ -0,0 +1,131 @@
|
||||||
|
/* Search control */
|
||||||
|
.form-control.search {
|
||||||
|
margin: 0 auto;
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 1rem center;
|
||||||
|
background-size: 24px auto;
|
||||||
|
padding-left: 3rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
.close-search {
|
||||||
|
width: 18px;
|
||||||
|
height: 24px;
|
||||||
|
display: block;
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 100% auto;
|
||||||
|
float: right;
|
||||||
|
margin-top: -36px;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.close-search:hover {
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons list */
|
||||||
|
.icons {
|
||||||
|
margin-right: -10px;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
.col-6,
|
||||||
|
.col-sm-4,
|
||||||
|
.col-lg-3,
|
||||||
|
.col-xl-2 {
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.icon a,
|
||||||
|
.icon span.placeholder {
|
||||||
|
border-radius: .3rem;
|
||||||
|
-webkit-transition: all .1s ease-in-out;
|
||||||
|
-moz-transition: all .1s ease-in-out;
|
||||||
|
transition: all .1s ease-in-out;
|
||||||
|
}
|
||||||
|
.icon a img {
|
||||||
|
width: 24px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons list: Hover state */
|
||||||
|
.icon a:hover {
|
||||||
|
background-color: #FFF !important;
|
||||||
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
/* transform: scale(1.1); */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.icon a:hover::after {
|
||||||
|
content: " ";
|
||||||
|
width: 18px;
|
||||||
|
height: 24px;
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-circle'><circle cx='12' cy='12' r='10'></circle><line x1='12' y1='8' x2='12' y2='16'></line><line x1='8' y1='12' x2='16' y2='12'></line></svg>");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons list: Placeholder */
|
||||||
|
.placeholder {
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-name: backgroundLoading;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
background: linear-gradient(to right, #f8f9fa 8%, #ffffff 18%, #f8f9fa 33%);
|
||||||
|
background-size: 500px 500px;
|
||||||
|
}
|
||||||
|
@keyframes backgroundLoading {
|
||||||
|
0%{
|
||||||
|
background-position: -500px 0
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
background-position: 500px 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal */
|
||||||
|
.modal-backdrop.show {
|
||||||
|
opacity: .66;
|
||||||
|
}
|
||||||
|
.modal-body {
|
||||||
|
padding: 0;
|
||||||
|
border-radius: .3rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Infos icon */
|
||||||
|
.info-icon {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.info-icon td,
|
||||||
|
.info-icon th {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.info-icon thead th {
|
||||||
|
border-top: none;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
.info-icon .variant-white {
|
||||||
|
background-color: #343a40 !important;
|
||||||
|
}
|
||||||
|
.info-icon .format-svg img,
|
||||||
|
.info-icon .format-128 img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.info-icon .format-svg img {
|
||||||
|
max-width: 48px;
|
||||||
|
}
|
||||||
|
.info-icon .format-128 img {
|
||||||
|
max-width: 128px;
|
||||||
|
}
|
||||||
|
.info-icon .format-32-2x img {
|
||||||
|
width: 32px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");background-repeat:no-repeat;background-position:1rem center;background-size:24px auto;padding-left:3rem;padding-right:2rem;border-radius:2rem}.close-search{width:18px;height:24px;display:block;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");background-repeat:no-repeat;background-position:center center;background-size:100% auto;float:right;margin-top:-36px;margin-right:20px;cursor:pointer}.close-search:hover{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>")}.icons{margin-right:-10px;margin-left:-10px}.col-6,.col-lg-3,.col-sm-4,.col-xl-2{padding-right:10px;padding-left:10px;margin-bottom:20px}.icon a,.icon span.placeholder{border-radius:.3rem;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.icon a img{width:24px;height:auto}.icon a:hover{background-color:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.1);text-decoration:none}.icon a:hover::after{content:" ";width:18px;height:24px;display:block;float:right;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-circle'><circle cx='12' cy='12' r='10'></circle><line x1='12' y1='8' x2='12' y2='16'></line><line x1='8' y1='12' x2='16' y2='12'></line></svg>");background-repeat:no-repeat;background-position:center center;background-size:100% auto}.placeholder{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundLoading;animation-timing-function:linear;background:linear-gradient(to right,#f8f9fa 8%,#fff 18%,#f8f9fa 33%);background-size:500px 500px}@keyframes backgroundLoading{0%{background-position:-500px 0}100%{background-position:500px 0}}.modal-backdrop.show{opacity:.66}.modal-body{padding:0;border-radius:.3rem!important}.info-icon{width:100%}.info-icon td,.info-icon th{padding:1rem}.info-icon thead th{border-top:none;border-bottom-width:1px}.info-icon .variant-white{background-color:#343a40!important}.info-icon .format-128 img,.info-icon .format-svg img{width:100%;height:auto}.info-icon .format-svg img{max-width:48px}.info-icon .format-128 img{max-width:128px}.info-icon .format-32-2x img{width:32px;height:auto}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- Meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<title>Cryptocurrency Icons</title>
|
||||||
|
|
||||||
|
<!-- CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="css/main.min.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="jumbotron text-center bg-white">
|
||||||
|
<h1>Cryptocurrency Icons</h1>
|
||||||
|
<p class="lead">A set of <span class="count-cryptos"></span> crypto and fiat currencies icons. <span class="text-muted">Completely free.</span></p>
|
||||||
|
<p class="lead mt-5">
|
||||||
|
<a class="btn btn-outline-primary btn-lg" href="https://github.com/cjdowner/cryptocurrency-icons/">Learn more</a>
|
||||||
|
<a class="btn btn-primary btn-lg" href="https://github.com/cjdowner/cryptocurrency-icons/archive/master.zip">Download</a>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Icon List -->
|
||||||
|
<section class="text-center mb-5">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Search -->
|
||||||
|
<form class="mt-3">
|
||||||
|
<input class="form-control form-control-lg search" type="text" placeholder="Search icons">
|
||||||
|
</form>
|
||||||
|
<!-- Placeholder -->
|
||||||
|
<div class="row icons mt-5">
|
||||||
|
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-sm-4 d-lg-none col-lg-3 col-xl-2 d-xl-block text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-sm-4 d-lg-none col-lg-3 col-xl-2 d-xl-block text-left icon">
|
||||||
|
<span class="placeholder bg-light d-block p-4"> </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="text-center mt-5 mb-5">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="list-inline mt-5">
|
||||||
|
<li class="list-inline-item"><a class="text-secondary" href="https://github.com/cjdowner/cryptocurrency-icons/#donate">Donate</a></li>
|
||||||
|
<li class="list-inline-item"><a class="text-secondary" href="https://github.com/cjdowner/cryptocurrency-icons/#license">License</a></li>
|
||||||
|
<li class="list-inline-item"><a class="text-secondary" href="https://github.com/cjdowner/">Made by @cjdowner</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div class="modal fade" id="infoIcon" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body bg-white">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Javascript -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/main.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// ------------------------------
|
||||||
|
// Settings
|
||||||
|
// ------------------------------
|
||||||
|
var dataJson = "manifest.json";
|
||||||
|
var formats = ["svg", "128", "32", "32@2x"];
|
||||||
|
var variants = ["color", "black", "icon", "white"];
|
||||||
|
var iconDefault = "black";
|
||||||
|
var iconHover = "color";
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------
|
||||||
|
// Init search
|
||||||
|
// ------------------------------
|
||||||
|
$("form .search").on("input", function() {
|
||||||
|
search($(this));
|
||||||
|
});
|
||||||
|
|
||||||
|
$("form").submit(function( event ) {
|
||||||
|
event.preventDefault();
|
||||||
|
search($("form .search"));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------
|
||||||
|
// Get list of icons in manifest
|
||||||
|
// ------------------------------
|
||||||
|
$.getJSON(dataJson, function(data) {
|
||||||
|
|
||||||
|
var icons = "";
|
||||||
|
var count = 0;
|
||||||
|
$.each(data.icons, function(key, val) {
|
||||||
|
|
||||||
|
// Construct icon
|
||||||
|
icons += "<div class=\"col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon\">";
|
||||||
|
icons += "<a href=\"#" + val + "\" class=\"bg-light text-muted text-uppercase d-block p-4\" data-toggle=\"modal\" data-target=\"#infoIcon\" data-icon=\"" + val + "\">";
|
||||||
|
icons += "<img class=\"mr-2\" src=\"svg/" + iconDefault + "/" + val + ".svg\" alt=\"" + val + "\" onerror=\"error(this);\">" + val;
|
||||||
|
icons += "</a>";
|
||||||
|
icons += "</div>";
|
||||||
|
count++;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Display
|
||||||
|
$(".row.icons").html(icons);
|
||||||
|
|
||||||
|
// Hover
|
||||||
|
$(".icon").hover(function() {
|
||||||
|
changeFolder($(this), iconDefault, iconHover);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mouseleave
|
||||||
|
$(".icon").mouseleave(function() {
|
||||||
|
changeFolder($(this), iconHover, iconDefault );
|
||||||
|
});
|
||||||
|
|
||||||
|
// Count icons
|
||||||
|
$(".count-cryptos").text(count);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------
|
||||||
|
// Functions
|
||||||
|
// ------------------------------
|
||||||
|
|
||||||
|
// Search and Replace in Image src
|
||||||
|
// ------------------------------
|
||||||
|
function changeFolder(target, search, replace) {
|
||||||
|
|
||||||
|
var target = $(target).find("img");
|
||||||
|
var srcInit = $(target).attr("src");
|
||||||
|
var srcAfter = srcInit.replace(search, replace);
|
||||||
|
$(target).attr("src", srcAfter);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display icon info in Modal
|
||||||
|
// ------------------------------
|
||||||
|
$("#infoIcon").on("show.bs.modal", function (event) {
|
||||||
|
|
||||||
|
// Modal settings
|
||||||
|
var button = $(event.relatedTarget);
|
||||||
|
var modal = $(this);
|
||||||
|
var icon = button.data("icon");
|
||||||
|
|
||||||
|
// Table settings
|
||||||
|
var infos = "";
|
||||||
|
var i = 0;
|
||||||
|
var j = 0;
|
||||||
|
|
||||||
|
// Construct table
|
||||||
|
infos += "<table class=\"table info-icon mb-0\">";
|
||||||
|
|
||||||
|
// Construct titles
|
||||||
|
infos += "<thead>";
|
||||||
|
infos += "<tr>";
|
||||||
|
infos += "<th class=\"text-center text-uppercase align-middle\"><h5 class=\"mb-0\">" + icon + "</h5></th>";
|
||||||
|
while (variants[j]) {
|
||||||
|
|
||||||
|
var formatCss = formats[i].replace("@", "-");
|
||||||
|
infos += "<th class=\"variant-" + variants[j] + " text-center font-weight-light text-muted align-middle\">" + variants[j] + "</th>";
|
||||||
|
j++;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
j = 0;
|
||||||
|
infos += "</tr>";
|
||||||
|
infos += "</thead>";
|
||||||
|
infos += "<tbody>";
|
||||||
|
|
||||||
|
// Construct Row
|
||||||
|
while (formats[i]) {
|
||||||
|
|
||||||
|
var formatCss = formats[i].replace("@", "-");
|
||||||
|
infos += "<tr>";
|
||||||
|
|
||||||
|
// Construct titles of row
|
||||||
|
infos += "<th class=\"format-" + formatCss + " text-center font-weight-light text-muted align-middle\" scope=\"row\">" + formats[i] + "</th>";
|
||||||
|
|
||||||
|
// File extension
|
||||||
|
if (formats[i] == "svg") {
|
||||||
|
var extension = ".svg" ;
|
||||||
|
}
|
||||||
|
else if (formats[i] == "32@2x") {
|
||||||
|
var extension = "@2x.png" ;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var extension = ".png" ;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct icons cells
|
||||||
|
while (variants[j]) {
|
||||||
|
|
||||||
|
infos += "<td class=\"format-" + formatCss + " variant-" + variants[j] + " text-center\">";
|
||||||
|
infos += "<img src=\"" + formats[i] + "/" + variants[j] + "/" + icon + extension + "\" alt=\"" + icon + "\">";
|
||||||
|
infos += "</td>";
|
||||||
|
j++;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
j = 0;
|
||||||
|
i++;
|
||||||
|
infos += "</tr>";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close table
|
||||||
|
infos += "</tbody>";
|
||||||
|
infos += "</table>";
|
||||||
|
|
||||||
|
// Display
|
||||||
|
modal.find(".modal-title").text(icon);
|
||||||
|
modal.find(".modal-body").html(infos);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Search
|
||||||
|
// ------------------------------
|
||||||
|
function search(target) {
|
||||||
|
|
||||||
|
if ($(target).val().length > 0) {
|
||||||
|
|
||||||
|
// Filter icons
|
||||||
|
$(".icon").css("display", "none");
|
||||||
|
$("a[data-icon*='" + $(target).val().toLowerCase() + "']").parent().css("display", "block");
|
||||||
|
|
||||||
|
// Close
|
||||||
|
$("<div class=\"close-search\"></div>").insertAfter(target);
|
||||||
|
$(".close-search").click(function() {
|
||||||
|
closeSearch(target);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
closeSearch(target);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close search
|
||||||
|
// ------------------------------
|
||||||
|
function closeSearch(target) {
|
||||||
|
$(".close-search").remove();
|
||||||
|
$(".icon").css("display", "block");
|
||||||
|
$(target).val("");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Hide icons on error
|
||||||
|
// ------------------------------
|
||||||
|
function error(img) {
|
||||||
|
$(img).parent().parent().remove();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
function error(t){$(t).parent().parent().remove()}$(document).ready(function(){function t(t,e,o){var t=$(t).find("img"),a=$(t).attr("src").replace(e,o);$(t).attr("src",a)}function e(t){$(t).val().length>0?($(".icon").css("display","none"),$("a[data-icon*='"+$(t).val().toLowerCase()+"']").parent().css("display","block"),$('<div class="close-search"></div>').insertAfter(t),$(".close-search").click(function(){o(t)})):o(t)}function o(t){$(".close-search").remove(),$(".icon").css("display","block"),$(t).val("")}var a=["svg","128","32","32@2x"],c=["color","black","icon","white"];$("form .search").on("input",function(){e($(this))}),$("form").submit(function(t){t.preventDefault(),e($("form .search"))}),$.getJSON("manifest.json",function(e){var o="",a=0;$.each(e.icons,function(t,e){o+='<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">',o+='<a href="#'+e+'" class="bg-light text-muted text-uppercase d-block p-4" data-toggle="modal" data-target="#infoIcon" data-icon="'+e+'">',o+='<img class="mr-2" src="svg/black/'+e+'.svg" alt="'+e+'" onerror="error(this);">'+e,o+="</a>",o+="</div>",a++}),$(".row.icons").html(o),$(".icon").hover(function(){t($(this),"black","color")}),$(".icon").mouseleave(function(){t($(this),"color","black")}),$(".count-cryptos").text(a)}),$("#infoIcon").on("show.bs.modal",function(t){var e=$(t.relatedTarget),o=$(this),n=e.data("icon"),r="",i=0,l=0;for(r+='<table class="table info-icon mb-0">',r+="<thead>",r+="<tr>",r+='<th class="text-center text-uppercase align-middle"><h5 class="mb-0">'+n+"</h5></th>";c[l];){s=a[i].replace("@","-");r+='<th class="variant-'+c[l]+' text-center font-weight-light text-muted align-middle">'+c[l]+"</th>",l++}for(l=0,r+="</tr>",r+="</thead>",r+="<tbody>";a[i];){var s;if(r+="<tr>",r+='<th class="format-'+(s=a[i].replace("@","-"))+' text-center font-weight-light text-muted align-middle" scope="row">'+a[i]+"</th>","svg"==a[i])d=".svg";else if("32@2x"==a[i])d="@2x.png";else var d=".png";for(;c[l];)r+='<td class="format-'+s+" variant-"+c[l]+' text-center">',r+='<img src="'+a[i]+"/"+c[l]+"/"+n+d+'" alt="'+n+'">',r+="</td>",l++;l=0,i++,r+="</tr>"}r+="</tbody>",r+="</table>",o.find(".modal-title").text(n),o.find(".modal-body").html(r)})});
|
||||||
Loading…
Reference in New Issue