summaryrefslogtreecommitdiff
path: root/prj_Irene
diff options
context:
space:
mode:
authorjaerri <62021987+jaerri@users.noreply.github.com>2026-02-10 16:25:21 -0600
committerjaerri <62021987+jaerri@users.noreply.github.com>2026-02-10 16:25:21 -0600
commiteb62cf70a6791e5c8fd140f069e8b31b6886587a (patch)
treeffa1abfb12e27708907b3c18d10ee6336da3a36e /prj_Irene
Diffstat (limited to 'prj_Irene')
-rwxr-xr-xprj_Irene/LL.html42
-rwxr-xr-xprj_Irene/a.js334
-rwxr-xr-xprj_Irene/script_snu.js181
-rwxr-xr-xprj_Irene/sources/BERRY.pngbin0 -> 208469 bytes
-rwxr-xr-xprj_Irene/sources/MSGothic.ttfbin0 -> 4190172 bytes
-rwxr-xr-xprj_Irene/sources/confused.pngbin0 -> 354773 bytes
-rwxr-xr-xprj_Irene/sources/happy1.pngbin0 -> 309761 bytes
-rwxr-xr-xprj_Irene/sources/happy2.pngbin0 -> 312967 bytes
-rwxr-xr-xprj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.pngbin0 -> 94519 bytes
-rwxr-xr-xprj_Irene/sources/luvu.pngbin0 -> 123300 bytes
-rwxr-xr-xprj_Irene/sources/snu2.jpgbin0 -> 2006639 bytes
-rwxr-xr-xprj_Irene/sources/talking1.pngbin0 -> 315625 bytes
-rwxr-xr-xprj_Irene/styles_snu.css167
13 files changed, 724 insertions, 0 deletions
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files 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
--- /dev/null
+++ b/prj_Irene/sources/istockphoto-1204457395-612x612-removebg-preview.png
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files 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;
+}