heuzef
/
icon-collection
réplica de https://github.com/benc-uk/icon-collection.git
1
0
Fork 0
Código Incidencias 0 Lanzamientos 1 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
21 Commits
8 Ramas
106 MiB
 
 
 
Árbol: c891b590c4
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'c891b590c4'
${ noResults }
icon-collection/logos/index.html

310 líneas
17 KiB
Original Blame Histórico 

  1. <html>

  2. <head>

  3.   <title>Logos &amp; Brands</title>

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

  5.   <style>

  6.     body {

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

  8.       background-color: #aaa;

  9.       padding: 0;

  10.       margin: 0;

  11.     }

  12.     .bg-0 {

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

  14.     }

  15.     .bg-1 {

  16.       background-color: #333;

  17.     }

  18.     .bg-2 {

  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. </head>

  85. 

  86. <body>

  87. 

  88.   <div class="top">

  89.     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Logos &amp; Brands</h1>

  90.     <br/><br/>

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

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

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

  94.   </div>

  95. 

  96.   <div class="grid">

  97.     

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

  99.     

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

  101.     

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

  103.     

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

  105.     

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

  107.     

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

  109.     

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

  111.     

  112.       <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>

  113.     

  114.       <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>

  115.     

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

  117.     

  118.       <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>

  119.     

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

  121.     

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

  123.     

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

  125.     

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

  127.     

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

  129.     

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

  131.     

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

  133.     

  134.       <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>

  135.     

  136.       <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>

  137.     

  138.       <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>

  139.     

  140.       <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>

  141.     

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

  143.     

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

  145.     

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

  147.     

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

  149.     

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

  151.     

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

  153.     

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

  155.     

  156.       <div id="go-lang-old.svg" class="imgbox"><img src="go-lang-old.svg" class="bg0" onclick="download('go-lang-old.svg', this)"/><div class="label">go-lang-old.svg</div></div>

  157.     

  158.       <div id="go-lang.svg" class="imgbox"><img src="go-lang.svg" class="bg0" onclick="download('go-lang.svg', this)"/><div class="label">go-lang.svg</div></div>

  159.     

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

  161.     

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

  163.     

  164.       <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>

  165.     

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

  167.     

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

  169.     

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

  171.     

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

  173.     

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

  175.     

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

  177.     

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

  179.     

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

  181.     

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

  183.     

  184.       <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>

  185.     

  186.       <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>

  187.     

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

  189.     

  190.       <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>

  191.     

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

  193.     

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

  195.     

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

  197.     

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

  199.     

  200.       <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>

  201.     

  202.       <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>

  203.     

  204.       <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>

  205.     

  206.       <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>

  207.     

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

  209.     

  210.       <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>

  211.     

  212.       <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>

  213.     

  214.       <div id="r-lang.svg" class="imgbox"><img src="r-lang.svg" class="bg0" onclick="download('r-lang.svg', this)"/><div class="label">r-lang.svg</div></div>

  215.     

  216.       <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>

  217.     

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

  219.     

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

  221.     

  222.       <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>

  223.     

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

  225.     

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

  227.     

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

  229.     

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

  231.     

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

  233.     

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

  235.     

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

  237.     

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

  239.     

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

  241.     

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

  243.     

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

  245.     

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

  247.     

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

  249.     

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

  251.     

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

  253.     

  254.   </div>

  255. 

  256.   <script>

  257.     var bgSetting = 0;

  258. 

  259.     function toggleBg() {

  260.       bgSetting++

  261.       if(bgSetting > 2) bgSetting = 0;

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

  263.         img.className = `bg-${bgSetting}`;

  264.       }

  265.     }

  266.     

  267.     function search() {

  268.       let query = document.getElementById('finder').value.trim().toLowerCase()

  269.       if(query.length <= 0) {

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

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

  272.         }

  273.       }

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

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

  276.         if(!imgbox.id.includes(query)) {

  277.           imgbox.style.display = "none"

  278.         }

  279.       }

  280.     }

  281.     

  282.     function download(f, e) {

  283.       if(document.getElementById("pngcheck").checked) {

  284.         var data = getBase64Image(e);

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

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

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

  288.         a.click()

  289.       } else {

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

  291.         a.href = f

  292.         a.download = f

  293.         a.click()

  294.       }

  295.     }

  296.     

  297.     // Actual magic

  298.     function getBase64Image(img) {

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

  300.       canvas.width = img.naturalWidth;

  301.       canvas.height = img.naturalHeight;

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

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

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

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

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

  307.     }

  308.   </script>

  309. </body>

  310. </html>