vod frog, frog with the vods
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 @media (max-width: 600px) {
80 .credits-btn {
81 display: none;
82 }
83 }
84
85 .lilypad-img {
86 width: clamp(70px, 10vw, 100px);
87 height: auto;
88 filter: drop-shadow(2px 3px 4px rgba(10, 24, 43, 0.3));
89 }
90
91 .credits-label {
92 position: absolute;
93 font-family: 'PicNic', cursive, system-ui;
94 font-size: clamp(0.7rem, 1.2vw, 0.9rem);
95 color: #0A182B;
96 pointer-events: none;
97 margin-top: 2px;
98 }
99
100 .modal-backdrop {
101 position: fixed;
102 inset: 0;
103 background: rgba(10, 24, 43, 0.6);
104 z-index: 1000;
105 display: flex;
106 align-items: center;
107 justify-content: center;
108 padding: 20px;
109 }
110
111 .modal-content {
112 width: min(500px, 90vw);
113 }
114
115 .credits-body {
116 display: flex;
117 flex-direction: column;
118 align-items: center;
119 text-align: center;
120 gap: 12px;
121 }
122
123 .credits-title {
124 font-family: 'PicNic', cursive, system-ui;
125 font-size: clamp(1.6rem, 3.5vw, 2.2rem);
126 color: #0A182B;
127 margin: 0;
128 }
129
130 .credit-item {
131 display: flex;
132 flex-direction: column;
133 gap: 4px;
134 }
135
136 .credit-label {
137 font-family: 'PicNic', cursive, system-ui;
138 font-size: 1.1rem;
139 color: #0A182B;
140 margin: 0;
141 font-weight: bold;
142 }
143
144 .credit-author {
145 font-family: 'Fang', system-ui, sans-serif;
146 font-size: 0.95rem;
147 color: #0A182B;
148 margin: 0;
149 opacity: 0.8;
150 }
151
152 .credit-link {
153 font-family: 'Fang', system-ui, sans-serif;
154 font-size: 0.9rem;
155 color: #0A182B;
156 text-decoration: underline;
157 text-decoration-color: #FF3992;
158 transition: color 0.15s;
159 }
160
161 .credit-link:hover {
162 color: #FF3992;
163 }
164
165 .credit-license {
166 font-family: 'Fang', system-ui, sans-serif;
167 font-size: 0.8rem;
168 color: #0A182B;
169 opacity: 0.65;
170 margin: 0;
171 font-style: italic;
172 }
173
174 .close-btn {
175 all: unset;
176 font-family: 'PicNic', cursive, system-ui;
177 font-size: 1rem;
178 color: #FFDEED;
179 background: #0A182B;
180 padding: 8px 28px;
181 border-radius: 30px;
182 cursor: pointer;
183 margin-top: 8px;
184 transition: transform 0.15s ease;
185 }
186
187 .close-btn:hover {
188 transform: scale(1.05);
189 }
190</style>