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