SEVE-K/anycoder-5bc9a871
0
1<!DOCTYPE html>2<html lang="pt-br">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>CodePath AI - Elevate Your Skills</title>8 <!-- Fontes -->9 <link rel="preconnect" href="https://fonts.googleapis.com">10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>11 <link12 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap"13 rel="stylesheet">14 <!-- Ícones -->15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">16 17 <style>18 :root {19 /* Palette Refined */20 --bg-body: #0f0e17;21 --bg-panel: #181824;22 --bg-glass: rgba(24, 24, 36, 0.6);23 24 --primary: #7f5af0;25 --primary-light: #a78bfa;26 --secondary: #2cb67d;27 --accent: #ff8906;28 29 --text-main: #fffffe;30 --text-secondary: #94a1b2;31 --text-highlight: #7f5af0;32 33 --border: rgba(255, 255, 255, 0.08);34 --glass-border: rgba(255, 255, 255, 0.1);35 --glass-shine: rgba(255, 255, 255, 0.03);36 37 --success: #2cb67d;38 --error: #e53170;39 40 /* Shadows & Glows */41 --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);42 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);43 --glow-primary: 0 0 15px rgba(127, 90, 240, 0.4);44 --glow-accent: 0 0 15px rgba(255, 137, 6, 0.3);45 46 --sidebar-width: 80px;47 --sidebar-expanded: 240px;48 }49 50 * {51 box-sizing: border-box;52 margin: 0;53 padding: 0;54 }55 56 body {57 font-family: 'Inter', sans-serif;58 background-color: var(--bg-body);59 color: var(--text-main);60 overflow: hidden;61 height: 100vh;62 display: flex;63 /* Animated Background Gradient Mesh */64 background-image: 65 radial-gradient(at 0% 0%, rgba(127, 90, 240, 0.15) 0px, transparent 50%),66 radial-gradient(at 100% 0%, rgba(44, 182, 125, 0.15) 0px, transparent 50%);67 background-size: 200% 200%;68 animation: gradientMove 15s ease infinite;69 }70 71 @keyframes gradientMove {72 0% { background-position: 0% 0%; }73 50% { background-position: 100% 100%; }74 100% { background-position: 0% 0%; }75 }76 77 /* Scrollbar */78 ::-webkit-scrollbar {79 width: 6px;80 }81 ::-webkit-scrollbar-track {82 background: transparent;83 }84 ::-webkit-scrollbar-thumb {85 background: rgba(255, 255, 255, 0.1);86 border-radius: 10px;87 }88 ::-webkit-scrollbar-thumb:hover {89 background: rgba(255, 255, 255, 0.2);90 }91 92 /* --- Sidebar --- */93 .sidebar {94 width: var(--sidebar-width);95 background: var(--bg-panel);96 border-right: 1px solid var(--border);97 display: flex;98 flex-direction: column;99 align-items: center;100 padding: 25px 0;101 z-index: 100;102 transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);103 backdrop-filter: blur(10px);104 position: relative;105 }106 107 .sidebar::after {108 content: '';109 position: absolute;110 right: 0;111 top: 0;112 height: 100%;113 width: 1px;114 background: linear-gradient(to bottom, transparent, var(--primary), transparent);115 opacity: 0.5;116 }117 118 .sidebar:hover {119 width: var(--sidebar-expanded);120 }121 122 .logo-container {123 margin-bottom: 50px;124 position: relative;125 }126 127 .logo {128 font-size: 2rem;129 background: linear-gradient(135deg, var(--primary), var(--secondary));130 -webkit-background-clip: text;131 -webkit-text-fill-color: transparent;132 filter: drop-shadow(0 0 10px rgba(127, 90, 240, 0.3));133 transition: transform 0.3s ease;134 cursor: pointer;135 }136 137 .sidebar:hover .logo {138 transform: scale(1.1);139 }140 141 .nav-item {142 width: 90%;143 padding: 14px 16px;144 display: flex;145 align-items: center;146 cursor: pointer;147 color: var(--text-secondary);148 border-radius: 12px;149 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);150 position: relative;151 margin-bottom: 8px;152 overflow: hidden;153 }154 155 .nav-item::before {156 content: '';157 position: absolute;158 left: 0;159 top: 50%;160 transform: translateY(-50%) scaleX(0);161 width: 4px;162 height: 60%;163 background: var(--primary);164 border-radius: 2px;165 transition: transform 0.3s ease;166 transform-origin: center;167 }168 169 .nav-item:hover {170 color: var(--text-main);171 background: rgba(255, 255, 255, 0.03);172 }173 174 .nav-item:hover::before {175 transform: translateY(-50%) scaleX(1);176 }177 178 .nav-item.active {179 color: var(--text-main);180 background: linear-gradient(90deg, rgba(127, 90, 240, 0.1), transparent);181 }182 183 .nav-item.active::before {184 transform: translateY(-50%) scaleX(1);185 box-shadow: 0 0 10px var(--primary);186 }187 188 .nav-icon {189 font-size: 1.2rem;190 width: 30px;191 text-align: center;192 z-index: 2;193 }194 195 .menu-text {196 margin-left: 15px;197 opacity: 0;198 width: 0;199 transform: translateX(-10px);200 transition: all 0.4s ease;201 white-space: nowrap;202 font-weight: 500;203 font-size: 0.95rem;204 z-index: 2;205 }206 207 .sidebar:hover .menu-text {208 opacity: 1;209 width: auto;210 transform: translateX(0);211 }212 213 /* --- Main Content --- */214 .main-content {215 flex: 1;216 display: flex;217 flex-direction: column;218 position: relative;219 overflow: hidden;220 padding: 20px;221 }222 223 /* Top Bar */224 .top-bar {225 height: 70px;226 background: var(--bg-glass);227 border: 1px solid var(--border);228 border-radius: 16px;229 display: flex;230 justify-content: space-between;231 align-items: center;232 padding: 0 25px;233 backdrop-filter: blur(12px);234 margin-bottom: 20px;235 box-shadow: var(--shadow-sm);236 }237 238 .page-header h2 {239 font-weight: 600;240 font-size: 1.2rem;241 letter-spacing: -0.5px;242 }243 244 .page-header p {245 font-size: 0.8rem;246 color: var(--text-secondary);247 margin-top: 2px;248 }249 250 .user-profile {251 display: flex;252 align-items: center;253 gap: 20px;254 }255 256 .stats-group {257 display: flex;258 align-items: center;259 gap: 15px;260 background: rgba(0,0,0,0.2);261 padding: 8px 16px;262 border-radius: 30px;263 border: 1px solid var(--border);264 }265 266 .streak-counter {267 display: flex;268 align-items: center;269 gap: 8px;270 color: var(--accent);271 font-weight: 700;272 font-size: 0.9rem;273 }274 275 .fire-icon {276 animation: flicker 2s infinite alternate;277 }278 279 @keyframes flicker {280 0% { opacity: 0.8; transform: scale(1); }281 100% { opacity: 1; transform: scale(1.1); text-shadow: 0 0 10px var(--accent); }282 }283 284 .xp-container {285 display: flex;286 flex-direction: column;287 gap: 4px;288 min-width: 120px;289 }290 291 .xp-text {292 font-size: 0.7rem;293 color: var(--text-secondary);294 display: flex;295 justify-content: space-between;296 }297 298 .xp-bar-bg {299 width: 100%;300 height: 6px;301 background: rgba(255, 255, 255, 0.1);302 border-radius: 3px;303 overflow: hidden;304 }305 306 .xp-bar-fill {307 height: 100%;308 background: linear-gradient(90deg, var(--primary), var(--secondary));309 border-radius: 3px;310 width: 0%;311 transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);312 position: relative;313 }314 315 .xp-bar-fill::after {316 content: '';317 position: absolute;318 top: 0;319 left: 0;320 right: 0;321 bottom: 0;322 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);323 transform: translateX(-100%);324 animation: shimmer 2s infinite;325 }326 327 @keyframes shimmer {328 100% { transform: translateX(100%); }329 }330 331 .avatar {332 width: 40px;333 height: 40px;334 border-radius: 50%;335 background: linear-gradient(45deg, var(--primary), var(--accent));336 display: flex;337 align-items: center;338 justify-content: center;339 color: white;340 font-weight: bold;341 box-shadow: 0 0 0 2px var(--bg-panel);342 }343 344 /* --- Views --- */345 .view-container {346 flex: 1;347 position: relative;348 overflow: hidden; /* For transitions */349 background: rgba(0,0,0,0.1);350 border-radius: 20px;351 border: 1px solid var(--border);352 }353 354 .view {355 position: absolute;356 top: 0;357 left: 0;358 width: 100%;359 height: 100%;360 padding: 30px;361 overflow-y: auto;362 opacity: 0;363 transform: translateY(20px) scale(0.98);364 transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);365 pointer-events: none;366 background: transparent;367 }368 369 .view.active {370 opacity: 1;371 transform: translateY(0) scale(1);372 pointer-events: all;373 }374 375 /* --- Diagnostic View --- */376 .diagnostic-wrapper {377 max-width: 500px;378 margin: 40px auto;379 text-align: center;380 }381 382 .glass-card {383 background: var(--bg-glass);384 border: 1px solid var(--glass-border);385 padding: 40px;386 border-radius: 24px;387 backdrop-filter: blur(20px);388 box-shadow: var(--shadow-lg);389 position: relative;390 overflow: hidden;391 }392 393 .glass-card::before {394 content: '';395 position: absolute;396 top: -50%;397 left: -50%;398 width: 200%;399 height: 200%;400 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);401 transform: rotate(30deg);402 pointer-events: none;403 }404 405 .progress-dots {406 display: flex;407 justify-content: center;408 gap: 8px;409 margin-bottom: 30px;410 }411 412 .dot {413 width: 8px;414 height: 8px;415 border-radius: 50%;416 background: rgba(255,255,255,0.1);417 transition: 0.3s;418 }419 420 .dot.active {421 background: var(--primary);422 box-shadow: 0 0 10px var(--primary);423 }424 425 .option-btn {426 display: block;427 width: 100%;428 padding: 16px 20px;429 margin: 12px 0;430 background: rgba(255, 255, 255, 0.03);431 border: 1px solid var(--border);432 color: var(--text-main);433 border-radius: 14px;434 cursor: pointer;435 transition: all 0.2s;436 text-align: left;437 font-size: 0.95rem;438 position: relative;439 overflow: hidden;440 }441 442 .option-btn:hover {443 background: rgba(127, 90, 240, 0.15);444 border-color: var(--primary);445 transform: translateX(5px);446 }447 448 .option-btn::after {449 content: '→';450 position: absolute;451 right: 20px;452 opacity: 0;453 transform: translateX(-10px);454 transition: 0.2s;455 }456 457 .option-btn:hover::after {458 opacity: 1;459 transform: translateX(0);460 }461 462 /* --- Dashboard View --- */463 .dashboard-grid {464 display: grid;465 grid-template-columns: 2.5fr 1fr;466 gap: 25px;467 height: 100%;468 }469 470 .path-card {471 background: var(--bg-glass);472 border-radius: 20px;473 padding: 30px;474 border: 1px solid var(--border);475 display: flex;476 flex-direction: column;477 }478 479 .skill-tree {480 margin-top: 20px;481 position: relative;482 padding-left: 10px;483 }484 485 /* The Vertical Line */486 .skill-tree::before {487 content: '';488 position: absolute;489 left: 29px;490 top: 20px;491 bottom: 20px;492 width: 2px;493 background: rgba(255,255,255,0.1);494 z-index: 0;495 }496 497 .skill-node {498 display: flex;499 align-items: center;500 padding: 20px;501 margin-bottom: 15px;502 background: rgba(255, 255, 255, 0.02);503 border-radius: 16px;504 cursor: pointer;505 transition: 0.3s;506 position: relative;507 z-index: 1;508 border: 1px solid transparent;509 }510 511 .skill-node:hover {512 background: rgba(255, 255, 255, 0.05);513 transform: translateX(5px);514 }515 516 .skill-node.completed {517 opacity: 0.5;518 }519 520 .skill-node.current {521 background: linear-gradient(135deg, rgba(127, 90, 240, 0.2), rgba(127, 90, 240, 0.05));522 border: 1px solid rgba(127, 90, 240, 0.3);523 box-shadow: 0 0 20px rgba(127, 90, 240, 0.1);524 }525 526 .node-icon-wrapper {527 width: 60px;528 height: 60px;529 border-radius: 50%;530 background: var(--bg-panel);531 display: flex;532 align-items: center;533 justify-content: center;534 margin-right: 20px;535 border: 2px solid var(--border);536 transition: 0.3s;537 position: relative;538 }539 540 .skill-node.current .node-icon-wrapper {541 border-color: var(--primary);542 box-shadow: 0 0 15px var(--primary);543 animation: pulseBorder 2s infinite;544 }545 546 @keyframes pulseBorder {547 0% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0.4); }548 70% { box-shadow: 0 0 0 10px rgba(127, 90, 240, 0); }549 100% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0); }550 }551 552 .node-icon {553 font-size: 1.2rem;554 color: var(--text-secondary);555 }556 557 .skill-node.current .node-icon {558 color: var(--text-main);559 }560 561 .node-content h4 {562 font-size: 1rem;563 margin-bottom: 4px;564 }565 566 .node-content small {567 color: var(--text-secondary);568 font-size: 0.85rem;569 }570 571 .stats-panels {572 display: flex;573 flex-direction: column;574 gap: 20px;575 }576 577 .stat-box {578 background: var(--bg-glass);579 padding: 25px;580 border-radius: 20px;581 text-align: center;582 border: 1px solid var(--border);583 transition: 0.3s;584 }585 586 .stat-box:hover {587 transform: translateY(-5px);588 border-color: var(--primary);589 }590 591 .stat-icon {592 font-size: 1.5rem;593 margin-bottom: 10px;594 color: var(--primary);595 }596 597 .stat-value {598 font-size: 2rem;599 font-weight: 700;600 background: linear-gradient(to right, #fff, #aaa);601 -webkit-background-clip: text;602 -webkit-text-fill-color: transparent;603 }604 605 .stat-label {606 font-size: 0.85rem;607 color: var(--text-secondary);608 margin-top: 5px;609 text-transform: uppercase;610 letter-spacing: 1px;611 }612 613 /* --- Classroom View --- */614 .classroom-container {615 display: grid;616 grid-template-columns: 1fr 1.2fr;617 gap: 25px;618 height: 100%;619 }620 621 .instructions {622 background: var(--bg-glass);623 border-radius: 20px;624 padding: 30px;625 border: 1px solid var(--border);626 display: flex;627 flex-direction: column;628 }629 630 .code-workspace {631 background: #0f0e17; /* Darker for editor */632 border-radius: 20px;633 border: 1px solid var(--border);634 display: flex;635 flex-direction: column;636 overflow: hidden;637 position: relative;638 }639 640 .editor-header {641 background: #181824;642 padding: 12px 20px;643 display: flex;644 align-items: center;645 border-bottom: 1px solid var(--border);646 }647 648 .tab {649 background: rgba(255,255,255,0.05);650 padding: 6px 16px;651 border-radius: 6px;652 font-size: 0.85rem;653 color: var(--text-secondary);654 display: flex;655 align-items: center;656 gap: 8px;657 }658 659 .tab.active {660 background: var(--bg-body);661 color: var(--text-main);662 border: 1px solid var(--border);663 }664 665 .editor-body {666 flex: 1;667 padding: 20px;668 font-family: 'JetBrains Mono', monospace;669 color: #d4d4d4;670 font-size: 0.95rem;671 line-height: 1.6;672 overflow: auto;673 }674 675 textarea.code-input {676 width: 100%;677 height: 100%;678 background: transparent;679 border: none;680 color: inherit;681 font-family: inherit;682 font-size: inherit;683 resize: none;684 outline: none;685 display: block;686 }687 688 .editor-footer {689 background: #181824;690 padding: 15px 20px;691 border-top: 1px solid var(--border);692 display: flex;693 justify-content: space-between;694 align-items: center;695 }696 697 .console-output {698 font-family: 'JetBrains Mono', monospace;699 font-size: 0.85rem;700 color: var(--text-secondary);701 }702 703 .run-btn {704 background: var(--success);705 color: #000;706 font-weight: 700;707 border: none;708 padding: 10px 24px;709 border-radius: 8px;710 cursor: pointer;711 transition: 0.2s;712 display: flex;713 align-items: center;714 gap: 8px;715 box-shadow: 0 4px 15px rgba(44, 182, 125, 0.3);716 }717 718 .run-btn:hover {719 transform: scale(1.05);720 background: #25d37b;721 }722 723 .run-btn:active {724 transform: scale(0.95);725 }726 727 /* --- Mentor View --- */728 .mentor-wrapper {729 height: 100%;730 display: grid;731 grid-template-rows: 1fr auto;732 background: var(--bg-glass);733 border-radius: 20px;734 border: 1px solid var(--border);735 overflow: hidden;736 }737 738 .chat-stream {739 padding: 25px;740 overflow-y: auto;741 display: flex;742 flex-direction: column;743 gap: 20px;744 }745 746 .message {747 max-width: 80%;748 padding: 16px 20px;749 border-radius: 18px;750 font-size: 0.95rem;751 line-height: 1.5;752 position: relative;753 animation: messageIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;754 }755 756 @keyframes messageIn {757 from { opacity: 0; transform: translateY(10px); }758 to { opacity: 1; transform: translateY(0); }759 }760 761 .msg-ai {762 align-self: flex-start;763 background: rgba(255, 255, 255, 0.05);764 border-bottom-left-radius: 4px;765 border: 1px solid var(--border);766 }767 768 .msg-user {769 align-self: flex-end;770 background: var(--primary);771 color: white;772 border-bottom-right-radius: 4px;773 box-shadow: 0 5px 15px rgba(127, 90, 240, 0.2);774 }775 776 .chat-input-area {777 padding: 20px;778 background: rgba(0,0,0,0.2);779 border-top: 1px solid var(--border);780 display: flex;781 gap: 10px;782 }783 784 .ai-input {785 flex: 1;786 background: rgba(255,255,255,0.05);787 border: 1px solid var(--border);788 padding: 12px 20px;789 border-radius: 30px;790 color: white;791 outline: none;792 transition: 0.3s;793 }794 795 .ai-input:focus {796 border-color: var(--primary);797 background: rgba(255,255,255,0.08);798 }799 800 .send-btn {801 width: 45px;802 height: 45px;803 border-radius: 50%;804 background: var(--primary);805 border: none;806 color: white;807 cursor: pointer;808 transition: 0.3s;809 display: flex;810 align-items: center;811 justify-content: center;812 }813 814 .send-btn:hover {815 transform: scale(1.1);816 box-shadow: 0 0 15px var(--primary);817 }818 819 /* --- Loading Screen --- */820 .loader-screen {821 position: fixed;822 top: 0;823 left: 0;824 width: 100%;825 height: 100%;826 background: var(--bg-body);827 z-index: 9999;828 display: flex;829 flex-direction: column;830 justify-content: center;831 align-items: center;832 transition: opacity 0.6s ease, visibility 0.6s;833 }834 835 .loader-screen.fade-out {836 opacity: 0;837 visibility: hidden;838 }839 840 .loader-ring {841 width: 60px;842 height: 60px;843 border: 3px solid transparent;844 border-top-color: var(--primary);845 border-radius: 50%;846 animation: spin 1s linear infinite;847 margin-bottom: 20px;848 position: relative;849 }850 851 .loader-ring::after {852 content: '';853 position: absolute;854 top: 5px; left: 5px; right: 5px; bottom: 5px;855 border-radius: 50%;856 border: 3px solid transparent;857 border-top-color: var(--secondary);858 animation: spin 2s linear infinite reverse;859 }860 861 .loader-text {862 color: var(--text-secondary);863 font-size: 0.9rem;864 letter-spacing: 1px;865 animation: pulseText 1.5s infinite;866 }867 868 @keyframes pulseText {869 0%, 100% { opacity: 0.5; }870 50% { opacity: 1; }871 }872 873 /* Built With Footer */874 .built-with {875 position: absolute;876 bottom: 15px;877 right: 25px;878 font-size: 0.75rem;879 color: rgba(255,255,255,0.2);880 z-index: 50;881 text-transform: uppercase;882 letter-spacing: 1px;883 }884 885 .built-with a {886 color: var(--primary);887 text-decoration: none;888 font-weight: 600;889 transition: 0.3s;890 }891 892 .built-with a:hover {893 text-shadow: 0 0 8px var(--primary);894 }895 896 /* Responsive */897 @media (max-width: 900px) {898 .dashboard-grid, .classroom-container {899 grid-template-columns: 1fr;900 }901 902 .sidebar {903 width: 60px;904 }905 906 .sidebar:hover {907 width: 60px; /* Disable expand on mobile */908 }909 910 .menu-text { display: none; }911 912 .stats-group {913 padding: 5px 10px;914 gap: 10px;915 }916 917 .xp-container { display: none; }918 }919 </style>920</head>921 922<body>923 924 <!-- Loading Screen -->925 <div class="loader-screen" id="loader">926 <div class="loader-ring"></div>927 <div class="loader-text" id="loader-text">Carregando CodePath...</div>928 </div>929 930 <!-- Sidebar -->931 <nav class="sidebar">932 <div class="logo-container">933 <div class="logo" onclick="navTo('dashboard')">934 <i class="fa-solid fa-code-branch"></i>935 </div>936 </div>937 938 <div class="nav-item active" onclick="navTo('dashboard')" id="nav-dashboard">939 <div class="nav-icon"><i class="fa-solid fa-sparkles"></i></div>940 <div class="menu-text">Painel</div>941 </div>942 943 <div class="nav-item" onclick="navTo('classroom')" id="nav-classroom">944 <div class="nav-icon"><i class="fa-solid fa-terminal"></i></div>945 <div class="menu-text">Praticar</div>946 </div>947 948 <div class="nav-item" onclick="navTo('mentor')" id="nav-mentor">949 <div class="nav-icon"><i class="fa-solid fa-brain"></i></div>950 <div class="menu-text">Mentor AI</div>951 </div>952 953 <div class="nav-item" onclick="navTo('diagnostic')" id="nav-diagnostic">954 <div class="nav-icon"><i class="fa-solid fa-sliders"></i></div>955 <div class="menu-text">Config.</div>956 </div>957 </nav>958 959 <!-- Main Content -->960 <main class="main-content">961 <header class="top-bar">962 <div class="page-header">963 <h2 id="page-title">Dashboard</h2>964 <p id="page-subtitle">Continue sua jornada de aprendizado</p>965 </div>966 967 <div class="user-profile">968 <div class="stats-group">969 <div class="xp-container">970 <div class="xp-text">971 <span>XP</span>972 <span id="xp-val">1450/2000</span>973 </div>974 <div class="xp-bar-bg">975 <div class="xp-bar-fill" id="xp-fill"></div>976 </div>977 </div>978 <div class="streak-counter">979 <i class="fa-solid fa-fire fire-icon"></i> <span id="streak-count">12</span>980 </div>981 </div>982 <div class="avatar">983 <i class="fa-solid fa-user"></i>984 </div>985 </div>986 </header>987 988 <div class="view-container">989 990 <!-- View 1: Diagnostic (Reutilizado como configuração/status inicial) -->991 <div class="view" id="diagnostic-view">992 <div class="diagnostic-wrapper">993 <div class="glass-card">994 <h2 style="margin-bottom: 10px;">Análise de Progresso</h2>995 <p style="color: var(--text-secondary); margin-bottom: 30px;">Revise suas configurações de aprendizado.</p>996 997 <div class="progress-dots">998 <div class="dot active"></div>999 <div class="dot"></div>1000 <div class="dot"></div>1001 </div>1002 1003 <button class="option-btn" onclick="navTo('dashboard')">1004 <i class="fa-solid fa-user-astronaut" style="margin-right: 10px; color: var(--primary)"></i> Perfil Público1005 </button>1006 <button class="option-btn" onclick="navTo('dashboard')">1007 <i class="fa-solid fa-bell" style="margin-right: 10px; color: var(--accent)"></i> Notificações1008 </button>1009 <button class="option-btn" onclick="navTo('dashboard')">1010 <i class="fa-solid fa-palette" style="margin-right: 10px; color: var(--secondary)"></i> Aparência1011 </button>1012 </div>1013 </div>1014 </div>1015 1016 <!-- View 2: Dashboard -->1017 <div class="view active" id="dashboard-view">1018 <div class="dashboard-grid">1019 <div class="path-card">1020 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">1021 <h3><i class="fa-solid fa-map" style="margin-right: 10px; color: var(--primary)"></i> Trilha Atual</h3>1022 <span style="font-size: 0.8rem; padding: 4px 12px; background: rgba(44, 182, 125, 0.1); color: var(--secondary); border-radius: 20px;">Python Intermediário</span>1023 </div>1024 1025 <div class="skill-tree">1026 <!-- Node 1 -->1027 <div class="skill-node completed">1028 <div class="node-icon-wrapper">1029 <i class="fa-solid fa-check node-icon"></i>1030 </div>1031 <div class="node-content">1032 <h4>Lógica de Programação</h4>1033 <small>Concluído em 12/10/2023</small>1034 </div>1035 </div>1036 1037 <!-- Node 2 -->1038 <div class="skill-node current">1039 <div class="node-icon-wrapper">1040 <i class="fa-solid fa-bolt node-icon"></i>1041 </div>1042 <div class="node-content">1043 <h4>Estruturas de Dados</h4>1044 <small>Listas, Tuplas e Dicionários</small>1045 <div style="margin-top: 8px; height: 4px; width: 100px; background: rgba(255,255,255,0.1); border-radius: 2px;">1046 <div style="height: 100%; width: 65%; background: var(--primary); border-radius: 2px;"></div>1047 </div>1048 </div>1049 </div>1050 1051 <!-- Node 3 -->1052 <div class="skill-node">1053 <div class="node-icon-wrapper">1054 <i class="fa-solid fa-lock node-icon"></i>1055 </div>1056 <div class="node-content">1057 <h4>Programação Orientada a Objetos</h4>1058 <small>Classes e Herança</small>1059 </div>1060 </div>1061 1062 <!-- Node 4 -->1063 <div class="skill-node">1064 <div class="node-icon-wrapper">1065 <i class="fa-solid fa-lock node-icon"></i>1066 </div>1067 <div class="node-content">1068 <h4>Banco de Dados SQL</h4>1069 <small>SQLite e PostgreSQL</small>1070 </div>1071 </div>1072 </div>1073 </div>1074 1075 <div class="stats-panels">1076 <div class="stat-box">1077 <div class="stat-icon"><i class="fa-solid fa-trophy"></i></div>1078 <div class="stat-value">8</div>1079 <div class="stat-label">Nível Atual</div>1080 </div>1081 <div class="stat-box">1082 <div class="stat-icon"><i class="fa-solid fa-star"></i></div>1083 <div class="stat-value">1450</div>1084 <div class="stat-label">XP Total</div>1085 </div>1086 <div class="stat-box">1087 <div class="stat-icon"><i class="fa-solid fa-medal"></i></div>1088 <div class="stat-value">5</div>1089 <div class="stat-label">Conquistas</div>1090 </div>1091 </div>1092 </div>1093 </div>1094 1095 <!-- View 3: Classroom -->1096 <div class="view" id="classroom-view">1097 <div class="classroom-container">1098 <div class="instructions">1099 <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">1100 <span style="color: var(--accent); font-weight: bold;">MÓDULO 2.1</span>1101 <div style="flex: 1; height: 1px; background: var(--border);"></div>1102 </div>1103 1104 <h2 style="margin-bottom: 15px; font-size: 1.5rem;">Desafio: Listas em Python</h2>1105 <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 25px;">1106 Crie uma função chamada <code style="color: var(--primary);">media_notas</code> que recebe uma lista de números e retorna a média aritmética.1107 </p>1108 1109 <div style="background: rgba(127, 90, 240, 0.1); padding: 15px; border-radius: 12px; border-left: 4px solid var(--primary); margin-bottom: 20px;">1110 <strong style="color: var(--primary);">Instruções:</strong>1111 <ul style="margin-top: 10px; padding-left: 20px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.8;">1112 <li>Use a função <code>sum(lista)</code> para somar.</li>1113 <li>Divida pelo tamanho da lista usando <code>len(lista)</code>.</li>1114 <li>Retorne o resultado.</li>1115 </ul>1116 </div>1117 1118 <div style="margin-top: auto; background: #111; padding: 15px; border-radius: 12px; font-family: 'Fira Code'; font-size: 0.85rem; color: var(--success);">1119 > Entrada: [8.5, 9.0, 7.5]<br>1120 > Saída esperada: 8.33...1121 </div>1122 </div>1123 1124 <div class="code-workspace">1125 <div class="editor-header">1126 <div class="tab active"><i class="fa-brands fa-python"></i> main.py</div>1127 <div style="margin-left: auto; font-size: 0.8rem; color: var(--text-secondary);">Python 3.10</div>1128 </div>1129 <div class="editor-body">1130<textarea class="code-input" spellcheck="false">1131def media_notas(notas):1132 # Calcula a média aritmética1133 # TODO: