<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Account and Data Deletion Request</title>
    <meta name="description"
        content="Request deletion of your account and all related personal data. Запрос на удаление аккаунта и всех связанных персональных данных.">
    <style>
        :root {
            --bg: #f5f5f7;
            --bg-glow: rgba(120, 160, 255, 0.18);
            --card: rgba(255, 255, 255, 0.78);
            --card-strong: rgba(255, 255, 255, 0.92);
            --line: rgba(15, 23, 42, 0.09);
            --line-strong: rgba(15, 23, 42, 0.14);
            --text: #1d1d1f;
            --muted: #6e6e73;
            --accent: #0071e3;
            --accent-dark: #0062c3;
            --danger: #c9342f;
            --success-bg: rgba(52, 199, 89, 0.10);
            --success-border: rgba(52, 199, 89, 0.24);
            --success-text: #1f7a3d;
            --shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 16px;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
            background:
                radial-gradient(circle at top left, var(--bg-glow), transparent 34%),
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.9), transparent 28%),
                linear-gradient(180deg, #fbfbfd 0%, var(--bg) 100%);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            padding: 44px 16px;
        }

        .page {
            max-width: 820px;
            margin: 0 auto;
        }

        .card {
            background: var(--card);
            border: 1px solid rgba(255, 255, 255, 0.65);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
            overflow: hidden;
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
        }

        .hero {
            padding: 18px 32px 18px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
                linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(180, 204, 255, 0.24));
            color: var(--text);
            border-bottom: 1px solid var(--line);
        }

        .content {
            padding: 32px;
        }

        h1,
        h2,
        p {
            margin: 0;
        }

        h1 {
            font-size: 2.35rem;
            line-height: 1.08;
            letter-spacing: -0.03em;
            font-weight: 700;
            margin-bottom: 14px;
        }

        h2 {
            font-size: 1.25rem;
            letter-spacing: -0.02em;
            margin-bottom: 14px;
        }

        .locale {
            display: block;
            line-height: 1.55;
        }

        .locale+.locale {
            margin-top: 4px;
        }

        .locale.ru {
            color: inherit;
            opacity: 0.92;
        }

        .hero .locale.ru {
            opacity: 0.78;
        }

        .lead {
            font-size: 1.02rem;
            max-width: 650px;
            color: var(--muted);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            margin-bottom: 18px;
            border: 1px solid rgba(0, 113, 227, 0.10);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            color: var(--accent);
            font-size: 0.86rem;
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.10);
        }

        .section+.section {
            margin-top: 26px;
        }

        .info-box {
            padding: 22px 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(255, 255, 255, 0.72);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }

        .info-box p+p {
            margin-top: 10px;
        }

        ul {
            margin: 14px 0 0;
            padding-left: 20px;
            color: var(--text);
        }

        li+li {
            margin-top: 10px;
        }

        .field {
            margin-top: 20px;
        }

        label {
            display: block;
            font-weight: 600;
            letter-spacing: -0.01em;
            margin-bottom: 10px;
        }

        input[type="text"] {
            width: 100%;
            border: 1px solid rgba(29, 29, 31, 0.10);
            border-radius: 18px;
            padding: 16px 18px;
            font: inherit;
            color: var(--text);
            background: rgba(255, 255, 255, 0.92);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: var(--accent);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
        }

        .hint {
            margin-top: 10px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .checkbox {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            margin-top: 22px;
            padding: 18px 18px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(255, 255, 255, 0.72);
        }

        .checkbox input {
            margin-top: 3px;
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
            accent-color: var(--accent);
        }

        .actions {
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .button {
            appearance: none;
            border: 0;
            border-radius: 999px;
            min-width: 180px;
            padding: 15px 26px;
            font: inherit;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: #fff;
            background: linear-gradient(180deg, #0a84ff 0%, var(--accent) 100%);
            box-shadow: 0 12px 28px rgba(0, 113, 227, 0.24);
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            white-space: nowrap;
        }

        .button .locale {
            display: inline;
            line-height: 1;
        }

        .button .locale + .locale {
            margin-top: 0;
        }

        .button .locale.ru {
            opacity: 0.82;
            font-weight: 500;
        }

        .button-divider {
            display: inline-block;
            width: 1px;
            height: 16px;
            background: rgba(255, 255, 255, 0.36);
            border-radius: 999px;
        }

        .button:hover:not(:disabled) {
            background: var(--accent-dark);
            transform: translateY(-1px);
            box-shadow: 0 16px 34px rgba(0, 113, 227, 0.30);
        }

        .button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .status {
            min-height: 24px;
            font-size: 0.95rem;
            color: var(--muted);
            flex: 1 1 240px;
        }

        .status.error {
            color: var(--danger);
        }

        .success {
            display: none;
            margin-top: 24px;
            padding: 20px 22px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--success-border);
            background: var(--success-bg);
            color: var(--success-text);
        }

        .success.is-visible {
            display: block;
        }

        .footnote {
            margin-top: 20px;
            color: var(--muted);
            font-size: 0.92rem;
        }

        @media (max-width: 640px) {

            .hero,
            .content {
                padding: 24px 20px;
            }

            h1 {
                font-size: 1.8rem;
            }

            .actions {
                align-items: stretch;
            }

            .button {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <main class="page">
        <section class="card" aria-labelledby="page-title">
            <header class="hero">
                <div class="eyebrow">
                    <span class="locale en">Privacy Request</span>
                    <span class="locale ru">Запрос конфиденциальности</span>
                </div>
                <h1 id="page-title">
                    <span class="locale en">Account and Related Data Deletion Request</span>
                    <span class="locale ru">Запрос на удаление аккаунта и связанных данных</span>
                </h1>
                <p class="lead">
                    <span class="locale en">Use this page to request deletion of your account and all data related to
                        it. Once your request is confirmed, your account and related data will be permanently
                        deleted.</span>
                    <span class="locale ru">Используйте эту страницу, чтобы запросить удаление вашего аккаунта и всех
                        связанных с ним данных. После подтверждения запроса ваш аккаунт и связанные данные будут
                        удалены без возможности восстановления.</span>
                </p>
            </header>

            <div class="content">
                <section class="section info-box" aria-labelledby="instructions-title">
                    <h2 id="instructions-title">
                        <span class="locale en">What to do</span>
                        <span class="locale ru">Что нужно сделать</span>
                    </h2>
                    <p>
                        <span class="locale en">Enter the phone number or email address linked to your account, confirm
                            that you agree to permanent deletion, and continue.</span>
                        <span class="locale ru">Введите номер телефона или адрес электронной почты, привязанный к вашему
                            аккаунту, подтвердите согласие на безвозвратное удаление и нажмите продолжить.</span>
                    </p>
                    <ul>
                        <li>
                            <span class="locale en">The request covers your account and all related data associated with
                                it.</span>
                            <span class="locale ru">Запрос распространяется на ваш аккаунт и все связанные с ним
                                данные.</span>
                        </li>
                        <li>
                            <span class="locale en">Deletion is irreversible after confirmation.</span>
                            <span class="locale ru">После подтверждения удаление будет необратимым.</span>
                        </li>
                    </ul>
                </section>

                <section class="section" aria-labelledby="form-title">
                    <h2 id="form-title">
                        <span class="locale en">Deletion request form</span>
                        <span class="locale ru">Форма запроса на удаление</span>
                    </h2>

                    <form id="deletion-form" method="post" action="" novalidate>
                        <div class="field">
                            <label for="contact">
                                <span class="locale en">Phone number or email address</span>
                                <span class="locale ru">Номер телефона или адрес электронной почты</span>
                            </label>
                            <input id="contact" name="contact" type="text" autocomplete="email" inputmode="email"
                                placeholder="name@example.com / +1 555 123 4567" required
                                aria-describedby="contact-hint">
                            <p id="contact-hint" class="hint">
                                <span class="locale en">Enter the phone number or email that you used for
                                    registration.</span>
                                <span class="locale ru">Укажите номер телефона или email, который вы использовали при
                                    регистрации.</span>
                            </p>
                        </div>

                        <div class="checkbox">
                            <input id="consent" name="consent" type="checkbox" required>
                            <label for="consent">
                                <span class="locale en">I agree to delete data about my account and all related data
                                    without the possibility of recovery.</span>
                                <span class="locale ru">Я согласен на удаление данных о моем аккаунте и всех связанных
                                    данных без возможности восстановления.</span>
                            </label>
                        </div>

                        <div class="actions">
                            <button id="submit-button" class="button" type="submit" disabled>
                                <span class="locale en">Continue</span>
                                <span class="button-divider" aria-hidden="true"></span>
                                <span class="locale ru">Продолжить</span>
                            </button>
                            <div id="status" class="status" aria-live="polite"></div>
                        </div>
                    </form>

                    <div id="success-message" class="success" aria-live="polite">
                        <p>
                            <span class="locale en">Within 24 hours, a confirmation request will be sent to your email
                                address or phone number. As soon as you confirm the deletion, your account data and
                                related data will be deleted.</span>
                            <span class="locale ru">В течение 24 часов на вашу электронную почту или номер телефона
                                будет отправлен запрос на подтверждение удаления. Сразу после подтверждения ваши данные
                                аккаунта и связанные данные будут удалены.</span>
                        </p>
                    </div>

                </section>
            </div>
        </section>
    </main>

    <script>
        (function () {
            var form = document.getElementById('deletion-form');
            var contactInput = document.getElementById('contact');
            var consentCheckbox = document.getElementById('consent');
            var submitButton = document.getElementById('submit-button');
            var status = document.getElementById('status');
            var successMessage = document.getElementById('success-message');
            var isSubmitting = false;

            function isValidContact(value) {
                var trimmed = value.trim();
                var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                var phonePattern = /^\+?[0-9()\-\s]{7,20}$/;
                return emailPattern.test(trimmed) || phonePattern.test(trimmed);
            }

            function updateButtonState() {
                submitButton.disabled = isSubmitting || !consentCheckbox.checked;
            }

            function setStatus(message, isError) {
                status.textContent = message;
                status.className = isError ? 'status error' : 'status';
            }

            contactInput.addEventListener('input', function () {
                contactInput.setCustomValidity('');
                successMessage.classList.remove('is-visible');
                setStatus('', false);
            });

            consentCheckbox.addEventListener('change', function () {
                successMessage.classList.remove('is-visible');
                setStatus('', false);
                updateButtonState();
            });

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                successMessage.classList.remove('is-visible');

                if (!isValidContact(contactInput.value)) {
                    contactInput.setCustomValidity('Please enter a valid email address or phone number.');
                    contactInput.reportValidity();
                    setStatus('Please enter a valid email address or phone number. / Пожалуйста, введите корректный email или номер телефона.', true);
                    return;
                }

                contactInput.setCustomValidity('');
                setStatus('Submitting request... / Отправка запроса...', false);
                isSubmitting = true;
                updateButtonState();

                window.fetch(window.location.href, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    body: 'contact=' + encodeURIComponent(contactInput.value.trim()),
                    credentials: 'same-origin'
                }).then(function (response) {
                    if (response.status !== 200) {
                        throw new Error('Request failed');
                    }

                    setStatus('Request received. / Запрос получен.', false);
                    successMessage.classList.add('is-visible');
                    isSubmitting = false;
                    form.reset();
                    updateButtonState();
                }).catch(function () {
                    isSubmitting = false;
                    setStatus('Failed to send request. Please try again later. / Не удалось отправить запрос. Пожалуйста, попробуйте позже.', true);
                    updateButtonState();
                }).then(function () {
                    updateButtonState();
                });
            });

            updateButtonState();
        }());
    </script>
</body>

</html>