1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
|
<?php
defined( 'ABSPATH' ) || die( 'Cheatin’ uh?' );
?>
<div id="imagify-pricing-modal" class="imagify-modal imagify-payment-modal hide-if-no-js" aria-hidden="false" role="dialog">
<div class="imagify-modal-content">
<div class="imagify-modal-main">
<?php
/**
* FIRST MODAL VIEW.
*/
?>
<div class="imagify-modal-views imagify-pre-checkout-view" id="imagify-pre-checkout-view" aria-hidden="false">
<div class="imagify-modal-section section-gray imagify-estimation-block imagify-analyzing">
<p class="imagify-modal-title">
<span class="imagify-numbers-calc"><?php esc_html_e( 'We analyzed your images', 'imagify' ); ?></span>
<span class="imagify-numbers-notcalc"><?php esc_html_e( 'We are analyzing your images', 'imagify' ); ?></span>
</p>
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>loader-balls.svg" width="77" height="48" alt="<?php esc_attr_e( 'Analyzing', 'imagify' ); ?>" class="imagify-loader">
<div class="imagify-modal-cols">
<div class="imagify-col">
<p>
<span class="imagify-border-styled">
<?php
$attachments_number = imagify_count_attachments() + Imagify_Files_Stats::count_all_files();
printf(
/* translators: %s is a formatted number (don't use %d). */
_n( 'You have %s original image', 'You have %s original images', $attachments_number, 'imagify' ),
'</span><span class="imagify-big-number">' . number_format_i18n( $attachments_number ) . '</span><span class="imagify-border-styled">'
);
?>
</span>
</p>
</div>
<div class="imagify-col">
<p class="imagify-iconed">
<i class="dashicons dashicons-images-alt2" aria-hidden="true"></i>
<?php
printf(
/* translators: %s is a formatted file size. */
esc_html__( 'You currently have %s of images in your library and folders.', 'imagify' ),
'<strong class="imagify-dark total-library-size">0</strong>'
);
?>
</p>
<p class="imagify-iconed">
<i class="dashicons dashicons-cloud" aria-hidden="true"></i>
<?php
printf(
/* translators: %s is a formatted file size. */
esc_html__( 'You upload around %s of images per month.', 'imagify' ),
'<strong class="imagify-dark average-month-size">0</strong>'
);
?>
</p>
</div>
</div>
</div><!-- .imagify-modal-section -->
<?php $this->print_template( 'part-discount-banner' ); ?>
<div class="imagify-modal-section imagify-pre-checkout-offers">
<p class="imagify-modal-title">
<span class="imagify-not-enough-title"><?php esc_html_e( 'Our recommendation for you', 'imagify' ); ?></span>
<span class="imagify-enough-title"><?php esc_html_e( 'The free plan is enough to optimize your images', 'imagify' ); ?></span>
<br/><span class="imagify-inner-sub-title"><?php esc_html_e( 'Based on your recent upload usage.', 'imagify' ); ?></span>
</p>
<div class="imagify-offer-line imagify-offer-monthly imagify-offer-selected imagify-month-selected" data-offer='{"lite":{"id":3,"name":"Lite","data":1073741824,"dataf":"1 GB","imgs":5000,"prices":{"monthly":4.99,"yearly":4.16,"add":4}}}'>
<div class="imagify-offer-header">
<p class="imagify-offer-title imagify-switch-my">
<span aria-hidden="false" class="imagify-monthly"><?php esc_html_e( 'Subscribe to a monthly plan', 'imagify' ); ?></span>
<span aria-hidden="true" class="imagify-yearly"><?php esc_html_e( 'Subscribe to a yearly plan', 'imagify' ); ?></span>
</p>
<div class="imagify-inline-options imagify-radio-line">
<input id="imagify-subscription-monthly" type="radio" value="monthly" name="plan-subscription" checked="checked">
<label for="imagify-subscription-monthly"><?php esc_html_e( 'Monthly', 'imagify' ); ?></label>
<input id="imagify-subscription-yearly" type="radio" value="yearly" name="plan-subscription">
<label for="imagify-subscription-yearly"><?php esc_html_e( 'Yearly', 'imagify' ); ?><span class="imagify-2-free"><?php esc_html_e( '2 months free', 'imagify' ); ?></span></label>
</div><!-- .imagify-radio-line -->
</div><!-- .imagify-offer-header -->
<div class="imagify-offer-content imagify-flex-table">
<div class="imagify-col-checkbox">
<input type="checkbox" name="imagify-offer" id="imagify-offer-1gb" value="1Gb" checked="checked" class="imagify-checkbox medium">
<label for="imagify-offer-1gb">
<span class="imagify-the-offer">
<span class="imagify-offer-size">1 GB</span>
<span class="imagify-offer-by"><?php esc_html_e( '/month', 'imagify' ); ?></span>
</span>
<span class="imagify-approx">
<?php
printf(
/* translators: %s is a formatted number (don't use %d). */
esc_html__( 'approx: %s images', 'imagify' ),
'<span class="imagify-approx-nb">' . number_format_i18n( 5000 ) . '</span>'
);
?>
</span>
</label>
</div>
<div class="imagify-col-price imagify-flex-table">
<span class="imagify-price-block">
<span class="imagify-dollars">$</span>
<span class="imagify-number-block">
<span class="imagify-switch-my">
<span class="imagify-monthly" aria-hidden="false">
<span class="imagify-price-big">3</span>
<span class="imagify-price-mini">.99</span>
</span>
<span class="imagify-yearly" aria-hidden="true">
<span class="imagify-price-big">3</span>
<span class="imagify-price-mini">.16</span>
</span>
</span>
<span class="imagify-price-by"><?php esc_html_e( '/month', 'imagify' ); ?></span>
</span>
</span>
<p class="imagify-price-complement">
<?php
printf(
/* translators: %s is a formatted price. */
__( '%s per<br>additional Gb', 'imagify' ),
'<span class="imagify-price-add-data"></span>'
);
?>
</p>
</div>
<div class="imagify-col-other-actions">
<a href="#imagify-plans-selection-view" class="imagify-choose-another-plan" data-imagify-choose="plan"><?php esc_html_e( 'Choose another plan', 'imagify' ); ?></a>
</div>
</div><!-- .imagify-offer-content -->
</div><!-- .imagify-offer-line -->
<div class="imagify-offer-line imagify-offer-onetime" data-offer='{"recommended":{"id":999,"name":"Customized","data":3000001337,"dataf":"3 GB","imgs":54634,"price":28.98}}'>
<div class="imagify-offer-header">
<p class="imagify-offer-title">
<?php esc_html_e( 'Optimize the images you already have with a One Time plan', 'imagify' ); ?>
</p>
</div><!-- .imagify-offer-header -->
<div class="imagify-offer-content imagify-flex-table">
<div class="imagify-col-checkbox">
<input type="checkbox" name="imagify-offer" id="imagify-offer-custom" value="1Gb" checked="checked" class="imagify-checkbox medium">
<label for="imagify-offer-custom">
<span class="imagify-the-offer">
<span class="imagify-offer-size">3 GB</span>
</span>
<span class="imagify-approx">
<?php
printf(
/* translators: %s is a formatted number (don't use %d). */
esc_html__( 'approx: %s images', 'imagify' ),
'<span class="imagify-approx-nb">' . number_format_i18n( 54000 ) . '</span>'
);
?>
</span>
</label>
</div>
<div class="imagify-col-price imagify-flex-table">
<span class="imagify-price-block">
<span class="imagify-dollars">$</span>
<span class="imagify-number-block">
<span class="imagify-price-big"></span>
<span class="imagify-price-mini"></span>
</span>
</span>
</div>
<div class="imagify-col-other-actions">
<a href="#imagify-plans-selection-view" class="imagify-choose-another-plan" data-imagify-choose="onetime"><?php esc_html_e( 'Choose another plan', 'imagify' ); ?></a>
</div>
</div><!-- .imagify-offer-content -->
</div><!-- .imagify-offer-line -->
<div class="imagify-submit-line">
<div class="imagify-coupon-section">
<p class="imagify-coupon-text">
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>loader-balls.svg" width="60" height="36" alt="<?php esc_attr_e( 'Checking Coupon', 'imagify' ); ?>" class="imagify-coupon-loader">
<label for="imagify-coupon-code"><?php _e( 'If you have a <strong>coupon code</strong><br> use it here:', 'imagify' ); ?></label>
</p>
<p class="imagify-coupon-input">
<input type="text" class="imagify-coupon-code" name="imagify-coupon-code" id="imagify-coupon-code" value="" placeholder="<?php _e( 'Coupon Code', 'imagify' ); ?>" autocomplete="off">
<button type="button" class="button button-secondary imagify-button-secondary" id="imagify-coupon-validate"><?php _e( 'OK' ); ?></button>
</p>
</div>
<div class="imagify-submit-section">
<button type="button" class="button button-secondary imagify-button-secondary" id="imagify-modal-checkout-btn">
<i class="dashicons dashicons-cart" aria-hidden="true"></i>
<?php _e( 'Checkout', 'imagify' ); ?>
</button>
</div>
</div>
<p class="imagify-footer-lines"><?php esc_html_e( 'Monthly plans come with credits which are renewed every month. The billing happens automatically each month or year, depending on which billing period you choose.', 'imagify' ); ?></p>
</div>
</div><!-- .imagify-pre-checkout-view -->
<?php
/**
* SECOND MODAL VIEW.
*/
?>
<div class="imagify-modal-views imagify-plans-selection-view" id="imagify-plans-selection-view" aria-hidden="true">
<p class="imagify-modal-title"><?php _e( 'Choose a plan', 'imagify' ); ?></p>
<ul class="imagify-tabs" role="tablist">
<li class="imagify-tab imagify-current">
<a href="#imagify-pricing-tab-monthly" role="tab" aria-controls="imagify-pricing-tab-monthly" aria-selected="true">
<?php esc_html_e( 'Monthly Plans', 'imagify' ); ?>
</a>
</li>
<li class="imagify-tab">
<a href="#imagify-pricing-tab-onetime" role="tab" aria-controls="imagify-pricing-tab-onetime" aria-selected="false">
<?php esc_html_e( 'One Time Plans', 'imagify' ); ?>
</a>
</li>
</ul><!-- .imagify-tabs -->
<div class="imagify-tabs-contents">
<div class="imagify-tab-content imagify-current" id="imagify-pricing-tab-monthly" role="tabpanel">
<div class="imagify-modal-section section-gray">
<p><?php esc_html_e( 'Monthly plans come with credits which is renewed every months. The billing happens automatically each month or year depending the billing period you choose.', 'imagify' ); ?></p>
</div>
<?php $this->print_template( 'part-settings-discount-banner' ); ?>
<div class="imagify-inline-options imagify-small-options imagify-radio-line">
<input id="imagify-pricing-montly" type="radio" value="monthly" name="plan-pricing" checked="checked">
<label for="imagify-pricing-montly"><?php esc_html_e( 'Monthly', 'imagify' ); ?></label>
<input id="imagify-pricing-yearly" type="radio" value="yearly" name="plan-pricing">
<label for="imagify-pricing-yearly"><?php esc_html_e( 'Yearly', 'imagify' ); ?><span class="imagify-2-free imagify-b-right"><?php esc_html_e( '2 months free', 'imagify' ); ?></span></label>
</div><!-- .imagify-radio-line -->
<div class="imagify-pricing-table imagify-month-selected">
<script type="text/html" id="imagify-offer-monthly-template"><div class="imagify-offer-line imagify-offer-monthlies imagify-flex-table">
<div class="imagify-col-details">
<p class="imagify-label">
<span class="imagify-the-offer">
<span class="imagify-offer-size"></span>
<span class="imagify-offer-by"><?php esc_html_e( '/month', 'imagify' ); ?></span>
</span>
<span class="imagify-approx">
<?php
printf(
/* translators: %s is a formatted number (don't use %d). */
__( 'approx: %s images', 'imagify' ),
'<span class="imagify-approx-nb"></span>'
);
?>
</span>
</p>
</div>
<div class="imagify-col-price imagify-flex-table">
<span class="imagify-price-block">
<span class="imagify-dollars">$</span>
<span class="imagify-number-block">
<span class="imagify-switch-my"></span>
<span class="imagify-price-by"><?php esc_html_e( '/month', 'imagify' ); ?></span>
</span>
</span>
<span class="imagify-recommend" aria-hidden="true"><?php esc_html_e( 'we recommend for you', 'imagify' ); ?></span>
<p class="imagify-price-complement">
<?php
printf(
/* translators: %s is a formatted price. */
__( '%s per<br>additionnal Gb', 'imagify' ),
'<span class="imagify-price-add-data"></span>'
);
?>
</p>
</div><!-- .imagify-col-price -->
<div class="imagify-col-other-actions">
<button type="button" class="button imagify-button-secondary mini imagify-payment-btn-select-plan"><?php esc_html_e( 'Choose plan', 'imagify' ); ?></button>
</div>
</div><!-- .imagify-offer-line --></script>
</div><!-- .imagify-pricing-table -->
<div class="imagify-cols">
<div class="imagify-col imagify-txt-start">
<p class="imagify-special-needs">
<strong><?php esc_html_e( 'Need more?', 'imagify' ); ?></strong>
<span><?php esc_html_e( 'for special needs', 'imagify' ); ?></span>
</p>
</div>
<div class="imagify-col imagify-txt-end">
<p><a class="button imagify-button-ghost imagify-button-medium imagify-mt1 imagify-mb1 imagify-mr1" href="<?php echo esc_html( imagify_get_external_url( 'contact' ) ); ?>" target="_blank"><i class="dashicons dashicons-email" aria-hidden="true"></i> <?php esc_html_e( 'Contact Us', 'imagify' ); ?></a></p>
</div>
</div>
</div><!-- .imagify-tab-content -->
<div class="imagify-tab-content" id="imagify-pricing-tab-onetime" role="tabpanel">
<div class="imagify-modal-section section-gray">
<p><?php esc_html_e( 'One Time plans are useful if you have a lots of existing images which need to be optimized. You can use it for bulk optimizing all your past images. You will pay only once.', 'imagify' ); ?></p>
</div>
<div class="imagify-pricing-table imagify-month-selected">
<script type="text/html" id="imagify-offer-onetime-template"><div class="imagify-offer-line imagify-flex-table imagify-offer-onetimes">
<div class="imagify-col-details">
<p class="imagify-label">
<span class="imagify-the-offer">
<span class="imagify-offer-size"></span>
</span>
<span class="imagify-approx">
<?php
printf(
/* translators: %s is a formatted number (don't use %d). */
__( 'approx: %s images', 'imagify' ),
'<span class="imagify-approx-nb"></span>'
);
?>
</span>
</p>
</div>
<div class="imagify-col-price">
<span class="imagify-price-block">
<span class="imagify-dollars">$</span>
<span class="imagify-number-block"></span>
</span>
<span class="imagify-recommend"><?php esc_html_e( 'we recommend for you', 'imagify' ); ?></span>
</div><!-- .imagify-col-price -->
<div class="imagify-col-other-actions">
<button type="button" class="button imagify-button-secondary mini imagify-payment-btn-select-plan"><?php esc_html_e( 'Choose plan', 'imagify' ); ?></button>
</div>
</div><!-- .imagify-offer-line --></script>
</div><!-- .imagify-pricing-table -->
</div><!-- .imagify-tab-content -->
</div><!-- .imagify-tabs-contents -->
</div><!-- .imagify-plans-selection-view -->
<?php
/**
* THIRD MODAL VIEW.
*/
?>
<div class="imagify-modal-views imagify-payment-process-view" id="imagify-payment-process-view" aria-hidden="true">
<iframe data-imagify-api="<?php echo esc_attr( get_imagify_option( 'api_key' ) ); ?>" id="imagify-payment-iframe" data-src="<?php echo esc_url( imagify_get_external_url( 'payment' ) ); ?>" name="imagify-payment-iframe"></iframe>
</div><!-- .imagify-modal-views -->
<?php
/**
* SUCCESS VIEW.
*/
?>
<div class="imagify-modal-views imagify-success-view" id="imagify-success-view" aria-hidden="true">
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>big-blue-check.png" width="113" height="109" alt="">
<p><?php esc_html_e( 'Thank you for being awesome!', 'imagify' ); ?></p>
</div><!-- .imagify-modal-views -->
<button class="close-btn" type="button">
<i aria-hidden="true" class="dashicons dashicons-no-alt"></i>
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'imagify' ); ?></span>
</button>
</div><!-- .imagify-modal-main -->
<div class="imagify-modal-sidebar">
<div class="imagify-modal-sidebar-content imagify-txt-start">
<p class="imagify-modal-sidebar-title"><?php esc_html_e( 'What do our users think about Imagify', 'imagify' ); ?></p>
<div class="imagify-modal-testimony">
<div class="imagify-modal-testimony-person">
<span class="imagify-modal-avatar">
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>pic-srhdesign.jpg" alt="">
</span>
<p class="imagify-modal-identity">
<a href="https://twitter.com/SRHDesign/status/686486119249260544" target="_blank">@SRHDesign</a>
</p>
</div>
<div class="imagify-modal-testimony-content">
<p>@imagify is an awesome tool that is powerful & easy to use. It's fast, rivals and surpasses other established plugins/software. Awesome!</p>
</div>
</div>
<div class="imagify-modal-testimony">
<div class="imagify-modal-testimony-person">
<span class="imagify-modal-avatar">
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>pic-ericwaltr.jpg" alt="">
</span>
<p class="imagify-modal-identity">
<a href="https://twitter.com/EricWaltR/status/679053496382038016" target="_blank">@EricWaltr</a>
</p>
</div>
<div class="imagify-modal-testimony-content">
<p>Clearly @imagify is the most awesome tool to compress images on your website! A must try</p>
</div>
</div>
<div class="imagify-modal-sidebar-trust imagify-txt-center">
<p class="imagify-secondary">
<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>icon-lock.png" srcset="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>icon-lock.svg 2x" width="16" height="19" alt=""> <?php esc_html_e( 'Secure Credit Card Payment', 'imagify' ); ?></p>
<p><?php esc_html_e( 'This is secure 128-bits SSL encrypted payment', 'imagify' ); ?></p>
</div>
</div>
</div><!-- .imagify-modal-sidebar -->
<div class="imagify-modal-loader"></div>
</div><!-- .imagify-modal-content-->
</div><!-- .imagify-payment-modal -->
<?php
|