Skip to content

Commit d954abf

Browse files
author
Pravalika
committed
Fix HTML and JavaScript syntax errors for issue #1851 
1 parent 08d8c6b commit d954abf

File tree

1 file changed

+157
-0
lines changed

1 file changed

+157
-0
lines changed

‎date_question.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!DOCTYPE html>
2+
<html lang="tr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Sana Bir Sorum Var!</title>
7+
8+
<style>
9+
body {
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
margin: 0;
16+
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
17+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18+
text-align: center;
19+
overflow: hidden;
20+
}
21+
22+
#soru {
23+
font-size: 2.5em;
24+
margin-bottom: 40px;
25+
color: #444;
26+
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
27+
z-index: 1;
28+
}
29+
30+
.cevap-butonu {
31+
padding: 15px 30px;
32+
margin: 10px;
33+
font-size: 1.3em;
34+
cursor: pointer;
35+
border: 2px solid #fff;
36+
border-radius: 50px;
37+
transition: all 0.3s ease;
38+
font-weight: bold;
39+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
40+
z-index: 100;
41+
}
42+
43+
#evetBtn {
44+
background-color: #00b894;
45+
color: white;
46+
}
47+
48+
#evetBtn:hover {
49+
transform: scale(1.05);
50+
background-color: #00a082;
51+
}
52+
53+
#hayirBtn {
54+
background-color: #ff6b6b;
55+
color: white;
56+
position: absolute;
57+
transition: transform 0.1s ease-out;
58+
}
59+
60+
#mesaj-alani {
61+
position: fixed;
62+
top: 0;
63+
left: 0;
64+
width: 95%;
65+
height: 100%;
66+
display: none;
67+
flex-direction: column;
68+
justify-content: center;
69+
align-items: center;
70+
background-color: rgba(255, 255, 255, 0.95);
71+
z-index: 999;
72+
}
73+
74+
#sonMesaj {
75+
font-size: 3em;
76+
color: #e84393;
77+
text-align: center;
78+
padding: 20px;
79+
border-radius: 15px;
80+
background-color: #fff;
81+
box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
82+
animation: bounceIn 1s forwards;
83+
}
84+
85+
.kalp {
86+
position: absolute;
87+
font-size: 4em;
88+
color: #ff6b6b;
89+
animation: float 4s ease-in forwards;
90+
opacity: 0;
91+
}
92+
93+
@keyframes bounceIn {
94+
0% { transform: scale(0.5); opacity: 0; }
95+
95% { transform: scale(1); opacity: 1; }
96+
}
97+
98+
@keyframes float {
99+
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100+
100% { transform: translateY(-500px) rotate(30deg); opacity: 0; }
101+
}
102+
</style>
103+
</head>
104+
105+
<body>
106+
<div id="soru">Benimle date'e çıkar mısın 👉👈?</div>
107+
108+
<div id="butonlar" style="position: relative; width: 80vw; height: 100px; display: flex; justify-content: center; align-items: center;">
109+
<button id="evetBtn" class="cevap-butonu" onclick="evetCevabi()">EVET</button>
110+
<button id="hayirBtn" class="cevap-butonu" onclick="hayirCevabi()">HAYIR</button>
111+
</div>
112+
113+
<div id="mesaj-alani">
114+
<div id="sonMesaj"></div>
115+
</div>
116+
117+
<script>
118+
const hayirBtn = document.getElementById('hayirBtn');
119+
const evetBtn = document.getElementById('evetBtn');
120+
const mesajAlani = document.getElementById('mesaj-alani');
121+
const sonMesajDiv = document.getElementById('sonMesaj');
122+
const butonlarDiv = document.getElementById('butonlar');
123+
124+
function hayirCevabi() {
125+
const containerRect = butonlarDiv.getBoundingClientRect();
126+
const btnRect = hayirBtn.getBoundingClientRect();
127+
const maxX = containerRect.width - btnRect.width;
128+
const maxY = containerRect.height - btnRect.height;
129+
const newX = Math.random() * maxX;
130+
const newY = Math.random() * maxY;
131+
hayirBtn.style.transform = `translate(${newX}px, ${newY}px)`;
132+
}
133+
134+
function kalpOlustur(sayi) {
135+
for (let i = 0; i < sayi; i++) {
136+
const kalp = document.createElement('div');
137+
kalp.textContent = '🫶';
138+
kalp.className = 'kalp';
139+
kalp.style.left = Math.random() * 100 + 'vw';
140+
kalp.style.bottom = '-50px';
141+
kalp.style.animationDelay = Math.random() * 1 + 's';
142+
mesajAlani.appendChild(kalp);
143+
}
144+
}
145+
146+
function evetCevabi() {
147+
evetBtn.style.display = 'none';
148+
hayirBtn.style.display = 'none';
149+
document.getElementById('soru').style.display = 'none';
150+
mesajAlani.style.display = 'flex';
151+
kalpOlustur(20);
152+
sonMesajDiv.innerHTML = 'Ufak bir şaka yapmak istedim gül diye 🌹🥰<br><br>(Anlayışın için teşekkür ederim 😉)';
153+
setTimeout(() => {}, 3000);
154+
}
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)