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/learning-site/index.html

273 lines
23 KiB
Raw Blame History 

  1. 

  2. <head><title>Microsoft Learning Site</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>Microsoft Learning Site</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="svg (1).svg" class="imgbox"><img src="svg (1).svg" class="bg0" onclick="download('svg (1).svg', this)"/><div class="label">svg (1).svg</div></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  219. 

  220. </div>

  221. <script>

  222. var bg = 0;

  223. function toggleBg() {

  224.   bg++

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

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

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

  228.   }

  229. }

  230. 

  231. function search() {

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

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

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

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

  236.     }

  237.   }

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

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

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

  241.       imgbox.style.display = "none"

  242.     }

  243.   }

  244. }

  245. 

  246. function download(f, e) {

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

  248.   if(downloadPNG) {

  249.     var data = getBase64Image(e);

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

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

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

  253.     a.click()

  254.   } else {

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

  256.     a.href = f

  257.     a.download = f

  258.     a.click()

  259.   }

  260. }

  261. 

  262. function getBase64Image(img) {

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

  264.   canvas.width = img.naturalWidth;

  265.   canvas.height = img.naturalHeight;

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

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

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

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

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

  271. }

  272. </script>

  273. </body></html>