-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
62 lines (58 loc) · 3.15 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Contents Search Extension</title>
<link rel="stylesheet" href="./css/popup.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,700&display=swap" rel="stylesheet">
</head>
<body>
<h1 id="title">Free Images Search</h1>
<!-- If you want to add more options, just put them below. Remember to add them in the popup.js file and the total size in CSS so as not to break the interface. -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<p id="text">Click to switch!</p>
<div class="options-photos">
<input type="checkbox" id="unsplash-search" class="search-option">
<label for="unsplash-search">Unsplash</label><br>
<input type="checkbox" id="pexels-search" class="search-option">
<label for="pexels-search">Pexels</label><br>
<input type="checkbox" id="pixabay-search" class="search-option">
<label for="pixabay-search">Pixabay</label><br>
<input type="checkbox" id="stocksnap-search" class="search-option">
<label for="stocksnap-search">StockSnap</label><br>
<input type="checkbox" id="freeimages-search" class="search-option">
<label for="freeimages-search">FreeImages</label><br>
<input type="checkbox" id="negativespace-search" class="search-option">
<label for="negativespace-search">Negative Space</label><br>
</div>
<div class="options-videos">
<input type="checkbox" id="videvo-search" class="search-option">
<label for="videvo-search">Videvo</label><br>
<input type="checkbox" id="pexelsVideos-search" class="search-option">
<label for="pexelsVideos-search">Pexels</label><br>
<input type="checkbox" id="pixabayVideos-search" class="search-option">
<label for="pixabayVideos-search">Pixabay</label><br>
<input type="checkbox" id="mazwai-search" class="search-option">
<label for="mazwai-search">Mazwai</label><br>
<input type="checkbox" id="coverr-search" class="search-option">
<label for="coverr-search">Coverr</label><br>
<input type="checkbox" id="videezy-search" class="search-option">
<label for="videezy-search">Videezy</label><br>
</div>
<div class="container">
<input type="text" id="search-bar" placeholder="Search here">
<button id="btn"><i class="fa-solid fa-magnifying-glass"></i>Search</button>
</div>
<script src="./js/popup.js"></script>
</body>
</html>