<!-- AD SYSTEM STYLING -->
<style>
#custom-ad-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 999999;
display: none;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.custom-ad-container {
position: relative;
background: #111;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
/* ---------------- MOBILE VIEW (Video Ads) ---------------- */
@media (max-width: 768px) {
.custom-ad-container {
width: 320px;
height: 568px;
}
.ad-btn {
padding: 8px 12px !important;
font-size: 11px !important;
gap: 5px !important;
}
.ad-buttons-wrapper {
gap: 10px !important;
}
.desktop-ad-content {
display: none !important;
}
}
/* ---------------- DESKTOP VIEW (Landscape Image Ad) ---------------- */
@media (min-width: 769px) {
.custom-ad-container {
width: 700px;
height: 394px;
}
.mobile-ad-content {
display: none !important;
}
}
/* Desktop Image Styles */
.desktop-ad-content {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
.desktop-ad-content img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Top-Left "Ads" Badge for Desktop */
.desktop-ad-badge {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
font-weight: bold;
z-index: 20;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
letter-spacing: 0.5px;
}
/* Desktop Close Icon (Appears after 12s in black shadow) */
.desktop-close-icon {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: none;
justify-content: center;
align-items: center;
font-size: 18px;
cursor: pointer;
z-index: 30;
box-shadow: 0 4px 10px rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.3);
}
.desktop-close-icon:hover {
background: rgba(0, 0, 0, 0.9);
}
/* Desktop 12-Second Progress Line */
.desktop-progress-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.3);
z-index: 15;
}
.desktop-progress-fill {
width: 0%;
height: 100%;
background: #ff9800;
}
/* Desktop Animated Get Premium Button */
.desktop-center-btn-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 25;
}
.animated-premium-btn {
padding: 14px 28px;
font-size: 16px;
font-weight: bold;
background-color: #ff9800;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0,0,0,0.3);
animation: bounceBtn 1.2s infinite alternate;
}
@keyframes bounceBtn {
0% { transform: scale(1); }
100% { transform: scale(1.08); }
}
/* Common Mobile Ad Elements */
.mobile-ad-content {
width: 100%;
height: 100%;
position: relative;
}
.mobile-ad-content video {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
background: #000;
}
/* Mobile Top-Left Indicators Group (Ads badge + 2-1 / 2-2 counter) */
.mobile-top-left-group {
position: absolute;
top: 15px;
left: 15px;
display: flex;
gap: 8px;
z-index: 20;
}
.mobile-ad-badge {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 8px;
font-size: 12px;
border-radius: 4px;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.ad-sequence-indicator {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
font-weight: bold;
letter-spacing: 1px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
}
.ad-audio-toggle {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
cursor: pointer;
z-index: 25;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ad-progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.3);
z-index: 15;
pointer-events: none;
}
.ad-progress-fill {
width: 0%;
height: 100%;
background: #ff9800;
transition: width 0.05s linear;
}
.ad-dark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 18;
display: none;
}
.ad-buttons-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
gap: 15px;
z-index: 20;
flex-direction: row;
white-space: nowrap;
}
.ad-btn {
padding: 12px 22px;
font-size: 14px;
font-weight: bold;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0,0,0,0.3);
transition: all 0.1s ease;
}
.btn-premium { background-color: #ff9800; color: #fff; }
.btn-close-ad { background-color: #f44336; color: #fff; }
</style>
<!-- AD SYSTEM HTML STRUCTURE -->
<div id="custom-ad-overlay">
<div class="custom-ad-container" id="adBox">
<!-- DESKTOP VIEW STRUCTURE (Landscape Image + Ads Badge + 12s timer) -->
<div class="desktop-ad-content" id="desktopAdContent">
<!-- Top-Left Ads Badge with FA icon -->
<div class="desktop-ad-badge">
<i class="fas fa-rectangle-ad"></i> Ads
</div>
<!-- Close Icon (Appears after 12s) -->
<div class="desktop-close-icon" id="desktopCloseIcon">
<i class="fas fa-times"></i>
</div>
<!-- Image Source -->
<img id="desktopImgElement" src="" alt="Desktop Ad" />
<!-- Dark Shadow Overlay after 12s -->
<div class="ad-dark-overlay" id="desktopDarkOverlay" style="display:none;"></div>
<!-- 12 Seconds Progress Line -->
<div class="desktop-progress-container">
<div class="desktop-progress-fill" id="desktopProgressFill"></div>
</div>
<!-- Center Animated Get Premium Button -->
<div class="desktop-center-btn-wrapper" id="desktopCenterBtnWrapper">
<a href="https://your-target-website.com" target="_blank" class="animated-premium-btn">
<i class="fas fa-crown"></i> Get Premium
</a>
</div>
</div>
<!-- MOBILE VIEW STRUCTURE (Video Reels + Ads Badge + 2-1/2-2 counter) -->
<div class="mobile-ad-content" id="mobileAdContent">
<div class="mobile-top-left-group">
<div class="mobile-ad-badge">
<i class="fas fa-rectangle-ad"></i> Ads
</div>
<div class="ad-sequence-indicator" id="adIndicator">2-1</div>
</div>
<div class="ad-audio-toggle" id="audioToggleBtn">
<i class="fas fa-volume-xmark" id="audioIcon"></i>
</div>
<video id="adVideoElement" playsinline preload="auto"></video>
<div class="ad-dark-overlay" id="adDarkOverlay"></div>
<div class="ad-progress-bar-container">
<div class="ad-progress-fill" id="adProgressFill"></div>
</div>
<div class="ad-buttons-wrapper" id="adButtonsContainer">
<a href="https://your-target-website.com" target="_blank" class="ad-btn btn-premium">
<i class="fas fa-crown"></i> Get Premium
</a>
<button class="ad-btn btn-close-ad" id="closeAdBtn">
<i class="fas fa-times"></i> Close
</button>
</div>
</div>
</div>
</div>
<!-- FontAwesome CDN for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- AD SYSTEM JAVASCRIPT LOGIC -->
<script>
const mobileVideo1 = "https://authors.maniebook.online/IMG_3489%20-%20Trim.mp4";
const mobileVideo2 = "https://authors.maniebook.online/IMG_3489%20-%20Trim.mp4";
const desktopAdImage = "https://picsum.photos/700/394";
const targetLink = "https://your-target-website.com";
let progressInterval = null;
let globalUserMutedState = true;
function startFullAdCycle() {
const overlay = document.getElementById("custom-ad-overlay");
overlay.style.display = "flex";
const isMobile = window.innerWidth <= 768;
if (isMobile) {
playAdSequence(1);
} else {
runDesktopAd();
}
}
// ----------- DESKTOP AD LOGIC -----------
function runDesktopAd() {
const imgEl = document.getElementById("desktopImgElement");
const progressFill = document.getElementById("desktopProgressFill");
const closeIcon = document.getElementById("desktopCloseIcon");
const darkOverlay = document.getElementById("desktopDarkOverlay");
const centerBtn = document.getElementById("desktopCenterBtnWrapper");
imgEl.src = desktopAdImage;
progressFill.style.width = "0%";
closeIcon.style.display = "none";
darkOverlay.style.display = "none";
centerBtn.style.display = "none";
imgEl.onclick = function() {
window.open(targetLink, '_blank');
};
let elapsed = 0;
const totalDuration = 12;
const intervalTime = 50;
const increment = (intervalTime / (totalDuration * 1000)) * 100;
clearInterval(progressInterval);
progressInterval = setInterval(() => {
elapsed += increment;
if (elapsed >= 100) {
elapsed = 100;
clearInterval(progressInterval);
closeIcon.style.display = "flex";
darkOverlay.style.display = "block";
centerBtn.style.display = "block";
}
progressFill.style.width = elapsed + "%";
}, intervalTime);
closeIcon.onclick = function() {
document.getElementById("custom-ad-overlay").style.display = "none";
setTimeout(() => {
startFullAdCycle();
}, 3 * 60 * 1000);
};
}
// ----------- MOBILE AD LOGIC -----------
function playAdSequence(adNum) {
const videoEl = document.getElementById("adVideoElement");
const indicator = document.getElementById("adIndicator");
const progressFill = document.getElementById("adProgressFill");
const buttonsContainer = document.getElementById("adButtonsContainer");
const darkOverlay = document.getElementById("adDarkOverlay");
const audioToggleBtn = document.getElementById("audioToggleBtn");
const audioIcon = document.getElementById("audioIcon");
buttonsContainer.style.display = "none";
darkOverlay.style.display = "none";
audioToggleBtn.style.display = "flex";
progressFill.style.width = "0%";
indicator.innerText = `2-${adNum}`;
videoEl.src = (adNum === 1) ? mobileVideo1 : mobileVideo2;
videoEl.load();
videoEl.muted = globalUserMutedState;
updateAudioIconUI(videoEl.muted);
videoEl.play().catch(() => {
videoEl.muted = true;
globalUserMutedState = true;
updateAudioIconUI(true);
videoEl.play();
});
audioToggleBtn.onclick = function(e) {
e.stopPropagation();
videoEl.muted = !videoEl.muted;
globalUserMutedState = videoEl.muted;
updateAudioIconUI(videoEl.muted);
};
function updateAudioIconUI(isMuted) {
audioIcon.className = isMuted ? "fas fa-volume-xmark" : "fas fa-volume-high";
}
videoEl.onclick = function() {
window.open(targetLink, '_blank');
};
clearInterval(progressInterval);
progressInterval = setInterval(() => {
if (videoEl.duration && !isNaN(videoEl.duration)) {
const percentage = (videoEl.currentTime / videoEl.duration) * 100;
progressFill.style.width = percentage + "%";
}
}, 30);
videoEl.onended = function() {
clearInterval(progressInterval);
progressFill.style.width = "100%";
if (adNum === 1) {
playAdSequence(2);
} else {
audioToggleBtn.style.display = "none";
darkOverlay.style.display = "block";
buttonsContainer.style.display = "flex";
}
};
}
document.getElementById("closeAdBtn").addEventListener("click", function() {
const overlay = document.getElementById("custom-ad-overlay");
const videoEl = document.getElementById("adVideoElement");
overlay.style.display = "none";
videoEl.pause();
videoEl.currentTime = 0;
setTimeout(() => {
startFullAdCycle();
}, 3 * 60 * 1000);
});
setTimeout(() => {
startFullAdCycle();
}, 10 * 1000);
</script>