Kotak pesan dengan backround

<!--Background halaman-->
<img alt="BackgroundGambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNo78pqhH5S2DW2cncPcsdvVOgc0QzRzct61ux-BHqCI9ensIS3FhbFfLABSEM9kMP5499dWtvxhxM126rXIV8hLFycP4d8pYNJVrr7t-60IQnenNLk1MCz6iRZdy_xHTzNM5zZ4qpDl0XsGQriPDBe-voyncVlsTV4_zZmsb6gqknUqP5HF1PhP0bG_U/s600/adi.gif" style="border-radius: 10px; box-sizing: border-box; height: 1000px; left: 0px; object-fit: cover; opacity: 1.25; padding: 0px; position: absolute; top: 0px; width: 100%; z-index: 0;" /><div style="padding: 10px; position: relative; z-index: 1;">

<div style="height: 560px; position: relative;"><!--Spasi--></div>

<!--Container halaman-->
<div style="background-color: trasparent; border-radius: 10px; border: 2px solid white; box-sizing: border-box; height: auto; margin: 0px auto; max-width: 100%; overflow: hidden; padding: 10px; width: 100%;">

<span style="color: white; font-family: roboto; font-size: xx-large;">
Kotak pesan dengan Background Gambar"</span><br />
<span style="color: white; font-family: caveat; font-size: xxx-large;">
Daftar catatan</span><br />
<ol style="color: white; font-family: Roboto;">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ol></style>

<!--tombol Catatan-->
<button onclick="toggleJudul('pesan1', this)" style="border-radius: 20px; margin-bottom: 5px;">📜Catatan 1</button>

<!--Pemutar audio Mp3-->
<audio controls="" style="border-radius: 30px; border: 2px solid gray; height: 20px; margin-top: 5px; width: 100%;"><source src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&amp;st=d6g8bxe4&amp;raw=1" type="audio/mpeg"></source></audio>
</div>
</div>

<div style="height: 80px; position: relative;"><!--Spasi--></div>

<!--Kotak catatan1-->
<div contenteditable="true" hidden="" id="pesan1" style="border-radius: 10px; border: 3px solid gray; margin-bottom: 10px; overflow: hidden; padding: 10px; position: relative;">

<img src="Url gambar Backgroundkotak catatan" style="height: 100%; left: 0px; object-fit: cover; opacity: 0.25; padding: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; z-index: 0;" />

<p><span style="color: Black; font-family: caveat; font-size: xxx-large;">Catatan 1 🌸</span</p>

<button onclick="copyPesan(this)" style="background: gainsboro; border-radius: 5px; border: none; color: grey; cursor: pointer; padding: 4px 10px; position: absolute; right: 10px; top: 10px;">Copy</button></div>

<script>
function toggleJudul(id, tombolAktif) {
const semuaKontainer = document.querySelectorAll('div[contenteditable]');
const semuaTombol = document.querySelectorAll('button[onclick^="toggleJudul"]');
const kontainerKlik = document.getElementById(id);
const sedangTerbuka = !kontainerKlik.hidden;
semuaKontainer.forEach(div => div.hidden = true);
semuaTombol.forEach((btn, index) => {
btn.innerText = `📜 Catatan ${index + 1}`;});
if (!sedangTerbuka) { kontainerKlik.hidden = false;
tombolAktif.innerText = "🔴 Tutup";} else {
tombolAktif.innerText = `📜 Catatan ${[...semuaTombol].indexOf(tombolAktif) + 1}`;}}
function copyPesan(tombol) {
const kontainer = tombol.closest('div[contenteditable]');
const isi = kontainer.innerText.replace('Copy', '').trim();
navigator.clipboard.writeText(isi).then(() => alert('Disalin!'));}
</script>