author-dashboard.php
5 years ago
basic.php
5 months ago
buddypress.php
5 years ago
cloud-storage.php
5 years ago
crons.php
1 year ago
frontend.php
2 years ago
privacy.php
8 months ago
profile-dashboard.php
5 years ago
social-connects.php
5 years ago
user-interface.php
4 months ago
user-interface.php
782 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Author: shahnuralam |
| 4 | * Date: 2019-01-01 |
| 5 | * Time: 14:39 |
| 6 | */ |
| 7 | if (!defined('ABSPATH')) die(); |
| 8 | |
| 9 | $ui_button = get_option('__wpdm_ui_download_button'); |
| 10 | $ui_button_sc = get_option('__wpdm_ui_download_button_sc'); |
| 11 | $gappsk = get_option('_wpdm_google_app_secret', 'AIzaSyCgvNB-55xoUiz1zKIJgFPQbqyn4lCCB_E'); |
| 12 | $gappsk = $gappsk ?: 'AIzaSyCgvNB-55xoUiz1zKIJgFPQbqyn4lCCB_E'; |
| 13 | ?> |
| 14 | |
| 15 | |
| 16 | <div class="panel panel-default wpdm-font-panel"> |
| 17 | <div class="panel-heading"> |
| 18 | <div class="wpdm-font-header"> |
| 19 | <div class="wpdm-font-header-left"> |
| 20 | <?= __('Google Fonts', WPDM_TEXT_DOMAIN); ?> |
| 21 | </div> |
| 22 | <label class="wpdm-font-toggle"> |
| 23 | <input type="hidden" name="__wpdm_enable_gf" value="0"> |
| 24 | <input type="checkbox" id="__wpdm_enable_gf_checkbox" <?php checked(1, get_option('__wpdm_enable_gf', 0)) ?> name="__wpdm_enable_gf" value="1"> |
| 25 | <span class="wpdm-font-toggle-slider"></span> |
| 26 | </label> |
| 27 | </div> |
| 28 | </div> |
| 29 | <div class="panel-body"> |
| 30 | <div class="wpdm-font-selector"> |
| 31 | <div class="wpdm-font-selector-row"> |
| 32 | <div class="wpdm-font-field"> |
| 33 | <label class="wpdm-font-label"><?= __('Font Family', WPDM_TEXT_DOMAIN); ?></label> |
| 34 | <div class="wpdm-font-select-wrapper"> |
| 35 | <select name="__wpdm_google_font" id="__wpdm_google_font" data-selected="<?php echo esc_attr(get_option('__wpdm_google_font', 'Sen')); ?>"></select> |
| 36 | <div class="wpdm-font-loading" id="wpdm-font-loading"> |
| 37 | <div class="wpdm-font-loading-spinner"></div> |
| 38 | <span><?= __('Loading fonts...', WPDM_TEXT_DOMAIN); ?></span> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="wpdm-font-actions"> |
| 43 | <button type="button" id="pig" class="wpdm-font-btn wpdm-font-btn--secondary" title="<?= esc_attr__('View on Google Fonts', WPDM_TEXT_DOMAIN); ?>"> |
| 44 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> |
| 45 | <?= __('Google Fonts', WPDM_TEXT_DOMAIN); ?> |
| 46 | </button> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | |
| 51 | <div class="wpdm-font-preview-container"> |
| 52 | <div class="wpdm-font-preview-header"> |
| 53 | <span class="wpdm-font-preview-label"><?= __('Preview', WPDM_TEXT_DOMAIN); ?></span> |
| 54 | <div class="wpdm-font-preview-controls"> |
| 55 | <button type="button" class="wpdm-font-size-btn active" data-size="16">Aa</button> |
| 56 | <button type="button" class="wpdm-font-size-btn" data-size="24">Aa</button> |
| 57 | <button type="button" class="wpdm-font-size-btn" data-size="36">Aa</button> |
| 58 | </div> |
| 59 | </div> |
| 60 | <?php |
| 61 | $saved_font = get_option('__wpdm_google_font', 'Sen'); |
| 62 | $font_family = preg_replace('/:.*$/', '', $saved_font); // Remove :wght@... part |
| 63 | $font_family = str_replace('+', ' ', $font_family); // Replace + with space |
| 64 | ?> |
| 65 | <div class="wpdm-font-preview" id="fontpreview" style="font-family: '<?php echo esc_attr($font_family); ?>'"> |
| 66 | <div class="wpdm-font-preview-main" contenteditable="true" data-placeholder="<?= esc_attr__('Type to preview...', WPDM_TEXT_DOMAIN); ?>">The quick brown fox jumps over the lazy dog</div> |
| 67 | <div class="wpdm-font-preview-samples"> |
| 68 | <div class="wpdm-font-sample wpdm-font-sample--heading">Heading Text Sample</div> |
| 69 | <div class="wpdm-font-sample wpdm-font-sample--body">Body text looks like this. Perfect for paragraphs and content.</div> |
| 70 | <div class="wpdm-font-sample wpdm-font-sample--small">Small caption or footnote text</div> |
| 71 | </div> |
| 72 | <div class="wpdm-font-preview-chars"> |
| 73 | <span>ABC</span><span>abc</span><span>123</span><span>!@#</span> |
| 74 | </div> |
| 75 | </div> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | |
| 80 | <div class="panel panel-default"> |
| 81 | <div class="panel-heading"><?php _e("Colors",'download-manager'); ?></div> |
| 82 | |
| 83 | |
| 84 | <?php $uicolors = maybe_unserialize(get_option('__wpdm_ui_colors', array())); ?> |
| 85 | |
| 86 | <table class="table"> |
| 87 | <thead> |
| 88 | <tr> |
| 89 | <th>Color Name</th> |
| 90 | <th width="50px">Default</th> |
| 91 | <th width="50px">Hover</th> |
| 92 | <th width="50px">Active</th> |
| 93 | </tr> |
| 94 | </thead> |
| 95 | <tbody> |
| 96 | <tr> |
| 97 | <td><?php echo __("Primary:", "download-manager") ?></td> |
| 98 | <td><input type="text" data-css-var="--color-primary" class="color-control" name="__wpdm_ui_colors[primary]" value="<?php echo isset($uicolors['primary'])?$uicolors['primary']:'#4a8eff'; ?>" /></td> |
| 99 | <td><input type="text" data-css-var="--color-primary-hover" class="color-control" name="__wpdm_ui_colors[primary_hover]" value="<?php echo isset($uicolors['primary_hover'])?$uicolors['primary_hover']:'#4a8eff'; ?>" /></td> |
| 100 | <td><input type="text" data-css-var="--color-primary-active" class="color-control" name="__wpdm_ui_colors[primary_active]" value="<?php echo isset($uicolors['primary_active'])?$uicolors['primary_active']:'#4a8eff'; ?>" /></td> |
| 101 | </tr> |
| 102 | <tr> |
| 103 | <td><?php echo __("Secondary:", "download-manager") ?></td> |
| 104 | <td><input type="text" data-css-var="--clr-sec" class="color-control" name="__wpdm_ui_colors[secondary]" value="<?php echo isset($uicolors['secondary'])?$uicolors['secondary']:'#6c757d'; ?>" /></td> |
| 105 | <td><input type="text" data-css-var="--clr-sec-hover" class="color-control" name="__wpdm_ui_colors[secondary_hover]" value="<?php echo isset($uicolors['secondary_hover'])?$uicolors['secondary_hover']:'#6c757d'; ?>" /></td> |
| 106 | <td><input type="text" data-css-var="--clr-sec-active" class="color-control" name="__wpdm_ui_colors[secondary_active]" value="<?php echo isset($uicolors['secondary_active'])?$uicolors['secondary_active']:'#6c757d'; ?>" /></td> |
| 107 | </tr> |
| 108 | <tr> |
| 109 | <td><?php echo __("Info:", "download-manager") ?></td> |
| 110 | <td><input type="text" data-css-var="--color-info" class="color-control" name="__wpdm_ui_colors[info]" value="<?php echo isset($uicolors['info'])?$uicolors['info']:'#2CA8FF'; ?>" /></td> |
| 111 | <td><input type="text" data-css-var="--color-info-hover" class="color-control" name="__wpdm_ui_colors[info_hover]" value="<?php echo isset($uicolors['info_hover'])?$uicolors['info_hover']:'#2CA8FF'; ?>" /></td> |
| 112 | <td><input type="text" data-css-var="--color-info-active" class="color-control" name="__wpdm_ui_colors[info_active]" value="<?php echo isset($uicolors['info_active'])?$uicolors['info_active']:'#2CA8FF'; ?>" /></td> |
| 113 | </tr> |
| 114 | <tr> |
| 115 | <td><?php echo __("Success:", "download-manager") ?></td> |
| 116 | <td><input type="text" data-css-var="--color-success" class="color-control" name="__wpdm_ui_colors[success]" value="<?php echo isset($uicolors['success'])?$uicolors['success']:'#18ce0f'; ?>" /></td> |
| 117 | <td><input type="text" data-css-var="--color-success-hover" class="color-control" name="__wpdm_ui_colors[success_hover]" value="<?php echo isset($uicolors['success_hover'])?$uicolors['success_hover']:'#18ce0f'; ?>" /></td> |
| 118 | <td><input type="text" data-css-var="--color-success-active" class="color-control" name="__wpdm_ui_colors[success_active]" value="<?php echo isset($uicolors['success_active'])?$uicolors['success_active']:'#18ce0f'; ?>" /></td> |
| 119 | </tr> |
| 120 | <tr> |
| 121 | <td><?php echo __("Warning:", "download-manager") ?></td> |
| 122 | <td><input type="text" data-css-var="--color-warning" class="color-control" name="__wpdm_ui_colors[warning]" value="<?php echo isset($uicolors['warning'])?$uicolors['warning']:'#FFB236'; ?>" /></td> |
| 123 | <td><input type="text" data-css-var="--color-warning-hover" class="color-control" name="__wpdm_ui_colors[warning_hover]" value="<?php echo isset($uicolors['warning_hover'])?$uicolors['warning_hover']:'#FFB236'; ?>" /></td> |
| 124 | <td><input type="text" data-css-var="--color-warning-active" class="color-control" name="__wpdm_ui_colors[warning_active]" value="<?php echo isset($uicolors['warning_active'])?$uicolors['warning_active']:'#FFB236'; ?>" /></td> |
| 125 | </tr> |
| 126 | <tr> |
| 127 | <td><?php echo __("Danger:", "download-manager") ?></td> |
| 128 | <td><input type="text" data-css-var="--color-danger" class="color-control" name="__wpdm_ui_colors[danger]" value="<?php echo isset($uicolors['danger'])?$uicolors['danger']:'#ff5062'; ?>" /></td> |
| 129 | <td><input type="text" data-css-var="--color-danger-hover" class="color-control" name="__wpdm_ui_colors[danger_hover]" value="<?php echo isset($uicolors['danger_hover'])?$uicolors['danger_hover']:'#ff5062'; ?>" /></td> |
| 130 | <td><input type="text" data-css-var="--color-danger-active" class="color-control" name="__wpdm_ui_colors[danger_active]" value="<?php echo isset($uicolors['danger_active'])?$uicolors['danger_active']:'#ff5062'; ?>" /></td> |
| 131 | </tr> |
| 132 | </tbody> |
| 133 | </table> |
| 134 | |
| 135 | |
| 136 | </div> |
| 137 | |
| 138 | <div class="panel panel-default"> |
| 139 | <div class="panel-heading"><?php _e("Color Scheme",'download-manager'); ?></div> |
| 140 | <div class="panel-body"> |
| 141 | <?php $color_scheme = get_option('__wpdm_color_scheme', 'system'); ?> |
| 142 | <div class="wpdm-color-scheme-options"> |
| 143 | <label class="wpdm-scheme-option <?php echo $color_scheme === 'system' ? 'active' : ''; ?>"> |
| 144 | <input type="radio" name="__wpdm_color_scheme" value="system" <?php checked('system', $color_scheme); ?> /> |
| 145 | <span class="wpdm-scheme-icon"> |
| 146 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> |
| 147 | </span> |
| 148 | <span class="wpdm-scheme-text"> |
| 149 | <span class="wpdm-scheme-label"><?php _e('System', 'download-manager'); ?></span> |
| 150 | <span class="wpdm-scheme-desc"><?php _e('Follow OS preference', 'download-manager'); ?></span> |
| 151 | </span> |
| 152 | </label> |
| 153 | <label class="wpdm-scheme-option <?php echo $color_scheme === 'light' ? 'active' : ''; ?>"> |
| 154 | <input type="radio" name="__wpdm_color_scheme" value="light" <?php checked('light', $color_scheme); ?> /> |
| 155 | <span class="wpdm-scheme-icon"> |
| 156 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> |
| 157 | </span> |
| 158 | <span class="wpdm-scheme-text"> |
| 159 | <span class="wpdm-scheme-label"><?php _e('Light', 'download-manager'); ?></span> |
| 160 | <span class="wpdm-scheme-desc"><?php _e('Always use light mode', 'download-manager'); ?></span> |
| 161 | </span> |
| 162 | </label> |
| 163 | <label class="wpdm-scheme-option <?php echo $color_scheme === 'dark' ? 'active' : ''; ?>"> |
| 164 | <input type="radio" name="__wpdm_color_scheme" value="dark" <?php checked('dark', $color_scheme); ?> /> |
| 165 | <span class="wpdm-scheme-icon"> |
| 166 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> |
| 167 | </span> |
| 168 | <span class="wpdm-scheme-text"> |
| 169 | <span class="wpdm-scheme-label"><?php _e('Dark', 'download-manager'); ?></span> |
| 170 | <span class="wpdm-scheme-desc"><?php _e('Always use dark mode', 'download-manager'); ?></span> |
| 171 | </span> |
| 172 | </label> |
| 173 | </div> |
| 174 | </div> |
| 175 | </div> |
| 176 | |
| 177 | <div class="panel panel-default"> |
| 178 | <div class="panel-heading"><?php _e("Download Button",'download-manager'); ?></div> |
| 179 | |
| 180 | <table class="table table-bordered"> |
| 181 | <tr> |
| 182 | <th colspan="2"><?php _e("Details Page", "download-manager"); ?></th> |
| 183 | </tr> |
| 184 | <tr> |
| 185 | <td valign="middle" title="Select Button Color"> |
| 186 | <small> |
| 187 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-link', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-link" name="__wpdm_ui_download_button[color]"> None</label> |
| 188 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-primary', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-primary" name="__wpdm_ui_download_button[color]"> Primary</label> |
| 189 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-secondary', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-secondary" name="__wpdm_ui_download_button[color]"> Secondary</label> |
| 190 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-info', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-info" name="__wpdm_ui_download_button[color]"> Info</label> |
| 191 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-success', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-success" name="__wpdm_ui_download_button[color]"> Success</label> |
| 192 | <label><input class="__wpdm_ui_download_button_color" <?php checked('btn-danger', (isset($ui_button['color'])?$ui_button['color']:'')); ?> type="radio" value="btn-danger" name="__wpdm_ui_download_button[color]"> Danger</label> |
| 193 | </small> |
| 194 | </td> |
| 195 | <td rowspan="2" valign="middle" align="center" style="width: 200px"> |
| 196 | <button id="__wpdm_ui_download_button" type="button" style="border-radius: <?php echo (isset($ui_button['borderradius'])?$ui_button['borderradius']:4);?>px" class="<?php echo wpdm_download_button_style(true); ?>"><?php _e("Download", "download-manager"); ?></button> |
| 197 | </td> |
| 198 | </tr> |
| 199 | <tr> |
| 200 | <td valign="middle"> |
| 201 | <small> |
| 202 | <label><input class="__wpdm_ui_download_button_size" <?php checked('btn-xs', (isset($ui_button['size'])?$ui_button['size']:'')); ?> type="radio" value="btn-xs" name="__wpdm_ui_download_button[size]"> Extra Small</label> |
| 203 | <label><input class="__wpdm_ui_download_button_size" <?php checked('btn-sm', (isset($ui_button['size'])?$ui_button['size']:'')); ?> type="radio" value="btn-sm" name="__wpdm_ui_download_button[size]"> Small</label> |
| 204 | <label><input class="__wpdm_ui_download_button_size" <?php checked('', (isset($ui_button['size'])?$ui_button['size']:'')); ?> type="radio" value="" name="__wpdm_ui_download_button[size]"> Regular</label> |
| 205 | <label><input class="__wpdm_ui_download_button_size" <?php checked('btn-lg', (isset($ui_button['size'])?$ui_button['size']:'')); ?> type="radio" value="btn-lg" name="__wpdm_ui_download_button[size]"> Large</label> |
| 206 | <div style="width: 160px;float: right;" class="input-group input-group-sm"><div class="input-group-addon"><?php echo __( "Border Radius", "download-manager" ) ?>:</div><input min="0" max="999" id="__wpdm_ui_download_button_br" name="__wpdm_ui_download_button[borderradius]" data-target="#__wpdm_ui_download_button" class="form-control" type="number" value="<?php echo (isset($ui_button['borderradius'])?$ui_button['borderradius']:4);?>" /></div> |
| 207 | </small> |
| 208 | </td> |
| 209 | </tr> |
| 210 | <tr> |
| 211 | <th colspan="2"><?php _e("Shortcode Page", "download-manager"); ?></th> |
| 212 | </tr> |
| 213 | <tr> |
| 214 | <td valign="middle" title="Select Button Color"> |
| 215 | <small> |
| 216 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-link', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-link" name="__wpdm_ui_download_button_sc[color]"> None</label> |
| 217 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-primary', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-primary" name="__wpdm_ui_download_button_sc[color]"> Primary</label> |
| 218 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-secondary', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-secondary" name="__wpdm_ui_download_button_sc[color]"> Secondary</label> |
| 219 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-info', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-info" name="__wpdm_ui_download_button_sc[color]"> Info</label> |
| 220 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-success', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-success" name="__wpdm_ui_download_button_sc[color]"> Success</label> |
| 221 | <label><input class="__wpdm_ui_download_button_sc_color" <?php checked('btn-danger', (isset($ui_button_sc['color'])?$ui_button_sc['color']:'')); ?> type="radio" value="btn-danger" name="__wpdm_ui_download_button_sc[color]"> Danger</label> |
| 222 | </small> |
| 223 | </td> |
| 224 | <td rowspan="2" valign="middle" align="center" style="width: 200px"> |
| 225 | <button id="__wpdm_ui_download_button_sc" type="button" class="<?php echo wpdm_download_button_style(); ?>" style="border-radius: <?php echo (isset($ui_button_sc['borderradius'])?$ui_button_sc['borderradius']:4);?>px"><?php _e("Download", "download-manager"); ?></button> |
| 226 | </td> |
| 227 | </tr> |
| 228 | <tr> |
| 229 | <td valign="middle"> |
| 230 | <small> |
| 231 | <label><input class="__wpdm_ui_download_button_sc_size" <?php checked('btn-xs', (isset($ui_button_sc['size'])?$ui_button_sc['size']:'')); ?> type="radio" value="btn-xs" name="__wpdm_ui_download_button_sc[size]"> Extra Small</label> |
| 232 | <label><input class="__wpdm_ui_download_button_sc_size" <?php checked('btn-sm', (isset($ui_button_sc['size'])?$ui_button_sc['size']:'')); ?> type="radio" value="btn-sm" name="__wpdm_ui_download_button_sc[size]"> Small</label> |
| 233 | <label><input class="__wpdm_ui_download_button_sc_size" <?php checked('', (isset($ui_button_sc['size'])?$ui_button_sc['size']:'')); ?> type="radio" value="" name="__wpdm_ui_download_button_sc[size]"> Regular</label> |
| 234 | <label><input class="__wpdm_ui_download_button_sc_size" <?php checked('btn-lg', (isset($ui_button_sc['size'])?$ui_button_sc['size']:'')); ?> type="radio" value="btn-lg" name="__wpdm_ui_download_button_sc[size]"> Large</label> |
| 235 | <div style="width: 160px;float: right;" class="input-group input-group-sm"><div class="input-group-addon"><?php echo __( "Border Radius", "download-manager" ) ?>:</div><input min="0" max="999" data-target="#__wpdm_ui_download_button_sc" id="__wpdm_ui_download_button_sc_br" class="form-control" type="number" name="__wpdm_ui_download_button_sc[borderradius]" value="<?php echo (isset($ui_button_sc['borderradius'])?$ui_button_sc['borderradius']:4);?>" /></div> |
| 236 | </small> |
| 237 | </td> |
| 238 | </tr> |
| 239 | |
| 240 | </table> |
| 241 | |
| 242 | </div> |
| 243 | <div class="panel panel-default"> |
| 244 | <div class="panel-heading"><?php _e("Front-end UI",'download-manager'); ?></div> |
| 245 | <div class="panel-body"> |
| 246 | |
| 247 | <input type="hidden" name="__wpdm_disable_frontend_css" value="0"> |
| 248 | <label><input type="checkbox" name="__wpdm_disable_frontend_css" value="1" <?php checked(1, get_option('__wpdm_disable_frontend_css', 0)); ?> /> <?php echo __( "Disable front-end stylesheet", "download-manager" ) ?></label> |
| 249 | <p class="text-muted" style="margin: 5px 0 0 24px; font-size: 12px;"><?php _e("For advanced users who want to use custom CSS. This will disable all WPDM front-end styles.", "download-manager"); ?></p> |
| 250 | </div> |
| 251 | </div> |
| 252 | <div class="panel panel-default"> |
| 253 | <div class="panel-heading"><?php _e("Image and Previews",'download-manager'); ?></div> |
| 254 | <div class="panel-body"><input type="hidden" name="__wpdm_crop_thumbs" value="0"> |
| 255 | <label><input type="checkbox" name="__wpdm_crop_thumbs" value="1" <?php checked(1, get_option('__wpdm_crop_thumbs', 0)); ?> /> <?php echo __( "Crop thumbnails", "download-manager" ) ?></label> |
| 256 | </div> |
| 257 | </div> |
| 258 | |
| 259 | <div class="panel panel-default"> |
| 260 | <div class="panel-heading"><?php _e("Admin UI",'download-manager'); ?></div> |
| 261 | <div class="panel-body"><input type="hidden" name="__wpdm_left_aligned" value="0"> |
| 262 | <label><input type="checkbox" id="lasp" name="__wpdm_left_aligned" value="1" <?php checked(1, get_option('__wpdm_left_aligned', 0)); ?> /> <?php echo __( "Left aligned settings page", "download-manager" ) ?></label> |
| 263 | |
| 264 | </div> |
| 265 | </div> |
| 266 | |
| 267 | <style> |
| 268 | /* Google Fonts Panel */ |
| 269 | .wpdm-font-panel { |
| 270 | overflow: visible; |
| 271 | } |
| 272 | .wpdm-font-header { |
| 273 | display: flex; |
| 274 | align-items: center; |
| 275 | justify-content: space-between; |
| 276 | } |
| 277 | .wpdm-font-header-left { |
| 278 | display: flex; |
| 279 | align-items: center; |
| 280 | gap: 10px; |
| 281 | font-weight: 600; |
| 282 | } |
| 283 | .wpdm-font-icon { |
| 284 | color: var(--admin-color, #4a8eff); |
| 285 | } |
| 286 | |
| 287 | /* Toggle Switch */ |
| 288 | .wpdm-font-toggle { |
| 289 | position: relative; |
| 290 | display: inline-block; |
| 291 | width: 44px; |
| 292 | height: 24px; |
| 293 | margin: 0 !important; |
| 294 | } |
| 295 | .wpdm-font-toggle input { |
| 296 | opacity: 0; |
| 297 | width: 0; |
| 298 | height: 0; |
| 299 | } |
| 300 | .wpdm-font-toggle-slider { |
| 301 | position: absolute; |
| 302 | cursor: pointer; |
| 303 | inset: 0; |
| 304 | background: #cbd5e1; |
| 305 | border-radius: 24px; |
| 306 | transition: all 200ms ease; |
| 307 | } |
| 308 | .wpdm-font-toggle-slider::before { |
| 309 | content: ''; |
| 310 | position: absolute; |
| 311 | height: 18px; |
| 312 | width: 18px; |
| 313 | left: 3px; |
| 314 | bottom: 3px; |
| 315 | background: #fff; |
| 316 | border-radius: 50%; |
| 317 | transition: all 200ms ease; |
| 318 | box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
| 319 | } |
| 320 | .wpdm-font-toggle input:checked + .wpdm-font-toggle-slider { |
| 321 | background: var(--admin-color, #4a8eff); |
| 322 | } |
| 323 | .wpdm-font-toggle input:checked + .wpdm-font-toggle-slider::before { |
| 324 | transform: translateX(20px); |
| 325 | } |
| 326 | |
| 327 | /* Font Selector */ |
| 328 | .wpdm-font-selector { |
| 329 | margin-bottom: 20px; |
| 330 | } |
| 331 | .wpdm-font-selector-row { |
| 332 | display: flex; |
| 333 | gap: 16px; |
| 334 | align-items: flex-end; |
| 335 | } |
| 336 | .wpdm-font-field { |
| 337 | flex: 1; |
| 338 | } |
| 339 | .wpdm-font-label { |
| 340 | display: block; |
| 341 | font-size: 12px; |
| 342 | font-weight: 600; |
| 343 | color: #64748b; |
| 344 | text-transform: uppercase; |
| 345 | letter-spacing: 0.5px; |
| 346 | margin-bottom: 8px !important; |
| 347 | } |
| 348 | .wpdm-font-select-wrapper { |
| 349 | position: relative; |
| 350 | } |
| 351 | #__wpdm_google_font { |
| 352 | width: 100% !important; |
| 353 | display: none; |
| 354 | } |
| 355 | .wpdm-font-loading.hidden + .select2-container, |
| 356 | .wpdm-font-loading.hidden ~ #__wpdm_google_font { |
| 357 | display: block; |
| 358 | } |
| 359 | .wpdm-font-select-wrapper .select2-container { |
| 360 | width: 100% !important; |
| 361 | } |
| 362 | |
| 363 | /* Loading State */ |
| 364 | .wpdm-font-loading { |
| 365 | display: flex; |
| 366 | align-items: center; |
| 367 | gap: 10px; |
| 368 | padding: 12px 16px; |
| 369 | background: #f8fafc; |
| 370 | border: 1px solid #e2e8f0; |
| 371 | border-radius: 6px; |
| 372 | color: #64748b; |
| 373 | font-size: 13px; |
| 374 | } |
| 375 | .wpdm-font-loading-spinner { |
| 376 | width: 16px; |
| 377 | height: 16px; |
| 378 | border: 2px solid #e2e8f0; |
| 379 | border-top-color: var(--admin-color, #4a8eff); |
| 380 | border-radius: 50%; |
| 381 | animation: wpdm-font-spin 0.8s linear infinite; |
| 382 | } |
| 383 | @keyframes wpdm-font-spin { |
| 384 | to { transform: rotate(360deg); } |
| 385 | } |
| 386 | .wpdm-font-loading.hidden { |
| 387 | display: none; |
| 388 | } |
| 389 | |
| 390 | /* Font Actions */ |
| 391 | .wpdm-font-actions { |
| 392 | display: flex; |
| 393 | gap: 8px; |
| 394 | } |
| 395 | .wpdm-font-btn { |
| 396 | display: inline-flex; |
| 397 | align-items: center; |
| 398 | gap: 6px; |
| 399 | padding: 10px 16px; |
| 400 | font-size: 13px; |
| 401 | font-weight: 500; |
| 402 | border-radius: 6px; |
| 403 | border: 1px solid transparent; |
| 404 | cursor: pointer; |
| 405 | transition: all 150ms ease; |
| 406 | white-space: nowrap; |
| 407 | } |
| 408 | .wpdm-font-btn--secondary { |
| 409 | background: #f1f5f9; |
| 410 | border-color: #e2e8f0; |
| 411 | color: #475569; |
| 412 | } |
| 413 | .wpdm-font-btn--secondary:hover { |
| 414 | background: #e2e8f0; |
| 415 | border-color: #cbd5e1; |
| 416 | color: #1e293b; |
| 417 | } |
| 418 | |
| 419 | /* Preview Container */ |
| 420 | .wpdm-font-preview-container { |
| 421 | background: #f8fafc; |
| 422 | border: 1px solid #e2e8f0; |
| 423 | border-radius: 10px; |
| 424 | overflow: hidden; |
| 425 | } |
| 426 | .wpdm-font-preview-header { |
| 427 | display: flex; |
| 428 | align-items: center; |
| 429 | justify-content: space-between; |
| 430 | padding: 12px 16px; |
| 431 | background: #fff; |
| 432 | border-bottom: 1px solid #e2e8f0; |
| 433 | } |
| 434 | .wpdm-font-preview-label { |
| 435 | font-size: 12px; |
| 436 | font-weight: 600; |
| 437 | color: #64748b; |
| 438 | text-transform: uppercase; |
| 439 | letter-spacing: 0.5px; |
| 440 | } |
| 441 | .wpdm-font-preview-controls { |
| 442 | display: flex; |
| 443 | gap: 4px; |
| 444 | } |
| 445 | .wpdm-font-size-btn { |
| 446 | width: 32px; |
| 447 | height: 32px; |
| 448 | display: flex; |
| 449 | align-items: center; |
| 450 | justify-content: center; |
| 451 | background: #f1f5f9; |
| 452 | border: 1px solid #e2e8f0; |
| 453 | border-radius: 6px; |
| 454 | color: #64748b; |
| 455 | font-weight: 600; |
| 456 | cursor: pointer; |
| 457 | transition: all 150ms ease; |
| 458 | } |
| 459 | .wpdm-font-size-btn:nth-child(1) { font-size: 11px; } |
| 460 | .wpdm-font-size-btn:nth-child(2) { font-size: 13px; } |
| 461 | .wpdm-font-size-btn:nth-child(3) { font-size: 15px; } |
| 462 | .wpdm-font-size-btn:hover { |
| 463 | background: #e2e8f0; |
| 464 | color: #1e293b; |
| 465 | } |
| 466 | .wpdm-font-size-btn.active { |
| 467 | background: var(--admin-color, #4a8eff); |
| 468 | border-color: var(--admin-color, #4a8eff); |
| 469 | color: #fff; |
| 470 | } |
| 471 | |
| 472 | /* Preview Area */ |
| 473 | .wpdm-font-preview { |
| 474 | padding: 24px; |
| 475 | } |
| 476 | .wpdm-font-preview-main { |
| 477 | font-size: 24px; |
| 478 | line-height: 1.4; |
| 479 | color: #1e293b; |
| 480 | padding: 16px; |
| 481 | background: #fff; |
| 482 | border: 1px solid #e2e8f0; |
| 483 | border-radius: 8px; |
| 484 | margin-bottom: 20px; |
| 485 | min-height: 60px; |
| 486 | outline: none; |
| 487 | transition: border-color 150ms ease, box-shadow 150ms ease; |
| 488 | } |
| 489 | .wpdm-font-preview-main:focus { |
| 490 | border-color: var(--admin-color, #4a8eff); |
| 491 | box-shadow: 0 0 0 3px rgba(74, 142, 255, 0.1); |
| 492 | } |
| 493 | .wpdm-font-preview-main:empty::before { |
| 494 | content: attr(data-placeholder); |
| 495 | color: #94a3b8; |
| 496 | } |
| 497 | |
| 498 | /* Font Samples */ |
| 499 | .wpdm-font-preview-samples { |
| 500 | display: flex; |
| 501 | flex-direction: column; |
| 502 | gap: 12px; |
| 503 | margin-bottom: 20px; |
| 504 | } |
| 505 | .wpdm-font-sample { |
| 506 | color: #475569; |
| 507 | } |
| 508 | .wpdm-font-sample--heading { |
| 509 | font-size: 20px; |
| 510 | font-weight: 600; |
| 511 | color: #1e293b; |
| 512 | } |
| 513 | .wpdm-font-sample--body { |
| 514 | font-size: 15px; |
| 515 | line-height: 1.6; |
| 516 | } |
| 517 | .wpdm-font-sample--small { |
| 518 | font-size: 12px; |
| 519 | color: #64748b; |
| 520 | } |
| 521 | |
| 522 | /* Character Preview */ |
| 523 | .wpdm-font-preview-chars { |
| 524 | display: flex; |
| 525 | gap: 16px; |
| 526 | padding: 16px; |
| 527 | background: #fff; |
| 528 | border: 1px solid #e2e8f0; |
| 529 | border-radius: 8px; |
| 530 | } |
| 531 | .wpdm-font-preview-chars span { |
| 532 | font-size: 18px; |
| 533 | color: #64748b; |
| 534 | padding: 8px 16px; |
| 535 | background: #f8fafc; |
| 536 | border-radius: 6px; |
| 537 | } |
| 538 | |
| 539 | /* Color Scheme Options - Media Card Style */ |
| 540 | .wpdm-color-scheme-options { |
| 541 | display: flex; |
| 542 | gap: 12px; |
| 543 | } |
| 544 | .wpdm-scheme-option { |
| 545 | display: flex !important; |
| 546 | align-items: center; |
| 547 | gap: 16px; |
| 548 | padding: 16px 20px; |
| 549 | background: #f8fafc; |
| 550 | border: 2px solid #e2e8f0; |
| 551 | border-radius: 10px; |
| 552 | cursor: pointer; |
| 553 | transition: all 150ms ease; |
| 554 | width: 100%; |
| 555 | } |
| 556 | .wpdm-scheme-option:hover { |
| 557 | border-color: #cbd5e1; |
| 558 | background: #f1f5f9; |
| 559 | } |
| 560 | .wpdm-scheme-option.active { |
| 561 | border-color: var(--admin-color, #4a8eff); |
| 562 | background: rgba(74, 142, 255, 0.05); |
| 563 | } |
| 564 | .wpdm-scheme-option input[type="radio"] { |
| 565 | display: none; |
| 566 | } |
| 567 | .wpdm-scheme-icon { |
| 568 | display: flex; |
| 569 | align-items: center; |
| 570 | justify-content: center; |
| 571 | width: 44px; |
| 572 | height: 44px; |
| 573 | background: #fff; |
| 574 | border-radius: 10px; |
| 575 | color: #64748b; |
| 576 | box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| 577 | transition: all 150ms ease; |
| 578 | flex-shrink: 0; |
| 579 | } |
| 580 | .wpdm-scheme-option.active .wpdm-scheme-icon { |
| 581 | background: var(--admin-color, #4a8eff); |
| 582 | color: #fff; |
| 583 | box-shadow: 0 4px 12px rgba(74, 142, 255, 0.3); |
| 584 | } |
| 585 | .wpdm-scheme-text { |
| 586 | display: flex; |
| 587 | flex-direction: column; |
| 588 | gap: 2px; |
| 589 | } |
| 590 | .wpdm-scheme-label { |
| 591 | font-weight: 600; |
| 592 | font-size: 14px; |
| 593 | color: #1e293b; |
| 594 | line-height: 1.3; |
| 595 | } |
| 596 | .wpdm-scheme-desc { |
| 597 | font-size: 12px; |
| 598 | color: #64748b; |
| 599 | font-weight: 400; |
| 600 | line-height: 1.3; |
| 601 | } |
| 602 | .wpdm-scheme-option.active .wpdm-scheme-label { |
| 603 | color: var(--admin-color, #4a8eff); |
| 604 | } |
| 605 | |
| 606 | .color-control{ |
| 607 | padding: 0 !important; |
| 608 | height: 24px; |
| 609 | text-align: center; |
| 610 | } |
| 611 | .wp-picker-container .wp-color-result.button{ |
| 612 | width: 30px; |
| 613 | float: right; |
| 614 | padding: 2px !important; |
| 615 | height: 30px; |
| 616 | margin: 0 !important; |
| 617 | border: 0 !important; |
| 618 | border-radius: 500px; |
| 619 | } |
| 620 | .wp-picker-holder{ |
| 621 | position: absolute; |
| 622 | z-index: 999999; |
| 623 | margin-top: 26px; |
| 624 | } |
| 625 | .color-group{ |
| 626 | float: right; |
| 627 | margin-top: -2px !important; |
| 628 | margin-right: -12px !important; |
| 629 | } |
| 630 | .wp-picker-container{ |
| 631 | float: left; |
| 632 | } |
| 633 | .wp-color-result{ |
| 634 | border-bottom: 0 !important; |
| 635 | } |
| 636 | .wp-picker-input-wrap label{ |
| 637 | margin: 0 !important; |
| 638 | } |
| 639 | .wp-picker-container input[type="text"].wp-color-picker{ |
| 640 | margin: 0 !important; |
| 641 | box-shadow: none; |
| 642 | border-radius: 0; |
| 643 | height: 25px; |
| 644 | } |
| 645 | .wp-picker-input-wrap .button{ |
| 646 | border-bottom: 0; |
| 647 | border-radius: 0; |
| 648 | } |
| 649 | .wp-color-result-text{ |
| 650 | display: none; |
| 651 | } |
| 652 | .wp-picker-input-wrap{ |
| 653 | position: absolute; |
| 654 | margin-left: 28px; |
| 655 | width: 150px; |
| 656 | } |
| 657 | #__wpdm_google_font{ |
| 658 | width: 400px !important; |
| 659 | } |
| 660 | #__wpdm_ui_download_button_sc.btn-primary, |
| 661 | #__wpdm_ui_download_button.btn-primary{ |
| 662 | background: var(--color-primary) !important; |
| 663 | } |
| 664 | #__wpdm_ui_download_button_sc.btn-link, |
| 665 | #__wpdm_ui_download_button.btn-link { |
| 666 | color: var(--color-primary) !important; |
| 667 | } |
| 668 | </style> |
| 669 | <link rel="stylesheet" id="gfont" href="https://fonts.googleapis.com/css2?family=<?php echo get_option('__wpdm_google_font', 'Sen'); ?>" /> |
| 670 | |
| 671 | <script> |
| 672 | jQuery(function($){ |
| 673 | |
| 674 | // Font change handler |
| 675 | $('#__wpdm_google_font').on('change', function () { |
| 676 | let font = $(this).val(); |
| 677 | if (!font) { |
| 678 | $('#fontpreview').css('font-family', 'inherit'); |
| 679 | return; |
| 680 | } |
| 681 | let _font = font.split(':')[0]; |
| 682 | let fontFamily = _font.replace(/\+/ig, ' '); |
| 683 | let link = 'https://fonts.googleapis.com/css2?family=' + _font; |
| 684 | $('#gfont').attr('href', link); |
| 685 | $('#fontpreview').css('font-family', fontFamily); |
| 686 | }); |
| 687 | |
| 688 | // Font size buttons |
| 689 | $('.wpdm-font-size-btn').on('click', function() { |
| 690 | let size = $(this).data('size'); |
| 691 | $('.wpdm-font-size-btn').removeClass('active'); |
| 692 | $(this).addClass('active'); |
| 693 | $('.wpdm-font-preview-main').css('font-size', size + 'px'); |
| 694 | }); |
| 695 | |
| 696 | // Color Scheme Selection |
| 697 | $('.wpdm-scheme-option').on('click', function() { |
| 698 | $('.wpdm-scheme-option').removeClass('active'); |
| 699 | $(this).addClass('active'); |
| 700 | }); |
| 701 | |
| 702 | $('body').on('click', '#lasp', function () { |
| 703 | if($(this).is(':checked')) |
| 704 | $('.wrap.w3eden').removeClass('wpdms-body-centered'); |
| 705 | else |
| 706 | $('.wrap.w3eden').addClass('wpdms-body-centered'); |
| 707 | |
| 708 | }); |
| 709 | |
| 710 | $('body').on('click', '#pig', function () { |
| 711 | let font = $('#__wpdm_google_font').val(); |
| 712 | if(!font) { |
| 713 | alert('<?= esc_attr__('No font has been selected'); ?>'); |
| 714 | return false; |
| 715 | } |
| 716 | let _font = font.split(':'); |
| 717 | _font = _font[0]; |
| 718 | WPDM.popupWindow('https://fonts.google.com/specimen/'+_font, "Font Preview", 1000, 800); |
| 719 | }); |
| 720 | |
| 721 | $('.color-control').wpColorPicker({ |
| 722 | change: function (event, ui) { |
| 723 | let root = document.documentElement; |
| 724 | root.style.setProperty($(this).data('css-var'), ui.color.toString()); |
| 725 | } |
| 726 | }); |
| 727 | |
| 728 | $('.__wpdm_ui_download_button_color, .__wpdm_ui_download_button_size').on('change', function () { |
| 729 | $('#__wpdm_ui_download_button').attr('class', 'btn '+ $('.__wpdm_ui_download_button_color:checked').val() + ' ' + $('.__wpdm_ui_download_button_size:checked').val()); |
| 730 | }); |
| 731 | |
| 732 | $('.__wpdm_ui_download_button_sc_color, .__wpdm_ui_download_button_sc_size').on('change', function () { |
| 733 | $('#__wpdm_ui_download_button_sc').attr('class', 'btn '+ $('.__wpdm_ui_download_button_sc_color:checked').val() + ' ' + $('.__wpdm_ui_download_button_sc_size:checked').val()); |
| 734 | }); |
| 735 | |
| 736 | $('#__wpdm_ui_download_button_br, #__wpdm_ui_download_button_sc_br').on('change', function () { |
| 737 | $($(this).data('target')).css('border-radius', $(this).val()+'px'); |
| 738 | }); |
| 739 | |
| 740 | function generateGoogleFontUrl(fontJson) { |
| 741 | const family = fontJson.family.replace(/ /g, '+'); // Replace spaces with '+' |
| 742 | let url = `${family}`; |
| 743 | if(fontJson.axes) { |
| 744 | const weightAxis = fontJson.axes.find(axis => axis.tag === 'wght'); |
| 745 | let wghtRange = ''; |
| 746 | if (weightAxis) { |
| 747 | wghtRange = `${weightAxis.start}..${weightAxis.end}`; |
| 748 | url += `:wght@${wghtRange}`; |
| 749 | } |
| 750 | } |
| 751 | return url; |
| 752 | } |
| 753 | |
| 754 | $.getJSON("https://www.googleapis.com/webfonts/v1/webfonts?capability=VF&key=<?php echo $gappsk; ?>", function(fonts){ |
| 755 | const $select = $('#__wpdm_google_font'); |
| 756 | const selectedValue = $select.data('selected'); |
| 757 | |
| 758 | $select.append($("<option></option>").attr("value", '').text('<?= esc_attr__("-- Select a font --", WPDM_TEXT_DOMAIN); ?>')); |
| 759 | |
| 760 | for (let i = 0; i < fonts.items.length; i++) { |
| 761 | let value = generateGoogleFontUrl(fonts.items[i]); |
| 762 | let $option = $("<option></option>").attr("value", value).text(fonts.items[i].family); |
| 763 | if (value === selectedValue) { |
| 764 | $option.attr("selected", "selected"); |
| 765 | } |
| 766 | $select.append($option); |
| 767 | } |
| 768 | |
| 769 | // Hide loading, show select |
| 770 | $('#wpdm-font-loading').addClass('hidden'); |
| 771 | $select.select2({ |
| 772 | minimumResultsForSearch: 6, |
| 773 | placeholder: '<?= esc_attr__("Search fonts...", WPDM_TEXT_DOMAIN); ?>' |
| 774 | }); |
| 775 | }).fail(function() { |
| 776 | // Handle error |
| 777 | $('#wpdm-font-loading').html('<span style="color: #ef4444;"><?= esc_attr__("Failed to load fonts", WPDM_TEXT_DOMAIN); ?></span>'); |
| 778 | }); |
| 779 | |
| 780 | }); |
| 781 | </script> |
| 782 |