Profile Settings
Profile Settings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Settings</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<div class="min-h-screen flex">
<!-- 侧边栏 -->
<aside class="w-64 bg-white shadow-lg fixed h-full overflow-y-auto">
<div class="p-6">
<!-- Logo -->
<div class="flex items-center gap-3 mb-8">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold">H</span>
</div>
<h1 class="text-xl font-bold">LOGO</h1>
</div>
<!-- 导航菜单 -->
<nav class="space-y-6">
<div>
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-4">MAIN</p>
<div class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h7"/>
</svg>
<span>All Templates</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
</svg>
<span>My Projects</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
</svg>
<span>Chat UI</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span>Assistant UI</span>
</a>
</div>
</div>
<div>
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-4">OTHER PAGES</p>
<div class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span>Prompt Page</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
</svg>
<span>Register</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
</svg>
<span>Sign In</span>
</a>
</div>
</div>
<div>
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-4">ADMIN PAGES</p>
<div class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
<span>All Templates</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>New Template</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
<span>Edit Template</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
<span>Users Overview</span>
</a>
</div>
</div>
</nav>
<!-- Credits 部分 -->
<div class="mt-8 p-4 bg-gray-50 rounded-xl">
<div class="flex items-center justify-between mb-3">
<h3 class="font-semibold">Credits</h3>
<span class="text-xs text-gray-500">70% used</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-3">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 70%"></div>
</div>
<p class="text-sm text-gray-600 mb-3">3264/100,000 credits used</p>
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
Set API Key
</button>
</div>
</div>
</aside>
<!-- 主要内容 -->
<main class="ml-64 flex-1 p-8">
<!-- 头部 -->
<header class="flex justify-between items-center mb-8">
<div>
<h1 class="text-2xl font-bold text-gray-900">Profile Settings</h1>
</div>
<div class="flex items-center space-x-3">
<img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full border-2 border-gray-200">
<span class="font-medium text-gray-700">Adela Parkson</span>
</div>
</header>
<!-- 设置表单 -->
<div class="space-y-6">
<!-- 账户类型 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold mb-4">Account type:</h2>
<div class="flex gap-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Administrator</button>
<button class="px-4 py-2 border border-gray-200 rounded-lg text-gray-700">Member</button>
</div>
</div>
<!-- 账户设置 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold mb-4">Account Settings</h2>
<p class="text-gray-600 mb-6">Here you can change user account information</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
<input type="email" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Job</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div class="mt-6">
<label class="block text-sm font-medium text-gray-700 mb-2">About Me</label>
<textarea class="w-full p-3 border border-gray-200 rounded-lg h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"></textarea>
</div>
</div>
<!-- 社交资料 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold mb-4">Social Profiles</h2>
<p class="text-gray-600 mb-6">Here you can set user social profiles</p>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Twitter Username</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Facebook Username</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Github Username</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
</div>
<!-- 修改密码 -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-lg font-semibold mb-4">Change password</h2>
<p class="text-gray-600 mb-6">Here you can set your new password</p>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Old Password</label>
<input type="password" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
<input type="password" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">New Password Confirmation</label>
<input type="password" class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex justify-between">
<button class="px-6 py-3 text-red-600 hover:text-red-700 font-medium">
Delete Account
</button>
<button class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Save Changes
</button>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-8 text-center text-sm text-gray-600">
<p>© 2024 All Rights Reserved.</p>
<div class="mt-2 space-x-4">
<a href="#" class="hover:text-blue-600">Homepage</a>
<a href="#" class="hover:text-blue-600">License</a>
<a href="#" class="hover:text-blue-600">Terms of Use</a>
<a href="#" class="hover:text-blue-600">Privacy Policy</a>
</div>
</footer>
</main>
</div>
</body>
</html>
Batch Video Generator
AI Video Generator
Video Generator with Templates
Video Generator with Timeline
Copied to clipboard