diff --git a/1000_bots_webextension/background.js b/1000_bots_webextension/background.js
index 286273c..6f5ca8d 100644
--- a/1000_bots_webextension/background.js
+++ b/1000_bots_webextension/background.js
@@ -20,13 +20,13 @@
"use strict";
-const DEBUG = false;
+const DEBUG = true;
// Use chrome or browser depending on the environment
const browser = chrome || browser;
// Custom user-agent to spoof Googlebot
-const user_agent =
+let user_agent =
"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
const target_urls = "*://*/*";
@@ -43,6 +43,38 @@ browser.storage.sync
console.error("Error setting duration:", error);
});
+function check_user_agent() {
+ // On active tab execute script
+ browser.tabs
+ .query({ active: true, currentWindow: true })
+ .then((tabs) => {
+ browser.scripting.executeScript({
+ target: { tabId: tabs[0].id },
+ files: ["checkUser.js"],
+ });
+ })
+ .catch((error) => {
+ console.error(`Failed to execute script: ${error}`);
+ });
+}
+
+function if_user_agent_mobile() {
+ // Get boolean from storage
+ browser.storage.sync.get("isMobile").then((result) => {
+ if (result.isMobile) {
+ if (DEBUG)
+ console.log("User is on a mobile device, changing userAgent.");
+ user_agent =
+ "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
+ if (DEBUG) console.log("User-Agent set to mobile device.");
+ if (DEBUG) console.log("User-Agent:", user_agent);
+ } else {
+ if (DEBUG)
+ console.log("User is not on a mobile device. Continuing...");
+ }
+ });
+}
+
// Set extension status to ON
function set_extension_status_ON() {
browser.storage.sync
@@ -56,6 +88,14 @@ function set_extension_status_ON() {
title: "You are now surfing the web as a bot 🤖",
});
})
+ .then(() => {
+ // Check if the user is on a mobile device
+ check_user_agent();
+ })
+ .then(() => {
+ // If the user is on a mobile device change the user-agent
+ if_user_agent_mobile();
+ })
.then(() => {
// Start user-agent spoofing
return startUserAgentSpoofing();
@@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
function refreshAllTabs() {
return browser.tabs.query({}).then((tabs) => {
tabs.forEach((tab) => {
- browser.tabs
- .reload(tab.id)
- .then(() => {
- if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
- })
- .catch((error) => {
- console.error(`Error refreshing tab ${tab.id}:`, error);
- });
+ if (tab.url.startsWith("https://")) {
+ browser.tabs
+ .reload(tab.id)
+ .then(() => {
+ if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+ })
+ .catch((error) => {
+ console.error(`Error refreshing tab ${tab.id}:`, error);
+ });
+ } else {
+ if (DEBUG)
+ console.log(
+ `Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
+ );
+ }
});
});
}
@@ -215,20 +262,24 @@ function injectContentScript() {
`Content script injected into tab ${tab.id}`
);
- // Use a hardcoded duration for removal
- const duration = 80000; // 8 seconds or whatever you need
-
// Set a timeout to remove the content after the hardcoded duration
setTimeout(() => {
- browser.storage.sync.set({
- bannerInjected: true,
- });
+ browser.storage.sync
+ .set({
+ bannerInjected: true,
+ })
+ .then(() => {
+ if (DEBUG)
+ console.log(
+ "Banner injected flag set to true."
+ );
+ });
if (DEBUG)
console.log(
"Duration expired. Removing content."
);
removeInjectedContent(); // Ensure this is defined
- }, duration);
+ }, DISPLAY_DURATION);
})
.catch((error) => {
console.error(
diff --git a/1000_bots_webextension/background_chrome.js b/1000_bots_webextension/background_chrome.js
index 286273c..6f5ca8d 100644
--- a/1000_bots_webextension/background_chrome.js
+++ b/1000_bots_webextension/background_chrome.js
@@ -20,13 +20,13 @@
"use strict";
-const DEBUG = false;
+const DEBUG = true;
// Use chrome or browser depending on the environment
const browser = chrome || browser;
// Custom user-agent to spoof Googlebot
-const user_agent =
+let user_agent =
"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
const target_urls = "*://*/*";
@@ -43,6 +43,38 @@ browser.storage.sync
console.error("Error setting duration:", error);
});
+function check_user_agent() {
+ // On active tab execute script
+ browser.tabs
+ .query({ active: true, currentWindow: true })
+ .then((tabs) => {
+ browser.scripting.executeScript({
+ target: { tabId: tabs[0].id },
+ files: ["checkUser.js"],
+ });
+ })
+ .catch((error) => {
+ console.error(`Failed to execute script: ${error}`);
+ });
+}
+
+function if_user_agent_mobile() {
+ // Get boolean from storage
+ browser.storage.sync.get("isMobile").then((result) => {
+ if (result.isMobile) {
+ if (DEBUG)
+ console.log("User is on a mobile device, changing userAgent.");
+ user_agent =
+ "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
+ if (DEBUG) console.log("User-Agent set to mobile device.");
+ if (DEBUG) console.log("User-Agent:", user_agent);
+ } else {
+ if (DEBUG)
+ console.log("User is not on a mobile device. Continuing...");
+ }
+ });
+}
+
// Set extension status to ON
function set_extension_status_ON() {
browser.storage.sync
@@ -56,6 +88,14 @@ function set_extension_status_ON() {
title: "You are now surfing the web as a bot 🤖",
});
})
+ .then(() => {
+ // Check if the user is on a mobile device
+ check_user_agent();
+ })
+ .then(() => {
+ // If the user is on a mobile device change the user-agent
+ if_user_agent_mobile();
+ })
.then(() => {
// Start user-agent spoofing
return startUserAgentSpoofing();
@@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
function refreshAllTabs() {
return browser.tabs.query({}).then((tabs) => {
tabs.forEach((tab) => {
- browser.tabs
- .reload(tab.id)
- .then(() => {
- if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
- })
- .catch((error) => {
- console.error(`Error refreshing tab ${tab.id}:`, error);
- });
+ if (tab.url.startsWith("https://")) {
+ browser.tabs
+ .reload(tab.id)
+ .then(() => {
+ if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+ })
+ .catch((error) => {
+ console.error(`Error refreshing tab ${tab.id}:`, error);
+ });
+ } else {
+ if (DEBUG)
+ console.log(
+ `Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
+ );
+ }
});
});
}
@@ -215,20 +262,24 @@ function injectContentScript() {
`Content script injected into tab ${tab.id}`
);
- // Use a hardcoded duration for removal
- const duration = 80000; // 8 seconds or whatever you need
-
// Set a timeout to remove the content after the hardcoded duration
setTimeout(() => {
- browser.storage.sync.set({
- bannerInjected: true,
- });
+ browser.storage.sync
+ .set({
+ bannerInjected: true,
+ })
+ .then(() => {
+ if (DEBUG)
+ console.log(
+ "Banner injected flag set to true."
+ );
+ });
if (DEBUG)
console.log(
"Duration expired. Removing content."
);
removeInjectedContent(); // Ensure this is defined
- }, duration);
+ }, DISPLAY_DURATION);
})
.catch((error) => {
console.error(
diff --git a/1000_bots_webextension/background_ff.js b/1000_bots_webextension/background_ff.js
index 3680bca..42bbcd4 100644
--- a/1000_bots_webextension/background_ff.js
+++ b/1000_bots_webextension/background_ff.js
@@ -26,7 +26,7 @@ var user_agent =
var target_urls = "*://*/*";
var status = 0;
-const DEBUG = false; // Set to true to enable debug mode
+const DEBUG = true; // Set to true to enable debug mode
// Duration to display the injected HTML (in milliseconds)
const DISPLAY_DURATION = 8000; // Set to 8 seconds
@@ -137,16 +137,23 @@ function removeInjectedContent() {
function refreshAllTabs() {
browser.tabs.query({}, (tabs) => {
tabs.forEach((tab) => {
- browser.tabs.reload(tab.id, () => {
- if (browser.runtime.lastError) {
- console.error(
- `Error refreshing tab ${tab.id}:`,
- browser.runtime.lastError
+ if (tab.url.startsWith("https://")) {
+ browser.tabs.reload(tab.id, () => {
+ if (browser.runtime.lastError) {
+ console.error(
+ `Error refreshing tab ${tab.id}:`,
+ browser.runtime.lastError
+ );
+ } else {
+ if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+ }
+ });
+ } else {
+ if (DEBUG)
+ console.log(
+ `Skipped refreshing tab ${tab.id} (URL does not start with https://)`
);
- } else {
- if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
- }
- });
+ }
});
});
}
@@ -158,7 +165,11 @@ function set_extension_status_ON() {
browser.browserAction.setTitle({
title: "You are now surfing the web as a bot 🤖",
});
- injectContentScript();
+ refreshAllTabs();
+
+ setTimeout(() => {
+ injectContentScript();
+ }, 500);
}
function set_extension_status_OFF() {
diff --git a/1000_bots_webextension/checkUser.js b/1000_bots_webextension/checkUser.js
new file mode 100644
index 0000000..61f0010
--- /dev/null
+++ b/1000_bots_webextension/checkUser.js
@@ -0,0 +1,35 @@
+function isAgentMobile() {
+ const regex =
+ /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+ return regex.test(navigator.userAgent);
+}
+
+function hasTouchSupport() {
+ return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+
+function isMobileScreen() {
+ const minWidth = 768; // Minimum width for desktop devices
+ return window.innerWidth < minWidth || screen.width < minWidth;
+}
+
+function isMobile() {
+ // Check if at least 2 of the 3 conditions are true
+
+ const isMobileAgent = isAgentMobile(); // Renamed variable to avoid conflict
+ const touchSupport = hasTouchSupport(); // Renamed variable to avoid conflict
+ const mobileScreen = isMobileScreen(); // Renamed variable to avoid conflict
+
+ const conditions = [isMobileAgent, touchSupport, mobileScreen];
+ const trueConditions = conditions.filter((condition) => condition);
+
+ return trueConditions.length >= 2; // Return true if at least 2 conditions are true
+}
+
+const user = isMobile();
+
+// Check if the user is on a mobile device
+if (user) {
+ if (DEBUG) console.log("User is on a mobile device, changing userAgent.");
+ browser.storage.sync.set({ isMobile: user });
+}
diff --git a/1000_bots_webextension/content.js b/1000_bots_webextension/content.js
index f9c47f9..ff4c33f 100644
--- a/1000_bots_webextension/content.js
+++ b/1000_bots_webextension/content.js
@@ -5,7 +5,7 @@ let DEBUG; // Declare the DEBUG variable in the outer scope
browser.storage.sync.get("debug").then((result) => {
DEBUG = result.debug;
- console.log("DEBUG mode:", DEBUG);
+ if (DEBUG) console.log("DEBUG mode:", DEBUG);
});
// Duration to show the banner (in milliseconds)
@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
- link.href = browser.runtime.getURL("style.css");
+ link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
- banner.classList.add("extension-banner-container");
+ banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
-
-
-
- ${new Array(30).fill(marqeeText).join("")}
-
-
+
+
+ ${new Array(30).fill(marqeeText).join("")}
+
`;
@@ -80,7 +78,7 @@ function removeBanner() {
if (DEBUG) console.log("Banner removed after duration.");
// Remove the injected CSS file
- const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
+ const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
link.parentNode.removeChild(link);
}
}, DISPLAY_DURATION);
diff --git a/1000_bots_webextension/content_chrome.js b/1000_bots_webextension/content_chrome.js
index b662b75..ff4c33f 100644
--- a/1000_bots_webextension/content_chrome.js
+++ b/1000_bots_webextension/content_chrome.js
@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
- link.href = browser.runtime.getURL("style.css");
+ link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
- banner.classList.add("extension-banner-container");
+ banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
-
-
-
- ${new Array(30).fill(marqeeText).join("")}
-
-
+
+
+ ${new Array(30).fill(marqeeText).join("")}
+
`;
@@ -80,7 +78,7 @@ function removeBanner() {
if (DEBUG) console.log("Banner removed after duration.");
// Remove the injected CSS file
- const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
+ const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
link.parentNode.removeChild(link);
}
}, DISPLAY_DURATION);
diff --git a/1000_bots_webextension/content_ff.js b/1000_bots_webextension/content_ff.js
index 98a13e7..b2f7243 100644
--- a/1000_bots_webextension/content_ff.js
+++ b/1000_bots_webextension/content_ff.js
@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
function injectCSS() {
// Inject the CSS file
const link = document.createElement("link");
- link.href = browser.runtime.getURL("style.css");
+ link.href = browser.runtime.getURL("rtbh_style.css");
link.rel = "stylesheet";
document.head.appendChild(link);
@@ -48,17 +48,15 @@ function injectCSS() {
function createBanner() {
// Create the banner container
const banner = document.createElement("div");
- banner.classList.add("extension-banner-container");
+ banner.classList.add("banner");
const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
const bannerContent = `
-
-
-
- ${new Array(30).fill(marqeeText).join("")}
-
-
+
+
+ ${new Array(30).fill(marqeeText).join("")}
+
`;
@@ -118,7 +116,7 @@ function createBanner() {
// Remove the injected CSS file
const link = document.querySelector(
- 'link[href="style.css"]'
+ 'link[href="rtbh_style.css"]'
);
if (link) {
link.parentNode.removeChild(link); // Corrected to remove the link
diff --git a/1000_bots_webextension/fonts/texgyreheros-bolditalic.woff b/1000_bots_webextension/fonts/texgyreheros-bolditalic.woff
new file mode 100644
index 0000000..b7bde81
Binary files /dev/null and b/1000_bots_webextension/fonts/texgyreheros-bolditalic.woff differ
diff --git a/1000_bots_webextension/manifest.json b/1000_bots_webextension/manifest.json
index 46aeacc..6a705be 100644
--- a/1000_bots_webextension/manifest.json
+++ b/1000_bots_webextension/manifest.json
@@ -1,10 +1,13 @@
{
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
- "version": "0.0.3",
+ "version": "0.0.4",
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"manifest_version": 3,
+ "icons": {
+ "48": "icon_ON_48.png"
+ },
"background": {
"service_worker": "background.js"
},
@@ -29,10 +32,11 @@
"
"
],
"js": [
- "content.js"
+ "content.js",
+ "checkUser.js"
],
"css": [
- "style.css"
+ "rtbh_style.css"
],
"run_at": "document_idle"
}
@@ -40,7 +44,8 @@
"web_accessible_resources": [
{
"resources": [
- "style.css"
+ "rtbh_style.css",
+ "fonts/*"
],
"matches": [
""
diff --git a/1000_bots_webextension/manifest_chrome.json b/1000_bots_webextension/manifest_chrome.json
index 46aeacc..6a705be 100644
--- a/1000_bots_webextension/manifest_chrome.json
+++ b/1000_bots_webextension/manifest_chrome.json
@@ -1,10 +1,13 @@
{
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
- "version": "0.0.3",
+ "version": "0.0.4",
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"manifest_version": 3,
+ "icons": {
+ "48": "icon_ON_48.png"
+ },
"background": {
"service_worker": "background.js"
},
@@ -29,10 +32,11 @@
""
],
"js": [
- "content.js"
+ "content.js",
+ "checkUser.js"
],
"css": [
- "style.css"
+ "rtbh_style.css"
],
"run_at": "document_idle"
}
@@ -40,7 +44,8 @@
"web_accessible_resources": [
{
"resources": [
- "style.css"
+ "rtbh_style.css",
+ "fonts/*"
],
"matches": [
""
diff --git a/1000_bots_webextension/manifest_ff.json b/1000_bots_webextension/manifest_ff.json
index fa79983..d98b55b 100644
--- a/1000_bots_webextension/manifest_ff.json
+++ b/1000_bots_webextension/manifest_ff.json
@@ -2,6 +2,9 @@
"homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
"name": "Refuse to be Human — Surf the Web as Googlebot",
"short_name": "Refuse to be Human",
+ "icons": {
+ "48": "icon_ON_48.png"
+ },
"browser_specific_settings": {
"gecko": {
"id": "trash@bitnik.org",
@@ -9,13 +12,16 @@
}
},
"description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
- "version": "0.0.3",
+ "version": "0.0.4",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
+ "web_accessible_resources": [
+ "fonts/*"
+ ],
"permissions": [
"tabs",
"activeTab",
diff --git a/1000_bots_webextension/package_me.sh b/1000_bots_webextension/package_me.sh
index cab6b78..2d8faec 100755
--- a/1000_bots_webextension/package_me.sh
+++ b/1000_bots_webextension/package_me.sh
@@ -7,7 +7,7 @@ export_folder="packaged"
extension_name="refused_to_be_human"
# Files to include in the package
-include_files="background.js content.js icon_OFF_48.png icon_ON_48.png manifest.json style.css"
+include_files="fonts/texgyreheros-bolditalic.woff background.js checkUser.js content.js icon_OFF_48.png icon_ON_48.png LICENSE manifest.json rtbh_style.css"
# Get the current version using jq to parse JSON (if jq is available)
current_version=$(jq -r '.version' manifest.json)
diff --git a/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.xpi b/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.xpi
index 623a935..16e02fc 100644
Binary files a/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.xpi and b/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.xpi differ
diff --git a/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.zip b/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.zip
index 4512005..1b005b5 100644
Binary files a/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.zip and b/1000_bots_webextension/packaged/refused_to_be_human-0.0.3/refused_to_be_human-0.0.3.zip differ
diff --git a/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.xpi b/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.xpi
new file mode 100644
index 0000000..831cb2b
Binary files /dev/null and b/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.xpi differ
diff --git a/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.zip b/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.zip
new file mode 100644
index 0000000..cc0d9c2
Binary files /dev/null and b/1000_bots_webextension/packaged/refused_to_be_human-0.0.4/refused_to_be_human-0.0.4.zip differ
diff --git a/1000_bots_webextension/rtbh_style.css b/1000_bots_webextension/rtbh_style.css
new file mode 100644
index 0000000..b25c0da
--- /dev/null
+++ b/1000_bots_webextension/rtbh_style.css
@@ -0,0 +1,126 @@
+@font-face {
+ font-family: "TeXGyreHeros-BoldItalic";
+ font-style: normal;
+ font-weight: 900;
+ src: url("fonts/texgyreheros-bolditalic.woff") format("woff");
+}
+
+:root {
+ --banner-bg-color: black;
+ --banner-color: white;
+ --bg: #8f8f8f;
+}
+
+.banner {
+ background: var(--banner-bg-color);
+ color: var(--banner-color);
+ position: fixed;
+ padding: 1rem;
+ z-index: 40;
+ font-family: "TeXGyreHeros-BoldItalic";
+ font-weight: 900;
+ transform: rotate(-30deg);
+ bottom: 5%;
+ right: -15%;
+ width: 110%;
+ font-size: 2rem;
+ line-height: 3rem;
+ transition: opacity 0.2s linear;
+ /* fade-in and fade-out for the screen take-over */
+ animation: var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
+}
+
+.banner:hover {
+ opacity: 0.05;
+}
+
+@keyframes show {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0.8;
+ }
+}
+
+/* Larger than mobile screen */
+@media (min-width: 40rem) {
+ .banner {
+ right: -20%;
+ font-size: 6rem;
+ line-height: 7rem;
+ }
+}
+
+/* Larger than tablet screen */
+@media (min-width: 80rem) {
+ .banner {
+ font-size: 8rem;
+ line-height: 9rem;
+ }
+}
+
+/* Larger than desktop screen */
+@media (min-width: 120rem) {
+ .banner {
+ font-size: 10rem;
+ line-height: 11rem;
+ }
+}
+
+/* BANNER ANIMATION */
+
+.marquee {
+ overflow: hidden;
+ position: relative;
+ padding-left: 100%;
+ /* Some browsers may require -webkit-animation */
+ -webkit-animation: reduce 30s linear infinite;
+ animation: reduce 30s linear infinite;
+
+ --offset: 20vw;
+ --move-initial: calc(-70% + var(--offset));
+ --move-final: calc(-50% + var(--offset));
+}
+
+.marquee__inner {
+ white-space: nowrap;
+ display: inline-block;
+ /* Some browsers may require -webkit-animation */
+ -webkit-animation: scroll var(--ad) linear infinite;
+ animation: scroll var(--ad) linear infinite;
+ transform: translate3d(var(--move-initial), 0, 0);
+}
+
+/* Creates two blck-to-transparent gradients at the ends of the marquee */
+.marquee::before,
+.marquee::after {
+ z-index: 1;
+ top: 0;
+ left: 0;
+ position: absolute;
+ width: 40%;
+ height: 100%;
+ content: "";
+ display: block;
+ background: linear-gradient(to right, var(--banner-bg-color), transparent);
+}
+
+.marquee::after {
+ left: auto;
+ right: 0;
+ transform: rotate(180deg);
+}
+
+/* Some browsers may require @-webkit-keyframes */
+@keyframes reduce {
+ to {
+ padding-left: 0;
+ }
+}
+
+@keyframes scroll {
+ to {
+ transform: translateX(-100%);
+ }
+}
diff --git a/1000_bots_webextension/style.css b/1000_bots_webextension/style.css
deleted file mode 100644
index ca2dfa7..0000000
--- a/1000_bots_webextension/style.css
+++ /dev/null
@@ -1,171 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
-
-:root {
- --main-bg-color: black;
- --main-color: white;
- --bg: #8f8f8f;
-}
-
-.montserrat {
- font-family: "Montserrat", sans-serif;
- font-optical-sizing: auto;
- font-weight: 800;
- font-style: italic;
-}
-
-.extension-banner-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh; /* Full screen height */
- background-color: transparent;
- z-index: 9999; /* High z-index to ensure it blocks everything below */
- display: flex;
- justify-content: center;
- align-items: center;
- pointer-events: none; /* Allow clicks to pass through */
- background: linear-gradient(var(--main-color), var(--bg));
- opacity: 0;
- /* fade-in and fade-out for the screen take-over */
- animation: var(--duration) ease-in-out var(--duration) 1 normal forwards
- show,
- var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
-}
-
-@keyframes show {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 0.8;
- }
-}
-
-.banner {
- background: var(--main-bg-color);
- color: var(--main-color);
- position: relative;
- padding: 1rem;
- font-size: 5rem;
- line-height: 11rem;
- transform: rotate(-25deg); /* Rotates the banner */
- width: 200vw; /* Extra-wide to ensure the marquee scrolls smoothly across */
- height: auto;
-
- /* Apply gradients to the banner itself */
- /* Add a left-to-transparent gradient on the left */
- /* Add a right-to-transparent gradient on the right */
-}
-
-.banner::before,
-.banner::after {
- position: absolute;
- top: 0;
- z-index: 9999;
- width: 15%;
- height: 100%;
- content: "";
-}
-
-.banner::before {
- left: 0;
- background: linear-gradient(to right, var(--main-bg-color), transparent);
-}
-
-.banner::after {
- right: 0;
- background: linear-gradient(to left, var(--main-bg-color), transparent);
-}
-
-.marquee {
- overflow: hidden;
- position: relative;
- width: 100%;
-}
-
-.marquee__inner {
- display: inline-block;
- white-space: nowrap;
- /* Adjust the speed using --ad which can be set dynamically in the HTML */
- animation: scroll var(--ad, 100s) linear infinite;
- transform: translate3d(0, 0, 0); /* Force hardware acceleration */
-}
-
-.marquee span {
- display: inline-block;
- padding-right: 2rem; /* Add some space between each repeat */
-}
-
-/* Keyframes to make the animation appear infinite without gaps */
-@keyframes scroll {
- 0% {
- transform: translate3d(
- -50%,
- 0,
- 0
- ); /* Start in the middle of the loop */
- }
- 100% {
- transform: translate3d(-100%, 0, 0); /* Move left but only 50% */
- }
-}
-
-/* Mobile screens */
-@media (max-width: 30rem) {
- .extension-banner-container {
- width: 110vw;
- height: 110vh;
- }
- .banner {
- transform: rotate(-60deg);
- width: 250vw;
- margin-left: -15rem;
- }
-}
-
-/* Tablet screens */
-@media (min-width: 48rem) {
- .banner {
- transform: rotate(-50deg);
- width: 225vw;
- margin-left: -5rem;
- }
-}
-
-/* iPad Mini */
-@media (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape) {
- .banner {
- transform: rotate(-40deg);
- width: 225vw;
- margin-left: -5rem;
- }
-}
-
-/* Laptop screens */
-@media (min-width: 64rem) {
- .extension-banner-container {
- width: 115vw;
- height: 115vh;
- }
- .banner {
- transform: rotate(-30deg);
- width: 210vw;
- margin-left: -5rem;
- margin-top: -5rem;
- }
-}
-
-/* Desktop screens */
-@media (min-width: 80rem) {
- .extension-banner-container {
- width: 115vw;
- height: 115vh;
- }
- .banner {
- transform: rotate(-32deg);
- width: 200vw;
- margin-left: -15rem;
- margin-top: -15rem;
- }
-}