+
+
+
+
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
Binary files /dev/null and b/prj_Irene/sources/BERRY.png differ
diff --git a/prj_Irene/sources/MSGothic.ttf b/prj_Irene/sources/MSGothic.ttf
new file mode 100755
index 0000000..0e703c9
Binary files /dev/null and b/prj_Irene/sources/MSGothic.ttf differ
diff --git a/prj_Irene/sources/confused.png b/prj_Irene/sources/confused.png
new file mode 100755
index 0000000..270786e
Binary files /dev/null and b/prj_Irene/sources/confused.png differ
diff --git a/prj_Irene/sources/happy1.png b/prj_Irene/sources/happy1.png
new file mode 100755
index 0000000..ed3d9a7
Binary files /dev/null and b/prj_Irene/sources/happy1.png differ
diff --git a/prj_Irene/sources/happy2.png b/prj_Irene/sources/happy2.png
new file mode 100755
index 0000000..0373600
Binary files /dev/null and b/prj_Irene/sources/happy2.png differ
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
Binary files /dev/null and b/prj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.png differ
diff --git a/prj_Irene/sources/luvu.png b/prj_Irene/sources/luvu.png
new file mode 100755
index 0000000..85529b3
Binary files /dev/null and b/prj_Irene/sources/luvu.png differ
diff --git a/prj_Irene/sources/snu2.jpg b/prj_Irene/sources/snu2.jpg
new file mode 100755
index 0000000..e226189
Binary files /dev/null and b/prj_Irene/sources/snu2.jpg differ
diff --git a/prj_Irene/sources/talking1.png b/prj_Irene/sources/talking1.png
new file mode 100755
index 0000000..02cae14
Binary files /dev/null and b/prj_Irene/sources/talking1.png differ
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
Binary files /dev/null and b/sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg differ
diff --git a/sources/4a2e4b58f7376976670b8057e2484304.jpg b/sources/4a2e4b58f7376976670b8057e2484304.jpg
new file mode 100755
index 0000000..04dd7ce
Binary files /dev/null and b/sources/4a2e4b58f7376976670b8057e2484304.jpg differ
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
Binary files /dev/null and b/sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg differ
diff --git a/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg b/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg
new file mode 100755
index 0000000..00a05fd
Binary files /dev/null and b/sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg differ
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
Binary files /dev/null and b/sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg differ
diff --git a/sources/IMG_1531.mov b/sources/IMG_1531.mov
new file mode 100755
index 0000000..b8101f6
Binary files /dev/null and b/sources/IMG_1531.mov differ
diff --git a/sources/IMG_2019.png b/sources/IMG_2019.png
new file mode 100755
index 0000000..564f1ac
Binary files /dev/null and b/sources/IMG_2019.png differ
diff --git a/sources/IMG_2472.jpg b/sources/IMG_2472.jpg
new file mode 100755
index 0000000..77c96d8
Binary files /dev/null and b/sources/IMG_2472.jpg differ
diff --git a/sources/IMG_2627.jpg b/sources/IMG_2627.jpg
new file mode 100755
index 0000000..011a0c0
Binary files /dev/null and b/sources/IMG_2627.jpg differ
diff --git a/sources/IMG_4259.png b/sources/IMG_4259.png
new file mode 100755
index 0000000..0c94add
Binary files /dev/null and b/sources/IMG_4259.png differ
diff --git a/sources/IMG_4601.jpg b/sources/IMG_4601.jpg
new file mode 100755
index 0000000..73fe56a
Binary files /dev/null and b/sources/IMG_4601.jpg differ
diff --git a/sources/IMG_7075.png b/sources/IMG_7075.png
new file mode 100755
index 0000000..5140c61
Binary files /dev/null and b/sources/IMG_7075.png differ
diff --git a/sources/IMG_8692.png b/sources/IMG_8692.png
new file mode 100755
index 0000000..c671c5a
Binary files /dev/null and b/sources/IMG_8692.png differ
diff --git a/sources/SABBATH.mp3 b/sources/SABBATH.mp3
new file mode 100755
index 0000000..73ed0a9
Binary files /dev/null and b/sources/SABBATH.mp3 differ
diff --git a/sources/Untitled127_20260119233746.png b/sources/Untitled127_20260119233746.png
new file mode 100755
index 0000000..486965b
Binary files /dev/null and b/sources/Untitled127_20260119233746.png differ
diff --git a/sources/a.png b/sources/a.png
new file mode 100755
index 0000000..71f7cb9
Binary files /dev/null and b/sources/a.png differ
diff --git a/sources/aaaajpg.jpg b/sources/aaaajpg.jpg
new file mode 100755
index 0000000..dfbd405
Binary files /dev/null and b/sources/aaaajpg.jpg differ
diff --git a/sources/azuki.png b/sources/azuki.png
new file mode 100755
index 0000000..8360ac5
Binary files /dev/null and b/sources/azuki.png differ
diff --git a/sources/azukibanner-bg.jpg b/sources/azukibanner-bg.jpg
new file mode 100755
index 0000000..613404b
Binary files /dev/null and b/sources/azukibanner-bg.jpg differ
diff --git a/sources/buttoncover.png b/sources/buttoncover.png
new file mode 100755
index 0000000..855d478
Binary files /dev/null and b/sources/buttoncover.png differ
diff --git a/sources/eb66054173105608075c7e9c0b540e62.jpg b/sources/eb66054173105608075c7e9c0b540e62.jpg
new file mode 100755
index 0000000..e75b737
Binary files /dev/null and b/sources/eb66054173105608075c7e9c0b540e62.jpg differ
diff --git a/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg b/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg
new file mode 100755
index 0000000..bdb43b2
Binary files /dev/null and b/sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg differ
diff --git a/sources/image.png b/sources/image.png
new file mode 100755
index 0000000..de5352a
Binary files /dev/null and b/sources/image.png differ
diff --git a/sources/image2.png b/sources/image2.png
new file mode 100755
index 0000000..88fb0a0
Binary files /dev/null and b/sources/image2.png differ
diff --git a/sources/paw.png b/sources/paw.png
new file mode 100755
index 0000000..8bf4cc9
Binary files /dev/null and b/sources/paw.png differ
diff --git a/sources/poro.png b/sources/poro.png
new file mode 100755
index 0000000..324b23c
Binary files /dev/null and b/sources/poro.png differ
diff --git a/sources/saya.png b/sources/saya.png
new file mode 100755
index 0000000..ca56c5f
Binary files /dev/null and b/sources/saya.png differ
diff --git a/sources/sayaworld.jpg b/sources/sayaworld.jpg
new file mode 100755
index 0000000..00a05fd
Binary files /dev/null and b/sources/sayaworld.jpg differ
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 @@
+
+
+
+
+
+ Document
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+ :3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
I have a big fat appreciation for you!
+
Dear Irene,
+
We’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 ^-^
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 