+871

index.css

reviewed

··· 1 1 + /* UXET - UX Testing Framework Styles */ 2 2 + 3 3 + :root { 4 4 + /* Colors */ 5 5 + --bg-primary: #0a0a0f; 6 6 + --bg-secondary: #12121a; 7 7 + --bg-tertiary: #1a1a24; 8 8 + --bg-glass: rgba(26, 26, 36, 0.8); 9 9 + 10 10 + --text-primary: #f0f0f5; 11 11 + --text-secondary: #a0a0b0; 12 12 + --text-muted: #606070; 13 13 + 14 14 + --accent-primary: #6366f1; 15 15 + --accent-primary-hover: #818cf8; 16 16 + --accent-secondary: #22d3ee; 17 17 + --accent-success: #22c55e; 18 18 + --accent-danger: #ef4444; 19 19 + --accent-warning: #f59e0b; 20 20 + 21 21 + --border-color: rgba(255, 255, 255, 0.08); 22 22 + --border-glow: rgba(99, 102, 241, 0.4); 23 23 + 24 24 + /* Typography */ 25 25 + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 26 26 + 27 27 + /* Spacing */ 28 28 + --spacing-xs: 4px; 29 29 + --spacing-sm: 8px; 30 30 + --spacing-md: 16px; 31 31 + --spacing-lg: 24px; 32 32 + --spacing-xl: 32px; 33 33 + 34 34 + /* Borders */ 35 35 + --radius-sm: 6px; 36 36 + --radius-md: 10px; 37 37 + --radius-lg: 16px; 38 38 + 39 39 + /* Transitions */ 40 40 + --transition-fast: 150ms ease; 41 41 + --transition-normal: 250ms ease; 42 42 + 43 43 + /* Shadows */ 44 44 + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); 45 45 + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); 46 46 + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); 47 47 + --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); 48 48 + } 49 49 + 50 50 + /* Reset & Base */ 51 51 + *, 52 52 + *::before, 53 53 + *::after { 54 54 + box-sizing: border-box; 55 55 + margin: 0; 56 56 + padding: 0; 57 57 + } 58 58 + 59 59 + html, 60 60 + body { 61 61 + height: 100%; 62 62 + overflow: hidden; 63 63 + } 64 64 + 65 65 + body { 66 66 + font-family: var(--font-family); 67 67 + background: var(--bg-primary); 68 68 + color: var(--text-primary); 69 69 + line-height: 1.5; 70 70 + } 71 71 + 72 72 + /* Utility Classes */ 73 73 + .hidden { 74 74 + display: none !important; 75 75 + } 76 76 + 77 77 + /* App Container */ 78 78 + .app-container { 79 79 + display: flex; 80 80 + flex-direction: column; 81 81 + height: 100vh; 82 82 + background: 83 83 + radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.1) 0%, transparent 50%), 84 84 + radial-gradient(ellipse at bottom right, rgba(34, 211, 238, 0.08) 0%, transparent 50%), 85 85 + var(--bg-primary); 86 86 + } 87 87 + 88 88 + /* Testing mode - hide header, full screen app */ 89 89 + .app-container.testing-mode .header { 90 90 + display: none; 91 91 + } 92 92 + 93 93 + .app-container.testing-mode .iframe-header { 94 94 + display: none; 95 95 + } 96 96 + 97 97 + .app-container.testing-mode .main-content { 98 98 + padding: 0; 99 99 + } 100 100 + 101 101 + .app-container.testing-mode .iframe-wrapper { 102 102 + border-radius: 0; 103 103 + border: none; 104 104 + } 105 105 + 106 106 + /* Header */ 107 107 + .header { 108 108 + display: flex; 109 109 + align-items: center; 110 110 + justify-content: space-between; 111 111 + padding: var(--spacing-md) var(--spacing-lg); 112 112 + background: var(--bg-glass); 113 113 + backdrop-filter: blur(12px); 114 114 + border-bottom: 1px solid var(--border-color); 115 115 + gap: var(--spacing-lg); 116 116 + transition: all var(--transition-normal); 117 117 + position: relative; 118 118 + z-index: 100; 119 119 + } 120 120 + 121 121 + .header-left { 122 122 + display: flex; 123 123 + align-items: center; 124 124 + gap: var(--spacing-md); 125 125 + } 126 126 + 127 127 + .logo { 128 128 + display: flex; 129 129 + align-items: center; 130 130 + gap: var(--spacing-sm); 131 131 + font-size: 1.5rem; 132 132 + font-weight: 700; 133 133 + background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); 134 134 + -webkit-background-clip: text; 135 135 + -webkit-text-fill-color: transparent; 136 136 + background-clip: text; 137 137 + } 138 138 + 139 139 + .logo-icon { 140 140 + font-size: 1.8rem; 141 141 + animation: pulse 2s ease-in-out infinite; 142 142 + } 143 143 + 144 144 + @keyframes pulse { 145 145 + 146 146 + 0%, 147 147 + 100% { 148 148 + opacity: 1; 149 149 + transform: scale(1); 150 150 + } 151 151 + 152 152 + 50% { 153 153 + opacity: 0.7; 154 154 + transform: scale(1.05); 155 155 + } 156 156 + } 157 157 + 158 158 + .tagline { 159 159 + color: var(--text-muted); 160 160 + font-size: 0.875rem; 161 161 + font-weight: 400; 162 162 + } 163 163 + 164 164 + .header-center { 165 165 + flex: 1; 166 166 + display: flex; 167 167 + justify-content: center; 168 168 + align-items: center; 169 169 + gap: var(--spacing-sm); 170 170 + } 171 171 + 172 172 + .header-right { 173 173 + display: flex; 174 174 + align-items: center; 175 175 + } 176 176 + 177 177 + /* Custom Dropdown */ 178 178 + .custom-dropdown { 179 179 + position: relative; 180 180 + z-index: 1000; 181 181 + } 182 182 + 183 183 + .dropdown-trigger { 184 184 + display: flex; 185 185 + align-items: center; 186 186 + gap: var(--spacing-sm); 187 187 + background: var(--bg-tertiary); 188 188 + border: 1px solid var(--border-color); 189 189 + border-radius: var(--radius-md); 190 190 + padding: var(--spacing-sm) var(--spacing-md); 191 191 + cursor: pointer; 192 192 + transition: all var(--transition-fast); 193 193 + min-width: 280px; 194 194 + } 195 195 + 196 196 + .dropdown-trigger:hover { 197 197 + border-color: var(--accent-primary); 198 198 + } 199 199 + 200 200 + .dropdown-label { 201 201 + color: var(--text-secondary); 202 202 + font-size: 0.875rem; 203 203 + font-weight: 500; 204 204 + } 205 205 + 206 206 + .dropdown-value { 207 207 + flex: 1; 208 208 + color: var(--text-primary); 209 209 + font-size: 0.875rem; 210 210 + text-align: left; 211 211 + } 212 212 + 213 213 + .dropdown-arrow { 214 214 + color: var(--text-muted); 215 215 + font-size: 0.65rem; 216 216 + transition: transform var(--transition-fast); 217 217 + } 218 218 + 219 219 + .custom-dropdown.open .dropdown-arrow { 220 220 + transform: rotate(180deg); 221 221 + } 222 222 + 223 223 + .dropdown-menu { 224 224 + position: absolute; 225 225 + top: calc(100% + 4px); 226 226 + left: 0; 227 227 + right: 0; 228 228 + background: var(--bg-secondary); 229 229 + border: 1px solid var(--border-color); 230 230 + border-radius: var(--radius-md); 231 231 + box-shadow: var(--shadow-lg); 232 232 + z-index: 1001; 233 233 + opacity: 0; 234 234 + visibility: hidden; 235 235 + transform: translateY(-8px); 236 236 + transition: all var(--transition-fast); 237 237 + } 238 238 + 239 239 + .custom-dropdown.open .dropdown-menu { 240 240 + opacity: 1; 241 241 + visibility: visible; 242 242 + transform: translateY(0); 243 243 + } 244 244 + 245 245 + .dropdown-item { 246 246 + display: flex; 247 247 + flex-direction: column; 248 248 + gap: 2px; 249 249 + padding: var(--spacing-md); 250 250 + cursor: pointer; 251 251 + border-bottom: 1px solid var(--border-color); 252 252 + transition: background var(--transition-fast); 253 253 + } 254 254 + 255 255 + .dropdown-item:last-child { 256 256 + border-bottom: none; 257 257 + } 258 258 + 259 259 + .dropdown-item:hover { 260 260 + background: var(--bg-tertiary); 261 261 + } 262 262 + 263 263 + .dropdown-item.selected { 264 264 + background: rgba(99, 102, 241, 0.15); 265 265 + } 266 266 + 267 267 + .item-name { 268 268 + font-weight: 500; 269 269 + color: var(--text-primary); 270 270 + } 271 271 + 272 272 + .item-task { 273 273 + font-size: 0.8rem; 274 274 + color: var(--text-muted); 275 275 + } 276 276 + 277 277 + /* Buttons */ 278 278 + .btn { 279 279 + display: inline-flex; 280 280 + align-items: center; 281 281 + gap: var(--spacing-xs); 282 282 + padding: var(--spacing-sm) var(--spacing-md); 283 283 + font-family: inherit; 284 284 + font-size: 0.875rem; 285 285 + font-weight: 500; 286 286 + border: none; 287 287 + border-radius: var(--radius-sm); 288 288 + cursor: pointer; 289 289 + transition: all var(--transition-fast); 290 290 + } 291 291 + 292 292 + .btn:disabled { 293 293 + opacity: 0.5; 294 294 + cursor: not-allowed; 295 295 + } 296 296 + 297 297 + .btn-icon { 298 298 + font-size: 0.75rem; 299 299 + } 300 300 + 301 301 + .btn-primary { 302 302 + background: linear-gradient(135deg, var(--accent-primary), #4f46e5); 303 303 + color: white; 304 304 + box-shadow: var(--shadow-sm), 0 0 12px rgba(99, 102, 241, 0.3); 305 305 + } 306 306 + 307 307 + .btn-primary:hover:not(:disabled) { 308 308 + background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary)); 309 309 + transform: translateY(-1px); 310 310 + box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.4); 311 311 + } 312 312 + 313 313 + .btn-secondary { 314 314 + background: var(--bg-tertiary); 315 315 + color: var(--text-primary); 316 316 + border: 1px solid var(--border-color); 317 317 + } 318 318 + 319 319 + .btn-secondary:hover:not(:disabled) { 320 320 + background: var(--bg-secondary); 321 321 + border-color: var(--text-muted); 322 322 + } 323 323 + 324 324 + .btn-accent { 325 325 + background: linear-gradient(135deg, var(--accent-secondary), #06b6d4); 326 326 + color: var(--bg-primary); 327 327 + font-weight: 600; 328 328 + } 329 329 + 330 330 + .btn-accent:hover:not(:disabled) { 331 331 + background: linear-gradient(135deg, #67e8f9, var(--accent-secondary)); 332 332 + transform: translateY(-1px); 333 333 + } 334 334 + 335 335 + .btn-large { 336 336 + padding: var(--spacing-md) var(--spacing-xl); 337 337 + font-size: 1.1rem; 338 338 + } 339 339 + 340 340 + /* Main Content */ 341 341 + .main-content { 342 342 + display: flex; 343 343 + flex: 1; 344 344 + overflow: hidden; 345 345 + gap: var(--spacing-lg); 346 346 + padding: var(--spacing-lg); 347 347 + transition: padding var(--transition-normal); 348 348 + } 349 349 + 350 350 + /* Iframe Wrapper */ 351 351 + .iframe-wrapper { 352 352 + flex: 1; 353 353 + display: flex; 354 354 + flex-direction: column; 355 355 + background: var(--bg-glass); 356 356 + backdrop-filter: blur(12px); 357 357 + border-radius: var(--radius-lg); 358 358 + border: 1px solid var(--border-color); 359 359 + overflow: hidden; 360 360 + box-shadow: var(--shadow-lg); 361 361 + transition: all var(--transition-normal); 362 362 + } 363 363 + 364 364 + .iframe-header { 365 365 + display: flex; 366 366 + justify-content: space-between; 367 367 + align-items: center; 368 368 + padding: var(--spacing-sm) var(--spacing-md); 369 369 + background: var(--bg-tertiary); 370 370 + border-bottom: 1px solid var(--border-color); 371 371 + } 372 372 + 373 373 + .iframe-status { 374 374 + color: var(--text-secondary); 375 375 + font-size: 0.8rem; 376 376 + } 377 377 + 378 378 + .session-timer { 379 379 + font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; 380 380 + font-size: 0.875rem; 381 381 + color: var(--accent-secondary); 382 382 + font-weight: 500; 383 383 + } 384 384 + 385 385 + .iframe-container { 386 386 + flex: 1; 387 387 + position: relative; 388 388 + background: var(--bg-primary); 389 389 + } 390 390 + 391 391 + .iframe-placeholder { 392 392 + position: absolute; 393 393 + inset: 0; 394 394 + display: flex; 395 395 + align-items: center; 396 396 + justify-content: center; 397 397 + background: 398 398 + radial-gradient(circle at center, rgba(99, 102, 241, 0.05) 0%, transparent 70%), 399 399 + var(--bg-secondary); 400 400 + z-index: 1; 401 401 + } 402 402 + 403 403 + .placeholder-content { 404 404 + text-align: center; 405 405 + padding: var(--spacing-xl); 406 406 + } 407 407 + 408 408 + .placeholder-icon { 409 409 + font-size: 4rem; 410 410 + display: block; 411 411 + margin-bottom: var(--spacing-md); 412 412 + opacity: 0.6; 413 413 + } 414 414 + 415 415 + .placeholder-content h2 { 416 416 + color: var(--text-primary); 417 417 + font-size: 1.5rem; 418 418 + margin-bottom: var(--spacing-sm); 419 419 + } 420 420 + 421 421 + .placeholder-content p { 422 422 + color: var(--text-muted); 423 423 + font-size: 0.95rem; 424 424 + } 425 425 + 426 426 + #test-iframe { 427 427 + width: 100%; 428 428 + height: 100%; 429 429 + border: none; 430 430 + background: white; 431 431 + } 432 432 + 433 433 + /* Task Briefing Screen */ 434 434 + .task-briefing { 435 435 + position: absolute; 436 436 + inset: 0; 437 437 + display: flex; 438 438 + align-items: center; 439 439 + justify-content: center; 440 440 + background: 441 441 + radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 60%), 442 442 + var(--bg-secondary); 443 443 + z-index: 2; 444 444 + padding: var(--spacing-xl); 445 445 + } 446 446 + 447 447 + .briefing-card { 448 448 + background: var(--bg-glass); 449 449 + backdrop-filter: blur(20px); 450 450 + border-radius: var(--radius-lg); 451 451 + border: 1px solid var(--border-color); 452 452 + box-shadow: var(--shadow-lg), var(--shadow-glow); 453 453 + max-width: 500px; 454 454 + width: 100%; 455 455 + overflow: hidden; 456 456 + animation: slideUp 0.4s ease-out; 457 457 + } 458 458 + 459 459 + @keyframes slideUp { 460 460 + from { 461 461 + opacity: 0; 462 462 + transform: translateY(20px); 463 463 + } 464 464 + 465 465 + to { 466 466 + opacity: 1; 467 467 + transform: translateY(0); 468 468 + } 469 469 + } 470 470 + 471 471 + .briefing-header { 472 472 + background: linear-gradient(135deg, var(--accent-primary), #4f46e5); 473 473 + padding: var(--spacing-lg); 474 474 + text-align: center; 475 475 + } 476 476 + 477 477 + .briefing-icon { 478 478 + font-size: 2.5rem; 479 479 + display: block; 480 480 + margin-bottom: var(--spacing-sm); 481 481 + } 482 482 + 483 483 + .briefing-header h2 { 484 484 + color: white; 485 485 + font-size: 1.5rem; 486 486 + font-weight: 600; 487 487 + } 488 488 + 489 489 + .briefing-body { 490 490 + padding: var(--spacing-lg); 491 491 + } 492 492 + 493 493 + .task-description { 494 494 + font-size: 1.25rem; 495 495 + color: var(--text-primary); 496 496 + text-align: center; 497 497 + padding: var(--spacing-md); 498 498 + background: var(--bg-tertiary); 499 499 + border-radius: var(--radius-md); 500 500 + border-left: 4px solid var(--accent-primary); 501 501 + margin-bottom: var(--spacing-lg); 502 502 + font-weight: 500; 503 503 + } 504 504 + 505 505 + .briefing-info { 506 506 + display: flex; 507 507 + flex-direction: column; 508 508 + gap: var(--spacing-sm); 509 509 + } 510 510 + 511 511 + .info-item { 512 512 + display: flex; 513 513 + align-items: center; 514 514 + gap: var(--spacing-sm); 515 515 + color: var(--text-secondary); 516 516 + font-size: 0.875rem; 517 517 + } 518 518 + 519 519 + .info-icon { 520 520 + font-size: 1rem; 521 521 + opacity: 0.7; 522 522 + } 523 523 + 524 524 + .briefing-footer { 525 525 + padding: var(--spacing-lg); 526 526 + background: var(--bg-tertiary); 527 527 + text-align: center; 528 528 + border-top: 1px solid var(--border-color); 529 529 + } 530 530 + 531 531 + .ready-text { 532 532 + color: var(--text-muted); 533 533 + font-size: 0.875rem; 534 534 + margin-bottom: var(--spacing-md); 535 535 + } 536 536 + 537 537 + /* Debrief Screen */ 538 538 + .debrief-screen { 539 539 + position: absolute; 540 540 + inset: 0; 541 541 + display: flex; 542 542 + align-items: center; 543 543 + justify-content: center; 544 544 + background: rgba(10, 10, 15, 0.95); 545 545 + z-index: 10; 546 546 + padding: var(--spacing-xl); 547 547 + } 548 548 + 549 549 + .debrief-card { 550 550 + background: var(--bg-glass); 551 551 + backdrop-filter: blur(20px); 552 552 + border-radius: var(--radius-lg); 553 553 + border: 1px solid var(--border-color); 554 554 + box-shadow: var(--shadow-lg), 0 0 40px rgba(34, 197, 94, 0.2); 555 555 + max-width: 600px; 556 556 + width: 100%; 557 557 + overflow: hidden; 558 558 + animation: slideUp 0.4s ease-out; 559 559 + } 560 560 + 561 561 + .debrief-header { 562 562 + background: linear-gradient(135deg, var(--accent-success), #16a34a); 563 563 + padding: var(--spacing-lg); 564 564 + text-align: center; 565 565 + } 566 566 + 567 567 + .debrief-icon { 568 568 + font-size: 3rem; 569 569 + display: block; 570 570 + margin-bottom: var(--spacing-sm); 571 571 + } 572 572 + 573 573 + .debrief-header h2 { 574 574 + color: white; 575 575 + font-size: 1.75rem; 576 576 + font-weight: 700; 577 577 + margin-bottom: var(--spacing-xs); 578 578 + } 579 579 + 580 580 + .debrief-subtitle { 581 581 + color: rgba(255, 255, 255, 0.8); 582 582 + font-size: 1rem; 583 583 + } 584 584 + 585 585 + .debrief-body { 586 586 + padding: var(--spacing-lg); 587 587 + } 588 588 + 589 589 + .debrief-stat-group { 590 590 + margin-bottom: var(--spacing-lg); 591 591 + } 592 592 + 593 593 + .debrief-stat-group:last-child { 594 594 + margin-bottom: 0; 595 595 + } 596 596 + 597 597 + .debrief-stat-group h3 { 598 598 + font-size: 0.9rem; 599 599 + color: var(--text-secondary); 600 600 + margin-bottom: var(--spacing-md); 601 601 + padding-bottom: var(--spacing-sm); 602 602 + border-bottom: 1px solid var(--border-color); 603 603 + } 604 604 + 605 605 + .debrief-stats { 606 606 + display: grid; 607 607 + grid-template-columns: repeat(3, 1fr); 608 608 + gap: var(--spacing-md); 609 609 + } 610 610 + 611 611 + .debrief-stat { 612 612 + background: var(--bg-tertiary); 613 613 + padding: var(--spacing-md); 614 614 + border-radius: var(--radius-md); 615 615 + text-align: center; 616 616 + } 617 617 + 618 618 + .debrief-stat-value { 619 619 + display: block; 620 620 + font-size: 1.5rem; 621 621 + font-weight: 700; 622 622 + color: var(--accent-secondary); 623 623 + font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; 624 624 + margin-bottom: var(--spacing-xs); 625 625 + } 626 626 + 627 627 + .debrief-stat-label { 628 628 + font-size: 0.75rem; 629 629 + color: var(--text-muted); 630 630 + text-transform: uppercase; 631 631 + letter-spacing: 0.5px; 632 632 + } 633 633 + 634 634 + .debrief-footer { 635 635 + padding: var(--spacing-lg); 636 636 + background: var(--bg-tertiary); 637 637 + display: flex; 638 638 + gap: var(--spacing-md); 639 639 + justify-content: center; 640 640 + border-top: 1px solid var(--border-color); 641 641 + } 642 642 + 643 643 + /* Sidebar */ 644 644 + .sidebar { 645 645 + width: 320px; 646 646 + display: flex; 647 647 + flex-direction: column; 648 648 + gap: var(--spacing-md); 649 649 + overflow-y: auto; 650 650 + transition: all var(--transition-normal); 651 651 + } 652 652 + 653 653 + .sidebar-section { 654 654 + background: var(--bg-glass); 655 655 + backdrop-filter: blur(12px); 656 656 + border-radius: var(--radius-md); 657 657 + border: 1px solid var(--border-color); 658 658 + padding: var(--spacing-md); 659 659 + transition: border-color var(--transition-normal); 660 660 + } 661 661 + 662 662 + .sidebar-section:hover { 663 663 + border-color: rgba(255, 255, 255, 0.12); 664 664 + } 665 665 + 666 666 + .section-title { 667 667 + display: flex; 668 668 + align-items: center; 669 669 + gap: var(--spacing-sm); 670 670 + font-size: 0.9rem; 671 671 + font-weight: 600; 672 672 + color: var(--text-primary); 673 673 + margin-bottom: var(--spacing-md); 674 674 + padding-bottom: var(--spacing-sm); 675 675 + border-bottom: 1px solid var(--border-color); 676 676 + } 677 677 + 678 678 + .section-icon { 679 679 + font-size: 1rem; 680 680 + } 681 681 + 682 682 + .stats-grid { 683 683 + display: grid; 684 684 + grid-template-columns: repeat(2, 1fr); 685 685 + gap: var(--spacing-sm); 686 686 + } 687 687 + 688 688 + .stat-item { 689 689 + background: var(--bg-tertiary); 690 690 + padding: var(--spacing-sm) var(--spacing-md); 691 691 + border-radius: var(--radius-sm); 692 692 + display: flex; 693 693 + flex-direction: column; 694 694 + gap: 2px; 695 695 + } 696 696 + 697 697 + .stat-item.full-width { 698 698 + grid-column: span 2; 699 699 + flex-direction: row; 700 700 + justify-content: space-between; 701 701 + align-items: center; 702 702 + } 703 703 + 704 704 + .stat-label { 705 705 + font-size: 0.7rem; 706 706 + color: var(--text-muted); 707 707 + text-transform: uppercase; 708 708 + letter-spacing: 0.5px; 709 709 + } 710 710 + 711 711 + .stat-value { 712 712 + font-size: 1rem; 713 713 + font-weight: 600; 714 714 + color: var(--accent-secondary); 715 715 + font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; 716 716 + } 717 717 + 718 718 + .session-status { 719 719 + padding: 2px 8px; 720 720 + border-radius: var(--radius-sm); 721 721 + font-size: 0.8rem; 722 722 + } 723 723 + 724 724 + .session-status.idle { 725 725 + background: var(--bg-secondary); 726 726 + color: var(--text-muted); 727 727 + } 728 728 + 729 729 + .session-status.recording { 730 730 + background: rgba(239, 68, 68, 0.2); 731 731 + color: var(--accent-danger); 732 732 + animation: blink 1s ease-in-out infinite; 733 733 + } 734 734 + 735 735 + .session-status.completed { 736 736 + background: rgba(34, 197, 94, 0.2); 737 737 + color: var(--accent-success); 738 738 + } 739 739 + 740 740 + @keyframes blink { 741 741 + 742 742 + 0%, 743 743 + 100% { 744 744 + opacity: 1; 745 745 + } 746 746 + 747 747 + 50% { 748 748 + opacity: 0.6; 749 749 + } 750 750 + } 751 751 + 752 752 + /* Task Card */ 753 753 + .task-card { 754 754 + border-color: var(--accent-primary); 755 755 + background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05)); 756 756 + } 757 757 + 758 758 + .current-task-text { 759 759 + color: var(--text-primary); 760 760 + font-size: 0.9rem; 761 761 + line-height: 1.5; 762 762 + } 763 763 + 764 764 + /* Event Log */ 765 765 + .event-log { 766 766 + max-height: 200px; 767 767 + overflow-y: auto; 768 768 + background: var(--bg-tertiary); 769 769 + border-radius: var(--radius-sm); 770 770 + padding: var(--spacing-sm); 771 771 + } 772 772 + 773 773 + .log-empty { 774 774 + color: var(--text-muted); 775 775 + font-size: 0.8rem; 776 776 + text-align: center; 777 777 + padding: var(--spacing-md); 778 778 + } 779 779 + 780 780 + .log-entry { 781 781 + display: flex; 782 782 + align-items: flex-start; 783 783 + gap: var(--spacing-sm); 784 784 + padding: var(--spacing-xs) 0; 785 785 + font-size: 0.75rem; 786 786 + border-bottom: 1px solid var(--border-color); 787 787 + } 788 788 + 789 789 + .log-entry:last-child { 790 790 + border-bottom: none; 791 791 + } 792 792 + 793 793 + .log-time { 794 794 + color: var(--text-muted); 795 795 + font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; 796 796 + white-space: nowrap; 797 797 + } 798 798 + 799 799 + .log-type { 800 800 + padding: 1px 6px; 801 801 + border-radius: 3px; 802 802 + font-size: 0.65rem; 803 803 + font-weight: 600; 804 804 + text-transform: uppercase; 805 805 + } 806 806 + 807 807 + .log-type.mouse { 808 808 + background: rgba(99, 102, 241, 0.2); 809 809 + color: var(--accent-primary); 810 810 + } 811 811 + 812 812 + .log-type.key { 813 813 + background: rgba(34, 211, 238, 0.2); 814 814 + color: var(--accent-secondary); 815 815 + } 816 816 + 817 817 + .log-type.click { 818 818 + background: rgba(34, 197, 94, 0.2); 819 819 + color: var(--accent-success); 820 820 + } 821 821 + 822 822 + .log-type.system { 823 823 + background: rgba(245, 158, 11, 0.2); 824 824 + color: var(--accent-warning); 825 825 + } 826 826 + 827 827 + .log-message { 828 828 + color: var(--text-secondary); 829 829 + flex: 1; 830 830 + } 831 831 + 832 832 + /* Scrollbar */ 833 833 + ::-webkit-scrollbar { 834 834 + width: 6px; 835 835 + height: 6px; 836 836 + } 837 837 + 838 838 + ::-webkit-scrollbar-track { 839 839 + background: var(--bg-tertiary); 840 840 + border-radius: 3px; 841 841 + } 842 842 + 843 843 + ::-webkit-scrollbar-thumb { 844 844 + background: var(--text-muted); 845 845 + border-radius: 3px; 846 846 + } 847 847 + 848 848 + ::-webkit-scrollbar-thumb:hover { 849 849 + background: var(--text-secondary); 850 850 + } 851 851 + 852 852 + /* Responsive */ 853 853 + @media (max-width: 768px) { 854 854 + .header { 855 855 + flex-wrap: wrap; 856 856 + gap: var(--spacing-md); 857 857 + } 858 858 + 859 859 + .header-center { 860 860 + order: 3; 861 861 + flex-basis: 100%; 862 862 + } 863 863 + 864 864 + .dropdown-trigger { 865 865 + width: 100%; 866 866 + } 867 867 + 868 868 + .debrief-stats { 869 869 + grid-template-columns: 1fr; 870 870 + } 871 871 + }

+260

index.html

reviewed

··· 1 1 + <!DOCTYPE html> 2 2 + <html lang="en"> 3 3 + 4 4 + <head> 5 5 + <meta charset="UTF-8"> 6 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 7 + <title>UXET - UX Testing Framework</title> 8 8 + <link rel="stylesheet" href="index.css"> 9 9 + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 10 10 + </head> 11 11 + 12 12 + <body> 13 13 + <div class="app-container"> 14 14 + <!-- Header - Hidden during testing --> 15 15 + <header class="header" id="header"> 16 16 + <div class="header-left"> 17 17 + <h1 class="logo"> 18 18 + <span class="logo-icon">◎</span> 19 19 + UXET 20 20 + </h1> 21 21 + <span class="tagline">UX Testing Framework</span> 22 22 + </div> 23 23 + <div class="header-center"> 24 24 + <!-- Custom Dropdown --> 25 25 + <div class="custom-dropdown" id="app-dropdown"> 26 26 + <button class="dropdown-trigger" id="dropdown-trigger"> 27 27 + <span class="dropdown-label">Test App:</span> 28 28 + <span class="dropdown-value" id="dropdown-value">Select an app...</span> 29 29 + <span class="dropdown-arrow">▼</span> 30 30 + </button> 31 31 + <div class="dropdown-menu" id="dropdown-menu"> 32 32 + <div class="dropdown-item" data-value="testable-apps/shop-app/index.html" 33 33 + data-task="Find and purchase a blue t-shirt"> 34 34 + <span class="item-name">ShopEasy Store</span> 35 35 + <span class="item-task">Buy a t-shirt</span> 36 36 + </div> 37 37 + <div class="dropdown-item" data-value="testable-apps/example-app/index.html" 38 38 + data-task="Fill out the contact form with your details"> 39 39 + <span class="item-name">Example Form App</span> 40 40 + <span class="item-task">Complete form</span> 41 41 + </div> 42 42 + </div> 43 43 + </div> 44 44 + <button id="load-app-btn" class="btn btn-secondary">Load</button> 45 45 + </div> 46 46 + <div class="header-right"> 47 47 + <button id="reset-btn" class="btn btn-secondary"> 48 48 + <span class="btn-icon">↻</span> Reset 49 49 + </button> 50 50 + </div> 51 51 + </header> 52 52 + 53 53 + <!-- Main Content --> 54 54 + <main class="main-content" id="main-content"> 55 55 + <!-- Iframe Container --> 56 56 + <div class="iframe-wrapper" id="iframe-wrapper"> 57 57 + <div class="iframe-header" id="iframe-header"> 58 58 + <span class="iframe-status" id="iframe-status">No app loaded</span> 59 59 + <span class="session-timer" id="session-timer">00:00:00</span> 60 60 + </div> 61 61 + <div class="iframe-container" id="iframe-container"> 62 62 + <!-- Initial placeholder --> 63 63 + <div class="iframe-placeholder" id="iframe-placeholder"> 64 64 + <div class="placeholder-content"> 65 65 + <span class="placeholder-icon">🖥️</span> 66 66 + <h2>Select an App to Test</h2> 67 67 + <p>Choose an app from the dropdown above and click "Load" to begin</p> 68 68 + </div> 69 69 + </div> 70 70 + 71 71 + <!-- Task Briefing Screen --> 72 72 + <div class="task-briefing hidden" id="task-briefing"> 73 73 + <div class="briefing-card"> 74 74 + <div class="briefing-header"> 75 75 + <span class="briefing-icon">📋</span> 76 76 + <h2>Your Task</h2> 77 77 + </div> 78 78 + <div class="briefing-body"> 79 79 + <p class="task-description" id="task-description"></p> 80 80 + <div class="briefing-info"> 81 81 + <div class="info-item"> 82 82 + <span class="info-icon">⏱️</span> 83 83 + <span>Complete the task at your own pace</span> 84 84 + </div> 85 85 + <div class="info-item"> 86 86 + <span class="info-icon">✓</span> 87 87 + <span>The test will end automatically when done</span> 88 88 + </div> 89 89 + </div> 90 90 + </div> 91 91 + <div class="briefing-footer"> 92 92 + <p class="ready-text">When you're ready, click below to start</p> 93 93 + <button id="begin-test-btn" class="btn btn-primary btn-large"> 94 94 + <span class="btn-icon">▶</span> Begin Testing 95 95 + </button> 96 96 + </div> 97 97 + </div> 98 98 + </div> 99 99 + 100 100 + <!-- Debrief Screen --> 101 101 + <div class="debrief-screen hidden" id="debrief-screen"> 102 102 + <div class="debrief-card"> 103 103 + <div class="debrief-header"> 104 104 + <span class="debrief-icon">✅</span> 105 105 + <h2>Task Complete!</h2> 106 106 + <p class="debrief-subtitle">Here's how you did</p> 107 107 + </div> 108 108 + <div class="debrief-body"> 109 109 + <div class="debrief-stat-group"> 110 110 + <h3>📊 Session Summary</h3> 111 111 + <div class="debrief-stats"> 112 112 + <div class="debrief-stat"> 113 113 + <span class="debrief-stat-value" id="debrief-time">00:00</span> 114 114 + <span class="debrief-stat-label">Time to Complete</span> 115 115 + </div> 116 116 + <div class="debrief-stat"> 117 117 + <span class="debrief-stat-value" id="debrief-clicks">0</span> 118 118 + <span class="debrief-stat-label">Total Clicks</span> 119 119 + </div> 120 120 + <div class="debrief-stat"> 121 121 + <span class="debrief-stat-value" id="debrief-keys">0</span> 122 122 + <span class="debrief-stat-label">Keystrokes</span> 123 123 + </div> 124 124 + </div> 125 125 + </div> 126 126 + <div class="debrief-stat-group"> 127 127 + <h3>🖱️ Mouse Activity</h3> 128 128 + <div class="debrief-stats"> 129 129 + <div class="debrief-stat"> 130 130 + <span class="debrief-stat-value" id="debrief-distance">0</span> 131 131 + <span class="debrief-stat-label">Distance (px)</span> 132 132 + </div> 133 133 + <div class="debrief-stat"> 134 134 + <span class="debrief-stat-value" id="debrief-scrolls">0</span> 135 135 + <span class="debrief-stat-label">Scroll Events</span> 136 136 + </div> 137 137 + <div class="debrief-stat"> 138 138 + <span class="debrief-stat-value" id="debrief-velocity">0</span> 139 139 + <span class="debrief-stat-label">Avg Speed (px/s)</span> 140 140 + </div> 141 141 + </div> 142 142 + </div> 143 143 + </div> 144 144 + <div class="debrief-footer"> 145 145 + <button id="export-btn" class="btn btn-accent"> 146 146 + <span class="btn-icon">↓</span> Export Data 147 147 + </button> 148 148 + <button id="new-test-btn" class="btn btn-secondary"> 149 149 + Start New Test 150 150 + </button> 151 151 + </div> 152 152 + </div> 153 153 + </div> 154 154 + 155 155 + <iframe id="test-iframe" src="" title="Test Application"></iframe> 156 156 + </div> 157 157 + </div> 158 158 + 159 159 + <!-- Tracking Sidebar - Hidden during testing, shown in setup/debrief --> 160 160 + <aside class="sidebar hidden" id="sidebar"> 161 161 + <div class="sidebar-section task-card" id="task-card"> 162 162 + <h3 class="section-title"> 163 163 + <span class="section-icon">🎯</span> 164 164 + Current Task 165 165 + </h3> 166 166 + <p class="current-task-text" id="current-task-text">No task loaded</p> 167 167 + </div> 168 168 + 169 169 + <div class="sidebar-section"> 170 170 + <h3 class="section-title"> 171 171 + <span class="section-icon">🖱️</span> 172 172 + Mouse Tracking 173 173 + </h3> 174 174 + <div class="stats-grid"> 175 175 + <div class="stat-item"> 176 176 + <span class="stat-label">Position</span> 177 177 + <span class="stat-value" id="mouse-position">--, --</span> 178 178 + </div> 179 179 + <div class="stat-item"> 180 180 + <span class="stat-label">Movements</span> 181 181 + <span class="stat-value" id="mouse-movements">0</span> 182 182 + </div> 183 183 + <div class="stat-item"> 184 184 + <span class="stat-label">Clicks</span> 185 185 + <span class="stat-value" id="mouse-clicks">0</span> 186 186 + </div> 187 187 + <div class="stat-item"> 188 188 + <span class="stat-label">Distance (px)</span> 189 189 + <span class="stat-value" id="mouse-distance">0</span> 190 190 + </div> 191 191 + <div class="stat-item"> 192 192 + <span class="stat-label">Avg Velocity</span> 193 193 + <span class="stat-value" id="mouse-velocity">0 px/s</span> 194 194 + </div> 195 195 + <div class="stat-item"> 196 196 + <span class="stat-label">Scroll Events</span> 197 197 + <span class="stat-value" id="scroll-events">0</span> 198 198 + </div> 199 199 + </div> 200 200 + </div> 201 201 + 202 202 + <div class="sidebar-section"> 203 203 + <h3 class="section-title"> 204 204 + <span class="section-icon">⌨️</span> 205 205 + Keystroke Tracking 206 206 + </h3> 207 207 + <div class="stats-grid"> 208 208 + <div class="stat-item"> 209 209 + <span class="stat-label">Total Keys</span> 210 210 + <span class="stat-value" id="total-keys">0</span> 211 211 + </div> 212 212 + <div class="stat-item"> 213 213 + <span class="stat-label">Keys/Min</span> 214 214 + <span class="stat-value" id="keys-per-minute">0</span> 215 215 + </div> 216 216 + <div class="stat-item"> 217 217 + <span class="stat-label">Last Key</span> 218 218 + <span class="stat-value" id="last-key">--</span> 219 219 + </div> 220 220 + <div class="stat-item"> 221 221 + <span class="stat-label">Backspaces</span> 222 222 + <span class="stat-value" id="backspace-count">0</span> 223 223 + </div> 224 224 + </div> 225 225 + </div> 226 226 + 227 227 + <div class="sidebar-section"> 228 228 + <h3 class="section-title"> 229 229 + <span class="section-icon">📊</span> 230 230 + Session Info 231 231 + </h3> 232 232 + <div class="stats-grid"> 233 233 + <div class="stat-item full-width"> 234 234 + <span class="stat-label">Status</span> 235 235 + <span class="stat-value session-status" id="session-status">Idle</span> 236 236 + </div> 237 237 + <div class="stat-item full-width"> 238 238 + <span class="stat-label">Total Events</span> 239 239 + <span class="stat-value" id="total-events">0</span> 240 240 + </div> 241 241 + </div> 242 242 + </div> 243 243 + 244 244 + <div class="sidebar-section"> 245 245 + <h3 class="section-title"> 246 246 + <span class="section-icon">📝</span> 247 247 + Event Log 248 248 + </h3> 249 249 + <div class="event-log" id="event-log"> 250 250 + <div class="log-empty">No events recorded</div> 251 251 + </div> 252 252 + </div> 253 253 + </aside> 254 254 + </main> 255 255 + </div> 256 256 + 257 257 + <script type="module" src="js/main.js"></script> 258 258 + </body> 259 259 + 260 260 + </html>

+317

js/main.js

reviewed

··· 1 1 + /** 2 2 + * UXET Main - Application entry point 3 3 + */ 4 4 + 5 5 + import { Tracker } from './tracker.js'; 6 6 + import { Session } from './session.js'; 7 7 + 8 8 + class UXETApp { 9 9 + constructor() { 10 10 + this.tracker = new Tracker(); 11 11 + this.session = new Session(); 12 12 + this.currentTask = ''; 13 13 + this.selectedApp = null; 14 14 + 15 15 + this.elements = { 16 16 + appContainer: document.querySelector('.app-container'), 17 17 + header: document.getElementById('header'), 18 18 + // Custom dropdown 19 19 + dropdown: document.getElementById('app-dropdown'), 20 20 + dropdownTrigger: document.getElementById('dropdown-trigger'), 21 21 + dropdownValue: document.getElementById('dropdown-value'), 22 22 + dropdownMenu: document.getElementById('dropdown-menu'), 23 23 + // Buttons 24 24 + loadAppBtn: document.getElementById('load-app-btn'), 25 25 + resetBtn: document.getElementById('reset-btn'), 26 26 + exportBtn: document.getElementById('export-btn'), 27 27 + newTestBtn: document.getElementById('new-test-btn'), 28 28 + beginTestBtn: document.getElementById('begin-test-btn'), 29 29 + // Iframe 30 30 + iframe: document.getElementById('test-iframe'), 31 31 + iframePlaceholder: document.getElementById('iframe-placeholder'), 32 32 + iframeHeader: document.getElementById('iframe-header'), 33 33 + iframeStatus: document.getElementById('iframe-status'), 34 34 + // Screens 35 35 + taskBriefing: document.getElementById('task-briefing'), 36 36 + debriefScreen: document.getElementById('debrief-screen'), 37 37 + taskDescription: document.getElementById('task-description'), 38 38 + // Timer 39 39 + sessionTimer: document.getElementById('session-timer'), 40 40 + // Sidebar (for internal tracking, hidden during test) 41 41 + sidebar: document.getElementById('sidebar'), 42 42 + currentTaskText: document.getElementById('current-task-text'), 43 43 + sessionStatus: document.getElementById('session-status'), 44 44 + // Debrief stats 45 45 + debriefTime: document.getElementById('debrief-time'), 46 46 + debriefClicks: document.getElementById('debrief-clicks'), 47 47 + debriefKeys: document.getElementById('debrief-keys'), 48 48 + debriefDistance: document.getElementById('debrief-distance'), 49 49 + debriefScrolls: document.getElementById('debrief-scrolls'), 50 50 + debriefVelocity: document.getElementById('debrief-velocity'), 51 51 + // Hidden stats (still tracked internally) 52 52 + mousePosition: document.getElementById('mouse-position'), 53 53 + mouseMovements: document.getElementById('mouse-movements'), 54 54 + mouseClicks: document.getElementById('mouse-clicks'), 55 55 + mouseDistance: document.getElementById('mouse-distance'), 56 56 + mouseVelocity: document.getElementById('mouse-velocity'), 57 57 + scrollEvents: document.getElementById('scroll-events'), 58 58 + totalKeys: document.getElementById('total-keys'), 59 59 + keysPerMinute: document.getElementById('keys-per-minute'), 60 60 + lastKey: document.getElementById('last-key'), 61 61 + backspaceCount: document.getElementById('backspace-count'), 62 62 + totalEvents: document.getElementById('total-events'), 63 63 + eventLog: document.getElementById('event-log') 64 64 + }; 65 65 + 66 66 + this.init(); 67 67 + } 68 68 + 69 69 + init() { 70 70 + this.bindEvents(); 71 71 + this.setupCallbacks(); 72 72 + this.setupCompletionAPI(); 73 73 + } 74 74 + 75 75 + bindEvents() { 76 76 + // Custom dropdown 77 77 + this.elements.dropdownTrigger.addEventListener('click', (e) => { 78 78 + e.stopPropagation(); 79 79 + this.toggleDropdown(); 80 80 + }); 81 81 + 82 82 + document.querySelectorAll('.dropdown-item').forEach(item => { 83 83 + item.addEventListener('click', () => this.selectApp(item)); 84 84 + }); 85 85 + 86 86 + // Close dropdown when clicking outside 87 87 + document.addEventListener('click', () => this.closeDropdown()); 88 88 + 89 89 + // Buttons 90 90 + this.elements.loadAppBtn.addEventListener('click', () => this.loadApp()); 91 91 + this.elements.beginTestBtn.addEventListener('click', () => this.beginTesting()); 92 92 + this.elements.resetBtn.addEventListener('click', () => this.resetSession()); 93 93 + this.elements.exportBtn.addEventListener('click', () => this.exportData()); 94 94 + this.elements.newTestBtn.addEventListener('click', () => this.resetSession()); 95 95 + 96 96 + this.elements.iframe.addEventListener('load', () => this.onIframeLoad()); 97 97 + } 98 98 + 99 99 + setupCallbacks() { 100 100 + this.tracker.onStatsUpdate = (stats) => this.updateStats(stats); 101 101 + this.tracker.onEvent = (event) => this.addEventToLog(event); 102 102 + 103 103 + this.session.onStatusChange = (status) => this.updateSessionStatus(status); 104 104 + this.session.onTimerUpdate = (time) => { 105 105 + this.elements.sessionTimer.textContent = time; 106 106 + }; 107 107 + } 108 108 + 109 109 + setupCompletionAPI() { 110 110 + // Listen for postMessage from iframe 111 111 + window.addEventListener('message', (e) => { 112 112 + if (e.data?.type === 'UXET_TASK_COMPLETE') { 113 113 + this.onTaskComplete(e.data.details || {}); 114 114 + } 115 115 + }); 116 116 + } 117 117 + 118 118 + // Custom dropdown methods 119 119 + toggleDropdown() { 120 120 + this.elements.dropdown.classList.toggle('open'); 121 121 + } 122 122 + 123 123 + closeDropdown() { 124 124 + this.elements.dropdown.classList.remove('open'); 125 125 + } 126 126 + 127 127 + selectApp(item) { 128 128 + // Update selection UI 129 129 + document.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('selected')); 130 130 + item.classList.add('selected'); 131 131 + 132 132 + // Store selection 133 133 + this.selectedApp = { 134 134 + value: item.dataset.value, 135 135 + task: item.dataset.task, 136 136 + name: item.querySelector('.item-name').textContent 137 137 + }; 138 138 + 139 139 + this.elements.dropdownValue.textContent = this.selectedApp.name; 140 140 + this.closeDropdown(); 141 141 + } 142 142 + 143 143 + loadApp() { 144 144 + if (!this.selectedApp) { 145 145 + alert('Please select an app to test'); 146 146 + return; 147 147 + } 148 148 + 149 149 + this.currentTask = this.selectedApp.task; 150 150 + 151 151 + // Update task displays 152 152 + this.elements.taskDescription.textContent = this.currentTask; 153 153 + this.elements.currentTaskText.textContent = this.currentTask; 154 154 + 155 155 + // Load the iframe but keep it hidden 156 156 + this.elements.iframe.src = this.selectedApp.value; 157 157 + this.elements.iframeStatus.textContent = 'Loading app...'; 158 158 + this.session.setAppName(this.selectedApp.value); 159 159 + this.session.setTask(this.currentTask); 160 160 + } 161 161 + 162 162 + onIframeLoad() { 163 163 + const src = this.elements.iframe.src; 164 164 + if (!src || src === 'about:blank') return; 165 165 + 166 166 + // Hide placeholder, show task briefing 167 167 + this.elements.iframePlaceholder.classList.add('hidden'); 168 168 + this.elements.taskBriefing.classList.remove('hidden'); 169 169 + this.elements.iframeStatus.textContent = 'Ready to test'; 170 170 + 171 171 + // Hide the iframe until testing begins 172 172 + this.elements.iframe.style.visibility = 'hidden'; 173 173 + } 174 174 + 175 175 + beginTesting() { 176 176 + // Hide task briefing, show iframe 177 177 + this.elements.taskBriefing.classList.add('hidden'); 178 178 + this.elements.iframe.style.visibility = 'visible'; 179 179 + 180 180 + // Enter testing mode - hide header and sidebar 181 181 + this.elements.appContainer.classList.add('testing-mode'); 182 182 + 183 183 + // Attach tracker and start session 184 184 + const attached = this.tracker.attachToIframe(this.elements.iframe); 185 185 + if (!attached) { 186 186 + console.warn('Could not attach tracker to iframe'); 187 187 + } 188 188 + 189 189 + this.session.start(); 190 190 + this.tracker.start(); 191 191 + } 192 192 + 193 193 + onTaskComplete(details) { 194 194 + if (this.session.status !== 'recording') return; 195 195 + 196 196 + // Stop tracking 197 197 + this.session.stop(); 198 198 + this.tracker.stop(); 199 199 + 200 200 + // Log completion 201 201 + this.tracker.logEvent('system', 'Task completed automatically'); 202 202 + 203 203 + // Exit testing mode 204 204 + this.elements.appContainer.classList.remove('testing-mode'); 205 205 + 206 206 + // Populate debrief stats 207 207 + const stats = this.tracker.getStats(); 208 208 + const timeFormatted = this.formatTime(this.session.elapsed); 209 209 + 210 210 + this.elements.debriefTime.textContent = timeFormatted; 211 211 + this.elements.debriefClicks.textContent = stats.mouse.clicks.toLocaleString(); 212 212 + this.elements.debriefKeys.textContent = stats.keyboard.totalKeys.toLocaleString(); 213 213 + this.elements.debriefDistance.textContent = Math.round(stats.mouse.distance).toLocaleString(); 214 214 + this.elements.debriefScrolls.textContent = stats.mouse.scrollEvents.toLocaleString(); 215 215 + this.elements.debriefVelocity.textContent = stats.mouse.avgVelocity.toLocaleString(); 216 216 + 217 217 + // Show debrief screen 218 218 + this.elements.debriefScreen.classList.remove('hidden'); 219 219 + } 220 220 + 221 221 + formatTime(ms) { 222 222 + const totalSeconds = Math.floor(ms / 1000); 223 223 + const minutes = Math.floor(totalSeconds / 60); 224 224 + const seconds = totalSeconds % 60; 225 225 + return `${minutes}:${seconds.toString().padStart(2, '0')}`; 226 226 + } 227 227 + 228 228 + resetSession() { 229 229 + this.session.reset(); 230 230 + this.tracker.reset(); 231 231 + this.clearEventLog(); 232 232 + 233 233 + // Reset UI state 234 234 + this.elements.appContainer.classList.remove('testing-mode'); 235 235 + this.elements.iframe.src = ''; 236 236 + this.elements.iframe.style.visibility = 'visible'; 237 237 + this.elements.iframePlaceholder.classList.remove('hidden'); 238 238 + this.elements.taskBriefing.classList.add('hidden'); 239 239 + this.elements.debriefScreen.classList.add('hidden'); 240 240 + this.elements.iframeStatus.textContent = 'No app loaded'; 241 241 + this.elements.currentTaskText.textContent = 'No task loaded'; 242 242 + this.elements.dropdownValue.textContent = 'Select an app...'; 243 243 + this.selectedApp = null; 244 244 + this.currentTask = ''; 245 245 + 246 246 + // Clear dropdown selection 247 247 + document.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('selected')); 248 248 + 249 249 + this.updateStats(this.tracker.createInitialStats()); 250 250 + } 251 251 + 252 252 + exportData() { 253 253 + const trackerData = this.tracker.exportData(); 254 254 + this.session.exportSession(trackerData); 255 255 + } 256 256 + 257 257 + updateSessionStatus(status) { 258 258 + const statusEl = this.elements.sessionStatus; 259 259 + statusEl.textContent = status.charAt(0).toUpperCase() + status.slice(1); 260 260 + statusEl.className = 'stat-value session-status ' + status; 261 261 + } 262 262 + 263 263 + updateStats(stats) { 264 264 + // Update internal stats (hidden from user during testing) 265 265 + this.elements.mousePosition.textContent = `${stats.mouse.x}, ${stats.mouse.y}`; 266 266 + this.elements.mouseMovements.textContent = stats.mouse.movements.toLocaleString(); 267 267 + this.elements.mouseClicks.textContent = stats.mouse.clicks.toLocaleString(); 268 268 + this.elements.mouseDistance.textContent = Math.round(stats.mouse.distance).toLocaleString(); 269 269 + this.elements.mouseVelocity.textContent = `${stats.mouse.avgVelocity} px/s`; 270 270 + this.elements.scrollEvents.textContent = stats.mouse.scrollEvents.toLocaleString(); 271 271 + 272 272 + this.elements.totalKeys.textContent = stats.keyboard.totalKeys.toLocaleString(); 273 273 + this.elements.keysPerMinute.textContent = stats.keyboard.keysPerMinute.toLocaleString(); 274 274 + this.elements.lastKey.textContent = stats.keyboard.lastKey || '--'; 275 275 + this.elements.backspaceCount.textContent = stats.keyboard.backspaces.toLocaleString(); 276 276 + 277 277 + this.elements.totalEvents.textContent = stats.totalEvents.toLocaleString(); 278 278 + } 279 279 + 280 280 + addEventToLog(event) { 281 281 + const log = this.elements.eventLog; 282 282 + 283 283 + const empty = log.querySelector('.log-empty'); 284 284 + if (empty) empty.remove(); 285 285 + 286 286 + const entry = document.createElement('div'); 287 287 + entry.className = 'log-entry'; 288 288 + 289 289 + const time = new Date(event.timestamp).toLocaleTimeString('en-US', { 290 290 + hour12: false, 291 291 + hour: '2-digit', 292 292 + minute: '2-digit', 293 293 + second: '2-digit' 294 294 + }); 295 295 + 296 296 + entry.innerHTML = ` 297 297 + <span class="log-time">${time}</span> 298 298 + <span class="log-type ${event.type}">${event.type}</span> 299 299 + <span class="log-message">${event.message}</span> 300 300 + `; 301 301 + 302 302 + log.insertBefore(entry, log.firstChild); 303 303 + 304 304 + while (log.children.length > 100) { 305 305 + log.removeChild(log.lastChild); 306 306 + } 307 307 + } 308 308 + 309 309 + clearEventLog() { 310 310 + this.elements.eventLog.innerHTML = '<div class="log-empty">No events recorded</div>'; 311 311 + } 312 312 + } 313 313 + 314 314 + // Initialize app when DOM is ready 315 315 + document.addEventListener('DOMContentLoaded', () => { 316 316 + window.uxetApp = new UXETApp(); 317 317 + });

+117

js/session.js

reviewed

··· 1 1 + /** 2 2 + * UXET Session - Session management for testing sessions 3 3 + */ 4 4 + 5 5 + export class Session { 6 6 + constructor() { 7 7 + this.status = 'idle'; // idle, recording, stopped 8 8 + this.startTime = null; 9 9 + this.elapsed = 0; 10 10 + this.timerInterval = null; 11 11 + this.appName = ''; 12 12 + this.task = ''; 13 13 + this.onStatusChange = null; 14 14 + this.onTimerUpdate = null; 15 15 + } 16 16 + 17 17 + start() { 18 18 + if (this.status === 'recording') return; 19 19 + 20 20 + this.status = 'recording'; 21 21 + this.startTime = Date.now() - this.elapsed; 22 22 + 23 23 + this.timerInterval = setInterval(() => { 24 24 + this.elapsed = Date.now() - this.startTime; 25 25 + if (this.onTimerUpdate) { 26 26 + this.onTimerUpdate(this.formatTime(this.elapsed)); 27 27 + } 28 28 + }, 100); 29 29 + 30 30 + this.notifyStatusChange(); 31 31 + } 32 32 + 33 33 + stop() { 34 34 + if (this.status !== 'recording') return; 35 35 + 36 36 + this.status = 'stopped'; 37 37 + this.elapsed = Date.now() - this.startTime; 38 38 + 39 39 + if (this.timerInterval) { 40 40 + clearInterval(this.timerInterval); 41 41 + this.timerInterval = null; 42 42 + } 43 43 + 44 44 + this.notifyStatusChange(); 45 45 + } 46 46 + 47 47 + reset() { 48 48 + this.status = 'idle'; 49 49 + this.startTime = null; 50 50 + this.elapsed = 0; 51 51 + this.task = ''; 52 52 + 53 53 + if (this.timerInterval) { 54 54 + clearInterval(this.timerInterval); 55 55 + this.timerInterval = null; 56 56 + } 57 57 + 58 58 + if (this.onTimerUpdate) { 59 59 + this.onTimerUpdate('00:00:00'); 60 60 + } 61 61 + 62 62 + this.notifyStatusChange(); 63 63 + } 64 64 + 65 65 + setAppName(name) { 66 66 + this.appName = name; 67 67 + } 68 68 + 69 69 + setTask(task) { 70 70 + this.task = task; 71 71 + } 72 72 + 73 73 + formatTime(ms) { 74 74 + const totalSeconds = Math.floor(ms / 1000); 75 75 + const hours = Math.floor(totalSeconds / 3600); 76 76 + const minutes = Math.floor((totalSeconds % 3600) / 60); 77 77 + const seconds = totalSeconds % 60; 78 78 + 79 79 + return [hours, minutes, seconds] 80 80 + .map(n => n.toString().padStart(2, '0')) 81 81 + .join(':'); 82 82 + } 83 83 + 84 84 + notifyStatusChange() { 85 85 + if (this.onStatusChange) { 86 86 + this.onStatusChange(this.status); 87 87 + } 88 88 + } 89 89 + 90 90 + getMetadata() { 91 91 + return { 92 92 + appName: this.appName, 93 93 + task: this.task, 94 94 + status: this.status, 95 95 + startTime: this.startTime ? new Date(this.startTime).toISOString() : null, 96 96 + duration: this.elapsed 97 97 + }; 98 98 + } 99 99 + 100 100 + exportSession(trackerData) { 101 101 + const data = { 102 102 + session: this.getMetadata(), 103 103 + ...trackerData 104 104 + }; 105 105 + 106 106 + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); 107 107 + const url = URL.createObjectURL(blob); 108 108 + 109 109 + const a = document.createElement('a'); 110 110 + a.href = url; 111 111 + a.download = `uxet-session-${Date.now()}.json`; 112 112 + document.body.appendChild(a); 113 113 + a.click(); 114 114 + document.body.removeChild(a); 115 115 + URL.revokeObjectURL(url); 116 116 + } 117 117 + }

+248

js/tracker.js

reviewed

··· 1 1 + /** 2 2 + * UXET Tracker - Core tracking engine for mouse and keyboard events 3 3 + */ 4 4 + 5 5 + export class Tracker { 6 6 + constructor() { 7 7 + this.isRecording = false; 8 8 + this.events = []; 9 9 + this.stats = this.createInitialStats(); 10 10 + this.iframeDoc = null; 11 11 + this.lastMousePos = null; 12 12 + this.lastMouseTime = null; 13 13 + this.velocities = []; 14 14 + this.listeners = new Map(); 15 15 + this.onStatsUpdate = null; 16 16 + this.onEvent = null; 17 17 + } 18 18 + 19 19 + createInitialStats() { 20 20 + return { 21 21 + mouse: { 22 22 + x: 0, 23 23 + y: 0, 24 24 + movements: 0, 25 25 + clicks: 0, 26 26 + distance: 0, 27 27 + avgVelocity: 0, 28 28 + scrollEvents: 0 29 29 + }, 30 30 + keyboard: { 31 31 + totalKeys: 0, 32 32 + keysPerMinute: 0, 33 33 + lastKey: '', 34 34 + backspaces: 0 35 35 + }, 36 36 + totalEvents: 0 37 37 + }; 38 38 + } 39 39 + 40 40 + reset() { 41 41 + this.events = []; 42 42 + this.stats = this.createInitialStats(); 43 43 + this.lastMousePos = null; 44 44 + this.lastMouseTime = null; 45 45 + this.velocities = []; 46 46 + this.notifyStatsUpdate(); 47 47 + } 48 48 + 49 49 + attachToIframe(iframe) { 50 50 + this.detach(); 51 51 + 52 52 + try { 53 53 + this.iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 54 54 + if (!this.iframeDoc) { 55 55 + console.warn('Cannot access iframe document - same-origin policy'); 56 56 + return false; 57 57 + } 58 58 + 59 59 + // Attach event listeners 60 60 + this.addListener(this.iframeDoc, 'mousemove', this.handleMouseMove.bind(this)); 61 61 + this.addListener(this.iframeDoc, 'click', this.handleClick.bind(this)); 62 62 + this.addListener(this.iframeDoc, 'scroll', this.handleScroll.bind(this), true); 63 63 + this.addListener(this.iframeDoc, 'keydown', this.handleKeyDown.bind(this)); 64 64 + this.addListener(this.iframeDoc, 'wheel', this.handleScroll.bind(this)); 65 65 + 66 66 + // Also track on scrollable elements within the iframe 67 67 + const scrollables = this.iframeDoc.querySelectorAll('*'); 68 68 + scrollables.forEach(el => { 69 69 + if (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth) { 70 70 + this.addListener(el, 'scroll', this.handleScroll.bind(this)); 71 71 + } 72 72 + }); 73 73 + 74 74 + return true; 75 75 + } catch (e) { 76 76 + console.error('Error attaching to iframe:', e); 77 77 + return false; 78 78 + } 79 79 + } 80 80 + 81 81 + addListener(target, event, handler, options = false) { 82 82 + target.addEventListener(event, handler, options); 83 83 + const key = `${target.nodeName || 'doc'}-${event}`; 84 84 + if (!this.listeners.has(key)) { 85 85 + this.listeners.set(key, []); 86 86 + } 87 87 + this.listeners.get(key).push({ target, event, handler, options }); 88 88 + } 89 89 + 90 90 + detach() { 91 91 + this.listeners.forEach(entries => { 92 92 + entries.forEach(({ target, event, handler, options }) => { 93 93 + try { 94 94 + target.removeEventListener(event, handler, options); 95 95 + } catch (e) { 96 96 + // Target may no longer exist 97 97 + } 98 98 + }); 99 99 + }); 100 100 + this.listeners.clear(); 101 101 + this.iframeDoc = null; 102 102 + } 103 103 + 104 104 + start() { 105 105 + this.isRecording = true; 106 106 + this.startTime = Date.now(); 107 107 + } 108 108 + 109 109 + stop() { 110 110 + this.isRecording = false; 111 111 + } 112 112 + 113 113 + handleMouseMove(e) { 114 114 + if (!this.isRecording) return; 115 115 + 116 116 + const now = Date.now(); 117 117 + const x = e.clientX; 118 118 + const y = e.clientY; 119 119 + 120 120 + // Calculate distance and velocity 121 121 + if (this.lastMousePos) { 122 122 + const dx = x - this.lastMousePos.x; 123 123 + const dy = y - this.lastMousePos.y; 124 124 + const distance = Math.sqrt(dx * dx + dy * dy); 125 125 + this.stats.mouse.distance += distance; 126 126 + 127 127 + if (this.lastMouseTime) { 128 128 + const dt = (now - this.lastMouseTime) / 1000; // seconds 129 129 + if (dt > 0) { 130 130 + const velocity = distance / dt; 131 131 + this.velocities.push(velocity); 132 132 + // Keep last 50 velocities for average 133 133 + if (this.velocities.length > 50) { 134 134 + this.velocities.shift(); 135 135 + } 136 136 + this.stats.mouse.avgVelocity = Math.round( 137 137 + this.velocities.reduce((a, b) => a + b, 0) / this.velocities.length 138 138 + ); 139 139 + } 140 140 + } 141 141 + } 142 142 + 143 143 + this.lastMousePos = { x, y }; 144 144 + this.lastMouseTime = now; 145 145 + 146 146 + this.stats.mouse.x = x; 147 147 + this.stats.mouse.y = y; 148 148 + this.stats.mouse.movements++; 149 149 + this.stats.totalEvents++; 150 150 + 151 151 + // Throttle event logging for mouse moves (every 10th move) 152 152 + if (this.stats.mouse.movements % 10 === 0) { 153 153 + this.logEvent('mouse', `Move to (${x}, ${y})`); 154 154 + } 155 155 + 156 156 + this.notifyStatsUpdate(); 157 157 + } 158 158 + 159 159 + handleClick(e) { 160 160 + if (!this.isRecording) return; 161 161 + 162 162 + this.stats.mouse.clicks++; 163 163 + this.stats.totalEvents++; 164 164 + 165 165 + const target = e.target; 166 166 + const tagName = target.tagName.toLowerCase(); 167 167 + const id = target.id ? `#${target.id}` : ''; 168 168 + const className = target.className ? `.${target.className.split(' ')[0]}` : ''; 169 169 + 170 170 + this.logEvent('click', `Click on ${tagName}${id}${className} at (${e.clientX}, ${e.clientY})`); 171 171 + this.notifyStatsUpdate(); 172 172 + } 173 173 + 174 174 + handleScroll(e) { 175 175 + if (!this.isRecording) return; 176 176 + 177 177 + this.stats.mouse.scrollEvents++; 178 178 + this.stats.totalEvents++; 179 179 + 180 180 + this.logEvent('mouse', 'Scroll event'); 181 181 + this.notifyStatsUpdate(); 182 182 + } 183 183 + 184 184 + handleKeyDown(e) { 185 185 + if (!this.isRecording) return; 186 186 + 187 187 + this.stats.keyboard.totalKeys++; 188 188 + this.stats.totalEvents++; 189 189 + 190 190 + // Calculate keys per minute 191 191 + const elapsed = (Date.now() - this.startTime) / 60000; // minutes 192 192 + if (elapsed > 0) { 193 193 + this.stats.keyboard.keysPerMinute = Math.round(this.stats.keyboard.totalKeys / elapsed); 194 194 + } 195 195 + 196 196 + // Track backspaces 197 197 + if (e.key === 'Backspace') { 198 198 + this.stats.keyboard.backspaces++; 199 199 + } 200 200 + 201 201 + // Display key (handle special keys) 202 202 + let keyDisplay = e.key; 203 203 + if (e.key === ' ') keyDisplay = 'Space'; 204 204 + if (e.key.length > 1) keyDisplay = `[${e.key}]`; 205 205 + 206 206 + this.stats.keyboard.lastKey = keyDisplay; 207 207 + 208 208 + this.logEvent('key', `Key: ${keyDisplay}`); 209 209 + this.notifyStatsUpdate(); 210 210 + } 211 211 + 212 212 + logEvent(type, message) { 213 213 + const event = { 214 214 + timestamp: Date.now(), 215 215 + type, 216 216 + message, 217 217 + stats: { ...this.stats } 218 218 + }; 219 219 + this.events.push(event); 220 220 + 221 221 + if (this.onEvent) { 222 222 + this.onEvent(event); 223 223 + } 224 224 + } 225 225 + 226 226 + notifyStatsUpdate() { 227 227 + if (this.onStatsUpdate) { 228 228 + this.onStatsUpdate({ ...this.stats }); 229 229 + } 230 230 + } 231 231 + 232 232 + getEvents() { 233 233 + return [...this.events]; 234 234 + } 235 235 + 236 236 + getStats() { 237 237 + return { ...this.stats }; 238 238 + } 239 239 + 240 240 + exportData() { 241 241 + return { 242 242 + exportedAt: new Date().toISOString(), 243 243 + duration: this.startTime ? Date.now() - this.startTime : 0, 244 244 + stats: this.getStats(), 245 245 + events: this.getEvents() 246 246 + }; 247 247 + } 248 248 + }

+328

testable-apps/example-app/index.html

reviewed

··· 1 1 + <!DOCTYPE html> 2 2 + <html lang="en"> 3 3 + 4 4 + <head> 5 5 + <meta charset="UTF-8"> 6 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 7 + <title>Example App - UXET Test</title> 8 8 + <style> 9 9 + * { 10 10 + box-sizing: border-box; 11 11 + margin: 0; 12 12 + padding: 0; 13 13 + } 14 14 + 15 15 + body { 16 16 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 17 17 + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 18 18 + min-height: 100vh; 19 19 + padding: 40px 20px; 20 20 + color: #333; 21 21 + } 22 22 + 23 23 + .container { 24 24 + max-width: 600px; 25 25 + margin: 0 auto; 26 26 + } 27 27 + 28 28 + .card { 29 29 + background: white; 30 30 + border-radius: 16px; 31 31 + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); 32 32 + padding: 40px; 33 33 + margin-bottom: 24px; 34 34 + } 35 35 + 36 36 + h1 { 37 37 + font-size: 2rem; 38 38 + margin-bottom: 8px; 39 39 + color: #1a1a2e; 40 40 + } 41 41 + 42 42 + .subtitle { 43 43 + color: #666; 44 44 + margin-bottom: 32px; 45 45 + } 46 46 + 47 47 + .form-group { 48 48 + margin-bottom: 24px; 49 49 + } 50 50 + 51 51 + label { 52 52 + display: block; 53 53 + font-weight: 600; 54 54 + margin-bottom: 8px; 55 55 + color: #444; 56 56 + } 57 57 + 58 58 + input[type="text"], 59 59 + input[type="email"], 60 60 + textarea, 61 61 + select { 62 62 + width: 100%; 63 63 + padding: 12px 16px; 64 64 + border: 2px solid #e0e0e0; 65 65 + border-radius: 8px; 66 66 + font-size: 1rem; 67 67 + transition: border-color 0.2s, box-shadow 0.2s; 68 68 + } 69 69 + 70 70 + input:focus, 71 71 + textarea:focus, 72 72 + select:focus { 73 73 + outline: none; 74 74 + border-color: #667eea; 75 75 + box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); 76 76 + } 77 77 + 78 78 + textarea { 79 79 + min-height: 120px; 80 80 + resize: vertical; 81 81 + } 82 82 + 83 83 + .button-group { 84 84 + display: flex; 85 85 + gap: 12px; 86 86 + flex-wrap: wrap; 87 87 + } 88 88 + 89 89 + button { 90 90 + padding: 14px 28px; 91 91 + border: none; 92 92 + border-radius: 8px; 93 93 + font-size: 1rem; 94 94 + font-weight: 600; 95 95 + cursor: pointer; 96 96 + transition: transform 0.2s, box-shadow 0.2s; 97 97 + } 98 98 + 99 99 + button:hover { 100 100 + transform: translateY(-2px); 101 101 + } 102 102 + 103 103 + button:active { 104 104 + transform: translateY(0); 105 105 + } 106 106 + 107 107 + .btn-primary { 108 108 + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 109 109 + color: white; 110 110 + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); 111 111 + } 112 112 + 113 113 + .btn-primary:hover { 114 114 + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); 115 115 + } 116 116 + 117 117 + .btn-secondary { 118 118 + background: #f0f0f0; 119 119 + color: #333; 120 120 + } 121 121 + 122 122 + .btn-secondary:hover { 123 123 + background: #e0e0e0; 124 124 + } 125 125 + 126 126 + .checkbox-group { 127 127 + display: flex; 128 128 + flex-direction: column; 129 129 + gap: 12px; 130 130 + } 131 131 + 132 132 + .checkbox-item { 133 133 + display: flex; 134 134 + align-items: center; 135 135 + gap: 10px; 136 136 + cursor: pointer; 137 137 + } 138 138 + 139 139 + .checkbox-item input { 140 140 + width: 20px; 141 141 + height: 20px; 142 142 + cursor: pointer; 143 143 + } 144 144 + 145 145 + .interactive-section { 146 146 + background: #f8f9fa; 147 147 + border-radius: 12px; 148 148 + padding: 24px; 149 149 + margin-top: 24px; 150 150 + } 151 151 + 152 152 + .interactive-section h3 { 153 153 + margin-bottom: 16px; 154 154 + color: #444; 155 155 + } 156 156 + 157 157 + .counter { 158 158 + display: flex; 159 159 + align-items: center; 160 160 + gap: 16px; 161 161 + } 162 162 + 163 163 + .counter-value { 164 164 + font-size: 2rem; 165 165 + font-weight: 700; 166 166 + color: #667eea; 167 167 + min-width: 60px; 168 168 + text-align: center; 169 169 + } 170 170 + 171 171 + .counter button { 172 172 + width: 48px; 173 173 + height: 48px; 174 174 + border-radius: 50%; 175 175 + font-size: 1.5rem; 176 176 + padding: 0; 177 177 + display: flex; 178 178 + align-items: center; 179 179 + justify-content: center; 180 180 + } 181 181 + 182 182 + .scrollable-list { 183 183 + max-height: 200px; 184 184 + overflow-y: auto; 185 185 + border: 1px solid #e0e0e0; 186 186 + border-radius: 8px; 187 187 + margin-top: 16px; 188 188 + } 189 189 + 190 190 + .list-item { 191 191 + padding: 12px 16px; 192 192 + border-bottom: 1px solid #e0e0e0; 193 193 + cursor: pointer; 194 194 + transition: background 0.2s; 195 195 + } 196 196 + 197 197 + .list-item:last-child { 198 198 + border-bottom: none; 199 199 + } 200 200 + 201 201 + .list-item:hover { 202 202 + background: #f0f4ff; 203 203 + } 204 204 + 205 205 + .list-item.selected { 206 206 + background: #667eea; 207 207 + color: white; 208 208 + } 209 209 + </style> 210 210 + </head> 211 211 + 212 212 + <body> 213 213 + <div class="container"> 214 214 + <div class="card"> 215 215 + <h1>Example Test App</h1> 216 216 + <p class="subtitle">Interact with this form to test UXET tracking</p> 217 217 + 218 218 + <form id="test-form"> 219 219 + <div class="form-group"> 220 220 + <label for="name">Your Name</label> 221 221 + <input type="text" id="name" placeholder="Enter your name"> 222 222 + </div> 223 223 + 224 224 + <div class="form-group"> 225 225 + <label for="email">Email Address</label> 226 226 + <input type="email" id="email" placeholder="you@example.com"> 227 227 + </div> 228 228 + 229 229 + <div class="form-group"> 230 230 + <label for="category">Category</label> 231 231 + <select id="category"> 232 232 + <option value="">Select a category...</option> 233 233 + <option value="feedback">Feedback</option> 234 234 + <option value="bug">Bug Report</option> 235 235 + <option value="feature">Feature Request</option> 236 236 + <option value="other">Other</option> 237 237 + </select> 238 238 + </div> 239 239 + 240 240 + <div class="form-group"> 241 241 + <label for="message">Message</label> 242 242 + <textarea id="message" placeholder="Type your message here..."></textarea> 243 243 + </div> 244 244 + 245 245 + <div class="form-group"> 246 246 + <label>Preferences</label> 247 247 + <div class="checkbox-group"> 248 248 + <label class="checkbox-item"> 249 249 + <input type="checkbox" id="pref1"> 250 250 + <span>Send me email updates</span> 251 251 + </label> 252 252 + <label class="checkbox-item"> 253 253 + <input type="checkbox" id="pref2"> 254 254 + <span>Enable notifications</span> 255 255 + </label> 256 256 + <label class="checkbox-item"> 257 257 + <input type="checkbox" id="pref3"> 258 258 + <span>Remember my preferences</span> 259 259 + </label> 260 260 + </div> 261 261 + </div> 262 262 + 263 263 + <div class="button-group"> 264 264 + <button type="submit" class="btn-primary">Submit Form</button> 265 265 + <button type="reset" class="btn-secondary">Reset</button> 266 266 + </div> 267 267 + </form> 268 268 + 269 269 + <div class="interactive-section"> 270 270 + <h3>Interactive Counter</h3> 271 271 + <div class="counter"> 272 272 + <button class="btn-secondary" id="decrease">−</button> 273 273 + <span class="counter-value" id="counter-value">0</span> 274 274 + <button class="btn-primary" id="increase">+</button> 275 275 + </div> 276 276 + </div> 277 277 + 278 278 + <div class="interactive-section"> 279 279 + <h3>Scrollable List</h3> 280 280 + <div class="scrollable-list" id="scrollable-list"> 281 281 + <div class="list-item">Item 1 - Click to select</div> 282 282 + <div class="list-item">Item 2 - Click to select</div> 283 283 + <div class="list-item">Item 3 - Click to select</div> 284 284 + <div class="list-item">Item 4 - Click to select</div> 285 285 + <div class="list-item">Item 5 - Click to select</div> 286 286 + <div class="list-item">Item 6 - Click to select</div> 287 287 + <div class="list-item">Item 7 - Click to select</div> 288 288 + <div class="list-item">Item 8 - Click to select</div> 289 289 + <div class="list-item">Item 9 - Click to select</div> 290 290 + <div class="list-item">Item 10 - Click to select</div> 291 291 + </div> 292 292 + </div> 293 293 + </div> 294 294 + </div> 295 295 + 296 296 + <script> 297 297 + // Counter functionality 298 298 + let count = 0; 299 299 + const counterValue = document.getElementById('counter-value'); 300 300 + 301 301 + document.getElementById('increase').addEventListener('click', () => { 302 302 + count++; 303 303 + counterValue.textContent = count; 304 304 + }); 305 305 + 306 306 + document.getElementById('decrease').addEventListener('click', () => { 307 307 + count--; 308 308 + counterValue.textContent = count; 309 309 + }); 310 310 + 311 311 + // List selection 312 312 + const listItems = document.querySelectorAll('.list-item'); 313 313 + listItems.forEach(item => { 314 314 + item.addEventListener('click', () => { 315 315 + listItems.forEach(i => i.classList.remove('selected')); 316 316 + item.classList.add('selected'); 317 317 + }); 318 318 + }); 319 319 + 320 320 + // Form submission 321 321 + document.getElementById('test-form').addEventListener('submit', (e) => { 322 322 + e.preventDefault(); 323 323 + alert('Form submitted! (This is just a demo)'); 324 324 + }); 325 325 + </script> 326 326 + </body> 327 327 + 328 328 + </html>

+884

testable-apps/shop-app/index.html

reviewed

··· 1 1 + <!DOCTYPE html> 2 2 + <html lang="en"> 3 3 + 4 4 + <head> 5 5 + <meta charset="UTF-8"> 6 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 7 + <title>ShopEasy - Your Style, Delivered</title> 8 8 + <style> 9 9 + * { 10 10 + box-sizing: border-box; 11 11 + margin: 0; 12 12 + padding: 0; 13 13 + } 14 14 + 15 15 + body { 16 16 + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; 17 17 + background: #f5f5f7; 18 18 + color: #1d1d1f; 19 19 + line-height: 1.5; 20 20 + } 21 21 + 22 22 + /* Header */ 23 23 + .header { 24 24 + background: white; 25 25 + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 26 26 + position: sticky; 27 27 + top: 0; 28 28 + z-index: 100; 29 29 + } 30 30 + 31 31 + .header-inner { 32 32 + max-width: 1200px; 33 33 + margin: 0 auto; 34 34 + padding: 16px 24px; 35 35 + display: flex; 36 36 + align-items: center; 37 37 + justify-content: space-between; 38 38 + } 39 39 + 40 40 + .logo { 41 41 + font-size: 1.5rem; 42 42 + font-weight: 700; 43 43 + color: #6366f1; 44 44 + text-decoration: none; 45 45 + } 46 46 + 47 47 + .nav { 48 48 + display: flex; 49 49 + gap: 32px; 50 50 + } 51 51 + 52 52 + .nav a { 53 53 + color: #555; 54 54 + text-decoration: none; 55 55 + font-weight: 500; 56 56 + transition: color 0.2s; 57 57 + } 58 58 + 59 59 + .nav a:hover { 60 60 + color: #6366f1; 61 61 + } 62 62 + 63 63 + .nav a.active { 64 64 + color: #6366f1; 65 65 + } 66 66 + 67 67 + .header-actions { 68 68 + display: flex; 69 69 + align-items: center; 70 70 + gap: 16px; 71 71 + } 72 72 + 73 73 + .search-box { 74 74 + display: flex; 75 75 + align-items: center; 76 76 + background: #f0f0f0; 77 77 + border-radius: 8px; 78 78 + padding: 8px 12px; 79 79 + } 80 80 + 81 81 + .search-box input { 82 82 + border: none; 83 83 + background: transparent; 84 84 + outline: none; 85 85 + width: 200px; 86 86 + font-size: 0.9rem; 87 87 + } 88 88 + 89 89 + .cart-btn { 90 90 + position: relative; 91 91 + background: none; 92 92 + border: none; 93 93 + font-size: 1.5rem; 94 94 + cursor: pointer; 95 95 + padding: 8px; 96 96 + } 97 97 + 98 98 + .cart-count { 99 99 + position: absolute; 100 100 + top: 0; 101 101 + right: 0; 102 102 + background: #ef4444; 103 103 + color: white; 104 104 + font-size: 0.7rem; 105 105 + width: 18px; 106 106 + height: 18px; 107 107 + border-radius: 50%; 108 108 + display: flex; 109 109 + align-items: center; 110 110 + justify-content: center; 111 111 + font-weight: 600; 112 112 + } 113 113 + 114 114 + /* Hero */ 115 115 + .hero { 116 116 + background: linear-gradient(135deg, #6366f1, #8b5cf6); 117 117 + color: white; 118 118 + padding: 60px 24px; 119 119 + text-align: center; 120 120 + } 121 121 + 122 122 + .hero h1 { 123 123 + font-size: 2.5rem; 124 124 + margin-bottom: 12px; 125 125 + } 126 126 + 127 127 + .hero p { 128 128 + font-size: 1.1rem; 129 129 + opacity: 0.9; 130 130 + } 131 131 + 132 132 + /* Category Filters */ 133 133 + .filters { 134 134 + max-width: 1200px; 135 135 + margin: 32px auto 0; 136 136 + padding: 0 24px; 137 137 + } 138 138 + 139 139 + .filter-tabs { 140 140 + display: flex; 141 141 + gap: 12px; 142 142 + flex-wrap: wrap; 143 143 + } 144 144 + 145 145 + .filter-tab { 146 146 + padding: 10px 20px; 147 147 + background: white; 148 148 + border: 2px solid #e0e0e0; 149 149 + border-radius: 24px; 150 150 + font-size: 0.9rem; 151 151 + font-weight: 500; 152 152 + cursor: pointer; 153 153 + transition: all 0.2s; 154 154 + } 155 155 + 156 156 + .filter-tab:hover { 157 157 + border-color: #6366f1; 158 158 + color: #6366f1; 159 159 + } 160 160 + 161 161 + .filter-tab.active { 162 162 + background: #6366f1; 163 163 + border-color: #6366f1; 164 164 + color: white; 165 165 + } 166 166 + 167 167 + /* Product Grid */ 168 168 + .products { 169 169 + max-width: 1200px; 170 170 + margin: 32px auto; 171 171 + padding: 0 24px; 172 172 + } 173 173 + 174 174 + .products h2 { 175 175 + font-size: 1.5rem; 176 176 + margin-bottom: 24px; 177 177 + } 178 178 + 179 179 + .product-grid { 180 180 + display: grid; 181 181 + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 182 182 + gap: 24px; 183 183 + } 184 184 + 185 185 + .product-card { 186 186 + background: white; 187 187 + border-radius: 16px; 188 188 + overflow: hidden; 189 189 + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 190 190 + transition: transform 0.2s, box-shadow 0.2s; 191 191 + cursor: pointer; 192 192 + } 193 193 + 194 194 + .product-card:hover { 195 195 + transform: translateY(-4px); 196 196 + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); 197 197 + } 198 198 + 199 199 + .product-image { 200 200 + height: 200px; 201 201 + display: flex; 202 202 + align-items: center; 203 203 + justify-content: center; 204 204 + font-size: 4rem; 205 205 + background: linear-gradient(135deg, #f0f0ff, #e8e8ff); 206 206 + } 207 207 + 208 208 + .product-info { 209 209 + padding: 16px; 210 210 + } 211 211 + 212 212 + .product-name { 213 213 + font-weight: 600; 214 214 + font-size: 1rem; 215 215 + margin-bottom: 4px; 216 216 + } 217 217 + 218 218 + .product-color { 219 219 + color: #888; 220 220 + font-size: 0.85rem; 221 221 + margin-bottom: 8px; 222 222 + } 223 223 + 224 224 + .product-price { 225 225 + font-size: 1.25rem; 226 226 + font-weight: 700; 227 227 + color: #6366f1; 228 228 + } 229 229 + 230 230 + .product-rating { 231 231 + display: flex; 232 232 + align-items: center; 233 233 + gap: 4px; 234 234 + margin-top: 8px; 235 235 + color: #fbbf24; 236 236 + font-size: 0.85rem; 237 237 + } 238 238 + 239 239 + /* Product Modal */ 240 240 + .modal-overlay { 241 241 + display: none; 242 242 + position: fixed; 243 243 + inset: 0; 244 244 + background: rgba(0, 0, 0, 0.5); 245 245 + z-index: 200; 246 246 + align-items: center; 247 247 + justify-content: center; 248 248 + padding: 24px; 249 249 + } 250 250 + 251 251 + .modal-overlay.active { 252 252 + display: flex; 253 253 + } 254 254 + 255 255 + .modal { 256 256 + background: white; 257 257 + border-radius: 20px; 258 258 + max-width: 600px; 259 259 + width: 100%; 260 260 + max-height: 90vh; 261 261 + overflow-y: auto; 262 262 + animation: modalSlide 0.3s ease; 263 263 + } 264 264 + 265 265 + @keyframes modalSlide { 266 266 + from { 267 267 + opacity: 0; 268 268 + transform: scale(0.95); 269 269 + } 270 270 + 271 271 + to { 272 272 + opacity: 1; 273 273 + transform: scale(1); 274 274 + } 275 275 + } 276 276 + 277 277 + .modal-header { 278 278 + display: flex; 279 279 + justify-content: space-between; 280 280 + align-items: center; 281 281 + padding: 20px 24px; 282 282 + border-bottom: 1px solid #eee; 283 283 + } 284 284 + 285 285 + .modal-close { 286 286 + background: none; 287 287 + border: none; 288 288 + font-size: 1.5rem; 289 289 + cursor: pointer; 290 290 + color: #888; 291 291 + } 292 292 + 293 293 + .modal-body { 294 294 + padding: 24px; 295 295 + } 296 296 + 297 297 + .modal-product-image { 298 298 + height: 250px; 299 299 + display: flex; 300 300 + align-items: center; 301 301 + justify-content: center; 302 302 + font-size: 6rem; 303 303 + background: linear-gradient(135deg, #f0f0ff, #e8e8ff); 304 304 + border-radius: 12px; 305 305 + margin-bottom: 24px; 306 306 + } 307 307 + 308 308 + .modal-product-info h2 { 309 309 + font-size: 1.5rem; 310 310 + margin-bottom: 8px; 311 311 + } 312 312 + 313 313 + .modal-product-price { 314 314 + font-size: 2rem; 315 315 + font-weight: 700; 316 316 + color: #6366f1; 317 317 + margin-bottom: 16px; 318 318 + } 319 319 + 320 320 + .size-selector { 321 321 + margin-bottom: 24px; 322 322 + } 323 323 + 324 324 + .size-selector label { 325 325 + display: block; 326 326 + font-weight: 600; 327 327 + margin-bottom: 8px; 328 328 + } 329 329 + 330 330 + .size-options { 331 331 + display: flex; 332 332 + gap: 8px; 333 333 + } 334 334 + 335 335 + .size-option { 336 336 + width: 44px; 337 337 + height: 44px; 338 338 + border: 2px solid #e0e0e0; 339 339 + border-radius: 8px; 340 340 + display: flex; 341 341 + align-items: center; 342 342 + justify-content: center; 343 343 + cursor: pointer; 344 344 + font-weight: 500; 345 345 + transition: all 0.2s; 346 346 + } 347 347 + 348 348 + .size-option:hover { 349 349 + border-color: #6366f1; 350 350 + } 351 351 + 352 352 + .size-option.selected { 353 353 + border-color: #6366f1; 354 354 + background: #6366f1; 355 355 + color: white; 356 356 + } 357 357 + 358 358 + .add-to-cart-btn { 359 359 + width: 100%; 360 360 + padding: 16px; 361 361 + background: linear-gradient(135deg, #6366f1, #8b5cf6); 362 362 + color: white; 363 363 + border: none; 364 364 + border-radius: 12px; 365 365 + font-size: 1.1rem; 366 366 + font-weight: 600; 367 367 + cursor: pointer; 368 368 + transition: transform 0.2s, box-shadow 0.2s; 369 369 + } 370 370 + 371 371 + .add-to-cart-btn:hover { 372 372 + transform: translateY(-2px); 373 373 + box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); 374 374 + } 375 375 + 376 376 + /* Cart Sidebar */ 377 377 + .cart-sidebar { 378 378 + position: fixed; 379 379 + top: 0; 380 380 + right: -400px; 381 381 + width: 400px; 382 382 + height: 100vh; 383 383 + background: white; 384 384 + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); 385 385 + z-index: 300; 386 386 + transition: right 0.3s ease; 387 387 + display: flex; 388 388 + flex-direction: column; 389 389 + } 390 390 + 391 391 + .cart-sidebar.open { 392 392 + right: 0; 393 393 + } 394 394 + 395 395 + .cart-header { 396 396 + padding: 20px 24px; 397 397 + border-bottom: 1px solid #eee; 398 398 + display: flex; 399 399 + justify-content: space-between; 400 400 + align-items: center; 401 401 + } 402 402 + 403 403 + .cart-header h2 { 404 404 + font-size: 1.25rem; 405 405 + } 406 406 + 407 407 + .cart-close { 408 408 + background: none; 409 409 + border: none; 410 410 + font-size: 1.5rem; 411 411 + cursor: pointer; 412 412 + color: #888; 413 413 + } 414 414 + 415 415 + .cart-items { 416 416 + flex: 1; 417 417 + overflow-y: auto; 418 418 + padding: 16px 24px; 419 419 + } 420 420 + 421 421 + .cart-empty { 422 422 + text-align: center; 423 423 + color: #888; 424 424 + padding: 40px; 425 425 + } 426 426 + 427 427 + .cart-item { 428 428 + display: flex; 429 429 + gap: 16px; 430 430 + padding: 16px 0; 431 431 + border-bottom: 1px solid #eee; 432 432 + } 433 433 + 434 434 + .cart-item-image { 435 435 + width: 80px; 436 436 + height: 80px; 437 437 + background: #f0f0ff; 438 438 + border-radius: 8px; 439 439 + display: flex; 440 440 + align-items: center; 441 441 + justify-content: center; 442 442 + font-size: 2rem; 443 443 + } 444 444 + 445 445 + .cart-item-info { 446 446 + flex: 1; 447 447 + } 448 448 + 449 449 + .cart-item-name { 450 450 + font-weight: 600; 451 451 + margin-bottom: 4px; 452 452 + } 453 453 + 454 454 + .cart-item-details { 455 455 + color: #888; 456 456 + font-size: 0.85rem; 457 457 + margin-bottom: 8px; 458 458 + } 459 459 + 460 460 + .cart-item-price { 461 461 + font-weight: 600; 462 462 + color: #6366f1; 463 463 + } 464 464 + 465 465 + .cart-item-remove { 466 466 + background: none; 467 467 + border: none; 468 468 + color: #ef4444; 469 469 + cursor: pointer; 470 470 + font-size: 0.85rem; 471 471 + } 472 472 + 473 473 + .cart-footer { 474 474 + padding: 20px 24px; 475 475 + border-top: 1px solid #eee; 476 476 + background: #fafafa; 477 477 + } 478 478 + 479 479 + .cart-total { 480 480 + display: flex; 481 481 + justify-content: space-between; 482 482 + font-size: 1.25rem; 483 483 + font-weight: 600; 484 484 + margin-bottom: 16px; 485 485 + } 486 486 + 487 487 + .checkout-btn { 488 488 + width: 100%; 489 489 + padding: 16px; 490 490 + background: linear-gradient(135deg, #22c55e, #16a34a); 491 491 + color: white; 492 492 + border: none; 493 493 + border-radius: 12px; 494 494 + font-size: 1.1rem; 495 495 + font-weight: 600; 496 496 + cursor: pointer; 497 497 + transition: transform 0.2s; 498 498 + } 499 499 + 500 500 + .checkout-btn:hover { 501 501 + transform: translateY(-2px); 502 502 + } 503 503 + 504 504 + .cart-overlay { 505 505 + display: none; 506 506 + position: fixed; 507 507 + inset: 0; 508 508 + background: rgba(0, 0, 0, 0.3); 509 509 + z-index: 250; 510 510 + } 511 511 + 512 512 + .cart-overlay.active { 513 513 + display: block; 514 514 + } 515 515 + 516 516 + /* Checkout Success */ 517 517 + .checkout-success { 518 518 + display: none; 519 519 + position: fixed; 520 520 + inset: 0; 521 521 + background: rgba(0, 0, 0, 0.5); 522 522 + z-index: 400; 523 523 + align-items: center; 524 524 + justify-content: center; 525 525 + } 526 526 + 527 527 + .checkout-success.active { 528 528 + display: flex; 529 529 + } 530 530 + 531 531 + .success-card { 532 532 + background: white; 533 533 + border-radius: 20px; 534 534 + padding: 48px; 535 535 + text-align: center; 536 536 + max-width: 400px; 537 537 + animation: modalSlide 0.3s ease; 538 538 + } 539 539 + 540 540 + .success-icon { 541 541 + font-size: 4rem; 542 542 + margin-bottom: 16px; 543 543 + } 544 544 + 545 545 + .success-card h2 { 546 546 + color: #22c55e; 547 547 + margin-bottom: 8px; 548 548 + } 549 549 + 550 550 + .success-card p { 551 551 + color: #666; 552 552 + margin-bottom: 24px; 553 553 + } 554 554 + 555 555 + .continue-btn { 556 556 + padding: 12px 32px; 557 557 + background: #6366f1; 558 558 + color: white; 559 559 + border: none; 560 560 + border-radius: 8px; 561 561 + font-size: 1rem; 562 562 + font-weight: 600; 563 563 + cursor: pointer; 564 564 + } 565 565 + </style> 566 566 + </head> 567 567 + 568 568 + <body> 569 569 + <!-- Header --> 570 570 + <header class="header"> 571 571 + <div class="header-inner"> 572 572 + <a href="#" class="logo">ShopEasy</a> 573 573 + <nav class="nav"> 574 574 + <a href="#" class="active">Shop</a> 575 575 + <a href="#">Men</a> 576 576 + <a href="#">Women</a> 577 577 + <a href="#">Sale</a> 578 578 + </nav> 579 579 + <div class="header-actions"> 580 580 + <div class="search-box"> 581 581 + <span>🔍</span> 582 582 + <input type="text" placeholder="Search products..."> 583 583 + </div> 584 584 + <button class="cart-btn" id="cart-btn"> 585 585 + 🛒 586 586 + <span class="cart-count" id="cart-count">0</span> 587 587 + </button> 588 588 + </div> 589 589 + </div> 590 590 + </header> 591 591 + 592 592 + <!-- Hero --> 593 593 + <section class="hero"> 594 594 + <h1>Summer Collection 2026</h1> 595 595 + <p>Discover the latest trends in fashion. Free shipping on orders over $50!</p> 596 596 + </section> 597 597 + 598 598 + <!-- Filters --> 599 599 + <div class="filters"> 600 600 + <div class="filter-tabs"> 601 601 + <button class="filter-tab active" data-filter="all">All</button> 602 602 + <button class="filter-tab" data-filter="t-shirts">T-Shirts</button> 603 603 + <button class="filter-tab" data-filter="jeans">Jeans</button> 604 604 + <button class="filter-tab" data-filter="dresses">Dresses</button> 605 605 + <button class="filter-tab" data-filter="jackets">Jackets</button> 606 606 + </div> 607 607 + </div> 608 608 + 609 609 + <!-- Products --> 610 610 + <section class="products"> 611 611 + <h2>Featured Products</h2> 612 612 + <div class="product-grid" id="product-grid"> 613 613 + <!-- Products will be inserted here --> 614 614 + </div> 615 615 + </section> 616 616 + 617 617 + <!-- Product Modal --> 618 618 + <div class="modal-overlay" id="product-modal"> 619 619 + <div class="modal"> 620 620 + <div class="modal-header"> 621 621 + <h3>Product Details</h3> 622 622 + <button class="modal-close" id="modal-close">×</button> 623 623 + </div> 624 624 + <div class="modal-body"> 625 625 + <div class="modal-product-image" id="modal-image">👕</div> 626 626 + <div class="modal-product-info"> 627 627 + <h2 id="modal-name">Classic Blue T-Shirt</h2> 628 628 + <p id="modal-color" style="color: #888; margin-bottom: 8px;">Blue</p> 629 629 + <div class="modal-product-price" id="modal-price">$29.99</div> 630 630 + 631 631 + <div class="size-selector"> 632 632 + <label>Select Size</label> 633 633 + <div class="size-options"> 634 634 + <div class="size-option" data-size="XS">XS</div> 635 635 + <div class="size-option" data-size="S">S</div> 636 636 + <div class="size-option selected" data-size="M">M</div> 637 637 + <div class="size-option" data-size="L">L</div> 638 638 + <div class="size-option" data-size="XL">XL</div> 639 639 + </div> 640 640 + </div> 641 641 + 642 642 + <button class="add-to-cart-btn" id="add-to-cart">Add to Cart</button> 643 643 + </div> 644 644 + </div> 645 645 + </div> 646 646 + </div> 647 647 + 648 648 + <!-- Cart Sidebar --> 649 649 + <div class="cart-overlay" id="cart-overlay"></div> 650 650 + <div class="cart-sidebar" id="cart-sidebar"> 651 651 + <div class="cart-header"> 652 652 + <h2>Your Cart</h2> 653 653 + <button class="cart-close" id="cart-close">×</button> 654 654 + </div> 655 655 + <div class="cart-items" id="cart-items"> 656 656 + <div class="cart-empty">Your cart is empty</div> 657 657 + </div> 658 658 + <div class="cart-footer"> 659 659 + <div class="cart-total"> 660 660 + <span>Total</span> 661 661 + <span id="cart-total">$0.00</span> 662 662 + </div> 663 663 + <button class="checkout-btn" id="checkout-btn">Proceed to Checkout</button> 664 664 + </div> 665 665 + </div> 666 666 + 667 667 + <!-- Checkout Success --> 668 668 + <div class="checkout-success" id="checkout-success"> 669 669 + <div class="success-card"> 670 670 + <div class="success-icon">✅</div> 671 671 + <h2>Purchase Complete!</h2> 672 672 + <p>Thank you for your order. Your items will be shipped soon.</p> 673 673 + <button class="continue-btn" id="continue-btn">Continue Shopping</button> 674 674 + </div> 675 675 + </div> 676 676 + 677 677 + <script> 678 678 + // Product data 679 679 + const products = [ 680 680 + { id: 1, name: 'Classic T-Shirt', color: 'Blue', price: 29.99, category: 't-shirts', emoji: '👕', rating: 4.5 }, 681 681 + { id: 2, name: 'Classic T-Shirt', color: 'Red', price: 29.99, category: 't-shirts', emoji: '👕', rating: 4.3 }, 682 682 + { id: 3, name: 'Classic T-Shirt', color: 'Black', price: 29.99, category: 't-shirts', emoji: '👕', rating: 4.8 }, 683 683 + { id: 4, name: 'Premium T-Shirt', color: 'White', price: 39.99, category: 't-shirts', emoji: '👕', rating: 4.6 }, 684 684 + { id: 5, name: 'Slim Fit Jeans', color: 'Dark Blue', price: 59.99, category: 'jeans', emoji: '👖', rating: 4.4 }, 685 685 + { id: 6, name: 'Relaxed Jeans', color: 'Light Blue', price: 54.99, category: 'jeans', emoji: '👖', rating: 4.2 }, 686 686 + { id: 7, name: 'Summer Dress', color: 'Floral', price: 49.99, category: 'dresses', emoji: '👗', rating: 4.7 }, 687 687 + { id: 8, name: 'Evening Dress', color: 'Black', price: 79.99, category: 'dresses', emoji: '👗', rating: 4.9 }, 688 688 + { id: 9, name: 'Denim Jacket', color: 'Blue', price: 89.99, category: 'jackets', emoji: '🧥', rating: 4.5 }, 689 689 + { id: 10, name: 'Leather Jacket', color: 'Brown', price: 149.99, category: 'jackets', emoji: '🧥', rating: 4.8 }, 690 690 + { id: 11, name: 'Graphic T-Shirt', color: 'Green', price: 34.99, category: 't-shirts', emoji: '👕', rating: 4.1 }, 691 691 + { id: 12, name: 'V-Neck T-Shirt', color: 'Navy', price: 32.99, category: 't-shirts', emoji: '👕', rating: 4.4 }, 692 692 + ]; 693 693 + 694 694 + let cart = []; 695 695 + let selectedProduct = null; 696 696 + let selectedSize = 'M'; 697 697 + let currentFilter = 'all'; 698 698 + 699 699 + // DOM Elements 700 700 + const productGrid = document.getElementById('product-grid'); 701 701 + const productModal = document.getElementById('product-modal'); 702 702 + const cartSidebar = document.getElementById('cart-sidebar'); 703 703 + const cartOverlay = document.getElementById('cart-overlay'); 704 704 + const cartItems = document.getElementById('cart-items'); 705 705 + const cartCount = document.getElementById('cart-count'); 706 706 + const cartTotal = document.getElementById('cart-total'); 707 707 + const checkoutSuccess = document.getElementById('checkout-success'); 708 708 + 709 709 + // Render products 710 710 + function renderProducts(filter = 'all') { 711 711 + const filtered = filter === 'all' 712 712 + ? products 713 713 + : products.filter(p => p.category === filter); 714 714 + 715 715 + productGrid.innerHTML = filtered.map(product => ` 716 716 + <div class="product-card" data-id="${product.id}"> 717 717 + <div class="product-image">${product.emoji}</div> 718 718 + <div class="product-info"> 719 719 + <div class="product-name">${product.name}</div> 720 720 + <div class="product-color">${product.color}</div> 721 721 + <div class="product-price">$${product.price.toFixed(2)}</div> 722 722 + <div class="product-rating"> 723 723 + ${'★'.repeat(Math.floor(product.rating))}${'☆'.repeat(5 - Math.floor(product.rating))} 724 724 + <span style="color: #888; margin-left: 4px;">(${product.rating})</span> 725 725 + </div> 726 726 + </div> 727 727 + </div> 728 728 + `).join(''); 729 729 + 730 730 + // Add click listeners 731 731 + document.querySelectorAll('.product-card').forEach(card => { 732 732 + card.addEventListener('click', () => openProductModal(parseInt(card.dataset.id))); 733 733 + }); 734 734 + } 735 735 + 736 736 + // Open product modal 737 737 + function openProductModal(productId) { 738 738 + selectedProduct = products.find(p => p.id === productId); 739 739 + if (!selectedProduct) return; 740 740 + 741 741 + document.getElementById('modal-image').textContent = selectedProduct.emoji; 742 742 + document.getElementById('modal-name').textContent = `${selectedProduct.name}`; 743 743 + document.getElementById('modal-color').textContent = selectedProduct.color; 744 744 + document.getElementById('modal-price').textContent = `$${selectedProduct.price.toFixed(2)}`; 745 745 + 746 746 + productModal.classList.add('active'); 747 747 + } 748 748 + 749 749 + // Close modal 750 750 + document.getElementById('modal-close').addEventListener('click', () => { 751 751 + productModal.classList.remove('active'); 752 752 + }); 753 753 + 754 754 + productModal.addEventListener('click', (e) => { 755 755 + if (e.target === productModal) { 756 756 + productModal.classList.remove('active'); 757 757 + } 758 758 + }); 759 759 + 760 760 + // Size selection 761 761 + document.querySelectorAll('.size-option').forEach(option => { 762 762 + option.addEventListener('click', () => { 763 763 + document.querySelectorAll('.size-option').forEach(o => o.classList.remove('selected')); 764 764 + option.classList.add('selected'); 765 765 + selectedSize = option.dataset.size; 766 766 + }); 767 767 + }); 768 768 + 769 769 + // Add to cart 770 770 + document.getElementById('add-to-cart').addEventListener('click', () => { 771 771 + if (!selectedProduct) return; 772 772 + 773 773 + const existingItem = cart.find(item => 774 774 + item.product.id === selectedProduct.id && item.size === selectedSize 775 775 + ); 776 776 + 777 777 + if (existingItem) { 778 778 + existingItem.quantity++; 779 779 + } else { 780 780 + cart.push({ 781 781 + product: selectedProduct, 782 782 + size: selectedSize, 783 783 + quantity: 1 784 784 + }); 785 785 + } 786 786 + 787 787 + updateCart(); 788 788 + productModal.classList.remove('active'); 789 789 + openCart(); 790 790 + }); 791 791 + 792 792 + // Update cart display 793 793 + function updateCart() { 794 794 + const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); 795 795 + cartCount.textContent = totalItems; 796 796 + 797 797 + if (cart.length === 0) { 798 798 + cartItems.innerHTML = '<div class="cart-empty">Your cart is empty</div>'; 799 799 + } else { 800 800 + cartItems.innerHTML = cart.map((item, index) => ` 801 801 + <div class="cart-item"> 802 802 + <div class="cart-item-image">${item.product.emoji}</div> 803 803 + <div class="cart-item-info"> 804 804 + <div class="cart-item-name">${item.product.name}</div> 805 805 + <div class="cart-item-details">${item.product.color} · Size ${item.size} · Qty ${item.quantity}</div> 806 806 + <div class="cart-item-price">$${(item.product.price * item.quantity).toFixed(2)}</div> 807 807 + </div> 808 808 + <button class="cart-item-remove" data-index="${index}">Remove</button> 809 809 + </div> 810 810 + `).join(''); 811 811 + 812 812 + // Add remove listeners 813 813 + document.querySelectorAll('.cart-item-remove').forEach(btn => { 814 814 + btn.addEventListener('click', () => { 815 815 + cart.splice(parseInt(btn.dataset.index), 1); 816 816 + updateCart(); 817 817 + }); 818 818 + }); 819 819 + } 820 820 + 821 821 + const total = cart.reduce((sum, item) => sum + item.product.price * item.quantity, 0); 822 822 + cartTotal.textContent = `$${total.toFixed(2)}`; 823 823 + } 824 824 + 825 825 + // Cart sidebar 826 826 + function openCart() { 827 827 + cartSidebar.classList.add('open'); 828 828 + cartOverlay.classList.add('active'); 829 829 + } 830 830 + 831 831 + function closeCart() { 832 832 + cartSidebar.classList.remove('open'); 833 833 + cartOverlay.classList.remove('active'); 834 834 + } 835 835 + 836 836 + document.getElementById('cart-btn').addEventListener('click', openCart); 837 837 + document.getElementById('cart-close').addEventListener('click', closeCart); 838 838 + cartOverlay.addEventListener('click', closeCart); 839 839 + 840 840 + // Filter tabs 841 841 + document.querySelectorAll('.filter-tab').forEach(tab => { 842 842 + tab.addEventListener('click', () => { 843 843 + document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active')); 844 844 + tab.classList.add('active'); 845 845 + currentFilter = tab.dataset.filter; 846 846 + renderProducts(currentFilter); 847 847 + }); 848 848 + }); 849 849 + 850 850 + // Checkout 851 851 + document.getElementById('checkout-btn').addEventListener('click', () => { 852 852 + if (cart.length === 0) { 853 853 + alert('Your cart is empty!'); 854 854 + return; 855 855 + } 856 856 + closeCart(); 857 857 + checkoutSuccess.classList.add('active'); 858 858 + 859 859 + // Signal UXET that task is complete 860 860 + if (window.parent !== window) { 861 861 + window.parent.postMessage({ 862 862 + type: 'UXET_TASK_COMPLETE', 863 863 + details: { 864 864 + taskId: 'purchase', 865 865 + itemCount: cart.length, 866 866 + total: cart.reduce((sum, item) => sum + item.product.price * item.quantity, 0) 867 867 + } 868 868 + }, '*'); 869 869 + } 870 870 + 871 871 + cart = []; 872 872 + updateCart(); 873 873 + }); 874 874 + 875 875 + document.getElementById('continue-btn').addEventListener('click', () => { 876 876 + checkoutSuccess.classList.remove('active'); 877 877 + }); 878 878 + 879 879 + // Initialize 880 880 + renderProducts(); 881 881 + </script> 882 882 + </body> 883 883 + 884 884 + </html>