<!-- Professional What's New Widget with Flipped Text -->
<div id="whats-new-container">
<style>
/* Main Wrapper */
#whats-new-container {
position: fixed;
right: -280px; /* Hide size */
top: 50%;
transform: translateY(-120%); /* Centered vertically */
display: flex;
align-items: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
z-index: 999999;
}
#whats-new-container.active {
right: 0;
}
/* Vertical Button */
.wn-trigger-btn {
background-color: #228B22;
color: #ffffff;
padding: 20px 12px;
cursor: pointer;
border: none;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
/* Text ko flip karne ke liye changes */
transform: rotate(180deg);
writing-mode: vertical-rl;
text-orientation: mixed;
border-radius: 0 10px 10px 0; /* Border radius flip kiya trigger ke liye */
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
/* Notification Badge - Fixed at the Top */
.wn-pulse-badge {
position: absolute;
/* Badge ko logic ke hisab se "niche" rakha hai
par button flipped hai isliye ye visual top par dikhega */
bottom: -12px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
background-color: #FF0000;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
animation: wn-blink 1s infinite alternate;
z-index: 10;
}
/* Number fixing */
.wn-pulse-badge span {
display: block;
font-size: 14px;
font-weight: bold;
transform: rotate(-90deg); /* Number ko seedha rakhne ke liye */
line-height: 1;
}
@keyframes wn-blink {
from { opacity: 1; transform: translateX(-50%) rotate(180deg) scale(1); }
to { opacity: 0.7; transform: translateX(-50%) rotate(180deg) scale(1.1); }
}
/* Content Panel */
.wn-content-panel {
width: 250px;
background: #ffffff;
padding: 15px;
box-shadow: -5px 0 20px rgba(0,0,0,0.15);
border-radius: 0 0 0 10px;
}
.wn-content-panel img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
/* Responsive */
@media screen and (max-width: 480px) {
#whats-new-container { right: -220px; }
.wn-content-panel { width: 190px; padding: 10px; }
.wn-trigger-btn { font-size: 12px; padding: 15px 8px; }
}
</style>
<!-- Trigger Button -->
<div class="wn-trigger-btn" onclick="toggleWhatsNew()">
<div class="wn-pulse-badge"><span>1</span></div>
What's New
</div>
<!-- Slide-in Panel -->
<div class="wn-content-panel">
<a href="mailto:maniebook.online@gmail.com?subject=Enquiry" target="_blank">
<img src="https://via.placeholder.com/250x350/007BFF/FFFFFF?text=Click+To+See+Updates" alt="Update">
</a>
</div>
<script>
function toggleWhatsNew() {
const container = document.getElementById('whats-new-container');
container.classList.toggle('active');
}
document.addEventListener('click', function(e) {
const container = document.getElementById('whats-new-container');
if (!container.contains(e.target) && container.classList.contains('active')) {
container.classList.remove('active');
}
});
</script>
</div>