heuzef
/
icon-collection
镜像来自 https://github.com/benc-uk/icon-collection.git
1
0
複製 0
程式碼 問題 0 版本發佈 1 Wiki 活動
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.
13 提交
8 分支
33 MiB
 
 
 
目錄樹: ecd0cb9a0a
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 'ecd0cb9a0a'
${ noResults }
icon-collection/other/index.html

165 line
7.2 KiB
原始文件 Blame 歷史記錄 

  1. 

  2. <head><title>Other Icons</title>

  3. <script src="http://pablojs.com/downloads/pablo.min.js"></script>

  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.   padding-top: 0;

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

  49. }

  50. .top button {

  51.   float: right; 

  52.   position: relative; 

  53.   top: -2rem; 

  54.   font-size: 1.5rem;

  55. }

  56. .pngbox {

  57.   position: absolute; 

  58.   top: 2rem; 

  59.   right: 1rem;

  60.   font-size: 1.5rem;

  61. }

  62. input[type="checkbox"] {

  63.   width: 1.6em;

  64.   height: 1.6em;

  65. }

  66. .label {

  67.   height: 2.5em;

  68.   line-height: 1em;

  69.   overflow: hidden;

  70.   font-size: 0.9rem;

  71. }

  72. .grid {

  73.   display: flex;

  74.   flex-wrap: wrap;

  75.   width: 100%;

  76. }

  77. </style>

  78. <body>

  79. <div class="top">

  80. <h1>Other Icons</h1>

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

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

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

  84. </div>

  85. <div class="grid">

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

  87. <div id="aks-blue.svg" class="imgbox"><img src="aks-blue.svg" class="bg0" onclick="download('aks-blue.svg', this)"/><div class="label">aks-blue.svg</div></div>

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

  89. <div id="app-center.svg" class="imgbox"><img src="app-center.svg" class="bg0" onclick="download('app-center.svg', this)"/><div class="label">app-center.svg</div></div>

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

  91. <div id="cloud-security.svg" class="imgbox"><img src="cloud-security.svg" class="bg0" onclick="download('cloud-security.svg', this)"/><div class="label">cloud-security.svg</div></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  111. 

  112. </div>

  113. <script>

  114. var bg = 0;

  115. function toggleBg() {

  116.   bg++

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

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

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

  120.   }

  121. }

  122. 

  123. function search() {

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

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

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

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

  128.     }

  129.   }

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

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

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

  133.       imgbox.style.display = "none"

  134.     }

  135.   }

  136. }

  137. 

  138. function download(f, e) {

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

  140.   if(downloadPNG) {

  141.     var data = getBase64Image(e);

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

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

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

  145.     a.click()

  146.   } else {

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

  148.     a.href = f

  149.     a.download = f

  150.     a.click()

  151.   }

  152. }

  153. 

  154. function getBase64Image(img) {

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

  156.   canvas.width = img.naturalWidth;

  157.   canvas.height = img.naturalHeight;

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

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

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

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

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

  163. }

  164. </script>

  165. </body></html>