{"id":1367,"date":"2025-12-07T12:26:11","date_gmt":"2025-12-07T12:26:11","guid":{"rendered":"https:\/\/demosites.royal-elementor-addons.com\/ai-image-v1\/?page_id=6"},"modified":"2026-05-08T19:46:48","modified_gmt":"2026-05-08T19:46:48","slug":"home-ai-image-v1","status":"publish","type":"page","link":"https:\/\/app.digitalfreelancer.org\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1367\" class=\"elementor elementor-1367\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53668a6 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"53668a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e6e2f09 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"e6e2f09\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76c9d27 elementor-widget elementor-widget-shortcode\" data-id=\"76c9d27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<style>\n\n\/* =========================================================\n   MY I-TECH SYSTEM \u2014 PREMIUM VISUAL\n========================================================= *\/\n\n:root{\n    --dash-bg:#060b14;\n    --dash-bg-2:#0b1322;\n    --dash-card:rgba(14,24,42,.72);\n    --dash-card-2:rgba(10,18,32,.82);\n    --dash-border:rgba(255,255,255,.09);\n    --dash-border-hover:rgba(255,122,24,.65);\n    --dash-orange:#ff7a18;\n    --dash-orange-light:#ff9b4a;\n    --dash-text:#ffffff;\n    --dash-muted:#8f9bad;\n    --dash-blue:#1497ff;\n    --dash-shadow:rgba(0,0,0,.45);\n}\n\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\nbody{\n\n    margin:0;\n\n    background:\n        radial-gradient(\n            circle at 15% 10%,\n            rgba(255,122,24,.08),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 85% 20%,\n            rgba(20,151,255,.08),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            var(--dash-bg),\n            var(--dash-bg-2)\n        );\n\n    overflow-x:hidden;\n\n    font-family:\n        Inter,\n        Arial,\n        sans-serif;\n\n    transition:\n        background .4s ease;\n\n}\n\n\n\/* =========================================================\n   BACKGROUND GLOW\n========================================================= *\/\n\nbody::before{\n\n    content:\"\";\n\n    position:fixed;\n\n    width:600px;\n    height:600px;\n\n    top:-300px;\n    left:-250px;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(255,122,24,.09),\n            transparent 68%\n        );\n\n    filter:blur(30px);\n\n    pointer-events:none;\n\n    z-index:0;\n\n}\n\nbody::after{\n\n    content:\"\";\n\n    position:fixed;\n\n    width:550px;\n    height:550px;\n\n    right:-250px;\n    bottom:-250px;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(20,151,255,.08),\n            transparent 68%\n        );\n\n    filter:blur(35px);\n\n    pointer-events:none;\n\n    z-index:0;\n\n}\n\n\n\/* =========================================================\n   TEMA CLARO\n========================================================= *\/\n\nbody.light-mode{\n\n    background:\n        radial-gradient(\n            circle at 10% 10%,\n            rgba(255,122,24,.08),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            #eef2f7,\n            #dfe6ef\n        );\n\n}\n\nbody.light-mode .dash-title,\nbody.light-mode .dash-label,\nbody.light-mode .category-main-name{\n\n    color:#111827;\n\n}\n\nbody.light-mode .dash-subtitle,\nbody.light-mode .dash-desc,\nbody.light-mode #countryInfo,\nbody.light-mode #weather,\nbody.light-mode .category-main-desc{\n\n    color:#64748b;\n\n}\n\n\n\/* =========================================================\n   CANVAS\n========================================================= *\/\n\n#mysticCanvas{\n\n    position:fixed;\n\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    z-index:0;\n\n    pointer-events:none;\n\n    opacity:.65;\n\n}\n\n\n\/* =========================================================\n   WRAP\n========================================================= *\/\n\n.dash-wrap{\n\n    position:relative;\n\n    z-index:2;\n\n    width:100%;\n\n    box-sizing:border-box;\n\n    padding:\n        55px 20px 70px;\n\n    display:flex;\n\n    flex-direction:column;\n\n    align-items:center;\n\n    gap:20px;\n\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.dash-title{\n\n    position:relative;\n\n    color:#fff;\n\n    font-size:clamp(\n        27px,\n        4vw,\n        42px\n    );\n\n    font-weight:950;\n\n    letter-spacing:\n        clamp(\n            2px,\n            .5vw,\n            6px\n        );\n\n    text-align:center;\n\n    text-shadow:\n        0 0 25px\n        rgba(255,122,24,.18);\n\n    animation:\n        titleAppear .8s ease both;\n\n}\n\n.dash-title::after{\n\n    content:\"\";\n\n    display:block;\n\n    width:80px;\n    height:3px;\n\n    margin:\n        13px auto 0;\n\n    border-radius:10px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--dash-orange),\n            transparent\n        );\n\n    box-shadow:\n        0 0 15px\n        rgba(255,122,24,.65);\n\n}\n\n.dash-subtitle{\n\n    color:#8490a3;\n\n    font-size:11px;\n\n    text-align:center;\n\n    letter-spacing:3px;\n\n    text-transform:uppercase;\n\n    margin-top:-8px;\n\n}\n\n\n\/* =========================================================\n   SMART PANEL\n========================================================= *\/\n\n.smart-panel{\n\n    position:relative;\n\n    width:100%;\n\n    max-width:1100px;\n\n    min-height:86px;\n\n    display:flex;\n\n    justify-content:space-between;\n\n    align-items:center;\n\n    gap:25px;\n\n    padding:16px 20px;\n\n    box-sizing:border-box;\n\n    border-radius:20px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.075),\n            rgba(255,255,255,.025)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.10);\n\n    backdrop-filter:\n        blur(25px)\n        saturate(140%);\n\n    -webkit-backdrop-filter:\n        blur(25px)\n        saturate(140%);\n\n    box-shadow:\n        0 20px 50px\n        rgba(0,0,0,.25),\n\n        inset 0 1px 0\n        rgba(255,255,255,.07);\n\n    overflow:hidden;\n\n}\n\n.smart-panel::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    left:0;\n\n    width:100%;\n    height:1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,122,24,.65),\n            transparent\n        );\n\n}\n\nbody.light-mode .smart-panel{\n\n    background:\n        rgba(255,255,255,.72);\n\n    border-color:\n        rgba(15,23,42,.08);\n\n    box-shadow:\n        0 15px 40px\n        rgba(15,23,42,.10);\n\n}\n\n\n\/* =========================================================\n   SMART LEFT\n========================================================= *\/\n\n.smart-left{\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:5px;\n\n}\n\n#welcome{\n\n    font-size:20px;\n\n    font-weight:850;\n\n    color:#fff;\n\n}\n\n#countryInfo{\n\n    color:#8d99aa;\n\n    font-size:12px;\n\n}\n\n\n\/* =========================================================\n   SMART CENTER\n========================================================= *\/\n\n.smart-center{\n\n    text-align:center;\n\n    padding:\n        0 20px;\n\n}\n\n#clock{\n\n    font-size:27px;\n\n    font-weight:950;\n\n    color:var(--dash-orange);\n\n    letter-spacing:2px;\n\n    text-shadow:\n        0 0 18px\n        rgba(255,122,24,.35);\n\n}\n\n#weather{\n\n    color:#8995a7;\n\n    margin-top:3px;\n\n    font-size:12px;\n\n}\n\n\n\/* =========================================================\n   SMART RIGHT\n========================================================= *\/\n\n.smart-right{\n\n    display:flex;\n\n    gap:9px;\n\n    align-items:center;\n\n}\n\n.smart-right button,\n.smart-right select{\n\n    padding:\n        10px 12px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.08);\n\n    border-radius:11px;\n\n    background:\n        rgba(255,255,255,.055);\n\n    color:#fff;\n\n    cursor:pointer;\n\n    outline:none;\n\n    transition:\n        all .25s ease;\n\n    backdrop-filter:\n        blur(10px);\n\n}\n\n.smart-right button:hover,\n.smart-right select:hover{\n\n    border-color:\n        rgba(255,122,24,.55);\n\n    background:\n        rgba(255,122,24,.10);\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 5px 20px\n        rgba(255,122,24,.10);\n\n}\n\n.smart-right button{\n\n    min-width:42px;\n\n    font-size:16px;\n\n}\n\n\n\/* =========================================================\n   CONTAINER\n========================================================= *\/\n\n.dash-container{\n\n    width:100%;\n\n    max-width:1100px;\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:22px;\n\n}\n\n\n\/* =========================================================\n   CATEGORY BLOCK\n========================================================= *\/\n\n.category-block{\n\n    width:100%;\n\n    position:relative;\n\n}\n\n\n\/* =========================================================\n   CATEGORY MAIN\n========================================================= *\/\n\n.category-main{\n\n    position:relative;\n\n    width:100%;\n\n    min-height:112px;\n\n    box-sizing:border-box;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:20px;\n\n    padding:\n        20px 22px;\n\n    border-radius:22px;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            rgba(19,31,53,.90),\n            rgba(8,15,28,.92)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.085);\n\n    cursor:pointer;\n\n    user-select:none;\n\n    overflow:hidden;\n\n    transition:\n        transform .35s cubic-bezier(.2,.8,.2,1),\n        border-color .35s ease,\n        box-shadow .35s ease;\n\n    box-shadow:\n        0 12px 35px\n        rgba(0,0,0,.18),\n\n        inset 0 1px 0\n        rgba(255,255,255,.035);\n\n}\n\n\n\/* =========================================================\n   CATEGORY LIGHT\n========================================================= *\/\n\n.category-main::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    width:220px;\n    height:220px;\n\n    right:-100px;\n    top:-100px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(255,122,24,.13),\n            transparent 68%\n        );\n\n    transition:\n        transform .5s ease;\n\n}\n\n.category-main::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:0;\n\n    width:3px;\n    height:100%;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent,\n            var(--dash-orange),\n            transparent\n        );\n\n    opacity:.4;\n\n    transition:\n        opacity .3s ease,\n        box-shadow .3s ease;\n\n}\n\n.category-main:hover{\n\n    transform:\n        translateY(-5px);\n\n    border-color:\n        rgba(255,122,24,.45);\n\n    box-shadow:\n\n        0 18px 45px\n        rgba(0,0,0,.35),\n\n        0 0 30px\n        rgba(255,122,24,.06),\n\n        inset 0 1px 0\n        rgba(255,255,255,.06);\n\n}\n\n.category-main:hover::before{\n\n    transform:\n        scale(1.3);\n\n}\n\n.category-main:hover::after{\n\n    opacity:1;\n\n    box-shadow:\n        0 0 18px\n        rgba(255,122,24,.75);\n\n}\n\n\n\/* =========================================================\n   CATEGORY ICON\n========================================================= *\/\n\n.category-main-icon{\n\n    position:relative;\n\n    width:64px;\n\n    height:64px;\n\n    min-width:64px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    border-radius:18px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,122,24,.16),\n            rgba(255,122,24,.045)\n        );\n\n    border:\n        1px solid\n        rgba(255,122,24,.18);\n\n    font-size:31px;\n\n    box-shadow:\n        inset 0 1px 0\n        rgba(255,255,255,.06),\n\n        0 0 20px\n        rgba(255,122,24,.05);\n\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease;\n\n}\n\n.category-main:hover\n.category-main-icon{\n\n    transform:\n        scale(1.08)\n        rotate(-2deg);\n\n    box-shadow:\n        0 0 25px\n        rgba(255,122,24,.16);\n\n}\n\n\n\/* =========================================================\n   CATEGORY TEXT\n========================================================= *\/\n\n.category-main-info{\n\n    position:relative;\n\n    z-index:1;\n\n    flex:1;\n\n}\n\n.category-main-name{\n\n    color:#fff;\n\n    font-size:17px;\n\n    font-weight:950;\n\n    letter-spacing:2.5px;\n\n}\n\n.category-main-desc{\n\n    color:#8490a2;\n\n    font-size:12px;\n\n    margin-top:6px;\n\n}\n\n\n\/* =========================================================\n   CATEGORY COUNTER\n========================================================= *\/\n\n.category-count{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    margin-top:9px;\n\n    padding:\n        4px 9px;\n\n    border-radius:20px;\n\n    background:\n        rgba(255,122,24,.08);\n\n    border:\n        1px solid\n        rgba(255,122,24,.15);\n\n    color:\n        #c4ccd7;\n\n    font-size:10px;\n\n    letter-spacing:.7px;\n\n}\n\n.category-count strong{\n\n    color:\n        var(--dash-orange);\n\n}\n\n\n\/* =========================================================\n   CATEGORY ARROW\n========================================================= *\/\n\n.category-arrow{\n\n    position:relative;\n\n    z-index:2;\n\n    width:42px;\n\n    height:42px;\n\n    min-width:42px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    border-radius:13px;\n\n    background:\n        rgba(255,255,255,.045);\n\n    border:\n        1px solid\n        rgba(255,255,255,.06);\n\n    color:\n        var(--dash-orange);\n\n    font-size:17px;\n\n    transition:\n        transform .4s cubic-bezier(.2,.8,.2,1),\n        background .3s ease,\n        border-color .3s ease;\n\n}\n\n.category-main:hover\n.category-arrow{\n\n    background:\n        rgba(255,122,24,.10);\n\n    border-color:\n        rgba(255,122,24,.22);\n\n}\n\n.category-block.open\n.category-arrow{\n\n    transform:\n        rotate(180deg);\n\n    background:\n        rgba(255,122,24,.12);\n\n    border-color:\n        rgba(255,122,24,.30);\n\n}\n\n\n\/* =========================================================\n   CATEGORY OPEN\n========================================================= *\/\n\n.category-block.open\n.category-main{\n\n    border-color:\n        rgba(255,122,24,.38);\n\n    box-shadow:\n        0 15px 40px\n        rgba(0,0,0,.28),\n\n        0 0 35px\n        rgba(255,122,24,.055);\n\n}\n\n\n\/* =========================================================\n   CATEGORY CONTENT\n========================================================= *\/\n\n.category-content{\n\n    display:grid;\n\n    grid-template-rows:\n        0fr;\n\n    opacity:0;\n\n    transition:\n        grid-template-rows .5s\n        cubic-bezier(.2,.8,.2,1),\n\n        opacity .3s ease;\n\n}\n\n\n\/* =========================================================\n   CATEGORY INNER\n========================================================= *\/\n\n.category-content-inner{\n\n    overflow:hidden;\n\n    min-height:0;\n\n    padding-top:0;\n\n    transition:\n        padding .5s\n        cubic-bezier(.2,.8,.2,1);\n\n}\n\n\n\/* =========================================================\n   CATEGORY OPEN\n========================================================= *\/\n\n.category-block.open\n.category-content{\n\n    grid-template-rows:\n        1fr;\n\n    opacity:1;\n\n}\n\n.category-block.open\n.category-content-inner{\n\n    padding-top:16px;\n\n}\n\n\n\/* =========================================================\n   APPLICATION GRID\n========================================================= *\/\n\n.category-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            auto-fit,\n            minmax(230px,1fr)\n        );\n\n    gap:15px;\n\n    width:100%;\n\n}\n\n\n\/* =========================================================\n   APPLICATION CARD\n========================================================= *\/\n\n.dash-card{\n\n    position:relative;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(18,30,51,.90),\n            rgba(9,17,30,.94)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.075);\n\n    border-radius:17px;\n\n    overflow:hidden;\n\n    cursor:pointer;\n\n    min-height:96px;\n\n    box-sizing:border-box;\n\n    box-shadow:\n        0 8px 25px\n        rgba(0,0,0,.16),\n\n        inset 0 1px 0\n        rgba(255,255,255,.025);\n\n    transition:\n        transform .3s cubic-bezier(.2,.8,.2,1),\n        border-color .3s ease,\n        box-shadow .3s ease;\n\n    animation:\n        cardAppear .5s ease both;\n\n}\n\n\n\/* =========================================================\n   CARD GLOW\n========================================================= *\/\n\n.dash-card::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    width:120px;\n    height:120px;\n\n    right:-70px;\n    top:-70px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(255,122,24,.12),\n            transparent 68%\n        );\n\n    transition:\n        transform .4s ease;\n\n}\n\n.dash-card:hover::before{\n\n    transform:\n        scale(1.5);\n\n}\n\n.dash-card:hover{\n\n    transform:\n        translateY(-6px);\n\n    border-color:\n        rgba(255,122,24,.48);\n\n    box-shadow:\n\n        0 15px 35px\n        rgba(0,0,0,.35),\n\n        0 0 25px\n        rgba(255,122,24,.06);\n\n}\n\n\n\/* =========================================================\n   CARD LINK\n========================================================= *\/\n\n.card-link{\n\n    position:relative;\n\n    z-index:1;\n\n    display:block;\n\n    width:100%;\n\n    height:100%;\n\n    min-height:96px;\n\n    color:inherit;\n\n    text-decoration:none;\n\n}\n\n\n\/* =========================================================\n   CARD HEADER\n========================================================= *\/\n\n.card-header{\n\n    position:relative;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:15px;\n\n    min-height:96px;\n\n    padding:\n        17px;\n\n    box-sizing:border-box;\n\n}\n\n\n\/* =========================================================\n   CARD ICON\n========================================================= *\/\n\n.dash-icon{\n\n    width:48px;\n\n    height:48px;\n\n    min-width:48px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    border-radius:14px;\n\n    background:\n        rgba(255,122,24,.075);\n\n    border:\n        1px solid\n        rgba(255,122,24,.10);\n\n    font-size:24px;\n\n    color:\n        var(--dash-orange);\n\n    transition:\n        transform .3s ease,\n        background .3s ease,\n        box-shadow .3s ease;\n\n}\n\n.dash-card:hover\n.dash-icon{\n\n    transform:\n        scale(1.1)\n        rotate(-3deg);\n\n    background:\n        rgba(255,122,24,.13);\n\n    box-shadow:\n        0 0 18px\n        rgba(255,122,24,.12);\n\n}\n\n\n\/* =========================================================\n   CARD LABEL\n========================================================= *\/\n\n.dash-label{\n\n    color:#fff;\n\n    font-size:14px;\n\n    font-weight:850;\n\n    line-height:1.3;\n\n    transition:\n        color .25s ease;\n\n}\n\n.dash-card:hover\n.dash-label{\n\n    color:\n        #ff9b4a;\n\n}\n\n\n\/* =========================================================\n   CARD DESCRIPTION\n========================================================= *\/\n\n.dash-desc{\n\n    color:#8490a1;\n\n    font-size:11px;\n\n    margin-top:5px;\n\n    line-height:1.4;\n\n}\n\n\n\/* =========================================================\n   CARD ARROW INDICATOR\n========================================================= *\/\n\n.dash-card .card-header::after{\n\n    content:\"\u203a\";\n\n    position:absolute;\n\n    right:14px;\n\n    top:50%;\n\n    transform:\n        translateY(-50%);\n\n    color:\n        rgba(255,255,255,.20);\n\n    font-size:20px;\n\n    transition:\n        color .25s ease,\n        transform .25s ease;\n\n}\n\n.dash-card:hover\n.card-header::after{\n\n    color:\n        var(--dash-orange);\n\n    transform:\n        translateY(-50%)\n        translateX(3px);\n\n}\n\n\n\/* =========================================================\n   LIGHT MODE CARDS\n========================================================= *\/\n\nbody.light-mode .category-main{\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.92),\n            rgba(244,247,250,.95)\n        );\n\n    border-color:\n        rgba(15,23,42,.08);\n\n    box-shadow:\n        0 12px 35px\n        rgba(15,23,42,.08);\n\n}\n\nbody.light-mode .dash-card{\n\n    background:\n        linear-gradient(\n            145deg,\n            #fff,\n            #f7f9fb\n        );\n\n    border-color:\n        rgba(15,23,42,.08);\n\n    box-shadow:\n        0 8px 25px\n        rgba(15,23,42,.07);\n\n}\n\nbody.light-mode .dash-label{\n\n    color:#172033;\n\n}\n\nbody.light-mode .dash-desc{\n\n    color:#687386;\n\n}\n\nbody.light-mode .category-main-desc{\n\n    color:#687386;\n\n}\n\nbody.light-mode .category-count{\n\n    color:#687386;\n\n}\n\nbody.light-mode .smart-right button,\nbody.light-mode .smart-right select{\n\n    background:#fff;\n\n    color:#111827;\n\n    border-color:\n        rgba(15,23,42,.10);\n\n}\n\n\n\/* =========================================================\n   ANIMA\u00c7\u00d5ES\n========================================================= *\/\n\n@keyframes titleAppear{\n\n    from{\n\n        opacity:0;\n\n        transform:\n            translateY(-15px);\n\n    }\n\n    to{\n\n        opacity:1;\n\n        transform:\n            translateY(0);\n\n    }\n\n}\n\n@keyframes cardAppear{\n\n    from{\n\n        opacity:0;\n\n        transform:\n            translateY(15px)\n            scale(.98);\n\n    }\n\n    to{\n\n        opacity:1;\n\n        transform:\n            translateY(0)\n            scale(1);\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:850px){\n\n    .smart-panel{\n\n        flex-direction:column;\n\n        text-align:center;\n\n        padding:\n            18px;\n\n    }\n\n    .smart-left{\n\n        align-items:center;\n\n    }\n\n    .smart-center{\n\n        padding:0;\n\n    }\n\n    .smart-right{\n\n        justify-content:center;\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE PEQUENO\n========================================================= *\/\n\n@media(max-width:600px){\n\n    .dash-wrap{\n\n        padding:\n            35px 12px 55px;\n\n        gap:17px;\n\n    }\n\n    .dash-title{\n\n        font-size:25px;\n\n        letter-spacing:2px;\n\n    }\n\n    .dash-subtitle{\n\n        font-size:9px;\n\n        letter-spacing:2px;\n\n    }\n\n    .smart-panel{\n\n        border-radius:17px;\n\n        padding:\n            15px;\n\n    }\n\n    #welcome{\n\n        font-size:18px;\n\n    }\n\n    #clock{\n\n        font-size:23px;\n\n    }\n\n    .category-main{\n\n        min-height:95px;\n\n        padding:\n            16px;\n\n        border-radius:18px;\n\n        gap:13px;\n\n    }\n\n    .category-main-icon{\n\n        width:50px;\n\n        height:50px;\n\n        min-width:50px;\n\n        border-radius:14px;\n\n        font-size:25px;\n\n    }\n\n    .category-main-name{\n\n        font-size:13px;\n\n        letter-spacing:1.5px;\n\n    }\n\n    .category-main-desc{\n\n        font-size:10px;\n\n    }\n\n    .category-count{\n\n        font-size:9px;\n\n        margin-top:7px;\n\n    }\n\n    .category-arrow{\n\n        width:36px;\n\n        height:36px;\n\n        min-width:36px;\n\n        font-size:15px;\n\n    }\n\n    .category-grid{\n\n        grid-template-columns:\n            1fr;\n\n        gap:12px;\n\n    }\n\n    .dash-card{\n\n        min-height:88px;\n\n    }\n\n    .card-header{\n\n        min-height:88px;\n\n        padding:15px;\n\n    }\n\n    .dash-icon{\n\n        width:43px;\n\n        height:43px;\n\n        min-width:43px;\n\n        font-size:21px;\n\n    }\n\n    .dash-label{\n\n        font-size:13px;\n\n    }\n\n    .dash-desc{\n\n        font-size:10px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   REDU\u00c7\u00c3O DE MOVIMENTO\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    *,\n    *::before,\n    *::after{\n\n        animation:none !important;\n\n        transition:none !important;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SCROLLBAR\n========================================================= *\/\n\n::-webkit-scrollbar{\n\n    width:7px;\n\n}\n\n::-webkit-scrollbar-track{\n\n    background:\n        rgba(255,255,255,.02);\n\n}\n\n::-webkit-scrollbar-thumb{\n\n    background:\n        linear-gradient(\n            180deg,\n            #ff7a18,\n            #c94e00\n        );\n\n    border-radius:10px;\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     CANVAS\n========================================================= -->\n\n<canvas id=\"mysticCanvas\"><\/canvas>\n\n\n<!-- =========================================================\n     DASHBOARD\n========================================================= -->\n\n<div class=\"dash-wrap\">\n\n\n    <!-- HEADER -->\n\n    <div class=\"dash-title\">\n        MY I-TECH SYSTEM\n    <\/div>\n\n    <div class=\"dash-subtitle\">\n        NEXT GENERATION APPLICATION HUB\n    <\/div>\n\n\n    <!-- =====================================================\n         SMART PANEL\n    ====================================================== -->\n\n    <div class=\"smart-panel\">\n\n        <div class=\"smart-left\">\n\n            <div id=\"welcome\">\n                Bem-vindo\n            <\/div>\n\n            <div id=\"countryInfo\">\n                A carregar...\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"smart-center\">\n\n            <div id=\"clock\">\n                --:--\n            <\/div>\n\n            <div id=\"weather\">\n                \ud83c\udf21 --\u00b0C\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"smart-right\">\n\n            <select id=\"language\">\n\n                <option value=\"auto\">\n                    \ud83c\udf10 Auto\n                <\/option>\n\n                <option value=\"pt\">\n                    PT\n                <\/option>\n\n                <option value=\"en\">\n                    EN\n                <\/option>\n\n                <option value=\"es\">\n                    ES\n                <\/option>\n\n                <option value=\"fr\">\n                    FR\n                <\/option>\n\n            <\/select>\n\n            <button\n                id=\"themeSwitch\"\n                type=\"button\"\n                title=\"Alterar tema\"\n            >\n                \ud83c\udf19\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         CATEGORIAS\n    ====================================================== -->\n\n    <div class=\"dash-container\">\n\n\n        <!-- =================================================\n             ESOT\u00c9RICO\n        ================================================== -->\n\n        <div class=\"category-block\">\n\n            <div\n                class=\"category-main\"\n                onclick=\"toggleCategory(this)\"\n            >\n\n                <div class=\"category-main-icon\">\n                    \ud83d\udd2e\n                <\/div>\n\n                <div class=\"category-main-info\">\n\n                    <div class=\"category-main-name\">\n                        ESOT\u00c9RICO\n                    <\/div>\n\n                    <div class=\"category-main-desc\">\n                        Sistemas espirituais e universo m\u00edstico\n                    <\/div>\n\n                    <div class=\"category-count\">\n                        <strong>01<\/strong>\n                        aplica\u00e7\u00e3o\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"category-arrow\">\n                    \u25bc\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category-content\">\n\n                <div class=\"category-content-inner\">\n\n                    <div class=\"category-grid\">\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboarduniverso\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udf10\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Mystical Universe\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Digital spiritual systems\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             PESSOAL\n        ================================================== -->\n\n        <div class=\"category-block\">\n\n            <div\n                class=\"category-main\"\n                onclick=\"toggleCategory(this)\"\n            >\n\n                <div class=\"category-main-icon\">\n                    \ud83d\udc64\n                <\/div>\n\n                <div class=\"category-main-info\">\n\n                    <div class=\"category-main-name\">\n                        PESSOAL\n                    <\/div>\n\n                    <div class=\"category-main-desc\">\n                        Centro de controlo pessoal\n                    <\/div>\n\n                    <div class=\"category-count\">\n                        <strong>11<\/strong>\n                        aplica\u00e7\u00f5es\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"category-arrow\">\n                    \u25bc\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category-content\">\n\n                <div class=\"category-content-inner\">\n\n                    <div class=\"category-grid\">\n\n\n                        <!-- CASA -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-casa\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udfe0\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Casa+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Gest\u00e3o da casa\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- CONVITES -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-convites\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udc8c\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Convites+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Gest\u00e3o de convites\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- VIAGENS -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-viagens\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \u2708\ufe0f\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Viagens+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Planeamento de viagens\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- PRODUTIVIDADE -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-produtividade\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \u26a1\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Produtividade+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Organiza\u00e7\u00e3o pessoal\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- MYPAGE -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-mypage\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udc64\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            MyPage+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            P\u00e1gina pessoal\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- MENU -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-menus\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \u2630\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Menu+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Gest\u00e3o de menus\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- LEITURA -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-leitura\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udcda\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Leitura+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Biblioteca e leitura\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- IDIOMA -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-idioma\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udf0d\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Idioma+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Gest\u00e3o de idiomas\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- FAM\u00cdLIA -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-familia\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Fam\u00edlia+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Gest\u00e3o familiar\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- ESTUDOS -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-estudos\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udf93\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Estudos+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Organiza\u00e7\u00e3o dos estudos\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- CV -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-cv\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udcc4\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            CV+\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Curr\u00edculo profissional\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             SECOND LIFE SYSTEMS\n        ================================================== -->\n\n        <div class=\"category-block\">\n\n            <div\n                class=\"category-main\"\n                onclick=\"toggleCategory(this)\"\n            >\n\n                <div class=\"category-main-icon\">\n                    \ud83d\udef0\ufe0f\n                <\/div>\n\n                <div class=\"category-main-info\">\n\n                    <div class=\"category-main-name\">\n                        SECOND LIFE SYSTEMS\n                    <\/div>\n\n                    <div class=\"category-main-desc\">\n                        Sistemas e ferramentas para Second Life\n                    <\/div>\n\n                    <div class=\"category-count\">\n                        <strong>07<\/strong>\n                        aplica\u00e7\u00f5es\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"category-arrow\">\n                    \u25bc\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category-content\">\n\n                <div class=\"category-content-inner\">\n\n                    <div class=\"category-grid\">\n\n\n                        <!-- DJ HUD -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/dj-hud-system\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udfa7\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            DJ HUD System\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Second Life integration\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- ALERT MANAGER -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/alert-manager\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udea8\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Alert Manager\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Control system\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- TREASURE HUNT -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/treasure-hunt\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udc8e\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Treasure Hunt\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Second Life system\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- MYSTIC DAILY -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/mystic-daily\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83d\udd2e\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Mystic Daily\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Daily mystical system\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- MOOVIE PRO -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/moovie-pro-system\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udfac\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Moovie Pro\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Professional movie system\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- CLUB SYSTEM -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/club-system\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udf89\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Club System\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Club management\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                        <!-- DESIGNER SHOWCASE -->\n\n                        <div class=\"dash-card\">\n\n                            <a\n                                href=\"https:\/\/app.digitalfreelancer.org\/index.php\/designer-showcase\/\"\n                                class=\"card-link\"\n                            >\n\n                                <div class=\"card-header\">\n\n                                    <div class=\"dash-icon\">\n                                        \ud83c\udfa8\n                                    <\/div>\n\n                                    <div>\n\n                                        <div class=\"dash-label\">\n                                            Designer Showcase\n                                        <\/div>\n\n                                        <div class=\"dash-desc\">\n                                            Designer presentation\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/a>\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             PROFISSIONAL\n        ================================================== -->\n\n        <div class=\"category-block\">\n\n            <div\n                class=\"category-main\"\n                onclick=\"toggleCategory(this)\"\n            >\n\n                <div class=\"category-main-icon\">\n                    \ud83d\udcbc\n                <\/div>\n\n                <div class=\"category-main-info\">\n\n                    <div class=\"category-main-name\">\n                        PROFISSIONAL\n                    <\/div>\n\n                    <div class=\"category-main-desc\">\n                        Ferramentas profissionais\n                    <\/div>\n\n                    <div class=\"category-count\">\n                        <strong>01<\/strong>\n                        aplica\u00e7\u00e3o\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"category-arrow\">\n                    \u25bc\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category-content\">\n\n                <div class=\"category-content-inner\">\n\n                    <div class=\"category-grid\">\n\n\n                        <!-- WORK -->\n\n                        <div class=\"dash-card\">\n\n                            <div class=\"card-header\">\n\n                                <div class=\"dash-icon\">\n                                    \ud83d\udcbc\n                                <\/div>\n\n                                <div>\n\n                                    <div class=\"dash-label\">\n                                        Work\n                                    <\/div>\n\n                                    <div class=\"dash-desc\">\n                                        Brevemente\n                                    <\/div>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   EXPANDIR \/ FECHAR CATEGORIAS\n========================================================= *\/\n\nfunction toggleCategory(element){\n\n    const category =\n        element.parentElement;\n\n    category.classList.toggle(\n        'open'\n    );\n\n}\n\n\n\/* =========================================================\n   REL\u00d3GIO\n========================================================= *\/\n\nfunction updateClock(){\n\n    const clock =\n        document.getElementById(\n            'clock'\n        );\n\n    if(!clock){\n        return;\n    }\n\n    clock.innerHTML =\n        new Date().toLocaleTimeString();\n\n}\n\nsetInterval(\n    updateClock,\n    1000\n);\n\nupdateClock();\n\n\n\/* =========================================================\n   SAUDA\u00c7\u00c3O\n========================================================= *\/\n\nfunction greeting(){\n\n    const welcome =\n        document.getElementById(\n            'welcome'\n        );\n\n    if(!welcome){\n        return;\n    }\n\n    const h =\n        new Date().getHours();\n\n    let text =\n        \"Boa noite\";\n\n    if(h < 12){\n\n        text =\n            \"Bom dia\";\n\n    }\n    else if(h < 18){\n\n        text =\n            \"Boa tarde\";\n\n    }\n\n    welcome.innerHTML =\n        text;\n\n}\n\ngreeting();\n\n\n\/* =========================================================\n   PA\u00cdS + TEMPERATURA\n========================================================= *\/\n\nfetch(\n    'https:\/\/ipapi.co\/json\/'\n)\n\n.then(function(response){\n\n    if(!response.ok){\n\n        throw new Error(\n            'Erro ao obter localiza\u00e7\u00e3o'\n        );\n\n    }\n\n    return response.json();\n\n})\n\n.then(function(data){\n\n    const countryInfo =\n        document.getElementById(\n            'countryInfo'\n        );\n\n    if(countryInfo){\n\n        countryInfo.innerHTML =\n            data.country_name ||\n            'Localiza\u00e7\u00e3o desconhecida';\n\n    }\n\n    return fetch(\n\n        'https:\/\/api.open-meteo.com\/v1\/forecast?latitude='\n        +\n        data.latitude\n        +\n        '&longitude='\n        +\n        data.longitude\n        +\n        '&current=temperature_2m'\n\n    );\n\n})\n\n.then(function(response){\n\n    if(!response.ok){\n\n        throw new Error(\n            'Erro ao obter temperatura'\n        );\n\n    }\n\n    return response.json();\n\n})\n\n.then(function(data){\n\n    const weather =\n        document.getElementById(\n            'weather'\n        );\n\n    if(\n        weather &&\n        data.current\n    ){\n\n        weather.innerHTML =\n            '\ud83c\udf21 '\n            +\n            data.current.temperature_2m\n            +\n            '\u00b0C';\n\n    }\n\n})\n\n.catch(function(){\n\n    const countryInfo =\n        document.getElementById(\n            'countryInfo'\n        );\n\n    if(countryInfo){\n\n        countryInfo.innerHTML =\n            'Localiza\u00e7\u00e3o indispon\u00edvel';\n\n    }\n\n});\n\n\n\/* =========================================================\n   TEMA\n========================================================= *\/\n\nconst themeSwitch =\n    document.getElementById(\n        'themeSwitch'\n    );\n\nif(themeSwitch){\n\n    themeSwitch.onclick =\n        function(){\n\n            document.body\n                .classList\n                .toggle(\n                    'light-mode'\n                );\n\n\n            if(\n                document.body\n                    .classList\n                    .contains(\n                        'light-mode'\n                    )\n            ){\n\n                themeSwitch.innerHTML =\n                    '\u2600\ufe0f';\n\n                themeSwitch.title =\n                    'Mudar para tema escuro';\n\n            }\n            else{\n\n                themeSwitch.innerHTML =\n                    '\ud83c\udf19';\n\n                themeSwitch.title =\n                    'Mudar para tema claro';\n\n            }\n\n        };\n\n}\n\n\n\/* =========================================================\n   IDIOMA\n========================================================= *\/\n\nconst language =\n    document.getElementById(\n        'language'\n    );\n\nif(language){\n\n    language.onchange =\n        function(){\n\n            if(\n                this.value !==\n                'auto'\n            ){\n\n                document.documentElement.lang =\n                    this.value;\n\n            }\n            else{\n\n                document.documentElement.lang =\n                    navigator.language\n                    .substring(\n                        0,\n                        2\n                    );\n\n            }\n\n        };\n\n}\n\n\n\/* =========================================================\n   CANVAS \/ PART\u00cdCULAS\n========================================================= *\/\n\nconst canvas =\n    document.getElementById(\n        \"mysticCanvas\"\n    );\n\nconst ctx =\n    canvas.getContext(\n        \"2d\"\n    );\n\n\n\/* =========================================================\n   RESIZE\n========================================================= *\/\n\nfunction resize(){\n\n    canvas.width =\n        window.innerWidth;\n\n    canvas.height =\n        window.innerHeight;\n\n}\n\nresize();\n\n\nwindow.addEventListener(\n    'resize',\n    resize\n);\n\n\n\/* =========================================================\n   NODES\n========================================================= *\/\n\nlet nodes = [];\n\n\nfunction createNodes(){\n\n    nodes = [];\n\n    const amount =\n        window.innerWidth < 600\n        ? 35\n        : 70;\n\n\n    for(\n        let i = 0;\n        i < amount;\n        i++\n    ){\n\n        nodes.push({\n\n            x:\n                Math.random()\n                *\n                canvas.width,\n\n            y:\n                Math.random()\n                *\n                canvas.height,\n\n            vx:\n                (\n                    Math.random()\n                    -\n                    .5\n                )\n                *\n                .6,\n\n            vy:\n                (\n                    Math.random()\n                    -\n                    .5\n                )\n                *\n                .6\n\n        });\n\n    }\n\n}\n\n\ncreateNodes();\n\n\n\/* =========================================================\n   DESENHAR PART\u00cdCULAS\n========================================================= *\/\n\nfunction draw(){\n\n    ctx.clearRect(\n        0,\n        0,\n        canvas.width,\n        canvas.height\n    );\n\n\n    \/* LINHAS *\/\n\n    for(\n        let i = 0;\n        i < nodes.length;\n        i++\n    ){\n\n        for(\n            let j = i + 1;\n            j < nodes.length;\n            j++\n        ){\n\n            let dx =\n                nodes[i].x\n                -\n                nodes[j].x;\n\n            let dy =\n                nodes[i].y\n                -\n                nodes[j].y;\n\n            let d =\n                Math.sqrt(\n                    dx * dx +\n                    dy * dy\n                );\n\n\n            if(d < 140){\n\n                ctx.beginPath();\n\n                ctx.strokeStyle =\n                    \"rgba(0,150,255,.15)\";\n\n                ctx.lineWidth =\n                    1;\n\n                ctx.moveTo(\n                    nodes[i].x,\n                    nodes[i].y\n                );\n\n                ctx.lineTo(\n                    nodes[j].x,\n                    nodes[j].y\n                );\n\n                ctx.stroke();\n\n            }\n\n        }\n\n    }\n\n\n    \/* PONTOS *\/\n\n    nodes.forEach(\n        function(n){\n\n            ctx.beginPath();\n\n            ctx.fillStyle =\n                \"rgba(255,122,24,.9)\";\n\n            ctx.arc(\n                n.x,\n                n.y,\n                2.2,\n                0,\n                Math.PI * 2\n            );\n\n            ctx.fill();\n\n\n            n.x +=\n                n.vx;\n\n            n.y +=\n                n.vy;\n\n\n            if(\n                n.x < 0 ||\n                n.x > canvas.width\n            ){\n\n                n.vx *= -1;\n\n            }\n\n\n            if(\n                n.y < 0 ||\n                n.y > canvas.height\n            ){\n\n                n.vy *= -1;\n\n            }\n\n        }\n    );\n\n\n    requestAnimationFrame(\n        draw\n    );\n\n}\n\n\ndraw();\n\n<\/script>\n\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3c81a5b elementor-hidden-mobile e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"3c81a5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b4fe4d1 elementor-widget elementor-widget-spacer\" data-id=\"b4fe4d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1367","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/1367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/comments?post=1367"}],"version-history":[{"count":18,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/1367\/revisions"}],"predecessor-version":[{"id":1743,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/1367\/revisions\/1743"}],"wp:attachment":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/media?parent=1367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}