<?php
/* @var $this NewsletterMainAdmin */
/* @var $controls NewsletterControls */
defined('ABSPATH') || exit;
wp_enqueue_script('tnp-chart');
if ($controls->is_action('feed_enable')) {
delete_option('newsletter_feed_demo_disable');
$controls->messages = 'Feed by Mail demo panels enabled. On next page reload it will show up.';
}
if ($controls->is_action('feed_disable')) {
update_option('newsletter_feed_demo_disable', 1);
$controls->messages = 'Feed by Mail demo panel disabled. On next page reload it will disappear.';
}
$emails_module = NewsletterEmailsAdmin::instance();
$statistics_module = NewsletterStatisticsAdmin::instance();
$emails = $wpdb->get_results("select * from " . NEWSLETTER_EMAILS_TABLE . " where type='message' order by id desc limit 5");
$users_module = NewsletterUsersAdmin::instance();
$query = "select * from " . NEWSLETTER_USERS_TABLE . " order by id desc limit 10";
$subscribers = $wpdb->get_results($query);
// Retrieves the last standard newsletter
$last_email = $wpdb->get_row(
$wpdb->prepare("select * from " . NEWSLETTER_EMAILS_TABLE . " where type='message' and status in ('sent', 'sending') and send_on<%d order by id desc limit 1", time()));
if ($last_email) {
$report = $statistics_module->get_statistics($last_email);
$last_email_sent = $report->total;
$last_email_opened = $report->open_count;
$last_email_notopened = $last_email_sent - $last_email_opened;
$last_email_clicked = $report->click_count;
$last_email_opened -= $last_email_clicked;
$overall_sent = $wpdb->get_var("select sum(sent) from " . NEWSLETTER_EMAILS_TABLE . " where type='message' and status in ('sent', 'sending')");
$overall_opened = $wpdb->get_var("select count(distinct user_id,email_id) from " . NEWSLETTER_STATS_TABLE);
$overall_notopened = $overall_sent - $overall_opened;
$overall_clicked = $wpdb->get_var("select count(distinct user_id,email_id) from " . NEWSLETTER_STATS_TABLE . " where url<>''");
$overall_opened -= $overall_clicked;
} else {
$last_email_opened = 500;
$last_email_notopened = 400;
$last_email_clicked = 200;
$overall_opened = 500;
$overall_notopened = 400;
$overall_clicked = 200;
}
$months = $wpdb->get_results("select count(*) as c, concat(year(created), '-', date_format(created, '%m')) as d "
. "from " . NEWSLETTER_USERS_TABLE . " where status='C' "
. "group by concat(year(created), '-', date_format(created, '%m')) order by d desc limit 12");
$values = array();
$labels = array();
foreach ($months as $month) {
$values[] = (int) $month->c;
$labels[] = date("M y", date_create_from_format("Y-m", $month->d)->getTimestamp());
}
$values = array_reverse($values);
$labels = array_reverse($labels);
$lists = $this->get_lists();
$sources = [];
$extensions_url = '?page=newsletter_main_extension';
if (class_exists('NewsletterExtensions')) {
$extensions_url = '?page=newsletter_extensions_index';
}
$active = class_exists('NewsletterWoocommerce');
$url = $active ? '?page=newsletter_woocommerce_index' : $extensions_url;
$sources[] = ['title' => 'WC Registration', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterWoocommerce');
$url = $active ? '?page=newsletter_woocommerce_index' : $extensions_url;
$sources[] = ['title' => 'WC Checkout', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterCF7');
$url = $active ? '?page=newsletter_cf7_index' : $extensions_url;
$sources[] = ['title' => 'CF7 Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterWPForms');
$url = $active ? '?page=newsletter_wpnlforms_index' : $extensions_url;
$sources[] = ['title' => 'WP Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterNinjaForms');
$url = $active ? '?page=newsletter_ninjaforms_index' : $extensions_url;
$sources[] = ['title' => 'Ninja Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterGravityForms');
$url = $active ? '?page=newsletter_gravityforms_index' : $extensions_url;
$sources[] = ['title' => 'Gravity Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterElementor');
$url = $active ? '?page=newsletter_elementor_index' : $extensions_url;
$sources[] = ['title' => 'Elementor Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterForminator');
$url = $active ? '?page=newsletter_forminator_index' : $extensions_url;
$sources[] = ['title' => 'Forminator Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterFormidable');
$url = $active ? '?page=newsletter_formidable_index' : $extensions_url;
$sources[] = ['title' => 'Formidable Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterFluentForms');
$url = $active ? '?page=newsletter_fluentforms_index' : $extensions_url;
$sources[] = ['title' => 'Fluent Forms', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterApi');
$url = $active ? '?page=newsletter_api_index' : $extensions_url;
$sources[] = ['title' => 'Newsletter API', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterPmpro');
$url = $active ? '?page=newsletter_pmpro_index' : $extensions_url;
$sources[] = ['title' => 'Paid Memb. Pro', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterEdd');
$url = $active ? '?page=newsletter_edd_index' : $extensions_url;
$sources[] = ['title' => 'EDD Checkout', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterComments');
$url = $active ? '?page=newsletter_comments_index' : $extensions_url;
$sources[] = ['title' => 'WP Comments', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterAutomated');
$url = $active ? '?page=newsletter_automated_index' : '?page=newsletter_main_automated';
$automated = ['title' => 'Automated', 'active' => $active, 'url' => $url, 'usable' => true];
$active = class_exists('NewsletterAutoresponder');
$url = $active ? '?page=newsletter_autoresponder_index' : $extensions_url;
$autoresponder = ['title' => 'Autoresponder', 'active' => $active, 'url' => $url, 'usable' => true];
$active = class_exists('NewsletterWpUsers');
$url = $active ? '?page=newsletter_wpusers_index' : $extensions_url;
$sources[] = ['title' => 'WP Signup', 'active' => $active, 'url' => $url, 'usable' => $active];
$active = class_exists('NewsletterReports');
$url = $active ? '?page=newsletter_reports_newsletters' : $extensions_url . '#analytics';
$reports = ['title' => 'Advanced Reports', 'active' => $active, 'url' => $url, 'usable' => true];
$blocks = [];
$active = class_exists('NewsletterBlocks');
$url = $active ? '?page=newsletter_blocks_index' : $extensions_url;
$blocks[] = ['title' => 'Extra Blocks', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterWoocommerce');
$url = $active ? '?page=newsletter_blocks_index' : $extensions_url;
$blocks[] = ['title' => 'WC Products', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterEdd');
$url = $active ? '?page=newsletter_blocks_index' : $extensions_url;
$blocks[] = ['title' => 'EDD Downloads', 'active' => $active, 'url' => $url];
$active = class_exists('NewsletterEvents');
$url = $active ? '?page=newsletter_blocks_index' : $extensions_url;
$blocks[] = ['title' => 'Events', 'active' => $active, 'url' => $url];
?>
<style>
<?php include __DIR__ . '/css/dashboard.css' ?>
</style>
<div class="wrap" id="tnp-wrap">
<?php include NEWSLETTER_ADMIN_HEADER ?>
<div id="tnp-body" class="tnp-main-index">
<div class="tnp-dashboard">
<div class="tnp-cards-container">
<div class="tnp-card">
<div class="tnp-flow">
<div>
<div class="tnp-flow-item title wide">Subscribers start here</div>
</div>
<div>
<div class="tnp-flow-item"><a href="?page=newsletter_subscription_form" target="_blank">Standard form</a></div>
<?php foreach ($sources as $source) { ?>
<?php if (!$source['active']) continue; ?>
<div class="tnp-flow-item <?php echo $source['active'] ? '' : 'inactive' ?>"><a href="<?php echo esc_attr($source['url']) ?>" target="_blank"><?php echo esc_html($source['title']) ?></a></div>
<?php } ?>
</div>
<a href="javascript:void()" onclick="document.getElementById('tnp-other-sources').style.display = 'flex'; return false" style="display: block; text-decoration: underline">Other sources</a>
<div id="tnp-other-sources" style="display: none;">
<?php foreach ($sources as $source) { ?>
<?php if ($source['active']) continue; ?>
<div class="tnp-flow-item notusable"><a href="<?php echo esc_attr($source['url']) ?>" target="_blank"><?php echo esc_html($source['title']) ?></a></div>
<?php } ?>
</div>
<div class="tnp-flow-arrow">▼</div>
<div>
<div class="tnp-flow-item"><a href="?page=newsletter_subscription_antispam" target="_blank">Antispam</a></div>
</div>
<div>
<div class="tnp-flow-item wide"><a href="?page=newsletter_subscription_options" target="_blank">Activation/Welcome messages and emails</a></div>
</div>
<div class="tnp-flow-arrow">▼</div>
<div>
<div class="tnp-flow-item <?php echo $automated['active'] ? '' : 'inactive' ?>"><a href="<?php echo esc_attr($automated['url']) ?>" target="_blank">Automated</a></div>
<div class="tnp-flow-item"><a href="?page=newsletter_emails_index" target="_blank">Newsletters</a></div>
<div class="tnp-flow-item <?php echo $autoresponder['active'] ? '' : 'inactive' ?>"><a href="<?php echo esc_attr($autoresponder['url']) ?>" target="_blank">Autoresponder</a></div>
</div>
<a href="javascript:void()" onclick="document.getElementById('tnp-other-blocks').style.display = 'flex'; return false" style="display: block; text-decoration: underline">Contents</a>
<div id="tnp-other-blocks" style="display: none;">
<?php foreach ($blocks as $block) { ?>
<div class="tnp-flow-item notusable"><a href="?page=newsletter_main_extensions#tnp-creating<?php //echo esc_attr($block['url']) ?>" target="_blank"><?php echo esc_html($block['title']) ?></a></div>
<?php } ?>
</div>
<div class="tnp-flow-arrow">▼</div>
<div>
<div class="tnp-flow-item">Standard reports</div>
<div class="tnp-flow-item <?php echo $reports['active'] ? '' : 'inactive' ?>"><a href="<?php echo esc_attr($reports['url']) ?>" target="_blank"><a href="<?php echo esc_attr($reports['url']) ?>" target="_blank"><?php echo esc_html($reports['title']) ?></a></a></div>
</div>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-header">
<div class="tnp-card-title"><?php esc_html_e('Subscribers', 'newsletter') ?></div>
<div class="tnp-card-upper-buttons"><a href="?page=newsletter_users_index"><?php _e('Manage', 'newsletter') ?></a></div>
</div>
<div class="tnp-card-content">
<table class="widefat" style="width: 100%">
<thead></thead>
<tbody>
<?php foreach ($subscribers as $s) { ?>
<tr>
<td>
<?php echo esc_html($s->email) ?>
</td>
<td>
<?php echo esc_html($s->name) ?> <?php echo esc_html($s->surname) ?>
</td>
<td style="text-align: center">
<?php echo $emails_module->get_user_status_label($s, true) ?>
</td>
<td style="text-align: right">
<?php $controls->button_icon_edit('?page=newsletter_users_edit' . '&id=' . $s->id) ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="tnp-cards-container">
<div class="tnp-card tnp-mimosa">
<div class="tnp-card-title"><?php esc_html_e('Form', 'newsletter') ?></div>
<div class="tnp-card-description"><?php esc_html_e('Setup the form fields and labels.', 'newsletter') ?></div>
<div class="tnp-card-button-container">
<a href="?page=newsletter_subscription_form"><?php esc_html_e('Configure', 'newsletter') ?></a>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-title"><?php esc_html_e('Lists', 'newsletter') ?></div>
<div class="tnp-card-description">You have <?php echo count($lists) ?> lists.</div>
<div class="tnp-card-button-container">
<a href="?page=newsletter_subscription_lists"><?php esc_html_e('Configure', 'newsletter') ?></a>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-title"><?php esc_html_e('Delivery', 'newsletter') ?></div>
<div class="tnp-card-description"><?php esc_html_e('Change the delivery speed, sender name and return path.', 'newsletter') ?></div>
<div class="tnp-card-button-container">
<a href="?page=newsletter_main_main"><?php esc_html_e('Configure', 'newsletter') ?></a>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-title"><?php esc_html_e('Company Info', 'newsletter') ?></div>
<div class="tnp-card-description"><?php esc_html_e('Set your company name, address, socials.', 'newsletter') ?></div>
<div class="tnp-card-button-container">
<a href="?page=newsletter_main_info"><?php esc_html_e('Configure', 'newsletter') ?></a>
</div>
</div>
</div>
<div class="tnp-cards-container">
<div class="tnp-card">
<div class="tnp-card-header">
<div class="tnp-card-title"><?php esc_html_e('Newsletters', 'newsletter') ?></div>
<div class="tnp-card-upper-buttons"><a href="?page=newsletter_emails_index"><?php _e('Manage', 'newsletter') ?></a></div>
</div>
<div class="tnp-card-content">
<table class="widefat" style="width: 100%">
<thead></thead>
<tbody>
<?php foreach ($emails as $email) { ?>
<tr>
<td>
<?php echo esc_html($email->subject) ?>
</td>
<td style="text-align: center">
<?php $emails_module->show_email_status_label($email) ?>
</td>
<td style="text-align: center">
<?php $emails_module->show_email_progress_bar($email, array('scheduled' => true)) ?>
</td>
<td style="text-align: right">
<?php
if ($email->status === TNP_Email::STATUS_SENT || $email->status === TNP_Email::STATUS_SENDING) {
echo '<a class="button-primary" href="' . $statistics_module->get_statistics_url($email->id) . '"><i class="fas fa-chart-bar"></i></a>';
} else {
echo $emails_module->get_edit_button($email, true);
}
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-title"><?php _e('Subscriptions', 'newsletter') ?></div>
<div class="tnp-canvas">
<canvas id="tnp-events-chart-canvas" height="300"></canvas>
</div>
<script type="text/javascript">
var events_data = {
labels: <?php echo json_encode($labels) ?>,
datasets: [
{
label: "<?php _e('Subscriptions', 'newsletter') ?>",
fill: true,
strokeColor: "#27AE60",
backgroundColor: "#eee",
borderColor: "#27AE60",
pointBorderColor: "#27AE60",
pointBackgroundColor: "#ECF0F1",
data: <?php echo json_encode($values) ?>
}
]
};
jQuery(document).ready(function ($) {
ctxe = $('#tnp-events-chart-canvas').get(0).getContext("2d");
eventsLineChart = new Chart(ctxe, {
type: 'line', data: events_data,
options: {
maintainAspectRatio: false,
xresponsive: true,
scales: {
xAxes: [{
type: "category",
"id": "x-axis-1",
gridLines: {display: false},
ticks: {fontFamily: "soleil"}
}],
yAxes: [
{
type: "linear",
"id": "y-axis-1",
gridLines: {display: false},
ticks: {fontFamily: "soleil"}
},
]
},
}
});
});
</script>
</div>
</div>
<div class="tnp-cards-container">
<div class="tnp-card">
<div class="tnp-card-header">
<div class="tnp-card-title"><?php _e('Documentation', 'newsletter') ?></div>
</div>
<div>
<a href="https://www.thenewsletterplugin.com/documentation/installation/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Installation
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/subscription/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Subscription
</div>
</a>
<a href="https://www.thenewsletterplugin.com/category/tips" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Tips & Tricks
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/subscribers-and-management/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Subscribers and management
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/newsletters/newsletters-module/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Creating Newsletters
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/addons/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Premium Addons
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/customization/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Customization
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/delivery-and-spam/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Delivery and spam
</div>
</a>
<a href="https://www.thenewsletterplugin.com/documentation/developers/" target="_blank">
<div class="tnp-card-documentation-index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20"><title>saved items</title><g class="nc-icon-wrapper" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ><path d="M37,4h3a4,4,0,0,1,4,4V40a4,4,0,0,1-4,4H8a4,4,0,0,1-4-4V8A4,4,0,0,1,8,4h3" fill="none" stroke-miterlimit="10"/> <polygon points="32 24 24 18 16 24 16 4 32 4 32 24" fill="none" stroke-miterlimit="10" data-color="color-2"/></g></svg>
Developers & Advanced Topics
</div>
</a>
</div>
</div>
</div>
<div class="tnp-cards-container">
<div class="tnp-card">
<div class="tnp-card-header">
<div class="tnp-card-title"><?php _e('Developers', 'newsletter') ?></div>
</div>
<div class="tnp-card-description">Extending Newsletter by yourself? There is something for you as well!</div>
<div class="tnp-card-button-container">
<a href="https://www.thenewsletterplugin.com/documentation/developers/" target="_blank">Developer's love 💛</a>
</div>
</div>
<div class="tnp-card">
<div class="tnp-card-header">
<div class="tnp-card-title"><?php _e('Video Tutorials', 'newsletter') ?></div>
</div>
<div class="tnp-card-description">We have some videos to help gest the most from Newsletter.</div>
<div class="tnp-card-video">
<iframe width="400" height="200" src="https://www.youtube.com/embed/zmVmW84Bw9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="tnp-card-button-container">
<a href="https://www.thenewsletterplugin.com/video-tutorials" target="_blank">See the videos</a>
</div>
</div>
</div>
</div>
<?php include NEWSLETTER_DIR . '/tnp-footer.php'; ?>
</div>
</div>
|