48 files changed, 1247 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c0d2165
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+__pycache__
+.vs
+\ No newline at end of file
diff --git a/gallery.html b/gallery.html
new file mode 100755
index 0000000..feaf724
--- /dev/null
+++ b/gallery.html
@@ -0,0 +1,183 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Gallery</title>
+    <style>
+      @font-face {
+        font-family: "MSGothic";
+        src: url("./prj_Irene/sources/MSGothic.ttf");
+      }
+      body {
+        margin: 0;
+        font-family:
+          "MSGothic",
+          system-ui,
+          -apple-system,
+          Segoe UI,
+          Roboto,
+          Arial,
+          sans-serif;
+        background: #1a0507;
+        color: #ffe9ea;
+      }
+      header {
+        position: sticky;
+        top: 0;
+        background: rgba(40, 6, 9, 0.9);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid rgba(255, 91, 91, 0.25);
+        z-index: 10;
+      }
+      .wrap {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .home-link {
+        margin-left: auto;
+        color: #ffe9ea;
+        text-decoration: none;
+        border: 1px solid rgba(255, 91, 91, 0.4);
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: rgba(80, 10, 12, 0.5);
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 16px;
+      }
+      figure {
+        margin: 0;
+        background: #2a0b0f;
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 91, 91, 0.2);
+      }
+      figure img {
+        width: 100%;
+        height: 220px;
+        object-fit: cover;
+        display: block;
+      }
+      figcaption {
+        padding: 10px 12px;
+        font-size: 13px;
+        color: #ffb3b3;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="wrap title">
+        <h1>Gallery</h1>
+        <span>Memories</span>
+        <a class="home-link" href="index.html">Home</a>
+      </div>
+    </header>
+    <main class="wrap">
+      <div class="grid">
+        <figure>
+          <img src="./sources/IMG_2472.jpg" alt="IMG_2472" />
+          <figcaption>IMG_2472</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_2627.jpg" alt="IMG_2627" />
+          <figcaption>IMG_2627</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_4601.jpg" alt="IMG_4601" />
+          <figcaption>IMG_4601</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_2019.png" alt="IMG_2019" />
+          <figcaption>IMG_2019</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_4259.png" alt="IMG_4259" />
+          <figcaption>IMG_4259</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_7075.png" alt="IMG_7075" />
+          <figcaption>IMG_7075</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_8692.png" alt="IMG_8692" />
+          <figcaption>IMG_8692</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg"
+            alt="16624BFB"
+          />
+          <figcaption>16624BFB</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg"
+            alt="594CA747"
+          />
+          <figcaption>594CA747</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg"
+            alt="9836ABB1"
+          />
+          <figcaption>9836ABB1</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/4a2e4b58f7376976670b8057e2484304.jpg"
+            alt="4a2e4b58"
+          />
+          <figcaption>4a2e4b58</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg"
+            alt="8df101f0"
+          />
+          <figcaption>8df101f0</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/eb66054173105608075c7e9c0b540e62.jpg"
+            alt="eb660541"
+          />
+          <figcaption>eb660541</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg"
+            alt="fe56e5ad"
+          />
+          <figcaption>fe56e5ad</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/aaaajpg.jpg" alt="aaaajpg" />
+          <figcaption>aaaajpg</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/azuki.png" alt="azuki" />
+          <figcaption>azuki</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/saya.png" alt="saya" />
+          <figcaption>saya</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/sayaworld.jpg" alt="sayaworld" />
+          <figcaption>sayaworld</figcaption>
+        </figure>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..7b10f3e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IRENE 💌</title>
+    <link rel="icon" type="image/png" href="sources\irene_favicon.png" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <audio type="audio/mp3" src="sources\SABBATH.mp3" autoplay loop></audio>
+    <div id="lockscreen">
+      <div id="lockscreen-image">
+        <img src="sources\poro.png" alt="poro" />
+      </div>
+      <div id="password-box">
+        <input
+          type="password"
+          id="password"
+          placeholder="Who does Poro love the most?"
+        />
+      </div>
+    </div>
+    <div id="main-page">
+      <div id="background">
+        <img src="sources/sayaworld.jpg" alt="" />
+      </div>
+      <div id="main-page-left-saya">
+        <div>
+          <img src="sources\saya.png" alt="saya" />
+        </div>
+      </div>
+      <div id="right-main-page-container">
+        <div id="main-page-right-content">
+          <div class="direct-button" id="first-option">
+            <a href="thankletter.html">^_^</a>
+          </div>
+          <div class="direct-button" id="second-option">
+            <a href="gallery.html">@@</a>
+          </div>
+          <div class="direct-button" id="third-option">
+            <a href="prj_Irene/LL.html">ily</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/prj_Irene/LL.html b/prj_Irene/LL.html
new file mode 100755
index 0000000..db65be0
--- /dev/null
+++ b/prj_Irene/LL.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles_snu.css" />
+    <title>💌</title>
+  </head>
+  <body>
+    <div id="?">
+      <div id="lockscreen-container">
+        <img id="lock-icon" src="./sources/luvu.png" alt="?" />
+        <p id="only-for-you"></p>
+      </div>
+    </div>
+    <div id="love-irene-container">
+      <div class="home-button">
+        <a href="../index.html"
+          ><img src="./sources/luvu.png" alt="home-button"
+        /></a>
+      </div>
+      <div id="background">
+        <img src="./sources/snu2.jpg" alt="" />
+      </div>
+      <div id="top-margin"></div>
+      <div id="charater-box">
+        <div id="char">
+          <!-- this is where we insrrt character img using js -->
+        </div>
+      </div>
+      <div id="box"></div>
+      <div id="box-2">
+        <!-- we insrt text here -->
+      </div>
+      <div id="option-container">
+        <!-- there will be options for Irene to choose ( if there are) -->
+      </div>
+    </div>
+
+    <script src="./a.js"></script>
+  </body>
+</html>
diff --git a/prj_Irene/a.js b/prj_Irene/a.js
new file mode 100755
index 0000000..9e6af0d
--- /dev/null
+++ b/prj_Irene/a.js
@@ -0,0 +1,334 @@
+const opt_con_elem = document.getElementById("option-container");
+const frame_elem = document.getElementById("box");
+const box_elem = document.getElementById("box-2");
+const char_elem = document.getElementById("charater-box");
+const char_div = document.getElementById("char");
+let counter = 0;
+const iloveher = document.getElementById("only-for-you");
+const getout = document.getElementById("?");
+const lockicon = document.getElementById("lock-icon");
+const iloveirene = document.getElementById("lockscreen-container");
+const maincontent = document.getElementById("love-irene-container");
+
+clickIcon = document.createElement("img");
+clickIcon.src = "./sources/BERRY.png";
+clickIcon.style.marginLeft = "10px";
+clickIcon.style.display = "inline-block";
+clickIcon.id = "click-icon-image";
+clickIcon.toggle = false;
+let count = 0;
+
+// create a texter function
+// create a story runner function
+// create a continue event button
+// create a character changer
+
+function youarenotsupposedtobehere() {
+  lockicon.remove();
+  iloveirene.style.opacity = 1;
+  getout.appendChild(iloveirene);
+  const b = setInterval(() => {
+    iloveher.innerHTML += "get out ";
+    count++;
+    count %= 10;
+    iloveirene.style;
+    if (count % 5 == 0) {
+      iloveirene.style.backgroundColor = "red";
+    } else {
+      iloveirene.style.backgroundColor = "black";
+    }
+  }, 10);
+}
+
+function typeText(text, container = box_elem, speed = 30, tag = "div") {
+  return new Promise((resolve) => {
+    const textElem = document.createElement(tag);
+    textElem.className = "text";
+    textElem.innerHTML = "";
+    container.appendChild(textElem);
+
+    let i = 0;
+
+    const interval = setInterval(() => {
+      textElem.innerHTML += text[i];
+      i++;
+
+      if (i >= text.length) {
+        clearInterval(interval);
+        resolve(textElem);
+      }
+    }, speed);
+  });
+}
+
+function deleteText() {
+  a = document.querySelectorAll(".text").forEach((div) => div.remove());
+}
+
+function appendClickIcon() {
+  return new Promise((resolve) => {
+    box_elem.appendChild(clickIcon);
+
+    box_elem.addEventListener(
+      "click",
+      () => {
+        clickIcon.remove();
+        resolve();
+      },
+      { once: true },
+    );
+  });
+}
+
+function charChanger(picPath) {
+  let a = document.querySelector("#char > img");
+  if (a) {
+    a.remove();
+  }
+
+  const char = document.createElement("img");
+  char.src = picPath;
+  char.style.transform = "translateY(10%)";
+  char.style.opacity = "0";
+  char_div.appendChild(char);
+  setTimeout(() => {
+    char.style.transition = "transform 0.5s ease-out, opacity 0.5s ease-out";
+    char.style.transform = "translateY(0)";
+    char.style.opacity = "1";
+  }, 100);
+}
+
+function openAnimation() {
+  frame_elem.style.transition = "opacity 0.7s ease-out, transform 1s ease-out";
+  frame_elem.style.opacity = "0.7";
+  frame_elem.style.transform = "translate(-50%, 50%)";
+}
+
+const scene1 = [
+  { text: ' "Hey you there! Are you Irene?"' },
+  {
+    text: "She tilts her head slightly, studying you with curious eyes. Her smile is gentle, but there’s something deliberate in it — as if this meeting was planned long before now. You hesitate for a moment before answering.",
+  },
+];
+
+const scene1_Yes = [
+  { text: '"Y-Yes! That\'s me!" ' },
+  { text: "‎ " },
+  { text: "Her expression brightens, relief flickering across her face." },
+  {
+    text: "\"Good, I thought he wouldn't make it in time and I'd never be able to see you like I am right now. \" ",
+  },
+  { text: "She steps a little closer, lowering her voice." },
+  { text: "\“There’s something I need to tell you. Something… important.\”" },
+];
+
+const scene1_No = [
+  {
+    text: "She doesn’t answer right away. Her gaze stays on you, quiet and unreadable, as if she’s carefully tracing every detail of your face. The silence stretches, heavy but gentle, before her lips finally curve into a faint, tender smile.",
+  },
+  {
+    text: '"Then… why are you here at all? This place was never meant for you. It was only created for that girl… you weren’t supposed to step into it."',
+    speed: 40,
+  },
+];
+
+scene2 = [
+  {
+    text: "Saya turns her eyes away for a moment, staring into the distance as if she’s looking at a world far beyond this one. When she speaks again, her voice is calm, but there’s something deeply sincere beneath it.",
+  },
+];
+
+scene2_1 = [
+  {
+    text: '"You know… out there, there’s always someone who loves you without holding anything back. And that applies to you too."',
+  },
+  { text: '"I think you already know who I’m talking about."' },
+];
+scene2_1_1 = [{ text: '"Yes… I mean Poro."' }, { text: "‎ " }];
+scene2_1_2 = [
+  {
+    text: 'You let out a quiet breath, your shoulders dropping slightly as old feelings resurface. "Yeah… I know. But what about him? I really don’t want to talk about him anymore. He’s such a kid."',
+  },
+  { text: "‎ " },
+  {
+    text: "Saya listens without interrupting, her expression softening as you speak. She nods slowly, understanding clear in her eyes. ",
+  },
+  {
+    text: '"I won’t deny it. He’s childish, reckless, and sometimes unbearably annoying. I know he hurt you before. Every fight left memories that still ache when you think about them. When he told me everything… I was angry too. I really was."',
+  },
+  { text: "‎ " },
+  {
+    text: 'She pauses, fingers tightening slightly as if choosing her words carefully. "But Valentine’s Day is coming. Everyone seems to have someone by their side. And if he went as far as sending you to this place just so you could talk to me… then that means both of you must still be single, right now."',
+  },
+];
+
+scene2_2 = [
+  {
+    text: "Saya closes her eyes and takes a deep breath, inhaling slowly before letting it out. When she opens them again, there’s resolve there, mixed with hesitation.",
+  },
+  {
+    text: '"I have to admit it… he asked me to say this for him. He wanted me to ask you if you’d be his partner this Valentine’s Day. He wants you more than anything."',
+  },
+  {
+    text: 'She lets out a small, tired laugh, shaking her head slightly. "Honestly, I don’t even know why I agreed to help him. He’s annoying, stubborn, and way too emotional. But… still. Do you want him to be your partner this Valentine? It’s completely your choice. I just… want to see both of you happy."',
+  },
+];
+
+scene3_Yes = [
+  {
+    text: "Her eyes widen for a second before she breaks into a bright, genuine smile, one that she doesn’t bother trying to hide.",
+  },
+  {
+    text: '"Huh… really? I’m happy for him. And honestly, a little jealous too. You’re beautiful, you’re smart,  he  is the luckiest person I have every seen. That’s all I wanted to say. Thank you for coming here. And hey… you should tell him yourself. I really want to see that kid lose his mind when he finds out."',
+  },
+  { text: '"See you, bunny ^_^"' },
+];
+
+scene3_No = [
+  {
+    text: "Her smile softens, and for just a moment, regret flickers across her face before she gently hides it away.",
+  },
+  {
+    text: '"Oh… I understand. I really do. He’s not mature enough to be with you right now, and your feelings come first. Still, I’m glad I got to talk to you. You should tell him your decision yourself. He’ll respect it, even if it hurts. He won’t blame you. And even if you don’t care… just remember this—he loves you deeply, Irene."',
+  },
+  { text: '"Bye-bye ^_^"' },
+];
+
+async function playScene(scene) {
+  for (const line of scene) {
+    await typeText(line.text, box_elem, scene.speed ?? 30);
+  }
+}
+
+async function storyRunner() {
+  charChanger("./sources/happy2.png");
+
+  await appendClickIcon();
+  openAnimation();
+
+  charChanger("./sources/talking1.png");
+
+  await playScene(scene1);
+
+  const option1 = document.createElement("div");
+  option1.className = "option";
+  option1.innerText = "Yes";
+  option1.id = "option-1";
+
+  const option2 = document.createElement("div");
+  option2.className = "option";
+  option2.innerText = "No";
+  option2.id = "option-2";
+
+  opt_con_elem.appendChild(option1);
+  opt_con_elem.appendChild(option2);
+  option1.addEventListener("click", async () => {
+    localStorage.setItem("unlocked", true);
+
+    charChanger("./sources/happy2.png");
+    option1.remove();
+    option2.remove();
+
+    await playScene(scene1_Yes);
+    await appendClickIcon();
+
+    await playScene([{ text: '"What is it?" You asked.' }]);
+
+    await appendClickIcon();
+
+    deleteText();
+
+    await appendClickIcon();
+    await charChanger("./sources/confused.png");
+    await playScene(scene2);
+
+    await appendClickIcon();
+
+    await charChanger("./sources/talking1.png");
+    await playScene(scene2_1);
+
+    await appendClickIcon();
+    await playScene(scene2_1_1);
+    await appendClickIcon();
+
+    deleteText();
+    await appendClickIcon();
+    await playScene(scene2_1_2);
+
+    await appendClickIcon();
+
+    deleteText();
+    await appendClickIcon();
+    await charChanger("./sources/talking1.png");
+    await playScene(scene2_2);
+
+    const ILOVEYOUSOMUCH = document.createElement("div");
+    ILOVEYOUSOMUCH.className = "option";
+    ILOVEYOUSOMUCH.innerText = "Yes";
+
+    const stillloveyoutho = document.createElement("div");
+    stillloveyoutho.className = "option";
+    stillloveyoutho.innerText = "No";
+
+    opt_con_elem.appendChild(ILOVEYOUSOMUCH);
+    opt_con_elem.appendChild(stillloveyoutho);
+
+    ILOVEYOUSOMUCH.addEventListener("click", async () => {
+      stillloveyoutho.remove();
+      ILOVEYOUSOMUCH.remove();
+      await charChanger("./sources/happy1.png");
+      await deleteText();
+      await appendClickIcon();
+      await playScene(scene3_Yes);
+      await appendClickIcon();
+      window.location.href = "../index.html";
+    });
+    stillloveyoutho.addEventListener("click", async () => {
+      stillloveyoutho.remove();
+      ILOVEYOUSOMUCH.remove();
+      await charChanger("./sources/happy2.png");
+      await deleteText();
+      await appendClickIcon();
+      await playScene(scene3_No);
+      await appendClickIcon();
+      window.location.href = "../index.html";
+    });
+  });
+  option2.addEventListener("click", async () => {
+    localStorage.setItem("unlocked", false);
+
+    charChanger("./sources/confused.png");
+    option1.remove();
+    option2.remove();
+
+    await playScene(scene1_No);
+    youarenotsupposedtobehere();
+  });
+}
+
+lockicon.addEventListener("click", async () => {
+  console.log("Paw clicked");
+  console.log(localStorage.getItem("unlocked"));
+  lockicon.style.height = "300px";
+  lockicon.style.transition = "all 0.7s ease-out";
+  setTimeout(() => {
+    iloveirene.style.transition = "opacity 0.7s ease-out";
+    iloveirene.style.opacity = "0";
+    lockicon.style.opacity = "0";
+    setTimeout(() => {
+      iloveirene.remove();
+      lockicon.remove();
+      maincontent.style.display = "block";
+    }, 700);
+  }, 700);
+
+  setTimeout(() => {
+    frame_elem.style.transition =
+      "opacity 0.7s ease-out, transform 1s ease-out";
+    frame_elem.style.opacity = "0.7";
+    frame_elem.style.transform = "translate(-50%, 50%)";
+  }, 1400);
+  setTimeout(() => {
+    storyRunner();
+  }, 3000);
+});
diff --git a/prj_Irene/script_snu.js b/prj_Irene/script_snu.js
new file mode 100755
index 0000000..f6ab366
--- /dev/null
+++ b/prj_Irene/script_snu.js
@@ -0,0 +1,181 @@
+
+const opt_con_elem = document.getElementById("option-container");
+const frame_elem = document.getElementById("box");
+const box_elem = document.getElementById("box-2");
+const char_elem = document.getElementById("charater-box");
+const char_div = document.getElementById("char");
+let counter=0;  
+const lockicon = document.getElementById("lock-icon");
+const iloveirene = document.getElementById("lockscreen-container");
+
+const maincontent = document.getElementById("love-irene-container");
+
+function texter(text, speed = 30) {
+    return new Promise(resolve => {
+        let i = 0;
+        text_elem.innerHTML = "";
+
+        const interval = setInterval(() => {
+            text_elem.innerHTML += text[i];
+            i++;
+
+            if (i >= text.length) {
+                clearInterval(interval);
+                resolve(); // <-- tells the script "I'm done"
+            }
+        }, speed);
+    });
+}
+
+function typing_effect(text, elem, speed) {
+    let i = 0;
+    function type() {
+        elem.innerHTML += text[i];
+        i++;
+        if (i < text.length) {
+            setTimeout(type, speed);
+        }
+    }
+    type();
+}
+
+if(localStorage.getItem('unlocked')){
+    lockicon.addEventListener("click", () => {
+        console.log("Paw clicked");
+        console.log(localStorage.getItem('unlocked'));
+
+        lockicon.style.height = '300px';
+        lockicon.style.transition = 'all 0.7s ease-out';
+
+        setTimeout(() => {
+            iloveirene.style.transition = 'opacity 0.7s ease-out';
+            iloveirene.style.opacity = '0';
+            lockicon.style.opacity = '0';
+
+            setTimeout(() => {
+                iloveirene.remove();
+                lockicon.remove();
+                maincontent.style.display = 'block';
+            }, 700);
+        }, 700);
+
+        // initianlizing continue button and character
+        const char = document.createElement('img');
+        char.src = "./sources/happy2.png";
+        char.style.transform = "translateY(10%)";
+        char.style.opacity = "0";
+        
+        char_div.appendChild(char);
+        const clickIcon = document.createElement('img');
+        clickIcon.src = "./sources/BERRY.png";
+        clickIcon.a = true
+        clickIcon.style.marginLeft = "10px";
+        clickIcon.style.display = "inline-block";
+        clickIcon.id = "click-icon-image";
+
+        // load character and the continue button (i love you btw)
+        setTimeout(() => {
+            char.style.transition = "transform 0.5s ease-out, opacity 0.5s ease-out";
+            char.style.transform = "translateY(0)";
+            char.style.opacity = "1";
+            frame_elem.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
+            frame_elem.style.opacity = '0.7';
+            frame_elem.style.transform = 'translate(-50%, 50%)';
+            setTimeout(() => {
+                box_elem.appendChild(clickIcon);
+            }, 1200);
+
+        }, 1400);
+
+        // first script
+        if (clickIcon.a==true) {
+            box_elem.addEventListener("click", () => {
+                clickIcon.a = false;
+                if (counter==0) {
+                    console.log("Frame clicked");
+                    clickIcon.remove();
+
+                    let message = " \"Hey you there! Are you Irene?\"";
+                    texter(message, 10);
+                    setTimeout(() => {
+                        message = "She tilts her head slightly, studying you with curious eyes. Her smile is gentle, but there’s something deliberate in it — as if this meeting was planned long before now. You hesitate for a moment before answering.";
+                        texter(message, 10);
+                    }, message.length * 30);
+
+                    setTimeout(() => {
+                        // first deciding scene
+                        let option1 = document.createElement("div");
+                        option1.className = "option";
+                        option1.innerText = "Yes";
+                        option1.id = "option-1";
+
+                        let option2 = document.createElement("div");
+                        option2.className = "option";
+                        option2.innerText = "No";
+                        option2.id = "option-2";
+                        setTimeout(() => {
+                            opt_con_elem.appendChild(option1);
+                            opt_con_elem.appendChild(option2);
+                            
+                            // option1.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
+                            // option2.style.transition = 'opacity 0.7s ease-out, transform 1s ease-out';
+                            // option1.style.opacity = '0.7';
+                            // option2.style.opacity = '0.7';
+                            // option1.style.transform = 'translate(-50%, 50%)';
+                            // option2.style.transform = 'translate(-50%, 50%)';
+                        }, message.length * 30 + 50);
+
+                        option1.addEventListener("click", () => {
+                            localStorage.setItem('unlocked', true);
+                            option1.remove();
+                            option2.remove();
+                            clickIcon.remove();
+                            setTimeout(() => {
+                                message =" \"Y-Yes! That's me!\" ";
+                                texter(message);
+                                setTimeout(() => {
+                                    message="Her expression brightens, relief flickering across her face.";
+                                    texter(message);
+                                    setTimeout(() => {
+                                        message="\"Good, I thought he wouldn't make it in time and I'd never be able to see you like I am right now. \" ";
+                                        texter(message, 50);
+                                        setTimeout(() => {
+                                            message= "She steps a little closer, lowering her voice.";
+                                            texter(message, 30);
+                                            setTimeout(() => {
+                                                message = "\“There’s something I need to tell you. Something… important.\”"
+                                            },message.length * 30 + 500)
+                                        }, message.length * 30 + 1000);
+                                    }, message.length * 30 + 500);
+                                }, message.length * 30 + 500);
+                            }, message.length * 30 );
+                            console.log("No clicked");
+                        });
+
+                        option2.addEventListener("click", () => {
+                            option1.remove();
+                            option2.remove();
+                            clickIcon.remove();
+                            let message = "\"Oh. . .\" ";
+                            localStorage.setItem('unlocked', false);
+                            texter(message, 70);
+                                                
+                            setTimeout(() => {
+                                let nextMessage = "She stares at you for a while. Then, she smiles softly.";
+                                texter(nextMessage, 30);
+                                setTimeout(() => {
+                                    message = "\"Then. . . Why are you human here anyway. This is only for that girl. You are not supposed to be here.\" ";
+                                    texter(message, 50);
+                                }, nextMessage.length * 30 + 500);
+                            }, message.length * 30 + 500);
+                            console.log("NO clicked");
+
+                        });
+                    }, message.length * 30 + 100);
+
+                    counter++;
+                }
+            });
+        }
+    });
+}
diff --git a/prj_Irene/sources/BERRY.png b/prj_Irene/sources/BERRY.png
new file mode 100755
index 0000000..b36ce77
--- /dev/null
+++ b/prj_Irene/sources/BERRY.png
diff --git a/prj_Irene/sources/MSGothic.ttf b/prj_Irene/sources/MSGothic.ttf
new file mode 100755
index 0000000..0e703c9
--- /dev/null
+++ b/prj_Irene/sources/MSGothic.ttf
diff --git a/prj_Irene/sources/confused.png b/prj_Irene/sources/confused.png
new file mode 100755
index 0000000..270786e
--- /dev/null
+++ b/prj_Irene/sources/confused.png
diff --git a/prj_Irene/sources/happy1.png b/prj_Irene/sources/happy1.png
new file mode 100755
index 0000000..ed3d9a7
--- /dev/null
+++ b/prj_Irene/sources/happy1.png
diff --git a/prj_Irene/sources/happy2.png b/prj_Irene/sources/happy2.png
new file mode 100755
index 0000000..0373600
--- /dev/null
+++ b/prj_Irene/sources/happy2.png
diff --git a/prj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.png b/prj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.png
new file mode 100755
index 0000000..4ca5035
--- /dev/null
+++ b/prj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.png
diff --git a/prj_Irene/sources/luvu.png b/prj_Irene/sources/luvu.png
new file mode 100755
index 0000000..85529b3
--- /dev/null
+++ b/prj_Irene/sources/luvu.png
diff --git a/prj_Irene/sources/snu2.jpg b/prj_Irene/sources/snu2.jpg
new file mode 100755
index 0000000..e226189
--- /dev/null
+++ b/prj_Irene/sources/snu2.jpg
diff --git a/prj_Irene/sources/talking1.png b/prj_Irene/sources/talking1.png
new file mode 100755
index 0000000..02cae14
--- /dev/null
+++ b/prj_Irene/sources/talking1.png
diff --git a/prj_Irene/styles_snu.css b/prj_Irene/styles_snu.css
new file mode 100755
index 0000000..0f377b3
--- /dev/null
+++ b/prj_Irene/styles_snu.css
@@ -0,0 +1,167 @@
+@font-face {
+    font-family: sayafont;
+    src: url(./sources/MSGothic.ttf);
+}
+.home-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.home-button img {
+    width: 50px !important;
+    height: 50px !important;
+}
+
+
+
+
+.home-button:hover {
+    transform: scale(1.1);
+}
+
+.home-button:active {
+    transform: scale(0.95);
+}
+
+#lockscreen-container {
+    z-index: 3;
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    background-color: #000000;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+#lockscreen-container img {
+    height: 100px;
+    transition: all 0.7s ease;
+}
+
+#lockscreen-container img:hover {
+    cursor: pointer;
+    top: 2px;
+    transform: scale(2);
+}
+
+#background img{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+#charater-box{
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    max-width: 40%;
+    max-height: 80%;
+    overflow: hidden;
+}
+
+#box{
+    display: block;
+    position: fixed;
+    bottom: 60%;
+    left: 50%;
+    transform: translate(-50%, 60%);
+    width: 80%;
+    height: 70%;
+    background-color: rgba(0, 0, 0, 0.8);
+    opacity: 0; /*70%; */
+    border: none;
+    border-radius: 10px;
+    padding: 10px;
+    z-index: 2;
+
+}
+
+#box-2{
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background: none;
+    bottom: 60%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    width: 80%;
+    height: 70%;
+    border: none;
+    border-radius: 10px;
+    padding: 10px;
+    z-index: 2;
+}
+
+.text{
+    font-family: 'sayafont';
+    position: relative;
+    color: white;
+    font-size: 2.5em;
+    z-index: 3;
+    margin: 20px;
+    font-weight: 200;
+    margin: 10px 0 0 0;
+
+}
+
+#click-icon-image{
+    width: 30px;
+    height: 30px;
+    height: fit-content;
+}
+
+#only-for-you{
+    font-size: 45px;
+    color: red;
+}
+
+#option-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    bottom: 20px;
+    width: 60%;
+    height: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 20px;
+    z-index: 2;
+}
+
+.option {
+    font-family: 'sayafont';
+    font-size: 1.6em;
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    max-width: 30%;
+    height: 30%;
+    flex: 1;   
+    top: 10px;
+    padding: 10px 20px;
+    border: none;
+    opacity: 0.7;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #000000;
+    color: white;
+    transition: background-color 0.3s ease;
+    font-family: sans-serif;
+}
diff --git a/script.js b/script.js
new file mode 100755
index 0000000..19b17a6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+const unlockPhrases = ['irene', 'tien', 'zee', 'ren'];
+const inputField = document.getElementById('password');
+const lockscreen = document.getElementById('lockscreen');
+const mainpage = document.getElementById('main-page');
+const audio = document.querySelector('audio');
+if(inputField){
+    if (sessionStorage.getItem('unlocked') === 'true') {
+        lockscreen.style.display = 'none';
+        mainpage.style.zIndex = '1';
+    }
+    inputField.addEventListener('input', () => {
+        const typedInput = inputField.value.toLowerCase();
+
+        if (unlockPhrases.some(phrase => typedInput.includes(phrase))) {
+            sessionStorage.setItem('unlocked', 'true');
+            lockscreen.style.transition = 'opacity 0.5s ease-out';
+            lockscreen.style.opacity = '0';
+            setTimeout(() => {
+                lockscreen.remove();
+                mainpage.style.zIndex = '1';
+            }, 500);
+            audio.volume = 0;
+            audio.play();
+            
+            const fadeIn = setInterval(() => {
+                if (audio.volume < 0.2) {
+                    audio.volume += 0.005;
+                } else {
+                    clearInterval(fadeIn);
+                }
+            }, 100);
+            }
+        
+        if (typedInput.length > 20) inputField.value = '';
+    });
+
+}
+const thankLetterContainer = document.getElementById('thank-letter-container');
+const iloveirene = document.getElementById("lockscreen-container");
+const pawImage = document.getElementById("paw-lockscreen-image");
+if (pawImage) {
+    pawImage.addEventListener("click", () => {
+        console.log("Paw clicked");
+        pawImage.style.transition = 'all 0.7s ease-out';
+        pawImage.style.height = '300px';
+        
+        setTimeout(() => {
+            iloveirene.style.transition = 'opacity 0.7s ease-out';
+            iloveirene.style.opacity = '0';
+            pawImage.style.opacity = '0';
+            
+            setTimeout(() => {
+                iloveirene.remove();
+                pawImage.remove();
+                thankLetterContainer.style.display = 'flex';
+            }, 700);
+        }, 700);
+        
+    });
+}
diff --git a/sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg b/sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg
new file mode 100755
index 0000000..1e06764
--- /dev/null
+++ b/sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg
diff --git a/sources/4a2e4b58f7376976670b8057e2484304.jpg b/sources/4a2e4b58f7376976670b8057e2484304.jpg
new file mode 100755
index 0000000..04dd7ce
--- /dev/null
+++ b/sources/4a2e4b58f7376976670b8057e2484304.jpg
diff --git a/sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg b/sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg
new file mode 100755
index 0000000..20874d7
--- /dev/null
+++ b/sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg
diff --git a/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg b/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg
new file mode 100755
index 0000000..00a05fd
--- /dev/null
+++ b/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg
diff --git a/sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg b/sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg
new file mode 100755
index 0000000..951c990
--- /dev/null
+++ b/sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg
diff --git a/sources/IMG_1531.mov b/sources/IMG_1531.mov
new file mode 100755
index 0000000..b8101f6
--- /dev/null
+++ b/sources/IMG_1531.mov
diff --git a/sources/IMG_2019.png b/sources/IMG_2019.png
new file mode 100755
index 0000000..564f1ac
--- /dev/null
+++ b/sources/IMG_2019.png
diff --git a/sources/IMG_2472.jpg b/sources/IMG_2472.jpg
new file mode 100755
index 0000000..77c96d8
--- /dev/null
+++ b/sources/IMG_2472.jpg
diff --git a/sources/IMG_2627.jpg b/sources/IMG_2627.jpg
new file mode 100755
index 0000000..011a0c0
--- /dev/null
+++ b/sources/IMG_2627.jpg
diff --git a/sources/IMG_4259.png b/sources/IMG_4259.png
new file mode 100755
index 0000000..0c94add
--- /dev/null
+++ b/sources/IMG_4259.png
diff --git a/sources/IMG_4601.jpg b/sources/IMG_4601.jpg
new file mode 100755
index 0000000..73fe56a
--- /dev/null
+++ b/sources/IMG_4601.jpg
diff --git a/sources/IMG_7075.png b/sources/IMG_7075.png
new file mode 100755
index 0000000..5140c61
--- /dev/null
+++ b/sources/IMG_7075.png
diff --git a/sources/IMG_8692.png b/sources/IMG_8692.png
new file mode 100755
index 0000000..c671c5a
--- /dev/null
+++ b/sources/IMG_8692.png
diff --git a/sources/SABBATH.mp3 b/sources/SABBATH.mp3
new file mode 100755
index 0000000..73ed0a9
--- /dev/null
+++ b/sources/SABBATH.mp3
diff --git a/sources/Untitled127_20260119233746.png b/sources/Untitled127_20260119233746.png
new file mode 100755
index 0000000..486965b
--- /dev/null
+++ b/sources/Untitled127_20260119233746.png
diff --git a/sources/a.png b/sources/a.png
new file mode 100755
index 0000000..71f7cb9
--- /dev/null
+++ b/sources/a.png
diff --git a/sources/aaaajpg.jpg b/sources/aaaajpg.jpg
new file mode 100755
index 0000000..dfbd405
--- /dev/null
+++ b/sources/aaaajpg.jpg
diff --git a/sources/azuki.png b/sources/azuki.png
new file mode 100755
index 0000000..8360ac5
--- /dev/null
+++ b/sources/azuki.png
diff --git a/sources/azukibanner-bg.jpg b/sources/azukibanner-bg.jpg
new file mode 100755
index 0000000..613404b
--- /dev/null
+++ b/sources/azukibanner-bg.jpg
diff --git a/sources/buttoncover.png b/sources/buttoncover.png
new file mode 100755
index 0000000..855d478
--- /dev/null
+++ b/sources/buttoncover.png
diff --git a/sources/eb66054173105608075c7e9c0b540e62.jpg b/sources/eb66054173105608075c7e9c0b540e62.jpg
new file mode 100755
index 0000000..e75b737
--- /dev/null
+++ b/sources/eb66054173105608075c7e9c0b540e62.jpg
diff --git a/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg b/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg
new file mode 100755
index 0000000..bdb43b2
--- /dev/null
+++ b/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg
diff --git a/sources/image.png b/sources/image.png
new file mode 100755
index 0000000..de5352a
--- /dev/null
+++ b/sources/image.png
diff --git a/sources/image2.png b/sources/image2.png
new file mode 100755
index 0000000..88fb0a0
--- /dev/null
+++ b/sources/image2.png
diff --git a/sources/paw.png b/sources/paw.png
new file mode 100755
index 0000000..8bf4cc9
--- /dev/null
+++ b/sources/paw.png
diff --git a/sources/poro.png b/sources/poro.png
new file mode 100755
index 0000000..324b23c
--- /dev/null
+++ b/sources/poro.png
diff --git a/sources/saya.png b/sources/saya.png
new file mode 100755
index 0000000..ca56c5f
--- /dev/null
+++ b/sources/saya.png
diff --git a/sources/sayaworld.jpg b/sources/sayaworld.jpg
new file mode 100755
index 0000000..00a05fd
--- /dev/null
+++ b/sources/sayaworld.jpg
diff --git a/styles.css b/styles.css
new file mode 100755
index 0000000..1ed4d4e
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,184 @@
+body {
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+}
+
+.home-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.home-button:hover {
+    transform: scale(1.1);
+}
+
+.home-button:active {
+    transform: scale(0.95);
+}
+
+/* mainpage section */
+
+#lockscreen {
+    position:absolute;
+    display: flex;
+    background: #000000;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    img{
+        height: 100px;
+    }
+
+    input{
+        height: 20px;
+        width: 300px;
+        border-radius: 0px;
+        border: 1px solid red;
+    }
+}
+
+
+#background img {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+    z-index: -1;
+}
+
+#main-page {
+    z-index: -1;
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    height: 100vh;
+}
+
+#main-page-left-saya {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+}
+
+#main-page-left-saya div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+#main-page-left-saya div img {
+    height: 80%;
+}
+
+#right-main-page-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.direct-button {
+    background-color: rgb(46, 0, 0);
+    width: 450px;
+    height: 100px;
+    margin: 50px 200px 40px 80px;
+    border: 2px solid white;
+    border-radius: 15px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.direct-button a {
+    height: 100%;
+    color: white;
+    font-size: 34px;
+    text-decoration: none;
+    line-height: 80px;
+    display: block;
+    text-align: center;
+    background: none;
+}
+
+.direct-button:hover {
+    transform: translateY(-15px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+
+/* thank letter section */
+#lockscreen-container {
+    z-index: 3;
+    display: flex;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f8e7c3;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+#lockscreen-container img {
+    height: 100px;
+    transition: all 0.7s ease;
+}
+
+#lockscreen-container img:hover {
+    cursor: pointer;
+    top: 2px;
+    transform: scale(2);
+}
+
+
+#thank-letter-container {
+    background-color: #fdf2da;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+#azuki-left {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 0;
+    img{
+        height: 1000px;
+    }
+}
+
+#thank-letter-content {
+    z-index: 2;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    border: 2px solid white;
+    border-radius: 15px;
+    width:  60%;
+    height: fit-content;
+    padding: 20px;
+    color: white;
+    overflow-y: auto;
+}
+
+
+/* iloveyouIrene */
+
diff --git a/test.html b/test.html
new file mode 100755
index 0000000..9fb8541
--- /dev/null
+++ b/test.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <audio type="audio/mp3" src="SABBATH.mp3" autoplay loop></audio>
+</body>
+</html>
+\ No newline at end of file
diff --git a/thankletter.html b/thankletter.html
new file mode 100755
index 0000000..3b79d13
--- /dev/null
+++ b/thankletter.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>:3</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <style>
+        body {
+            background-color: #ecebe6;
+        }
+    </style>
+    <div id="lockscreen-container">
+        <img style="height: 50px;" id="paw-lockscreen-image" src="sources/paw.png" alt="?">
+    </div>
+    <div id="thank-letter-container">
+        <div class="home-button">
+            <a href="index.html"><img src="./sources/irenesymbol.png" alt="home-button"></a>
+        </div>
+        <div id="azuki-left">
+            <img src="./sources/azuki.png" alt="">
+        </div>
+        <div id="thank-letter-content">
+            <h1 style="color: #f8efc3; font-size: 50px;">I have a big fat appreciation for you!</h1>
+            <p style="font-size: 30px;">Dear <span style="color: #f8efc3; font-size: 40px;">Irene</span>,</p>
+            <p style="font-size: 25px;"><span style="margin-left: 20px;font-size: 30px;">W</span>e’ve known each other for more than a year and a half, and I just want you to know how incredibly grateful I am for everything you’ve done and are still doing for me ^^. You stepping into my life has been one of the most beautiful things that has ever happened to me. You’re the reason I keep going forward, even when life here gets really hard T-T. Everything feels lighter and easier just knowing that I have you by my side. Thank you for all the experiences, the support, and the love you’ve given me, it means more than I can ever explain. Being with you is always too comfy that makes me sometime go over the border  and piss you off, Tho, you are always tolerant towards my mistakes, and I’m really thankful for that endlessly. Sometimes, I feel like I haven’t done enough in return, but please know that my gratitude is endless ^-^’. Being with you is truly special. Every moment we’ve shared has been meaningful, and each one has shaped my perspective and changed me for the better. I cherish all of it so much. I hope we can stay together forever, and that nothing will ever come between us. Thank you a lot my little cutie bunni ^-^</p>
+            <p style="font-size: 30px;">Your little silly Poro</p>
+        </div>
+    </div>
+    <script src="script.js" defer></script>
+</body>
+</html>
+\ No newline at end of file