دکمه ساخت تصاویر با هوش مصنوعی باید ینکش داخلی باز بشه و با یک صفحه جدید باز نشه و اینکه تمام دکمه لینک دار بشه فقط متنش لینک‌دار نشه که کاربر هر وقت هر جای دکمه کلیک می‌کنه به اون صفحه در واقع هدایت بشه. کد کامل بدون هیچ تغییر دیگری بفرست است باشه متن‌های تمام دکمه‌ها باید در همه شرایط سفید باشه چون لینک دار که میشه قرمز میشه باید در همه شرایط.<p>&nbsp;</p>
<style>
    html, body {
        margin: 0;
        padding: 0;
        font-family: 'Arial', sans-serif;
        background-color: #0d0d2b;
        color: #fff;
        overflow-x: hidden;
    }

    /* نوشته تغییر صدا با هوش مصنوعی */
    #ai-text {
        margin: 20px 0;
        font-size: 2em;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        animation: textGlow 3s infinite alternate;
        position: relative;
        z-index: 2;
    }

    @keyframes textGlow {
        from {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        to {
            text-shadow: 0 0 20px rgba(255, 255, 255, 1);
        }
    }

    /* دکمه شروع تغییر صدا با تم هوش مصنوعی */
    .start-button {
        display: inline-block;
        margin: 20px auto;
        padding: 10px 30px;
        font-size: 1.5em;
        background: linear-gradient(90deg, #0fbcf9, #0be881);
        color: #fff !important;
        border: 2px solid #fff;
        border-radius: 50px;
        cursor: pointer;
        animation: buttonGlow 2s infinite ease-in-out, borderAnimation 3s infinite;
        transition: transform 0.3s ease, background 0.3s ease;
        box-shadow: 0 0 15px rgba(15, 188, 249, 0.7);
        position: relative;
        z-index: 2;
        text-decoration: none;
        text-align: center;
        width: 300px; /* اندازه ثابت */
    }

    @keyframes borderAnimation {
        0%, 100% {
            border-color: transparent;
        }
        50% {
            border-color: #fff;
        }
    }

    .start-button:hover {
        transform: scale(1.1);
        background: linear-gradient(90deg, #0be881, #0fbcf9);
    }

    @keyframes buttonGlow {
        0%, 100% {
            box-shadow: 0 0 10px rgba(15, 188, 249, 0.7);
        }
        50% {
            box-shadow: 0 0 20px rgba(11, 232, 129, 1);
        }
    }

    /* اطمینان از سفیدی متن دکمه شروع تغییر صدا در همه حالت‌ها */
    .start-button:link,
    .start-button:visited,
    .start-button:hover,
    .start-button:active {
        color: #fff !important;
        text-decoration: none;
    }

    /* دکمه چت با هوش مصنوعی */
    .animated-button {
        width: 300px;
        background-color: #1a1a2e;
        padding: 16px 32px;
        border-radius: 8px;
        color: #fff !important;
        font-size: 20px;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        margin: 20px 10px;
        text-decoration: none;
    }

    .animated-button:link,
    .animated-button:visited,
    .animated-button:hover,
    .animated-button:active {
        color: #fff !important;
        text-decoration: none;
    }

    /* استایل مخصوص دکمه چت با هوش مصنوعی */
    .animated-button {
        animation: pulse 3s infinite;
        color: #fff !important;
        text-decoration: none;
    }

    .animated-button span {
        position: relative;
        z-index: 3;
        color: #fff !important;
    }

    /* افکت آب در داخل دکمه */
    .animated-button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 188, 249, 0.5);
        z-index: 1;
        animation: calmWave 8s ease-in-out infinite;
    }

    /* افکت نور پشت دکمه */
    .animated-button::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent);
        animation: wind 40s linear infinite;
        z-index: 0;
    }

    @keyframes wind {
        0% {
            transform: translateX(0) translateY(0) rotate(0deg);
        }
        100% {
            transform: translateX(100%) translateY(-100%) rotate(360deg);
        }
    }

    /* انیمیشن موج‌های آرام */
    @keyframes calmWave {
        0%, 100% {
            clip-path: polygon(0% 70%, 10% 73%, 20% 70%, 30% 73%, 40% 70%, 50% 73%, 60% 70%, 70% 73%, 80% 70%, 90% 73%, 100% 70%, 100% 100%, 0% 100%);
        }
        50% {
            clip-path: polygon(0% 72%, 10% 75%, 20% 72%, 30% 75%, 40% 72%, 50% 75%, 60% 72%, 70% 75%, 80% 72%, 90% 75%, 100% 72%, 100% 100%, 0% 100%);
        }
    }

    /* حذف تغییر رنگ پس از هاور روی دکمه چت با هوش مصنوعی */
    .animated-button:hover {
        /* حذف تغییر رنگ پس‌زمینه */
        /*background-color: #0fbcf9;*/
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(15, 188, 249, 0.5);
        color: #fff !important;
    }

    /* کشتی و مرد داخل دکمه چت با هوش مصنوعی */
    .animated-button .ship {
        position: absolute;
        bottom: 25%;
        left: -20%;
        width: 30px;
        height: 30px;
        z-index: 2;
        animation: shipMove 16s linear infinite;
    }

    .boat {
        position: absolute;
        bottom: 0;
        left: 5px;
        width: 20px;
        height: 10px;
        background: sienna;
        border-radius: 0 0 5px 5px;
    }

    .sail {
        position: absolute;
        bottom: 10px;
        left: 7px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 12px solid white;
    }

    .man {
        position: absolute;
        bottom: 10px;
        left: 12px;
        width: 5px;
        height: 10px;
        background: black;
    }

    .paddle {
        position: absolute;
        bottom: 5px;
        left: 15px;
        width: 15px;
        height: 2px;
        background: brown;
        transform-origin: left center;
        animation: paddleMove 1s linear infinite;
    }

    @keyframes paddleMove {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(45deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    @keyframes shipMove {
        0% {
            left: -20%;
        }
        100% {
            left: 100%;
        }
    }

    /* دکمه آسمان پرستاره با سیارات متعدد */
    .night-sky-button {
        background-color: #000033;
        padding: 16px 32px;
        border-radius: 8px;
        color: #ffffff;
        font-size: 20px;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        margin: 20px 10px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        width: 300px; /* اندازه ثابت */
    }

    .night-sky-button a {
        color: #ffffff;
        text-decoration: none;
        position: relative;
        z-index: 2;
    }

    /* ایجاد پس‌زمینه آسمان پرستاره با سیارات متعدد */
    .night-sky-button::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: transparent url('data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%0A%3Cdefs%3E%0A%20%20%3C!--%20تعریف%20گرادیانت‌ها%20برای%20سیارات%20--%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient1%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff4500%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient2%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238a2be2%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234b0082%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient3%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300ced1%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231e90ff%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient4%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff1493%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff69b4%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient5%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300ff7f%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient6%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dc143c%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff4500%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient7%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffd700%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffa500%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient8%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300bfff%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231e90ff%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient9%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23adff2f%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient10%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff69b4%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff1493%22/%3E%0A%20%20%3C/radialGradient%3E%0A%3C/defs%3E%0A%3C!--%20ستاره‌ها%20--%3E%0A%3Cg%20fill%3D%22%23ffffff%22%3E%0A%20%20%3C!--%20افزایش%20تعداد%20ستاره‌ها%20به%2050%20--%3E%0A%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2220%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2240%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2260%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2280%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%22100%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22120%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%22140%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22160%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2240%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22100%22%20cy%3D%2260%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2280%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22100%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22130%22%20cy%3D%22120%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22140%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22150%22%20cy%3D%2260%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2280%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22100%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22190%22%20cy%3D%22140%22%20r%3D%220.9%22/%3E%0A%3C/g%3E%0A%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22translate%22%20from%3D%220%200%22%20to%3D%22-200%200%22%20dur%3D%2250s%22%20repeatCount%3D%22indefinite%22/%3E%0A%3C!--%20سیارات%20--%3E%0A%3Cg%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient1)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%20-50%20150%2050%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%2280%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient2)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2235s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%2050%20-150%20-50%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient3)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2240s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%2050%20150%20-50%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%22140%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient4)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2232s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%20-50%20-150%2050%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3C!--%20بقیه%20سیارات%20--%3E%0A%3C/g%3E%0A%3C!--%20شهاب‌سنگ‌ها%20--%3E%0A%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2215%22%20y2%3D%220%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%3E%0A%20%20%3CanimateMotion%20dur%3D%2215s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20200%20200%20L%20-200%20-200%22%20begin%3D%225s%22/%3E%0A%3C/line%3E%0A%3C/svg%3E') repeat;
        background-size: 200px 200px;
        animation: twinkling 50s linear infinite;
        z-index: 1;
    }

    /* انیمیشن حرکت ستاره‌ها */
    @keyframes twinkling {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(-200px, 0, 0);
        }
    }

    .night-sky-button:hover {
        background-color: #000044;
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    }

    /* ظرف دکمه‌ها برای تنظیم چینش */
    .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    @media (max-width: 768px) {
        .start-button, .animated-button, .night-sky-button {
            width: 80%;
            font-size: 1em;
        }
        .button-container {
            flex-direction: column;
        }
        .button-container > * {
            width: 80%;
            margin: 10px auto;
        }
    }

    @media (min-width: 769px) {
        .button-container {
            flex-direction: row;
        }
        .button-container > * {
            margin: 20px 10px;
        }
    }
</style>
<!-- متن تغییر صدا با هوش مصنوعی -->
<div id="ai-text">تغییر صدا با هوش مصنوعی</div>

<!-- دکمه‌ها -->
<div style="text-align: center;">
    <!-- دکمه شروع تغییر صدا -->
    <a class="start-button" href="https://apperio.ir/mobile/0V9S-0FG0-7Q3H-GKD4#/nav/page-builder203">
        <span style="font-size: 16pt;">شروع تغییر صدا</span> (<span style="font-size: 12pt;">رایگان</span>)
    </a>
</div>

<div class="button-container">
    <!-- دکمه چت با هوش مصنوعی -->
    <a href="https://aisada.ir/chat" class="animated-button">
        <span>چت با هوش مصنوعی</span>
        <div class="ship">
            <div class="boat"></div>
            <div class="sail"></div>
            <div class="man"></div>
            <div class="paddle"></div>
        </div>
    </a>
    <!-- دکمه ساخت تصاویر با هوش مصنوعی -->
    <div class="night-sky-button">
        <a href="https://aisada.ir/flux" target="_blank"> ساخت تصاویر با هوش مصنوعی </a>
    </div>
</div> حواست باشه دکمه ساخت تصاویر با هوش مصنوعی کلی انیمیشن سیارات ستاره‌ها و کهکشان داره به همراه تمام انیمیشن‌ها کد کامل کامل بفرست تا کپی کنم