imagify / views / modal-settings-visual-comparison.php

modal-settings-visual-comparison.php in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 2.2, at views/modal-settings-visual-comparison.php

141 lines 5.6 KB

Raw Download Zip

1	<?php
2	defined( 'ABSPATH' ) \|\| die( 'Cheatin’ uh?' );
3
4	?>
5
6	<div class="imagify-modal" id="imagify-visual-comparison">
7	<div class="imagify-modal-content">
8
9	<p class="imagify-comparison-title">
10	<?php
11	printf(
12	/* translators: 1 and 2 are optimization levels: "Original", "Normal", "Aggressive", or "Ultra". */
13	__( 'I want to compare %1$s and %2$s', 'imagify' ),
14	'<span class="twentytwenty-left-buttons"></span>',
15	'<span class="twentytwenty-right-buttons"></span>'
16	);
17	?>
18	</p>
19
20	<div class="twentytwenty-container"
21	data-loader="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>loader-balls.svg"
22	data-label-original="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
23	data-label-normal="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
24	data-label-aggressive="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
25	data-label-ultra="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
26
27	data-original-label="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
28	data-original-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>mushrooms-original.jpg"
29	data-original-dim="1220x350"
30	data-original-alt="<?php
31	/* translators: %s is a formatted file size. */
32	printf( esc_attr__( 'Original photography about %s', 'imagify' ), imagify_size_format( 343040 ) );
33	?>"
34
35	data-normal-label="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
36	data-normal-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>mushrooms-normal.jpg"
37	data-normal-dim="1220x350"
38	data-normal-alt="<?php
39	/* translators: %s is a formatted file size. */
40	printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 301056 ) );
41	?>"
42
43	data-aggressive-label="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
44	data-aggressive-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>mushrooms-aggressive.jpg"
45	data-aggressive-dim="1220x350"
46	data-aggressive-alt="<?php
47	/* translators: %s is a formatted file size. */
48	printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 108544 ) );
49	?>"
50
51	data-ultra-label="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
52	data-ultra-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>mushrooms-ultra.jpg"
53	data-ultra-dim="1220x350"
54	data-ultra-alt="<?php
55	/* translators: %s is a formatted file size. */
56	printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 46080 ) );
57	?>"></div>
58
59	<div class="imagify-comparison-levels">
60	<div class="imagify-c-level imagify-level-original go-left">
61	<p class="imagify-c-level-row">
62	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
63	<span class="value level"><?php _e( 'Original', 'imagify' ); ?></span>
64	</p>
65	<p class="imagify-c-level-row">
66	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
67	<span class="value"><?php echo imagify_size_format( 343040 ); ?></span>
68	</p>
69	</div>
70	<div class="imagify-c-level imagify-level-optimized imagify-level-normal" aria-hidden="true">
71	<p class="imagify-c-level-row">
72	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
73	<span class="value level"><?php _e( 'Normal', 'imagify' ); ?></span>
74	</p>
75	<p class="imagify-c-level-row">
76	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
77	<span class="value size"><?php echo imagify_size_format( 301056 ); ?></span>
78	</p>
79	<p class="imagify-c-level-row">
80	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
81	<span class="value">
82	<span class="imagify-chart">
83	<span class="imagify-chart-container">
84	<canvas id="imagify-consumption-chart-normal" width="15" height="15"></canvas>
85	</span>
86	</span><span class="imagify-chart-value">12.24</span>%
87	</span>
88	</p>
89	</div>
90	<div class="imagify-c-level imagify-level-aggressive">
91	<p class="imagify-c-level-row">
92	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
93	<span class="value level"><?php _e( 'Aggressive', 'imagify' ); ?></span>
94	</p>
95	<p class="imagify-c-level-row">
96	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
97	<span class="value size"><?php echo imagify_size_format( 108544 ); ?></span>
98	</p>
99	<p class="imagify-c-level-row">
100	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
101	<span class="value">
102	<span class="imagify-chart">
103	<span class="imagify-chart-container">
104	<canvas id="imagify-consumption-chart-aggressive" width="15" height="15"></canvas>
105	</span>
106	</span><span class="imagify-chart-value">68.36</span>%
107	</span>
108	</p>
109	</div>
110
111	<div class="imagify-c-level imagify-level-ultra go-right">
112	<p class="imagify-c-level-row">
113	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
114	<span class="value level"><?php _e( 'Ultra', 'imagify' ); ?></span>
115	</p>
116	<p class="imagify-c-level-row">
117	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
118	<span class="value size"><?php echo imagify_size_format( 46080 ); ?></span>
119	</p>
120	<p class="imagify-c-level-row">
121	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
122	<span class="value">
123	<span class="imagify-chart">
124	<span class="imagify-chart-container">
125	<canvas id="imagify-consumption-chart-ultra" width="15" height="15"></canvas>
126	</span>
127	</span><span class="imagify-chart-value">86.57</span>%
128	</span>
129	</p>
130	</div>
131	</div>
132
133	<button type="button" class="close-btn">
134	<i class="dashicons dashicons-no-alt" aria-hidden="true"></i>
135	<span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
136	</button>
137	</div>
138	</div>
139
140	<?php
141