Scribd
Upload
10 views6 pages

Hassan

The document is an HTML file for an interactive web application titled 'For Hassan'. It includes a series of questions and buttons that guide the user through different steps, with visual elements like images and animations, and incorporates JavaScript for functionality. The application aims to engage the user in a playful manner, culminating in a romantic gesture.

Uploaded by

2026m.uddinhann
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views6 pages

Hassan

The document is an HTML file for an interactive web application titled 'For Hassan'. It includes a series of questions and buttons that guide the user through different steps, with visual elements like images and animations, and incorporates JavaScript for functionality. The application aims to engage the user in a playful manner, culminating in a romantic gesture.

Uploaded by

2026m.uddinhann
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Hassan</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@500;600&family=Lora&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
text-align: center;
background-color: #ffccff;
color: #ff3366;
padding: 20px;
overflow: hidden;
margin: 0;
}

.question {
font-size: 3em;
margin: 40px 0;
visibility: visible;
font-family: 'Lora', serif;
}

.btn {
padding: 15px 30px;
margin: 20px;
font-size: 2em;
cursor: pointer;
border: none;
border-radius: 20px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

.btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-yes { background-color: #66ff66; }


.btn-no { background-color: #ff4d4d; }

.hidden { display: none; }

#angry-cat {
opacity: 0;
transition: opacity 3s ease;
max-width: 245px;
}

#final-step img {
width: 33.33%; /* Set to one third of the original size */
max-width: 245px; /* Adjusted to one third of 736px */
margin: 0 auto;
display: block;
}

.answer-option {
cursor: pointer;
font-size: 2em;
padding: 20px 40px;
margin: 10px;
border-radius: 15px;
background-color: #ff99cc;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s, font-size 0.3s;
font-family: 'Lora', serif;
font-weight: 500;
}

.answer-option:hover {
transform: scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.fade-out {
animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
to { opacity: 0; }
}

#big-answer { font-size: 3.5em; }


#tiny-answer { font-size: 1.5em; }

.button-container {
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
position: relative;
top: 30%;
}

.output-container {
font-size: 2em;
margin-top: 30px;
text-align: center;
visibility: hidden;
}

/* Pop-up message box styling */


.popup-message {
background-color: rgba(255, 255, 255, 0.9); /* Light white background
*/
color: #ff3366;
padding: 25px;
border-radius: 25px; /* Rounded corners */
width: 70%;
max-width: 500px;
margin: 20px auto;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
font-size: 1.8em;
text-align: center;
position: fixed; /* Center it on the screen */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* Ensure it appears above other elements */
transition: opacity 1s ease;
}

.popup-message p {
margin: 10px 0;
}

/* Styling for input box */


#player-input-container {
margin-top: 20px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
display: inline-block;
}

#player-input {
font-size: 1.5em;
padding: 10px;
width: 60%;
margin-bottom: 20px;
border-radius: 10px;
border: 2px solid #ff3366;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#player-submit-btn {
font-size: 1.5em;
padding: 10px 20px;
border-radius: 10px;
background-color: #66ff66;
border: none;
cursor: pointer;
transition: transform 0.3s;
}

#player-submit-btn:hover {
transform: scale(1.1);
background-color: #4dbd4d;
}

.broken-heart {
font-size: 35vw;
opacity: 0;
animation: heartFadeOut 3s forwards;
color: #ff3366;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
@keyframes heartFadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

.button-container {
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
position: relative;
top: 30%;
}
</style>
</head>
<body>
<audio id="shhhh-audio" src="shhhh.mp3"></audio>

<div id="step1">
<div class="question">Are you Hassan?</div>
<div class="button-container">
<button class="btn btn-yes" onclick="checkHassan(true)">Yes</button>
<button class="btn btn-no" onclick="checkHassan(false)">No</button>
</div>
<img id="angry-cat" src="angry-cat.gif" alt="Angry Cat">
</div>

<div id="step2" class="hidden">


<div class="question">Who is your favourite player?</div>
<div id="player-input-container">
<input type="text" id="player-input" placeholder="Type here...">
<button id="player-submit-btn" onclick="checkPlayer()">Submit</button>
</div>
</div>

<div id="step3" class="hidden">


<div class="question">What is your favourite thing to do?</div>
<div class="button-container">
<button id="big-answer" class="answer-option"
onclick="checkActivity('Doing Muntakim')">Muntakim</button>
<button class="answer-option" onclick="checkActivity('Play with little
kids')">Play with little kids</button>
<button class="answer-option" onclick="checkActivity('Flirt with Mr
Hussain)">Flirt with Mr Hussain</button>
<button id="tiny-answer" class="answer-option"
onclick="checkActivity('None of the above.')">None of the above.</button>
</div>
</div>

<div id="step4" class="hidden">


<div class="question" id="forever-question">Will you be mine forever?</div>
<div class="button-container">
<button id="yes-btn" class="btn btn-yes"
onclick="finalYes()">Yes</button>
<button id="no-btn" class="btn btn-no" onmouseover="playShhhh()"
onclick="handleNo()">No</button>
</div>
</div>
<div id="final-step" class="hidden">
<img src="cat-with-rose.jpg" alt="Cat with Rose">
<button class="btn" onclick="acceptKiss()">Kiss me? 😘</button>
</div>

<div class="output-container" id="output">


<!-- Output messages will appear here -->
</div>

<div id="popup" class="hidden">


<!-- Pop-up messages will appear here -->
</div>

<script>
let noCount = 0;

function checkHassan(isHassan) {
if (!isHassan) {
document.getElementById('angry-cat').style.opacity = 1;
showOutput('Only Hassan is allowed here 😡');
} else {
document.querySelector('#step1').classList.add('fade-out');
setTimeout(() => moveToStep('step2'), 3000);
}
}

function checkPlayer() {
const player = document.getElementById('player-
input').value.toLowerCase();
if (player === 'salah') {
showPopup("He ain't winning Ballon Do'r btw");
moveToStep('step3');
} else {
showPopup("Nice try, but no LOL");
}
}

function checkActivity(choice) {
if (choice === 'None of the above.') {
document.body.style.backgroundColor = '#000';
document.body.innerHTML = '<div class="broken-heart">💔</div>';
setTimeout(() => location.reload(), 5000);
} else {
showPopup("I'd smash you any day Hassan 😉");
moveToStep('step4');
}
}

function handleNo() {
noCount++;
const noBtn = document.getElementById('no-btn');
const yesBtn = document.getElementById('yes-btn');
const messages = [
"Are you sure?", "Please?", "Really? 😭", "Why tho?", "You don't
mean it", "Last chance..."
];

document.getElementById('forever-question').innerText =
messages[Math.min(noCount, messages.length - 1)];

yesBtn.style.fontSize = `${1 + noCount * 2}em`;

if (noCount >= 5) {
noBtn.style.display = 'none';
}
}

function playShhhh() {
document.getElementById('shhhh-audio').play();
}

function finalYes() {
moveToStep('final-step');
}

function acceptKiss() {
showPopup("I am now officially your owner");
}

function showOutput(message) {
const outputContainer = document.getElementById('output');
outputContainer.innerHTML = `<div class="popup-message"><p>$
{message}</p></div>`;
outputContainer.style.visibility = 'visible';
setTimeout(() => {
outputContainer.style.visibility = 'hidden';
}, 3000); // Hide message after 3 seconds
}

function showPopup(message) {
const popup = document.getElementById('popup');
popup.innerHTML = `<div class="popup-message"><p>${message}</p></div>`;
popup.classList.remove('hidden');
setTimeout(() => {
popup.classList.add('hidden');
}, 3000); // Hide pop-up after 3 seconds
}

function moveToStep(stepId) {
document.querySelectorAll('div[id^="step"]').forEach(step => {
step.classList.add('hidden');
});
document.getElementById(stepId).classList.remove('hidden');
}
</script>
</body>
</html>

You might also like