✦ CODE SNIPPET
<div class="tt-offer-wrapper">
<div class="tt-offer-card" id="ttOfferCard">
<!-- Initial State: View Offer Button -->
<div id="ttInitialState" class="tt-offer-state tt-active">
<div class="tt-offer-badge">
<span class="tt-badge-dot"></span>
Exclusive Deal Available
</div>
<h3 class="tt-offer-title">Unlock Special Discount Offer</h3>
<p class="tt-offer-desc">Click below to start your verification check and get direct access to the promotional link.</p>
<button type="button" class="tt-btn tt-btn-primary" id="ttViewOfferBtn" aria-label="View Offer">
<span class="tt-btn-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
</span>
<span>View Offer</span>
<span class="tt-btn-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</span>
</button>
</div>
<!-- Countdown State -->
<div id="ttCountdownState" class="tt-offer-state">
<div class="tt-countdown-container">
<!-- SVG Circular Progress Ring -->
<div class="tt-progress-ring-wrap">
<svg class="tt-progress-ring" width="120" height="120" viewBox="0 0 120 120">
<circle class="tt-progress-ring-bg" cx="60" cy="60" r="52"></circle>
<circle class="tt-progress-ring-path" id="ttProgressPath" cx="60" cy="60" r="52"></circle>
</svg>
<div class="tt-countdown-number-wrap">
<span id="ttCountdownNum" class="tt-countdown-num">10</span>
</div>
</div>
<div class="tt-countdown-info">
<div class="tt-pulse-badge">
<span class="tt-pulse-dot"></span>
Preparing Your Secure Link
</div>
<h4 class="tt-countdown-heading">Your offer is preparing...</h4>
<p class="tt-countdown-sub">Please wait <span id="ttSecText">10 seconds</span></p>
</div>
</div>
</div>
<!-- Success / Continue State -->
<div id="ttSuccessState" class="tt-offer-state">
<div class="tt-success-icon-wrap">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<h3 class="tt-offer-title">Offer Is Ready!</h3>
<p class="tt-offer-desc">Your secure link has been generated successfully. Click below to proceed to the destination page.</p>
<button type="button" class="tt-btn tt-btn-success" id="ttContinueBtn" aria-label="Continue to Offer">
<span class="tt-btn-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</span>
<span>Continue to Offer</span>
<span class="tt-btn-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</span>
</button>
</div>
</div>
</div>
<style>
/* Scoped Premium SaaS Styling for Blogger */
.tt-offer-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 20px 10px;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.tt-offer-card {
position: relative;
width: 100%;
max-width: 440px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 0 15px rgba(99, 102, 241, 0.05);
border-radius: 24px;
padding: 32px 28px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tt-offer-card:hover {
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 0 25px rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}
/* States Control */
.tt-offer-state {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.tt-offer-state.tt-active {
display: block;
opacity: 1;
transform: translateY(0);
}
/* Typography & Badges */
.tt-offer-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(99, 102, 241, 0.08);
color: #4f46e5;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 16px;
border: 1px solid rgba(99, 102, 241, 0.15);
}
.tt-badge-dot {
width: 6px;
height: 6px;
background-color: #4f46e5;
border-radius: 50%;
box-shadow: 0 0 8px #4f46e5;
animation: ttPulseDot 2s infinite;
}
.tt-offer-title {
font-size: 22px;
font-weight: 800;
color: #0f172a;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
line-height: 1.3;
}
.tt-offer-desc {
font-size: 14px;
color: #64748b;
margin: 0 0 24px 0;
line-height: 1.5;
}
/* Premium Buttons */
.tt-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border: none;
outline: none;
text-decoration: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.tt-btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
color: #ffffff;
box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.4);
}
.tt-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.6);
background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
}
.tt-btn-success {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
color: #ffffff;
box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.4);
}
.tt-btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.6);
background: linear-gradient(135deg, #047857 0%, #059669 100%);
}
.tt-btn:active {
transform: translateY(1px) scale(0.98);
}
.tt-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.tt-btn:hover .tt-btn-icon {
transform: scale(1.1);
}
.tt-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
opacity: 0.8;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.tt-btn:hover .tt-btn-arrow {
transform: translateX(4px);
opacity: 1;
}
/* Countdown Sub-layout */
.tt-countdown-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px 0;
}
.tt-progress-ring-wrap {
position: relative;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.2));
}
.tt-progress-ring {
transform: rotate(-90deg);
width: 120px;
height: 120px;
}
.tt-progress-ring-bg {
fill: none;
stroke: #e2e8f0;
stroke-width: 8;
}
.tt-progress-ring-path {
fill: none;
stroke: url(#ttGradient);
stroke: #4f46e5;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 326.72; /* 2 * pi * 52 */
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
}
.tt-countdown-number-wrap {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tt-countdown-num {
font-size: 36px;
font-weight: 800;
color: #0f172a;
letter-spacing: -1px;
line-height: 1;
animation: ttScaleNum 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tt-pulse-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.08);
color: #059669;
padding: 4px 12px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
margin-bottom: 8px;
border: 1px solid rgba(16, 185, 129, 0.15);
}
.tt-pulse-dot {
width: 5px;
height: 5px;
background-color: #059669;
border-radius: 50%;
animation: ttPulseDot 1.5s infinite;
}
.tt-countdown-heading {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin: 0 0 6px 0;
}
.tt-countdown-sub {
font-size: 13px;
color: #64748b;
margin: 0;
}
#ttSecText {
font-weight: 600;
color: #4f46e5;
}
/* Success State Icon */
.tt-success-icon-wrap {
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.2));
color: #059669;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
animation: ttSuccessPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Animations */
@keyframes ttPulseDot {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
@keyframes ttScaleNum {
0% { transform: scale(1.2); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes ttSuccessPop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Mobile responsiveness safeguard */
@media (max-width: 480px) {
.tt-offer-card {
padding: 24px 18px;
border-radius: 20px;
}
.tt-offer-title {
font-size: 20px;
}
}
/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
.tt-offer-card, .tt-btn, .tt-offer-state, .tt-countdown-num, .tt-success-icon-wrap, .tt-progress-ring-path {
animation: none !important;
transition: none !important;
}
}
</style>
<script>
(function() {
// ==========================================
// CONFIGURATION: Set your destination URL here
// ==========================================
const offerURL = "https://example.com/offer";
// Element Selectors
const viewOfferBtn = document.getElementById('ttViewOfferBtn');
const continueBtn = document.getElementById('ttContinueBtn');
const initialState = document.getElementById('ttInitialState');
const countdownState = document.getElementById('ttCountdownState');
const successState = document.getElementById('ttSuccessState');
const countdownNum = document.getElementById('ttCountdownNum');
const secText = document.getElementById('ttSecText');
const progressPath = document.getElementById('ttProgressPath');
let timerInterval = null;
let isStarted = false;
const totalTime = 10;
const circumference = 326.72; // 2 * pi * 52
if (progressPath) {
progressPath.style.strokeDasharray = circumference;
progressPath.style.strokeDashoffset = 0;
}
function switchState(hideEl, showEl) {
hideEl.classList.remove('tt-active');
setTimeout(() => {
hideEl.style.display = 'none';
showEl.style.display = 'block';
// Force reflow
void showEl.offsetWidth;
showEl.classList.add('tt-active');
}, 300);
}
if (viewOfferBtn) {
viewOfferBtn.addEventListener('click', function() {
if (isStarted) return;
isStarted = true;
// Disable click actions immediately
viewOfferBtn.style.pointerEvents = 'none';
viewOfferBtn.style.opacity = '0.7';
// Transition from Initial -> Countdown State
switchState(initialState, countdownState);
let timeLeft = totalTime;
// Start timer sequence
timerInterval = setInterval(function() {
timeLeft--;
if (timeLeft > 0) {
countdownNum.textContent = timeLeft;
secText.textContent = timeLeft + (timeLeft === 1 ? ' second' : ' seconds');
// Update circular progress offset
if (progressPath) {
const offset = circumference - (timeLeft / totalTime) * circumference;
progressPath.style.strokeDashoffset = offset;
}
} else {
// Countdown finished
clearInterval(timerInterval);
countdownNum.textContent = '0';
if (progressPath) {
progressPath.style.strokeDashoffset = circumference;
}
// Transition from Countdown -> Success State
setTimeout(function() {
switchState(countdownState, successState);
}, 400);
}
}, 1000);
});
}
if (continueBtn) {
continueBtn.addEventListener('click', function() {
// Secure sanitization and navigation check
if (offerURL && typeof offerURL === 'string' && offerURL.trim() !== "" && offerURL !== "YOUR_OFFER_URL_HERE") {
// Open target offer URL safely
window.location.href = offerURL;
} else {
console.warn("Blogger Widget Notice: Please update the offerURL variable with a valid destination link.");
alert("Destination URL is not configured yet. Please update the offerURL variable.");
}
});
}
})();
</script>