heuzef
/
icon-collection
espelho de https://github.com/benc-uk/icon-collection.git
1
0
Derivar 0
Código Questões 0 Lançamentos 1 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
10 Cometimentos
8 Ramos
33 MiB
 
 
 
Árvore: 1d0e9eabc1
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '1d0e9eabc1'
${ noResults }
icon-collection/azure-dotcom/index.html

119 linhas
3.8 KiB
Em bruto Responsabilidade Histórico 

  1. 

  2. <head><title>Azure.com Various</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>Azure.com Various</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="backup-archive.svg" class="imgbox"><a href="backup-archive.svg" download><img src="backup-archive.svg" class="bg0"/></a><div class="label">backup-archive.svg</div></div>

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

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

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

  77. <div id="high-performance-computing.svg" class="imgbox"><a href="high-performance-computing.svg" download><img src="high-performance-computing.svg" class="bg0"/></a><div class="label">high-performance-computing.svg</div></div>

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

  79. <div id="internet-of-things.svg" class="imgbox"><a href="internet-of-things.svg" download><img src="internet-of-things.svg" class="bg0"/></a><div class="label">internet-of-things.svg</div></div>

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

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

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

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

  84. 

  85. </div>

  86. <script>

  87. var bg = 0;

  88. function toggleBg() {

  89.   bg++

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

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

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

  93.   }

  94. }

  95. 

  96. function search() {

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

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

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

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

  101.     }

  102.   }

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

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

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

  106.       imgbox.style.display = "none"

  107.     }

  108.   }

  109. }

  110. 

  111. function download(f) {

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

  113.   a.href = f

  114.   a.download = f

  115.   console.log(a)

  116.   a.click()

  117. }

  118. </script>

  119. </body></html>