1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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++;
}
});
}
});
}
|
