-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (123 loc) · 3.65 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
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner github profile</title>
<style>
.image-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.image-item {
text-align: center;
}
.image-item img {
max-width: 200px;
max-height: 200px;
}
.image-item p {
margin-top: 10px;
font-size: 1em;
color: #333;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="loader" id="loader"></div>
<div>
<h2>Technical Images</h2>
<div class="image-list" id="technicalImageList"></div>
</div>
<div>
<h2>Background Images</h2>
<div class="image-list" id="backgroundImageList"></div>
</div>
<script>
// const baseURL = 'http://localhost:8080/api'; // Base URL
const baseURL = 'https://count-viewer.vercel.app/api'; // Base URL
function showLoader() {
document.getElementById('loader').style.display = 'block';
}
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
async function fetchNames(apiEndpoint) {
try {
const response = await fetch(`${baseURL}/${apiEndpoint}/names`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
} catch (error) {
console.error('There was a problem with fetching names:', error);
return [];
}
}
async function fetchImageData(name, apiEndpoint) {
try {
const response = await fetch(`${baseURL}/${apiEndpoint}?name=${name}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
} catch (error) {
console.error(`There was a problem with fetching image data for ${name}:`, error);
return null;
}
}
async function displayImages(apiEndpoint, imageListId) {
showLoader(); // Show loader
try {
const names = await fetchNames(apiEndpoint);
const imageList = document.getElementById(imageListId);
imageList.innerHTML = ''; // Clear existing images
for (const name of names) {
const imageData = await fetchImageData(name, apiEndpoint);
if (imageData && imageData.data) {
const imageItem = document.createElement('div');
imageItem.className = 'image-item';
const img = document.createElement('img');
img.src = imageData.data; // Base64 data from API
const caption = document.createElement('p');
caption.textContent = imageData.name || name;
imageItem.appendChild(img);
imageItem.appendChild(caption);
imageList.appendChild(imageItem);
}
}
} catch (error) {
console.error(`There was a problem with displaying ${apiEndpoint} images:`, error);
} finally {
hideLoader(); // Hide loader
}
}
// Display images for both Technical and Background
displayImages('technical', 'technicalImageList');
displayImages('background', 'backgroundImageList');
</script>
</body>
</html>