vod frog, frog with the vods
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

add credits lilypad button with wavy modal for SFX attribution

goose.art e071590a 0e2168cc

+209
+184
src/lib/CreditsButton.svelte
··· 1 + <!-- 2 + CreditsButton: A lilypad button in the bottom-left that opens a credits modal. 3 + --> 4 + <script lang="ts"> 5 + import WavyBorder from './WavyBorder.svelte'; 6 + import { playCroak } from './croak'; 7 + 8 + let showModal = $state(false); 9 + 10 + function open() { 11 + playCroak(); 12 + showModal = true; 13 + } 14 + 15 + function close() { 16 + showModal = false; 17 + } 18 + 19 + function onBackdropClick(e: MouseEvent) { 20 + if (e.target === e.currentTarget) close(); 21 + } 22 + 23 + function onKeyDown(e: KeyboardEvent) { 24 + if (e.key === 'Escape') close(); 25 + } 26 + </script> 27 + 28 + <svelte:window onkeydown={onKeyDown} /> 29 + 30 + <button class="credits-btn" onclick={open} title="Credits"> 31 + <img src="/lilymenu.svg" alt="Credits" class="lilypad-img" /> 32 + <span class="credits-label">credits</span> 33 + </button> 34 + 35 + {#if showModal} 36 + <!-- svelte-ignore a11y_no_static_element_interactions --> 37 + <div class="modal-backdrop" onclick={onBackdropClick}> 38 + <div class="modal-content"> 39 + <WavyBorder seed="credits-modal" fill="#39FF44" strokeColor="#0A182B" strokeWidth={2.5} padding={48}> 40 + <div class="credits-body"> 41 + <h2 class="credits-title">credits</h2> 42 + 43 + <div class="credit-item"> 44 + <p class="credit-label">Frog Croaking</p> 45 + <p class="credit-author">by DrinkingWindGames</p> 46 + <a href="https://freesound.org/s/848549/" target="_blank" class="credit-link"> 47 + freesound.org/s/848549/ 48 + </a> 49 + <p class="credit-license">License: Attribution 4.0</p> 50 + </div> 51 + 52 + <button class="close-btn" onclick={close}> 53 + close 54 + </button> 55 + </div> 56 + </WavyBorder> 57 + </div> 58 + </div> 59 + {/if} 60 + 61 + <style> 62 + .credits-btn { 63 + all: unset; 64 + position: fixed; 65 + bottom: 16px; 66 + left: 16px; 67 + z-index: 100; 68 + cursor: pointer; 69 + display: flex; 70 + align-items: center; 71 + justify-content: center; 72 + transition: transform 0.2s ease; 73 + } 74 + 75 + .credits-btn:hover { 76 + transform: scale(1.1) rotate(-5deg); 77 + } 78 + 79 + .lilypad-img { 80 + width: clamp(70px, 10vw, 100px); 81 + height: auto; 82 + filter: drop-shadow(2px 3px 4px rgba(10, 24, 43, 0.3)); 83 + } 84 + 85 + .credits-label { 86 + position: absolute; 87 + font-family: 'PicNic', cursive, system-ui; 88 + font-size: clamp(0.7rem, 1.2vw, 0.9rem); 89 + color: #0A182B; 90 + pointer-events: none; 91 + margin-top: 2px; 92 + } 93 + 94 + .modal-backdrop { 95 + position: fixed; 96 + inset: 0; 97 + background: rgba(10, 24, 43, 0.6); 98 + z-index: 1000; 99 + display: flex; 100 + align-items: center; 101 + justify-content: center; 102 + padding: 20px; 103 + } 104 + 105 + .modal-content { 106 + width: min(500px, 90vw); 107 + } 108 + 109 + .credits-body { 110 + display: flex; 111 + flex-direction: column; 112 + align-items: center; 113 + text-align: center; 114 + gap: 12px; 115 + } 116 + 117 + .credits-title { 118 + font-family: 'PicNic', cursive, system-ui; 119 + font-size: clamp(1.6rem, 3.5vw, 2.2rem); 120 + color: #0A182B; 121 + margin: 0; 122 + } 123 + 124 + .credit-item { 125 + display: flex; 126 + flex-direction: column; 127 + gap: 4px; 128 + } 129 + 130 + .credit-label { 131 + font-family: 'PicNic', cursive, system-ui; 132 + font-size: 1.1rem; 133 + color: #0A182B; 134 + margin: 0; 135 + font-weight: bold; 136 + } 137 + 138 + .credit-author { 139 + font-family: 'Fang', system-ui, sans-serif; 140 + font-size: 0.95rem; 141 + color: #0A182B; 142 + margin: 0; 143 + opacity: 0.8; 144 + } 145 + 146 + .credit-link { 147 + font-family: 'Fang', system-ui, sans-serif; 148 + font-size: 0.9rem; 149 + color: #0A182B; 150 + text-decoration: underline; 151 + text-decoration-color: #FF3992; 152 + transition: color 0.15s; 153 + } 154 + 155 + .credit-link:hover { 156 + color: #FF3992; 157 + } 158 + 159 + .credit-license { 160 + font-family: 'Fang', system-ui, sans-serif; 161 + font-size: 0.8rem; 162 + color: #0A182B; 163 + opacity: 0.65; 164 + margin: 0; 165 + font-style: italic; 166 + } 167 + 168 + .close-btn { 169 + all: unset; 170 + font-family: 'PicNic', cursive, system-ui; 171 + font-size: 1rem; 172 + color: #FFDEED; 173 + background: #0A182B; 174 + padding: 8px 28px; 175 + border-radius: 30px; 176 + cursor: pointer; 177 + margin-top: 8px; 178 + transition: transform 0.15s ease; 179 + } 180 + 181 + .close-btn:hover { 182 + transform: scale(1.05); 183 + } 184 + </style>
+2
src/routes/+layout.svelte
··· 3 3 import MeshBackground from '$lib/MeshBackground.svelte'; 4 4 import PlantOverlay from '$lib/PlantOverlay.svelte'; 5 5 import FlySpawner from '$lib/FlySpawner.svelte'; 6 + import CreditsButton from '$lib/CreditsButton.svelte'; 6 7 import { initAuth } from '$lib/auth.svelte'; 7 8 8 9 let { children } = $props(); ··· 49 50 <MeshBackground /> 50 51 <PlantOverlay /> 51 52 <FlySpawner /> 53 + <CreditsButton /> 52 54 53 55 {@render children()} 54 56
+23
static/lilymenu.svg
··· 1 + <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 + <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 + <svg width="100%" height="100%" viewBox="0 0 107 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> 4 + <g transform="matrix(1,0,0,1,-169.669839,-715.344429)"> 5 + <g transform="matrix(1,0,0,1,-9167.949391,555.183116)"> 6 + <g transform="matrix(1,0,0,1,9160.949391,-551.370198)"> 7 + <g transform="matrix(1,-0,-0,1,176.669839,711.531512)"> 8 + <use xlink:href="#_Image1" x="0" y="40.71" width="101px" height="34px"/> 9 + </g> 10 + </g> 11 + <g transform="matrix(0.966949,0.254968,-0.254968,0.966949,9340.821923,-583.255046)"> 12 + <path d="M205.257,741.837C214.168,710.965 242.061,710.303 255.952,708.611C249.257,718.854 250.189,719.09 246.611,730.706C276.946,726.057 299.221,705.35 288.971,732.428C271.409,778.821 228.729,772.248 213.092,772.144C197.456,772.04 204.519,744.827 205.257,741.837Z" style="fill:rgb(61,179,29);"/> 13 + <g transform="matrix(0.966949,-0.254968,0.254968,0.966949,186.450738,719.662603)"> 14 + <use xlink:href="#_Image2" x="0.374" y="0" width="105px" height="70px"/> 15 + </g> 16 + </g> 17 + </g> 18 + </g> 19 + <defs> 20 + <image id="_Image1" width="101px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAiCAYAAABGIRcbAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFcElEQVRoge3aa6xcVRUH8N998PbWgFrFYlEJc6AaIiAIUQKi4YAC8YsxEP0gMT6+EUEgiBESDWoiCUQlSoLxQ0lITIg0IBPEBxBQqQaw0cyJjSC2MQKmlHJbbu+DD+tMe3p6zsyZe+e2l977TyYzc/Zrnb32Wnut/94jrXYHvoBbcVjhM45NWZqcZQULRj7PcBXuwk7sKnzfn6XJNcTEwwTWVPQ1s6iSLk/sxiiOyT9dnNz9MZp/H1vTwdjiyLWscVzN8wta7c6JhFLGcVlNxenFkGqZ44ia5xP4MHvN6PSaiuOtdme0pmwFDVHYT+CVHlU/SyhlEj+uqXQy3jkUyVYAR+NzPcr/2mp3RkbFxvNbzFVUeitOWAThlisuxfk1Zf/Gs1mazHVd05PYWlP5kmFLtpxQcl2JvcFVGb/CcwoVXsYDNZXTVrszMgT5ljtW44s1ZTvxIyWlwE3ClZVxqvCFKxgQJSs5C2srqs3iBjyfpcku9lXKNrxU0WiVyPhXMAAKChnFibhFdd73On6WpcnrxQZd7MbvKhqN4bpWu3P8UKQ9xNFqd4oKuUTsFZtxZkX1V3Fl10K6GM3SpPj/iZqx3ofTFiTtMkDJXX0TD4qIq44ZeRYbSorcw3118XCPMav84Qrsp4wxXIDvNGh6I2ZKhrFfeJYJc6vC5StR2L4or3C8DT/A/Q2afzRLk0fLCiFXSqlgU00nZ+DqVrtzTE35skJJGYR1/ANf1ztanRLHJH+qq7Bn5RcGWY3/FssKmMNf8LUsTTb2FvvQQ4Ui4CjcgSvsS8VXYQO+h6eyNKlKP1Ca+MKgX8WdPTr/m1gRvyk+rDLFQwE1yjhWhLp34Lw+XcyJxHF9liZ9mfc6pUzgKUEL1GEjPibibBxaSqlRBJG3fRsXY12DrjbiM9hSfNhrrvZzUQVhzsFP1NP6xLHmesGdTfUbbCmjhxKIvfcoXInb89/9MIsfighrepB5qYymStnoekE310Ve03gRFwqmc/LNoJg+SiAOo3aLo4vvi9X+FvXzUMSk2MxvzdJk4CP12gEKQh+JX+LTffraZW9IvUG4v1ocSMU1UEAXp4go82LhIWbwLoOfKX0JPxfWMvC79tR64WU+iD9rZrZd/Br35O2ywnhV5zaVaPIyA0x4F+vE+/wP23PZpnGt2CvKCfUgmMKn8Ej3wXwWX19TzF96AtcIoeeDrXhGuIT78LggQN8reKEX5tlvE5wgOKZLxfWeCwtlc0IxO1Tf5mmK+wSZ+w3szNJkagF9NfKP8kz+kzgb31J/+N8U0/nYY3gNf8Rt+L3wx125+lnViLDew4W/nxOu5uO4XCRxZ+R1h33X4Dl8F49maZLlczQ6nz2kjMa0ST7oGkFBrxVKmjW8l50VYeMjaIlEbEpY1Gb8QazqM0WCO473i/OeI/D2IcrSDz8V5097jjqGuUcOzGW12p1xsfrmcBI+hOuHJtHSRgdfwTNZmmxbrEHmTTDmV49m87/rcBG+LFbumxWz+JeYl1/gI3gefxeW+W7B/m5fzOhxQaxvReQzgc+LBGtGhNNdF9fdHw420zyXyzCL/wtmdxceE67ztrzOjNirjhOsxbYsTRpHjgvBUCaopJxRsemuEu5tleCInhZK+oDg1k4ZxtgN8U8RTNwrIsFpcVlki9iLJrM0mTyA8vTE0FdtrqB+0dORIkpqiRO6c8Wq7GKHuPl/+AJk3CxOUu8W/NOOJo2WAhux6K6kYXLXzZjX4h3iBPQ9woffjE9UtPmP4OZeEEcNh4kobI2wgIeEW+qJpaCEMg6Kfx8wCz9a3A84R3BR5wsKY5PqpHMMI00o8qWKg73pVqJCaWP2pWhmD9SmezDwBvviZdR0FMG/AAAAAElFTkSuQmCC"/> 21 + <image id="_Image2" width="105px" height="70px" xlink:href="data:image/png;base64,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"/> 22 + </defs> 23 + </svg>