<title>Special for Farhana</title>
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--glass: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0f0c29;
background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
overflow-x: hidden;
}
/* Login Screen Style */
#login-screen {
text-align: center;
padding: 40px;
background: var(--glass);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
width: 300px;
transition: 0.5s;
}
h2 { margin-bottom: 20px; color: #ff9a9e; }
input {
width: 80%;
padding: 12px;
border-radius: 25px;
border: none;
outline: none;
margin-bottom: 20px;
text-align: center;
font-size: 1.1rem;
background: rgba(255, 255, 255, 0.9);
}
button {
padding: 10px 30px;
border-radius: 25px;
border: none;
background: #ff6b6b;
color: white;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
button:hover { background: #ee5253; transform: scale(1.05); }
/* Main Content Style */
#main-content {
display: none;
width: 90%;
max-width: 800px;
height: 80vh;
overflow-y: auto;
padding: 30px;
background: var(--glass);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid var(--glass-border);
animation: fadeIn 1s ease-in-out;
}
.header-title {
text-align: center;
font-size: 2.5rem;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 30px;
}
.section-title {
color: #ffd700;
border-bottom: 2px solid #ffd700;
display: inline-block;
margin-top: 30px;
margin-bottom: 15px;
font-size: 1.5rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.name-card {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.3s;
cursor: pointer;
}
.name-card:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #ff6b6b; border-radius: 10px; }
</style>
<div id="login-screen">
<h2>Dear Farhana</h2>
<p>পাসওয়ার্ড দিন</p>
<input type="password" id="passInput" placeholder="Enter Password">
<br>
<button onclick="checkPass()">Open</button>
<p id="error" style="color: #ff4757; margin-top: 10px; display: none;">ভুল পাসওয়ার্ড! 🙄</p>
</div>
<div id="main-content">
<h1 class="header-title">Dear Farhana ❤️</h1>
<div class="section-title">🤣 মেগা ফানি টিজিং নাম:</div>
<div class="grid-container">
<div class="name-card">ঝাল ভূতনী</div>
<div class="name-card">নাটক আপা</div>
<div class="name-card">রাগী বিস্কুট</div>
<div class="name-card">বকবক ডাইনী</div>
<div class="name-card">হাসির ড্রাম</div>
<div class="name-card">ঝগড়াটে পরী</div>
<div class="name-card">নাটক মেশিন</div>
<div class="name-card">চিলি আপা</div>
<div class="name-card">রাগী টমেটো</div>
<div class="name-card">দুষ্টু পেঁপে</div>
<div class="name-card">বকবক কুইন</div>
<div class="name-card">হাসির প্যাকেট</div>
<div class="name-card">ঝাল আলু</div>
<div class="name-card">নাটক বোমা</div>
<div class="name-card">রাগী কিউটিক্যাট</div>
<div class="name-card">ফুচকা ডাইনী</div>
<div class="name-card">ঝগড়া স্পেশাল</div>
<div class="name-card">দুষ্টু লেবু</div>
<div class="name-card">নাটক রানি</div>
<div class="name-card">হাসির রকেট</div>
</div>
<div class="section-title">😂 আল্ট্রা হাসির সংস্করণ:</div>
<div class="grid-container">
<div class="name-card">ঝাল কচু</div>
<div class="name-card">বকবক মেশিন প্রো</div>
<div class="name-card">নাটক এক্সপ্রেস ৯৯৯</div>
<div class="name-card">রাগী চকলেট</div>
<div class="name-card">দুষ্টু বিস্কুট ২.০</div>
<div class="name-card">হাসির পটকা</div>
<div class="name-card">ঝাল কিউটি</div>
<div class="name-card">নাটক ডিপার্টমেন্ট</div>
<div class="name-card">রাগী ফুচকা</div>
<div class="name-card">দুষ্টু চা-পানি</div>
</div>
<div class="section-title">😜 সুপার ফানি:</div>
<div class="grid-container">
<div class="name-card">ঝাল কিউকাম্বার</div>
<div class="name-card">নাটক কোম্পানি</div>
<div class="name-card">হাসির বালতি</div>
<div class="name-card">বকবক প্যাকেট</div>
<div class="name-card">রাগী চিপস</div>
<div class="name-card">দুষ্টু পপকর্ন</div>
<div class="name-card">নাটক ফ্যাক্টরি</div>
<div class="name-card">হাসির গোলা</div>
<div class="name-card">ঝাল চকলেট চিলি</div>
<div class="name-card">বকবক আপা প্রো</div>
</div>
<p style="text-align: center; margin-top: 50px; opacity: 0.5;">Made with Love for Farhana 😜</p>
</div>
<script>
function checkPass() {
const pass = document.getElementById('passInput').value;
const loginScreen = document.getElementById('login-screen');
const mainContent = document.getElementById('main-content');
const error = document.getElementById('error');
if (pass === "00") {
loginScreen.style.display = 'none';
mainContent.style.display = 'block';
} else {
error.style.display = 'block';
document.getElementById('passInput').value = "";
}
}
// Enter key support
document.getElementById('passInput').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
checkPass();
}
});
</script>
