1+ {{ $url := .Get "url" | default "#" }}
2+ {{ $title := .Get "title" | default "Visit Website" }}
3+ {{ $time := .Get "time" | default 5 }}
4+ {{ $modalId := printf "lb-modal-%d" (math.Counter) }}
5+
6+ {{ $adClient := .Get "ad_client" | default "ca-pub-7993314093599705" }}
7+ {{ $adSlot := .Get "ad_slot" | default "2681535439" }}
8+
9+ < button class ="lb-btn " data-modal-target ="#{{ $modalId }} "> {{ $title }}</ button >
10+
11+ < div class ="lb-modal-overlay " id ="{{ $modalId }} " data-url ="{{ $url }} " data-time ="{{ $time }} ">
12+ < div class ="lb-modal-content ">
13+ < h2 class ="lb-modal-title "> {{ $title }}</ h2 >
14+
15+ < div class ="lb-ad-container ">
16+ < ins class ="adsbygoogle "
17+ style ="display:block "
18+ data-ad-format ="fluid "
19+ data-ad-layout-key ="-64+c2-e-35+jb "
20+ data-ad-client ="{{ $adClient }} "
21+ data-ad-slot ="{{ $adSlot }} "> </ ins >
22+ </ div >
23+
24+ < p class ="lb-timer-message "> Please wait while we prepare your link...</ p >
25+
26+ < div class ="lb-timer-wrapper ">
27+ < svg class ="lb-timer-svg " width ="120 " height ="120 " viewBox ="0 0 120 120 ">
28+ < circle class ="lb-timer-bg " cx ="60 " cy ="60 " r ="54 " />
29+ < circle class ="lb-timer-progress " cx ="60 " cy ="60 " r ="54 " />
30+ </ svg >
31+ < span class ="lb-timer-text "> {{ $time }}</ span >
32+ </ div >
33+
34+ < a href ="{{ $url }} " class ="lb-btn lb-proceed-btn lb-hidden " target ="_blank " rel ="noopener noreferrer ">
35+ Go to Website
36+ </ a >
37+
38+ < button class ="lb-modal-close " aria-label ="Close modal "> ×</ button >
39+ </ div >
40+ </ div >
41+
42+ < style >
43+ /* assets/css/link-button.css */
44+
45+ /* ... (add this to your existing link-button.css file) ... */
46+
47+ /* --- Ad Container --- */
48+ .lb-ad-container {
49+ margin : 20px auto;
50+ width : 100% ;
51+ min-height : 90px ; /* Give space for the ad to load */
52+ display : flex;
53+ justify-content : center;
54+ align-items : center;
55+ /* Optional: shows the ad boundary before it loads */
56+ border : 1px dashed # ddd ;
57+ padding : 5px ;
58+ box-sizing : border-box;
59+ }
60+
61+ /* ... (rest of your CSS) ... */
62+
63+ /* assets/css/link-button.css */
64+
65+ : root {
66+ --lb-primary-color : # 563d7c ; /* A nice purple */
67+ --lb-primary-hover : # 463265 ;
68+ --lb-light-gray : # f0f0f0 ;
69+ --lb-dark-gray : # 4a4a4a ;
70+ --lb-modal-bg : # ffffff ;
71+ --lb-overlay-bg : rgba (0 , 0 , 0 , 0.65 );
72+ }
73+
74+ /* --- The Main & Proceed Buttons --- */
75+ .lb-btn {
76+ display : flex;
77+ align-items : center;
78+ justify-content : center;
79+ gap : 8px ;
80+ padding : 12px 24px ;
81+ font-size : 16px ;
82+ font-weight : 600 ;
83+ color : white;
84+ background-color : var (--lb-primary-color );
85+ border : none;
86+ border-radius : 8px ;
87+ cursor : pointer;
88+ text-decoration : none; /* For the <a> tag */
89+ transition : background-color 0.3s ease, transform 0.2s ease;
90+ box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
91+ margin-top : 1rem ;
92+ }
93+
94+ .lb-btn : hover {
95+ background-color : var (--lb-primary-hover );
96+ transform : translateY (-2px );
97+ }
98+
99+ /* --- The Modal --- */
100+ .lb-modal-overlay {
101+ position : fixed;
102+ top : 0 ;
103+ left : 0 ;
104+ width : 100% ;
105+ height : 100% ;
106+ background-color : var (--lb-overlay-bg );
107+ display : flex;
108+ justify-content : center;
109+ align-items : center;
110+ z-index : 1000 ;
111+ opacity : 0 ;
112+ visibility : hidden;
113+ transition : opacity 0.3s ease, visibility 0.3s ease;
114+ }
115+
116+ .lb-modal-overlay .active {
117+ opacity : 1 ;
118+ visibility : visible;
119+ }
120+
121+ .lb-modal-content {
122+ background-color : var (--lb-modal-bg );
123+ padding : 30px 40px ;
124+ border-radius : 12px ;
125+ box-shadow : 0 5px 20px rgba (0 , 0 , 0 , 0.2 );
126+ text-align : center;
127+ max-width : 400px ;
128+ width : 90% ;
129+ position : relative;
130+ transform : scale (0.9 );
131+ transition : transform 0.3s ease;
132+ }
133+
134+ .lb-modal-overlay .active .lb-modal-content {
135+ transform : scale (1 );
136+ }
137+
138+ .lb-modal-title {
139+ margin-top : 0 ;
140+ margin-bottom : 10px ;
141+ color : var (--lb-dark-gray );
142+ }
143+ .lb-timer-message {
144+ color : # 6c757d ;
145+ margin-bottom : 25px ;
146+ }
147+
148+ /* --- The Circular Timer --- */
149+ .lb-timer-wrapper {
150+ position : relative;
151+ width : 120px ;
152+ height : 120px ;
153+ margin : 0 auto;
154+ }
155+ .lb-timer-svg {
156+ transform : rotate (-90deg );
157+ }
158+ .lb-timer-bg {
159+ fill : none;
160+ stroke : var (--lb-light-gray );
161+ stroke-width : 12 ;
162+ }
163+ .lb-timer-progress {
164+ fill : none;
165+ stroke : var (--lb-primary-color );
166+ stroke-width : 12 ;
167+ stroke-linecap : round;
168+ stroke-dasharray : 339.29 ;
169+ stroke-dashoffset : 339.29 ;
170+ transition : stroke-dashoffset 1s linear;
171+ }
172+ .lb-timer-text {
173+ position : absolute;
174+ top : 50% ;
175+ left : 50% ;
176+ transform : translate (-50% , -50% );
177+ font-size : 36px ;
178+ font-weight : bold;
179+ color : var (--lb-primary-color );
180+ }
181+
182+ /* --- Utility and Animation classes --- */
183+ .lb-hidden {
184+ display : none !important ;
185+ }
186+
187+ .lb-proceed-btn {
188+ animation : fadeIn 0.5s ease-in-out;
189+ }
190+
191+ @keyframes fadeIn {
192+ from {
193+ opacity : 0 ;
194+ transform : translateY (10px );
195+ }
196+ to {
197+ opacity : 1 ;
198+ transform : translateY (0 );
199+ }
200+ }
201+
202+ /* --- Close Button --- */
203+ .lb-modal-close {
204+ position : absolute;
205+ top : 10px ;
206+ right : 15px ;
207+ background : none;
208+ border : none;
209+ font-size : 28px ;
210+ color : # aaa ;
211+ cursor : pointer;
212+ transition : color 0.2s ease;
213+ }
214+
215+ .lb-modal-close : hover {
216+ color : # 333 ;
217+ }
218+
219+ </ style >
220+
221+ < script >
222+ // assets/js/link-button.js
223+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
224+ let timerInterval = null ;
225+
226+ const startTimer = ( duration , modal ) => {
227+ // ... (This function remains the same as the previous version)
228+ let timer = duration ;
229+ const display = modal . querySelector ( '.lb-timer-text' ) ;
230+ const progressCircle = modal . querySelector ( '.lb-timer-progress' ) ;
231+ const circumference = progressCircle . r . baseVal . value * 2 * Math . PI ;
232+ progressCircle . style . strokeDasharray = circumference ;
233+
234+ const timerWrapper = modal . querySelector ( '.lb-timer-wrapper' ) ;
235+ const timerMessage = modal . querySelector ( '.lb-timer-message' ) ;
236+ const proceedButton = modal . querySelector ( '.lb-proceed-btn' ) ;
237+
238+ const updateTimer = ( ) => {
239+ display . textContent = timer ;
240+ const offset = circumference - ( timer / duration ) * circumference ;
241+ progressCircle . style . strokeDashoffset = offset ;
242+
243+ if ( -- timer < 0 ) {
244+ clearInterval ( timerInterval ) ;
245+ timerWrapper . classList . add ( 'lb-hidden' ) ;
246+ timerMessage . classList . add ( 'lb-hidden' ) ;
247+ proceedButton . classList . remove ( 'lb-hidden' ) ;
248+ }
249+ } ;
250+
251+ updateTimer ( ) ;
252+ timerInterval = setInterval ( updateTimer , 1000 ) ;
253+ } ;
254+
255+ const openModal = ( modal ) => {
256+ if ( ! modal ) return ;
257+ modal . classList . add ( 'active' ) ;
258+
259+ // --- NEW CODE: PUSH THE AD ---
260+ // Find the ad unit inside this specific modal
261+ const adInModal = modal . querySelector ( '.adsbygoogle' ) ;
262+ // Check if the ad has already been loaded to prevent errors
263+ if ( adInModal && adInModal . dataset . adStatus !== 'filled' ) {
264+ try {
265+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
266+ } catch ( e ) {
267+ console . error ( "AdSense error:" , e ) ;
268+ }
269+ }
270+ // --- END NEW CODE ---
271+
272+ // Reset the state every time the modal opens
273+ modal . querySelector ( '.lb-timer-wrapper' ) . classList . remove ( 'lb-hidden' ) ;
274+ modal . querySelector ( '.lb-timer-message' ) . classList . remove ( 'lb-hidden' ) ;
275+ modal . querySelector ( '.lb-proceed-btn' ) . classList . add ( 'lb-hidden' ) ;
276+
277+ const time = parseInt ( modal . dataset . time , 10 ) ;
278+ clearInterval ( timerInterval ) ;
279+ startTimer ( time , modal ) ;
280+ } ;
281+
282+ const closeModal = ( modal ) => {
283+ // ... (This function remains the same)
284+ if ( ! modal ) return ;
285+ modal . classList . remove ( 'active' ) ;
286+ clearInterval ( timerInterval ) ;
287+ } ;
288+
289+ // ... (All event listeners remain the same)
290+ document . querySelectorAll ( '.lb-btn[data-modal-target]' ) . forEach ( button => {
291+ button . addEventListener ( 'click' , ( ) => {
292+ const modal = document . querySelector ( button . dataset . modalTarget ) ;
293+ openModal ( modal ) ;
294+ } ) ;
295+ } ) ;
296+
297+ document . querySelectorAll ( '.lb-modal-overlay' ) . forEach ( overlay => {
298+ overlay . addEventListener ( 'click' , ( e ) => {
299+ if ( e . target === overlay ) {
300+ closeModal ( overlay ) ;
301+ }
302+ } ) ;
303+ } ) ;
304+
305+ document . querySelectorAll ( '.lb-modal-close' ) . forEach ( button => {
306+ button . addEventListener ( 'click' , ( ) => {
307+ const modal = button . closest ( '.lb-modal-overlay' ) ;
308+ closeModal ( modal ) ;
309+ } ) ;
310+ } ) ;
311+ } ) ;
312+ </ script >
0 commit comments