web_front_end
/
Aisoco


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
    <title>Delete Account - Aisoco</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
    <!-- Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- Google Fonts - Inter -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Tailwind Configuration -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#0066CC',
              secondary: '#333333',
              light: '#F5F5F7',
              dark: '#1D1D1F',
            },
            fontFamily: {
              sans: ['Inter', 'sans-serif'],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .transition-smooth {
          transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
      }
    </style>
  </head>

  <body class="font-sans bg-light text-dark antialiased min-h-screen">
    <!-- 页面头部 -->
    <header class="bg-white shadow-sm">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <a href="index.html" class="inline-flex items-center">
          <img
            src="./img/aisoco_logo.png"
            alt="Aisoco Logo"
            class="h-10 object-contain"
          />
        </a>
      </div>
    </header>

    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-16">
      <div class="max-w-3xl mx-auto">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
          <div
            class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4"
          >
            <i class="fa fa-user-times text-3xl text-red-500"></i>
          </div>
          <h1 class="text-2xl md:text-3xl font-semibold text-dark mb-2">
            Request Account Deletion
          </h1>
          <p class="text-gray-600">Aisoco - AI & Social & Commerce Platform</p>
        </div>

        <!-- 主要内容卡片 -->
        <div class="bg-white rounded-2xl shadow-lg p-6 md:p-10">
          <!-- 重要提示 -->
          <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-8">
            <div class="flex items-start">
              <i
                class="fa fa-exclamation-triangle text-amber-500 mt-1 mr-3"
              ></i>
              <div>
                <h3 class="font-semibold text-amber-800 mb-1">
                  Important Notice
                </h3>
                <p class="text-sm text-amber-700">
                  Account deletion is permanent and cannot be undone. Please
                  read the information below carefully before submitting your
                  request.
                </p>
              </div>
            </div>
          </div>

          <!-- 删除账号步骤 -->
          <section class="mb-8">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
              <span
                class="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-sm mr-3"
                >1</span
              >
              Steps to Request Account Deletion
            </h2>
            <div class="bg-gray-50 rounded-xl p-5 ml-11">
              <ol class="space-y-3 text-gray-700">
                <li class="flex items-start">
                  <span
                    class="inline-flex items-center justify-center w-6 h-6 bg-primary/10 text-primary rounded-full text-xs font-medium mr-3 mt-0.5 flex-shrink-0"
                    >1</span
                  >
                  <span
                    >Fill out the account deletion request form below with your
                    registered email address.</span
                  >
                </li>
                <li class="flex items-start">
                  <span
                    class="inline-flex items-center justify-center w-6 h-6 bg-primary/10 text-primary rounded-full text-xs font-medium mr-3 mt-0.5 flex-shrink-0"
                    >2</span
                  >
                  <span
                    >You will receive a verification email to confirm your
                    identity.</span
                  >
                </li>
                <li class="flex items-start">
                  <span
                    class="inline-flex items-center justify-center w-6 h-6 bg-primary/10 text-primary rounded-full text-xs font-medium mr-3 mt-0.5 flex-shrink-0"
                    >3</span
                  >
                  <span
                    >Click the confirmation link in the email to verify your
                    deletion request.</span
                  >
                </li>
                <li class="flex items-start">
                  <span
                    class="inline-flex items-center justify-center w-6 h-6 bg-primary/10 text-primary rounded-full text-xs font-medium mr-3 mt-0.5 flex-shrink-0"
                    >4</span
                  >
                  <span
                    >Your account and associated data will be deleted within
                    <strong>30 days</strong> after confirmation.</span
                  >
                </li>
              </ol>
            </div>
          </section>

          <!-- 数据删除说明 -->
          <section class="mb-8">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
              <span
                class="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-sm mr-3"
                >2</span
              >
              Data That Will Be Deleted
            </h2>
            <div class="ml-11">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-red-50 rounded-xl p-4">
                  <h4 class="font-medium text-red-800 mb-2 flex items-center">
                    <i class="fa fa-trash-o mr-2"></i>Permanently Deleted
                  </h4>
                  <ul class="text-sm text-red-700 space-y-1.5">
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Account profile
                      information
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Personal
                      preferences and settings
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Shopping cart and
                      wishlist
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Social connections
                      and followers
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Posts, comments,
                      and reviews
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-check mr-2 text-xs"></i>Chat history and
                      messages
                    </li>
                  </ul>
                </div>
                <div class="bg-blue-50 rounded-xl p-4">
                  <h4 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fa fa-archive mr-2"></i>Retained for Legal
                    Compliance
                  </h4>
                  <ul class="text-sm text-blue-700 space-y-1.5">
                    <li class="flex items-center">
                      <i class="fa fa-clock-o mr-2 text-xs"></i>Transaction
                      records (7 years)
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-clock-o mr-2 text-xs"></i>Payment
                      information (7 years)
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-clock-o mr-2 text-xs"></i>Tax-related
                      documents (7 years)
                    </li>
                    <li class="flex items-center">
                      <i class="fa fa-clock-o mr-2 text-xs"></i>Legal dispute
                      records (as required)
                    </li>
                  </ul>
                  <p class="text-xs text-blue-600 mt-3">
                    * Retention periods are based on legal and regulatory
                    requirements.
                  </p>
                </div>
              </div>
            </div>
          </section>

          <!-- 删除请求表单 -->
          <section>
            <h2 class="text-xl font-semibold mb-4 flex items-center">
              <span
                class="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-sm mr-3"
                >3</span
              >
              Submit Deletion Request
            </h2>
            <div class="ml-11">
              <form id="delete-account-form" class="space-y-5">
                <div>
                  <label
                    for="username"
                    class="block text-sm font-medium text-gray-700 mb-1.5"
                  >
                    Username <span class="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    id="username"
                    name="username"
                    required
                    placeholder="Enter your username"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-smooth"
                  />
                </div>

                <div>
                  <label
                    for="password"
                    class="block text-sm font-medium text-gray-700 mb-1.5"
                  >
                    Password <span class="text-red-500">*</span>
                  </label>
                  <input
                    type="password"
                    id="password"
                    name="password"
                    required
                    placeholder="Enter your password"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-smooth"
                  />
                </div>

                <div>
                  <label
                    for="reason"
                    class="block text-sm font-medium text-gray-700 mb-1.5"
                  >
                    Reason for Deletion (Optional)
                  </label>
                  <select
                    id="reason"
                    name="reason"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-smooth"
                  >
                    <option value="">Select a reason</option>
                    <option value="no-longer-use">
                      I no longer use this service
                    </option>
                    <option value="privacy-concerns">Privacy concerns</option>
                    <option value="too-many-emails">
                      Too many emails/notifications
                    </option>
                    <option value="found-alternative">
                      Found an alternative service
                    </option>
                    <option value="temporary-account">
                      This was a temporary account
                    </option>
                    <option value="other">Other</option>
                  </select>
                </div>

                <div>
                  <label
                    for="comments"
                    class="block text-sm font-medium text-gray-700 mb-1.5"
                  >
                    Additional Comments (Optional)
                  </label>
                  <textarea
                    id="comments"
                    name="comments"
                    rows="3"
                    placeholder="Any additional information you'd like to share"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-smooth resize-none"
                  ></textarea>
                </div>

                <!-- 确认复选框 -->
                <div class="bg-gray-50 rounded-lg p-4">
                  <label class="flex items-start cursor-pointer">
                    <input
                      type="checkbox"
                      id="confirm-deletion"
                      name="confirm-deletion"
                      required
                      class="mt-1 mr-3 w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
                    />
                    <span class="text-sm text-gray-700">
                      I understand that account deletion is
                      <strong>permanent and irreversible</strong>. I have read
                      and understood the data deletion policy above, and I
                      confirm that I want to delete my Aisoco account.
                    </span>
                  </label>
                </div>

                <!-- 提交按钮 -->
                <button
                  type="submit"
                  class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-3.5 px-6 rounded-lg transition-smooth flex items-center justify-center"
                >
                  <i class="fa fa-paper-plane mr-2"></i>
                  Submit Deletion Request
                </button>
              </form>

              <!-- 其他联系方式 -->
              <div class="mt-6 pt-6 border-t border-gray-200 text-center">
                <p class="text-sm text-gray-600 mb-2">
                  Need help? Contact our support team:
                </p>
                <a
                  href="mailto:support@aisoco.com"
                  class="text-primary hover:underline font-medium"
                >
                  <i class="fa fa-envelope mr-1"></i>support@aisoco.com
                </a>
              </div>
            </div>
          </section>
        </div>

        <!-- 页脚信息 -->
        <div class="mt-8 text-center text-sm text-gray-500">
          <p>
            <a href="index.html" class="text-primary hover:underline">
              <i class="fa fa-arrow-left mr-1"></i>Back to Aisoco Homepage
            </a>
          </p>
          <p class="mt-4">&copy; 2025 Aisoco. All rights reserved.</p>
        </div>
      </div>
    </main>

    <script>
      // 表单提交处理
      const deleteForm = document.getElementById('delete-account-form');

      deleteForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const confirmCheckbox =
          document.getElementById('confirm-deletion').checked;

        if (!username) {
          alert('Please enter your username.');
          return;
        }

        if (!password) {
          alert('Please enter your password.');
          return;
        }

        if (!confirmCheckbox) {
          alert('Please confirm that you understand the deletion policy.');
          return;
        }

        // 获取提交按钮
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        // 显示加载状态
        submitBtn.disabled = true;
        submitBtn.innerHTML =
          '<i class="fa fa-spinner fa-spin mr-2"></i>Processing...';

        // 模拟提交请求
        setTimeout(() => {
          alert(
            'Your account deletion request has been submitted successfully!\n\nOur team will review your request and process it within 30 business days. You will receive a notification once the deletion is complete.'
          );

          // 重置表单
          deleteForm.reset();
          submitBtn.disabled = false;
          submitBtn.innerHTML = originalText;
        }, 1500);
      });
    </script>
  </body>
</html>