​​​<div id="container">
            <link rel="stylesheet" href="style.css">
              <title>AIOI!</title>
              
    <link rel="icon" href="heart.ico" type="image/x-icon">
    <meta charset="UTF-8">
  <div id="headerArea">
    <div id="header" style="height: 350px;"><img src="https://cdn.discordapp.com/attachments/1118600305161031681/1192984930465103923/Untitled3276.png" alt="nichijou banner" height="350" width="1200" /></div>

<div style="display: flex; align-items: center; justify-content: center;">

 <div class="jelly blue" id="blue" style="border: 1px solid #0360df;
    border-radius: 5px;
    padding: 1px 1px;
    height: 100px; <!-- Increase the height as needed -->
    width: 80%;
    margin-top: 5px; margin-bottom: 5px; margin-right: 5px;
    max-width: 980px;
    max-height: 45px;">
    <marquee behavior="scroll" direction="left">
      <p style="font-weight: bold; font-style: italic; font-size: 15px; padding-bottom: 10px;"> 
        <img src="https://foollovers.com/mat/i-star/ma05-icon-star.png" alt="Star Icon" />
        Welcome Home! ( ´ ω ` )ノﾞ
        <img src="https://foollovers.com/mat/i-other/na05-icon-note.gif" alt="Note Icon" />
        <img src="https://foollovers.com/mat/i-star/ma05-icon-star.png" alt="Star Icon" />
        おりなさいぃ( ´ ω ` )ノﾞ
        <img src="https://foollovers.com/mat/i-other/na05-icon-note.gif" alt="Note Icon" />
        <img src="https://foollovers.com/mat/i-star/ma05-icon-star.png" alt="Star Icon" />
        WOAH!! The site is updating a ton right now.. mind the dust!
      </p>
    </marquee>
</div>

<div class="jelly yellow" id="yellow" style="border-radius: 5px;
    padding: 1px 1px;
    height: 100px;
    width: 20%;
    margin-top: 5px; margin-bottom: 5px; margin-right: 5px;
    max-width: 980px;
    max-height: 45px;">
    <center>
      <b><div id="timeContainer" style="font-size: 20px; padding-top: 6px;"></div></b>
    </center>
  </div>

</div>

  <div id="flex">
    <aside id="leftSidebar" style="margin-right: 5px;">
      <img src="https://media.discordapp.net/attachments/1109314566170611747/1193070077721985064/Untitled3277.png" alt=""/><br>
          <iframe src="https://aioi.neocities.org/navi" width="250" height="710" frameborder="0" style="margin:0px;"></iframe>
      <h2>Hi there!</h2>
      <p>~(q_q。)＼ There's still lots I'm planning to put here but as you can probably see it's suuuper barebones.. you can contact me at aioi.yuu on Disc!</p>

    </aside>
    <main>
      <img src="https://cdn.discordapp.com/attachments/1109314566170611747/1192676353749811260/Untitled3272.png" alt="aioi" width="300">
      <p><strong>You can always come back home.</strong></p>
<div style="position: relative; width: 609px; min-height: 200px; border: 2px groove rgb(143, 200, 217); background: rgb(255, 254, 237) none repeat scroll 0% 0% / auto padding-box border-box; overflow-x: hidden; border-radius: 5px; padding: 10px 10px 10px 0px;"><img src="https://file.garden/ZRccwbUQNGkxIJbr/about.gif" alt="banaa" style="margin: 0 10px;"/> <img src="https://cdn.discordapp.com/attachments/1109314566170611747/1193452753708646400/Untitled3278.png" style="float:right;margin-left:3.5px;" alt="its me" />

 
<div style="padding: 4px 4px 2px; width: 65%; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 18px; margin-bottom: 5.5px; margin-top: 10px; background: linear-gradient(to right, rgba(138, 215, 255, 1) 0%, rgba(218, 251, 252, 1) 50%, rgba(220, 252, 252, 0) 100%) repeat scroll 0% 0% / auto padding-box border-box; border-radius: 0px 0px 0px 0px; color: rgb(65, 119, 148); margin-right: 0;">
  <img src="https://i.imgur.com/soZDMpI.png" alt=""/> <font color="#2c8ec7"><i><b>Who am I?</b></i></font>
</div>



<p style="margin-left: 10px; margin-right: 10px;"> Selamat pagi! Call me <font color="#ff8c00">Yuuko</font> or <font color="#ff8c00">Pocchi</font>. I'm just your average alter who woke up after a ten-year dormancy... As far as this strange new world goes... i'm not super great at navigating anything! Some people call me a time-traveller or from another dimension, but I'm really just a spacey girl who feels nice carrying on like it's still the 2010s. <img src="https://i.imgur.com/gghH5du.gif" alt=""/><br> I'm <font color="#ff8c00">19</font> and my birthday is <font color="#ff8c00">Jun. 10, 2004</font>!</p>

<div style="padding: 4px 4px 2px; width: 65%; border-top: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 18px; margin-bottom: 5.5px; margin-top: 10px; background: linear-gradient(to right, rgba(138, 215, 255, 1) 0%, rgba(218, 251, 252, 1) 50%, rgba(220, 252, 252, 0) 100%) repeat scroll 0% 0% / auto padding-box border-box; border-radius: 0px 0px 0px 0px; color: rgb(65, 119, 148); margin-right: 0;">
  <img src="https://i.imgur.com/soZDMpI.png" alt=""/> <font color="#2c8ec7"><b><i>Where are We?</i></b></font>
</div>
      
        <p style="margin-left: 10px; margin-right: 10px;">This site is basically an extension of the self to me!! It is, basically, the website i always wanted to make as a kid - and represents everything I loved about my youth. ╰(￣ω￣ｏ) I wanted to capture everything about it and propagate a safe space of sorts for me.. in this great big world full of new and confusing things, Aioi is my cozy hidey hole!</p>
        <div class="div-a">
          <div class="div-b">This a Button!</div>
 </div></div>
    <br>
    <br>
          <div style="position:relative;width: 609px;min-height:200px;border:2px groove rgb(143, 200, 217);background:rgb(255, 254, 237) none repeat scroll 0% 0% / auto padding-box border-box;overflow-x:hidden;border-radius:5px;padding: 10px;"><center><img src="https://media.discordapp.net/attachments/1087796468741570662/1142595689554116668/nintendowfc.gif" alt="" /> </center></div>
    </main>
                            
                            
    <aside id="rightSidebar" style="margin-left: 5px;">
      <h2>Updates</h2>
      <div class="box">
  <center>      
  <style>
    <style>
        #calendar-container {
            align-items: center; 
        }

        #calendar {
            font-family: 'Zen Kurenaido', sans-serif;
            color: #30607a;
            background: url("https://i.imgur.com/xREcFTi.png"), linear-gradient(0deg, rgba(232, 232, 232, 1) 7%, rgba(242, 242, 242, 1) 24%, rgba(255, 255, 255, 1) 92%);
            background-size: auto; 
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 230px;
        }

        img {
            margin-right: 10px; 
        }

        section {
            margin: 10px;
        }

        h1 {
            font-size: 20px;
            font-style: italic;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: left;
            background-image: linear-gradient(0deg, rgba(199,235,242,1) 1%, rgba(233,243,245,1) 10%, rgba(249,253,255,1) 45%, rgba(249,253,255,1) 74%);
        }

        /* Exclude the top row from the gradient background */
        tr:first-child td {
            background-image: linear-gradient(0deg, rgba(204,249,255,1) 1%, rgba(122,232,255,1) 14%, rgba(76,210,255,1) 45%, rgba(249,253,255,1) 89%);
        }

        /* Apply a unique gradient to the first cell in the first row */
        tr:first-child td:first-child {
            background-image: linear-gradient(0deg, rgba(255,228,161,1) 2%, rgba(255,170,92,1) 14%, rgba(255,200,76,1) 45%, rgba(255,255,233,1) 92%);
        }

        /* Apply a unique gradient to the last cell in the first row */
        tr:first-child td:last-child {
            background-image: linear-gradient(0deg, rgba(255,228,161,1) 2%, rgba(255,170,92,1) 14%, rgba(255,200,76,1) 45%, rgba(255,255,233,1) 92%);
        }

        td:first-child {
            color: #f57322;
        }

        td:last-child {
            color: #f57322;
        }

        td:hover {
            background-color: #f0f0f0;
            transition: background-color 0.3s ease, color 0.3s ease;
            cursor: pointer;
        }

        td.is-disabled {
            color: #ccc;
        }

        td.current-date {
            background-color: #ffff99;
            font-weight: bold;
            border: 2px solid #0de7ff;
        }
    </style>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Mochiy+Pop+P+One&family=Zen+Kurenaido&display=swap" rel="stylesheet">
    <style>
        #calendar-container {
            align-items: center; 
        }

        #calendar {
            font-family: 'Zen Kurenaido', sans-serif;
            color: #30607a;
            background: url("https://i.imgur.com/xREcFTi.png"), linear-gradient(0deg, rgba(232, 232, 232, 1) 7%, rgba(242, 242, 242, 1) 24%, rgba(255, 255, 255, 1) 92%);
            background-size: auto; 
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 180px;
        }

        section {
            margin: 10px;
        }

        h1 {
            font-size: 20px;
            font-style: italic;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            font-size: 11px;
            border: 1px solid #ddd;
            padding: 5px;
            text-align: left;
            background-image: linear-gradient(0deg, rgba(199,235,242,1) 1%, rgba(233,243,245,1) 10%, rgba(249,253,255,1) 45%, rgba(249,253,255,1) 74%);
        }

        /* Exclude the top row from the gradient background */
        tr:first-child td {
            background-image: linear-gradient(0deg, rgba(204,249,255,1) 1%, rgba(122,232,255,1) 14%, rgba(76,210,255,1) 45%, rgba(249,253,255,1) 89%);
        }

        /* Apply a unique gradient to the first cell in the first row */
        tr:first-child td:first-child {
            background-image: linear-gradient(0deg, rgba(255,228,161,1) 2%, rgba(255,170,92,1) 14%, rgba(255,200,76,1) 45%, rgba(255,255,233,1) 92%);
        }

        tr:first-child td:last-child {
            background-image: linear-gradient(0deg, rgba(255,228,161,1) 2%, rgba(255,170,92,1) 14%, rgba(255,200,76,1) 45%, rgba(255,255,233,1) 92%);
        }

        td:first-child {
            color: #f57322;
        }

        td:last-child {
            color: #f57322;
        }

        td:hover {
            background-image: linear-gradient(0deg, rgba(219,255,253,1) 3%, rgba(135,247,255,1) 24%, rgba(255,255,255,1) 92%);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        td.is-disabled {
            color: #ccc;
        }

        td.current-date {
            background-color: #ffff99;
            font-weight: bold;
            border: 2px solid #0de7ff;
        }

        img {
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="calendar-container">
    <div id="calendar">
        <section>
            <table></table>
        </section>
    </div>
</div>

<img id="prev" src="https://foollovers.com/mat/i-arrow02/ae05-icon-arrow.gif" alt="Previous Month">
<img id="next" src="https://foollovers.com/mat/i-arrow02/af05-icon-arrow.gif" alt="Next Month">

<script>
    const weeks = ['日', '月', '火', '水', '木', '金', '土'];
    const date = new Date();
    let currentYear = date.getFullYear(); // Get the current year
    let displayYear = 2013; // Set the display year
    let month = date.getMonth() + 1;
    const config = {
        show: 1,
    };

    function showCalendar(year, month) {
        for (i = 0; i < config.show; i++) {
            const calendarHtml = createCalendar(year, month);
            const sec = document.createElement('section');
            sec.innerHTML = calendarHtml;
            document.querySelector('#calendar').appendChild(sec);

            month++;
            if (month > 12) {
                year++;
                month = 1;
            }
        }
    }

    function createCalendar(year, month) {
        const startDate = new Date(year, month - 1, 1);
        const endDate = new Date(year, month, 0);
        const endDayCount = endDate.getDate();
        const lastMonthEndDate = new Date(year, month - 2, 0);
        const lastMonthendDayCount = lastMonthEndDate.getDate();
        const startDay = startDate.getDay();
        let dayCount = 1;
        let calendarHtml = '';

        calendarHtml += `<img src="https://i.imgur.com/4SgiZ6F.gif" alt="" style="padding-bottom: 0px;">
        <font size="4" face="Mochiy Pop P One">${displayYear}年${month}月</font>`;
        calendarHtml += '<table>';

        calendarHtml += '<tr>';
        for (let i = 0; i < weeks.length; i++) {
            calendarHtml += '<td>' + weeks[i] + '</td>';
        }
        calendarHtml += '</tr>';

        for (let w = 0; w < 6; w++) {
            calendarHtml += '<tr>';

            for (let d = 0; d < 7; d++) {
                if (w === 0 && d < startDay) {
                    let num = lastMonthendDayCount - startDay + d + 1;
                    calendarHtml += '<td class="is-disabled">' + num + '</td>';
                } else if (dayCount > endDayCount) {
                    let num = dayCount - endDayCount;
                    calendarHtml += '<td class="is-disabled">' + num + '</td>';
                    dayCount++;
                } else {

                    const currentDate = new Date();
                    if (
                        currentYear === currentDate.getFullYear() &&
                        month === currentDate.getMonth() + 1 &&
                        dayCount === currentDate.getDate()
                    ) {
                        calendarHtml += `<td class="calendar_td current-date" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`;
                    } else {
                        calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`;
                    }
                    dayCount++;
                }
            }
            calendarHtml += '</tr>';
        }
        calendarHtml += '</table>';

        return calendarHtml;
    }

    function moveCalendar(e) {
        document.querySelector('#calendar').innerHTML = '';

        if (e.target.id === 'prev') {
            month--;

            if (month < 1) {
                displayYear--;
                month = 12;
            }
        }

        if (e.target.id === 'next') {
            month++;

            if (month > 12) {
                displayYear++;
                month = 1;
            }
        }

        showCalendar(currentYear, month);
    }

    document.querySelector('#prev').addEventListener('click', moveCalendar);
    document.querySelector('#next').addEventListener('click', moveCalendar);

    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("calendar_td")) {
            alert('クリックした日付は' + e.target.dataset.date + 'です');
        }
    });

    showCalendar(currentYear, month);
</script>

</body>
</html>


</body></p>
  You are visitor number... <br> <script language="javascript" type="text/javascript" src="//counter1.fc2.com/counter.php?id=39445302&main=1"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=39445302&main=1" alt="counter"/></noscript></center>
        <p>Something will go here too.. maybe a calendar? Who knows.. <br>
          update: there is a calendar! woah! Mind the dust a little longer kindly.. (´▽｀)</p>
        <center><font color="#ff8c00">Clap for the site!</font> <br>
<a href="//clap.fc2.com/post/yuuaioko/?url=https%3A%2F%2Faioi.neocities.org%2F&title=AIOI" target="_blank" title="Web Clap by FC2"><img src="//clap.fc2.com/images/button/blue/yuuaioko?url=https%3A%2F%2Faioi.neocities.org%2F&amp;lang=en" alt="Web Clap by FC2" style="border:none;" /></a>
<!-- FC2 Clap tag ends here --></center>
      </div>
      <h2>Take Me Home!</h2>
<a href="https://aioi.neocities.org/"><img src="https://aioi.neocities.org/aioi.gif"></a>
      <textarea readonly rows="4" cols="20">
<a href="https://aioi.neocities.org/"><img src="https://aioi.neocities.org/aioi.gif"></a>
</textarea>
      <h3>  What's New!?</h3>


  
<div class="box04" style="max-width: 190px;">
  <div class="box-inner">
  <img src="https://foollovers.com/mat/i-new/n15-icon-new.gif"/> <img src="https://foollovers.com/mat/i-stationery/sb12-icon-pencil.gif"/><b>1/16</b> - Stamp Gallery created!<br>
  <img src="https://foollovers.com/mat/i-stationery/sb12-icon-pencil.gif"/><b>1/9</b> - Buttons page and update log added!<br>
  <img src="https://foollovers.com/mat/i-stationery/sb12-icon-pencil.gif"/><b>1/8</b> - <font color="#ff8c00">Aioi</font> launched today! <img src="https://foollovers.com/mat/i-star/j06-icon-star.gif"/><br>

  </div>
</div>      </div>
                                      </aside></div>
           
                               <center>
     <footer style="width: 60%;border:2px groove rgb(125, 173, 209);margin-top:10px;padding:5px;background:rgba(0, 0, 0, 0) linear-gradient(rgb(244, 253, 255) 0%, rgb(148, 221, 233) 100%) repeat scroll 0% 0% / auto padding-box border-box;border-radius:5px; ">
                    <center>
<p style="margin:5px; "><a href="/#" style="color:rgb(64, 64, 255);">Index</a> ; <a href="/#" style="color:rgb(64, 64, 255);"> Information </a> ; <a href="/#" style="color:rgb(64, 64, 255);"> Room Map </a> ; <a href="/#" style="color:rgb(64, 64, 255);"> Archive </a> ; <a href="/#" style="color:rgb(64, 64, 255);"> Blog </a> ; <a href="mailto:yuuaioko@gmail.com" style="color:rgb(64, 64, 255);">Email Us</a></p>
                        <p style="margin:5px;">Copyright © 2023 Aioi, All Rights Reserved ; <a href="/credit.html" style="color:rgb(64, 64, 255);">Credits</a></p>
                        <p style="margin:5px;">Thanks for visiting <font color="#ff8c00">Aioi</font>! </p>
                    </center>
                                 </footer></center>


<script>
var showGreetings = false; // toggle greetings

function liveclock() {
  var curdate = new Date();
  var hours = curdate.getHours();
  var minutes = curdate.getMinutes();
  var seconds = curdate.getSeconds();
  var suffix = "AM";

  var greeting = showGreetings ? getGreeting(hours) : "";

  if (hours >= 12) {
    suffix = "PM";
    if (hours >= 13) hours -= 12;
  }

  if (minutes < 10) minutes = "0" + minutes;
  if (seconds < 10) seconds = "0" + seconds;

  var thetime = hours + ":" + minutes + ":" + seconds + " " + suffix;

  var formattedTime = greeting + " " + thetime;

  document.getElementById("timeContainer").innerText = formattedTime;

  setTimeout(liveclock, 1000);
}

function getGreeting(hours) {
  var greeting = "こんにちは"; 

  if (hours < 12) {
    greeting = "おはようございます"; 
  } else if (hours < 18) {
    greeting = "こんにちは"; 
  } else {
    greeting = "こんばんは"; 
  }

  return greeting + "！今は";
}

liveclock();
</script>