diff --git a/index.html b/index.html
index 7d403ad6..4eaab68a 100644
--- a/index.html
+++ b/index.html
@@ -100,20 +100,15 @@
@@ -683,7 +678,7 @@
fill="white" fill-rule="evenodd" />
- AI-Tools
+ AI Tools
@@ -1108,7 +1103,7 @@ Material You NewTab
- Upload Wallpaper
+ Upload Wallpaper
@@ -1132,7 +1127,6 @@ Material You NewTab
-
diff --git a/languages.js b/languages.js
index 15d90621..4d457a8f 100644
--- a/languages.js
+++ b/languages.js
@@ -19,7 +19,7 @@ const translations = {
"editShortcutsText": "Edit Shortcuts",
"shortcutsInfoText": "Choose which shortcuts get shown",
"editShortcutsList": "Saved Shortcuts",
- 'editShortcutsListInfo': 'You can add new shortcuts by clicking the "+" icon or edit existing ones by clicking on the shortcut name or URL',
+ 'editShortcutsListInfo': 'You can add new shortcuts by clicking the "+" icon or edit existing ones by clicking on the shortcut name or URL.',
"adaptiveIconText": "Adaptive Icon Shapes",
"adaptiveIconInfoText": "Shortcut icons will appear smaller",
"ai_tools_button": "AI-Tools",
@@ -105,6 +105,9 @@ const translations = {
"perplexity": "Perplexity",
"firefly": "Adobe Firefly",
"github": "GitHub",
+
+ // Wallpaper and alerts
+ "uploadWallpaperText": "Upload Wallpaper",
},
@@ -313,7 +316,7 @@ const translations = {
"editShortcutsText": "शॉर्टकट्स संपादित करें",
"shortcutsInfoText": "निर्धारित करें कि कौन से शॉर्टकट प्रदर्शित किए जाएँ",
"editShortcutsList": "सहेजे गए शॉर्टकट",
- 'editShortcutsListInfo': 'आप "+" आइकन पर क्लिक करके नए शॉर्टकट्स जोड़ सकते हैं या शॉर्टकट के नाम या URL पर क्लिक करके मौजूदा शॉर्टकट्स को संपादित कर सकते हैं',
+ 'editShortcutsListInfo': 'आप "+" आइकन पर क्लिक करके नए शॉर्टकट्स जोड़ सकते हैं या शॉर्टकट के नाम या URL पर क्लिक करके मौजूदा शॉर्टकट्स को संपादित कर सकते हैं।',
"adaptiveIconText": "अनुकूल आइकन आकृतियाँ",
"adaptiveIconInfoText": "शॉर्टकट आइकन छोटे आकार में प्रदर्शित करें",
"ai_tools_button": "AI-उपकरण",
@@ -400,6 +403,9 @@ const translations = {
"firefly": "एडोबी फायरफ्लाई",
"github": "गिटहब",
"googleAppsHover": "गूगल ऐप्स",
+
+ // Wallpaper and alerts
+ "uploadWallpaperText": "वॉलपेपर अपलोड करें",
},
@@ -676,7 +682,7 @@ const translations = {
"editShortcutsText": "শর্টকাট সম্পাদনা করুন",
"shortcutsInfoText": "যেসব শর্টকাট প্রদর্শিত হবে তা নির্বাচন করুন",
"editShortcutsList": "সংরক্ষিত শর্টকাট",
- 'editShortcutsListInfo': 'আপনি "+" আইকনে ক্লিক করে নতুন শর্টকাট যোগ করতে পারেন অথবা শর্টকাটের নাম বা URL-এ ক্লিক করে বিদ্যমান শর্টকাট সম্পাদনা করতে পারেন',
+ 'editShortcutsListInfo': 'আপনি "+" আইকনে ক্লিক করে নতুন শর্টকাট যোগ করতে পারেন অথবা শর্টকাটের নাম বা URL-এ ক্লিক করে বিদ্যমান শর্টকাট সম্পাদনা করতে পারেন।',
"adaptiveIconText": "অ্যাডাপ্টিভ আইকন আকার",
"adaptiveIconInfoText": "শর্টকাট আইকন ছোট আকারে প্রদর্শন হবে",
"ai_tools_button": "AI সরঞ্জাম",
@@ -764,6 +770,9 @@ const translations = {
"firefly": "এডোবি ফায়ারফ্লাই",
"github": "গিটহাব",
"googleAppsHover": "গুগল অ্যাপস",
+
+ // Wallpaper and alerts
+ "uploadWallpaperText": "ওয়ালপেপার আপলোড করুন",
},
@@ -1425,7 +1434,7 @@ const translations = {
"editShortcutsText": "शॉर्टकट्स संपादित करा",
"shortcutsInfoText": "कोणते शॉर्टकट दाखवायचे ते निवडा",
"editShortcutsList": "जतन केलेले शॉर्टकट्स",
- 'editShortcutsListInfo': 'आपण "+" आयकॉनवर क्लिक करून नवीन शॉर्टकट्स जोडू शकता किंवा शॉर्टकटच्या नावावर किंवा URL वर क्लिक करून विद्यमान शॉर्टकट्स संपादित करू शकता',
+ 'editShortcutsListInfo': 'आपण "+" आयकॉनवर क्लिक करून नवीन शॉर्टकट्स जोडू शकता किंवा शॉर्टकटच्या नावावर किंवा URL वर क्लिक करून विद्यमान शॉर्टकट्स संपादित करू शकता।',
"adaptiveIconText": "अनुकूल आयकॉन आकार",
"adaptiveIconInfoText": "शॉर्टकट आयकॉन छोटे दिसतील",
"ai_tools_button": "AI साधने",
@@ -1512,6 +1521,9 @@ const translations = {
"perplexity": "पर्प्लेक्सिटी",
"firefly": "अॅडोबी फायरफ्लाय",
"github": "गिटहब",
+
+ // Wallpaper and alerts
+ "uploadWallpaperText": "वॉलपेपर अपलोड करा",
},
};
@@ -1622,7 +1634,8 @@ function applyLanguage(lang) {
{ id: 'perplexity', key: 'perplexity' },
{ id: 'firefly', key: 'firefly' },
{ id: 'github', key: 'github' },
- { id: 'googleAppsHover', key: 'googleAppsHover' }
+ { id: 'googleAppsHover', key: 'googleAppsHover' },
+ { id: 'uploadWallpaperText', key: 'uploadWallpaperText' },
];
diff --git a/script.js b/script.js
index cf9c43b0..d0da3abe 100644
--- a/script.js
+++ b/script.js
@@ -1041,18 +1041,32 @@ const applySelectedTheme = (colorValue) => {
fill: #909090;
}
- #userText {
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2),
- -1px -1px 2px rgba(0, 0, 0, 0.2),
- 1px -1px 2px rgba(0, 0, 0, 0.2),
- -1px 1px 2px rgba(0, 0, 0, 0.2);
+ #userText, #date, .shortcuts .shortcut-name {
+ text-shadow: 1px 1px 15px rgba(15, 15, 15, 0.9),
+ -1px -1px 15px rgba(15, 15, 15, 0.9),
+ 1px -1px 15px rgba(15, 15, 15, 0.9),
+ -1px 1px 15px rgba(15, 15, 15, 0.9) !important;
}
- #date {
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2),
- -1px -1px 2px rgba(0, 0, 0, 0.2),
- 1px -1px 2px rgba(0, 0, 0, 0.2),
- -1px 1px 2px rgba(0, 0, 0, 0.2);
+ .uploadButton,
+ .randomButton{
+ background-color: var(--whitishColor-dark);
+ color: var(--darkColor-blue);
+ }
+
+ .uploadButton:hover,
+ .randomButton:hover,
+ .clearButton{
+ background-color: var(--darkColor-blue);
+ color: var(--whitishColor-dark);
+ }
+
+ .clearButton:hover{
+ background-color: var(--whitishColor-dark) !important;
+ }
+
+ .micIcon{
+ background-color: var(--whitishColor-dark);
}
#minute, #minute::after, #second::after {
@@ -1390,7 +1404,9 @@ document.getElementById('imageUpload').addEventListener('change', function (even
`This may impact performance or image may fail to load properly.`);
}
document.body.style.setProperty('--bg-image', `url(${e.target.result})`);
- saveImageToIndexedDB(e.target.result, false).catch(error => console.error(error));
+ saveImageToIndexedDB(e.target.result, false)
+ .then(() => updateTextShadow(true))
+ .catch(error => console.error(error));
};
image.src = e.target.result;
};
@@ -1400,19 +1416,36 @@ document.getElementById('imageUpload').addEventListener('change', function (even
// Fetch and apply random image as background
const RANDOM_IMAGE_URL = 'https://picsum.photos/1920/1080';
-async function applyRandomImage() {
- if (confirm('Do you want to set a random image as wallpaper?')) {
- try {
- const response = await fetch(RANDOM_IMAGE_URL);
- const imageUrl = response.url;
- document.body.style.setProperty('--bg-image', `url(${imageUrl})`);
- await saveImageToIndexedDB(imageUrl, true);
- } catch (error) {
- console.error('Error fetching random image:', error);
- }
+async function applyRandomImage(showConfirmation = true) {
+ if (showConfirmation && !confirm('Would you like to set a new image as your wallpaper for the day?')) {
+ return;
+ }
+ try {
+ const response = await fetch(RANDOM_IMAGE_URL);
+ const imageUrl = response.url;
+ document.body.style.setProperty('--bg-image', `url(${imageUrl})`);
+ await saveImageToIndexedDB(imageUrl, true);
+ updateTextShadow(true);
+ } catch (error) {
+ console.error('Error fetching random image:', error);
}
}
+// Function to update text-shadow styles with animation
+function updateTextShadow(hasWallpaper) {
+ const elements = [document.getElementById('userText'), document.getElementById('date'), ...document.querySelectorAll('.shortcuts:hover .shortcut-name')];
+ elements.forEach(element => {
+ if (hasWallpaper) {
+ element.style.textShadow = '1px 1px 15px rgba(255, 255, 255, 0.9), ' +
+ '-1px -1px 15px rgba(255, 255, 255, 0.9), ' +
+ '1px -1px 15px rgba(255, 255, 255, 0.9), ' +
+ '-1px 1px 15px rgba(255, 255, 255, 0.9)';
+ } else {
+ element.style.textShadow = 'none'; // Remove the text-shadow
+ }
+ });
+}
+
// Check and update image on page load
function checkAndUpdateImage() {
loadImageAndDetails()
@@ -1420,16 +1453,27 @@ function checkAndUpdateImage() {
const now = new Date();
const lastUpdate = new Date(savedTimestamp);
- if (!savedTimestamp || isNaN(lastUpdate)) return;
- if (!savedImage || imageType === 'upload') return;
+ if (!savedTimestamp || isNaN(lastUpdate)) {
+ updateTextShadow(false);
+ return;
+ }
+
+ if (!savedImage || imageType === 'upload') {
+ updateTextShadow(false);
+ return;
+ }
if (lastUpdate.toDateString() !== now.toDateString()) {
- applyRandomImage();
+ applyRandomImage(false);
} else {
document.body.style.setProperty('--bg-image', `url(${savedImage})`);
+ updateTextShadow(true);
}
})
- .catch((error) => console.error(error));
+ .catch((error) => {
+ console.error(error);
+ updateTextShadow(false);
+ });
}
// Event listeners for buttons
@@ -1437,10 +1481,15 @@ document.getElementById('uploadTrigger').addEventListener('click', () => documen
document.getElementById('clearImage').addEventListener('click', function () {
loadImageFromIndexedDB()
.then((savedImage) => {
- if (savedImage && confirm('Are you sure you want to clear the background image?')) {
- clearImageFromIndexedDB()
- .then(() => document.body.style.removeProperty('--bg-image'))
- .catch((error) => console.error(error));
+ if (savedImage) {
+ if (confirm('Are you sure you want to clear the background image?')) {
+ clearImageFromIndexedDB()
+ .then(() => {
+ document.body.style.removeProperty('--bg-image');
+ updateTextShadow(false);
+ })
+ .catch((error) => console.error(error));
+ }
} else {
alert('No background image is currently set.');
}
diff --git a/style.css b/style.css
index dc7feb2f..7a1c7489 100644
--- a/style.css
+++ b/style.css
@@ -584,28 +584,20 @@ body {
/*bottom: 18px; */
/*Because search engines has margin-bottom 20px*/
bottom: 8px;
- left: 5px;
+ left: 10px;
+ /* text-align: center; */
}
#userText {
font-family: "poppins", "Poppins", serif;
font-size: 1.4rem;
margin-bottom: 10px;
- text-shadow:
- 1px 1px 2px rgba(255, 255, 255, 0.2),
- -1px -1px 2px rgba(255, 255, 255, 0.2),
- 1px -1px 2px rgba(255, 255, 255, 0.2),
- -1px 1px 2px rgba(255, 255, 255, 0.2);
+ transition: text-shadow 0.3s ease-in-out;
}
#date {
font-size: 1.4rem;
- /* text-align: center; */
- text-shadow:
- 1px 1px 2px rgba(255, 255, 255, 0.2),
- -1px -1px 2px rgba(255, 255, 255, 0.2),
- 1px -1px 2px rgba(255, 255, 255, 0.2),
- -1px 1px 2px rgba(255, 255, 255, 0.2);
+ transition: text-shadow 0.3s ease-in-out;
}
.digidate {
@@ -2025,6 +2017,7 @@ input:checked + .toggle:before {
color: var(--darkColor-blue);
padding: 10px 20px;
font-size: 1rem;
+ /*white-space: nowrap; */
border: 2px solid transparent;
border-radius: 26px;
cursor: pointer;