|
@@ -0,0 +1,426 @@
|
|
|
|
|
+<!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">© 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>
|
