POWER

Monday, August 24, 2026

Diaries๐Ÿฉฐ

 Hiiii I come to talk about a topic that has been on my mind lately...

My topic I have in mind is falling behind I say this because I do believe that I'm behind others in life whether it's academically smart or going out with your friends on a random Saturday/social life. 

But one of my goals this year is to get out the house more and be more social especially because I start my second semester next week!

I've also been saving fall ideas and things to do for the rest of the year I even plan on volunteering to work at my local library for this fall (hopefully they accept my application) or maybe even at my campus library. Anyways even though I believe I'm behind on life I realized that no one is the same as each other so there's no need for me to spend the rest of my almost twenties comparing myself to other people. 

Truth is I'm on my own journey and I'm going at my own pace. (This is related to what I'm talking about I also have a fear of turning 20 this year this is one of my reasons why I feel left behind). Some people my age are already exceeding in life whether it's a job or getting or knowing how to drive (my dream car is a Beetle Volkswagen how I wish I learn how to drive in the next year). I'm getting off track, but you get the point I just needed to get this off my chest for the week as I stated on my last diary post I am a major overthinker lol.

Thanks for following me on my blog, I truly appreciate each and every single one of you I can't wait to give you my next update and staying tuned to you guys' blogs.

Sincerely,

Iriee๐Ÿฉฐ

 

 

Codes used for my blog๐Ÿฉฐ

 iPod html/java code copy the code below for Ipod also I've heard you can use google Gemini for creating codes (if you need more info type in chat and I will try my best to get back to you:)

<link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&amp;display=swap" rel="stylesheet" />


<!-- IPOD CONTAINER -->

<div class="ipod-widget">

  <div class="ipod">

    <div class="sparkle-overlay"></div>


    <div class="screen">

      <img id="cover" src="https://via.placeholder.com/150" alt="Album Cover" />

      <p id="track-title">Your Song Title</p>

      

      <div class="progress-container" id="progress-container">

        <div class="progress-bar" id="progress-bar"></div>

      </div>

      <div class="time-display">

        <span id="current-time">0:00</span> / <span id="duration-time">0:00</span>

      </div>

    </div>


    <div class="controls-wheel">

      <button id="play" class="ipod-btn btn-play-pause state-paused" title="Play/Pause">

        <span class="play-icon"></span>

      </button>

      <button id="prev" class="ipod-btn btn-prev"><span class="icon-prev"></span></button>

      <button id="next" class="ipod-btn btn-next"><span class="icon-next"></span></button>

    </div>


    <div id="player-container"><div id="player"></div></div>

  </div>

</div>


<!-- EASY CUSTOMIZATION SCRIPT -->

<script>

  // -----------------------------------------------------------

  // EDIT YOUR IPOD DETAILS HERE

  // -----------------------------------------------------------

  const YOUTUBE_VIDEO_ID = ""; // Put the YouTube video ID here

  const SONG_TITLE = "Your Song Title";

  const ALBUM_COVER_URL = "https://via.placeholder.com/150"; // Paste image URL here

  // -----------------------------------------------------------


  document.getElementById("cover").src = ALBUM_COVER_URL;

  document.getElementById("track-title").textContent = SONG_TITLE;


  let player, progressTimer;


  if (!window.YT) {

    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";

    document.getElementsByTagName('script')[0].parentNode.insertBefore(tag, document.getElementsByTagName('script')[0]);

  } else {

    onYouTubeIframeAPIReady();

  }


  function onYouTubeIframeAPIReady() {

    if (!YOUTUBE_VIDEO_ID) return;

    player = new YT.Player('player', {

      height: '1', width: '1', videoId: YOUTUBE_VIDEO_ID,

      playerVars: { 'autoplay': 0, 'controls': 0, 'playsinline': 1 },

      events: { 'onStateChange': onPlayerStateChange }

    });

  }


  function onPlayerStateChange(event) {

    const playBtn = document.getElementById("play");

    if (event.data === YT.PlayerState.PLAYING) {

      playBtn.classList.replace("state-paused", "state-playing");

      startTimer();

    } else {

      playBtn.classList.replace("state-playing", "state-paused");

      clearInterval(progressTimer);

    }

  }


  document.getElementById("play").onclick = () => {

    if (!player || !player.getPlayerState) return;

    player.getPlayerState() === YT.PlayerState.PLAYING ? player.pauseVideo() : player.playVideo();

  };


  function startTimer() {

    clearInterval(progressTimer);

    progressTimer = setInterval(() => {

      if (player && player.getCurrentTime) {

        const cur = player.getCurrentTime(), dur = player.getDuration();

        if (dur > 0) {

          document.getElementById("progress-bar").style.width = (cur / dur * 100) + "%";

          document.getElementById("current-time").textContent = formatTime(cur);

          document.getElementById("duration-time").textContent = formatTime(dur);

        }

      }

    }, 500);

  }


  function formatTime(sec) {

    const m = Math.floor(sec / 60), s = Math.floor(sec % 60);

    return m + ":" + (s < 10 ? "0" : "") + s;

  }


  document.getElementById("progress-container").onclick = function(e) {

    if (player && player.getDuration) {

      const rect = this.getBoundingClientRect(), dur = player.getDuration();

      if (dur > 0) player.seekTo(((e.clientX - rect.left) / rect.width) * dur, true);

    }

  };

</script>


<!-- IPOD STYLING (PLAIN WHITE BASE FOR CUSTOMIZATION) -->

<style>

/* CHANGE COLOR VARIABLES HERE */

:root {

  --ipod-bg: #ffffff;

  --ipod-border: #cccccc;

  --ipod-accent: #666666;

  --ipod-text: #333333;

  --screen-bg: #f9f9f9;

}


.ipod-widget { all: initial; display: block; font-family: sans-serif; }

.ipod-widget .ipod {

  width: 175px; 

  background-color: var(--ipod-bg);

  border-radius: 20px; 

  padding: 10px; 

  text-align: center; 

  margin: 15px auto;

  border: 3px solid var(--ipod-border); 

  position: relative; 

  overflow: hidden;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}

#player-container { position: absolute; top: -9999px; left: -9999px; }

.ipod-widget .screen {

  position: relative; z-index: 2; 

  background: var(--screen-bg); 

  border-radius: 14px;

  padding: 10px; 

  display: flex; 

  flex-direction: column; 

  align-items: center;

  gap: 6px; 

  border: 2px solid var(--ipod-border);

}

.ipod-widget .screen img {

  width: 95px; height: 95px; object-fit: cover; border-radius: 10px;

  border: 2px solid var(--ipod-border);

}

.ipod-widget .screen p {

  font-family: sans-serif; font-size: 11px; color: var(--ipod-text);

  margin: 4px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;

}

.ipod-widget .time-display { font-size: 9px; color: var(--ipod-text); font-family: monospace; font-weight: bold; }

.ipod-widget .progress-container {

  width: 100%; background: #e0e0e0; height: 6px; border-radius: 3px;

  cursor: pointer; position: relative; overflow: hidden; border: 1px solid var(--ipod-border);

}

.ipod-widget .progress-bar { background: var(--ipod-accent); height: 100%; width: 0%; }

.ipod-widget .controls-wheel {

  position: relative; z-index: 2; width: 125px; height: 125px; background: #ffffff;

  border-radius: 50%; margin: 15px auto 5px auto; border: 2.5px solid var(--ipod-border);

}

.ipod-widget .ipod-btn { position: absolute; border: none; background: transparent; cursor: pointer; }

.ipod-widget .btn-play-pause {

  top: 50%; left: 50%; transform: translate(-50%, -50%);

  background: #ffffff;

  border: 2px solid var(--ipod-border); width: 42px; height: 42px; border-radius: 50%;

}

.ipod-widget .state-paused .play-icon {

  display: block; width: 0; height: 0; border-top: 7px solid transparent;

  border-bottom: 7px solid transparent; border-left: 12px solid var(--ipod-accent); margin-left: 3px;

}

.ipod-widget .state-playing .play-icon {

  display: block; width: 10px; height: 12px; border-left: 3.5px solid var(--ipod-accent); border-right: 3.5px solid var(--ipod-accent);

}

.ipod-widget .btn-prev { top: 50%; left: 12px; transform: translateY(-50%); }

.ipod-widget .icon-prev {

  display: block; width: 0; height: 0; border-top: 5px solid transparent;

  border-bottom: 5px solid transparent; border-right: 9px solid var(--ipod-accent); position: relative;

}

.ipod-widget .icon-prev::before {

  content: ''; position: absolute; top: -5px; left: 8px; width: 0; height: 0;

  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 9px solid var(--ipod-accent);

}

.ipod-widget .btn-next { top: 50%; right: 12px; transform: translateY(-50%); }

.ipod-widget .icon-next {

  display: block; width: 0; height: 0; border-top: 5px solid transparent;

  border-bottom: 5px solid transparent; border-left: 9px solid var(--ipod-accent); position: relative;

}

.ipod-widget .icon-next::after {

  content: ''; position: absolute; top: -5px; right: 8px; width: 0; height: 0;

  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--ipod-accent);

}

</style>


I do have to redo some codes so you can use them in your own way I will update this post tomorrow so I can gather all my codes!



UPDATEEEEE๐Ÿฉฐ๐Ÿฉฐ๐Ÿ‚

Omgg Hii guys I've been inactive for a while I came with good news and bad news let's start with the good news shall we. Well good n...