-
Notifications
You must be signed in to change notification settings - Fork 0
/
imageSearch.html
143 lines (132 loc) · 4.62 KB
/
imageSearch.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap Link -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
defer
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
defer
></script>
<!-- Font Awesome -->
<script
src="https://kit.fontawesome.com/4f6d96e165.js"
crossorigin="anonymous"
></script>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap"
rel="stylesheet"
/>
<!-- JQuery Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Google API Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Page Name -->
<title>Velocity. Image Search</title>
<!-- Linking CSS -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/imageSearch-components.css" />
<link rel="stylesheet" href="css/custom-lottie.css" />
<!-- Linking JS -->
<script src="js/script.js" defer></script>
<script src="js/navbarFooter.js" defer></script>
<script src="js/imageSearch.js" defer></script>
<script src="js/showAnimation.js" defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
defer
></script>
<!-- Add a favicon to the tab bar -->
<link rel="icon" type="image/x-icon" href="images/Logo/Logo-short.png" />
</head>
<body>
<header>
<div id="navbar-container"></div>
</header>
<script
src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
type="module"
></script>
<!-- Modal Backdrop -->
<div id="modal-backdrop" style="display: none"></div>
<!-- Modal Container -->
<div id="animation-modal" style="display: none">
<div id="custom-lottie-target-animation-background">
<dotlottie-player
src="https://lottie.host/907d7da2-daee-464a-aaa8-b3dcd41d42cb/R0XONv63ov.json"
background="transparent"
speed="1"
autoplay
id="custom-lottie-target-animation"
></dotlottie-player>
</div>
</div>
<div class="row" style="height: 100px; width: 100px"></div>
<div class="container mt-5">
<div class="row mt-3 mx-5 shadow" style="border-radius: 15px">
<div
class="col-md-5 offset-md-3"
style="padding: 0% !important; margin: 0% !important"
>
<img
id="imageSearch-image"
src="images/photoTakingShoeAction.jpg"
alt=""
style="height: 100%"
/>
</div>
<div
id="imageSearch-col"
class="col-md-6 offset-md-3"
style="margin-left: 10px !important"
>
<h1 id="imageSearch-title" class="mb-3" style="padding-left: 16px">
Image Search
</h1>
<div class="card">
<div class="card-body" style="width: 100%; height: 200px">
<form id="imageUploadForm" enctype="multipart/form-data">
<div class="mb-5">
<label for="imageInput" class="form-label"
>Choose an Image:</label
>
<input
type="file"
class="form-control"
id="imageInput"
name="image"
accept="image/*"
/>
</div>
<button type="submit" class="btn btn-secondary">Upload</button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
<div
id="footer"
class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"
></div>
</footer>
</body>
</html>