ecommerce
21 hours ago
tools
2 months ago
add_new_instructor.php
2 years ago
addons.php
1 year ago
announcements.php
2 months ago
answer.php
3 years ago
course-builder.php
1 year ago
course-list.php
2 months ago
enable_disable_addons.php
11 months ago
feature-promotion.php
2 years ago
get-pro.php
8 months ago
instructors.php
21 hours ago
question_answer.php
11 months ago
quiz_attempts.php
21 hours ago
students.php
21 hours ago
tools.php
3 years ago
view_attempt.php
21 hours ago
welcome.php
21 hours ago
whats-new.php
11 months ago
withdraw_requests.php
2 months ago
welcome.php
1344 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 | .tutor-welcome { |
| 190 | margin-left: -20px; |
| 191 | background-color: rgb(255, 255, 255); |
| 192 | position: relative; |
| 193 | } |
| 194 | .tutor-welcome .tutor-welcome-dismiss-bar { |
| 195 | position: absolute; |
| 196 | top: 24px; |
| 197 | width: 100%; |
| 198 | display: flex; |
| 199 | justify-content: flex-end; |
| 200 | z-index: 10; |
| 201 | |
| 202 | a { |
| 203 | margin-inline-end: 24px; |
| 204 | max-width: fit-content; |
| 205 | } |
| 206 | } |
| 207 | .tutor-welcome .tutor-hero-image { |
| 208 | width: 100%; |
| 209 | height: auto; |
| 210 | max-width: 100%; |
| 211 | } |
| 212 | .tutor-welcome .tutor-section-layout { |
| 213 | display: flex; |
| 214 | flex-direction: column; |
| 215 | gap: 128px; |
| 216 | max-width: 1280px; |
| 217 | margin: 0 auto; |
| 218 | padding: 64px 24px; |
| 219 | } |
| 220 | .tutor-welcome .tutor-section-title { |
| 221 | display: flex; |
| 222 | flex-direction: row; |
| 223 | align-items: flex-end; |
| 224 | justify-content: space-between; |
| 225 | gap: 24px; |
| 226 | } |
| 227 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center { |
| 228 | display: flex; |
| 229 | flex-direction: column; |
| 230 | gap: 16px; |
| 231 | flex-basis: 50%; |
| 232 | } |
| 233 | .tutor-welcome .tutor-section-title-left p, .tutor-welcome .tutor-section-title-center p { |
| 234 | font-size: 0.875rem; |
| 235 | line-height: 1.125rem; |
| 236 | letter-spacing: 0.125em; |
| 237 | font-weight: 400; |
| 238 | text-transform: uppercase; |
| 239 | color: rgba(0, 0, 0, 0.68); |
| 240 | margin: 0; |
| 241 | } |
| 242 | .tutor-welcome .tutor-section-title-left h2, .tutor-welcome .tutor-section-title-center h2 { |
| 243 | font-size: 3rem; |
| 244 | line-height: 3.5rem; |
| 245 | letter-spacing: -0.02em; |
| 246 | font-weight: 500; |
| 247 | color: rgb(15, 15, 15); |
| 248 | margin: 0; |
| 249 | } |
| 250 | .tutor-welcome .tutor-section-title-center { |
| 251 | flex-basis: 100%; |
| 252 | text-align: center; |
| 253 | align-items: center; |
| 254 | } |
| 255 | .tutor-welcome .tutor-section-title-center p:last-of-type { |
| 256 | text-transform: none; |
| 257 | letter-spacing: 0em; |
| 258 | } |
| 259 | .tutor-welcome .tutor-section-title-right { |
| 260 | display: flex; |
| 261 | flex-direction: column; |
| 262 | gap: 20px; |
| 263 | max-width: 400px; |
| 264 | width: 100%; |
| 265 | flex-basis: 50%; |
| 266 | } |
| 267 | .tutor-welcome .tutor-section-title-right p { |
| 268 | font-size: 1rem; |
| 269 | line-height: 1.375rem; |
| 270 | letter-spacing: 0em; |
| 271 | font-weight: 400; |
| 272 | color: rgba(0, 0, 0, 0.68); |
| 273 | margin: 0; |
| 274 | } |
| 275 | .tutor-welcome .tutor-section-wrapper { |
| 276 | display: flex; |
| 277 | flex-direction: column; |
| 278 | gap: 56px; |
| 279 | } |
| 280 | .tutor-welcome .tutor-section-card { |
| 281 | display: flex; |
| 282 | flex-direction: column; |
| 283 | justify-content: space-between; |
| 284 | border-radius: 20px; |
| 285 | background-color: rgba(242, 242, 242, 1); |
| 286 | overflow: hidden; |
| 287 | } |
| 288 | .tutor-welcome .tutor-section-card-icon { |
| 289 | padding: 32px 32px 16px 32px; |
| 290 | } |
| 291 | .tutor-welcome .tutor-section-card-title { |
| 292 | display: flex; |
| 293 | flex-direction: column; |
| 294 | padding: 32px; |
| 295 | gap: 10px; |
| 296 | } |
| 297 | .tutor-welcome .tutor-section-card-title h6 { |
| 298 | font-size: 1.25rem; |
| 299 | line-height: 1.75rem; |
| 300 | letter-spacing: -0.005em; |
| 301 | font-weight: 500; |
| 302 | color: rgb(15, 15, 15); |
| 303 | margin: 0; |
| 304 | } |
| 305 | .tutor-welcome .tutor-section-card-title p { |
| 306 | margin: 0px; |
| 307 | font-size: 1rem; |
| 308 | line-height: 1.375rem; |
| 309 | letter-spacing: 0em; |
| 310 | font-weight: 400; |
| 311 | color: rgba(0, 0, 0, 0.68); |
| 312 | } |
| 313 | .tutor-welcome .tutor-section-card-image { |
| 314 | display: flex; |
| 315 | position: relative; |
| 316 | overflow: hidden; |
| 317 | } |
| 318 | .tutor-welcome .tutor-section-card-image img { |
| 319 | width: 100%; |
| 320 | height: auto; |
| 321 | transition: opacity 0.5s ease-in-out; |
| 322 | } |
| 323 | .tutor-welcome .tutor-section-card-image .tutor-img-kids { |
| 324 | position: absolute; |
| 325 | top: 0; |
| 326 | left: 0; |
| 327 | opacity: 0; |
| 328 | } |
| 329 | .tutor-welcome .tutor-section-card-image.show-kids .tutor-img-default { |
| 330 | opacity: 0; |
| 331 | } |
| 332 | .tutor-welcome .tutor-section-card-image.show-kids .tutor-img-kids { |
| 333 | opacity: 1; |
| 334 | } |
| 335 | .tutor-welcome .tutor-section-cards { |
| 336 | display: grid; |
| 337 | grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); |
| 338 | gap: 16px; |
| 339 | } |
| 340 | .tutor-welcome .tutor-section-action { |
| 341 | display: flex; |
| 342 | align-items: center; |
| 343 | justify-content: center; |
| 344 | padding: 8px 18px; |
| 345 | font-size: 1rem; |
| 346 | line-height: 1.375rem; |
| 347 | font-weight: 500; |
| 348 | color: rgb(255, 255, 255); |
| 349 | border-radius: 50px; |
| 350 | max-width: 196px; |
| 351 | width: 100%; |
| 352 | text-decoration: none; |
| 353 | background-color: rgb(15, 15, 15); |
| 354 | transition: all 0.2s ease; |
| 355 | gap: 6px; |
| 356 | cursor: pointer; |
| 357 | } |
| 358 | .tutor-welcome .tutor-section-action svg { |
| 359 | flex-shrink: 0; |
| 360 | } |
| 361 | .tutor-welcome .tutor-section-action:hover, .tutor-welcome .tutor-section-action:focus { |
| 362 | background-color: rgba(15, 15, 15, 0.8); |
| 363 | } |
| 364 | .tutor-welcome .tutor-section-action-outline { |
| 365 | background-color: transparent; |
| 366 | border: 1px solid rgb(217, 217, 217); |
| 367 | color: rgb(255, 255, 255); |
| 368 | } |
| 369 | .tutor-welcome .tutor-section-action-outline:hover, .tutor-welcome .tutor-section-action-outline:focus { |
| 370 | background-color: rgb(217, 217, 217); |
| 371 | color: rgb(15, 15, 15); |
| 372 | } |
| 373 | .tutor-welcome .tutor-learning-mode-button { |
| 374 | display: block; |
| 375 | position: relative; |
| 376 | border: none; |
| 377 | background-color: rgb(255, 255, 255); |
| 378 | cursor: pointer; |
| 379 | padding: 5px; |
| 380 | width: 48px; |
| 381 | height: 48px; |
| 382 | aspect-ratio: 1/1; |
| 383 | filter: grayscale(1); |
| 384 | opacity: 0.6; |
| 385 | border-radius: 8px; |
| 386 | transition: filter 0.3s ease, opacity 0.3s ease; |
| 387 | } |
| 388 | .tutor-welcome .tutor-learning-mode-button .progress-border { |
| 389 | position: absolute; |
| 390 | top: 0; |
| 391 | left: 0; |
| 392 | width: 100%; |
| 393 | height: 100%; |
| 394 | pointer-events: none; |
| 395 | } |
| 396 | .tutor-welcome .tutor-learning-mode-button .progress-border rect { |
| 397 | fill: none; |
| 398 | stroke: rgb(2, 101, 225); |
| 399 | stroke-width: 2px; |
| 400 | stroke-dasharray: 184; |
| 401 | stroke-dashoffset: 184; |
| 402 | } |
| 403 | .tutor-welcome .tutor-learning-mode-button.active { |
| 404 | filter: grayscale(0); |
| 405 | opacity: 1; |
| 406 | } |
| 407 | .tutor-welcome .tutor-learning-mode-button.active .progress-border rect { |
| 408 | animation: buttonBorderProgress 3s linear forwards; |
| 409 | } |
| 410 | @keyframes buttonBorderProgress { |
| 411 | 0% { |
| 412 | stroke-dashoffset: 184; |
| 413 | } |
| 414 | 100% { |
| 415 | stroke-dashoffset: 0; |
| 416 | } |
| 417 | } |
| 418 | .tutor-welcome .tutor-lm-text-transition { |
| 419 | transition: opacity 0.3s ease; |
| 420 | } |
| 421 | .tutor-welcome .tutor-lm-text-transition.fading { |
| 422 | opacity: 0; |
| 423 | } |
| 424 | .tutor-welcome .tutor-section-dashboard { |
| 425 | padding-top: 64px; |
| 426 | } |
| 427 | .tutor-welcome .tutor-section-dashboard .tutor-section-cards .tutor-section-card-navigation { |
| 428 | background-image: url("https://tutor-lms.s3.us-east-1.amazonaws.com/whats-new/navigation-bg.webp"); |
| 429 | background-size: cover; |
| 430 | h6, p { |
| 431 | color: #fff; |
| 432 | } |
| 433 | } |
| 434 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 435 | grid-template-columns: repeat(6, 1fr); |
| 436 | grid-template-areas: "puzzle puzzle puzzle image-marking image-marking image-marking" "graph graph range range pin pin"; |
| 437 | } |
| 438 | .tutor-welcome .tutor-section-learner .tutor-section-cards .tutor-section-card-notes { |
| 439 | background-image: url("https://tutor-lms.s3.us-east-1.amazonaws.com/whats-new/notes-bg.webp"); |
| 440 | background-size: cover; |
| 441 | h6, p { |
| 442 | color: #fff; |
| 443 | } |
| 444 | |
| 445 | } |
| 446 | .tutor-welcome .tutor-section-native .tutor-section-cards { |
| 447 | grid-template-areas: "native-app navigation" "mode mode"; |
| 448 | } |
| 449 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode { |
| 450 | border: 8px solid rgb(247, 247, 247); |
| 451 | padding: 8px; |
| 452 | flex-direction: row; |
| 453 | gap: 8px; |
| 454 | justify-content: flex-start; |
| 455 | } |
| 456 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title { |
| 457 | justify-content: center; |
| 458 | padding: 0; |
| 459 | } |
| 460 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title h6 { |
| 461 | font-size: 1rem; |
| 462 | line-height: 1.375rem; |
| 463 | letter-spacing: 0em; |
| 464 | font-weight: 600; |
| 465 | color: rgb(15, 15, 15); |
| 466 | } |
| 467 | .tutor-welcome .tutor-section-native .tutor-section-cards .tutor-section-card-learning-mode .tutor-section-card-title p { |
| 468 | margin: 0; |
| 469 | font-size: 0.875rem; |
| 470 | line-height: 1.125rem; |
| 471 | letter-spacing: 0; |
| 472 | font-weight: 400; |
| 473 | color: rgba(0, 0, 0, 0.68); |
| 474 | } |
| 475 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 476 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| 477 | grid-template-areas: "mode-preference mode-preference mode-preference mode-preference" "font contrast vision motion"; |
| 478 | } |
| 479 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-feature-card { |
| 480 | justify-content: flex-start; |
| 481 | } |
| 482 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison { |
| 483 | display: flex; |
| 484 | margin: 23px 82px 0 82px; |
| 485 | border-radius: 12px 12px 0 0; |
| 486 | border: 4px solid rgba(0, 0, 0, 0.03); |
| 487 | border-bottom: none; |
| 488 | position: relative; |
| 489 | line-height: 0; |
| 490 | z-index: 1; |
| 491 | } |
| 492 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison::before { |
| 493 | content: ""; |
| 494 | position: absolute; |
| 495 | z-index: -1; |
| 496 | pointer-events: none; |
| 497 | width: 241px; |
| 498 | height: 544px; |
| 499 | left: -236.5px; |
| 500 | top: 0px; |
| 501 | background: linear-gradient(347.31deg, rgba(245, 243, 241, 0.2) 37.95%, rgba(170, 170, 175, 0.12) 81.38%); |
| 502 | filter: blur(1.96px); |
| 503 | transform: matrix(-1, 0, 0, 1, 0, 0) translateZ(-1px); |
| 504 | clip-path: polygon(0 0, 100% 100%, 0 100%); |
| 505 | } |
| 506 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner { |
| 507 | position: relative; |
| 508 | width: 100%; |
| 509 | overflow: hidden; |
| 510 | border-radius: 8px 8px 0 0; |
| 511 | line-height: 0; |
| 512 | } |
| 513 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner img { |
| 514 | width: 100%; |
| 515 | height: auto; |
| 516 | object-fit: cover; |
| 517 | display: block; |
| 518 | user-select: none; |
| 519 | pointer-events: none; |
| 520 | } |
| 521 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner .tutor-comparison-img-light-wrapper { |
| 522 | position: absolute; |
| 523 | top: 0; |
| 524 | left: 0; |
| 525 | width: 100%; |
| 526 | height: 100%; |
| 527 | clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%); |
| 528 | } |
| 529 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-inner .tutor-comparison-handle-line { |
| 530 | position: absolute; |
| 531 | top: 0; |
| 532 | bottom: 0; |
| 533 | left: var(--pos); |
| 534 | width: 2px; |
| 535 | background-color: rgb(0, 98, 254); |
| 536 | transform: translateX(-50%); |
| 537 | pointer-events: none; |
| 538 | z-index: 5; |
| 539 | } |
| 540 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-slider { |
| 541 | position: absolute; |
| 542 | top: 0; |
| 543 | left: 0; |
| 544 | width: 100%; |
| 545 | height: 100%; |
| 546 | opacity: 0; |
| 547 | cursor: ew-resize; |
| 548 | margin: 0; |
| 549 | z-index: 10; |
| 550 | -webkit-appearance: none; |
| 551 | appearance: none; |
| 552 | } |
| 553 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-handle-icon { |
| 554 | position: absolute; |
| 555 | top: 50%; |
| 556 | left: var(--pos); |
| 557 | transform: translate(-50%, -50%); |
| 558 | pointer-events: none; |
| 559 | z-index: 6; |
| 560 | width: 38px; |
| 561 | height: 38px; |
| 562 | aspect-ratio: 1/1; |
| 563 | display: flex; |
| 564 | align-items: center; |
| 565 | justify-content: center; |
| 566 | border-radius: 50%; |
| 567 | background: white; |
| 568 | box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.15); |
| 569 | } |
| 570 | .tutor-welcome .tutor-section-a11y .tutor-section-card-comparison .tutor-comparison-handle-icon svg { |
| 571 | position: relative; |
| 572 | z-index: 1; |
| 573 | } |
| 574 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 575 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| 576 | grid-template-areas: "learners assignments announcements"; |
| 577 | } |
| 578 | /* Full-width background sections */ |
| 579 | .tutor-welcome .tutor-section-bg { |
| 580 | width: 100%; |
| 581 | } |
| 582 | .tutor-welcome .tutor-section-learner { |
| 583 | padding-bottom: 64px; |
| 584 | } |
| 585 | .tutor-welcome .tutor-section-bg-interactive { |
| 586 | background-color: #000; |
| 587 | padding-top: 64px; |
| 588 | } |
| 589 | .tutor-welcome .tutor-section-bg-native { |
| 590 | background: |
| 591 | linear-gradient(180deg, #000000 4.74%, #091DF6 47.11%, rgba(255, 255, 255, 0) 79.7%), |
| 592 | linear-gradient(0deg, #FFFFFF, #FFFFFF); |
| 593 | } |
| 594 | |
| 595 | /* Light text on dark backgrounds */ |
| 596 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title p, |
| 597 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title h2, |
| 598 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-title-right p, |
| 599 | .tutor-welcome .tutor-section-bg-native .tutor-section-title h2, |
| 600 | .tutor-welcome .tutor-section-bg-native .tutor-section-title-center p, |
| 601 | .tutor-welcome .tutor-section-bg-native .tutor-section-title-center h2 { |
| 602 | color: #fff; |
| 603 | } |
| 604 | .tutor-welcome .tutor-section-bg-native .tutor-section-title p { |
| 605 | color: rgba(255, 255, 255, 0.7); |
| 606 | } |
| 607 | |
| 608 | /* Interactive Assessments Card background */ |
| 609 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-cards .tutor-section-card { |
| 610 | background-color: rgba(255, 255, 255, 0.1); |
| 611 | border: 1px solid rgba(26, 26, 26, 1) |
| 612 | } |
| 613 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-cards .tutor-section-card .tutor-section-card-title h6 { |
| 614 | color: #fff; |
| 615 | } |
| 616 | |
| 617 | /* Rotating gradient border on "Native App Like Experience" subtitle */ |
| 618 | .tutor-welcome .tutor-section-native .gradient-btn-wrapper { |
| 619 | position: relative; |
| 620 | padding: 1.5px; |
| 621 | border-radius: 9999px; |
| 622 | display: inline-block; |
| 623 | overflow: hidden; |
| 624 | margin-bottom: 16px; |
| 625 | } |
| 626 | .tutor-welcome .tutor-section-native .gradient-spinner { |
| 627 | position: absolute; |
| 628 | top: 50%; |
| 629 | left: 50%; |
| 630 | width: 220%; |
| 631 | aspect-ratio: 1 / 1; |
| 632 | transform-origin: center; |
| 633 | background: conic-gradient( |
| 634 | from 0deg, |
| 635 | transparent 0deg, |
| 636 | transparent 120deg, |
| 637 | #DAC64B 150deg, |
| 638 | #CC616E 180deg, |
| 639 | #517ECF 210deg, |
| 640 | #86C672 240deg, |
| 641 | transparent 270deg, |
| 642 | transparent 360deg |
| 643 | ); |
| 644 | animation: tutor-gradient-spin 4s linear infinite; |
| 645 | z-index: 1; |
| 646 | } |
| 647 | .tutor-welcome .tutor-section-native .gradient-btn-content { |
| 648 | position: relative; |
| 649 | z-index: 2; |
| 650 | background: #000; |
| 651 | color: #fff; |
| 652 | border: none; |
| 653 | border-radius: 9999px; |
| 654 | padding: 8px 12px; |
| 655 | display: flex; |
| 656 | align-items: center; |
| 657 | gap: 8px; |
| 658 | font-size: inherit; |
| 659 | font-weight: 500; |
| 660 | white-space: nowrap; |
| 661 | user-select: none; |
| 662 | cursor: default; |
| 663 | } |
| 664 | .tutor-welcome .tutor-section-native .gradient-btn-dot { |
| 665 | width: 8px; |
| 666 | height: 8px; |
| 667 | background-color: rgba(255, 255, 255, 0.7); |
| 668 | border-radius: 50%; |
| 669 | display: inline-block; |
| 670 | flex-shrink: 0; |
| 671 | } |
| 672 | @keyframes tutor-gradient-spin { |
| 673 | 0% { transform: translate(-50%, -50%) rotate(60deg); } |
| 674 | 25% { transform: translate(-50%, -50%) rotate(150deg); } |
| 675 | 50% { transform: translate(-50%, -50%) rotate(240deg); } |
| 676 | 75% { transform: translate(-50%, -50%) rotate(330deg); } |
| 677 | 100% { transform: translate(-50%, -50%) rotate(420deg); } |
| 678 | } |
| 679 | .tutor-welcome .tutor-section-milestone { |
| 680 | padding-bottom: 32px 10px; |
| 681 | } |
| 682 | .tutor-welcome .tutor-section-milestone .tutor-section-title .tutor-section-title-center { |
| 683 | gap: 32px; |
| 684 | } |
| 685 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 686 | font-size: 9rem; |
| 687 | line-height: 1; |
| 688 | font-weight: 700; |
| 689 | margin: 0; |
| 690 | background: linear-gradient( |
| 691 | 90deg, |
| 692 | #124BFF 0%, |
| 693 | #4184FF 25%, |
| 694 | #F26D6D 50%, |
| 695 | #124BFF 75%, |
| 696 | #124BFF 100% |
| 697 | ); |
| 698 | background-size: 200% auto; |
| 699 | -webkit-background-clip: text; |
| 700 | background-clip: text; |
| 701 | -webkit-text-fill-color: transparent; |
| 702 | color: transparent; |
| 703 | filter: url(#tutor-milestone-inner-shadow); |
| 704 | animation: tutor-milestone-gradient 2s linear infinite; |
| 705 | } |
| 706 | @keyframes tutor-milestone-gradient { |
| 707 | 0% { |
| 708 | background-position: 0% center; |
| 709 | } |
| 710 | 100% { |
| 711 | background-position: 200% center; |
| 712 | } |
| 713 | } |
| 714 | @media (prefers-reduced-motion: reduce) { |
| 715 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 716 | animation: none; |
| 717 | } |
| 718 | } |
| 719 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 720 | font-size: 20px; |
| 721 | line-height: 28px; |
| 722 | letter-spacing: -0.5%; |
| 723 | font-weight: 500; |
| 724 | } |
| 725 | .tutor-welcome .tutor-section-milestone .tutor-section-title p span { |
| 726 | text-decoration: none; |
| 727 | color: rgba(0, 73, 248, 1); |
| 728 | |
| 729 | } |
| 730 | .tutor-welcome .tutor-milestone-ratings { |
| 731 | display: flex; |
| 732 | flex-direction: row; |
| 733 | align-items: center; |
| 734 | justify-content: center; |
| 735 | gap: 24px; |
| 736 | margin-top: 40px; |
| 737 | } |
| 738 | .tutor-welcome .tutor-rating-item { |
| 739 | display: flex; |
| 740 | flex-direction: column; |
| 741 | align-items: center; |
| 742 | gap: 4px; |
| 743 | } |
| 744 | |
| 745 | .tutor-welcome .tutor-rating-value { |
| 746 | font-size: 20px; |
| 747 | font-weight: 700; |
| 748 | color: rgb(15, 15, 15); |
| 749 | line-height: 28px; |
| 750 | } |
| 751 | .tutor-welcome .tutor-rating-label { |
| 752 | font-size: 18px; |
| 753 | font-weight: 400; |
| 754 | color: rgba(0, 0, 0, 0.7); |
| 755 | line-height: 26px; |
| 756 | } |
| 757 | .tutor-welcome .tutor-rating-divider { |
| 758 | width: 1px; |
| 759 | height: 32px; |
| 760 | background-color: rgba(217, 217, 217, 1); |
| 761 | } |
| 762 | |
| 763 | /* Action button on dark backgrounds */ |
| 764 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action { |
| 765 | background-color: #fff; |
| 766 | color: #000; |
| 767 | } |
| 768 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action:hover, |
| 769 | .tutor-welcome .tutor-section-bg-interactive .tutor-section-action:focus { |
| 770 | background-color: rgba(255, 255, 255, 0.8); |
| 771 | } |
| 772 | .tutor-welcome .tutor-section-bg-native .tutor-section-action { |
| 773 | background-color: #fff; |
| 774 | color: #000; |
| 775 | } |
| 776 | .tutor-welcome .tutor-section-bg-native .tutor-section-action:hover, |
| 777 | .tutor-welcome .tutor-section-bg-native .tutor-section-action:focus { |
| 778 | background-color: rgba(255, 255, 255, 0.8); |
| 779 | } |
| 780 | |
| 781 | @media (max-width: 1024px) { |
| 782 | #wpbody-content { |
| 783 | padding-bottom: 0; |
| 784 | } |
| 785 | .tutor-welcome br { |
| 786 | display: none; |
| 787 | } |
| 788 | .tutor-welcome .tutor-section-layout { |
| 789 | padding: 48px 24px; |
| 790 | gap: 96px; |
| 791 | } |
| 792 | .tutor-welcome .tutor-section-learner { |
| 793 | padding-bottom: 48px; |
| 794 | } |
| 795 | .tutor-welcome .tutor-section-bg-interactive { |
| 796 | padding-top: 48px; |
| 797 | } |
| 798 | .tutor-welcome .tutor-section-wrapper { |
| 799 | gap: 40px; |
| 800 | } |
| 801 | .tutor-welcome .tutor-section-title { |
| 802 | gap: 10px; |
| 803 | align-items: flex-start; |
| 804 | } |
| 805 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center { |
| 806 | gap: 4px; |
| 807 | } |
| 808 | .tutor-welcome .tutor-section-title-left h2, .tutor-welcome .tutor-section-title-center h2 { |
| 809 | font-size: 2rem; |
| 810 | line-height: 2.5rem; |
| 811 | margin-inline-end: 10px; |
| 812 | } |
| 813 | .tutor-welcome .tutor-section-title-left p, .tutor-welcome .tutor-section-title-center p { |
| 814 | font-size: 0.75rem; |
| 815 | line-height: 1.125rem; |
| 816 | } |
| 817 | .tutor-welcome .tutor-section-action { |
| 818 | max-width: fit-content; |
| 819 | } |
| 820 | .tutor-welcome .tutor-section-cards { |
| 821 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| 822 | gap: 10px; |
| 823 | } |
| 824 | .tutor-welcome .tutor-section-card-title { |
| 825 | gap: 10px; |
| 826 | padding: 20px; |
| 827 | } |
| 828 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 829 | grid-template-areas: "puzzle puzzle puzzle image-marking image-marking image-marking" "graph graph range range pin pin"; |
| 830 | } |
| 831 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 832 | grid-template-areas: "mode-preference mode-preference" "font contrast" "vision motion"; |
| 833 | } |
| 834 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-card-comparison { |
| 835 | margin: 0 40px 0 40px; |
| 836 | } |
| 837 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 838 | grid-template-areas: "learners assignments" "announcements announcements"; |
| 839 | } |
| 840 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards [style*="grid-area: announcements"] { |
| 841 | height: 400px; |
| 842 | } |
| 843 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards [style*="grid-area: announcements"] img { |
| 844 | width: min-content; |
| 845 | margin-inline: auto; |
| 846 | } |
| 847 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 848 | font-size: 6rem; |
| 849 | } |
| 850 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 851 | font-size: 18px; |
| 852 | line-height: 26px; |
| 853 | } |
| 854 | .tutor-welcome .tutor-milestone-ratings { |
| 855 | gap: 20px; |
| 856 | margin-top: 32px; |
| 857 | } |
| 858 | .tutor-welcome .tutor-rating-value { |
| 859 | font-size: 18px; |
| 860 | line-height: 26px; |
| 861 | } |
| 862 | .tutor-welcome .tutor-rating-label { |
| 863 | font-size: 16px; |
| 864 | line-height: 24px; |
| 865 | } |
| 866 | .tutor-welcome .tutor-rating-divider { |
| 867 | height: 28px; |
| 868 | } |
| 869 | } |
| 870 | @media (max-width: 768px) { |
| 871 | .tutor-welcome { |
| 872 | margin-left: -10px; |
| 873 | } |
| 874 | .tutor-welcome .tutor-hero-image { |
| 875 | height: 404px; |
| 876 | object-fit: cover; |
| 877 | } |
| 878 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 879 | font-size: 4.5rem; |
| 880 | } |
| 881 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 882 | font-size: 16px; |
| 883 | line-height: 24px; |
| 884 | } |
| 885 | .tutor-welcome .tutor-milestone-ratings { |
| 886 | gap: 16px; |
| 887 | margin-top: 24px; |
| 888 | } |
| 889 | .tutor-welcome .tutor-rating-value { |
| 890 | font-size: 16px; |
| 891 | line-height: 24px; |
| 892 | } |
| 893 | .tutor-welcome .tutor-rating-label { |
| 894 | font-size: 14px; |
| 895 | line-height: 20px; |
| 896 | } |
| 897 | .tutor-welcome .tutor-rating-divider { |
| 898 | height: 24px; |
| 899 | } |
| 900 | } |
| 901 | @media (max-width: 430px) { |
| 902 | .tutor-welcome .tutor-hero-image { |
| 903 | height: 263px; |
| 904 | object-fit: cover; |
| 905 | } |
| 906 | .tutor-welcome .tutor-section-milestone .tutor-section-title h1 { |
| 907 | font-size: 3.2rem; |
| 908 | } |
| 909 | .tutor-welcome .tutor-section-milestone .tutor-section-title p { |
| 910 | font-size: 14px; |
| 911 | line-height: 20px; |
| 912 | } |
| 913 | .tutor-welcome .tutor-milestone-ratings { |
| 914 | gap: 10px; |
| 915 | margin-top: 20px; |
| 916 | } |
| 917 | .tutor-welcome .tutor-rating-value { |
| 918 | font-size: 14px; |
| 919 | line-height: 20px; |
| 920 | } |
| 921 | .tutor-welcome .tutor-rating-label { |
| 922 | font-size: 12px; |
| 923 | line-height: 16px; |
| 924 | } |
| 925 | .tutor-welcome .tutor-rating-divider { |
| 926 | height: 20px; |
| 927 | } |
| 928 | .tutor-welcome .tutor-welcome-dismiss-bar { |
| 929 | top: 8px; |
| 930 | |
| 931 | a { |
| 932 | margin-inline-end: 8px; |
| 933 | } |
| 934 | } |
| 935 | .tutor-welcome .tutor-welcome-dismiss-btn { |
| 936 | border-radius: 999px; |
| 937 | padding: 12px; |
| 938 | gap: 0; |
| 939 | } |
| 940 | .tutor-welcome .tutor-welcome-dismiss-btn span { |
| 941 | display: none; |
| 942 | } |
| 943 | .tutor-welcome .tutor-welcome-dismiss-btn svg { |
| 944 | width: 20px; |
| 945 | height: 20px; |
| 946 | } |
| 947 | .tutor-welcome .tutor-section-layout { |
| 948 | padding-inline: 16px; |
| 949 | } |
| 950 | .tutor-welcome .tutor-section-cards { |
| 951 | gap: 16px; |
| 952 | } |
| 953 | .tutor-welcome .tutor-section-title { |
| 954 | gap: 10px; |
| 955 | flex-wrap: wrap; |
| 956 | } |
| 957 | .tutor-welcome .tutor-section-title-left, .tutor-welcome .tutor-section-title-center, .tutor-welcome .tutor-section-title-right { |
| 958 | flex-basis: 100%; |
| 959 | } |
| 960 | .tutor-welcome .tutor-section-action { |
| 961 | max-width: 196px; |
| 962 | } |
| 963 | .tutor-welcome .tutor-section-interactive .tutor-section-cards { |
| 964 | grid-template-columns: 1fr; |
| 965 | grid-template-areas: "puzzle" "image-marking" "graph" "range" "pin"; |
| 966 | } |
| 967 | .tutor-welcome .tutor-section-native .tutor-section-cards { |
| 968 | grid-template-areas: "native-app" "navigation" "mode"; |
| 969 | } |
| 970 | .tutor-welcome .tutor-section-a11y .tutor-section-cards { |
| 971 | grid-template-areas: "mode-preference" "font" "contrast" "vision" "motion"; |
| 972 | } |
| 973 | .tutor-welcome .tutor-section-a11y .tutor-section-cards .tutor-section-card-comparison { |
| 974 | margin: 0 20px 0 20px; |
| 975 | } |
| 976 | .tutor-welcome .tutor-section-instructor-dashboard .tutor-section-cards { |
| 977 | grid-template-areas: "learners" "assignments" "announcements"; |
| 978 | } |
| 979 | } |
| 980 | </style> |
| 981 | |
| 982 | <div class="tutor-welcome"> |
| 983 | <div class="tutor-welcome-dismiss-bar"> |
| 984 | <a href="<?php echo esc_url( admin_url( 'admin.php?page=tutor' ) ); ?>" class="tutor-section-action tutor-section-action-outline tutor-welcome-dismiss-btn"> |
| 985 | <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> |
| 986 | <span><?php esc_html_e( 'Don\'t show again', 'tutor' ); ?></span> |
| 987 | </a> |
| 988 | </div> |
| 989 | <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' ); ?>"> |
| 990 | |
| 991 | <div class="tutor-section-layout"> |
| 992 | |
| 993 | <!-- Dashboard and Navigation --> |
| 994 | <section class="tutor-section-wrapper tutor-section-dashboard"> |
| 995 | <div class="tutor-section-title"> |
| 996 | <div class="tutor-section-title-left"> |
| 997 | <p><?php esc_html_e( 'Dashboard and Navigation', 'tutor' ); ?></p> |
| 998 | <h2><?php esc_html_e( 'Designed for flow.', 'tutor' ); ?></h2> |
| 999 | </div> |
| 1000 | <div class="tutor-section-title-right"> |
| 1001 | <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> |
| 1002 | </div> |
| 1003 | </div> |
| 1004 | |
| 1005 | <div class="tutor-section-cards"> |
| 1006 | <?php foreach ( $dashboard_cards as $card ) : ?> |
| 1007 | <?php $render_card( $card ); ?> |
| 1008 | <?php endforeach; ?> |
| 1009 | </div> |
| 1010 | </section> |
| 1011 | |
| 1012 | <!-- Learners First --> |
| 1013 | <section class="tutor-section-wrapper tutor-section-learner"> |
| 1014 | <div class="tutor-section-title"> |
| 1015 | <div class="tutor-section-title-left"> |
| 1016 | <p><?php esc_html_e( 'Learner first design', 'tutor' ); ?></p> |
| 1017 | <h2><?php esc_html_e( 'Everything they need. Exactly where they expect it.', 'tutor' ); ?></h2> |
| 1018 | </div> |
| 1019 | <div class="tutor-section-title-right"> |
| 1020 | <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> |
| 1021 | <div> |
| 1022 | <?php $render_action_button( $action_button_text, 'https://tutorlms.com/Course-Builder/' ); ?> |
| 1023 | </div> |
| 1024 | </div> |
| 1025 | </div> |
| 1026 | |
| 1027 | <div class="tutor-section-cards"> |
| 1028 | <?php foreach ( $learner_cards as $card ) : ?> |
| 1029 | <?php $render_card( $card ); ?> |
| 1030 | <?php endforeach; ?> |
| 1031 | </div> |
| 1032 | </section> |
| 1033 | </div> |
| 1034 | |
| 1035 | <div class="tutor-section-bg tutor-section-bg-interactive"> |
| 1036 | <div class="tutor-section-layout"> |
| 1037 | <!-- Interactive Assessments --> |
| 1038 | <section class="tutor-section-wrapper tutor-section-interactive"> |
| 1039 | <div class="tutor-section-title"> |
| 1040 | <div class="tutor-section-title-left"> |
| 1041 | <p><?php esc_html_e( 'Interactive Assessments', 'tutor' ); ?></p> |
| 1042 | <h2><?php esc_html_e( '5 new ways to make assessment actually fun.', 'tutor' ); ?></h2> |
| 1043 | </div> |
| 1044 | <div class="tutor-section-title-right"> |
| 1045 | <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> |
| 1046 | <div> |
| 1047 | <?php $render_action_button( $action_button_text, 'https://tutorlms.com/quizzess/' ); ?> |
| 1048 | </div> |
| 1049 | </div> |
| 1050 | </div> |
| 1051 | |
| 1052 | <div class="tutor-section-cards"> |
| 1053 | <?php foreach ( $interactive_cards as $card ) : ?> |
| 1054 | <?php $render_card( $card ); ?> |
| 1055 | <?php endforeach; ?> |
| 1056 | </div> |
| 1057 | </section> |
| 1058 | </div> |
| 1059 | </div> |
| 1060 | |
| 1061 | <div class="tutor-section-bg tutor-section-bg-native"> |
| 1062 | <div class="tutor-section-layout"> |
| 1063 | <!-- Native App --> |
| 1064 | <section class="tutor-section-wrapper tutor-section-native"> |
| 1065 | <div class="tutor-section-title"> |
| 1066 | <div class="tutor-section-title-center"> |
| 1067 | <div class="gradient-btn-wrapper"> |
| 1068 | <div class="gradient-spinner"></div> |
| 1069 | <div class="gradient-btn-content"> |
| 1070 | <span class="gradient-btn-dot"></span> |
| 1071 | <p><?php esc_html_e( 'Native App Like Experience', 'tutor' ); ?></p> |
| 1072 | </div> |
| 1073 | </div> |
| 1074 | <h2> |
| 1075 | <?php |
| 1076 | printf( |
| 1077 | // translators: placeholder is a line break. |
| 1078 | esc_html__( 'Your academy, in %s your pocket.', 'tutor' ), |
| 1079 | '<br/>' |
| 1080 | ); |
| 1081 | ?> |
| 1082 | </h2> |
| 1083 | </div> |
| 1084 | </div> |
| 1085 | |
| 1086 | <div class="tutor-section-cards"> |
| 1087 | <div class="tutor-section-card" style="grid-area: native-app;"> |
| 1088 | <div class="tutor-section-card-title"> |
| 1089 | <h6><?php esc_html_e( 'Native app like experience', 'tutor' ); ?></h6> |
| 1090 | <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> |
| 1091 | </div> |
| 1092 | <div class="tutor-section-card-image tutor-toggle-images"> |
| 1093 | <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' ); ?>"> |
| 1094 | <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' ); ?>"> |
| 1095 | </div> |
| 1096 | </div> |
| 1097 | |
| 1098 | <div class="tutor-section-card" style="grid-area: navigation;"> |
| 1099 | <div class="tutor-section-card-title"> |
| 1100 | <h6><?php esc_html_e( 'Smoother navigation', 'tutor' ); ?></h6> |
| 1101 | <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> |
| 1102 | </div> |
| 1103 | <div class="tutor-section-card-image tutor-toggle-images"> |
| 1104 | <img class="tutor-img-default" src="<?php echo esc_url( $asset_base . 'smoother-navigation.webp' ); ?>" alt="<?php esc_attr_e( 'Smoother navigation', 'tutor' ); ?>"> |
| 1105 | <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' ); ?>"> |
| 1106 | </div> |
| 1107 | </div> |
| 1108 | |
| 1109 | <div class="tutor-section-card tutor-section-card-learning-mode" style="grid-area: mode;"> |
| 1110 | <button class="tutor-learning-mode-button active" data-mode="default" aria-label="<?php esc_attr_e( 'Switch to modern mode', 'tutor' ); ?>"> |
| 1111 | <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> |
| 1112 | <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> |
| 1113 | </button> |
| 1114 | <button class="tutor-learning-mode-button" data-mode="kids" aria-label="<?php esc_attr_e( 'Switch to kids mode', 'tutor' ); ?>"> |
| 1115 | <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> |
| 1116 | <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> |
| 1117 | </button> |
| 1118 | |
| 1119 | <div class="tutor-section-card-title tutor-lm-text-transition" |
| 1120 | data-default-title="<?php esc_attr_e( 'Modern Modes', 'tutor' ); ?>" |
| 1121 | data-default-desc="<?php esc_attr_e( 'A modern, distraction-free learning experience.', 'tutor' ); ?>" |
| 1122 | data-kids-title="<?php esc_attr_e( 'Kids Mode', 'tutor' ); ?>" |
| 1123 | data-kids-desc="<?php esc_attr_e( 'A fun, engaging and distraction-free learning experience.', 'tutor' ); ?>"> |
| 1124 | <h6><?php esc_html_e( 'Modern Modes', 'tutor' ); ?></h6> |
| 1125 | <p><?php esc_html_e( 'A modern, distraction-free learning experience.', 'tutor' ); ?></p> |
| 1126 | </div> |
| 1127 | </div> |
| 1128 | </div> |
| 1129 | </section> |
| 1130 | </div> |
| 1131 | </div> |
| 1132 | |
| 1133 | <div class="tutor-section-layout"> |
| 1134 | <!-- Accessibility --> |
| 1135 | <section class="tutor-section-wrapper tutor-section-a11y"> |
| 1136 | <div class="tutor-section-title"> |
| 1137 | <div class="tutor-section-title-center"> |
| 1138 | <p><?php esc_html_e( 'Accessibility', 'tutor' ); ?></p> |
| 1139 | <h2> |
| 1140 | <?php |
| 1141 | printf( |
| 1142 | // translators: placeholder is a line break. |
| 1143 | esc_html__( 'No learner left behind. %s By design.', 'tutor' ), |
| 1144 | '<br/>' |
| 1145 | ); |
| 1146 | ?> |
| 1147 | </h2> |
| 1148 | </div> |
| 1149 | </div> |
| 1150 | |
| 1151 | <div class="tutor-section-cards"> |
| 1152 | <!-- Mode with preference --> |
| 1153 | <div class="tutor-section-card" style="grid-area: mode-preference;"> |
| 1154 | <div class="tutor-section-card-title"> |
| 1155 | <h6><?php esc_html_e( 'Mode with preference', 'tutor' ); ?></h6> |
| 1156 | <p><?php esc_html_e( 'Students can switch between Modern, Dark, and Kids modes to match their personal comfort and learning environment.', 'tutor' ); ?></p> |
| 1157 | </div> |
| 1158 | |
| 1159 | <div class="tutor-section-card-comparison" data-comparison-pos="50"> |
| 1160 | <div class="tutor-comparison-inner"> |
| 1161 | <img src="<?php echo esc_url( $asset_base . 'dashboard-dark.webp' ); ?>" alt="<?php esc_attr_e( 'Dark Mode', 'tutor' ); ?>"> |
| 1162 | <div class="tutor-comparison-img-light-wrapper"> |
| 1163 | <img src="<?php echo esc_url( $asset_base . 'dashboard-light.webp' ); ?>" alt="<?php esc_attr_e( 'Light Mode', 'tutor' ); ?>"> |
| 1164 | </div> |
| 1165 | <div class="tutor-comparison-handle-line"></div> |
| 1166 | </div> |
| 1167 | <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' ); ?>"> |
| 1168 | <div class="tutor-comparison-handle-icon"> |
| 1169 | <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> |
| 1170 | </div> |
| 1171 | </div> |
| 1172 | </div> |
| 1173 | |
| 1174 | <?php foreach ( $a11y_feature_cards as $card ) : ?> |
| 1175 | <?php $render_card( $card ); ?> |
| 1176 | <?php endforeach; ?> |
| 1177 | </div> |
| 1178 | </section> |
| 1179 | |
| 1180 | <!-- Instructor Dashboard --> |
| 1181 | <section class="tutor-section-wrapper tutor-section-instructor-dashboard"> |
| 1182 | <div class="tutor-section-title"> |
| 1183 | <div class="tutor-section-title-left"> |
| 1184 | <p><?php esc_html_e( 'Instructor Dashboard', 'tutor' ); ?></p> |
| 1185 | <h2> |
| 1186 | <?php |
| 1187 | printf( |
| 1188 | // translators: placeholder is a line break. |
| 1189 | esc_html__( 'Run your entire academy %s from one screen.', 'tutor' ), |
| 1190 | '<br/>' |
| 1191 | ); |
| 1192 | ?> |
| 1193 | </h2> |
| 1194 | </div> |
| 1195 | <div class="tutor-section-title-right"> |
| 1196 | <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> |
| 1197 | <div> |
| 1198 | <?php $render_action_button( $action_button_text, $action_button_url ); ?> |
| 1199 | </div> |
| 1200 | </div> |
| 1201 | </div> |
| 1202 | |
| 1203 | <div class="tutor-section-cards"> |
| 1204 | <?php foreach ( $instructor_cards as $card ) : ?> |
| 1205 | <?php $render_card( $card ); ?> |
| 1206 | <?php endforeach; ?> |
| 1207 | </div> |
| 1208 | </section> |
| 1209 | |
| 1210 | <!-- Milestone --> |
| 1211 | <section class="tutor-section-wrapper tutor-section-milestone"> |
| 1212 | <div class="tutor-section-title"> |
| 1213 | <div class="tutor-section-title-center"> |
| 1214 | <h1><?php esc_html_e( '100,000+', 'tutor' ); ?></h1> |
| 1215 | <p> |
| 1216 | <?php |
| 1217 | printf( |
| 1218 | // translators: %s: placeholder is a link. |
| 1219 | esc_html__( 'eLearning websites are running on %s', 'tutor' ), |
| 1220 | '<span>Tutor LMS.</span>' |
| 1221 | ); |
| 1222 | ?> |
| 1223 | </p> |
| 1224 | <div> |
| 1225 | <?php $render_action_button( $action_button_text, $action_button_url ); ?> |
| 1226 | </div> |
| 1227 | |
| 1228 | <div class="tutor-milestone-ratings"> |
| 1229 | <div class="tutor-rating-item"> |
| 1230 | <div class="tutor-rating-value"><?php esc_html_e( '4.6 � |
| 1231 | ', 'tutor' ); ?></div> |
| 1232 | <div class="tutor-rating-label"><?php esc_html_e( 'G2 Ratings', 'tutor' ); ?></div> |
| 1233 | </div> |
| 1234 | <div class="tutor-rating-divider"></div> |
| 1235 | <div class="tutor-rating-item"> |
| 1236 | <div class="tutor-rating-value"><?php esc_html_e( '#1', 'tutor' ); ?></div> |
| 1237 | <div class="tutor-rating-label"><?php esc_html_e( 'Product Hunt', 'tutor' ); ?></div> |
| 1238 | </div> |
| 1239 | <div class="tutor-rating-divider"></div> |
| 1240 | <div class="tutor-rating-item"> |
| 1241 | <div class="tutor-rating-value"><?php esc_html_e( '4.7 � |
| 1242 | ', 'tutor' ); ?></div> |
| 1243 | <div class="tutor-rating-label"><?php esc_html_e( 'Trustpilot', 'tutor' ); ?></div> |
| 1244 | </div> |
| 1245 | </div> |
| 1246 | </div> |
| 1247 | </div> |
| 1248 | </section> |
| 1249 | </div> |
| 1250 | </div> |
| 1251 | |
| 1252 | <!-- SVG Filter for Inset Shadow --> |
| 1253 | <svg width="0" height="0" style="position: absolute; pointer-events: none; overflow: hidden;" aria-hidden="true" focusable="false"> |
| 1254 | <defs> |
| 1255 | <filter id="tutor-milestone-inner-shadow" x="-20%" y="-20%" width="140%" height="140%"> |
| 1256 | <feOffset dx="0" dy="3" /> |
| 1257 | <feGaussianBlur stdDeviation="1.5" result="offset-blur" /> |
| 1258 | <feComposite operator="out" in="SourceAlpha" in2="offset-blur" result="inverse" /> |
| 1259 | <feFlood flood-color="#9C0A0A" flood-opacity="0.14" result="color" /> |
| 1260 | <feComposite operator="in" in="color" in2="inverse" result="shadow" /> |
| 1261 | <feComposite operator="in" in="shadow" in2="SourceAlpha" result="inner-shadow" /> |
| 1262 | <feMerge> |
| 1263 | <feMergeNode in="SourceGraphic" /> |
| 1264 | <feMergeNode in="inner-shadow" /> |
| 1265 | </feMerge> |
| 1266 | </filter> |
| 1267 | </defs> |
| 1268 | </svg> |
| 1269 | |
| 1270 | <script> |
| 1271 | document.addEventListener('DOMContentLoaded', function () { |
| 1272 | initLearningModeToggle(); |
| 1273 | initComparisonSlider(); |
| 1274 | |
| 1275 | function initLearningModeToggle() { |
| 1276 | const modeButtons = Array.from(document.querySelectorAll('.tutor-learning-mode-button')); |
| 1277 | const toggleImages = document.querySelectorAll('.tutor-toggle-images'); |
| 1278 | const textContainer = document.querySelector('.tutor-lm-text-transition'); |
| 1279 | |
| 1280 | if (!modeButtons.length || !textContainer) return; |
| 1281 | |
| 1282 | const titleEl = textContainer.querySelector('h6'); |
| 1283 | const descEl = textContainer.querySelector('p'); |
| 1284 | const MODE_SWITCH_DELAY_MS = 300; |
| 1285 | |
| 1286 | const switchMode = (mode) => { |
| 1287 | modeButtons.forEach((btn) => { |
| 1288 | btn.classList.remove('active'); |
| 1289 | // Force reflow to reset the progress-border animation. |
| 1290 | void btn.offsetWidth; |
| 1291 | }); |
| 1292 | |
| 1293 | const activeBtn = modeButtons.find((btn) => btn.dataset.mode === mode); |
| 1294 | if (activeBtn) activeBtn.classList.add('active'); |
| 1295 | |
| 1296 | toggleImages.forEach((container) => { |
| 1297 | container.classList.toggle('show-kids', mode === 'kids'); |
| 1298 | }); |
| 1299 | |
| 1300 | textContainer.classList.add('fading'); |
| 1301 | setTimeout(() => { |
| 1302 | const titleAttr = mode === 'kids' ? 'kidsTitle' : 'defaultTitle'; |
| 1303 | const descAttr = mode === 'kids' ? 'kidsDesc' : 'defaultDesc'; |
| 1304 | |
| 1305 | if (titleEl) titleEl.textContent = textContainer.dataset[titleAttr] || ''; |
| 1306 | if (descEl) descEl.textContent = textContainer.dataset[descAttr] || ''; |
| 1307 | textContainer.classList.remove('fading'); |
| 1308 | }, MODE_SWITCH_DELAY_MS); |
| 1309 | }; |
| 1310 | |
| 1311 | modeButtons.forEach((btn) => { |
| 1312 | btn.addEventListener('click', () => { |
| 1313 | const mode = btn.dataset.mode; |
| 1314 | if (mode) switchMode(mode); |
| 1315 | }); |
| 1316 | |
| 1317 | const rect = btn.querySelector('.progress-border rect'); |
| 1318 | if (rect) { |
| 1319 | rect.addEventListener('animationend', () => { |
| 1320 | if (btn.classList.contains('active')) { |
| 1321 | const nextMode = btn.dataset.mode === 'default' ? 'kids' : 'default'; |
| 1322 | switchMode(nextMode); |
| 1323 | } |
| 1324 | }); |
| 1325 | } |
| 1326 | }); |
| 1327 | } |
| 1328 | |
| 1329 | function initComparisonSlider() { |
| 1330 | const container = document.querySelector('.tutor-section-card-comparison'); |
| 1331 | const slider = container ? container.querySelector('.tutor-comparison-slider') : null; |
| 1332 | |
| 1333 | if (!container || !slider) return; |
| 1334 | |
| 1335 | const initialPos = Number(container.dataset.comparisonPos) || Number(slider.value) || 50; |
| 1336 | container.style.setProperty('--pos', initialPos + '%'); |
| 1337 | slider.value = String(initialPos); |
| 1338 | |
| 1339 | slider.addEventListener('input', () => { |
| 1340 | container.style.setProperty('--pos', slider.value + '%'); |
| 1341 | }); |
| 1342 | } |
| 1343 | }); |
| 1344 | </script> |