banner.php
78 lines
| 1 | <?php |
| 2 | |
| 3 | /** |
| 4 | * Main renderer for the Backup Banner (floating popup with overlay) |
| 5 | * |
| 6 | * @category Child Plugin |
| 7 | */ |
| 8 | |
| 9 | // Namespace |
| 10 | namespace Inisev\Subs; |
| 11 | |
| 12 | // Disallow direct access |
| 13 | if (!defined('ABSPATH')) exit; |
| 14 | |
| 15 | ?> |
| 16 | |
| 17 | <!-- Dark overlay --> |
| 18 | <div class="bmi-backup-banner__overlay" id="bmi-backup-banner-overlay"></div> |
| 19 | |
| 20 | <!-- Wavy arrow pointing from banner to sidebar menu item --> |
| 21 | <img src="<?php $this->_asset('imgs/waved-arrow.svg'); ?>" alt="" class="bmi-backup-banner__waved-arrow" id="bmi-backup-banner-arrow" aria-hidden="true"> |
| 22 | |
| 23 | <!-- Floating popup banner --> |
| 24 | <div class="bmi-backup-banner" id="bmi-backup-banner"> |
| 25 | <div class="bmi-backup-banner__inner"> |
| 26 | <img src="<?php $this->_asset('imgs/bg-pattern.svg'); ?>" alt="" class="bmi-backup-banner__bg-pattern" aria-hidden="true"> |
| 27 | |
| 28 | <button type="button" aria-label="Close banner" class="bmi-backup-banner__close"> |
| 29 | <img src="<?php $this->_asset('imgs/cross.svg'); ?>" alt="Close" width="20" height="20"> |
| 30 | </button> |
| 31 | |
| 32 | <div class="bmi-backup-banner__content"> |
| 33 | <div class="bmi-backup-banner__header"> |
| 34 | <img src="<?php $this->_asset('imgs/icon-alarm.svg'); ?>" alt="" class="bmi-backup-banner__alarm-icon" width="81" height="70"> |
| 35 | <h2 class="bmi-backup-banner__title"><span class="green bold">Make a backup of this site</span><br><span id="changeable-text">before it expires</span></h2> |
| 36 | </div> |
| 37 | |
| 38 | <div class="bmi-backup-banner__body"> |
| 39 | <p class="bmi-backup-banner__subtitle">The <span class="semi-bold">best backup & migration plugin</span> for WordPress is already installed:</p> |
| 40 | |
| 41 | <div class="bmi-backup-banner__features"> |
| 42 | <div class="bmi-backup-banner__feature-card" style="width: 291px;"> |
| 43 | <div class="bmi-backup-banner__feature-icon"> |
| 44 | <img src="<?php $this->_asset('imgs/icon-rocket.svg'); ?>" alt="" width="55" height="55"> |
| 45 | </div> |
| 46 | <span class="bmi-backup-banner__feature-text"><b>Super-fast</b> backups & migrations</span> |
| 47 | </div> |
| 48 | |
| 49 | <div class="bmi-backup-banner__feature-card" style="width: 322px;"> |
| 50 | <div class="bmi-backup-banner__feature-icon"> |
| 51 | <img src="<?php $this->_asset('imgs/icon-free.svg'); ?>" style="width: 30px;height:31px;position:absolute;left:38px;bottom:35px;"> |
| 52 | <img src="<?php $this->_asset('imgs/icon-cloud.svg'); ?>" alt="" width="55" height="55"> |
| 53 | </div> |
| 54 | <span class="bmi-backup-banner__feature-text"><b>Free cloud storage</b> for your <span class="nowrap">backups (1 GB)</span></span> |
| 55 | </div> |
| 56 | |
| 57 | <div class="bmi-backup-banner__feature-card" style="width: 248px;"> |
| 58 | <div class="bmi-backup-banner__feature-icon"> |
| 59 | <img src="<?php $this->_asset('imgs/icon-support.svg'); ?>" alt="" width="55" height="55"> |
| 60 | </div> |
| 61 | <span class="bmi-backup-banner__feature-text"><b>Free support</b> if you need help</span> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
| 65 | |
| 66 | <div class="bmi-backup-banner__actions"> |
| 67 | <a href="<?php echo esc_url($this->plugin_menu_url); ?>" class="bmi-backup-banner__btn bmi-backup-banner__btn--primary bmi-backup-banner__cta"> |
| 68 | <img src="<?php $this->_asset('imgs/arrow-right.svg'); ?>" alt="" class="bmi-backup-banner__btn-arrow" width="28" height="28"> |
| 69 | <span>Create a backup now</span> |
| 70 | </a> |
| 71 | <a href="https://bit.ly/twplight" target="_blank" class="bmi-backup-banner__btn bmi-backup-banner__btn--secondary bmi-backup-banner__install-btn"> |
| 72 | <span>Install Backup Migration on your own site</span> |
| 73 | </a> |
| 74 | </div> |
| 75 | </div> |
| 76 | </div> |
| 77 | </div> |
| 78 |