From 4d91aec999a5a71bc943342240fd516bfebda8fd Mon Sep 17 00:00:00 2001 From: I'm not a developer Date: Mon, 19 Mar 2018 01:34:10 +0700 Subject: [PATCH] Index page --- css/main.css | 131 +++++++++++++++++++++++++++++++ css/main.min.css | 1 + index.html | 84 ++++++++++++++++++++ js/main.js | 197 +++++++++++++++++++++++++++++++++++++++++++++++ js/main.min.js | 1 + 5 files changed, 414 insertions(+) create mode 100644 css/main.css create mode 100644 css/main.min.css create mode 100644 index.html create mode 100644 js/main.js create mode 100644 js/main.min.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..0e62e325 --- /dev/null +++ b/css/main.css @@ -0,0 +1,131 @@ +/* Search control */ +.form-control.search { + margin: 0 auto; + background-image: url("data:image/svg+xml;utf8,"); + 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,"); + 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,"); +} + +/* 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,"); + 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; +} diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 00000000..fd81ca85 --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,");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,");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,")}.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,");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} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..382d642d --- /dev/null +++ b/index.html @@ -0,0 +1,84 @@ + + + + + + + Cryptocurrency Icons + + + + + + + + + +
+

Cryptocurrency Icons

+

A set of crypto and fiat currencies icons. Completely free.

+

+ Learn more + Download +

+
+ + +
+
+ +
+ +
+ +
+
+   +
+
+   +
+
+   +
+
+   +
+
+   +
+
+   +
+
+
+
+ + + + + + + + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..6796efb1 --- /dev/null +++ b/js/main.js @@ -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 += "
"; + icons += ""; + icons += "\""" + val; + icons += ""; + icons += "
"; + 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 += ""; + + // Construct titles + infos += ""; + infos += ""; + infos += ""; + while (variants[j]) { + + var formatCss = formats[i].replace("@", "-"); + infos += ""; + j++; + + } + + j = 0; + infos += ""; + infos += ""; + infos += ""; + + // Construct Row + while (formats[i]) { + + var formatCss = formats[i].replace("@", "-"); + infos += ""; + + // Construct titles of row + infos += ""; + + // 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 += ""; + j++; + + } + + j = 0; + i++; + infos += ""; + + } + + // Close table + infos += ""; + infos += "
" + icon + "
" + variants[j] + "
" + formats[i] + ""; + infos += "\"""; + infos += "
"; + + // 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 + $("
").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(); +} diff --git a/js/main.min.js b/js/main.min.js new file mode 100644 index 00000000..ff680f7b --- /dev/null +++ b/js/main.min.js @@ -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"),$('
').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+='
',o+='',o+=''+e+''+e,o+="",o+="
",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+='',r+="",r+="",r+='";c[l];){s=a[i].replace("@","-");r+='",l++}for(l=0,r+="",r+="",r+="";a[i];){var s;if(r+="",r+='","svg"==a[i])d=".svg";else if("32@2x"==a[i])d="@2x.png";else var d=".png";for(;c[l];)r+='",l++;l=0,i++,r+=""}r+="",r+="
'+n+"
'+c[l]+"
'+a[i]+"',r+=''+n+'',r+="
",o.find(".modal-title").text(n),o.find(".modal-body").html(r)})}); \ No newline at end of file