{"id":11,"date":"2025-08-05T06:39:41","date_gmt":"2025-08-05T06:39:41","guid":{"rendered":"http:\/\/localhost\/enthira\/index.php\/my-account\/"},"modified":"2025-08-06T07:27:20","modified_gmt":"2025-08-06T07:27:20","slug":"my-account","status":"publish","type":"page","link":"https:\/\/enthira.mo.vc\/index.php\/my-account\/","title":{"rendered":"My account"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c26cf0 e-con-full e-flex e-con e-parent\" data-id=\"8c26cf0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87516a3 elementor-widget elementor-widget-html\" data-id=\"87516a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Simplified 3-Color My Account Page for Elementor HTML Widget -->\r\n<div style=\"font-family: 'Inter', 'Segoe UI', sans-serif; line-height: 1.6; color: #1a1a1a; background: #f8f9fa; min-height: 100vh; overflow-x: hidden;\">\r\n\r\n    <!-- Hero Section -->\r\n    <div style=\"padding: 60px 0 80px; position: relative; z-index: 2;\">\r\n        <div style=\"max-width: 1200px; margin: 0 auto; padding: 0 24px;\">\r\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;\" class=\"account-hero-grid\">\r\n                <div>\r\n                    <div style=\"display: flex; align-items: center; gap: 24px; margin-bottom: 24px;\">\r\n                        <!-- Avatar -->\r\n                        <div style=\"position: relative;\">\r\n                            <div style=\"width: 100px; height: 100px; background: #ffffff; border: 2px solid #e1e5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #5624d0; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);\" onclick=\"changeAvatar()\" onmouseover=\"this.style.transform='scale(1.05)'\" onmouseout=\"this.style.transform='scale(1)'\">\r\n                                <i class=\"fas fa-user-astronaut\" id=\"userAvatar\"><\/i>\r\n                            <\/div>\r\n                            <!-- Status indicator -->\r\n                            <div style=\"position: absolute; bottom: 8px; right: 8px; width: 20px; height: 20px; background: #10b981; border: 2px solid #ffffff; border-radius: 50%; animation: pulse 2s ease-in-out infinite;\"><\/div>\r\n                        <\/div>\r\n                        \r\n                        <div>\r\n                            <h1 style=\"font-size: 2.4rem; font-weight: 800; margin-bottom: 8px; color: #1a1a1a; animation: slideInLeft 1s ease-out;\">Welcome back, Sarah!<\/h1>\r\n                            <p style=\"font-size: 1.1rem; color: #64748b; margin-bottom: 16px; animation: slideInLeft 1s ease-out 0.2s both;\">Robotics Engineer \u2022 Level 15 \u2022 Elite Member<\/p>\r\n                            <div style=\"display: flex; gap: 12px; animation: slideInLeft 1s ease-out 0.4s both;\">\r\n                                <span style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: #5624d0;\">\ud83c\udfc6 Expert Level<\/span>\r\n                                <span style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: #10b981;\">\ud83d\udd25 89 Day Streak<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div style=\"text-align: center;\">\r\n                    <!-- Progress Ring -->\r\n                    <div style=\"position: relative; width: 180px; height: 180px; margin: 0 auto; cursor: pointer;\" onclick=\"animateProgress()\">\r\n                        <svg width=\"180\" height=\"180\" style=\"transform: rotate(-90deg);\">\r\n                            <circle cx=\"90\" cy=\"90\" r=\"75\" fill=\"none\" stroke=\"#e1e5e9\" stroke-width=\"10\"><\/circle>\r\n                            <circle cx=\"90\" cy=\"90\" r=\"75\" fill=\"none\" stroke=\"#5624d0\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-dasharray=\"471\" stroke-dashoffset=\"118\" id=\"progressCircle\" style=\"transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);\"><\/circle>\r\n                        <\/svg>\r\n                        <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;\">\r\n                            <div style=\"font-size: 2.4rem; font-weight: 800; color: #1a1a1a;\" id=\"progressPercent\">75%<\/div>\r\n                            <div style=\"font-size: 0.9rem; color: #64748b; font-weight: 500;\">Overall Progress<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Stats Grid -->\r\n    <div style=\"padding: 0 0 60px; position: relative; z-index: 2;\">\r\n        <div style=\"max-width: 1200px; margin: 0 auto; padding: 0 24px;\">\r\n            <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 50px;\">\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 24px; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\" onclick=\"animateStatCard(this)\" onmouseover=\"this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0, 0, 0, 0.1)'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(0, 0, 0, 0.05)'\">\r\n                    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #10b981; border-radius: 16px 16px 0 0;\"><\/div>\r\n                    <div style=\"font-size: 2.5rem; font-weight: 800; color: #10b981; margin-bottom: 8px;\" id=\"coursesCount\">12<\/div>\r\n                    <div style=\"color: #1a1a1a; font-weight: 600; font-size: 1rem; margin-bottom: 6px;\">Courses Completed<\/div>\r\n                    <div style=\"color: #10b981; font-size: 0.85rem; font-weight: 500;\">+2 this month \u2197<\/div>\r\n                <\/div>\r\n\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 24px; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\" onclick=\"animateStatCard(this)\" onmouseover=\"this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0, 0, 0, 0.1)'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(0, 0, 0, 0.05)'\">\r\n                    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #5624d0; border-radius: 16px 16px 0 0;\"><\/div>\r\n                    <div style=\"font-size: 2.5rem; font-weight: 800; color: #5624d0; margin-bottom: 8px;\" id=\"projectsCount\">28<\/div>\r\n                    <div style=\"color: #1a1a1a; font-weight: 600; font-size: 1rem; margin-bottom: 6px;\">Projects Built<\/div>\r\n                    <div style=\"color: #5624d0; font-size: 0.85rem; font-weight: 500;\">+5 this month \u2197<\/div>\r\n                <\/div>\r\n\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 24px; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\" onclick=\"animateStatCard(this)\" onmouseover=\"this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0, 0, 0, 0.1)'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(0, 0, 0, 0.05)'\">\r\n                    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #10b981; border-radius: 16px 16px 0 0;\"><\/div>\r\n                    <div style=\"font-size: 2.5rem; font-weight: 800; color: #10b981; margin-bottom: 8px;\" id=\"certificatesCount\">8<\/div>\r\n                    <div style=\"color: #1a1a1a; font-weight: 600; font-size: 1rem; margin-bottom: 6px;\">Certificates Earned<\/div>\r\n                    <div style=\"color: #10b981; font-size: 0.85rem; font-weight: 500;\">+1 this month \u2197<\/div>\r\n                <\/div>\r\n\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; padding: 24px; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\" onclick=\"animateStatCard(this)\" onmouseover=\"this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0, 0, 0, 0.1)'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(0, 0, 0, 0.05)'\">\r\n                    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #5624d0; border-radius: 16px 16px 0 0;\"><\/div>\r\n                    <div style=\"font-size: 2.5rem; font-weight: 800; color: #5624d0; margin-bottom: 8px;\" id=\"streakCount\">89<\/div>\r\n                    <div style=\"color: #1a1a1a; font-weight: 600; font-size: 1rem; margin-bottom: 6px;\">Day Learning Streak<\/div>\r\n                    <div style=\"color: #5624d0; font-size: 0.85rem; font-weight: 500;\">Keep it up! \ud83d\udd25<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Navigation Tabs -->\r\n    <div style=\"padding: 30px 0 50px; position: relative; z-index: 2;\">\r\n        <div style=\"max-width: 1200px; margin: 0 auto; padding: 0 24px;\">\r\n            \r\n            <!-- Tab Container -->\r\n            <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 6px; margin-bottom: 50px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                <button onclick=\"showSection('dashboard')\" style=\"padding: 12px 24px; background: #5624d0; color: white; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem;\" class=\"nav-tab active\" id=\"tab-dashboard\">\r\n                    <i class=\"fas fa-chart-line\" style=\"margin-right: 6px;\"><\/i>Dashboard\r\n                <\/button>\r\n                <button onclick=\"showSection('courses')\" style=\"padding: 12px 24px; background: transparent; color: #64748b; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem;\" class=\"nav-tab\" id=\"tab-courses\">\r\n                    <i class=\"fas fa-graduation-cap\" style=\"margin-right: 6px;\"><\/i>My Courses\r\n                <\/button>\r\n                <button onclick=\"showSection('progress')\" style=\"padding: 12px 24px; background: transparent; color: #64748b; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem;\" class=\"nav-tab\" id=\"tab-progress\">\r\n                    <i class=\"fas fa-chart-bar\" style=\"margin-right: 6px;\"><\/i>Progress\r\n                <\/button>\r\n                <button onclick=\"showSection('certificates')\" style=\"padding: 12px 24px; background: transparent; color: #64748b; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem;\" class=\"nav-tab\" id=\"tab-certificates\">\r\n                    <i class=\"fas fa-award\" style=\"margin-right: 6px;\"><\/i>Certificates\r\n                <\/button>\r\n                <button onclick=\"showSection('settings')\" style=\"padding: 12px 24px; background: transparent; color: #64748b; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem;\" class=\"nav-tab\" id=\"tab-settings\">\r\n                    <i class=\"fas fa-cog\" style=\"margin-right: 6px;\"><\/i>Settings\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Dashboard Section -->\r\n            <div id=\"section-dashboard\" class=\"content-section\">\r\n                <div style=\"display: grid; grid-template-columns: 2fr 1fr; gap: 30px;\" class=\"dashboard-grid\">\r\n                    <div>\r\n                        <!-- Current Learning Path -->\r\n                        <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 28px; margin-bottom: 28px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                            <h3 style=\"font-size: 1.8rem; font-weight: 800; margin-bottom: 24px; color: #1a1a1a;\">Current Learning Path<\/h3>\r\n                            \r\n                            <div style=\"background: #5624d0; border-radius: 16px; padding: 24px; color: white; margin-bottom: 24px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;\" onclick=\"continueCourse('ai-robotics')\" onmouseover=\"this.style.transform='translateY(-3px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                                \r\n                                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\r\n                                    <div>\r\n                                        <h4 style=\"font-size: 1.3rem; font-weight: 700; margin-bottom: 6px;\">AI in Robotics: Machine Learning<\/h4>\r\n                                        <p style=\"opacity: 0.9; font-size: 0.95rem;\">Dr. James Anderson \u2022 Module 8 of 14<\/p>\r\n                                    <\/div>\r\n                                    <div style=\"font-size: 3rem; opacity: 0.2;\">\r\n                                        <i class=\"fas fa-brain\"><\/i>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                \r\n                                <!-- Progress bar -->\r\n                                <div style=\"background: rgba(255,255,255,0.2); border-radius: 10px; height: 8px; margin-bottom: 12px;\">\r\n                                    <div style=\"background: #10b981; height: 100%; border-radius: 10px; width: 57%; transition: width 1.5s ease;\" id=\"courseProgress\"><\/div>\r\n                                <\/div>\r\n                                \r\n                                <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                                    <span style=\"font-size: 0.95rem; opacity: 0.95; font-weight: 600;\">57% Complete<\/span>\r\n                                    <button style=\"background: rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\" onmouseover=\"this.style.background='rgba(255,255,255,0.3)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.2)'\">Continue Learning \u2192<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Recent Activity -->\r\n                        <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 28px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                            <h3 style=\"font-size: 1.8rem; font-weight: 800; margin-bottom: 24px; color: #1a1a1a;\">Recent Activity<\/h3>\r\n                            \r\n                            <div>\r\n                                <div style=\"display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; margin-bottom: 16px; background: #ffffff; border: 1px solid #e1e5e9;\" onmouseover=\"this.style.transform='translateX(6px)'; this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.transform='translateX(0)'; this.style.backgroundColor='#ffffff'\">\r\n                                    <div style=\"width: 44px; height: 44px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;\">\r\n                                        <i class=\"fas fa-trophy\"><\/i>\r\n                                    <\/div>\r\n                                    <div style=\"flex: 1;\">\r\n                                        <h4 style=\"font-weight: 700; margin-bottom: 4px; color: #1a1a1a; font-size: 1rem;\">Certificate Earned!<\/h4>\r\n                                        <p style=\"color: #64748b; font-size: 0.9rem;\">Completed \"Computer Vision Fundamentals\" course<\/p>\r\n                                    <\/div>\r\n                                    <span style=\"color: #64748b; font-size: 0.8rem; font-weight: 500;\">2 hours ago<\/span>\r\n                                <\/div>\r\n\r\n                                <div style=\"display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; margin-bottom: 16px; background: #ffffff; border: 1px solid #e1e5e9;\" onmouseover=\"this.style.transform='translateX(6px)'; this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.transform='translateX(0)'; this.style.backgroundColor='#ffffff'\">\r\n                                    <div style=\"width: 44px; height: 44px; background: #5624d0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;\">\r\n                                        <i class=\"fas fa-robot\"><\/i>\r\n                                    <\/div>\r\n                                    <div style=\"flex: 1;\">\r\n                                        <h4 style=\"font-weight: 700; margin-bottom: 4px; color: #1a1a1a; font-size: 1rem;\">Project Completed<\/h4>\r\n                                        <p style=\"color: #64748b; font-size: 0.9rem;\">Built \"Line Following Robot\" project<\/p>\r\n                                    <\/div>\r\n                                    <span style=\"color: #64748b; font-size: 0.8rem; font-weight: 500;\">1 day ago<\/span>\r\n                                <\/div>\r\n\r\n                                <div style=\"display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; background: #ffffff; border: 1px solid #e1e5e9;\" onmouseover=\"this.style.transform='translateX(6px)'; this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.transform='translateX(0)'; this.style.backgroundColor='#ffffff'\">\r\n                                    <div style=\"width: 44px; height: 44px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;\">\r\n                                        <i class=\"fas fa-code\"><\/i>\r\n                                    <\/div>\r\n                                    <div style=\"flex: 1;\">\r\n                                        <h4 style=\"font-weight: 700; margin-bottom: 4px; color: #1a1a1a; font-size: 1rem;\">Quiz Mastered<\/h4>\r\n                                        <p style=\"color: #64748b; font-size: 0.9rem;\">Scored 92% on Arduino Programming Quiz<\/p>\r\n                                    <\/div>\r\n                                    <span style=\"color: #64748b; font-size: 0.8rem; font-weight: 500;\">3 days ago<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Sidebar -->\r\n                    <div>\r\n                        <!-- Achievements -->\r\n                        <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                            <h4 style=\"font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; color: #1a1a1a; text-align: center;\">Latest Achievements<\/h4>\r\n                            <div style=\"display: flex; justify-content: center; gap: 12px; margin-bottom: 16px;\">\r\n                                <div style=\"width: 56px; height: 56px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; cursor: pointer; transition: all 0.3s ease;\" onclick=\"showAchievement('streak')\" onmouseover=\"this.style.transform='scale(1.1) rotate(8deg)'\" onmouseout=\"this.style.transform='scale(1) rotate(0deg)'\">\r\n                                    <i class=\"fas fa-fire\"><\/i>\r\n                                <\/div>\r\n                                <div style=\"width: 56px; height: 56px; background: #5624d0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; cursor: pointer; transition: all 0.3s ease;\" onclick=\"showAchievement('expert')\" onmouseover=\"this.style.transform='scale(1.1) rotate(8deg)'\" onmouseout=\"this.style.transform='scale(1) rotate(0deg)'\">\r\n                                    <i class=\"fas fa-star\"><\/i>\r\n                                <\/div>\r\n                                <div style=\"width: 56px; height: 56px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; cursor: pointer; transition: all 0.3s ease;\" onclick=\"showAchievement('builder')\" onmouseover=\"this.style.transform='scale(1.1) rotate(8deg)'\" onmouseout=\"this.style.transform='scale(1) rotate(0deg)'\">\r\n                                    <i class=\"fas fa-hammer\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <p style=\"color: #64748b; font-size: 0.9rem; text-align: center; font-weight: 500;\">Click badges to view details<\/p>\r\n                        <\/div>\r\n\r\n                        <!-- Learning Streak -->\r\n                        <div style=\"background: #5624d0; border-radius: 16px; padding: 24px; color: white; margin-bottom: 24px;\">\r\n                            <h4 style=\"font-size: 1.4rem; font-weight: 800; margin-bottom: 16px; text-align: center;\">\ud83d\udd25 Learning Streak<\/h4>\r\n                            <div style=\"text-align: center; margin-bottom: 16px;\">\r\n                                <div style=\"font-size: 3rem; font-weight: 800; margin-bottom: 6px;\">89<\/div>\r\n                                <p style=\"opacity: 0.9; font-size: 1rem; font-weight: 600;\">Consecutive Days<\/p>\r\n                            <\/div>\r\n                            <div style=\"display: flex; justify-content: center; gap: 4px;\">\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.9); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.9); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.9); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.4); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.4); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.4); border-radius: 4px;\"><\/div>\r\n                                <div style=\"width: 20px; height: 20px; background: rgba(255,255,255,0.4); border-radius: 4px;\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Quick Actions -->\r\n                        <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 24px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                            <h4 style=\"font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; color: #1a1a1a;\">Quick Actions<\/h4>\r\n                            <div>\r\n                                <button onclick=\"quickAction('newCourse')\" style=\"width: 100%; padding: 14px; background: #5624d0; color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px; font-size: 0.95rem;\" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.backgroundColor='#4c1d95'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.backgroundColor='#5624d0'\">\r\n                                    <i class=\"fas fa-plus\" style=\"margin-right: 8px;\"><\/i>Browse New Courses\r\n                                <\/button>\r\n                                <button onclick=\"quickAction('downloadCert')\" style=\"width: 100%; padding: 14px; background: #10b981; color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px; font-size: 0.95rem;\" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.backgroundColor='#059669'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.backgroundColor='#10b981'\">\r\n                                    <i class=\"fas fa-download\" style=\"margin-right: 8px;\"><\/i>Download Certificates\r\n                                <\/button>\r\n                                <button onclick=\"quickAction('shareProgress')\" style=\"width: 100%; padding: 14px; background: #64748b; color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.95rem;\" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.backgroundColor='#475569'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.backgroundColor='#64748b'\">\r\n                                    <i class=\"fas fa-share\" style=\"margin-right: 8px;\"><\/i>Share Progress\r\n                                <\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Courses Section -->\r\n            <div id=\"section-courses\" class=\"content-section\" style=\"display: none;\">\r\n                <h2 style=\"font-size: 2.2rem; font-weight: 800; margin-bottom: 30px; color: #1a1a1a; text-align: center;\">My Learning Journey<\/h2>\r\n                \r\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;\">\r\n                    <!-- Course Card -->\r\n                    <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\" onclick=\"openCourse('ai-robotics')\" onmouseover=\"this.style.transform='translateY(-6px)'; this.style.boxShadow='0 8px 20px rgba(0, 0, 0, 0.1)'\" onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 3px 12px rgba(0, 0, 0, 0.05)'\">\r\n                        <div style=\"height: 140px; background: #5624d0; display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; position: relative;\">\r\n                            <i class=\"fas fa-brain\"><\/i>\r\n                            <div style=\"position: absolute; top: 16px; right: 16px; background: #ffffff; color: #10b981; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;\">57% Complete<\/div>\r\n                        <\/div>\r\n                        <div style=\"padding: 20px;\">\r\n                            <h3 style=\"font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; color: #1a1a1a;\">AI in Robotics: Machine Learning<\/h3>\r\n                            <p style=\"font-size: 0.85rem; color: #64748b; margin-bottom: 16px; font-weight: 500;\">Dr. James Anderson \u2022 8 of 14 modules complete<\/p>\r\n                            <div style=\"background: #f1f5f9; border-radius: 10px; height: 8px; margin-bottom: 16px;\">\r\n                                <div style=\"background: #5624d0; height: 100%; border-radius: 10px; width: 57%; transition: width 1.5s ease;\"><\/div>\r\n                            <\/div>\r\n                            <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                                <span style=\"font-size: 0.9rem; color: #64748b; font-weight: 600;\">Next: Neural Networks<\/span>\r\n                                <button style=\"background: #5624d0; color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\" onmouseover=\"this.style.transform='scale(1.05)'\" onmouseout=\"this.style.transform='scale(1)'\">Continue<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"section-progress\" class=\"content-section\" style=\"display: none;\">\r\n                <h2 style=\"font-size: 2.2rem; font-weight: 800; margin-bottom: 30px; color: #1a1a1a; text-align: center;\">Progress & Analytics<\/h2>\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 30px; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                    <p style=\"color: #64748b; font-size: 1.1rem;\">Progress analytics coming soon...<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"section-certificates\" class=\"content-section\" style=\"display: none;\">\r\n                <h2 style=\"font-size: 2.2rem; font-weight: 800; margin-bottom: 30px; color: #1a1a1a; text-align: center;\">Certificates & Achievements<\/h2>\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 30px; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                    <p style=\"color: #64748b; font-size: 1.1rem;\">Certificate gallery coming soon...<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"section-settings\" class=\"content-section\" style=\"display: none;\">\r\n                <h2 style=\"font-size: 2.2rem; font-weight: 800; margin-bottom: 30px; color: #1a1a1a; text-align: center;\">Account Settings<\/h2>\r\n                <div style=\"background: #ffffff; border: 1px solid #e1e5e9; border-radius: 16px; padding: 30px; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);\">\r\n                    <p style=\"color: #64748b; font-size: 1.1rem;\">Settings panel coming soon...<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\r\n\r\n\/* Animations *\/\r\n@keyframes slideInLeft {\r\n    from { opacity: 0; transform: translateX(-40px); }\r\n    to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n@keyframes pulse {\r\n    0%, 100% { transform: scale(1); opacity: 1; }\r\n    50% { transform: scale(1.1); opacity: 0.8; }\r\n}\r\n\r\n\/* Navigation tabs *\/\r\n.nav-tab:hover {\r\n    background: #f8f9fa !important;\r\n    color: #1a1a1a !important;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.nav-tab.active {\r\n    background: #5624d0 !important;\r\n    color: white !important;\r\n}\r\n\r\n\/* Responsive design *\/\r\n@media (max-width: 768px) {\r\n    .account-hero-grid { \r\n        grid-template-columns: 1fr !important; \r\n        text-align: center !important; \r\n        gap: 30px !important;\r\n    }\r\n    .dashboard-grid { \r\n        grid-template-columns: 1fr !important; \r\n        gap: 24px !important;\r\n    }\r\n    h1 { \r\n        font-size: 2rem !important; \r\n    }\r\n    .nav-tab {\r\n        padding: 10px 18px !important;\r\n        font-size: 0.85rem !important;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .account-hero-grid div:first-child > div {\r\n        flex-direction: column !important;\r\n        text-align: center !important;\r\n        gap: 16px !important;\r\n    }\r\n    h1 {\r\n        font-size: 1.7rem !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Interactive functionality\r\nlet currentSection = 'dashboard';\r\n\r\nfunction showSection(section) {\r\n    \/\/ Hide all sections\r\n    document.querySelectorAll('.content-section').forEach(sec => {\r\n        sec.style.opacity = '0';\r\n        setTimeout(() => {\r\n            sec.style.display = 'none';\r\n        }, 150);\r\n    });\r\n    \r\n    \/\/ Update navigation tabs\r\n    document.querySelectorAll('.nav-tab').forEach(tab => {\r\n        tab.classList.remove('active');\r\n        tab.style.background = 'transparent';\r\n        tab.style.color = '#64748b';\r\n    });\r\n    \r\n    \/\/ Show selected section\r\n    setTimeout(() => {\r\n        const targetSection = document.getElementById('section-' + section);\r\n        targetSection.style.display = 'block';\r\n        targetSection.style.opacity = '0';\r\n        \r\n        setTimeout(() => {\r\n            targetSection.style.opacity = '1';\r\n        }, 50);\r\n    }, 150);\r\n    \r\n    \/\/ Activate selected tab\r\n    const activeTab = document.getElementById('tab-' + section);\r\n    if (activeTab) {\r\n        activeTab.classList.add('active');\r\n        activeTab.style.background = '#5624d0';\r\n        activeTab.style.color = 'white';\r\n    }\r\n    \r\n    currentSection = section;\r\n}\r\n\r\n\/\/ Progress animation\r\nfunction animateProgress() {\r\n    const circle = document.getElementById('progressCircle');\r\n    const percent = document.getElementById('progressPercent');\r\n    \r\n    \/\/ Reset\r\n    circle.style.strokeDashoffset = '471';\r\n    percent.textContent = '0%';\r\n    \r\n    \/\/ Animate\r\n    setTimeout(() => {\r\n        circle.style.strokeDashoffset = '118';\r\n        \r\n        let current = 0;\r\n        const target = 75;\r\n        const timer = setInterval(() => {\r\n            current += 2;\r\n            if (current >= target) {\r\n                current = target;\r\n                clearInterval(timer);\r\n            }\r\n            percent.textContent = Math.floor(current) + '%';\r\n        }, 25);\r\n    }, 100);\r\n}\r\n\r\n\/\/ Stat card animation\r\nfunction animateStatCard(card) {\r\n    card.style.transform = 'translateY(-8px) scale(1.02)';\r\n    setTimeout(() => {\r\n        card.style.transform = 'translateY(0) scale(1)';\r\n    }, 300);\r\n}\r\n\r\n\/\/ Avatar cycling\r\nfunction changeAvatar() {\r\n    const avatar = document.getElementById('userAvatar');\r\n    const avatars = ['fas fa-user-astronaut', 'fas fa-robot', 'fas fa-user-ninja', 'fas fa-user-graduate'];\r\n    const currentIndex = avatars.findIndex(cls => avatar.className === cls);\r\n    const nextIndex = (currentIndex + 1) % avatars.length;\r\n    \r\n    avatar.style.transform = 'scale(0) rotate(180deg)';\r\n    setTimeout(() => {\r\n        avatar.className = avatars[nextIndex];\r\n        avatar.style.transform = 'scale(1) rotate(0deg)';\r\n    }, 150);\r\n}\r\n\r\n\/\/ Achievement popup\r\nfunction showAchievement(type) {\r\n    const achievements = {\r\n        'streak': '\ud83d\udd25 Learning Streak Master\\n89 consecutive days of learning!',\r\n        'expert': '\u2b50 Expert Level Reached\\nAdvanced Arduino programming mastery!',\r\n        'builder': '\ud83d\udd28 Project Builder Pro\\nCompleted 28 hands-on robotics projects!'\r\n    };\r\n    \r\n    alert(achievements[type] || 'Achievement unlocked!');\r\n}\r\n\r\n\/\/ Quick actions\r\nfunction quickAction(action) {\r\n    const actions = {\r\n        'newCourse': '\ud83c\udf93 Opening course catalog...',\r\n        'downloadCert': '\ud83d\udcdc Preparing certificate download...',\r\n        'shareProgress': '\ud83d\udcca Opening sharing options...'\r\n    };\r\n    \r\n    const button = event.target;\r\n    const originalText = button.innerHTML;\r\n    button.innerHTML = '<i class=\"fas fa-spinner fa-spin\" style=\"margin-right: 6px;\"><\/i>Loading...';\r\n    button.style.opacity = '0.7';\r\n    \r\n    setTimeout(() => {\r\n        button.innerHTML = originalText;\r\n        button.style.opacity = '1';\r\n        alert(actions[action] || 'Action completed!');\r\n    }, 1200);\r\n}\r\n\r\n\/\/ Course interactions\r\nfunction continueCourse(courseId) {\r\n    alert('\ud83d\ude80 Launching course interface...');\r\n}\r\n\r\nfunction openCourse(courseId) {\r\n    alert('\ud83d\udcda Opening course dashboard...');\r\n}\r\n\r\n\/\/ Initialize\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    setTimeout(() => animateProgress(), 800);\r\n});\r\n<\/script>\r\n\r\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Welcome back, Sarah! Robotics Engineer \u2022 Level 15 \u2022 Elite Member \ud83c\udfc6 Expert Level \ud83d\udd25 89 Day Streak 75% Overall [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":9,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}