ecommerce
6 days ago
tools
3 months ago
add_new_instructor.php
2 years ago
addons.php
1 year ago
announcements.php
3 months ago
answer.php
3 years ago
course-builder.php
1 year ago
course-list.php
3 months ago
enable_disable_addons.php
11 months ago
feature-promotion.php
2 years ago
get-pro.php
8 months ago
instructors.php
6 days ago
question_answer.php
11 months ago
quiz_attempts.php
6 days ago
students.php
6 days ago
tools.php
3 years ago
view_attempt.php
6 days ago
welcome.php
3 days ago
whats-new.php
11 months ago
withdraw_requests.php
3 months ago
welcome.php
1358 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Welcome page |
| 4 | * |
| 5 | * @package Tutor\Views |
| 6 | * @subpackage Tutor\Welcome |
| 7 | * @author Themeum <support@themeum.com> |
| 8 | * @link https://themeum.com |
| 9 | * @since 1.0.0 |
| 10 | */ |
| 11 | |
| 12 | defined( 'ABSPATH' ) || exit; |
| 13 | |
| 14 | $has_pro = tutor()->has_pro; |
| 15 | $tutor_pricing_page = 'https://tutorlms.com/pricing'; |
| 16 | $tutor_home_page = 'https://tutorlms.com'; |
| 17 | $asset_base = 'https://tutor-lms.s3.us-east-1.amazonaws.com/whats-new/'; |
| 18 | |
| 19 | $action_button_text = $has_pro ? __( 'Learn more', 'tutor' ) : __( 'Get Pro', 'tutor' ); |
| 20 | $action_button_url = $has_pro ? $tutor_home_page : $tutor_pricing_page; |
| 21 | |
| 22 | $render_action_button = function ( $text, $pro_url = '' ) use ( $has_pro, $tutor_pricing_page, $tutor_home_page ) { |
| 23 | $url = $has_pro ? ( $pro_url ? $pro_url : $tutor_home_page ) : $tutor_pricing_page; |
| 24 | ?> |
| 25 | <a href="<?php echo esc_url( $url ); ?>" target="_blank" class="tutor-section-action"> |
| 26 | <?php echo esc_html( $text ); ?> |
| 27 | </a> |
| 28 | <?php |
| 29 | }; |
| 30 | |
| 31 | /** |
| 32 | * Render a single feature card (title + description + image). |
| 33 | * |
| 34 | * $card keys: title, desc, image (relative to $asset_base), class (optional), grid_area (optional), icon (optional). |
| 35 | */ |
| 36 | $render_card = function ( $card ) use ( $asset_base ) { |
| 37 | $classes = array_filter( array( 'tutor-section-card', $card['class'] ?? '' ) ); |
| 38 | ?> |
| 39 | <div class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"<?php echo isset( $card['grid_area'] ) ? ' style="grid-area: ' . esc_attr( $card['grid_area'] ) . ';"' : ''; ?>> |
| 40 | <?php if ( ! empty( $card['icon'] ) ) : ?> |
| 41 | <div class="tutor-section-card-icon"><?php echo $card['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- trusted inline SVG. ?></div> |
| 42 | <?php endif; ?> |
| 43 | <?php if ( ! empty( $card['title'] ) || ! empty( $card['desc'] ) ) : ?> |
| 44 | <div class="tutor-section-card-title"> |
| 45 | <?php if ( ! empty( $card['title'] ) ) : ?> |
| 46 | <h6><?php echo esc_html( $card['title'] ); ?></h6> |
| 47 | <?php endif; ?> |
| 48 | <?php if ( ! empty( $card['desc'] ) ) : ?> |
| 49 | <p><?php echo esc_html( $card['desc'] ); ?></p> |
| 50 | <?php endif; ?> |
| 51 | </div> |
| 52 | <?php endif; ?> |
| 53 | |
| 54 | <?php if ( ! empty( $card['image'] ) ) : ?> |
| 55 | <div class="tutor-section-card-image"> |
| 56 | <img src="<?php echo esc_url( $asset_base . $card['image'] ); ?>" alt="<?php echo esc_attr( $card['title'] ?? '' ); ?>"> |
| 57 | </div> |
| 58 | <?php endif; ?> |
| 59 | </div> |
| 60 | <?php |
| 61 | }; |
| 62 | |
| 63 | // -------------------------------------------------------------------------- |
| 64 | // Card data. Grid placement is handled inline via style="grid-area" per card, |
| 65 | // not inline styles. |
| 66 | // -------------------------------------------------------------------------- |
| 67 | |
| 68 | $dashboard_cards = array( |
| 69 | array( |
| 70 | 'title' => __( 'New dashboard with clarity & purpose', 'tutor' ), |
| 71 | 'desc' => __( 'Everything a student needs — enrolled courses, progress, and upcoming content all laid out clearly from the moment they log in.', 'tutor' ), |
| 72 | 'image' => 'dashboard.webp', |
| 73 | ), |
| 74 | array( |
| 75 | 'title' => __( 'Navigation that feels natural', 'tutor' ), |
| 76 | 'desc' => __( 'A cleaner in-course layout with visible progress, structured topics, and lesson status so students always know where they are and what\'s next.', 'tutor' ), |
| 77 | 'image' => 'navigation.webp', |
| 78 | 'class' => 'tutor-section-card-navigation', |
| 79 | ), |
| 80 | ); |
| 81 | |
| 82 | $learner_cards = array( |
| 83 | array( |
| 84 | 'title' => __( 'Courses', 'tutor' ), |
| 85 | 'desc' => __( 'All enrolled courses, progress tracking, and continue-learning shortcuts organized in one clear view.', 'tutor' ), |
| 86 | 'image' => 'courses.webp', |
| 87 | ), |
| 88 | array( |
| 89 | 'title' => __( 'Quiz attempts', 'tutor' ), |
| 90 | 'desc' => __( 'A full log of every quiz attempt — scores, correct answers, and time taken, so students always know where they stand.', 'tutor' ), |
| 91 | 'image' => 'quiz-attempts.webp', |
| 92 | ), |
| 93 | array( |
| 94 | 'title' => __( 'Notes', 'tutor' ), |
| 95 | 'desc' => __( 'Highlight key moments from lessons and videos, jot down thoughts, and build a personal study guide without ever leaving the course.', 'tutor' ), |
| 96 | 'image' => 'notes.webp', |
| 97 | 'class' => 'tutor-section-card-notes', |
| 98 | ), |
| 99 | array( |
| 100 | 'title' => __( 'Discussions', 'tutor' ), |
| 101 | 'desc' => __( 'Ask questions, share thoughts, and get answers from instructors and peers, right inside the course.', 'tutor' ), |
| 102 | 'image' => 'discussions.webp', |
| 103 | ), |
| 104 | ); |
| 105 | |
| 106 | $interactive_cards = array( |
| 107 | array( |
| 108 | 'title' => __( 'Puzzle', 'tutor' ), |
| 109 | 'image' => 'puzzle.webp', |
| 110 | 'grid_area' => 'puzzle', |
| 111 | ), |
| 112 | array( |
| 113 | 'title' => __( 'Image Marking', 'tutor' ), |
| 114 | 'image' => 'image-marking.webp', |
| 115 | 'grid_area' => 'image-marking', |
| 116 | ), |
| 117 | array( |
| 118 | 'title' => __( 'Graph', 'tutor' ), |
| 119 | 'image' => 'graph.webp', |
| 120 | 'grid_area' => 'graph', |
| 121 | ), |
| 122 | array( |
| 123 | 'title' => __( 'Range', 'tutor' ), |
| 124 | 'image' => 'range.webp', |
| 125 | 'grid_area' => 'range', |
| 126 | ), |
| 127 | array( |
| 128 | 'title' => __( 'Pin', 'tutor' ), |
| 129 | 'image' => 'pin.webp', |
| 130 | 'grid_area' => 'pin', |
| 131 | ), |
| 132 | ); |
| 133 | |
| 134 | $instructor_cards = array( |
| 135 | array( |
| 136 | 'title' => __( 'Learners', 'tutor' ), |
| 137 | 'desc' => __( 'A full student roster with registration dates, enrolled courses, and activity — everything needed to stay on top of who\'s learning what.', 'tutor' ), |
| 138 | 'image' => 'learners.webp', |
| 139 | 'grid_area' => 'learners', |
| 140 | ), |
| 141 | array( |
| 142 | 'title' => __( 'Assignments', 'tutor' ), |
| 143 | 'desc' => __( 'Review, grade, and track every submitted assignment across all courses, with pass marks, deadlines, and results in one view.', 'tutor' ), |
| 144 | 'image' => 'assignments.webp', |
| 145 | 'grid_area' => 'assignments', |
| 146 | ), |
| 147 | array( |
| 148 | 'title' => __( 'Announcements', 'tutor' ), |
| 149 | 'desc' => __( 'Send course-specific announcements to students directly from the dashboard, keeping everyone informed without leaving the platform.', 'tutor' ), |
| 150 | 'image' => 'announcements.webp', |
| 151 | 'grid_area' => 'announcements', |
| 152 | ), |
| 153 | ); |
| 154 | |
| 155 | // A11y feature card icons are small trusted inline SVGs (decorative, hidden from AT). |
| 156 | $a11y_feature_cards = array( |
| 157 | array( |
| 158 | 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".7" stroke-width="1.7" d="M24 28V14.667m2.667 10L24 28l-2.667-3.334m5.334-7.333L24 14.667l-2.667 2.666M12 6.667v16m0 0H9.333m2.667 0h2.667M20 9.333V6.667H4v2.666"/></svg>', |
| 159 | 'title' => __( 'Font size control', 'tutor' ), |
| 160 | 'desc' => __( 'Adjustable font sizes let students set text to a comfortable reading size, from compact to large, without affecting the overall layout.', 'tutor' ), |
| 161 | 'class' => 'tutor-section-feature-card', |
| 162 | 'grid_area' => 'font', |
| 163 | ), |
| 164 | array( |
| 165 | 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".7" stroke-width="1.7" d="M16 28.8c7.07 0 12.8-5.73 12.8-12.8S23.07 3.2 16 3.2 3.2 8.93 3.2 16 8.93 28.8 16 28.8"/><path fill="#333741" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".7" stroke-width="1.7" d="M15.999 23.68a7.68 7.68 0 1 0 0-15.36z"/></svg>', |
| 166 | 'title' => __( 'High contrast', 'tutor' ), |
| 167 | 'desc' => __( 'A high contrast toggle that sharpens visibility for students with low vision or anyone learning in challenging lighting conditions', 'tutor' ), |
| 168 | 'class' => 'tutor-section-feature-card', |
| 169 | 'grid_area' => 'contrast', |
| 170 | ), |
| 171 | array( |
| 172 | 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity=".7" stroke-width="1.7" d="M29.334 16S23.363 24 16 24 2.667 16 2.667 16 8.637 8 16 8s13.334 8 13.334 8"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity=".7" stroke-width="1.7" d="M18.828 18.828a4 4 0 1 1-5.656-5.656 4 4 0 0 1 5.656 5.656"/></svg>', |
| 173 | 'title' => __( 'Multiple vision mode', 'tutor' ), |
| 174 | 'desc' => __( 'Color filter options including Protanopia, Deuteranopia, and Deuteranomaly support students with different types of color blindness.', 'tutor' ), |
| 175 | 'class' => 'tutor-section-feature-card', |
| 176 | 'grid_area' => 'vision', |
| 177 | ), |
| 178 | array( |
| 179 | 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path fill="#333741" d="M8.985 24a.78.78 0 0 1-.57-.23.77.77 0 0 1-.23-.572.78.78 0 0 1 .8-.798H19.6q-1.36-.987-2.008-2.25-.648-1.261-.755-2.55h-5.021a.78.78 0 0 1-.571-.23.77.77 0 0 1-.23-.572.78.78 0 0 1 .8-.798h5.022q.17-1.35.816-2.613.65-1.26 1.947-2.187H3.2a.784.784 0 0 1-.8-.802.76.76 0 0 1 .23-.57.78.78 0 0 1 .57-.228H24q2.988 0 5.094 2.106 2.106 2.102 2.106 5.09 0 2.986-2.106 5.095-2.106 2.11-5.094 2.11zM24 22.4q2.307 0 3.953-1.646Q29.6 19.107 29.6 16.8t-1.647-3.953T24 11.2t-3.954 1.647T18.4 16.8t1.646 3.954T24 22.4M1.6 17.6a.784.784 0 0 1-.8-.802.76.76 0 0 1 .23-.57A.78.78 0 0 1 1.6 16h7.016q.339 0 .57.23.23.231.23.572a.77.77 0 0 1-.23.57.78.78 0 0 1-.57.228zM3.2 24a.784.784 0 0 1-.8-.802.76.76 0 0 1 .23-.57.78.78 0 0 1 .57-.228h2.585q.34 0 .57.23a.77.77 0 0 1 .229.572.78.78 0 0 1-.8.798z"/><path stroke="#000" stroke-opacity=".7" stroke-width="1.7" d="M21.593 22.796q.595.24 1.242.354h-.756zm1.244-12.346a6 6 0 0 0-1.188.33l.464-.33z"/></svg>', |
| 180 | 'title' => __( 'Reduced motion', 'tutor' ), |
| 181 | 'desc' => __( 'Students sensitive to motion can reduce or disable animations and hover effects across the entire platform.', 'tutor' ), |
| 182 | 'class' => 'tutor-section-feature-card', |
| 183 | 'grid_area' => 'motion', |
| 184 | ), |
| 185 | ); |
| 186 | ?> |
| 187 | |
| 188 | <style type="text/css"> |
| 189 | .notice, .tutor-user-registration-notice-wrapper, #wpbody-content .error { |
| 190 | display: none; |
| 191 | } |
| 192 | |
| 193 | #wpbody-content { |
| 194 | padding-bottom: 0px; |
| 195 | } |
| 196 | |
| 197 | .tutor-welcome { |
| 198 | margin-left: -20px; |
| 199 | background-color: rgb(255, 255, 255); |
| 200 | position: relative; |
| 201 | } |
| 202 | .tutor-welcome .tutor-welcome-dismiss-bar { |
| 203 | position: absolute; |
| 204 | top: 24px; |
| 205 | width: 100%; |
| 206 | display: flex; |
| 207 | justify-content: flex-end; |
| 208 | z-index: 10; |
| 209 | |
| 210 | a { |
| 211 | margin-inline-end: 24px; |
| 212 | max-width: fit-content; |
| 213 | } |
| 214 | } |
| 215 | .tutor-welcome .tutor-hero-image { |
| 216 | width: 100%; |
| 217 | height: auto; |
| 218 | max-width: 100%; |
| 219 | } |
| 220 | .tutor-welcome .tutor-section-layout { |
| 221 | display: flex; |
| 222 | flex-direction: column; |
| 223 | gap: 128px; |
| 224 | max-width: 1280px; |
| 225 | margin: 0 auto; |
| 226 | padding: 64px 24px; |
| 227 | } |
| 228 | .tutor-welcome .tutor-section-title { |
| 229 | display: flex; |
| 230 | flex-direction: row; |
| 231 | align-items: flex-end; |
| 232 | justify-content: space-between; |
| 233 | gap: 24px; |
| 234 | } |
| 235 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center { |
| 236 | display: flex; |
| 237 | flex-direction: column; |
| 238 | gap: 16px; |
| 239 | flex-basis: 50%; |
| 240 | } |
| 241 | .tutor-welcome .tutor-section-title-left p, .tutor-welcome .tutor-section-title-center p { |
| 242 | font-size: 0.875rem; |
| 243 | line-height: 1.125rem; |
| 244 | letter-spacing: 0.125em; |
| 245 | font-weight: 400; |
| 246 | text-transform: uppercase; |
| 247 | color: rgba(0, 0, 0, 0.68); |
| 248 | margin: 0; |
| 249 | } |
| 250 | .tutor-welcome .tutor-section-title-left h2, .tutor-welcome .tutor-section-title-center h2 { |
| 251 | font-size: 3rem; |
| 252 | line-height: 3.5rem; |
| 253 | letter-spacing: -0.02em; |
| 254 | font-weight: 500; |
| 255 | color: rgb(15, 15, 15); |
| 256 | margin: 0; |
| 257 | } |
| 258 | .tutor-welcome .tutor-section-title-center { |
| 259 | flex-basis: 100%; |
| 260 | text-align: center; |
| 261 | align-items: center; |
| 262 | } |
| 263 | .tutor-welcome .tutor-section-title-center p:last-of-type { |
| 264 | text-transform: none; |
| 265 | letter-spacing: 0em; |
| 266 | } |
| 267 | .tutor-welcome .tutor-section-title-right { |
| 268 | display: flex; |
| 269 | flex-direction: column; |
| 270 | gap: 20px; |
| 271 | max-width: 400px; |
| 272 | width: 100%; |
| 273 | flex-basis: 50%; |
| 274 | } |
| 275 | .tutor-welcome .tutor-section-title-right p { |
| 276 | font-size: 1rem; |
| 277 | line-height: 1.375rem; |
| 278 | letter-spacing: 0em; |
| 279 | font-weight: 400; |
| 280 | color: rgba(0, 0, 0, 0.68); |
| 281 | margin: 0; |
| 282 | } |
| 283 | .tutor-welcome .tutor-section-wrapper { |
| 284 | display: flex; |
| 285 | flex-direction: column; |
| 286 | gap: 56px; |
| 287 | } |
| 288 | .tutor-welcome .tutor-section-card { |
| 289 | display: flex; |
| 290 | flex-direction: column; |
| 291 | justify-content: space-between; |
| 292 | border-radius: 20px; |
| 293 | background-color: rgba(242, 242, 242, 1); |
| 294 | overflow: hidden; |
| 295 | } |
| 296 | .tutor-welcome .tutor-section-card-icon { |
| 297 | padding: 32px 32px 16px 32px; |
| 298 | } |
| 299 | .tutor-welcome .tutor-section-card-title { |
| 300 | display: flex; |
| 301 | flex-direction: column; |
| 302 | padding: 32px; |
| 303 | gap: 10px; |
| 304 | } |
| 305 | .tutor-welcome .tutor-section-card-title h6 { |
| 306 | font-size: 1.25rem; |
| 307 | line-height: 1.75rem; |
| 308 | letter-spacing: -0.005em; |
| 309 | font-weight: 500; |
| 310 | color: rgb(15, 15, 15); |
| 311 | margin: 0; |
| 312 | } |
| 313 | .tutor-welcome .tutor-section-card-title p { |
| 314 | margin: 0px; |
| 315 | font-size: 1rem; |
| 316 | line-height: 1.375rem; |
| 317 | letter-spacing: 0em; |
| 318 | font-weight: 400; |
| 319 | color: rgba(0, 0, 0, 0.68); |
| 320 | } |
| 321 | .tutor-welcome .tutor-section-card-image { |
| 322 | display: flex; |
| 323 | position: relative; |
| 324 | overflow: hidden; |
| 325 | } |
| 326 | .tutor-welcome .tutor-section-card-image img { |
| 327 | width: 100%; |
| 328 | height: auto; |
| 329 | transition: opacity 0.5s ease-in-out; |
| 330 | } |
| 331 | .tutor-welcome .tutor-section-card-image .tutor-img-kids { |
| 332 | position: absolute; |
| 333 | top: 0; |
| 334 | left: 0; |
| 335 | opacity: 0; |
| 336 | } |
| 337 | .tutor-welcome .tutor-section-card-image.show-kids .tutor-img-default { |
| 338 | opacity: 0; |
| 339 | } |
| 340 | .tutor-welcome .tutor-section-card-image.show-kids .tutor-img-kids { |
| 341 | opacity: 1; |
| 342 | } |
| 343 | .tutor-welcome .tutor-section-cards { |
| 344 | display: grid; |
| 345 | grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); |
| 346 | gap: 16px; |
| 347 | } |
| 348 | .tutor-welcome .tutor-section-action { |
| 349 | display: flex; |
| 350 | align-items: center; |
| 351 | justify-content: center; |
| 352 | padding: 8px 18px; |
| 353 | font-size: 1rem; |
| 354 | line-height: 1.375rem; |
| 355 | font-weight: 500; |
| 356 | color: rgb(255, 255, 255); |
| 357 | border-radius: 50px; |
| 358 | max-width: 196px; |
| 359 | width: 100%; |
| 360 | text-decoration: none; |
| 361 | background-color: rgb(15, 15, 15); |
| 362 | transition: all 0.2s ease; |
| 363 | gap: 6px; |
| 364 | cursor: pointer; |
| 365 | } |
| 366 | .tutor-welcome .tutor-section-action svg { |
| 367 | flex-shrink: 0; |
| 368 | } |
| 369 | .tutor-welcome .tutor-section-action:hover, .tutor-welcome .tutor-section-action:focus { |
| 370 | background-color: rgba(15, 15, 15, 0.8); |
| 371 | } |
| 372 | .tutor-welcome .tutor-section-action-outline { |
| 373 | background-color: transparent; |
| 374 | border: 1px solid rgb(217, 217, 217); |
| 375 | color: rgb(255, 255, 255); |
| 376 | } |
| 377 | .tutor-welcome .tutor-section-action-outline:hover, .tutor-welcome .tutor-section-action-outline:focus { |
| 378 | background-color: rgb(217, 217, 217); |
| 379 | color: rgb(15, 15, 15); |
| 380 | } |
| 381 | .tutor-welcome .tutor-learning-mode-button { |
| 382 | display: block; |
| 383 | position: relative; |
| 384 | border: none; |
| 385 | background-color: rgb(255, 255, 255); |
| 386 | cursor: pointer; |
| 387 | padding: 5px; |
| 388 | width: 48px; |
| 389 | height: 48px; |
| 390 | aspect-ratio: 1/1; |
| 391 | filter: grayscale(1); |
| 392 | opacity: 0.6; |
| 393 | border-radius: 8px; |
| 394 | transition: filter 0.3s ease, opacity 0.3s ease; |
| 395 | } |
| 396 | .tutor-welcome .tutor-learning-mode-button .progress-border { |
| 397 | position: absolute; |
| 398 | top: 0; |
| 399 | left: 0; |
| 400 | width: 100%; |
| 401 | height: 100%; |
| 402 | pointer-events: none; |
| 403 | } |
| 404 | .tutor-welcome .tutor-learning-mode-button .progress-border rect { |
| 405 | fill: none; |
| 406 | stroke: rgb(2, 101, 225); |
| 407 | stroke-width: 2px; |
| 408 | stroke-dasharray: 184; |
| 409 | stroke-dashoffset: 184; |
| 410 | } |
| 411 | .tutor-welcome .tutor-learning-mode-button.active { |
| 412 | filter: grayscale(0); |
| 413 | opacity: 1; |
| 414 | } |
| 415 | .tutor-welcome .tutor-learning-mode-button.active .progress-border rect { |
| 416 | animation: buttonBorderProgress 3s linear forwards; |
| 417 | } |
| 418 | @keyframes buttonBorderProgress { |
| 419 | 0% { |
| 420 | stroke-dashoffset: 184; |
| 421 | } |
| 422 | 100% { |
| 423 | stroke-dashoffset: 0; |
| 424 | } |
| 425 | } |
| 426 | .tutor-welcome .tutor-lm-text-transition { |
| 427 | transition: opacity 0.3s ease; |
| 428 | } |
| 429 | .tutor-welcome .tutor-lm-text-transition.fading { |
| 430 | opacity: 0; |
| 431 | } |
| 432 | .tutor-welcome .tutor-section-dashboard { |
| 433 | padding-top: 64px; |
| 434 | } |
| 435 | .tutor-welcome .tutor-section-dashboard .tutor-section-cards .tutor-section-card-navigation { |
| 436 | background-image: url("https://tutor-lms.s3.us-east-1.amazonaws.com/whats-new/navigation-bg.webp"); |
| 437 | background-size: cover; |
| 438 | h6, p { |
| 439 | color: #fff; |
| 440 | } |
| 441 | } |
| 442 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 443 | grid-template-columns: repeat(6, 1fr); |
| 444 | grid-template-areas: "puzzle puzzle puzzle image-marking image-marking image-marking" "graph graph range range pin pin"; |
| 445 | } |
| 446 | .tutor-welcome .tutor-section-learner .tutor-section-cards .tutor-section-card-notes { |
| 447 | background-image: url("https://tutor-lms.s3.us-east-1.amazonaws.com/whats-new/notes-bg.webp"); |
| 448 | background-size: cover; |
| 449 | h6, p { |
| 450 | color: #fff; |
| 451 | } |
| 452 | |
| 453 | } |
| 454 | .tutor-welcome .tutor-section-native .tutor-section-cards { |
| 455 | grid-template-areas: "native-app navigation" "mode mode"; |
| 456 | } |
| 457 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode { |
| 458 | border: 8px solid rgb(247, 247, 247); |
| 459 | padding: 8px; |
| 460 | flex-direction: row; |
| 461 | gap: 8px; |
| 462 | justify-content: flex-start; |
| 463 | } |
| 464 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title { |
| 465 | justify-content: center; |
| 466 | padding: 0; |
| 467 | } |
| 468 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title h6 { |
| 469 | font-size: 1rem; |
| 470 | line-height: 1.375rem; |
| 471 | letter-spacing: 0em; |
| 472 | font-weight: 600; |
| 473 | color: rgb(15, 15, 15); |
| 474 | } |
| 475 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title p { |
| 476 | margin: 0; |
| 477 | font-size: 0.875rem; |
| 478 | line-height: 1.125rem; |
| 479 | letter-spacing: 0; |
| 480 | font-weight: 400; |
| 481 | color: rgba(0, 0, 0, 0.68); |
| 482 | } |
| 483 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 484 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| 485 | grid-template-areas: "mode-preference mode-preference mode-preference mode-preference" "font contrast vision motion"; |
| 486 | } |
| 487 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-feature-card { |
| 488 | justify-content: flex-start; |
| 489 | } |
| 490 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison { |
| 491 | display: flex; |
| 492 | margin: 23px 82px 0 82px; |
| 493 | border-radius: 12px 12px 0 0; |
| 494 | border: 4px solid rgba(0, 0, 0, 0.03); |
| 495 | border-bottom: none; |
| 496 | position: relative; |
| 497 | line-height: 0; |
| 498 | z-index: 1; |
| 499 | } |
| 500 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison::before { |
| 501 | content: ""; |
| 502 | position: absolute; |
| 503 | z-index: -1; |
| 504 | pointer-events: none; |
| 505 | width: 241px; |
| 506 | height: 544px; |
| 507 | left: -236.5px; |
| 508 | top: 0px; |
| 509 | background: linear-gradient(347.31deg, rgba(245, 243, 241, 0.2) 37.95%, rgba(170, 170, 175, 0.12) 81.38%); |
| 510 | filter: blur(1.96px); |
| 511 | transform: matrix(-1, 0, 0, 1, 0, 0) translateZ(-1px); |
| 512 | clip-path: polygon(0 0, 100% 100%, 0 100%); |
| 513 | } |
| 514 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner { |
| 515 | position: relative; |
| 516 | width: 100%; |
| 517 | overflow: hidden; |
| 518 | border-radius: 8px 8px 0 0; |
| 519 | line-height: 0; |
| 520 | } |
| 521 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner img { |
| 522 | width: 100%; |
| 523 | height: auto; |
| 524 | object-fit: cover; |
| 525 | display: block; |
| 526 | user-select: none; |
| 527 | pointer-events: none; |
| 528 | } |
| 529 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner .tutor-comparison-img-light-wrapper { |
| 530 | position: absolute; |
| 531 | top: 0; |
| 532 | left: 0; |
| 533 | width: 100%; |
| 534 | height: 100%; |
| 535 | clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%); |
| 536 | } |
| 537 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner .tutor-comparison-handle-line { |
| 538 | position: absolute; |
| 539 | top: 0; |
| 540 | bottom: 0; |
| 541 | left: var(--pos); |
| 542 | width: 2px; |
| 543 | background-color: rgb(0, 98, 254); |
| 544 | transform: translateX(-50%); |
| 545 | pointer-events: none; |
| 546 | z-index: 5; |
| 547 | } |
| 548 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-slider { |
| 549 | position: absolute; |
| 550 | top: 0; |
| 551 | left: 0; |
| 552 | width: 100%; |
| 553 | height: 100%; |
| 554 | opacity: 0; |
| 555 | cursor: ew-resize; |
| 556 | margin: 0; |
| 557 | z-index: 10; |
| 558 | -webkit-appearance: none; |
| 559 | appearance: none; |
| 560 | } |
| 561 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-handle-icon { |
| 562 | position: absolute; |
| 563 | top: 50%; |
| 564 | left: var(--pos); |
| 565 | transform: translate(-50%, -50%); |
| 566 | pointer-events: none; |
| 567 | z-index: 6; |
| 568 | width: 38px; |
| 569 | height: 38px; |
| 570 | aspect-ratio: 1/1; |
| 571 | display: flex; |
| 572 | align-items: center; |
| 573 | justify-content: center; |
| 574 | border-radius: 50%; |
| 575 | background: white; |
| 576 | box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.15); |
| 577 | } |
| 578 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-handle-icon svg { |
| 579 | position: relative; |
| 580 | z-index: 1; |
| 581 | } |
| 582 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 583 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| 584 | grid-template-areas: "learners assignments announcements"; |
| 585 | } |
| 586 | /* Full-width background sections */ |
| 587 | .tutor-welcome .tutor-section-bg { |
| 588 | width: 100%; |
| 589 | } |
| 590 | .tutor-welcome .tutor-section-learner { |
| 591 | padding-bottom: 64px; |
| 592 | } |
| 593 | .tutor-welcome .tutor-section-bg-interactive { |
| 594 | background-color: #000; |
| 595 | padding-top: 64px; |
| 596 | } |
| 597 | .tutor-welcome .tutor-section-bg-native { |
| 598 | background: |
| 599 | linear-gradient(180deg, #000000 4.74%, #091DF6 47.11%, rgba(255, 255, 255, 0) 79.7%), |
| 600 | linear-gradient(0deg, #FFFFFF, #FFFFFF); |
| 601 | } |
| 602 | |
| 603 | /* Light text on dark backgrounds */ |
| 604 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title p, |
| 605 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title h2, |
| 606 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title-right p, |
| 607 | .tutor-welcome .tutor-section-bg-native .tutor-section-title h2, |
| 608 | .tutor-welcome .tutor-section-bg-native .tutor-section-title-center p, |
| 609 | .tutor-welcome .tutor-section-bg-native .tutor-section-title-center h2 { |
| 610 | color: #fff; |
| 611 | } |
| 612 | .tutor-welcome .tutor-section-bg-native .tutor-section-title p { |
| 613 | color: rgba(255, 255, 255, 0.7); |
| 614 | } |
| 615 | |
| 616 | /* Interactive Assessments Card background */ |
| 617 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-cards .tutor-section-card { |
| 618 | background-color: rgba(255, 255, 255, 0.1); |
| 619 | border: 1px solid rgba(26, 26, 26, 1) |
| 620 | } |
| 621 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-cards .tutor-section-card .tutor-section-card-title h6 { |
| 622 | color: #fff; |
| 623 | } |
| 624 | |
| 625 | /* Rotating gradient border on "Native App Like Experience" subtitle */ |
| 626 | .tutor-welcome .tutor-section-native .gradient-btn-wrapper { |
| 627 | position: relative; |
| 628 | padding: 1.5px; |
| 629 | border-radius: 9999px; |
| 630 | display: inline-block; |
| 631 | overflow: hidden; |
| 632 | margin-bottom: 16px; |
| 633 | } |
| 634 | .tutor-welcome .tutor-section-native .gradient-spinner { |
| 635 | position: absolute; |
| 636 | top: 50%; |
| 637 | left: 50%; |
| 638 | width: 220%; |
| 639 | aspect-ratio: 1 / 1; |
| 640 | transform-origin: center; |
| 641 | background: conic-gradient( |
| 642 | from 0deg, |
| 643 | transparent 0deg, |
| 644 | transparent 120deg, |
| 645 | #DAC64B 150deg, |
| 646 | #CC616E 180deg, |
| 647 | #517ECF 210deg, |
| 648 | #86C672 240deg, |
| 649 | transparent 270deg, |
| 650 | transparent 360deg |
| 651 | ); |
| 652 | animation: tutor-gradient-spin 4s linear infinite; |
| 653 | z-index: 1; |
| 654 | } |
| 655 | .tutor-welcome .tutor-section-native .gradient-btn-content { |
| 656 | position: relative; |
| 657 | z-index: 2; |
| 658 | background: #000; |
| 659 | color: #fff; |
| 660 | border: none; |
| 661 | border-radius: 9999px; |
| 662 | padding: 8px 12px; |
| 663 | display: flex; |
| 664 | align-items: center; |
| 665 | gap: 8px; |
| 666 | font-size: inherit; |
| 667 | font-weight: 500; |
| 668 | white-space: nowrap; |
| 669 | user-select: none; |
| 670 | cursor: default; |
| 671 | } |
| 672 | .tutor-welcome .tutor-section-native .gradient-btn-dot { |
| 673 | width: 8px; |
| 674 | height: 8px; |
| 675 | background-color: rgba(255, 255, 255, 0.7); |
| 676 | border-radius: 50%; |
| 677 | display: inline-block; |
| 678 | flex-shrink: 0; |
| 679 | } |
| 680 | @keyframes tutor-gradient-spin { |
| 681 | 0% { transform: translate(-50%, -50%) rotate(60deg); } |
| 682 | 25% { transform: translate(-50%, -50%) rotate(150deg); } |
| 683 | 50% { transform: translate(-50%, -50%) rotate(240deg); } |
| 684 | 75% { transform: translate(-50%, -50%) rotate(330deg); } |
| 685 | 100% { transform: translate(-50%, -50%) rotate(420deg); } |
| 686 | } |
| 687 | .tutor-welcome .tutor-section-milestone { |
| 688 | padding-bottom: 32px 10px; |
| 689 | } |
| 690 | .tutor-welcome .tutor-section-milestone .tutor-section-title .tutor-section-title-center { |
| 691 | gap: 32px; |
| 692 | } |
| 693 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 694 | font-size: 9rem; |
| 695 | line-height: 1; |
| 696 | font-weight: 700; |
| 697 | margin: 0; |
| 698 | background: linear-gradient( |
| 699 | 90deg, |
| 700 | #124BFF 0%, |
| 701 | #4184FF 25%, |
| 702 | #F26D6D 50%, |
| 703 | #124BFF 75%, |
| 704 | #124BFF 100% |
| 705 | ); |
| 706 | background-size: 200% auto; |
| 707 | -webkit-background-clip: text; |
| 708 | background-clip: text; |
| 709 | -webkit-text-fill-color: transparent; |
| 710 | color: transparent; |
| 711 | filter: url(#tutor-milestone-inner-shadow); |
| 712 | animation: tutor-milestone-gradient 2s linear infinite; |
| 713 | } |
| 714 | @keyframes tutor-milestone-gradient { |
| 715 | 0% { |
| 716 | background-position: 0% center; |
| 717 | } |
| 718 | 100% { |
| 719 | background-position: 200% center; |
| 720 | } |
| 721 | } |
| 722 | @media (prefers-reduced-motion: reduce) { |
| 723 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 724 | animation: none; |
| 725 | } |
| 726 | } |
| 727 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 728 | font-size: 20px; |
| 729 | line-height: 28px; |
| 730 | letter-spacing: -0.5%; |
| 731 | font-weight: 500; |
| 732 | } |
| 733 | .tutor-welcome .tutor-section-milestone .tutor-section-title p span { |
| 734 | text-decoration: none; |
| 735 | color: rgba(0, 73, 248, 1); |
| 736 | |
| 737 | } |
| 738 | .tutor-welcome .tutor-milestone-ratings { |
| 739 | display: flex; |
| 740 | flex-direction: row; |
| 741 | align-items: center; |
| 742 | justify-content: center; |
| 743 | gap: 24px; |
| 744 | margin-top: 40px; |
| 745 | } |
| 746 | .tutor-welcome .tutor-rating-item { |
| 747 | display: flex; |
| 748 | flex-direction: column; |
| 749 | align-items: center; |
| 750 | gap: 4px; |
| 751 | } |
| 752 | |
| 753 | .tutor-welcome .tutor-rating-value { |
| 754 | font-size: 20px; |
| 755 | font-weight: 700; |
| 756 | color: rgb(15, 15, 15); |
| 757 | line-height: 28px; |
| 758 | } |
| 759 | .tutor-welcome .tutor-rating-label { |
| 760 | font-size: 18px; |
| 761 | font-weight: 400; |
| 762 | color: rgba(0, 0, 0, 0.7); |
| 763 | line-height: 26px; |
| 764 | } |
| 765 | .tutor-welcome .tutor-rating-divider { |
| 766 | width: 1px; |
| 767 | height: 32px; |
| 768 | background-color: rgba(217, 217, 217, 1); |
| 769 | } |
| 770 | |
| 771 | /* Action button on dark backgrounds */ |
| 772 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action { |
| 773 | background-color: #fff; |
| 774 | color: #000; |
| 775 | } |
| 776 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action:hover, |
| 777 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action:focus { |
| 778 | background-color: rgba(255, 255, 255, 0.8); |
| 779 | } |
| 780 | .tutor-welcome .tutor-section-bg-native .tutor-section-action { |
| 781 | background-color: #fff; |
| 782 | color: #000; |
| 783 | } |
| 784 | .tutor-welcome .tutor-section-bg-native .tutor-section-action:hover, |
| 785 | .tutor-welcome .tutor-section-bg-native .tutor-section-action:focus { |
| 786 | background-color: rgba(255, 255, 255, 0.8); |
| 787 | } |
| 788 | |
| 789 | @media (max-width: 1024px) { |
| 790 | #wpbody-content { |
| 791 | padding-bottom: 0; |
| 792 | } |
| 793 | .tutor-welcome br { |
| 794 | display: none; |
| 795 | } |
| 796 | .tutor-welcome .tutor-section-layout { |
| 797 | padding: 48px 24px; |
| 798 | gap: 96px; |
| 799 | } |
| 800 | .tutor-welcome .tutor-section-learner { |
| 801 | padding-bottom: 48px; |
| 802 | } |
| 803 | .tutor-welcome .tutor-section-bg-interactive { |
| 804 | padding-top: 48px; |
| 805 | } |
| 806 | .tutor-welcome .tutor-section-wrapper { |
| 807 | gap: 40px; |
| 808 | } |
| 809 | .tutor-welcome .tutor-section-title { |
| 810 | gap: 10px; |
| 811 | align-items: flex-start; |
| 812 | } |
| 813 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center { |
| 814 | gap: 4px; |
| 815 | } |
| 816 | .tutor-welcome .tutor-section-title-left h2, .tutor-welcome .tutor-section-title-center h2 { |
| 817 | font-size: 2rem; |
| 818 | line-height: 2.5rem; |
| 819 | margin-inline-end: 10px; |
| 820 | } |
| 821 | .tutor-welcome .tutor-section-title-left p, .tutor-welcome .tutor-section-title-center p { |
| 822 | font-size: 0.75rem; |
| 823 | line-height: 1.125rem; |
| 824 | } |
| 825 | .tutor-welcome .tutor-section-action { |
| 826 | max-width: fit-content; |
| 827 | } |
| 828 | .tutor-welcome .tutor-section-cards { |
| 829 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| 830 | gap: 10px; |
| 831 | } |
| 832 | .tutor-welcome .tutor-section-card-title { |
| 833 | gap: 10px; |
| 834 | padding: 20px; |
| 835 | } |
| 836 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 837 | grid-template-areas: "puzzle puzzle puzzle image-marking image-marking image-marking" "graph graph range range pin pin"; |
| 838 | } |
| 839 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 840 | grid-template-areas: "mode-preference mode-preference" "font contrast" "vision motion"; |
| 841 | } |
| 842 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-card-comparison { |
| 843 | margin: 0 40px 0 40px; |
| 844 | } |
| 845 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 846 | grid-template-areas: "learners assignments" "announcements announcements"; |
| 847 | } |
| 848 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards [style*="grid-area: announcements"] { |
| 849 | height: 400px; |
| 850 | } |
| 851 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards [style*="grid-area: announcements"] img { |
| 852 | width: min-content; |
| 853 | margin-inline: auto; |
| 854 | } |
| 855 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 856 | font-size: 6rem; |
| 857 | } |
| 858 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 859 | font-size: 18px; |
| 860 | line-height: 26px; |
| 861 | } |
| 862 | .tutor-welcome .tutor-milestone-ratings { |
| 863 | gap: 20px; |
| 864 | margin-top: 32px; |
| 865 | } |
| 866 | .tutor-welcome .tutor-rating-value { |
| 867 | font-size: 18px; |
| 868 | line-height: 26px; |
| 869 | } |
| 870 | .tutor-welcome .tutor-rating-label { |
| 871 | font-size: 16px; |
| 872 | line-height: 24px; |
| 873 | } |
| 874 | .tutor-welcome .tutor-rating-divider { |
| 875 | height: 28px; |
| 876 | } |
| 877 | } |
| 878 | @media (max-width: 768px) { |
| 879 | .tutor-welcome { |
| 880 | margin-left: -10px; |
| 881 | } |
| 882 | .tutor-welcome .tutor-hero-image { |
| 883 | height: 404px; |
| 884 | object-fit: cover; |
| 885 | } |
| 886 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 887 | font-size: 4.5rem; |
| 888 | } |
| 889 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 890 | font-size: 16px; |
| 891 | line-height: 24px; |
| 892 | } |
| 893 | .tutor-welcome .tutor-milestone-ratings { |
| 894 | gap: 16px; |
| 895 | margin-top: 24px; |
| 896 | } |
| 897 | .tutor-welcome .tutor-rating-value { |
| 898 | font-size: 16px; |
| 899 | line-height: 24px; |
| 900 | } |
| 901 | .tutor-welcome .tutor-rating-label { |
| 902 | font-size: 14px; |
| 903 | line-height: 20px; |
| 904 | } |
| 905 | .tutor-welcome .tutor-rating-divider { |
| 906 | height: 24px; |
| 907 | } |
| 908 | } |
| 909 | @media (max-width: 430px) { |
| 910 | .tutor-welcome .tutor-hero-image { |
| 911 | height: 263px; |
| 912 | object-fit: cover; |
| 913 | } |
| 914 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 915 | font-size: 3.2rem; |
| 916 | } |
| 917 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 918 | font-size: 14px; |
| 919 | line-height: 20px; |
| 920 | } |
| 921 | .tutor-welcome .tutor-milestone-ratings { |
| 922 | gap: 10px; |
| 923 | margin-top: 20px; |
| 924 | } |
| 925 | .tutor-welcome .tutor-rating-value { |
| 926 | font-size: 14px; |
| 927 | line-height: 20px; |
| 928 | } |
| 929 | .tutor-welcome .tutor-rating-label { |
| 930 | font-size: 12px; |
| 931 | line-height: 16px; |
| 932 | } |
| 933 | .tutor-welcome .tutor-rating-divider { |
| 934 | height: 20px; |
| 935 | } |
| 936 | .tutor-welcome .tutor-welcome-dismiss-bar { |
| 937 | top: 8px; |
| 938 | |
| 939 | a { |
| 940 | margin-inline-end: 8px; |
| 941 | } |
| 942 | } |
| 943 | .tutor-welcome .tutor-welcome-dismiss-btn { |
| 944 | border-radius: 999px; |
| 945 | padding: 12px; |
| 946 | gap: 0; |
| 947 | } |
| 948 | .tutor-welcome .tutor-welcome-dismiss-btn span { |
| 949 | display: none; |
| 950 | } |
| 951 | .tutor-welcome .tutor-welcome-dismiss-btn svg { |
| 952 | width: 20px; |
| 953 | height: 20px; |
| 954 | } |
| 955 | .tutor-welcome .tutor-section-layout { |
| 956 | padding-inline: 16px; |
| 957 | } |
| 958 | .tutor-welcome .tutor-section-cards { |
| 959 | gap: 16px; |
| 960 | } |
| 961 | .tutor-welcome .tutor-section-title { |
| 962 | gap: 10px; |
| 963 | flex-wrap: wrap; |
| 964 | } |
| 965 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center, .tutor-welcome .tutor-section-title-right { |
| 966 | flex-basis: 100%; |
| 967 | } |
| 968 | .tutor-welcome .tutor-section-action { |
| 969 | max-width: 196px; |
| 970 | } |
| 971 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 972 | grid-template-columns: 1fr; |
| 973 | grid-template-areas: "puzzle" "image-marking" "graph" "range" "pin"; |
| 974 | } |
| 975 | .tutor-welcome .tutor-section-native .tutor-section-cards { |
| 976 | grid-template-areas: "native-app" "navigation" "mode"; |
| 977 | } |
| 978 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 979 | grid-template-areas: "mode-preference" "font" "contrast" "vision" "motion"; |
| 980 | } |
| 981 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-card-comparison { |
| 982 | margin: 0 20px 0 20px; |
| 983 | } |
| 984 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 985 | grid-template-areas: "learners" "assignments" "announcements"; |
| 986 | } |
| 987 | } |
| 988 | </style> |
| 989 | |
| 990 | <div class="tutor-welcome"> |
| 991 | <div class="tutor-welcome-dismiss-bar"> |
| 992 | <a href="<?php echo esc_url( admin_url( 'admin.php?page=tutor' ) ); ?>" class="tutor-section-action tutor-section-action-outline tutor-welcome-dismiss-btn"> |
| 993 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.4 3.6-8.8 8.8m0-8.8 8.8 8.8"/></svg> |
| 994 | <span><?php esc_html_e( 'Don\'t show again', 'tutor' ); ?></span> |
| 995 | </a> |
| 996 | </div> |
| 997 | <img class="tutor-hero-image" src="<?php echo esc_url( $asset_base . 'whats-new-hero.webp' ); ?>" alt="<?php esc_attr_e( "What's new in v4", 'tutor' ); ?>"> |
| 998 | |
| 999 | <div class="tutor-section-layout"> |
| 1000 | |
| 1001 | <!-- Dashboard and Navigation --> |
| 1002 | <section class="tutor-section-wrapper tutor-section-dashboard"> |
| 1003 | <div class="tutor-section-title"> |
| 1004 | <div class="tutor-section-title-left"> |
| 1005 | <p><?php esc_html_e( 'Dashboard and Navigation', 'tutor' ); ?></p> |
| 1006 | <h2><?php esc_html_e( 'Designed for flow.', 'tutor' ); ?></h2> |
| 1007 | </div> |
| 1008 | <div class="tutor-section-title-right"> |
| 1009 | <p><?php esc_html_e( 'Every screen, every interaction, every detail has been reconsidered, so students can focus on learning instead of figuring out where to go next.', 'tutor' ); ?></p> |
| 1010 | </div> |
| 1011 | </div> |
| 1012 | |
| 1013 | <div class="tutor-section-cards"> |
| 1014 | <?php foreach ( $dashboard_cards as $card ) : ?> |
| 1015 | <?php $render_card( $card ); ?> |
| 1016 | <?php endforeach; ?> |
| 1017 | </div> |
| 1018 | </section> |
| 1019 | |
| 1020 | <!-- Learners First --> |
| 1021 | <section class="tutor-section-wrapper tutor-section-learner"> |
| 1022 | <div class="tutor-section-title"> |
| 1023 | <div class="tutor-section-title-left"> |
| 1024 | <p><?php esc_html_e( 'Learner first design', 'tutor' ); ?></p> |
| 1025 | <h2><?php esc_html_e( 'Everything they need. Exactly where they expect it.', 'tutor' ); ?></h2> |
| 1026 | </div> |
| 1027 | <div class="tutor-section-title-right"> |
| 1028 | <p><?php esc_html_e( 'Notes, discussions, resources, lesson comments – all accessible without leaving the lesson. No more tab-switching. No more hunting.', 'tutor' ); ?></p> |
| 1029 | <div> |
| 1030 | <?php $render_action_button( $action_button_text, 'https://tutorlms.com/Course-Builder/' ); ?> |
| 1031 | </div> |
| 1032 | </div> |
| 1033 | </div> |
| 1034 | |
| 1035 | <div class="tutor-section-cards"> |
| 1036 | <?php foreach ( $learner_cards as $card ) : ?> |
| 1037 | <?php $render_card( $card ); ?> |
| 1038 | <?php endforeach; ?> |
| 1039 | </div> |
| 1040 | </section> |
| 1041 | </div> |
| 1042 | |
| 1043 | <div class="tutor-section-bg tutor-section-bg-interactive"> |
| 1044 | <div class="tutor-section-layout"> |
| 1045 | <!-- Interactive Assessments --> |
| 1046 | <section class="tutor-section-wrapper tutor-section-interactive"> |
| 1047 | <div class="tutor-section-title"> |
| 1048 | <div class="tutor-section-title-left"> |
| 1049 | <p><?php esc_html_e( 'Interactive Assessments', 'tutor' ); ?></p> |
| 1050 | <h2><?php esc_html_e( '5 new ways to make assessment actually fun.', 'tutor' ); ?></h2> |
| 1051 | </div> |
| 1052 | <div class="tutor-section-title-right"> |
| 1053 | <p><?php esc_html_e( 'Most LMSs treat assessment as the boring part. Tutor LMS 4.0 turns it into the part students look forward to — with five new interactive quiz types designed to keep them engaged.', 'tutor' ); ?></p> |
| 1054 | <div> |
| 1055 | <?php $render_action_button( $action_button_text, 'https://tutorlms.com/quizzess/' ); ?> |
| 1056 | </div> |
| 1057 | </div> |
| 1058 | </div> |
| 1059 | |
| 1060 | <div class="tutor-section-cards"> |
| 1061 | <?php foreach ( $interactive_cards as $card ) : ?> |
| 1062 | <?php $render_card( $card ); ?> |
| 1063 | <?php endforeach; ?> |
| 1064 | </div> |
| 1065 | </section> |
| 1066 | </div> |
| 1067 | </div> |
| 1068 | |
| 1069 | <div class="tutor-section-bg tutor-section-bg-native"> |
| 1070 | <div class="tutor-section-layout"> |
| 1071 | <!-- Native App --> |
| 1072 | <section class="tutor-section-wrapper tutor-section-native"> |
| 1073 | <div class="tutor-section-title"> |
| 1074 | <div class="tutor-section-title-center"> |
| 1075 | <div class="gradient-btn-wrapper"> |
| 1076 | <div class="gradient-spinner"></div> |
| 1077 | <div class="gradient-btn-content"> |
| 1078 | <span class="gradient-btn-dot"></span> |
| 1079 | <p><?php esc_html_e( 'Native App Like Experience', 'tutor' ); ?></p> |
| 1080 | </div> |
| 1081 | </div> |
| 1082 | <h2> |
| 1083 | <?php |
| 1084 | printf( |
| 1085 | // translators: placeholder is a line break. |
| 1086 | esc_html__( 'Your academy, in %s your pocket.', 'tutor' ), |
| 1087 | '<br/>' |
| 1088 | ); |
| 1089 | ?> |
| 1090 | </h2> |
| 1091 | </div> |
| 1092 | </div> |
| 1093 | |
| 1094 | <div class="tutor-section-cards"> |
| 1095 | <div class="tutor-section-card" style="grid-area: native-app;"> |
| 1096 | <div class="tutor-section-card-title"> |
| 1097 | <h6><?php esc_html_e( 'Native app like experience', 'tutor' ); ?></h6> |
| 1098 | <p><?php esc_html_e( 'The mobile interface mirrors a polished native app — smooth transitions, touch-friendly controls, and a layout built for small screens without any compromise.', 'tutor' ); ?></p> |
| 1099 | </div> |
| 1100 | <div class="tutor-section-card-image tutor-toggle-images"> |
| 1101 | <img class="tutor-img-default" src="<?php echo esc_url( $asset_base . 'native-app.webp' ); ?>" alt="<?php esc_attr_e( 'Native app like experience', 'tutor' ); ?>"> |
| 1102 | <img class="tutor-img-kids" src="<?php echo esc_url( $asset_base . 'native-app-kids.webp' ); ?>" alt="<?php esc_attr_e( 'Native app like experience (Kids)', 'tutor' ); ?>"> |
| 1103 | </div> |
| 1104 | </div> |
| 1105 | |
| 1106 | <div class="tutor-section-card" style="grid-area: navigation;"> |
| 1107 | <div class="tutor-section-card-title"> |
| 1108 | <h6><?php esc_html_e( 'Smoother navigation', 'tutor' ); ?></h6> |
| 1109 | <p><?php esc_html_e( 'Students move between courses, lessons, and their profile without friction — every tap takes them exactly where they need to go.', 'tutor' ); ?></p> |
| 1110 | </div> |
| 1111 | <div class="tutor-section-card-image tutor-toggle-images"> |
| 1112 | <img class="tutor-img-default" src="<?php echo esc_url( $asset_base . 'smoother-navigation.webp' ); ?>" alt="<?php esc_attr_e( 'Smoother navigation', 'tutor' ); ?>"> |
| 1113 | <img class="tutor-img-kids" src="<?php echo esc_url( $asset_base . 'smoother-navigation-kids.webp' ); ?>" alt="<?php esc_attr_e( 'Smoother navigation (Kids)', 'tutor' ); ?>"> |
| 1114 | </div> |
| 1115 | </div> |
| 1116 | |
| 1117 | <div class="tutor-section-card tutor-section-card-learning-mode" style="grid-area: mode;"> |
| 1118 | <button class="tutor-learning-mode-button active" data-mode="default" aria-label="<?php esc_attr_e( 'Switch to modern mode', 'tutor' ); ?>"> |
| 1119 | <svg class="progress-border" viewBox="0 0 48 48" aria-hidden="true" focusable="false"><rect x="1" y="1" width="46" height="46" rx="7"></rect></svg> |
| 1120 | <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="none" viewBox="0 0 38 38" aria-hidden="true" focusable="false"><path fill="#0265e1" d="M27.559 22.623c.745 0 1.35.605 1.35 1.35v2.709a1.35 1.35 0 0 1-1.35 1.35H11.35A1.35 1.35 0 0 1 10 26.682v-2.708c0-.746.605-1.35 1.35-1.351zm.137-4.059a1.213 1.213 0 0 1 0 2.425H11.212a1.213 1.213 0 0 1 0-2.425zM27.56 10c.745 0 1.35.605 1.35 1.35v4.502a1.35 1.35 0 0 1-1.35 1.351H11.35A1.35 1.35 0 0 1 10 15.853V11.35c0-.746.605-1.35 1.35-1.351z"/><path fill="#fcfdff" d="M13.56 23.57c.373 0 .676.303.676.676v2.242a.676.676 0 0 1-.676.675h-2.148a.676.676 0 0 1-.676-.675v-2.242c0-.373.303-.675.676-.675zM12.556 12.28a.45.45 0 0 1 .696 0l2.731 3.325 2.01-2.538a.45.45 0 0 1 .706 0l3.284 4.15H11.358c-1.14 0-1.768-1.327-1.044-2.209zm14.554-1.364a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8"/></svg> |
| 1121 | </button> |
| 1122 | <button class="tutor-learning-mode-button" data-mode="kids" aria-label="<?php esc_attr_e( 'Switch to kids mode', 'tutor' ); ?>"> |
| 1123 | <svg class="progress-border" viewBox="0 0 48 48" aria-hidden="true" focusable="false"><rect x="1" y="1" width="46" height="46" rx="7"></rect></svg> |
| 1124 | <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="none" viewBox="0 0 38 38" aria-hidden="true" focusable="false"><g><rect width="20.561" height="7.833" x="9.672" y="9" fill="#ffe129" rx="1.201"/><g filter="url(#a)"><path fill="#58cd04" d="M9.672 19.212a.9.9 0 0 1 .9-.9h18.76a.9.9 0 0 1 .9.9v.836a.9.9 0 0 1-.9.9h-18.76a.9.9 0 0 1-.9-.9z"/></g><g filter="url(#b)"><rect width="20.561" height="5.882" x="9.672" y="22.725" fill="#51be02" rx="1.801"/></g><rect width="4.414" height="4.53" x="10.613" y="23.399" fill="#fff" rx="2.207"/><path fill="#fc7501" d="M24.163 11.155c.077 0 .139.061.139.138a4.346 4.346 0 0 1-8.69 0 .138.138 0 1 1 .277 0 4.068 4.068 0 0 0 8.134 0 .14.14 0 0 1 .14-.138m-4.887-.63a.14.14 0 0 1 .14.138c0 .234-.131.432-.318.568a1.2 1.2 0 0 1-.71.214c-.27 0-.522-.079-.71-.214-.186-.136-.317-.334-.317-.568a.139.139 0 1 1 .278 0c0 .122.068.245.203.343a.94.94 0 0 0 .547.161.94.94 0 0 0 .546-.161c.134-.098.203-.22.203-.343 0-.077.062-.138.138-.138m1.16-.072a.14.14 0 0 1 .132.146c-.006.121.057.248.186.351.13.104.32.178.539.189a.94.94 0 0 0 .553-.135c.139-.09.213-.21.22-.332a.14.14 0 0 1 .278.014c-.012.233-.153.425-.346.55a1.2 1.2 0 0 1-.719.18 1.2 1.2 0 0 1-.699-.249c-.18-.144-.3-.349-.289-.582a.14.14 0 0 1 .145-.132"/><path fill="#ff6ccb" d="M31.416 18.473c-.505.936 0 1.852.325 2.604.114.265.227.517.42.621s.464.06.749.01c.807-.14 1.85-.222 2.355-1.158s-.196-2.17-1.547-1.738c-.38-1.367-1.797-1.275-2.302-.339M5.196 21.36a.3.3 0 0 0-.035-.164l-.848-1.573a.3.3 0 0 1 .256-.443l1.783-.048a.3.3 0 0 0 .16-.051l1.5-1.013a.3.3 0 0 1 .466.27l-.128 1.808a.3.3 0 0 0 .035.164l.848 1.573a.3.3 0 0 1-.255.443l-1.784.048a.3.3 0 0 0-.16.05l-1.5 1.014a.3.3 0 0 1-.466-.271z"/></g><defs><filter id="a" width="20.561" height="2.786" x="9.672" y="18.312" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".15"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.231373 0 0 0 0 0.54902 0 0 0 0 0 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_21950_196354"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_21950_196354" result="shape"/></filter><filter id="b" width="20.561" height="6.182" x="9.672" y="22.725" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".3"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.231373 0 0 0 0 0.54902 0 0 0 0 0 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_21950_196354"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_21950_196354" result="shape"/></filter></defs></svg> |
| 1125 | </button> |
| 1126 | |
| 1127 | <div class="tutor-section-card-title tutor-lm-text-transition" |
| 1128 | data-default-title="<?php esc_attr_e( 'Modern Modes', 'tutor' ); ?>" |
| 1129 | data-default-desc="<?php esc_attr_e( 'A modern, distraction-free learning experience.', 'tutor' ); ?>" |
| 1130 | data-kids-title="<?php esc_attr_e( 'Kids Mode', 'tutor' ); ?>" |
| 1131 | data-kids-desc="<?php esc_attr_e( 'A fun, engaging and distraction-free learning experience.', 'tutor' ); ?>"> |
| 1132 | <h6><?php esc_html_e( 'Modern Modes', 'tutor' ); ?></h6> |
| 1133 | <p><?php esc_html_e( 'A modern, distraction-free learning experience.', 'tutor' ); ?></p> |
| 1134 | </div> |
| 1135 | </div> |
| 1136 | </div> |
| 1137 | </section> |
| 1138 | </div> |
| 1139 | </div> |
| 1140 | |
| 1141 | <div class="tutor-section-layout"> |
| 1142 | <!-- Accessibility --> |
| 1143 | <section class="tutor-section-wrapper tutor-section-a11y"> |
| 1144 | <div class="tutor-section-title"> |
| 1145 | <div class="tutor-section-title-center"> |
| 1146 | <p><?php esc_html_e( 'Accessibility', 'tutor' ); ?></p> |
| 1147 | <h2> |
| 1148 | <?php |
| 1149 | printf( |
| 1150 | // translators: placeholder is a line break. |
| 1151 | esc_html__( 'No learner left behind. %s By design.', 'tutor' ), |
| 1152 | '<br/>' |
| 1153 | ); |
| 1154 | ?> |
| 1155 | </h2> |
| 1156 | </div> |
| 1157 | </div> |
| 1158 | |
| 1159 | <div class="tutor-section-cards"> |
| 1160 | <!-- Mode with preference --> |
| 1161 | <div class="tutor-section-card" style="grid-area: mode-preference;"> |
| 1162 | <div class="tutor-section-card-title"> |
| 1163 | <h6><?php esc_html_e( 'Mode with preference', 'tutor' ); ?></h6> |
| 1164 | <p><?php esc_html_e( 'Students can switch between Modern, Dark, and Kids modes to match their personal comfort and learning environment.', 'tutor' ); ?></p> |
| 1165 | </div> |
| 1166 | |
| 1167 | <div class="tutor-section-card-comparison" data-comparison-pos="50"> |
| 1168 | <div class="tutor-comparison-inner"> |
| 1169 | <img src="<?php echo esc_url( $asset_base . 'dashboard-dark.webp' ); ?>" alt="<?php esc_attr_e( 'Dark Mode', 'tutor' ); ?>"> |
| 1170 | <div class="tutor-comparison-img-light-wrapper"> |
| 1171 | <img src="<?php echo esc_url( $asset_base . 'dashboard-light.webp' ); ?>" alt="<?php esc_attr_e( 'Light Mode', 'tutor' ); ?>"> |
| 1172 | </div> |
| 1173 | <div class="tutor-comparison-handle-line"></div> |
| 1174 | </div> |
| 1175 | <input type="range" min="0" max="100" value="50" class="tutor-comparison-slider" aria-label="<?php esc_attr_e( 'Compare light and dark mode', 'tutor' ); ?>"> |
| 1176 | <div class="tutor-comparison-handle-icon"> |
| 1177 | <svg xmlns="http://www.w3.org/2000/svg" width="19" height="9" fill="none" viewBox="0 0 19 9" aria-hidden="true" focusable="false"><path fill="#0f0f0f" d="M5.429 7.982V.703q0-.298-.161-.501Q5.108 0 4.893 0a.476.476 0 0 0-.281.105l-4.37 3.64a.66.66 0 0 0-.182.264.95.95 0 0 0 0 .668q.06.157.181.264l4.37 3.64a.5.5 0 0 0 .14.079.4.4 0 0 0 .142.026q.214 0 .375-.203a.78.78 0 0 0 .16-.5M13.571 7.982V.703q0-.298.161-.501.16-.202.375-.202.067 0 .142.026t.14.08l4.37 3.639q.12.105.18.264a.95.95 0 0 1 0 .668.64.64 0 0 1-.18.264l-4.37 3.64a.5.5 0 0 1-.14.079.4.4 0 0 1-.142.026q-.214 0-.375-.203a.78.78 0 0 1-.16-.5"/></svg> |
| 1178 | </div> |
| 1179 | </div> |
| 1180 | </div> |
| 1181 | |
| 1182 | <?php foreach ( $a11y_feature_cards as $card ) : ?> |
| 1183 | <?php $render_card( $card ); ?> |
| 1184 | <?php endforeach; ?> |
| 1185 | </div> |
| 1186 | </section> |
| 1187 | |
| 1188 | <!-- Instructor Dashboard --> |
| 1189 | <section class="tutor-section-wrapper tutor-section-instructor-dashboard"> |
| 1190 | <div class="tutor-section-title"> |
| 1191 | <div class="tutor-section-title-left"> |
| 1192 | <p><?php esc_html_e( 'Instructor Dashboard', 'tutor' ); ?></p> |
| 1193 | <h2> |
| 1194 | <?php |
| 1195 | printf( |
| 1196 | // translators: placeholder is a line break. |
| 1197 | esc_html__( 'Run your entire academy %s from one screen.', 'tutor' ), |
| 1198 | '<br/>' |
| 1199 | ); |
| 1200 | ?> |
| 1201 | </h2> |
| 1202 | </div> |
| 1203 | <div class="tutor-section-title-right"> |
| 1204 | <p><?php esc_html_e( 'Quiz attempts, assignments, revenue, student progress — everything tracked, everything visible, without jumping between dashboards. Spend less time administrating and more time doing what you\'re actually good at.', 'tutor' ); ?></p> |
| 1205 | <div> |
| 1206 | <?php $render_action_button( $action_button_text, $action_button_url ); ?> |
| 1207 | </div> |
| 1208 | </div> |
| 1209 | </div> |
| 1210 | |
| 1211 | <div class="tutor-section-cards"> |
| 1212 | <?php foreach ( $instructor_cards as $card ) : ?> |
| 1213 | <?php $render_card( $card ); ?> |
| 1214 | <?php endforeach; ?> |
| 1215 | </div> |
| 1216 | </section> |
| 1217 | |
| 1218 | <!-- Milestone --> |
| 1219 | <section class="tutor-section-wrapper tutor-section-milestone"> |
| 1220 | <div class="tutor-section-title"> |
| 1221 | <div class="tutor-section-title-center"> |
| 1222 | <h1><?php esc_html_e( '100,000+', 'tutor' ); ?></h1> |
| 1223 | <p> |
| 1224 | <?php |
| 1225 | printf( |
| 1226 | // translators: %s: placeholder is a link. |
| 1227 | esc_html__( 'eLearning websites are running on %s', 'tutor' ), |
| 1228 | '<span>Tutor LMS.</span>' |
| 1229 | ); |
| 1230 | ?> |
| 1231 | </p> |
| 1232 | <div> |
| 1233 | <?php $render_action_button( $action_button_text, $action_button_url ); ?> |
| 1234 | </div> |
| 1235 | |
| 1236 | <div class="tutor-milestone-ratings"> |
| 1237 | <div class="tutor-rating-item"> |
| 1238 | <div class="tutor-rating-value"><?php esc_html_e( '4.4 � |
| 1239 | ', 'tutor' ); ?></div> |
| 1240 | <div class="tutor-rating-label"><?php esc_html_e( 'WordPress', 'tutor' ); ?></div> |
| 1241 | </div> |
| 1242 | <div class="tutor-rating-divider"></div> |
| 1243 | <div class="tutor-rating-item"> |
| 1244 | <div class="tutor-rating-value"><?php esc_html_e( '4.6 � |
| 1245 | ', 'tutor' ); ?></div> |
| 1246 | <div class="tutor-rating-label"><?php esc_html_e( 'G2 Ratings', 'tutor' ); ?></div> |
| 1247 | </div> |
| 1248 | <div class="tutor-rating-divider"></div> |
| 1249 | <div class="tutor-rating-item"> |
| 1250 | <div class="tutor-rating-value"><?php esc_html_e( '#1', 'tutor' ); ?></div> |
| 1251 | <div class="tutor-rating-label"><?php esc_html_e( 'Product Hunt', 'tutor' ); ?></div> |
| 1252 | </div> |
| 1253 | <div class="tutor-rating-divider"></div> |
| 1254 | <div class="tutor-rating-item"> |
| 1255 | <div class="tutor-rating-value"><?php esc_html_e( '4.7 � |
| 1256 | ', 'tutor' ); ?></div> |
| 1257 | <div class="tutor-rating-label"><?php esc_html_e( 'Trustpilot', 'tutor' ); ?></div> |
| 1258 | </div> |
| 1259 | </div> |
| 1260 | </div> |
| 1261 | </div> |
| 1262 | </section> |
| 1263 | </div> |
| 1264 | </div> |
| 1265 | |
| 1266 | <!-- SVG Filter for Inset Shadow --> |
| 1267 | <svg width="0" height="0" style="position: absolute; pointer-events: none; overflow: hidden;" aria-hidden="true" focusable="false"> |
| 1268 | <defs> |
| 1269 | <filter id="tutor-milestone-inner-shadow" x="-20%" y="-20%" width="140%" height="140%"> |
| 1270 | <feOffset dx="0" dy="3" /> |
| 1271 | <feGaussianBlur stdDeviation="1.5" result="offset-blur" /> |
| 1272 | <feComposite operator="out" in="SourceAlpha" in2="offset-blur" result="inverse" /> |
| 1273 | <feFlood flood-color="#9C0A0A" flood-opacity="0.14" result="color" /> |
| 1274 | <feComposite operator="in" in="color" in2="inverse" result="shadow" /> |
| 1275 | <feComposite operator="in" in="shadow" in2="SourceAlpha" result="inner-shadow" /> |
| 1276 | <feMerge> |
| 1277 | <feMergeNode in="SourceGraphic" /> |
| 1278 | <feMergeNode in="inner-shadow" /> |
| 1279 | </feMerge> |
| 1280 | </filter> |
| 1281 | </defs> |
| 1282 | </svg> |
| 1283 | |
| 1284 | <script> |
| 1285 | document.addEventListener('DOMContentLoaded', function () { |
| 1286 | initLearningModeToggle(); |
| 1287 | initComparisonSlider(); |
| 1288 | |
| 1289 | function initLearningModeToggle() { |
| 1290 | const modeButtons = Array.from(document.querySelectorAll('.tutor-learning-mode-button')); |
| 1291 | const toggleImages = document.querySelectorAll('.tutor-toggle-images'); |
| 1292 | const textContainer = document.querySelector('.tutor-lm-text-transition'); |
| 1293 | |
| 1294 | if (!modeButtons.length || !textContainer) return; |
| 1295 | |
| 1296 | const titleEl = textContainer.querySelector('h6'); |
| 1297 | const descEl = textContainer.querySelector('p'); |
| 1298 | const MODE_SWITCH_DELAY_MS = 300; |
| 1299 | |
| 1300 | const switchMode = (mode) => { |
| 1301 | modeButtons.forEach((btn) => { |
| 1302 | btn.classList.remove('active'); |
| 1303 | // Force reflow to reset the progress-border animation. |
| 1304 | void btn.offsetWidth; |
| 1305 | }); |
| 1306 | |
| 1307 | const activeBtn = modeButtons.find((btn) => btn.dataset.mode === mode); |
| 1308 | if (activeBtn) activeBtn.classList.add('active'); |
| 1309 | |
| 1310 | toggleImages.forEach((container) => { |
| 1311 | container.classList.toggle('show-kids', mode === 'kids'); |
| 1312 | }); |
| 1313 | |
| 1314 | textContainer.classList.add('fading'); |
| 1315 | setTimeout(() => { |
| 1316 | const titleAttr = mode === 'kids' ? 'kidsTitle' : 'defaultTitle'; |
| 1317 | const descAttr = mode === 'kids' ? 'kidsDesc' : 'defaultDesc'; |
| 1318 | |
| 1319 | if (titleEl) titleEl.textContent = textContainer.dataset[titleAttr] || ''; |
| 1320 | if (descEl) descEl.textContent = textContainer.dataset[descAttr] || ''; |
| 1321 | textContainer.classList.remove('fading'); |
| 1322 | }, MODE_SWITCH_DELAY_MS); |
| 1323 | }; |
| 1324 | |
| 1325 | modeButtons.forEach((btn) => { |
| 1326 | btn.addEventListener('click', () => { |
| 1327 | const mode = btn.dataset.mode; |
| 1328 | if (mode) switchMode(mode); |
| 1329 | }); |
| 1330 | |
| 1331 | const rect = btn.querySelector('.progress-border rect'); |
| 1332 | if (rect) { |
| 1333 | rect.addEventListener('animationend', () => { |
| 1334 | if (btn.classList.contains('active')) { |
| 1335 | const nextMode = btn.dataset.mode === 'default' ? 'kids' : 'default'; |
| 1336 | switchMode(nextMode); |
| 1337 | } |
| 1338 | }); |
| 1339 | } |
| 1340 | }); |
| 1341 | } |
| 1342 | |
| 1343 | function initComparisonSlider() { |
| 1344 | const container = document.querySelector('.tutor-section-card-comparison'); |
| 1345 | const slider = container ? container.querySelector('.tutor-comparison-slider') : null; |
| 1346 | |
| 1347 | if (!container || !slider) return; |
| 1348 | |
| 1349 | const initialPos = Number(container.dataset.comparisonPos) || Number(slider.value) || 50; |
| 1350 | container.style.setProperty('--pos', initialPos + '%'); |
| 1351 | slider.value = String(initialPos); |
| 1352 | |
| 1353 | slider.addEventListener('input', () => { |
| 1354 | container.style.setProperty('--pos', slider.value + '%'); |
| 1355 | }); |
| 1356 | } |
| 1357 | }); |
| 1358 | </script> |