Skip to content

Commit 1b82b7c

Browse files
ClaudeDavidKRK
Claude
and
DavidKRK
authored
[WIP] Fix Buy Me A Coffee image aspect ratio on all pages (#224)
* Initial plan * fix: improve HTML accessibility and standards compliance - Add descriptive alt text to Buy Me A Coffee images across all pages - Initialize default language (French) on all pages with language switchers - Remove deprecated frameborder attribute from event.html iframe - Add lang and dir attributes updates for accessibility and RTL support Agent-Logs-Url: https://github.com/DavidKRK/DavidKRK.github.io/sessions/a973c329-86c6-41f2-ab44-10dc099f5ea2 Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com> --------- Co-authored-by: anthropic-code-agent[bot] <242468646+Claude@users.noreply.github.com> Co-authored-by: DavidKRK <136035295+DavidKRK@users.noreply.github.com>
1 parent 3241844 commit 1b82b7c

6 files changed

Lines changed: 31 additions & 10 deletions

File tree

‎bio.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ <h1 class="main-title">David KRK</h1>
216216
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
217217
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
218218
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
219-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
219+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
220220
</div>
221221

222222
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">

‎contact.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ <h1 class="main-title">David KRK</h1>
164164
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
165165
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
166166
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
167-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
167+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
168168
</div>
169169

170170
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">
@@ -197,6 +197,10 @@ <h1 class="main-title">David KRK</h1>
197197
if (activeBtn) {
198198
activeBtn.classList.add('active');
199199
}
200+
201+
// Update document language and text direction for accessibility and RTL support
202+
document.documentElement.lang = lang;
203+
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
200204
}
201205

202206
langBtns.forEach(btn => {

‎event.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ <h1 class="main-title">David KRK</h1>
8080

8181
<footer class="w-full max-w-7xl mx-auto">
8282
<div class="mt-8 mb-8 player-container">
83-
<iframe width="100%" height="120"
83+
<iframe title="Mixcloud player" width="100%" height="120"
84+
style="border:0;"
8485
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=1&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
85-
frameborder="0"
8686
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share"></iframe>
8787
</div>
8888

@@ -99,7 +99,7 @@ <h1 class="main-title">David KRK</h1>
9999
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
100100
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
101101
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
102-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
102+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
103103
</div>
104104

105105
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">
@@ -125,18 +125,24 @@ <h1 class="main-title">David KRK</h1>
125125

126126
const contentsToShow = document.querySelectorAll(`.lang-content[data-lang="${lang}"]`);
127127
contentsToShow.forEach(content => content.classList.add('active'));
128-
128+
129129
const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
130130
if (activeBtn) {
131131
activeBtn.classList.add('active');
132132
}
133+
134+
// Update document language and text direction for accessibility and RTL support
135+
document.documentElement.lang = lang;
136+
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
133137
}
134138

135139
langBtns.forEach(btn => {
136140
btn.addEventListener('click', () => {
137141
switchLanguage(btn.dataset.lang);
138142
});
139143
});
144+
145+
switchLanguage('fr');
140146
});
141147
</script>
142148
</body>

‎index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ <h1 class="main-title">David KRK</h1>
139139
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
140140
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
141141
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
142-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
142+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
143143
</div>
144144

145145
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">
@@ -165,11 +165,15 @@ <h1 class="main-title">David KRK</h1>
165165

166166
const contentsToShow = document.querySelectorAll(`.lang-content[data-lang="${lang}"]`);
167167
contentsToShow.forEach(content => content.classList.add('active'));
168-
168+
169169
const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
170170
if (activeBtn) {
171171
activeBtn.classList.add('active');
172172
}
173+
174+
// Update document language and text direction for accessibility and RTL support
175+
document.documentElement.lang = lang;
176+
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
173177
}
174178

175179
langBtns.forEach(btn => {
@@ -178,6 +182,7 @@ <h1 class="main-title">David KRK</h1>
178182
});
179183
});
180184

185+
switchLanguage('fr');
181186
});
182187
</script>
183188
</body>

‎music.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ <h3><i class="fab fa-youtube" style="color:#ff0000;"></i> <span id="youtube-titl
199199
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
200200
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
201201
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
202-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
202+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
203203
</div>
204204

205205
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">

‎shop.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ <h2 class="mt-4">Офіційний магазин</h2>
194194
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud"></i></a>
195195
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
196196
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok"></i></a>
197-
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
197+
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon text-2xl md:text-3xl"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="217" height="60" style="height: 1em; width: auto; vertical-align: middle;"></a>
198198
</div>
199199

200200
<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">
@@ -223,13 +223,19 @@ <h2 class="mt-4">Офіційний магазин</h2>
223223

224224
const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
225225
if (activeBtn) activeBtn.classList.add('active');
226+
227+
// Update document language and text direction for accessibility and RTL support
228+
document.documentElement.lang = lang;
229+
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
226230
}
227231

228232
langBtns.forEach(btn => {
229233
btn.addEventListener('click', () => {
230234
switchLanguage(btn.dataset.lang);
231235
});
232236
});
237+
238+
switchLanguage('fr');
233239
});
234240
</script>
235241
</body>

0 commit comments

Comments
 (0)