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.
10 Commits
8 Branches
33 MiB
 
 
 
Tree: 1d0e9eabc1
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1d0e9eabc1'
${ noResults }
icon-collection/other/index.html

133 lines
6.1 KiB
Raw Blame History 

  1. 

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

  3. <style>

  4. body {

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

  6.   background-color: #aaa;

  7.   padding: 0;

  8.   margin: 0;

  9. }

  10. .bg0 {

  11.   background-image: url("../_tools/background.png")

  12. }

  13. .bg1 {

  14.   background-color: #333;

  15. }

  16. .bg2 {

  17.   background-color: #fff;

  18. }

  19. .imgbox img { 

  20.   width: 10.5rem;

  21.   height: 10.5rem;

  22.   object-fit: contain;

  23.   cursor: pointer;

  24. }

  25. .imgbox {

  26.   margin: 0.6rem;

  27.   padding: 0.5rem;

  28.   text-align: center;

  29.   width: 12rem;

  30.   height: 12rem;

  31.   background-color: #e0e0e0;

  32. }

  33. h1 {

  34.   font-size: 2.6rem;

  35. }

  36. .find, .find input {

  37.   font-size: 1.5rem;

  38. }

  39. .top {

  40.   position: -webkit-sticky;

  41.   position: sticky;

  42.   top: 0;

  43.   background-color: #aaa;

  44.   padding: 1rem;

  45.   padding-top: 0;

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

  47. }

  48. .top button {

  49.   float: right; 

  50.   position: relative; 

  51.   top: -2rem; 

  52.   font-size: 1.5rem;

  53. }

  54. .label {

  55.   height: 2.5em;

  56.   line-height: 1em;

  57.   overflow: hidden;

  58.   font-size: 0.9rem;

  59. }

  60. .grid {

  61.   display: flex;

  62.   flex-wrap: wrap;

  63.   width: 100%;

  64. }

  65. </style>

  66. <body>

  67. <div class="top">

  68. <h1>Other Icons</h1>

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

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

  71. </div>

  72. <div class="grid">

  73. <div id="Kudu.svg" class="imgbox"><a href="Kudu.svg" download><img src="Kudu.svg" class="bg0"/></a><div class="label">Kudu.svg</div></div>

  74. <div id="aks-blue.svg" class="imgbox"><a href="aks-blue.svg" download><img src="aks-blue.svg" class="bg0"/></a><div class="label">aks-blue.svg</div></div>

  75. <div id="app-center-colour.svg" class="imgbox"><a href="app-center-colour.svg" download><img src="app-center-colour.svg" class="bg0"/></a><div class="label">app-center-colour.svg</div></div>

  76. <div id="app-center.svg" class="imgbox"><a href="app-center.svg" download><img src="app-center.svg" class="bg0"/></a><div class="label">app-center.svg</div></div>

  77. <div id="azure ml.svg" class="imgbox"><a href="azure ml.svg" download><img src="azure ml.svg" class="bg0"/></a><div class="label">azure ml.svg</div></div>

  78. <div id="cloud-security.svg" class="imgbox"><a href="cloud-security.svg" download><img src="cloud-security.svg" class="bg0"/></a><div class="label">cloud-security.svg</div></div>

  79. <div id="connector.svg" class="imgbox"><a href="connector.svg" download><img src="connector.svg" class="bg0"/></a><div class="label">connector.svg</div></div>

  80. <div id="container-insights.svg" class="imgbox"><a href="container-insights.svg" download><img src="container-insights.svg" class="bg0"/></a><div class="label">container-insights.svg</div></div>

  81. <div id="container-mon.svg" class="imgbox"><a href="container-mon.svg" download><img src="container-mon.svg" class="bg0"/></a><div class="label">container-mon.svg</div></div>

  82. <div id="container.svg" class="imgbox"><a href="container.svg" download><img src="container.svg" class="bg0"/></a><div class="label">container.svg</div></div>

  83. <div id="containerinstances-mono.svg" class="imgbox"><a href="containerinstances-mono.svg" download><img src="containerinstances-mono.svg" class="bg0"/></a><div class="label">containerinstances-mono.svg</div></div>

  84. <div id="cubes.svg" class="imgbox"><a href="cubes.svg" download><img src="cubes.svg" class="bg0"/></a><div class="label">cubes.svg</div></div>

  85. <div id="designer.svg" class="imgbox"><a href="designer.svg" download><img src="designer.svg" class="bg0"/></a><div class="label">designer.svg</div></div>

  86. <div id="devops-boards.svg" class="imgbox"><a href="devops-boards.svg" download><img src="devops-boards.svg" class="bg0"/></a><div class="label">devops-boards.svg</div></div>

  87. <div id="devops-pipelines.svg" class="imgbox"><a href="devops-pipelines.svg" download><img src="devops-pipelines.svg" class="bg0"/></a><div class="label">devops-pipelines.svg</div></div>

  88. <div id="devops-repos.svg" class="imgbox"><a href="devops-repos.svg" download><img src="devops-repos.svg" class="bg0"/></a><div class="label">devops-repos.svg</div></div>

  89. <div id="devops-testplans.svg" class="imgbox"><a href="devops-testplans.svg" download><img src="devops-testplans.svg" class="bg0"/></a><div class="label">devops-testplans.svg</div></div>

  90. <div id="devopsiconartifacts96.svg" class="imgbox"><a href="devopsiconartifacts96.svg" download><img src="devopsiconartifacts96.svg" class="bg0"/></a><div class="label">devopsiconartifacts96.svg</div></div>

  91. <div id="event-grid-topic.svg" class="imgbox"><a href="event-grid-topic.svg" download><img src="event-grid-topic.svg" class="bg0"/></a><div class="label">event-grid-topic.svg</div></div>

  92. <div id="machine-learning-diagram.svg" class="imgbox"><a href="machine-learning-diagram.svg" download><img src="machine-learning-diagram.svg" class="bg0"/></a><div class="label">machine-learning-diagram.svg</div></div>

  93. <div id="pickle.svg" class="imgbox"><a href="pickle.svg" download><img src="pickle.svg" class="bg0"/></a><div class="label">pickle.svg</div></div>

  94. <div id="resource-explorer.svg" class="imgbox"><a href="resource-explorer.svg" download><img src="resource-explorer.svg" class="bg0"/></a><div class="label">resource-explorer.svg</div></div>

  95. <div id="rss.svg" class="imgbox"><a href="rss.svg" download><img src="rss.svg" class="bg0"/></a><div class="label">rss.svg</div></div>

  96. <div id="shield.svg" class="imgbox"><a href="shield.svg" download><img src="shield.svg" class="bg0"/></a><div class="label">shield.svg</div></div>

  97. <div id="xcode.svg" class="imgbox"><a href="xcode.svg" download><img src="xcode.svg" class="bg0"/></a><div class="label">xcode.svg</div></div>

  98. 

  99. </div>

  100. <script>

  101. var bg = 0;

  102. function toggleBg() {

  103.   bg++

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

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

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

  107.   }

  108. }

  109. 

  110. function search() {

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

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

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

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

  115.     }

  116.   }

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

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

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

  120.       imgbox.style.display = "none"

  121.     }

  122.   }

  123. }

  124. 

  125. function download(f) {

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

  127.   a.href = f

  128.   a.download = f

  129.   console.log(a)

  130.   a.click()

  131. }

  132. </script>

  133. </body></html>