AI Website Templates UI
54 ComponentsFeatures: - Responsive dashboard layouts - Reusable component templates - Standardized table and form patterns - Modal and notification templates - Navigation and sidebar components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal Style Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black">
<div class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<!-- 终端窗口 -->
<div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
<!-- 标题栏 -->
<div class="bg-gray-800 px-4 py-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-red-500 rounded-full"></span>
<span class="w-3 h-3 bg-yellow-500 rounded-full"></span>
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
</div>
<span class="text-gray-400 text-sm">bash ~ /code-generator</span>
</div>
<!-- 终端内容 -->
<div class="p-6 font-mono text-sm">
<div class="space-y-4">
<!-- 命令历史 -->
<div class="text-green-400">
<span class="text-blue-400">$</span> generate-component --type react
</div>
<div class="text-gray-300">
Initializing React component generator...
</div>
<div class="text-gray-300">
? Component name: <span class="text-white">UserProfile</span>
</div>
<div class="text-gray-300">
? Select features:
<div class="pl-4 text-white">
✓ TypeScript
✓ Styling (Tailwind)
✓ State Management
</div>
</div>
<div class="text-gray-300">
📦 Generating files...
<div class="pl-4 text-white">
✓ UserProfile.tsx
✓ UserProfile.test.tsx
✓ types.ts
</div>
</div>
<!-- 当前输入 -->
<div class="flex items-center">
<span class="text-blue-400">$</span>
<span class="ml-2 text-white animate-pulse">|</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Generator with Chat</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto">
<!-- 标题 -->
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">Interactive Code Generator</h1>
<p class="text-gray-600">Chat with AI to generate, refine and optimize your code</p>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="grid lg:grid-cols-5 divide-x divide-gray-200">
<!-- 侧边栏 -->
<div class="lg:col-span-2 border-r border-gray-200">
<div class="p-6">
<div class="space-y-6">
<!-- 语言选择 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Language & Framework</label>
<select class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Select stack...</option>
<option value="react">React.js</option>
<option value="vue">Vue.js</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
</select>
</div>
<!-- 代码类型 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Code Type</label>
<div class="grid grid-cols-2 gap-4">
<button class="p-4 border-2 border-indigo-600 rounded-lg text-center hover:bg-indigo-50 transition-colors">
<svg class="w-6 h-6 text-indigo-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
<span class="text-sm font-medium text-indigo-600">Function</span>
</button>
<button class="p-4 border-2 border-gray-200 rounded-lg text-center hover:bg-gray-50 transition-colors">
<svg class="w-6 h-6 text-gray-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
<span class="text-sm font-medium text-gray-600">Component</span>
</button>
</div>
</div>
<!-- 选项 -->
<div class="space-y-3">
<label class="block text-sm font-medium text-gray-700">Options</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">TypeScript</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">Include Tests</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">Add Documentation</span>
</label>
</div>
</div>
</div>
</div>
<!-- 聊天区域 -->
<div class="lg:col-span-3 flex flex-col h-[600px]">
<!-- 聊天记录 -->
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- AI消息 -->
<div class="flex gap-4">
<div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-white font-medium">AI</span>
</div>
<div class="flex-1">
<div class="bg-gray-100 rounded-lg p-4">
<p class="text-gray-700">Hello! I can help you generate code. What would you like to create?</p>
</div>
</div>
</div>
<!-- 用户消息 -->
<div class="flex gap-4 justify-end">
<div class="flex-1">
<div class="bg-indigo-600 rounded-lg p-4">
<p class="text-white">I need a React component for a user profile card.</p>
</div>
</div>
<div class="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-gray-600 font-medium">U</span>
</div>
</div>
</div>
<!-- 输入区域 -->
<div class="border-t border-gray-200 p-4">
<div class="flex gap-4">
<input type="text"
class="flex-1 p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Describe what you want to create...">
<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
</svg>
Generate
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!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>
Copied to clipboard