optin / includes / notice / templates / icon-message.php

icon-message.php in WowOptin: Next-Gen Popup Maker – Create Stunning Popups and Optins for Lead Generation trunk, at includes/notice/templates/icon-message.php

181 lines 5.5 KB

Raw Download Zip

1	<?php
2	/**
3	* LAYOUT: icon, heading + subheading, CTA button. No artwork, so every pixel
4	* is markup and follows $brand_color.
5	*
6	* Self-contained: markup and CSS in this one file, every class built from
7	* $prefix so a sibling plugin can copy it as-is.
8	*
9	* The logo vs discount-SVG flavors are the same template — only `icon` and
10	* `is_discount_logo` differ.
11	*
12	* @var array $notice Promo entry (border_color, icon, is_discount_logo,
13	* content_heading, content_subheading, discount_content,
14	* button_text, url, background_color).
15	* @var array $query_args Dismiss-link query args.
16	* @var string $prefix Identity slug from config.php.
17	* @var string $brand_color Accent color from config.php.
18	*/
19
20	defined( 'ABSPATH' ) \|\| exit;
21
22	$border_color = $notice['border_color'];
23	$url = $notice['url'];
24
25	// Faint wash of the brand color behind the notice. Derived, not a literal, so
26	// it follows config.php instead of staying green in a copied plugin.
27	$tint = sscanf( ltrim( $brand_color, '#' ), '%2x%2x%2x' );
28	$tint = $tint ? sprintf( 'rgba(%d, %d, %d, 0.04)', $tint[0], $tint[1], $tint[2] ) : 'transparent';
29
30	$style_id = $prefix . '-notice-css';
31	$wrapper_class = $prefix . '-content-notice-wrapper';
32	$icon_class = $prefix . '-content-notice-icon';
33	$discount_icon_class = $prefix . '-content-notice-discout-icon';
34	$content_wrap_class = $prefix . '-notice-content-wrapper';
35	$buttons_class = $prefix . '-content-notice-buttons';
36	$btn_class = $prefix . '-content-notice-btn';
37	$discount_btn_class = $prefix . '-content-discount_btn';
38	$close_class = $prefix . '-content-notice-close';
39	$close_icon_class = $prefix . '-content-notice-close-icon';
40	?>
41	<style id="<?php echo esc_attr( $style_id ); ?>" type="text/css">
42	.<?php echo esc_html( $wrapper_class ); ?> {
43	border: 1px solid #c3c4c7;
44	border-left: 3px solid <?php echo esc_attr( $brand_color ); ?>;
45	margin: 15px 0 !important;
46	display: flex;
47	align-items: center;
48	background: <?php echo esc_attr( $tint ); ?>;
49	width: 100%;
50	padding: 10px 0;
51	position: relative;
52	box-sizing: border-box;
53	}
54
55	.<?php echo esc_html( $wrapper_class ); ?>.notice {
56	margin: 10px 0;
57	width: calc(100% - 20px);
58	}
59
60	.wrap .<?php echo esc_html( $wrapper_class ); ?>.notice {
61	width: 100%;
62	}
63
64	.<?php echo esc_html( $icon_class ); ?> {
65	margin-left: 15px;
66	}
67
68	.<?php echo esc_html( $discount_icon_class ); ?> {
69	margin-left: 10px;
70	}
71
72	.<?php echo esc_html( $icon_class ); ?> img {
73	max-width: 42px;
74	height: 70px;
75	}
76
77	.<?php echo esc_html( $discount_icon_class ); ?> img {
78	height: 70px;
79	width: 70px;
80	}
81
82	.<?php echo esc_html( $content_wrap_class ); ?> {
83	display: flex;
84	flex-direction: column;
85	gap: 8px;
86	font-size: 14px;
87	line-height: 20px;
88	margin-left: 15px;
89	}
90
91	.<?php echo esc_html( $buttons_class ); ?> {
92	display: flex;
93	align-items: center;
94	gap: 15px;
95	}
96
97	.<?php echo esc_html( $btn_class ); ?> {
98	font-weight: 600;
99	text-transform: uppercase !important;
100	padding: 2px 10px !important;
101	background-color: <?php echo esc_attr( $brand_color ); ?>;
102	border: none !important;
103	}
104
105	.<?php echo esc_html( $discount_btn_class ); ?> {
106	background-color: #ffffff;
107	text-decoration: none;
108	border: 1px solid <?php echo esc_attr( $brand_color ); ?>;
109	padding: 5px 10px;
110	border-radius: 5px;
111	font-weight: 500;
112	text-transform: uppercase;
113	color: <?php echo esc_attr( $brand_color ); ?> !important;
114	}
115
116	.<?php echo esc_html( $close_class ); ?> {
117	position: absolute;
118	right: 2px;
119	top: 5px;
120	text-decoration: none;
121	color: #b6b6b6;
122	font-family: dashicons;
123	font-size: 16px;
124	line-height: 20px;
125	}
126
127	.<?php echo esc_html( $close_icon_class ); ?> {
128	font-size: 14px;
129	}
130	</style>
131	<div class="<?php echo esc_attr( $wrapper_class ); ?> notice"
132	style="border-left: 3px solid <?php echo esc_attr( $border_color ); ?>;"
133	>
134	<?php
135	if ( ! empty( $notice['is_discount_logo'] ) ) {
136	?>
137	<div class="<?php echo esc_attr( $discount_icon_class ); ?>"> <img src="<?php echo esc_url( $notice['icon'] ); ?>"/> </div>
138	<?php
139	} else {
140	?>
141	<div class="<?php echo esc_attr( $icon_class ); ?>"> <img src="<?php echo esc_url( $notice['icon'] ); ?>"/> </div>
142	<?php
143	}
144	?>
145
146	<div class="<?php echo esc_attr( $content_wrap_class ); ?>">
147	<div class="">
148	<?php if ( ! empty( $notice['content_heading'] ) ) : ?>
149	<strong><?php echo esc_html( $notice['content_heading'] ); ?> </strong>
150	<?php endif; ?>
151	<?php
152	printf(
153	wp_kses_post( $notice['content_subheading'] ),
154	'<strong>' . esc_html( $notice['discount_content'] ) . '</strong>'
155	);
156	?>
157	</div>
158	<div class="<?php echo esc_attr( $buttons_class ); ?>">
159	<?php if ( isset( $notice['is_discount_logo'] ) && $notice['is_discount_logo'] ) : ?>
160	<a class="<?php echo esc_attr( $discount_btn_class ); ?>" href="<?php echo esc_url( $url ); ?>" target="_blank">
161	<?php echo esc_html( $notice['button_text'] ); ?>
162	</a>
163	<?php else : ?>
164	<a class="<?php echo esc_attr( $btn_class ); ?> button button-primary" href="<?php echo esc_url( $url ); ?>" target="_blank" style="background-color: <?php echo esc_attr( ! empty( $notice['background_color'] ) ? $notice['background_color'] : $brand_color ); ?>;">
165	<?php echo esc_html( $notice['button_text'] ); ?>
166
167	</a>
168	<?php endif; ?>
169	</div>
170	</div>
171	<a href=
172	<?php
173	echo esc_url(
174	add_query_arg(
175	$query_args
176	)
177	);
178	?>
179	class="<?php echo esc_attr( $close_class ); ?>"><span class="<?php echo esc_attr( $close_icon_class ); ?> dashicons dashicons-dismiss"> </span></a>
180	</div>
181