| 1 |
<?php |
| 2 |
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly |
| 3 |
|
| 4 |
/** |
| 5 |
* Setup wizard view |
| 6 |
* |
| 7 |
* @package '' |
| 8 |
* @since 7.4.14 |
| 9 |
*/ |
| 10 |
?> |
| 11 |
|
| 12 |
<!DOCTYPE html> |
| 13 |
<html lang="en"> |
| 14 |
<head> |
| 15 |
<meta charset="UTF-8"> |
| 16 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 17 |
<title><?php esc_html_e('WP VR - Setup Wizard', 'wpvr'); ?></title> |
| 18 |
<?php |
| 19 |
do_action('admin_enqueue_scripts'); |
| 20 |
do_action('admin_print_styles'); |
| 21 |
do_action('admin_head'); |
| 22 |
?> |
| 23 |
<script type="text/javascript"> |
| 24 |
var ajaxurl = '<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ); ?>'; |
| 25 |
var wpvrNonce = '<?php echo esc_js( wp_create_nonce( 'wpvr' ) ); ?>'; |
| 26 |
</script> |
| 27 |
</head> |
| 28 |
<body> |
| 29 |
<?php do_action('setup_wizard_before_onboarding_content'); ?> |
| 30 |
<div id="onboarding-app" class="step-vertical"> |
| 31 |
|
| 32 |
<!-- Steps 1-4 container with sidebar --> |
| 33 |
<div class="steps-container" id="steps-container" style="display: flex;"> |
| 34 |
<!-- Remind me later button positioned outside container --> |
| 35 |
<button class="btn-skip" id="wizard-exit"><?php echo esc_html__('Remind me later', 'wpvr'); ?></button> |
| 36 |
|
| 37 |
|
| 38 |
<aside class="sidebar" id="main-sidebar"> |
| 39 |
<div class="logo"> |
| 40 |
<svg width="89" height="40" viewBox="0 0 89 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M74.7954 7.66455V20.4491C77.3922 20.4491 79.4892 17.5861 79.4892 14.056C79.4892 10.5259 77.3874 7.66455 74.7954 7.66455Z" fill="#3f04fe"/><path d="M13.9254 7.58765V20.369C11.3286 20.369 9.23166 17.5059 9.23166 13.9775C9.23166 10.449 11.3319 7.58927 13.9254 7.58765Z" fill="#3f04fe"/><path d="M88.7924 30.0182C88.7924 35.5365 68.9152 39.9998 44.3962 39.9998C19.8772 39.9998 0 35.5316 0 30.0182C0 24.5048 19.8772 20.0431 44.3962 20.0431C68.9152 20.0431 88.7924 24.5048 88.7924 30.0182Z" fill="#3f04fe"/><path d="M83.3549 27.6869C83.3549 32.2021 65.9123 35.8621 44.4023 35.8621C22.8924 35.8621 5.44977 32.2021 5.44977 27.6869C5.44977 23.1716 22.894 19.5117 44.4104 19.5117C65.9269 19.5117 83.3549 23.1716 83.3549 27.6869Z" fill="#fff"/><path d="M67.2059 30.8959H21.5989C17.9309 30.8959 14.9445 27.7878 14.9445 23.9688V6.92706C14.9445 3.10809 17.9293 0 21.5989 0H67.2059C70.8739 0 73.8603 3.10809 73.8603 6.92706V23.9688C73.8603 27.7878 70.8772 30.8959 67.2059 30.8959Z" fill="#3f04fe"/><path d="M67.2335 1.06665H21.6266C18.5185 1.06665 15.9995 3.69108 15.9995 6.92739V23.9691C15.9995 27.2071 18.5185 29.8299 21.6266 29.8299H22.0859V29.812C28.8068 28.7084 36.3945 28.0867 44.4284 28.0867C52.4624 28.0867 60.0533 28.7084 66.7742 29.812V29.8299H67.2319C70.34 29.8299 72.8606 27.2071 72.8606 23.9691V6.92739C72.8622 3.69108 70.3416 1.06665 67.2335 1.06665Z" fill="#fff"/><path d="M22.4821 10.4197H24.6148L26.3628 18.4439L28.3818 10.4197H30.6005L32.5043 18.4001L34.2685 10.4197H36.4142L33.6421 20.7535H31.2968L29.4336 13.3898L27.4859 20.747L25.1536 20.7616L22.4821 10.4197Z" fill="#3f04fe"/><path d="M41.361 16.7852H39.699V20.7535H37.7076V10.4197H41.361C43.7501 10.4197 44.9446 11.8268 44.9446 13.617C44.9446 15.1865 43.9205 16.7852 41.361 16.7852ZM41.2766 15.1135C42.3997 15.1135 42.8996 14.5357 42.8996 13.617C42.8996 12.6708 42.4014 12.1076 41.2766 12.1076H39.699V15.1135H41.2766Z" fill="#3f04fe"/><path d="M56.5312 10.4197H58.6411L55.0023 20.7535H52.5986L48.9533 10.4197H51.086L53.8159 18.637L56.5312 10.4197Z" fill="#3f04fe"/><path d="M63.5688 10.4197C65.9563 10.4197 67.1508 11.8561 67.1508 13.5878C67.1508 14.8473 66.4838 16.1197 64.89 16.5644L67.2645 20.7535H64.9614L62.7719 16.7267H61.8338V20.7535H59.844V10.4197H63.5688ZM63.4974 12.1368H61.8338V15.1751H63.4974C64.6059 15.1751 65.1042 14.5681 65.1042 13.6365C65.1042 12.7049 64.6092 12.1368 63.4974 12.1368Z" fill="#3f04fe"/></svg> |
| 41 |
</div> |
| 42 |
<nav class="nav-steps"> |
| 43 |
<div class="nav-item active" data-step="step-vertical" data-number="1"><span class="nav-text">Industry</span></div> |
| 44 |
<div class="nav-item" data-step="step-template" data-number="2"><span class="nav-text">Template</span></div> |
| 45 |
<div class="nav-item" data-step="step-preview" data-number="3"><span class="nav-text">Preview</span></div> |
| 46 |
<div class="nav-item" data-step="step-success" data-number="4"><span class="nav-text">Publish</span></div> |
| 47 |
</nav> |
| 48 |
</aside> |
| 49 |
|
| 50 |
<main class="main-content main-content-steps"> |
| 51 |
<section class="step active full-width" id="step-vertical"> |
| 52 |
<div class="step-progress"> |
| 53 |
<div class="step-seg filled"></div><div class="step-seg"></div><div class="step-seg"></div><div class="step-seg"></div> |
| 54 |
<span class="step-count">1/4</span> |
| 55 |
</div> |
| 56 |
<h2 class="section-title"><?php echo esc_html__('What are you creating a virtual tour for?', 'wpvr'); ?></h2> |
| 57 |
<p class="section-sub"><?php echo esc_html__('We\'ll set things up with the right template for you.', 'wpvr'); ?></p> |
| 58 |
|
| 59 |
<div class="vertical-selection-grid"> |
| 60 |
<div class="v-card" data-vertical="real-estate"> |
| 61 |
<div class="v-icon">🏠</div> |
| 62 |
<h3><?php echo esc_html__('Real Estate', 'wpvr'); ?></h3> |
| 63 |
<p><?php echo esc_html__('Show property without a visit', 'wpvr'); ?></p> |
| 64 |
</div> |
| 65 |
<div class="v-card" data-vertical="hotel"> |
| 66 |
<div class="v-icon">🏨</div> |
| 67 |
<h3><?php echo esc_html__('Hotels & Resorts', 'wpvr'); ?></h3> |
| 68 |
<p><?php echo esc_html__('Experience before booking', 'wpvr'); ?></p> |
| 69 |
</div> |
| 70 |
<div class="v-card" data-vertical="school"> |
| 71 |
<div class="v-icon">🏫</div> |
| 72 |
<h3><?php echo esc_html__('Educational Institutions', 'wpvr'); ?></h3> |
| 73 |
<p><?php echo esc_html__('Campus tours & admissions', 'wpvr'); ?></p> |
| 74 |
</div> |
| 75 |
<div class="v-card" data-vertical="ecommerce"> |
| 76 |
<div class="v-icon">🛍</div> |
| 77 |
<h3><?php echo esc_html__('E-commerce', 'wpvr'); ?></h3> |
| 78 |
<p><?php echo esc_html__('Virtual shopping experience', 'wpvr'); ?></p> |
| 79 |
</div> |
| 80 |
<div class="v-card" data-vertical="exhibitions"> |
| 81 |
<div class="v-icon">🎨</div> |
| 82 |
<h3><?php echo esc_html__('Exhibitions', 'wpvr'); ?></h3> |
| 83 |
<p><?php echo esc_html__('Art & gallery showcases', 'wpvr'); ?></p> |
| 84 |
</div> |
| 85 |
<div class="v-card" data-vertical="offices"> |
| 86 |
<div class="v-icon">🏢</div> |
| 87 |
<h3><?php echo esc_html__('Offices', 'wpvr'); ?></h3> |
| 88 |
<p><?php echo esc_html__('Virtual office tours', 'wpvr'); ?></p> |
| 89 |
</div> |
| 90 |
<div class="v-card" data-vertical="showrooms"> |
| 91 |
<div class="v-icon">🏬</div> |
| 92 |
<h3><?php echo esc_html__('Showrooms', 'wpvr'); ?></h3> |
| 93 |
<p><?php echo esc_html__('Virtual showroom experiences', 'wpvr'); ?></p> |
| 94 |
</div> |
| 95 |
</div> |
| 96 |
|
| 97 |
<div class="skip-industry-container"> |
| 98 |
<a href="#" id="skip-industry-link" class="skip-link"><?php echo esc_html__("Skip — I'll upload my own image", 'wpvr'); ?></a> |
| 99 |
</div> |
| 100 |
|
| 101 |
<footer class="onboarding-footer" style="display: none;"> |
| 102 |
<!-- Hide footer for Step 1 --> |
| 103 |
</footer> |
| 104 |
</section> |
| 105 |
|
| 106 |
|
| 107 |
<section class="step" id="step-template"> |
| 108 |
<div class="step-progress"> |
| 109 |
<div class="step-seg filled"></div><div class="step-seg filled"></div><div class="step-seg"></div><div class="step-seg"></div> |
| 110 |
<span class="step-count">2/4</span> |
| 111 |
</div> |
| 112 |
<h2 class="section-title dynamic-title"><?php echo esc_html__('Show your property without another site visit', 'wpvr'); ?></h2> |
| 113 |
<p class="section-sub dynamic-sub"><?php echo esc_html__('Most agents publish their first property tour in minutes.', 'wpvr'); ?></p> |
| 114 |
|
| 115 |
<div class="template-container"> |
| 116 |
<!-- Upload Zone --> |
| 117 |
<div class="template-upload-zone" id="template-upload-zone"> |
| 118 |
<div class="template-upload-icon"> |
| 119 |
<svg width="56" height="56" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="85" height="85" rx="14.5" fill="#fff" stroke="#201cfe"/><path d="M40.6209 33.5355L40.6506 52.5015H44.5268L44.4971 33.5587L48.0683 37.1261L50.8087 34.3843L45.7452 29.3247C45.3253 28.9047 44.8267 28.5716 44.278 28.3443C43.7294 28.117 43.1413 28 42.5474 28C41.9535 28 41.3654 28.117 40.8167 28.3443C40.268 28.5716 39.7695 28.9047 39.3496 29.3247L34.286 34.3882L37.0264 37.1261L40.6209 33.5355Z" fill="#201cfe"/><path d="M54.133 48.6235V55.0838H30.8761V48.6235H27V55.0838C27 56.1118 27.4084 57.0977 28.1353 57.8246C28.8622 58.5515 29.8481 58.9599 30.8761 58.9599H54.133C55.1611 58.9599 56.147 58.5515 56.8739 57.8246C57.6008 57.0977 58.0092 56.1118 58.0092 55.0838V48.6235H54.133Z" fill="#201cfe"/></svg> |
| 120 |
</div> |
| 121 |
<p class="template-upload-label"><?php echo esc_html__('Upload my own 360 photo', 'wpvr'); ?></p> |
| 122 |
<p class="template-upload-hint"> |
| 123 |
<?php |
| 124 |
echo wp_kses( |
| 125 |
sprintf( |
| 126 |
/* translators: %s: link to browse */ |
| 127 |
__('Drag & drop your 360° image or %s', 'wpvr'), |
| 128 |
'<a href="#" id="btn-upload-own-image" class="template-browse-link">' . esc_html__('click to browse', 'wpvr') . '</a>' |
| 129 |
), |
| 130 |
array( |
| 131 |
'a' => array('href' => array(), 'id' => array(), 'class' => array()) |
| 132 |
) |
| 133 |
); |
| 134 |
?> |
| 135 |
</p> |
| 136 |
<p class="template-upload-supported"><?php echo esc_html__('Supported files: JPEG, PNG, WebP', 'wpvr'); ?></p> |
| 137 |
</div> |
| 138 |
|
| 139 |
<!-- Use Template CTA --> |
| 140 |
<div class="template-cta-row"> |
| 141 |
<button class="btn-use-template" id="use-template-btn"><?php echo esc_html__('USE PROPERTY TEMPLATE', 'wpvr'); ?></button> |
| 142 |
</div> |
| 143 |
</div> |
| 144 |
|
| 145 |
<footer class="onboarding-footer template-footer"> |
| 146 |
<button class="btn-back"> |
| 147 |
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.0347 0.75L0.75 5.0347L5.0347 9.3194" stroke="#6d667d" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 5.03467H0.869995" stroke="#6d667d" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 148 |
<?php echo esc_html__('Back', 'wpvr'); ?> |
| 149 |
</button> |
| 150 |
</footer> |
| 151 |
</section> |
| 152 |
|
| 153 |
|
| 154 |
<section class="step" id="step-preview"> |
| 155 |
<div class="step-progress"> |
| 156 |
<div class="step-seg filled"></div><div class="step-seg filled"></div><div class="step-seg filled"></div><div class="step-seg"></div> |
| 157 |
<span class="step-count">3/4</span> |
| 158 |
</div> |
| 159 |
<h2 class="section-title dynamic-prev-title"><?php echo esc_html__('This is how buyers will experience your listing', 'wpvr'); ?></h2> |
| 160 |
<p class="section-sub"><?php echo esc_html__('Interactive, immersive, and accessible on any device.', 'wpvr'); ?></p> |
| 161 |
|
| 162 |
<div class="tour-preview-window"> |
| 163 |
<div id="panorama-container" style="display: none;"> |
| 164 |
<div id="panorama"></div> |
| 165 |
<div class="preview-controls"> |
| 166 |
<span>👆 <?php echo esc_html__('Drag to rotate', 'wpvr'); ?></span> |
| 167 |
<span>🔍 <?php echo esc_html__('Scroll to zoom', 'wpvr'); ?></span> |
| 168 |
<span>👆 <?php echo esc_html__('Click to add hotspot', 'wpvr'); ?></span> |
| 169 |
</div> |
| 170 |
</div> |
| 171 |
<div class="image-placeholder" id="preview-image-placeholder"> |
| 172 |
<div class="preview-controls"> |
| 173 |
<span>👆 <?php echo esc_html__('Drag to rotate', 'wpvr'); ?></span> |
| 174 |
<span>🔍 <?php echo esc_html__('Scroll to zoom', 'wpvr'); ?></span> |
| 175 |
</div> |
| 176 |
</div> |
| 177 |
</div> |
| 178 |
|
| 179 |
<!-- Hotspot List --> |
| 180 |
<div id="hotspot-list" class="hotspot-list"></div> |
| 181 |
|
| 182 |
<!-- Premium feature popup (free version only) --> |
| 183 |
<?php if ( ! apply_filters( 'is_wpvr_pro_active', false ) ) : ?> |
| 184 |
<?php require plugin_dir_path( __FILE__ ) . 'wpvr-premium-feature-popup.php'; ?> |
| 185 |
<?php endif; ?> |
| 186 |
|
| 187 |
<!-- Hotspot Modal --> |
| 188 |
<div class="hotspot-modal" id="hotspot-modal" style="display: none;"> |
| 189 |
<div class="hotspot-modal-content"> |
| 190 |
<div class="hotspot-modal-header"> |
| 191 |
<h3><?php echo esc_html__('Add Hotspot', 'wpvr'); ?></h3> |
| 192 |
<button class="hotspot-modal-close" id="hotspot-modal-close">×</button> |
| 193 |
</div> |
| 194 |
<div class="hotspot-modal-body"> |
| 195 |
<label for="hotspot-text"><?php echo esc_html__('Hotspot Text', 'wpvr'); ?></label> |
| 196 |
<input type="text" id="hotspot-text" placeholder="<?php echo esc_attr__('Enter information about this location...', 'wpvr'); ?>" maxlength="100"> |
| 197 |
<div class="hotspot-modal-actions"> |
| 198 |
<button class="btn-secondary" id="hotspot-cancel"><?php echo esc_html__('Cancel', 'wpvr'); ?></button> |
| 199 |
<button class="btn-primary" id="hotspot-save"><?php echo esc_html__('Add Hotspot', 'wpvr'); ?></button> |
| 200 |
</div> |
| 201 |
</div> |
| 202 |
</div> |
| 203 |
</div> |
| 204 |
|
| 205 |
<footer class="onboarding-footer"> |
| 206 |
<button class="btn-back"> |
| 207 |
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.0347 0.75L0.75 5.0347L5.0347 9.3194" stroke="#6d667d" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 5.03467H0.869995" stroke="#6d667d" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 208 |
<?php echo esc_html__('Back', 'wpvr'); ?> |
| 209 |
</button> |
| 210 |
<div class="footer-right"> |
| 211 |
<button class="btn-primary-outline next-btn" data-next="step-success" id="publish-btn"><?php echo esc_html__('Publish Tour', 'wpvr'); ?></button> |
| 212 |
</div> |
| 213 |
</footer> |
| 214 |
</section> |
| 215 |
|
| 216 |
<section class="step" id="step-success"> |
| 217 |
<div class="step-progress"> |
| 218 |
<div class="step-seg filled"></div><div class="step-seg filled"></div><div class="step-seg filled"></div><div class="step-seg filled"></div> |
| 219 |
<span class="step-count">4/4</span> |
| 220 |
</div> |
| 221 |
<h2 class="section-title dynamic-success-title"><?php echo esc_html__('Your tour is published!', 'wpvr'); ?></h2> |
| 222 |
<p class="section-sub dynamic-success-sub"><?php echo esc_html__('Your virtual tour has been created and is ready to be displayed on your website.', 'wpvr'); ?></p> |
| 223 |
|
| 224 |
<!-- Shortcode section will be injected here via JavaScript --> |
| 225 |
<div class="primary-cta-container"></div> |
| 226 |
|
| 227 |
<!-- Edit Tour Button --> |
| 228 |
<div class="edit-tour-container"> |
| 229 |
<a class="btn-edit-tour" id="edit-tour-btn"><?php echo esc_html__('Edit Your Tour', 'wpvr'); ?></a> |
| 230 |
</div> |
| 231 |
|
| 232 |
<!-- Telemetry Consent Block --> |
| 233 |
<div class="wizard-consent-block"> |
| 234 |
<label class="consent-label" for="consent-checkbox"> |
| 235 |
<input type="checkbox" id="consent-checkbox" name="consent-checkbox" checked> |
| 236 |
<span> |
| 237 |
<?php echo esc_html__('I agree to share non-sensitive diagnostic data to help improve WP VR.', 'wpvr'); ?> |
| 238 |
<br><small style="font-weight: normal; font-size: 11px; opacity: 0.8;"><?php echo esc_html__('(You can change this in WP VR settings anytime)', 'wpvr'); ?></small> |
| 239 |
</span> |
| 240 |
</label> |
| 241 |
</div> |
| 242 |
|
| 243 |
<footer class="onboarding-footer"> |
| 244 |
<button class="btn-back" onclick="location.reload()"><?php echo esc_html__('Start Over', 'wpvr'); ?></button> |
| 245 |
<div class="footer-right"> |
| 246 |
<button class="btn-primary-outline"><?php echo esc_html__('Go to listing', 'wpvr'); ?></button> |
| 247 |
</div> |
| 248 |
</footer> |
| 249 |
</section> |
| 250 |
</main> |
| 251 |
</div> |
| 252 |
</div> |
| 253 |
<?php wp_print_scripts(); ?> |
| 254 |
<?php do_action('admin_footer'); ?> |
| 255 |
</body> |
| 256 |
</html> |
