heuzef
/
icon-collection
mirror of https://github.com/benc-uk/icon-collection.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
14 Commits
8 Branches
11 MiB
 
 
 
Tree: 5b3597a90f
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5b3597a90f'
${ noResults }
icon-collection/logos/index.html

203 lines
12 KiB
Raw Blame History 

  1. 

  2. <head><title>Logos & Brands</title>

  3. <link rel="icon" type="image/png" href="../favicon.png">

  4. </head>

  5. <style>

  6. body {

  7.   font-family: 'Segoe UI', Arial;

  8.   background-color: #aaa;

  9.   padding: 0;

  10.   margin: 0;

  11. }

  12. .bg0 {

  13.   background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png")

  14. }

  15. .bg1 {

  16.   background-color: #333;

  17. }

  18. .bg2 {

  19.   background-color: #fff;

  20. }

  21. .imgbox img { 

  22.   width: 10.5rem;

  23.   height: 10.5rem;

  24.   object-fit: contain;

  25.   cursor: pointer;

  26. }

  27. .imgbox {

  28.   margin: 0.6rem;

  29.   padding: 0.5rem;

  30.   text-align: center;

  31.   width: 12rem;

  32.   height: 12rem;

  33.   background-color: #e0e0e0;

  34. }

  35. h1 {

  36.   font-size: 2.6rem;

  37. }

  38. .find, .find input {

  39.   font-size: 1.5rem;

  40. }

  41. .top {

  42.   position: -webkit-sticky;

  43.   position: sticky;

  44.   top: 0;

  45.   background-color: #aaa;

  46.   padding: 1rem;

  47.   box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);

  48. }

  49. .top button {

  50.   float: right; 

  51.   position: relative; 

  52.   top: -2rem; 

  53.   font-size: 1.5rem;

  54. }

  55. .pngbox {

  56.   position: absolute; 

  57.   top: 2rem; 

  58.   right: 1rem;

  59.   font-size: 1.5rem;

  60. }

  61. input[type="checkbox"] {

  62.   width: 1.6em;

  63.   height: 1.6em;

  64. }

  65. .label {

  66.   height: 2.5em;

  67.   line-height: 1em;

  68.   overflow: hidden;

  69.   font-size: 0.9rem;

  70. }

  71. .grid {

  72.   display: flex;

  73.   flex-wrap: wrap;

  74.   width: 100%;

  75. }

  76. h1 {

  77.   display:inline;

  78. }

  79. .home {

  80.   font-size: 3rem;

  81.   text-decoration: none

  82. }

  83. </style>

  84. <body>

  85. <div class="top">

  86. <a href=".." class="home">⮤</a> &nbsp; <h1>Logos & Brands</h1>

  87. <br/><br/>

  88. <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> 

  89. <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>

  90. <button onclick="toggleBg()">Change Background</button>

  91. </div>

  92. <div class="grid">

  93. <div id="android.svg" class="imgbox"><img src="android.svg" class="bg0" onclick="download('android.svg', this)"/><div class="label">android.svg</div></div>

  94. <div id="angular.svg" class="imgbox"><img src="angular.svg" class="bg0" onclick="download('angular.svg', this)"/><div class="label">angular.svg</div></div>

  95. <div id="ansible.svg" class="imgbox"><img src="ansible.svg" class="bg0" onclick="download('ansible.svg', this)"/><div class="label">ansible.svg</div></div>

  96. <div id="apache.svg" class="imgbox"><img src="apache.svg" class="bg0" onclick="download('apache.svg', this)"/><div class="label">apache.svg</div></div>

  97. <div id="azure-logo.svg" class="imgbox"><img src="azure-logo.svg" class="bg0" onclick="download('azure-logo.svg', this)"/><div class="label">azure-logo.svg</div></div>

  98. <div id="azure-offical.svg" class="imgbox"><img src="azure-offical.svg" class="bg0" onclick="download('azure-offical.svg', this)"/><div class="label">azure-offical.svg</div></div>

  99. <div id="bash.svg" class="imgbox"><img src="bash.svg" class="bg0" onclick="download('bash.svg', this)"/><div class="label">bash.svg</div></div>

  100. <div id="bit-bucket.svg" class="imgbox"><img src="bit-bucket.svg" class="bg0" onclick="download('bit-bucket.svg', this)"/><div class="label">bit-bucket.svg</div></div>

  101. <div id="chef-logo.svg" class="imgbox"><img src="chef-logo.svg" class="bg0" onclick="download('chef-logo.svg', this)"/><div class="label">chef-logo.svg</div></div>

  102. <div id="chef.svg" class="imgbox"><img src="chef.svg" class="bg0" onclick="download('chef.svg', this)"/><div class="label">chef.svg</div></div>

  103. <div id="csharp.svg" class="imgbox"><img src="csharp.svg" class="bg0" onclick="download('csharp.svg', this)"/><div class="label">csharp.svg</div></div>

  104. <div id="docker-icon-wh.svg" class="imgbox"><img src="docker-icon-wh.svg" class="bg0" onclick="download('docker-icon-wh.svg', this)"/><div class="label">docker-icon-wh.svg</div></div>

  105. <div id="docker-icon.svg" class="imgbox"><img src="docker-icon.svg" class="bg0" onclick="download('docker-icon.svg', this)"/><div class="label">docker-icon.svg</div></div>

  106. <div id="docker-mono.svg" class="imgbox"><img src="docker-mono.svg" class="bg0" onclick="download('docker-mono.svg', this)"/><div class="label">docker-mono.svg</div></div>

  107. <div id="docker-whale.svg" class="imgbox"><img src="docker-whale.svg" class="bg0" onclick="download('docker-whale.svg', this)"/><div class="label">docker-whale.svg</div></div>

  108. <div id="dotnetcore.svg" class="imgbox"><img src="dotnetcore.svg" class="bg0" onclick="download('dotnetcore.svg', this)"/><div class="label">dotnetcore.svg</div></div>

  109. <div id="dynamics.svg" class="imgbox"><img src="dynamics.svg" class="bg0" onclick="download('dynamics.svg', this)"/><div class="label">dynamics.svg</div></div>

  110. <div id="eclipse.svg" class="imgbox"><img src="eclipse.svg" class="bg0" onclick="download('eclipse.svg', this)"/><div class="label">eclipse.svg</div></div>

  111. <div id="flask.svg" class="imgbox"><img src="flask.svg" class="bg0" onclick="download('flask.svg', this)"/><div class="label">flask.svg</div></div>

  112. <div id="git.svg" class="imgbox"><img src="git.svg" class="bg0" onclick="download('git.svg', this)"/><div class="label">git.svg</div></div>

  113. <div id="github.svg" class="imgbox"><img src="github.svg" class="bg0" onclick="download('github.svg', this)"/><div class="label">github.svg</div></div>

  114. <div id="gradle.svg" class="imgbox"><img src="gradle.svg" class="bg0" onclick="download('gradle.svg', this)"/><div class="label">gradle.svg</div></div>

  115. <div id="helm-logo.svg" class="imgbox"><img src="helm-logo.svg" class="bg0" onclick="download('helm-logo.svg', this)"/><div class="label">helm-logo.svg</div></div>

  116. <div id="java.svg" class="imgbox"><img src="java.svg" class="bg0" onclick="download('java.svg', this)"/><div class="label">java.svg</div></div>

  117. <div id="jenkins.svg" class="imgbox"><img src="jenkins.svg" class="bg0" onclick="download('jenkins.svg', this)"/><div class="label">jenkins.svg</div></div>

  118. <div id="jfrog.svg" class="imgbox"><img src="jfrog.svg" class="bg0" onclick="download('jfrog.svg', this)"/><div class="label">jfrog.svg</div></div>

  119. <div id="kube.svg" class="imgbox"><img src="kube.svg" class="bg0" onclick="download('kube.svg', this)"/><div class="label">kube.svg</div></div>

  120. <div id="linkedin.svg" class="imgbox"><img src="linkedin.svg" class="bg0" onclick="download('linkedin.svg', this)"/><div class="label">linkedin.svg</div></div>

  121. <div id="linux-tux-colour.svg" class="imgbox"><img src="linux-tux-colour.svg" class="bg0" onclick="download('linux-tux-colour.svg', this)"/><div class="label">linux-tux-colour.svg</div></div>

  122. <div id="linux-tux-mono.svg" class="imgbox"><img src="linux-tux-mono.svg" class="bg0" onclick="download('linux-tux-mono.svg', this)"/><div class="label">linux-tux-mono.svg</div></div>

  123. <div id="microsoft-logo.svg" class="imgbox"><img src="microsoft-logo.svg" class="bg0" onclick="download('microsoft-logo.svg', this)"/><div class="label">microsoft-logo.svg</div></div>

  124. <div id="microsoft.svg" class="imgbox"><img src="microsoft.svg" class="bg0" onclick="download('microsoft.svg', this)"/><div class="label">microsoft.svg</div></div>

  125. <div id="ms-sq.svg" class="imgbox"><img src="ms-sq.svg" class="bg0" onclick="download('ms-sq.svg', this)"/><div class="label">ms-sq.svg</div></div>

  126. <div id="ms.svg" class="imgbox"><img src="ms.svg" class="bg0" onclick="download('ms.svg', this)"/><div class="label">ms.svg</div></div>

  127. <div id="nodejs-2.svg" class="imgbox"><img src="nodejs-2.svg" class="bg0" onclick="download('nodejs-2.svg', this)"/><div class="label">nodejs-2.svg</div></div>

  128. <div id="nodejs-3.svg" class="imgbox"><img src="nodejs-3.svg" class="bg0" onclick="download('nodejs-3.svg', this)"/><div class="label">nodejs-3.svg</div></div>

  129. <div id="nodejs.svg" class="imgbox"><img src="nodejs.svg" class="bg0" onclick="download('nodejs.svg', this)"/><div class="label">nodejs.svg</div></div>

  130. <div id="octopus-deploy.svg" class="imgbox"><img src="octopus-deploy.svg" class="bg0" onclick="download('octopus-deploy.svg', this)"/><div class="label">octopus-deploy.svg</div></div>

  131. <div id="powerbi-mono-black.svg" class="imgbox"><img src="powerbi-mono-black.svg" class="bg0" onclick="download('powerbi-mono-black.svg', this)"/><div class="label">powerbi-mono-black.svg</div></div>

  132. <div id="puppet.svg" class="imgbox"><img src="puppet.svg" class="bg0" onclick="download('puppet.svg', this)"/><div class="label">puppet.svg</div></div>

  133. <div id="python-colour.svg" class="imgbox"><img src="python-colour.svg" class="bg0" onclick="download('python-colour.svg', this)"/><div class="label">python-colour.svg</div></div>

  134. <div id="python-mono.svg" class="imgbox"><img src="python-mono.svg" class="bg0" onclick="download('python-mono.svg', this)"/><div class="label">python-mono.svg</div></div>

  135. <div id="red-hat.svg" class="imgbox"><img src="red-hat.svg" class="bg0" onclick="download('red-hat.svg', this)"/><div class="label">red-hat.svg</div></div>

  136. <div id="ruby mono.svg" class="imgbox"><img src="ruby mono.svg" class="bg0" onclick="download('ruby mono.svg', this)"/><div class="label">ruby mono.svg</div></div>

  137. <div id="ruby.svg" class="imgbox"><img src="ruby.svg" class="bg0" onclick="download('ruby.svg', this)"/><div class="label">ruby.svg</div></div>

  138. <div id="saltstack.svg" class="imgbox"><img src="saltstack.svg" class="bg0" onclick="download('saltstack.svg', this)"/><div class="label">saltstack.svg</div></div>

  139. <div id="sap.svg" class="imgbox"><img src="sap.svg" class="bg0" onclick="download('sap.svg', this)"/><div class="label">sap.svg</div></div>

  140. <div id="slack.svg" class="imgbox"><img src="slack.svg" class="bg0" onclick="download('slack.svg', this)"/><div class="label">slack.svg</div></div>

  141. <div id="suse.svg" class="imgbox"><img src="suse.svg" class="bg0" onclick="download('suse.svg', this)"/><div class="label">suse.svg</div></div>

  142. <div id="terraform.svg" class="imgbox"><img src="terraform.svg" class="bg0" onclick="download('terraform.svg', this)"/><div class="label">terraform.svg</div></div>

  143. <div id="trello.svg" class="imgbox"><img src="trello.svg" class="bg0" onclick="download('trello.svg', this)"/><div class="label">trello.svg</div></div>

  144. <div id="twitter-square.svg" class="imgbox"><img src="twitter-square.svg" class="bg0" onclick="download('twitter-square.svg', this)"/><div class="label">twitter-square.svg</div></div>

  145. <div id="ubuntu.svg" class="imgbox"><img src="ubuntu.svg" class="bg0" onclick="download('ubuntu.svg', this)"/><div class="label">ubuntu.svg</div></div>

  146. <div id="vuejs.svg" class="imgbox"><img src="vuejs.svg" class="bg0" onclick="download('vuejs.svg', this)"/><div class="label">vuejs.svg</div></div>

  147. <div id="windows.svg" class="imgbox"><img src="windows.svg" class="bg0" onclick="download('windows.svg', this)"/><div class="label">windows.svg</div></div>

  148. <div id="youtube.svg" class="imgbox"><img src="youtube.svg" class="bg0" onclick="download('youtube.svg', this)"/><div class="label">youtube.svg</div></div>

  149. 

  150. </div>

  151. <script>

  152. var bg = 0;

  153. function toggleBg() {

  154.   bg++

  155.   if(bg > 2) bg = 0;

  156.   for(let img of document.getElementsByTagName("img")) {

  157.     img.className = `bg${bg}`;

  158.   }

  159. }

  160. 

  161. function search() {

  162.   let q = document.getElementById('finder').value.trim().toLowerCase()

  163.   if(q.length <= 0) {

  164.     for(let imgbox of document.getElementsByClassName("imgbox")) {

  165.       imgbox.style.display = "inline-block"

  166.     }

  167.   }

  168.   for(let imgbox of document.getElementsByClassName("imgbox")) {

  169.     imgbox.style.display = "inline-block"

  170.     if(!imgbox.id.includes(q)) {

  171.       imgbox.style.display = "none"

  172.     }

  173.   }

  174. }

  175. 

  176. function download(f, e) {

  177.   var downloadPNG = document.getElementById("pngcheck").checked;

  178.   if(downloadPNG) {

  179.     var data = getBase64Image(e);

  180.     let a = document.createElement('a')

  181.     a.href = "data:application/octet-stream;base64," + data

  182.     a.download = f.replace('.svg', '.png')

  183.     a.click()

  184.   } else {

  185.     let a = document.createElement('a')

  186.     a.href = f

  187.     a.download = f

  188.     a.click()

  189.   }

  190. }

  191. 

  192. function getBase64Image(img) {

  193.   var canvas = document.createElement("canvas");

  194.   canvas.width = img.naturalWidth;

  195.   canvas.height = img.naturalHeight;

  196.   console.log(canvas.width , canvas.height)

  197.   var ctx = canvas.getContext("2d");

  198.   ctx.drawImage(img, 0, 0);

  199.   var dataURL = canvas.toDataURL("image/png");

  200.   return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

  201. }

  202. </script>

  203. </body></html>