-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (104 loc) · 5.58 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAiLLERY</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Justified Gallery -->
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css">
<!-- light gallery -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery.min.css" rel="stylesheet">
<!-- 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=Teachers:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
<!-- aws sdk -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.813.0.min.js"></script>
<!-- custom css -->
<link href="./src/output.css" rel="stylesheet">
<!-- <link href="./src/output.min.css" rel="stylesheet"> -->
</head>
<body class="flex flex-col min-h-screen font-custom p-4 sm:p-7">
<header class="flex flex-wrap flex-col items-start my-5 mx-2">
<div class="sm:flex-row flex-col flex flex-wrap">
<a href="/" class="shrink-0 mr-5 md:mr-7">
<h1 class="text-4xl md:text-5xl font-bold">GAiLLERY</h1>
</a>
<div class="flex-grow-0 flex-shrink-0 space-x-2 sm:space-x-4 mt-5 mb-2 sm:my-0 flex">
<button
class="text-sm md:text-base bg-blue-500 sm:hover:bg-blue-700 text-white font-bold py-2 px-3 rounded"
onclick="document.getElementById('fileInput').click();">
Upload Images
</button>
<input type="file" id="fileInput" multiple accept="image/*" class="hidden">
<button id="randomBtn" onclick="uploadRandomImages(5)"
class="text-sm md:text-base bg-slate-500 sm:hover:bg-slate-700 text-white font-bold py-2 px-3 rounded">
Random Images
</button>
<!-- <button id="selectBtn"
class="text-sm md:text-base bg-slate-500 sm:hover:bg-slate-700 text-white font-bold py-2 px-3 rounded">
Select Images
</button> -->
</div>
</div>
<div class="flex-grow order-last text-left mt-4">
<h3 class="text-sm md:text-lg">
Made by Ángel Sánchez Guerrero. Project for Computer Vision, Multimodal Interaction & Cloud Computing @ Sapienza Università di Roma -
<a class="underline" target="_blank" href="https://github.com/angeloyo/sapienza-project">GitHub Repo</a>
</h3>
</div>
</header>
<main class="flex-grow">
<div id="overlay"
class="fixed inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center space-y-4 hidden z-50">
<div class="spinner w-16 h-16 border-4 border-solid border-gray-800 rounded-full"></div>
<p id="statusText" class="text-white text-center"></p>
</div>
<div class="" id="gallery"></div>
<div class="fixed bottom-4 right-4 flex flex-col items-center z-[1100]">
<div id="commands-modal"
class="hidden text-sm m-2 bg-white p-3 shadow-lg rounded-lg text-gray-800">
<ul>
<li>Show me [tag] photos</li>
<li>Open gallery</li>
<li>Close gallery</li>
<li>Next photo</li>
<li>Previous photo</li>
<!-- <li>First photo</li> -->
<!-- <li>Last photo</li> -->
<!-- <li>Start slideshow</li> -->
<li></li>
</ul>
</div>
<div id="mic-div" class=" bg-blue-500 h-full rounded-full text-white flex
items-center justify-center shadow-lg mr-4 hidden">
<button id="commands-btn" class="py-2 px-4 text-sm font-normal">
Show commands
</button>
<button id="mic-button"
class=" bg-blue-600 hover:bg-blue-700 rounded-full py-2 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6">
<path d="M7 4a3 3 0 0 1 6 0v6a3 3 0 1 1-6 0V4Z" />
<path d="M5.5 9.643a.75.75 0 0 0-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.546A6.001 6.001 0 0 0 16 10v-.357a.75.75 0 0 0-1.5 0V10a4.5 4.5 0 0 1-9 0v-.357Z" />
</svg>
</button>
<button id="commands-btn"></button>
</div>
</div>
</main>
<footer class="w-full text-center mt-10 flex items-center justify-center">
<button id="deleteAllBtn" onclick="deleteAllImages()"
class="hidden">
Delete all images
</button>
</footer>
<!-- Custom JS -->
<script src="src/app.js"></script>
<script src="src/voice.js"></script>
</body>
</html>