diff --git a/package.json b/package.json
index e4d57ac..313c3a2 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "call-me",
- "version": "1.0.20",
+ "version": "1.0.21",
"description": "Your Go-To for Instant Video Calls",
"author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
"license": "AGPLv3",
diff --git a/public/client.js b/public/client.js
index 3d7e914..ac294a6 100755
--- a/public/client.js
+++ b/public/client.js
@@ -10,6 +10,7 @@ const socket = io();
const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
// DOM elements
+const attribution = document.querySelector('#attribution');
const randomImage = document.querySelector('#randomImage');
const sessionTime = document.querySelector('#sessionTime');
const githubDiv = document.querySelector('#githubDiv');
@@ -59,6 +60,12 @@ async function fetchRandomImage() {
// Update the image source
randomImage.src = sessionStorage.cachedImage;
console.log('Fetched and cached image');
+
+ // Create and display attribution
+ const attributionText = `Photo by ${data.user.name} on Unsplash`;
+
+ // Assuming you have an element with id 'attribution' for the attribution text
+ attribution.innerHTML = attributionText;
} catch (error) {
console.error('Error fetching image', error.message);
}
diff --git a/public/index.html b/public/index.html
index bc3c8ab..6c1ea5b 100755
--- a/public/index.html
+++ b/public/index.html
@@ -39,6 +39,9 @@
+
+
+
![]()
diff --git a/public/style.css b/public/style.css
index cbcc747..8d865fe 100644
--- a/public/style.css
+++ b/public/style.css
@@ -37,6 +37,17 @@ body {
}
}
+/* Unsplash and Author attribution */
+#attribution {
+ position: absolute;
+ padding: 10px;
+ bottom: 0;
+ right: 10px;
+ color: white;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: var(--border-radius);
+}
+
/* Random image */
img {
width: 100%;