commit 6e7885a0c592dccd2c6dc0787acb4c200cb6487b · dunkirk.sh/unduckified

public/foot-switch.mp3

This is a binary file and will not be displayed.

+28 -2

src/global.css

···

       133
        
       	color: var(--text-color);

     

       134
        
       }

     

       135
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       136
        
       .copy-button {

     

       137
        
       	padding: 8px;

     

       138
        
       	color: var(--text-color-secondary);

     
···

       200
        
       	background: var(--bg-color-active);

     

       201
        
       }

     

       202
        
       

     

       203
       -
       .settings-button:hover img {

     

       0
        
       
     

       204
        
       	transform: rotate(180deg);

     

       205
        
       	transition: transform 0.6s ease;

     

       206
        
       }

     
···

       213
        
       	transition: transform 0.6s ease;

     

       214
        
       }

     

       215
        
       

     

       216
       -
       .settings-button:not(:hover) .settings {

     

       217
        
       	transform: rotate(0deg);

     

       218
        
       }

     

       219

···

       133
        
       	color: var(--text-color);

     

       134
        
       }

     

       135
        
       

     

       136
       +
       .flash-white {

     

       137
       +
       	outline: 2px solid var(--text-color-secondary);

     

       138
       +
       	background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));

     

       139
       +
       	opacity: 0.2;

     

       140
       +
       	animation: flash 0.275s forwards;

     

       141
       +
       }

     

       142
       +
       

     

       143
       +
       @keyframes flash {

     

       144
       +
       	0% {

     

       145
       +
       		opacity: 0.2;

     

       146
       +
       		outline: 2px solid var(--text-color-secondary);

     

       147
       +
       		background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));

     

       148
       +
       	}

     

       149
       +
       	50% {

     

       150
       +
       		opacity: 1;

     

       151
       +
       		outline: 2px solid var(--text-color-hover);

     

       152
       +
       		background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));

     

       153
       +
       	}

     

       154
       +
       	100% {

     

       155
       +
       		opacity: 0.2;

     

       156
       +
       		outline: 2px solid var(--text-color-secondary);

     

       157
       +
       		background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));

     

       158
       +
       	}

     

       159
       +
       }

     

       160
       +
       

     

       161
        
       .copy-button {

     

       162
        
       	padding: 8px;

     

       163
        
       	color: var(--text-color-secondary);

     
···

       225
        
       	background: var(--bg-color-active);

     

       226
        
       }

     

       227
        
       

     

       228
       +
       .settings-button:hover img,

     

       229
       +
       .settings-button.rotate img {

     

       230
        
       	transform: rotate(180deg);

     

       231
        
       	transition: transform 0.6s ease;

     

       232
        
       }

     
···

       239
        
       	transition: transform 0.6s ease;

     

       240
        
       }

     

       241
        
       

     

       242
       +
       .settings-button:not(:hover):not(.rotate) .settings {

     

       243
        
       	transform: rotate(0deg);

     

       244
        
       }

     

       245

+33 -9

src/main.ts

···

       141
        
       		</div>

     

       142
        
       	`;

     

       143
        
       

     

       0
        
       
     

       0
        
       
     

       144
        
       	const copyButton = app.querySelector<HTMLButtonElement>(".copy-button");

     

       145
        
       	if (!copyButton) throw new Error("Copy button not found");

     

       146
        
       	const copyIcon = copyButton.querySelector("img");

     
···

       166
        
       	if (!clearHistory) throw new Error("Clear history button not found");

     

       167
        
       

     

       168
        
       	urlInput.value = `${window.location.protocol}//${window.location.host}?q=%s`;

     

       169
       -
       

     

       170
       -
       	copyButton.addEventListener("click", async () => {

     

       171
       -
       		await navigator.clipboard.writeText(urlInput.value);

     

       172
       -
       		copyIcon.src = "/clipboard-check.svg";

     

       173
       -
       

     

       174
       -
       		setTimeout(() => {

     

       175
       -
       			copyIcon.src = "/clipboard.svg";

     

       176
       -
       		}, 2000);

     

       177
       -
       	});

     

       178
        
       

     

       179
        
       	const prefersReducedMotion = window.matchMedia(

     

       180
        
       		"(prefers-reduced-motion: reduce)",

     
···

       185
        
       		const toggleOnAudio = new Audio("/toggle-button-on.mp3");

     

       186
        
       		const clickAudio = new Audio("/click-button.mp3");

     

       187
        
       		const warningAudio = new Audio("/double-button.mp3");

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       188
        
       

     

       189
        
       		settingsButton.addEventListener("mouseenter", () => {

     

       190
        
       			spinAudio.play();

     
···

       222
        
       			clickAudio.currentTime = 0;

     

       223
        
       			clickAudio.play();

     

       224
        
       		});

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       225
        
       	}

     

       226
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       227
        
       	settingsButton.addEventListener("click", () => {

     

       0
        
       
     

       228
        
       		modal.style.display = "block";

     

       229
        
       		setOutsideElementsTabindex(modal, -1);

     

       230
        
       	});

     

       231
        
       

     

       232
        
       	closeModal.addEventListener("click", () => {

     

       0
        
       
     

       233
        
       		modal.style.display = "none";

     

       234
        
       		setOutsideElementsTabindex(modal, 0);

     

       235
        
       	});

     

       236
        
       

     

       237
        
       	window.addEventListener("click", (event) => {

     

       238
        
       		if (event.target === modal) {

     

       0
        
       
     

       239
        
       			modal.style.display = "none";

     

       240
        
       			setOutsideElementsTabindex(modal, 0);

     

       241
        
       		}

···

       141
        
       		</div>

     

       142
        
       	`;

     

       143
        
       

     

       144
       +
       	const copyInput = app.querySelector<HTMLInputElement>(".url-input");

     

       145
       +
       	if (!copyInput) throw new Error("Copy input not found");

     

       146
        
       	const copyButton = app.querySelector<HTMLButtonElement>(".copy-button");

     

       147
        
       	if (!copyButton) throw new Error("Copy button not found");

     

       148
        
       	const copyIcon = copyButton.querySelector("img");

     
···

       168
        
       	if (!clearHistory) throw new Error("Clear history button not found");

     

       169
        
       

     

       170
        
       	urlInput.value = `${window.location.protocol}//${window.location.host}?q=%s`;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       171
        
       

     

       172
        
       	const prefersReducedMotion = window.matchMedia(

     

       173
        
       		"(prefers-reduced-motion: reduce)",

     
···

       178
        
       		const toggleOnAudio = new Audio("/toggle-button-on.mp3");

     

       179
        
       		const clickAudio = new Audio("/click-button.mp3");

     

       180
        
       		const warningAudio = new Audio("/double-button.mp3");

     

       181
       +
       		const copyAudio = new Audio("/foot-switch.mp3");

     

       182
       +
       

     

       183
       +
       		copyButton.addEventListener("click", () => {

     

       184
       +
       			copyAudio.currentTime = 0;

     

       185
       +
       			copyAudio.play();

     

       186
       +
       		});

     

       187
        
       

     

       188
        
       		settingsButton.addEventListener("mouseenter", () => {

     

       189
        
       			spinAudio.play();

     
···

       221
        
       			clickAudio.currentTime = 0;

     

       222
        
       			clickAudio.play();

     

       223
        
       		});

     

       224
       +
       

     

       225
       +
       		closeModal.addEventListener("closed", () => {

     

       226
       +
       			settingsButton.classList.remove("rotate");

     

       227
       +
       			spinAudio.playbackRate = 0.7;

     

       228
       +
       			spinAudio.currentTime = 0;

     

       229
       +
       			spinAudio.play();

     

       230
       +
       			spinAudio.onended = () => {

     

       231
       +
       				spinAudio.playbackRate = 1;

     

       232
       +
       			};

     

       233
       +
       		});

     

       234
        
       	}

     

       235
        
       

     

       236
       +
       	copyButton.addEventListener("click", async () => {

     

       237
       +
       		await navigator.clipboard.writeText(urlInput.value);

     

       238
       +
       		copyIcon.src = "/clipboard-check.svg";

     

       239
       +
       

     

       240
       +
       		if (!prefersReducedMotion) copyInput.classList.add("flash-white");

     

       241
       +
       

     

       242
       +
       		setTimeout(() => {

     

       243
       +
       			copyInput.classList.remove("flash-white");

     

       244
       +
       			copyIcon.src = "/clipboard.svg";

     

       245
       +
       		}, 375);

     

       246
       +
       	});

     

       247
       +
       

     

       248
        
       	settingsButton.addEventListener("click", () => {

     

       249
       +
       		settingsButton.classList.add("rotate");

     

       250
        
       		modal.style.display = "block";

     

       251
        
       		setOutsideElementsTabindex(modal, -1);

     

       252
        
       	});

     

       253
        
       

     

       254
        
       	closeModal.addEventListener("click", () => {

     

       255
       +
       		closeModal.dispatchEvent(new Event("closed"));

     

       256
        
       		modal.style.display = "none";

     

       257
        
       		setOutsideElementsTabindex(modal, 0);

     

       258
        
       	});

     

       259
        
       

     

       260
        
       	window.addEventListener("click", (event) => {

     

       261
        
       		if (event.target === modal) {

     

       262
       +
       			closeModal.dispatchEvent(new Event("closed"));

     

       263
        
       			modal.style.display = "none";

     

       264
        
       			setOutsideElementsTabindex(modal, 0);

     

       265
        
       		}