From 94c8b3c3bde1454ab557e66e1bf52588eca6b1da Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Thu, 28 Nov 2024 23:45:04 +0100 Subject: [PATCH] [call-me] - add attribution --- package.json | 2 +- public/client.js | 7 +++++++ public/index.html | 3 +++ public/style.css | 11 +++++++++++ 4 files changed, 22 insertions(+), 1 deletion(-) 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%;