@@ -44,13 +41,26 @@
| {{ volume }}% |
- |
-
+ | |
+
+
|
|
-
+
+ |
+
+
+ |
+
+ |
+
+
+ |
+
|
diff --git a/main.js b/main.js
index c9841bc..dfd75f2 100644
--- a/main.js
+++ b/main.js
@@ -28,6 +28,23 @@ const SOUNDS = [
{ id: 'wrong_buzzer', name: 'Wrong Buzzer' },
];
+const FAKES = [
+ { name: 'Google Search', url: 'https://google.com/' },
+ { name: 'Stack Overflow', url: 'https://stackoverflow.com/' },
+ { name: 'Discord', url: 'https://app.discord.com/', favicon: './favicons/discord.ico' },
+ { name: 'Gmail', url: 'https://mail.google.com/', title: 'Inbox - Gmail', favicon: './favicons/gmail.ico' },
+ { name: 'Google Drive', url: 'https://drive.google.com/' },
+ { name: 'Github', url: 'https://github.com/' },
+ { name: 'Reddit', url: 'https://reddit.com/', title: 'Reddit - Dive into anything' },
+ { name: 'Wikipedia', url: 'https://wikipedia.org/' },
+ { name: 'Facebook', url: 'https://facebook.com/' },
+ { name: 'YouTube', url: 'https://youtube.com/' },
+ { name: 'LinkedIn', url: 'https://linkedin.com/' },
+ { name: 'Instagram', url: 'https://instagram.com/', favicon: './favicons/instagram.png' },
+ { name: 'WhatsApp', url: 'https://web.whatsapp.com/', favicon: './favicons/whatsapp.ico' },
+ { name: 'X', url: 'https://x.com/', title: 'Home / X' },
+];
+
const random = {
element: function (array) {
if (array.length == 0) {
@@ -53,6 +70,9 @@ let app = {
volume: 50,
randomPitch: true,
hidePrank: true,
+ redirect: true,
+ fakeId: 0,
+ fakes: FAKES,
};
},
computed: {},
@@ -63,6 +83,9 @@ let app = {
maxDelay() {
this.minDelay = Math.min(this.minDelay, this.maxDelay);
},
+ fakeId() {
+ this.disguise();
+ },
},
methods: {
showApp() {
@@ -72,11 +95,28 @@ let app = {
document.getElementById("app").setAttribute("style", "display:none");
document.body.setAttribute("style", "background: none");
},
- onBlur() {
- // TODO
- },
onFocus() {
- // TODO
+ if (this.started && this.redirect) {
+ window.location.href = FAKES[this.fakeId].url;
+ }
+ },
+ clearFavicon() {
+ const oldLink = document.getElementById('dynamic-favicon');
+ if (oldLink) {
+ document.head.removeChild(oldLink);
+ }
+ },
+ changeFavicon(src) {
+ document.head = document.head || document.getElementsByTagName('head')[0];
+ const link = document.createElement('link');
+ const oldLink = document.getElementById('dynamic-favicon');
+ link.id = 'dynamic-favicon';
+ link.rel = 'shortcut icon';
+ link.href = src;
+ if (oldLink) {
+ document.head.removeChild(oldLink);
+ }
+ document.head.appendChild(link);
},
loadSounds() {
this.sounds = SOUNDS.map(sound => {
@@ -86,6 +126,10 @@ let app = {
return sound;
});
},
+ disguise() {
+ this.changeFavicon(FAKES[this.fakeId].favicon ?? FAKES[this.fakeId].url + 'favicon.ico');
+ document.title = FAKES[this.fakeId].title ?? FAKES[this.fakeId].name;
+ },
start() {
if (!this.started) {
const audioCtx = new AudioContext();
@@ -97,6 +141,7 @@ let app = {
if (this.hidePrank) {
this.hideApp();
}
+ this.disguise();
}
},
trigger() {
@@ -131,9 +176,7 @@ let app = {
setTimeout(this.showApp);
this.loadSounds();
document.addEventListener("visibilitychange", function () {
- if (document.hidden) {
- self.onBlur();
- } else {
+ if (!document.hidden) {
self.onFocus();
}
});
diff --git a/style.css b/style.css
index d7dc9d9..fdf2d36 100644
--- a/style.css
+++ b/style.css
@@ -227,6 +227,7 @@ button:active {
position: absolute;
top: .25em;
left: .25em;
+ font-size: small;
}
.sound-container button.inactive::before {
@@ -248,7 +249,7 @@ table.config td:first-child {
text-align: right;
}
-table.config input {
+table.config input, table.config select {
width: 100%;
}