heuzef
/
icon-collection
mirror of https://github.com/benc-uk/icon-collection.git


<head><title>Logos & Brands</title></head>
<style>
body {
  font-family: 'Segoe UI', Arial;
  background-color: #aaa;
  padding: 0;
  margin: 0;
}
.bg0 {
  background-image: url("../_tools/background.png")
}
.bg1 {
  background-color: #333;
}
.bg2 {
  background-color: #fff;
}
.imgbox img { 
  width: 10.5rem;
  height: 10.5rem;
  object-fit: contain;
  cursor: pointer;
}
.imgbox {
  margin: 0.6rem;
  padding: 0.5rem;
  text-align: center;
  width: 12rem;
  height: 12rem;
  background-color: #e0e0e0;
}
h1 {
  font-size: 2.6rem;
}
.find, .find input {
  font-size: 1.5rem;
}
.top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #aaa;
  padding: 1rem;
  padding-top: 0;
  box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
}
.top button {
  float: right; 
  position: relative; 
  top: -2rem; 
  font-size: 1.5rem;
}
.label {
  height: 2.5em;
  line-height: 1em;
  overflow: hidden;
  font-size: 0.9rem;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
</style>
<body>
<div class="top">
<h1>Logos & Brands</h1>
<span class="find">Finder: <input onkeyup="search()" id="finder"><br></span>
<button onclick="toggleBg()">Change Background</button>
</div>
<div class="grid">
<div id="android.svg" class="imgbox"><a href="android.svg" download><img src="android.svg" class="bg0"/></a><div class="label">android.svg</div></div>
<div id="angular.svg" class="imgbox"><a href="angular.svg" download><img src="angular.svg" class="bg0"/></a><div class="label">angular.svg</div></div>
<div id="ansible.svg" class="imgbox"><a href="ansible.svg" download><img src="ansible.svg" class="bg0"/></a><div class="label">ansible.svg</div></div>
<div id="apache.svg" class="imgbox"><a href="apache.svg" download><img src="apache.svg" class="bg0"/></a><div class="label">apache.svg</div></div>
<div id="azure-logo.svg" class="imgbox"><a href="azure-logo.svg" download><img src="azure-logo.svg" class="bg0"/></a><div class="label">azure-logo.svg</div></div>
<div id="azure-offical.svg" class="imgbox"><a href="azure-offical.svg" download><img src="azure-offical.svg" class="bg0"/></a><div class="label">azure-offical.svg</div></div>
<div id="bash.svg" class="imgbox"><a href="bash.svg" download><img src="bash.svg" class="bg0"/></a><div class="label">bash.svg</div></div>
<div id="bit-bucket.svg" class="imgbox"><a href="bit-bucket.svg" download><img src="bit-bucket.svg" class="bg0"/></a><div class="label">bit-bucket.svg</div></div>
<div id="chef-logo.svg" class="imgbox"><a href="chef-logo.svg" download><img src="chef-logo.svg" class="bg0"/></a><div class="label">chef-logo.svg</div></div>
<div id="chef.svg" class="imgbox"><a href="chef.svg" download><img src="chef.svg" class="bg0"/></a><div class="label">chef.svg</div></div>
<div id="csharp.svg" class="imgbox"><a href="csharp.svg" download><img src="csharp.svg" class="bg0"/></a><div class="label">csharp.svg</div></div>
<div id="docker-icon-wh.svg" class="imgbox"><a href="docker-icon-wh.svg" download><img src="docker-icon-wh.svg" class="bg0"/></a><div class="label">docker-icon-wh.svg</div></div>
<div id="docker-icon.svg" class="imgbox"><a href="docker-icon.svg" download><img src="docker-icon.svg" class="bg0"/></a><div class="label">docker-icon.svg</div></div>
<div id="docker-mono.svg" class="imgbox"><a href="docker-mono.svg" download><img src="docker-mono.svg" class="bg0"/></a><div class="label">docker-mono.svg</div></div>
<div id="docker-whale.svg" class="imgbox"><a href="docker-whale.svg" download><img src="docker-whale.svg" class="bg0"/></a><div class="label">docker-whale.svg</div></div>
<div id="dotnetcore.svg" class="imgbox"><a href="dotnetcore.svg" download><img src="dotnetcore.svg" class="bg0"/></a><div class="label">dotnetcore.svg</div></div>
<div id="dynamics.svg" class="imgbox"><a href="dynamics.svg" download><img src="dynamics.svg" class="bg0"/></a><div class="label">dynamics.svg</div></div>
<div id="eclipse.svg" class="imgbox"><a href="eclipse.svg" download><img src="eclipse.svg" class="bg0"/></a><div class="label">eclipse.svg</div></div>
<div id="flask.svg" class="imgbox"><a href="flask.svg" download><img src="flask.svg" class="bg0"/></a><div class="label">flask.svg</div></div>
<div id="git.svg" class="imgbox"><a href="git.svg" download><img src="git.svg" class="bg0"/></a><div class="label">git.svg</div></div>
<div id="github.svg" class="imgbox"><a href="github.svg" download><img src="github.svg" class="bg0"/></a><div class="label">github.svg</div></div>
<div id="gradle.svg" class="imgbox"><a href="gradle.svg" download><img src="gradle.svg" class="bg0"/></a><div class="label">gradle.svg</div></div>
<div id="helm-logo.svg" class="imgbox"><a href="helm-logo.svg" download><img src="helm-logo.svg" class="bg0"/></a><div class="label">helm-logo.svg</div></div>
<div id="java.svg" class="imgbox"><a href="java.svg" download><img src="java.svg" class="bg0"/></a><div class="label">java.svg</div></div>
<div id="jenkins.svg" class="imgbox"><a href="jenkins.svg" download><img src="jenkins.svg" class="bg0"/></a><div class="label">jenkins.svg</div></div>
<div id="jfrog.svg" class="imgbox"><a href="jfrog.svg" download><img src="jfrog.svg" class="bg0"/></a><div class="label">jfrog.svg</div></div>
<div id="kube.svg" class="imgbox"><a href="kube.svg" download><img src="kube.svg" class="bg0"/></a><div class="label">kube.svg</div></div>
<div id="linkedin.svg" class="imgbox"><a href="linkedin.svg" download><img src="linkedin.svg" class="bg0"/></a><div class="label">linkedin.svg</div></div>
<div id="linux-tux-colour.svg" class="imgbox"><a href="linux-tux-colour.svg" download><img src="linux-tux-colour.svg" class="bg0"/></a><div class="label">linux-tux-colour.svg</div></div>
<div id="linux-tux-mono.svg" class="imgbox"><a href="linux-tux-mono.svg" download><img src="linux-tux-mono.svg" class="bg0"/></a><div class="label">linux-tux-mono.svg</div></div>
<div id="microsoft-logo.svg" class="imgbox"><a href="microsoft-logo.svg" download><img src="microsoft-logo.svg" class="bg0"/></a><div class="label">microsoft-logo.svg</div></div>
<div id="microsoft.svg" class="imgbox"><a href="microsoft.svg" download><img src="microsoft.svg" class="bg0"/></a><div class="label">microsoft.svg</div></div>
<div id="ms-sq.svg" class="imgbox"><a href="ms-sq.svg" download><img src="ms-sq.svg" class="bg0"/></a><div class="label">ms-sq.svg</div></div>
<div id="ms.svg" class="imgbox"><a href="ms.svg" download><img src="ms.svg" class="bg0"/></a><div class="label">ms.svg</div></div>
<div id="nodejs-2.svg" class="imgbox"><a href="nodejs-2.svg" download><img src="nodejs-2.svg" class="bg0"/></a><div class="label">nodejs-2.svg</div></div>
<div id="nodejs-3.svg" class="imgbox"><a href="nodejs-3.svg" download><img src="nodejs-3.svg" class="bg0"/></a><div class="label">nodejs-3.svg</div></div>
<div id="nodejs.svg" class="imgbox"><a href="nodejs.svg" download><img src="nodejs.svg" class="bg0"/></a><div class="label">nodejs.svg</div></div>
<div id="octopus-deploy.svg" class="imgbox"><a href="octopus-deploy.svg" download><img src="octopus-deploy.svg" class="bg0"/></a><div class="label">octopus-deploy.svg</div></div>
<div id="powerbi-mono-black.svg" class="imgbox"><a href="powerbi-mono-black.svg" download><img src="powerbi-mono-black.svg" class="bg0"/></a><div class="label">powerbi-mono-black.svg</div></div>
<div id="puppet.svg" class="imgbox"><a href="puppet.svg" download><img src="puppet.svg" class="bg0"/></a><div class="label">puppet.svg</div></div>
<div id="python-colour.svg" class="imgbox"><a href="python-colour.svg" download><img src="python-colour.svg" class="bg0"/></a><div class="label">python-colour.svg</div></div>
<div id="python-mono.svg" class="imgbox"><a href="python-mono.svg" download><img src="python-mono.svg" class="bg0"/></a><div class="label">python-mono.svg</div></div>
<div id="red-hat.svg" class="imgbox"><a href="red-hat.svg" download><img src="red-hat.svg" class="bg0"/></a><div class="label">red-hat.svg</div></div>
<div id="ruby mono.svg" class="imgbox"><a href="ruby mono.svg" download><img src="ruby mono.svg" class="bg0"/></a><div class="label">ruby mono.svg</div></div>
<div id="ruby.svg" class="imgbox"><a href="ruby.svg" download><img src="ruby.svg" class="bg0"/></a><div class="label">ruby.svg</div></div>
<div id="saltstack.svg" class="imgbox"><a href="saltstack.svg" download><img src="saltstack.svg" class="bg0"/></a><div class="label">saltstack.svg</div></div>
<div id="sap.svg" class="imgbox"><a href="sap.svg" download><img src="sap.svg" class="bg0"/></a><div class="label">sap.svg</div></div>
<div id="slack.svg" class="imgbox"><a href="slack.svg" download><img src="slack.svg" class="bg0"/></a><div class="label">slack.svg</div></div>
<div id="suse.svg" class="imgbox"><a href="suse.svg" download><img src="suse.svg" class="bg0"/></a><div class="label">suse.svg</div></div>
<div id="terraform.svg" class="imgbox"><a href="terraform.svg" download><img src="terraform.svg" class="bg0"/></a><div class="label">terraform.svg</div></div>
<div id="trello.svg" class="imgbox"><a href="trello.svg" download><img src="trello.svg" class="bg0"/></a><div class="label">trello.svg</div></div>
<div id="twitter-square.svg" class="imgbox"><a href="twitter-square.svg" download><img src="twitter-square.svg" class="bg0"/></a><div class="label">twitter-square.svg</div></div>
<div id="ubuntu.svg" class="imgbox"><a href="ubuntu.svg" download><img src="ubuntu.svg" class="bg0"/></a><div class="label">ubuntu.svg</div></div>
<div id="vuejs.svg" class="imgbox"><a href="vuejs.svg" download><img src="vuejs.svg" class="bg0"/></a><div class="label">vuejs.svg</div></div>
<div id="windows.svg" class="imgbox"><a href="windows.svg" download><img src="windows.svg" class="bg0"/></a><div class="label">windows.svg</div></div>
<div id="youtube.svg" class="imgbox"><a href="youtube.svg" download><img src="youtube.svg" class="bg0"/></a><div class="label">youtube.svg</div></div>

</div>
<script>
var bg = 0;
function toggleBg() {
  bg++
  if(bg > 2) bg = 0;
  for(let img of document.getElementsByTagName("img")) {
    img.className = `bg${bg}`;
  }
}

function search() {
  let q = document.getElementById('finder').value.trim().toLowerCase()
  if(q.length <= 0) {
    for(let imgbox of document.getElementsByClassName("imgbox")) {
      imgbox.style.display = "inline-block"
    }
  }
  for(let imgbox of document.getElementsByClassName("imgbox")) {
    imgbox.style.display = "inline-block"
    if(!imgbox.id.includes(q)) {
      imgbox.style.display = "none"
    }
  }
}

function download(f) {
  let a = document.createElement('a')
  a.href = f
  a.download = f
  console.log(a)
  a.click()
}
</script>
</body></html>