old-personal-web/diary.html at main · keralaporota/old-personal-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About me!</title>

   <link rel="stylesheet" href="diary.css">
</head>


<body>

 <!-- <iframe
  src="https://nikki.top/profile.php?id=140"
  style="width:100%; height:600px; border:none;"
  title="My Nikki Diary">
</iframe> -->

<!-- <div class="diary-container">
  <iframe src="https://nikki.top/profile.php?id=140"></iframe>
</div> -->

<div class="iframe-wrapper">
  <iframe src="https://nikki.top/profile.php?id=140" title="My Diary"></iframe>
</div>


 <!-- gudetama image button -->
<img id="toggleImage" class="music-button"
     src="./images/gudetamaclickme.gif" alt="music button">

<!-- hidden audio element -->
<audio id="bgMusic" src="./other media/music.mp3"></audio>

<script>
  const img = document.getElementById('toggleImage');
  const music = document.getElementById('bgMusic');

  const image1 = './images/gudetamaclickme.gif'; // default image
  const image2 = './images/gudetamaplaying.gif'; // image when music is playing

  let isPlaying = false;

  img.addEventListener('click', () => {
    if (!isPlaying) {
      img.src = image2;
      music.play();
      isPlaying = true;
    } else {
      img.src = image1;
      music.pause();
      music.currentTime = 0;
      isPlaying = false;
    }
  });
</script>

</body>
</html>