<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>اتصال به سالن | Taymo</title>


    <style>

        /* =====================================================
           TAYMO
        ===================================================== */

        :root {

            --blue: #39A7DA;
            --blue-dark: #0271B2;
            --blue-deep: #075985;

            --navy: #293A53;

            --white: #ffffff;

            --text: #26384F;
            --muted: #708399;

            --glass: rgba(255,255,255,.72);

            --border: rgba(255,255,255,.65);

            --shadow:
                    0 35px 90px rgba(2,113,178,.18);

        }


        /* =====================================================
           FONT
        ===================================================== */

        @font-face {

            font-family: 'iy';

            src: url("/IRANYekanXVF.woff");

            font-weight: 100 900;

            font-style: normal;
        }


        /* =====================================================
           RESET
        ===================================================== */

        * {

            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }


        html {
            min-height: 100%;
        }


        body {

            min-height: 100vh;

            font-family:
                    'iy',
                    -apple-system,
                    BlinkMacSystemFont,
                    sans-serif;

            color: var(--text);

            overflow-x: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 25px;

            background:

                    radial-gradient(
                            circle at 15% 15%,
                            rgba(57,167,218,.30),
                            transparent 27%
                    ),

                    radial-gradient(
                            circle at 85% 80%,
                            rgba(2,113,178,.20),
                            transparent 30%
                    ),

                    linear-gradient(
                            135deg,
                            #F2FBFF 0%,
                            #EAF7FD 45%,
                            #F7FCFF 100%
                    );

            position: relative;
        }


        /* =====================================================
           BACKGROUND AURORA
        ===================================================== */

        .aurora {

            position: fixed;

            inset: 0;

            overflow: hidden;

            pointer-events: none;

            z-index: 0;
        }


        .blob {

            position: absolute;

            border-radius: 50%;

            filter: blur(3px);

            opacity: .55;

            animation:
                    blobMove 15s ease-in-out infinite alternate;
        }


        .blob.one {

            width: 420px;
            height: 420px;

            top: -200px;
            right: -100px;

            background:
                    radial-gradient(
                            circle,
                            rgba(57,167,218,.42),
                            rgba(57,167,218,0)
                    );
        }


        .blob.two {

            width: 500px;
            height: 500px;

            bottom: -270px;
            left: -170px;

            background:
                    radial-gradient(
                            circle,
                            rgba(2,113,178,.25),
                            transparent 68%
                    );

            animation-delay: -5s;
        }


        .blob.three {

            width: 260px;
            height: 260px;

            top: 40%;
            left: 8%;

            background:
                    radial-gradient(
                            circle,
                            rgba(125,211,252,.28),
                            transparent 70%
                    );

            animation-delay: -9s;
        }


        @keyframes blobMove {

            0% {

                transform:
                        translate(0,0)
                        scale(1);
            }

            50% {

                transform:
                        translate(35px,-25px)
                        scale(1.08);
            }

            100% {

                transform:
                        translate(-25px,30px)
                        scale(.95);
            }
        }


        /* =====================================================
           FLOATING CIRCLES
        ===================================================== */

        .floating {

            position: fixed;

            border-radius: 50%;

            pointer-events: none;

            z-index: 1;

            border: 1px solid
            rgba(255,255,255,.65);

            background:
                    rgba(255,255,255,.20);

            backdrop-filter: blur(8px);

            animation:
                    float 8s ease-in-out infinite;
        }


        .floating.f1 {

            width: 65px;
            height: 65px;

            top: 15%;

            left: 12%;
        }


        .floating.f2 {

            width: 25px;
            height: 25px;

            top: 27%;

            right: 16%;

            animation-delay: -2s;
        }


        .floating.f3 {

            width: 45px;
            height: 45px;

            bottom: 17%;

            right: 10%;

            animation-delay: -4s;
        }


        .floating.f4 {

            width: 18px;
            height: 18px;

            bottom: 28%;

            left: 18%;

            animation-delay: -6s;
        }


        @keyframes float {

            0%,100% {

                transform:
                        translateY(0)
                        rotate(0deg);
            }

            50% {

                transform:
                        translateY(-25px)
                        rotate(15deg);
            }
        }


        /* =====================================================
           MAIN
        ===================================================== */

        .container {

            width: 100%;

            max-width: 500px;

            position: relative;

            z-index: 5;
        }


        /* =====================================================
           CARD
        ===================================================== */

        .card {

            position: relative;

            overflow: hidden;

            padding:
                    35px
                    34px
                    27px;

            border-radius: 38px;

            background:
                    linear-gradient(
                            145deg,
                            rgba(255,255,255,.88),
                            rgba(255,255,255,.62)
                    );

            border:
                    1px solid
                    rgba(255,255,255,.85);

            backdrop-filter:
                    blur(25px);

            -webkit-backdrop-filter:
                    blur(25px);

            box-shadow:
                    var(--shadow),

                    inset
                    0 1px 0
                    rgba(255,255,255,.9);

            animation:
                    cardIn .8s
                    cubic-bezier(.16,1,.3,1);
        }


        @keyframes cardIn {

            from {

                opacity: 0;

                transform:
                        translateY(40px)
                        scale(.94)
                        rotateX(5deg);
            }

            to {

                opacity: 1;

                transform:
                        translateY(0)
                        scale(1)
                        rotateX(0);
            }
        }


        /* =====================================================
           CARD LIGHT
        ===================================================== */

        .card::before {

            content: "";

            position: absolute;

            width: 230px;
            height: 230px;

            top: -130px;
            right: -100px;

            border-radius: 50%;

            background:
                    radial-gradient(
                            circle,
                            rgba(57,167,218,.25),
                            transparent 68%
                    );

            pointer-events: none;
        }


        .card::after {

            content: "";

            position: absolute;

            width: 180px;
            height: 180px;

            bottom: -120px;
            left: -90px;

            border-radius: 50%;

            background:
                    radial-gradient(
                            circle,
                            rgba(2,113,178,.14),
                            transparent 68%
                    );

            pointer-events: none;
        }


        /* =====================================================
           BRAND
        ===================================================== */

        .brand {

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 10px;

            margin-bottom: 28px;
        }


        .brand-icon {

            width: 42px;
            height: 42px;

            border-radius: 14px;

            display: flex;

            align-items: center;
            justify-content: center;

            color: white;

            font-family: Arial, sans-serif;

            font-size: 21px;

            font-weight: 900;

            background:
                    linear-gradient(
                            135deg,
                            var(--blue),
                            var(--blue-dark)
                    );

            box-shadow:
                    0 10px 25px
                    rgba(57,167,218,.35);

            transform:
                    rotate(-6deg);
        }


        .brand-text {

            font-family:
                    Arial,
                    sans-serif;

            font-size: 25px;

            font-weight: 900;

            letter-spacing: -.8px;

            color: var(--navy);
        }


        .brand-text span {

            color: var(--blue);
        }


        /* =====================================================
           STATUS
        ===================================================== */

        .status {

            width: fit-content;

            margin:
                    0 auto
                    22px;

            padding:
                    8px
                    14px;

            border-radius: 100px;

            display: flex;

            align-items: center;

            gap: 8px;

            background:
                    rgba(57,167,218,.09);

            border:
                    1px solid
                    rgba(57,167,218,.17);

            color:
                    var(--blue-dark);

            font-size: 11px;

            font-weight: 800;
        }


        .status-dot {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: #20C997;

            box-shadow:
                    0 0 0 4px
                    rgba(32,201,151,.12);
        }


        /* =====================================================
           LOGO
        ===================================================== */

        .logo-area {

            position: relative;

            width: 135px;
            height: 135px;

            margin:
                    0 auto
                    28px;
        }


        .logo-glow {

            position: absolute;

            inset: -25px;

            border-radius: 50%;

            background:
                    radial-gradient(
                            circle,
                            rgba(57,167,218,.25),
                            transparent 67%
                    );

            animation:
                    glowPulse 3s ease-in-out infinite;
        }


        @keyframes glowPulse {

            0%,100% {
                transform: scale(.95);
                opacity: .7;
            }

            50% {
                transform: scale(1.08);
                opacity: 1;
            }
        }


        .logo-ring {

            position: absolute;

            inset: 0;

            border-radius: 50%;

            padding: 4px;

            background:
                    conic-gradient(
                            from 0deg,
                            var(--blue),
                            #9BE2FF,
                            var(--blue-dark),
                            var(--blue)
                    );

            animation:
                    ringRotate 10s linear infinite;
        }


        @keyframes ringRotate {

            to {
                transform: rotate(360deg);
            }
        }


        .logo-holder {

            width: 100%;
            height: 100%;

            padding: 7px;

            border-radius: 50%;

            background: white;

            position: relative;

            z-index: 2;

            box-shadow:
                    0 15px 35px
                    rgba(41,58,83,.16);
        }


        .logo {

            width: 100%;
            height: 100%;

            display: block;

            object-fit: cover;

            border-radius: 50%;
        }


        /* =====================================================
           TEXT
        ===================================================== */

        .eyebrow {

            color: var(--muted);

            font-size: 13px;

            font-weight: 500;

            margin-bottom: 5px;
        }


        .salon-name {

            display: block;

            color: var(--navy);

            font-size: 31px;

            font-weight: 900;

            line-height: 1.35;

            margin-bottom: 12px;

            background:
                    linear-gradient(
                            135deg,
                            var(--navy),
                            var(--blue-dark)
                    );

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;
        }


        .description {

            color: var(--muted);

            font-size: 13px;

            line-height: 2;

            margin-bottom: 27px;
        }


        /* =====================================================
           BUTTONS
        ===================================================== */

        .actions {

            display: flex;

            flex-direction: column;

            gap: 12px;
        }


        .btn {

            position: relative;

            min-height: 58px;

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 11px;

            border-radius: 18px;

            padding:
                    13px
                    20px;

            text-decoration: none;

            font-family: inherit;

            font-size: 14px;

            font-weight: 800;

            overflow: hidden;

            transition:
                    .3s cubic-bezier(.16,1,.3,1);
        }


        .btn::before {

            content: "";

            position: absolute;

            width: 80px;
            height: 160px;

            top: -50px;
            right: -40px;

            background:
                    rgba(255,255,255,.15);

            transform:
                    rotate(25deg);

            transition: .4s;
        }


        .btn:hover::before {

            right: 110%;
        }


        .btn:hover {

            transform:
                    translateY(-3px);
        }


        .btn-primary {

            color: white;

            background:
                    linear-gradient(
                            135deg,
                            var(--blue),
                            var(--blue-dark)
                    );

            box-shadow:
                    0 15px 32px
                    rgba(57,167,218,.28);
        }


        .btn-primary:hover {

            box-shadow:
                    0 20px 42px
                    rgba(57,167,218,.35);
        }


        .btn-secondary {

            color: var(--navy);

            background:
                    rgba(255,255,255,.75);

            border:
                    1px solid
                    rgba(57,167,218,.15);

            box-shadow:
                    0 8px 22px
                    rgba(41,58,83,.06);
        }


        .btn-secondary:hover {

            background: white;

            border-color:
                    rgba(57,167,218,.35);

            box-shadow:
                    0 13px 30px
                    rgba(41,58,83,.10);
        }


        .btn-accent {

            color: white;

            background:
                    linear-gradient(
                            135deg,
                            var(--navy),
                            #17263B
                    );

            box-shadow:
                    0 14px 30px
                    rgba(41,58,83,.20);
        }


        .btn-icon {

            width: 34px;
            height: 34px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 11px;

            font-size: 17px;

            flex-shrink: 0;
        }


        .btn-primary .btn-icon {

            background:
                    rgba(255,255,255,.15);
        }


        .btn-secondary .btn-icon {

            color: var(--blue-dark);

            background:
                    rgba(57,167,218,.10);
        }


        .btn-accent .btn-icon {

            background:
                    rgba(255,255,255,.10);
        }


        /* =====================================================
           DIVIDER
        ===================================================== */

        .divider {

            display: flex;

            align-items: center;

            gap: 12px;

            color: #94A3B8;

            font-size: 10px;

            margin:
                    27px 0
                    16px;
        }


        .divider::before,
        .divider::after {

            content: "";

            height: 1px;

            flex: 1;

            background:
                    linear-gradient(
                            90deg,
                            transparent,
                            #DCE8EF
                    );
        }


        .divider::after {

            background:
                    linear-gradient(
                            90deg,
                            #DCE8EF,
                            transparent
                    );
        }


        /* =====================================================
           ERROR
        ===================================================== */

        .error-visual {

            position: relative;

            width: 115px;
            height: 115px;

            margin:
                    5px auto
                    25px;
        }


        .error-glow {

            position: absolute;

            inset: -15px;

            border-radius: 50%;

            background:
                    radial-gradient(
                            circle,
                            rgba(57,167,218,.17),
                            transparent 70%
                    );
        }


        .error-circle {

            position: relative;

            width: 100%;
            height: 100%;

            border-radius: 35px;

            display: flex;

            align-items: center;
            justify-content: center;

            font-size: 40px;

            font-weight: 900;

            color: var(--blue-dark);

            background:
                    linear-gradient(
                            145deg,
                            #FFFFFF,
                            #EAF8FD
                    );

            border:
                    1px solid
                    rgba(57,167,218,.18);

            box-shadow:
                    0 20px 40px
                    rgba(57,167,218,.16);
        }


        .error-title {

            font-size: 26px;

            font-weight: 900;

            color: var(--navy);

            margin-bottom: 12px;
        }


        .error-text {

            color: var(--muted);

            font-size: 13px;

            line-height: 2;

            margin-bottom: 27px;
        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .footer {

            position: relative;

            z-index: 2;

            margin-top: 25px;

            padding-top: 19px;

            border-top:
                    1px solid
                    rgba(41,58,83,.07);

            text-align: center;

            color: #8B9AAC;

            font-size: 10px;

            line-height: 1.8;
        }


        .footer-brand {

            margin-top: 5px;

            font-family: Arial, sans-serif;

            font-size: 13px;

            font-weight: 900;

            color: var(--blue-dark);

            letter-spacing: .3px;
        }


        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 520px) {

            body {

                padding: 13px;
            }


            .card {

                padding:
                        28px
                        20px
                        23px;

                border-radius: 30px;
            }


            .brand {

                margin-bottom: 22px;
            }


            .brand-text {

                font-size: 23px;
            }


            .logo-area {

                width: 112px;
                height: 112px;

                margin-bottom: 24px;
            }


            .salon-name {

                font-size: 26px;
            }


            .description {

                font-size: 12px;

                margin-bottom: 23px;
            }


            .btn {

                min-height: 55px;

                font-size: 13px;
            }


            .floating.f1 {

                left: -20px;
            }


            .floating.f3 {

                right: -15px;
            }
        }


        /* =====================================================
           REDUCED MOTION
        ===================================================== */

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {

                animation-duration: .01ms !important;

                transition-duration: .01ms !important;
            }
        }

    </style>

</head>


<body>


<!-- =========================================================
     BACKGROUND
========================================================= -->

<div class="aurora">

    <div class="blob one"></div>

    <div class="blob two"></div>

    <div class="blob three"></div>

</div>


<div class="floating f1"></div>

<div class="floating f2"></div>

<div class="floating f3"></div>

<div class="floating f4"></div>



<!-- =========================================================
     MAIN
========================================================= -->

<div class="container">

    <div class="card">


        <!-- =====================================================
             VALID SERVICE
        ====================================================== -->

        



        <!-- =====================================================
             INVALID SERVICE
        ====================================================== -->

        <div>


            <!-- BRAND -->

            <div class="brand">

                <div class="brand-icon">
                    T
                </div>

                <div class="brand-text">
                    Tay<span>mo</span>
                </div>

            </div>


            <!-- ERROR VISUAL -->

            <div class="error-visual">

                <div class="error-glow"></div>

                <div class="error-circle">
                    ?
                </div>

            </div>


            <h1 class="error-title">
                کد اتصال پیدا نشد
            </h1>


            <p class="error-text">

                کد معرفی سالن وارد شده صحیح نیست
                یا این سالن در تایمو فعال نمی‌باشد.

                <br>

                اپلیکیشن تایمو را نصب کنید و
                کد معرفی سالن را داخل برنامه وارد نمایید.

            </p>


            <!-- ACTIONS -->

            <div class="actions">


                <a
                        href="/download/app.apk"
                        class="btn btn-primary"
                >

                    <span class="btn-icon">
                        ↓
                    </span>

                    <span>
                        دانلود اپلیکیشن تایمو
                    </span>

                </a>


                <a
                        href="https://taymo.ir/app/#/connect?serviceId=sitemap.xml"
                        class="btn btn-secondary"
                >

                    <span class="btn-icon">
                        ◉
                    </span>

                    <span>
                        ورود به نسخه وب
                    </span>

                </a>


            </div>

        </div>



        <!-- =====================================================
             FOOTER
        ====================================================== -->

        <div class="footer">

            تجربه‌ای ساده، مدرن و هوشمند
            برای مدیریت نوبت‌های زیبایی

            <div class="footer-brand">
                Taymo
            </div>

        </div>


    </div>

</div>


</body>

</html>
