{"id":221,"date":"2026-09-16T11:48:35","date_gmt":"2026-09-16T11:48:35","guid":{"rendered":"https:\/\/www.pershatech.ir\/?page_id=221"},"modified":"2026-09-17T02:12:15","modified_gmt":"2026-09-17T02:12:15","slug":"%d9%88%db%8c%d8%af%d8%a6%d9%88%d9%87%d8%a7","status":"publish","type":"page","link":"https:\/\/www.pershatech.ir\/?page_id=221","title":{"rendered":"\u0648\u06cc\u062f\u0626\u0648\u0647\u0627"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<!DOCTYPE html>\n<html lang=\"fa\" dir=\"rtl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>PERSHATECH | 30 Future Technologies<\/title>\n\n<style>\n\n\/* =========================================================\n   PERSHATECH\n   30 TECHNOLOGIES CINEMATIC SHOWCASE\n   ========================================================= *\/\n\n#smart30-showcase {\n    --ss-bg: #050812;\n    --ss-panel: rgba(7, 15, 30, .78);\n    --ss-white: #f4f8ff;\n    --ss-muted: #91a4bd;\n\n    position: relative;\n    width: 100%;\n    min-height: 760px;\n\n    overflow: hidden;\n\n    background:\n        radial-gradient(\n            circle at 50% 45%,\n            rgba(0, 130, 180, .16),\n            transparent 32%\n        ),\n        radial-gradient(\n            circle at 15% 20%,\n            rgba(130, 40, 255, .10),\n            transparent 28%\n        ),\n        #050812;\n\n    color: var(--ss-white);\n\n    font-family:\n        \"Segoe UI\",\n        Tahoma,\n        Arial,\n        sans-serif;\n\n    isolation: isolate;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n   ========================================================= *\/\n\n#smart30-showcase .ss-background {\n    position: absolute;\n    inset: 0;\n\n    overflow: hidden;\n\n    pointer-events: none;\n}\n\n\n#smart30-showcase .ss-grid {\n    position: absolute;\n    inset: -50%;\n\n    background-image:\n        linear-gradient(\n            rgba(80,150,190,.07) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(80,150,190,.07) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\n\n    transform:\n        perspective(700px)\n        rotateX(63deg)\n        translateY(20%);\n\n    animation:\n        ssGridMove 18s linear infinite;\n}\n\n\n@keyframes ssGridMove {\n\n    from {\n        transform:\n            perspective(700px)\n            rotateX(63deg)\n            translateY(20%);\n    }\n\n    to {\n        transform:\n            perspective(700px)\n            rotateX(63deg)\n            translateY(26%);\n    }\n\n}\n\n\n\/* =========================================================\n   PARTICLES\n   ========================================================= *\/\n\n#smart30-showcase .ss-particles {\n    position: absolute;\n    inset: 0;\n}\n\n\n#smart30-showcase .ss-particle {\n    position: absolute;\n\n    width: 3px;\n    height: 3px;\n\n    border-radius: 50%;\n\n    background: #8ceaff;\n\n    box-shadow:\n        0 0 10px #00d9ff,\n        0 0 25px rgba(0,220,255,.5);\n\n    animation:\n        ssParticleFloat\n        var(--duration)\n        linear\n        infinite;\n\n    animation-delay: var(--delay);\n\n    opacity: .5;\n}\n\n\n@keyframes ssParticleFloat {\n\n    0% {\n        transform:\n            translate3d(\n                0,\n                30px,\n                0\n            );\n\n        opacity: 0;\n    }\n\n    15% {\n        opacity: .7;\n    }\n\n    85% {\n        opacity: .7;\n    }\n\n    100% {\n        transform:\n            translate3d(\n                var(--moveX),\n                -720px,\n                0\n            );\n\n        opacity: 0;\n    }\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n#smart30-showcase .ss-header {\n\n    position: absolute;\n\n    top: 35px;\n    left: 55px;\n    right: 55px;\n\n    display: flex;\n\n    align-items: flex-start;\n    justify-content: space-between;\n\n    z-index: 50;\n\n}\n\n\n#smart30-showcase .ss-brand {\n\n    text-align: left;\n\n}\n\n\n#smart30-showcase .ss-brand-small {\n\n    color: #7e95ad;\n\n    font-size: 13px;\n\n    letter-spacing: 4px;\n\n    margin-bottom: 8px;\n\n}\n\n\n#smart30-showcase .ss-brand-title {\n\n    font-size: 20px;\n\n    font-weight: 800;\n\n    letter-spacing: 1px;\n\n}\n\n\n#smart30-showcase .ss-counter {\n\n    direction: ltr;\n\n    font-size: 20px;\n\n    font-weight: 800;\n\n    padding: 10px 17px;\n\n    border:\n\n        1px solid\n        rgba(120,210,255,.25);\n\n    border-radius: 12px;\n\n    background:\n\n        rgba(5,15,28,.65);\n\n    backdrop-filter: blur(12px);\n\n}\n\n\n\/* =========================================================\n   MAIN SCENE\n   ========================================================= *\/\n\n#smart30-showcase .ss-stage {\n\n    position: absolute;\n\n    top: 115px;\n    left: 0;\n    right: 0;\n    bottom: 100px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n}\n\n\n\/* =========================================================\n   TECHNOLOGY TITLE\n   ========================================================= *\/\n\n#smart30-showcase .ss-tech-info {\n\n    position: absolute;\n\n    top: 25px;\n    right: 70px;\n\n    z-index: 30;\n\n    text-align: right;\n\n}\n\n\n#smart30-showcase .ss-tech-number {\n\n    font-size: 58px;\n\n    font-weight: 900;\n\n    line-height: .9;\n\n    color: var(--tech-color);\n\n    opacity: .85;\n\n}\n\n\n#smart30-showcase .ss-tech-fa {\n\n    margin-top: 15px;\n\n    font-size: 34px;\n\n    font-weight: 900;\n\n}\n\n\n#smart30-showcase .ss-tech-en {\n\n    margin-top: 7px;\n\n    font-size: 15px;\n\n    color: var(--ss-muted);\n\n    direction: ltr;\n\n}\n\n\n\/* =========================================================\n   CANVAS\n   ========================================================= *\/\n\n#smart30-showcase .ss-canvas {\n\n    position: absolute;\n\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n\n    z-index: 5;\n\n}\n\n\n\/* =========================================================\n   CENTRAL CORE\n   ========================================================= *\/\n\n#smart30-showcase .ss-core {\n\n    position: absolute;\n\n    left: 50%;\n    top: 53%;\n\n    width: 170px;\n    height: 170px;\n\n    transform:\n        translate(-50%, -50%);\n\n    border-radius: 50%;\n\n    z-index: 10;\n\n    border:\n        1px solid\n        var(--tech-color);\n\n    box-shadow:\n\n        0 0 20px\n        var(--tech-color),\n\n        0 0 70px\n        color-mix(\n            in srgb,\n            var(--tech-color),\n            transparent 60%\n        ),\n\n        inset 0 0 45px\n        rgba(0,0,0,.7);\n\n    background:\n\n        radial-gradient(\n            circle,\n            rgba(255,255,255,.09),\n            rgba(4,10,22,.95) 65%\n        );\n\n    animation:\n        ssCorePulse 2.5s ease-in-out infinite;\n\n}\n\n\n@keyframes ssCorePulse {\n\n    0%,100% {\n        transform:\n            translate(-50%, -50%)\n            scale(.95);\n    }\n\n    50% {\n        transform:\n            translate(-50%, -50%)\n            scale(1.05);\n    }\n\n}\n\n\n#smart30-showcase .ss-core-inner {\n\n    position: absolute;\n\n    inset: 25px;\n\n    border-radius: 50%;\n\n    border:\n        2px solid\n        var(--tech-color);\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    font-size: 30px;\n\n    font-weight: 900;\n\n    color: white;\n\n}\n\n\n\/* =========================================================\n   ORBITS\n   ========================================================= *\/\n\n#smart30-showcase .ss-orbit {\n\n    position: absolute;\n\n    left: 50%;\n    top: 53%;\n\n    border:\n        1px solid\n        color-mix(\n            in srgb,\n            var(--tech-color),\n            transparent 55%\n        );\n\n    border-radius: 50%;\n\n    transform:\n        translate(-50%, -50%)\n        rotateX(65deg);\n\n    pointer-events: none;\n\n}\n\n\n#smart30-showcase .ss-orbit-1 {\n\n    width: 300px;\n    height: 300px;\n\n    animation:\n        ssOrbit1 12s linear infinite;\n\n}\n\n\n#smart30-showcase .ss-orbit-2 {\n\n    width: 470px;\n    height: 470px;\n\n    animation:\n        ssOrbit2 18s linear infinite reverse;\n\n}\n\n\n#smart30-showcase .ss-orbit-3 {\n\n    width: 650px;\n    height: 650px;\n\n    animation:\n        ssOrbit1 25s linear infinite;\n\n}\n\n\n@keyframes ssOrbit1 {\n\n    from {\n        transform:\n            translate(-50%, -50%)\n            rotateX(65deg)\n            rotateZ(0deg);\n    }\n\n    to {\n        transform:\n            translate(-50%, -50%)\n            rotateX(65deg)\n            rotateZ(360deg);\n    }\n\n}\n\n\n@keyframes ssOrbit2 {\n\n    from {\n        transform:\n            translate(-50%, -50%)\n            rotateX(65deg)\n            rotateZ(0deg);\n    }\n\n    to {\n        transform:\n            translate(-50%, -50%)\n            rotateX(65deg)\n            rotateZ(360deg);\n    }\n\n}\n\n\n\/* =========================================================\n   VISUAL LABEL\n   ========================================================= *\/\n\n#smart30-showcase .ss-scene-label {\n\n    position: absolute;\n\n    left: 70px;\n    bottom: 45px;\n\n    z-index: 30;\n\n    padding: 10px 18px;\n\n    border-radius: 10px;\n\n    border:\n        1px solid\n        color-mix(\n            in srgb,\n            var(--tech-color),\n            transparent 45%\n        );\n\n    background:\n        rgba(4,10,20,.72);\n\n    color:\n        var(--tech-color);\n\n    font-size: 12px;\n\n    font-weight: 800;\n\n    letter-spacing: 2px;\n\n    direction: ltr;\n\n}\n\n\n\/* =========================================================\n   SCENE INDICATOR\n   ========================================================= *\/\n\n#smart30-showcase .ss-scene-dots {\n\n    position: absolute;\n\n    left: 50%;\n\n    bottom: 42px;\n\n    transform:\n        translateX(-50%);\n\n    display: flex;\n\n    gap: 8px;\n\n    z-index: 30;\n\n}\n\n\n#smart30-showcase .ss-scene-dot {\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: #52647b;\n\n    transition:\n        .35s ease;\n\n}\n\n\n#smart30-showcase .ss-scene-dot.active {\n\n    width: 28px;\n\n    border-radius: 10px;\n\n    background:\n        var(--tech-color);\n\n    box-shadow:\n        0 0 12px\n        var(--tech-color);\n\n}\n\n\n\/* =========================================================\n   TIMELINE\n   ========================================================= *\/\n\n#smart30-showcase .ss-timeline {\n\n    position: absolute;\n\n    left: 55px;\n    right: 55px;\n\n    bottom: 18px;\n\n    height: 4px;\n\n    border-radius: 10px;\n\n    background:\n        rgba(255,255,255,.08);\n\n    z-index: 60;\n\n}\n\n\n#smart30-showcase .ss-progress {\n\n    height: 100%;\n\n    width: 0%;\n\n    border-radius: inherit;\n\n    background:\n        var(--tech-color);\n\n    box-shadow:\n        0 0 12px\n        var(--tech-color);\n\n}\n\n\n\/* =========================================================\n   CONTROLS\n   ========================================================= *\/\n\n#smart30-showcase .ss-controls {\n\n    position: absolute;\n\n    left: 55px;\n    bottom: 30px;\n\n    display: flex;\n\n    gap: 8px;\n\n    z-index: 80;\n\n}\n\n\n#smart30-showcase .ss-btn {\n\n    width: 40px;\n    height: 40px;\n\n    border-radius: 10px;\n\n    border:\n        1px solid\n        rgba(140,200,230,.25);\n\n    background:\n        rgba(7,15,28,.75);\n\n    color: white;\n\n    cursor: pointer;\n\n    transition:\n        .25s ease;\n\n}\n\n\n#smart30-showcase .ss-btn:hover {\n\n    border-color:\n        var(--tech-color);\n\n    color:\n        var(--tech-color);\n\n    transform:\n        translateY(-2px);\n\n}\n\n\n\/* =========================================================\n   TECHNOLOGY MINI NAV\n   ========================================================= *\/\n\n#smart30-showcase .ss-tech-nav {\n\n    position: absolute;\n\n    top: 180px;\n\n    left: 25px;\n\n    bottom: 145px;\n\n    width: 70px;\n\n    overflow-y: auto;\n\n    z-index: 70;\n\n    scrollbar-width: thin;\n\n}\n\n\n#smart30-showcase .ss-nav-item {\n\n    width: 42px;\n    height: 32px;\n\n    margin: 5px auto;\n\n    border-radius: 8px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    cursor: pointer;\n\n    color: #72849a;\n\n    font-size: 10px;\n\n    font-weight: 800;\n\n    background:\n        rgba(8,16,29,.55);\n\n    border:\n        1px solid\n        rgba(100,140,170,.12);\n\n    transition:\n        .25s ease;\n\n}\n\n\n#smart30-showcase .ss-nav-item:hover {\n\n    transform:\n        scale(1.08);\n\n}\n\n\n#smart30-showcase .ss-nav-item.active {\n\n    color: white;\n\n    border-color:\n        var(--tech-color);\n\n    box-shadow:\n        0 0 14px\n        color-mix(\n            in srgb,\n            var(--tech-color),\n            transparent 55%\n        );\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:800px){\n\n    #smart30-showcase {\n\n        min-height: 650px;\n\n    }\n\n    #smart30-showcase .ss-header {\n\n        left: 20px;\n        right: 20px;\n\n        top: 20px;\n\n    }\n\n    #smart30-showcase .ss-brand-title {\n\n        font-size: 15px;\n\n    }\n\n    #smart30-showcase .ss-tech-info {\n\n        right: 25px;\n        top: 20px;\n\n    }\n\n    #smart30-showcase .ss-tech-number {\n\n        font-size: 40px;\n\n    }\n\n    #smart30-showcase .ss-tech-fa {\n\n        font-size: 24px;\n\n    }\n\n    #smart30-showcase .ss-tech-nav {\n\n        display: none;\n\n    }\n\n    #smart30-showcase .ss-core {\n\n        width: 125px;\n        height: 125px;\n\n    }\n\n    #smart30-showcase .ss-orbit-3 {\n\n        width: 480px;\n        height: 480px;\n\n    }\n\n    #smart30-showcase .ss-orbit-2 {\n\n        width: 350px;\n        height: 350px;\n\n    }\n\n    #smart30-showcase .ss-orbit-1 {\n\n        width: 220px;\n        height: 220px;\n\n    }\n\n    #smart30-showcase .ss-scene-label {\n\n        left: 20px;\n        bottom: 55px;\n\n    }\n\n    #smart30-showcase .ss-controls {\n\n        left: 20px;\n        bottom: 20px;\n\n    }\n\n    #smart30-showcase .ss-timeline {\n\n        left: 20px;\n        right: 20px;\n\n    }\n\n}\n\n<\/style>\n<\/head>\n\n\n<body>\n\n\n<section id=\"smart30-showcase\">\n\n    <!-- =====================================================\n         BACKGROUND\n         ===================================================== -->\n\n    <div class=\"ss-background\">\n\n        <div class=\"ss-grid\"><\/div>\n\n        <div\n            class=\"ss-particles\"\n            id=\"ssParticles\">\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         HEADER\n         ===================================================== -->\n\n    <div class=\"ss-header\">\n\n        <div class=\"ss-brand\">\n\n            <div class=\"ss-brand-small\">\n                TECHNOLOGY INTELLIGENCE\n            <\/div>\n\n            <div class=\"ss-brand-title\">\n                PERSHATECH\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"ss-counter\"\n            id=\"ssCounter\">\n\n            01 \/ 30\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         MINI NAVIGATION\n         ===================================================== -->\n\n    <div\n        class=\"ss-tech-nav\"\n        id=\"ssTechNav\">\n    <\/div>\n\n\n    <!-- =====================================================\n         MAIN STAGE\n         ===================================================== -->\n\n    <div class=\"ss-stage\">\n\n        <canvas\n            class=\"ss-canvas\"\n            id=\"ssCanvas\">\n        <\/canvas>\n\n\n        <!-- TECHNOLOGY INFORMATION -->\n\n        <div\n            class=\"ss-tech-info\"\n            id=\"ssTechInfo\">\n\n            <div\n                class=\"ss-tech-number\"\n                id=\"ssNumber\">\n                01\n            <\/div>\n\n            <div\n                class=\"ss-tech-fa\"\n                id=\"ssTechFa\">\n                \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\n            <\/div>\n\n            <div\n                class=\"ss-tech-en\"\n                id=\"ssTechEn\">\n                Artificial Intelligence\n            <\/div>\n\n        <\/div>\n\n\n        <!-- ORBITS -->\n\n        <div class=\"ss-orbit ss-orbit-1\"><\/div>\n\n        <div class=\"ss-orbit ss-orbit-2\"><\/div>\n\n        <div class=\"ss-orbit ss-orbit-3\"><\/div>\n\n\n        <!-- CORE -->\n\n        <div\n            class=\"ss-core\"\n            id=\"ssCore\">\n\n            <div\n                class=\"ss-core-inner\"\n                id=\"ssCoreInner\">\n                AI\n            <\/div>\n\n        <\/div>\n\n\n        <!-- SCENE LABEL -->\n\n        <div\n            class=\"ss-scene-label\"\n            id=\"ssSceneLabel\">\n\n            ARCHITECTURE\n\n        <\/div>\n\n\n        <!-- SCENE DOTS -->\n\n        <div\n            class=\"ss-scene-dots\"\n            id=\"ssSceneDots\">\n\n            <div\n                class=\"ss-scene-dot active\">\n            <\/div>\n\n            <div class=\"ss-scene-dot\"><\/div>\n\n            <div class=\"ss-scene-dot\"><\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         CONTROLS\n         ===================================================== -->\n\n    <div class=\"ss-controls\">\n\n        <button\n            class=\"ss-btn\"\n            id=\"ssPrev\">\n            \u25c0\n        <\/button>\n\n        <button\n            class=\"ss-btn\"\n            id=\"ssPlay\">\n            \u275a\u275a\n        <\/button>\n\n        <button\n            class=\"ss-btn\"\n            id=\"ssNext\">\n            \u25b6\n        <\/button>\n\n        <button\n            class=\"ss-btn\"\n            id=\"ssFull\">\n            \u26f6\n        <\/button>\n\n    <\/div>\n\n\n    <!-- TIMELINE -->\n\n    <div class=\"ss-timeline\">\n\n        <div\n            class=\"ss-progress\"\n            id=\"ssProgress\">\n        <\/div>\n\n    <\/div>\n\n\n<\/section>\n\n\n<script>\n\n\/* =========================================================\n   PERSHATECH\n   30 TECHNOLOGIES ENGINE\n   ========================================================= *\/\n\n(function(){\n\n\"use strict\";\n\n\n\/* =========================================================\n   TECHNOLOGIES\n   ========================================================= *\/\n\nconst technologies = [\n\n{\ncode:\"AI\",\nfa:\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\",\nen:\"Artificial Intelligence\",\ncolor:\"#00E5FF\"\n},\n\n{\ncode:\"GEN\",\nfa:\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0648\u0644\u062f\",\nen:\"Generative AI\",\ncolor:\"#A855F7\"\n},\n\n{\ncode:\"LLM\",\nfa:\"\u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u0632\u0628\u0627\u0646\u06cc \u0628\u0632\u0631\u06af\",\nen:\"Large Language Models\",\ncolor:\"#EC4899\"\n},\n\n{\ncode:\"AGT\",\nfa:\"\u0639\u0627\u0645\u0644\u200c\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f\",\nen:\"AI Agents\",\ncolor:\"#8B5CF6\"\n},\n\n{\ncode:\"MM\",\nfa:\"\u0647\u0648\u0634 \u0686\u0646\u062f\u0648\u062c\u0647\u06cc\",\nen:\"Multimodal AI\",\ncolor:\"#06B6D4\"\n},\n\n{\ncode:\"CV\",\nfa:\"\u0628\u06cc\u0646\u0627\u06cc\u06cc \u0645\u0627\u0634\u06cc\u0646\",\nen:\"Computer Vision\",\ncolor:\"#22D3EE\"\n},\n\n{\ncode:\"DT\",\nfa:\"\u062f\u0648\u0642\u0644\u0648\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\",\nen:\"Digital Twins\",\ncolor:\"#F59E0B\"\n},\n\n{\ncode:\"ROB\",\nfa:\"\u0631\u0628\u0627\u062a\u06cc\u06a9 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\",\nen:\"Advanced Robotics\",\ncolor:\"#F43F5E\"\n},\n\n{\ncode:\"AUTO\",\nfa:\"\u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u062e\u0648\u062f\u0645\u062e\u062a\u0627\u0631\",\nen:\"Autonomous Systems\",\ncolor:\"#FB7185\"\n},\n\n{\ncode:\"EAI\",\nfa:\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0644\u0628\u0647\",\nen:\"Edge AI\",\ncolor:\"#14B8A6\"\n},\n\n{\ncode:\"IoT\",\nfa:\"\u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0627\u0634\u06cc\u0627\",\nen:\"Internet of Things\",\ncolor:\"#10B981\"\n},\n\n{\ncode:\"IIoT\",\nfa:\"\u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0627\u0634\u06cc\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc\",\nen:\"Industrial IoT\",\ncolor:\"#34D399\"\n},\n\n{\ncode:\"Q\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u06a9\u0648\u0627\u0646\u062a\u0648\u0645\u06cc\",\nen:\"Quantum Computing\",\ncolor:\"#F472B6\"\n},\n\n{\ncode:\"NEU\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u0646\u0648\u0631\u0648\u0645\u0648\u0631\u0641\u06cc\u06a9\",\nen:\"Neuromorphic Computing\",\ncolor:\"#C084FC\"\n},\n\n{\ncode:\"HPC\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627\u0644\u0627\",\nen:\"High Performance Computing\",\ncolor:\"#818CF8\"\n},\n\n{\ncode:\"CLOUD\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u0627\u0628\u0631\u06cc\",\nen:\"Cloud Computing\",\ncolor:\"#60A5FA\"\n},\n\n{\ncode:\"EDGE\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u0644\u0628\u0647\",\nen:\"Edge Computing\",\ncolor:\"#38BDF8\"\n},\n\n{\ncode:\"CN\",\nfa:\"\u0645\u0639\u0645\u0627\u0631\u06cc Cloud Native\",\nen:\"Cloud Native\",\ncolor:\"#93C5FD\"\n},\n\n{\ncode:\"BIG\",\nfa:\"\u06a9\u0644\u0627\u0646\u200c\u062f\u0627\u062f\u0647\",\nen:\"Big Data\",\ncolor:\"#FACC15\"\n},\n\n{\ncode:\"DL\",\nfa:\"\u062f\u06cc\u062a\u0627 \u0644\u06cc\u06a9\u200c\u0647\u0627\u0648\u0633\",\nen:\"Data Lakehouse\",\ncolor:\"#EAB308\"\n},\n\n{\ncode:\"KG\",\nfa:\"\u06af\u0631\u0627\u0641 \u062f\u0627\u0646\u0634\",\nen:\"Knowledge Graph\",\ncolor:\"#84CC16\"\n},\n\n{\ncode:\"FL\",\nfa:\"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0641\u062f\u0631\u0627\u0644\",\nen:\"Federated Learning\",\ncolor:\"#4ADE80\"\n},\n\n{\ncode:\"SD\",\nfa:\"\u062f\u0627\u062f\u0647 \u0645\u0635\u0646\u0648\u0639\u06cc\",\nen:\"Synthetic Data\",\ncolor:\"#A3E635\"\n},\n\n{\ncode:\"CY\",\nfa:\"\u0627\u0645\u0646\u06cc\u062a \u0633\u0627\u06cc\u0628\u0631\u06cc\",\nen:\"Cybersecurity\",\ncolor:\"#34D399\"\n},\n\n{\ncode:\"ZT\",\nfa:\"\u0645\u0639\u0645\u0627\u0631\u06cc Zero Trust\",\nen:\"Zero Trust\",\ncolor:\"#2DD4BF\"\n},\n\n{\ncode:\"BC\",\nfa:\"\u0628\u0644\u0627\u06a9\u0686\u06cc\u0646\",\nen:\"Blockchain\",\ncolor:\"#F97316\"\n},\n\n{\ncode:\"W3\",\nfa:\"\u0646\u0633\u0644 \u062c\u062f\u06cc\u062f \u0648\u0628\",\nen:\"Web3\",\ncolor:\"#FB923C\"\n},\n\n{\ncode:\"XR\",\nfa:\"\u0648\u0627\u0642\u0639\u06cc\u062a \u06af\u0633\u062a\u0631\u062f\u0647\",\nen:\"Extended Reality\",\ncolor:\"#E879F9\"\n},\n\n{\ncode:\"SC\",\nfa:\"\u0631\u0627\u06cc\u0627\u0646\u0634 \u0641\u0636\u0627\u06cc\u06cc\",\nen:\"Spatial Computing\",\ncolor:\"#D946EF\"\n},\n\n{\ncode:\"MAT\",\nfa:\"\u0645\u0648\u0627\u062f \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\",\nen:\"Advanced Materials\",\ncolor:\"#FBBF24\"\n}\n\n];\n\n\n\/* =========================================================\n   ELEMENTS\n   ========================================================= *\/\n\nconst root =\ndocument.getElementById(\n    \"smart30-showcase\"\n);\n\nconst canvas =\ndocument.getElementById(\n    \"ssCanvas\"\n);\n\nconst ctx =\ncanvas.getContext(\"2d\");\n\nconst numberEl =\ndocument.getElementById(\n    \"ssNumber\"\n);\n\nconst faEl =\ndocument.getElementById(\n    \"ssTechFa\"\n);\n\nconst enEl =\ndocument.getElementById(\n    \"ssTechEn\"\n);\n\nconst counterEl =\ndocument.getElementById(\n    \"ssCounter\"\n);\n\nconst coreEl =\ndocument.getElementById(\n    \"ssCore\"\n);\n\nconst coreInner =\ndocument.getElementById(\n    \"ssCoreInner\"\n);\n\nconst progressEl =\ndocument.getElementById(\n    \"ssProgress\"\n);\n\nconst sceneLabel =\ndocument.getElementById(\n    \"ssSceneLabel\"\n);\n\nconst sceneDots =\ndocument.querySelectorAll(\n    \"#ssSceneDots .ss-scene-dot\"\n);\n\nconst nav =\ndocument.getElementById(\n    \"ssTechNav\"\n);\n\n\n\/* =========================================================\n   STATE\n   ========================================================= *\/\n\nlet current = 0;\n\nlet playing = true;\n\nlet startTime = performance.now();\n\nlet previousTime =\nperformance.now();\n\nlet scene = 0;\n\nlet particles = [];\n\nlet width = 0;\nlet height = 0;\n\n\n\/* =========================================================\n   RESIZE\n   ========================================================= *\/\n\nfunction resize(){\n\n    const rect =\n        canvas.getBoundingClientRect();\n\n    width =\n        rect.width;\n\n    height =\n        rect.height;\n\n    const dpr =\n        Math.min(\n            window.devicePixelRatio || 1,\n            2\n        );\n\n    canvas.width =\n        width * dpr;\n\n    canvas.height =\n        height * dpr;\n\n    ctx.setTransform(\n        dpr,\n        0,\n        0,\n        dpr,\n        0,\n        0\n    );\n\n}\n\nwindow.addEventListener(\n    \"resize\",\n    resize\n);\n\nresize();\n\n\n\/* =========================================================\n   PARTICLES\n   ========================================================= *\/\n\nfunction createParticles(){\n\n    const container =\n        document.getElementById(\n            \"ssParticles\"\n        );\n\n    container.innerHTML = \"\";\n\n    for(let i=0;i<80;i++){\n\n        const p =\n            document.createElement(\n                \"div\"\n            );\n\n        p.className =\n            \"ss-particle\";\n\n        p.style.left =\n            Math.random()*100 + \"%\";\n\n        p.style.top =\n            60 +\n            Math.random()*50 +\n            \"%\";\n\n        p.style.setProperty(\n            \"--duration\",\n            (7 + Math.random()*12) + \"s\"\n        );\n\n        p.style.setProperty(\n            \"--delay\",\n            (-Math.random()*12) + \"s\"\n        );\n\n        p.style.setProperty(\n            \"--moveX\",\n            ((Math.random()-.5)*250) + \"px\"\n        );\n\n        container.appendChild(p);\n\n    }\n\n}\n\ncreateParticles();\n\n\n\/* =========================================================\n   NAVIGATION\n   ========================================================= *\/\n\ntechnologies.forEach(\n    (tech,index)=>{\n\n        const item =\n            document.createElement(\n                \"div\"\n            );\n\n        item.className =\n            \"ss-nav-item\";\n\n        item.textContent =\n            String(index+1).padStart(2,\"0\");\n\n        item.title =\n            tech.fa;\n\n        item.dataset.index =\n            index;\n\n        item.addEventListener(\n            \"click\",\n            ()=>{\n                showTechnology(index);\n            }\n        );\n\n        nav.appendChild(item);\n\n    }\n);\n\n\n\/* =========================================================\n   CURRENT TECHNOLOGY\n   ========================================================= *\/\n\nfunction updateTechnology(){\n\n    const tech =\n        technologies[current];\n\n    root.style.setProperty(\n        \"--tech-color\",\n        tech.color\n    );\n\n    numberEl.textContent =\n        String(current+1)\n        .padStart(2,\"0\");\n\n    faEl.textContent =\n        tech.fa;\n\n    enEl.textContent =\n        tech.en;\n\n    coreInner.textContent =\n        tech.code;\n\n    counterEl.textContent =\n        `${String(current+1).padStart(2,\"0\")} \/ 30`;\n\n    document\n        .querySelectorAll(\n            \".ss-nav-item\"\n        )\n        .forEach(\n            (item,index)=>{\n\n                item.classList.toggle(\n                    \"active\",\n                    index===current\n                );\n\n                item.style.setProperty(\n                    \"--tech-color\",\n                    technologies[index].color\n                );\n\n            }\n        );\n\n}\n\n\n\/* =========================================================\n   CHANGE TECHNOLOGY\n   ========================================================= *\/\n\nfunction showTechnology(index){\n\n    current =\n        (index + technologies.length)\n        % technologies.length;\n\n    startTime =\n        performance.now();\n\n    scene = 0;\n\n    updateTechnology();\n\n}\n\n\n\/* =========================================================\n   SCENE\n   ========================================================= *\/\n\nconst sceneNames = [\n\n    \"ARCHITECTURE\",\n\n    \"CONNECTED ECOSYSTEM\",\n\n    \"FUTURE COMPUTE\"\n\n];\n\n\nfunction updateScene(){\n\n    sceneLabel.textContent =\n        sceneNames[scene];\n\n    sceneDots.forEach(\n        (dot,index)=>{\n\n            dot.classList.toggle(\n                \"active\",\n                index===scene\n            );\n\n        }\n    );\n\n}\n\n\n\/* =========================================================\n   PLAY \/ PAUSE\n   ========================================================= *\/\n\ndocument\n    .getElementById(\"ssPlay\")\n    .addEventListener(\n        \"click\",\n        function(){\n\n            playing =\n                !playing;\n\n            this.textContent =\n                playing\n                    ? \"\u275a\u275a\"\n                    : \"\u25b6\";\n\n            if(playing){\n\n                startTime =\n                    performance.now();\n\n            }\n\n        }\n    );\n\n\n\/* =========================================================\n   NEXT\n   ========================================================= *\/\n\ndocument\n    .getElementById(\"ssNext\")\n    .addEventListener(\n        \"click\",\n        ()=>{\n            showTechnology(\n                current+1\n            );\n        }\n    );\n\n\n\/* =========================================================\n   PREVIOUS\n   ========================================================= *\/\n\ndocument\n    .getElementById(\"ssPrev\")\n    .addEventListener(\n        \"click\",\n        ()=>{\n            showTechnology(\n                current-1\n            );\n        }\n    );\n\n\n\/* =========================================================\n   FULLSCREEN\n   ========================================================= *\/\n\ndocument\n    .getElementById(\"ssFull\")\n    .addEventListener(\n        \"click\",\n        ()=>{\n\n            if(\n                !document.fullscreenElement\n            ){\n\n                root.requestFullscreen?.();\n\n            }else{\n\n                document.exitFullscreen?.();\n\n            }\n\n        }\n    );\n\n\n\/* =========================================================\n   DRAW HELPERS\n   ========================================================= *\/\n\nfunction clear(){\n\n    ctx.clearRect(\n        0,\n        0,\n        width,\n        height\n    );\n\n}\n\n\nfunction hexToRgb(hex){\n\n    hex =\n        hex.replace(\"#\",\"\");\n\n    return {\n\n        r:\n            parseInt(\n                hex.substring(0,2),\n                16\n            ),\n\n        g:\n            parseInt(\n                hex.substring(2,4),\n                16\n            ),\n\n        b:\n            parseInt(\n                hex.substring(4,6),\n                16\n            )\n\n    };\n\n}\n\n\n\/* =========================================================\n   SCENE 1\n   TECHNOLOGY ARCHITECTURE\n   ========================================================= *\/\n\nfunction drawArchitecture(\n    tech,\n    time\n){\n\n    const rgb =\n        hexToRgb(\n            tech.color\n        );\n\n    const cx =\n        width\/2;\n\n    const cy =\n        height*.54;\n\n    const rings =\n        [110,180,260,350];\n\n    rings.forEach(\n        (r,index)=>{\n\n            ctx.beginPath();\n\n            ctx.arc(\n                cx,\n                cy,\n                r +\n                Math.sin(\n                    time*.001+\n                    index\n                )*7,\n                0,\n                Math.PI*2\n            );\n\n            ctx.strokeStyle =\n                `rgba(\n                    ${rgb.r},\n                    ${rgb.g},\n                    ${rgb.b},\n                    ${.18-index*.025}\n                )`;\n\n            ctx.lineWidth = 1.5;\n\n            ctx.stroke();\n\n        }\n    );\n\n\n    \/* radial architecture *\/\n\n    for(\n        let i=0;\n        i<18;\n        i++\n    ){\n\n        const angle =\n            i *\n            Math.PI*2\/18 +\n            time*.00025;\n\n        const radius =\n            100 +\n            (i%4)*70;\n\n        const x =\n            cx +\n            Math.cos(angle)*radius;\n\n        const y =\n            cy +\n            Math.sin(angle)*radius*.55;\n\n        ctx.beginPath();\n\n        ctx.moveTo(\n            cx,\n            cy\n        );\n\n        ctx.lineTo(\n            x,\n            y\n        );\n\n        ctx.strokeStyle =\n            `rgba(\n                ${rgb.r},\n                ${rgb.g},\n                ${rgb.b},\n                .28\n            )`;\n\n        ctx.stroke();\n\n        ctx.beginPath();\n\n        ctx.arc(\n            x,\n            y,\n            5+(i%3)*2,\n            0,\n            Math.PI*2\n        );\n\n        ctx.fillStyle =\n            tech.color;\n\n        ctx.shadowColor =\n            tech.color;\n\n        ctx.shadowBlur = 15;\n\n        ctx.fill();\n\n        ctx.shadowBlur = 0;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SCENE 2\n   CONNECTED ECOSYSTEM\n   ========================================================= *\/\n\nfunction drawNetwork(\n    tech,\n    time\n){\n\n    const rgb =\n        hexToRgb(\n            tech.color\n        );\n\n    const cx =\n        width\/2;\n\n    const cy =\n        height*.53;\n\n    const points = [];\n\n    for(\n        let i=0;\n        i<26;\n        i++\n    ){\n\n        const angle =\n            i *\n            Math.PI*2\/26;\n\n        const radius =\n            130 +\n            (i%5)*42;\n\n        const wobble =\n            Math.sin(\n                time*.0015+i\n            )*12;\n\n        points.push({\n\n            x:\n                cx+\n                Math.cos(angle)*\n                (radius+wobble),\n\n            y:\n                cy+\n                Math.sin(angle)*\n                (radius+wobble)*.62\n\n        });\n\n    }\n\n\n    \/* connections *\/\n\n    points.forEach(\n        (p,i)=>{\n\n            const next =\n                points[\n                    (i+1) %\n                    points.length\n                ];\n\n            ctx.beginPath();\n\n            ctx.moveTo(\n                p.x,\n                p.y\n            );\n\n            ctx.lineTo(\n                next.x,\n                next.y\n            );\n\n            ctx.strokeStyle =\n                `rgba(\n                    ${rgb.r},\n                    ${rgb.g},\n                    ${rgb.b},\n                    .42\n                )`;\n\n            ctx.lineWidth = 1;\n\n            ctx.stroke();\n\n\n            if(i%2===0){\n\n                ctx.beginPath();\n\n                ctx.moveTo(\n                    p.x,\n                    p.y\n                );\n\n                ctx.lineTo(\n                    cx,\n                    cy\n                );\n\n                ctx.strokeStyle =\n                    \"rgba(120,150,180,.16)\";\n\n                ctx.stroke();\n\n            }\n\n        }\n    );\n\n\n    \/* nodes *\/\n\n    points.forEach(\n        (p,i)=>{\n\n            const pulse =\n                5 +\n                Math.sin(\n                    time*.004+i\n                )*2;\n\n            ctx.beginPath();\n\n            ctx.arc(\n                p.x,\n                p.y,\n                pulse,\n                0,\n                Math.PI*2\n            );\n\n            ctx.fillStyle =\n                tech.color;\n\n            ctx.shadowColor =\n                tech.color;\n\n            ctx.shadowBlur = 18;\n\n            ctx.fill();\n\n            ctx.shadowBlur = 0;\n\n        }\n    );\n\n\n    \/* core *\/\n\n    ctx.beginPath();\n\n    ctx.arc(\n        cx,\n        cy,\n        60+\n        Math.sin(time*.003)*5,\n        0,\n        Math.PI*2\n    );\n\n    ctx.strokeStyle =\n        tech.color;\n\n    ctx.lineWidth = 3;\n\n    ctx.stroke();\n\n}\n\n\n\/* =========================================================\n   SCENE 3\n   FUTURE COMPUTE \/ HOLOGRAM\n   ========================================================= *\/\n\nfunction drawHologram(\n    tech,\n    time\n){\n\n    const cx =\n        width\/2;\n\n    const cy =\n        height*.53;\n\n    const rgb =\n        hexToRgb(\n            tech.color\n        );\n\n\n    \/* vertical holographic beams *\/\n\n    for(\n        let i=-5;\n        i<=5;\n        i++\n    ){\n\n        const x =\n            cx+i*35;\n\n        const alpha =\n            .08+\n            Math.abs(i)*.01;\n\n        ctx.beginPath();\n\n        ctx.moveTo(\n            x,\n            cy-190\n        );\n\n        ctx.lineTo(\n            x,\n            cy+190\n        );\n\n        ctx.strokeStyle =\n            `rgba(\n                ${rgb.r},\n                ${rgb.g},\n                ${rgb.b},\n                ${alpha}\n            )`;\n\n        ctx.stroke();\n\n    }\n\n\n    \/* rotating polygon *\/\n\n    const radius = 120;\n\n    const sides = 8;\n\n    const points=[];\n\n\n    for(\n        let i=0;\n        i<sides;\n        i++\n    ){\n\n        const angle =\n            i *\n            Math.PI*2\/sides +\n            time*.0006;\n\n        points.push({\n\n            x:\n                cx+\n                Math.cos(angle)*\n                radius,\n\n            y:\n                cy+\n                Math.sin(angle)*\n                radius*.62\n\n        });\n\n    }\n\n\n    for(\n        let i=0;\n        i<sides;\n        i++\n    ){\n\n        const p =\n            points[i];\n\n        const q =\n            points[\n                (i+1)%sides\n            ];\n\n        ctx.beginPath();\n\n        ctx.moveTo(\n            p.x,\n            p.y\n        );\n\n        ctx.lineTo(\n            q.x,\n            q.y\n        );\n\n        ctx.strokeStyle =\n            tech.color;\n\n        ctx.lineWidth = 3;\n\n        ctx.shadowColor =\n            tech.color;\n\n        ctx.shadowBlur = 14;\n\n        ctx.stroke();\n\n        ctx.shadowBlur = 0;\n\n    }\n\n\n    \/* center beam *\/\n\n    const gradient =\n        ctx.createRadialGradient(\n            cx,\n            cy,\n            5,\n            cx,\n            cy,\n            160\n        );\n\n    gradient.addColorStop(\n        0,\n        `rgba(\n            ${rgb.r},\n            ${rgb.g},\n            ${rgb.b},\n            .32\n        )`\n    );\n\n    gradient.addColorStop(\n        1,\n        \"rgba(0,0,0,0)\"\n    );\n\n    ctx.fillStyle =\n        gradient;\n\n    ctx.beginPath();\n\n    ctx.arc(\n        cx,\n        cy,\n        160,\n        0,\n        Math.PI*2\n    );\n\n    ctx.fill();\n\n\n    \/* floating particles *\/\n\n    for(\n        let i=0;\n        i<35;\n        i++\n    ){\n\n        const angle =\n            i*2.4+\n            time*.0007;\n\n        const r =\n            100+\n            (i%8)*25;\n\n        const x =\n            cx+\n            Math.cos(angle)*r;\n\n        const y =\n            cy+\n            Math.sin(angle)*r*.7;\n\n        ctx.beginPath();\n\n        ctx.arc(\n            x,\n            y,\n            2+(i%3),\n            0,\n            Math.PI*2\n        );\n\n        ctx.fillStyle =\n            tech.color;\n\n        ctx.fill();\n\n    }\n\n}\n\n\n\/* =========================================================\n   MAIN RENDER\n   ========================================================= *\/\n\nfunction render(time){\n\n    clear();\n\n    const tech =\n        technologies[current];\n\n\n    if(scene===0){\n\n        drawArchitecture(\n            tech,\n            time\n        );\n\n    }\n\n    else if(scene===1){\n\n        drawNetwork(\n            tech,\n            time\n        );\n\n    }\n\n    else{\n\n        drawHologram(\n            tech,\n            time\n        );\n\n    }\n\n\n    requestAnimationFrame(\n        render\n    );\n\n}\n\n\n\/* =========================================================\n   TIMER\n   ========================================================= *\/\n\nfunction timerLoop(time){\n\n    if(playing){\n\n        const elapsed =\n            time -\n            startTime;\n\n        const total =\n            10000;\n\n        const percent =\n            Math.min(\n                elapsed\/total,\n                1\n            );\n\n        progressEl.style.width =\n            (percent*100)+\"%\";\n\n\n        const newScene =\n            Math.min(\n                2,\n                Math.floor(\n                    elapsed \/\n                    3333.333\n                )\n            );\n\n\n        if(\n            newScene !== scene\n        ){\n\n            scene =\n                newScene;\n\n            updateScene();\n\n        }\n\n\n        if(elapsed>=total){\n\n            showTechnology(\n                current+1\n            );\n\n        }\n\n    }\n\n    requestAnimationFrame(\n        timerLoop\n    );\n\n}\n\n\n\/* =========================================================\n   KEYBOARD\n   ========================================================= *\/\n\ndocument.addEventListener(\n    \"keydown\",\n    function(e){\n\n        if(e.key===\"ArrowRight\"){\n\n            showTechnology(\n                current+1\n            );\n\n        }\n\n        if(e.key===\"ArrowLeft\"){\n\n            showTechnology(\n                current-1\n            );\n\n        }\n\n        if(e.code===\"Space\"){\n\n            e.preventDefault();\n\n            document\n                .getElementById(\n                    \"ssPlay\"\n                )\n                .click();\n\n        }\n\n    }\n);\n\n\n\/* =========================================================\n   INIT\n   ========================================================= *\/\n\nupdateTechnology();\n\nupdateScene();\n\nrequestAnimationFrame(\n    render\n);\n\nrequestAnimationFrame(\n    timerLoop\n);\n\n})();\n\n<\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>PERSHATECH | 30 Future Technologies TECHNOLOGY INTELLIGENCE PERSHATECH 01 \/ 30 01 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc Artificial Intelligence AI ARCHITECTURE \u25c0 \u275a\u275a \u25b6 \u26f6<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=221"}],"version-history":[{"count":3,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/www.pershatech.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}