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
       133
        
       	color: var(--text-color);

     

       134
       134
        
       }

     

       135
       135
        
       

     

       136
       136
       +
       .flash-white {

     

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

     

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

     

       139
       139
       +
       	opacity: 0.2;

     

       140
       140
       +
       	animation: flash 0.275s forwards;

     

       141
       141
       +
       }

     

       142
       142
       +
       

     

       143
       143
       +
       @keyframes flash {

     

       144
       144
       +
       	0% {

     

       145
       145
       +
       		opacity: 0.2;

     

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

     

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

     

       148
       148
       +
       	}

     

       149
       149
       +
       	50% {

     

       150
       150
       +
       		opacity: 1;

     

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

     

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

     

       153
       153
       +
       	}

     

       154
       154
       +
       	100% {

     

       155
       155
       +
       		opacity: 0.2;

     

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

     

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

     

       158
       158
       +
       	}

     

       159
       159
       +
       }

     

       160
       160
       +
       

     

       136
       161
        
       .copy-button {

     

       137
       162
        
       	padding: 8px;

     

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

     
···

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

     

       201
       226
        
       }

     

       202
       227
        
       

     

       203
       203
       -
       .settings-button:hover img {

     

       228
       228
       +
       .settings-button:hover img,

     

       229
       229
       +
       .settings-button.rotate img {

     

       204
       230
        
       	transform: rotate(180deg);

     

       205
       231
        
       	transition: transform 0.6s ease;

     

       206
       232
        
       }

     
···

       213
       239
        
       	transition: transform 0.6s ease;

     

       214
       240
        
       }

     

       215
       241
        
       

     

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

     

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

     

       217
       243
        
       	transform: rotate(0deg);

     

       218
       244
        
       }

     

       219
       245

+33 -9

src/main.ts

···

       141
       141
        
       		</div>

     

       142
       142
        
       	`;

     

       143
       143
        
       

     

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

     

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

     

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

     

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

     

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

     
···

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

     

       167
       169
        
       

     

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

     

       169
       169
       -
       

     

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

     

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

     

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

     

       173
       173
       -
       

     

       174
       174
       -
       		setTimeout(() => {

     

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

     

       176
       176
       -
       		}, 2000);

     

       177
       177
       -
       	});

     

       178
       171
        
       

     

       179
       172
        
       	const prefersReducedMotion = window.matchMedia(

     

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

     
···

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

     

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

     

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

     

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

     

       182
       182
       +
       

     

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

     

       184
       184
       +
       			copyAudio.currentTime = 0;

     

       185
       185
       +
       			copyAudio.play();

     

       186
       186
       +
       		});

     

       188
       187
        
       

     

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

     

       190
       189
        
       			spinAudio.play();

     
···

       222
       221
        
       			clickAudio.currentTime = 0;

     

       223
       222
        
       			clickAudio.play();

     

       224
       223
        
       		});

     

       224
       224
       +
       

     

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

     

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

     

       227
       227
       +
       			spinAudio.playbackRate = 0.7;

     

       228
       228
       +
       			spinAudio.currentTime = 0;

     

       229
       229
       +
       			spinAudio.play();

     

       230
       230
       +
       			spinAudio.onended = () => {

     

       231
       231
       +
       				spinAudio.playbackRate = 1;

     

       232
       232
       +
       			};

     

       233
       233
       +
       		});

     

       225
       234
        
       	}

     

       226
       235
        
       

     

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

     

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

     

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

     

       239
       239
       +
       

     

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

     

       241
       241
       +
       

     

       242
       242
       +
       		setTimeout(() => {

     

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

     

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

     

       245
       245
       +
       		}, 375);

     

       246
       246
       +
       	});

     

       247
       247
       +
       

     

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

     

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

     

       228
       250
        
       		modal.style.display = "block";

     

       229
       251
        
       		setOutsideElementsTabindex(modal, -1);

     

       230
       252
        
       	});

     

       231
       253
        
       

     

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

     

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

     

       233
       256
        
       		modal.style.display = "none";

     

       234
       257
        
       		setOutsideElementsTabindex(modal, 0);

     

       235
       258
        
       	});

     

       236
       259
        
       

     

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

     

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

     

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

     

       239
       263
        
       			modal.style.display = "none";

     

       240
       264
        
       			setOutsideElementsTabindex(modal, 0);

     

       241
       265
        
       		}