3518fc8ece
Phase 4 completion: - Add ApprovalQueue component for managing pending approvals - Add ExecutionResult component for displaying hand/workflow results - Update Sidebar navigation to use unified AutomationPanel - Replace separate 'hands' and 'workflow' tabs with single 'automation' tab - Fix TypeScript type safety issues with unknown types in JSX expressions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
489 lines
28 KiB
HTML
489 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WorkBuddy - 新建任务</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
/* Dropdown animations */
|
|
.dropdown-enter {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(-10px);
|
|
}
|
|
.dropdown-enter-active {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
|
|
}
|
|
|
|
/* Gradient text effect for title */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Custom shadow for cards */
|
|
.card-shadow {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
/* Input area focus ring */
|
|
.input-focus-ring:focus-within {
|
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
/* Skill tag hover effect */
|
|
.skill-tag {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.skill-tag:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Robot animation */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.robot-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 h-screen flex text-gray-800">
|
|
|
|
<!-- Left Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
|
|
<!-- App Header -->
|
|
<div class="h-14 flex items-center px-4 border-b border-gray-100">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<span class="font-bold text-lg text-gray-800">CodeBuddy</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Items -->
|
|
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
|
<!-- Search -->
|
|
<div class="px-2 mb-4">
|
|
<div class="relative">
|
|
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
|
|
<input type="text" placeholder="搜索任务"
|
|
class="w-full pl-9 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-colors">
|
|
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400">
|
|
<i class="fas fa-sliders-h text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Task Button -->
|
|
<button class="w-full flex items-center gap-3 px-3 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition-colors mb-2">
|
|
<i class="far fa-check-square text-emerald-600"></i>
|
|
<span>新建任务</span>
|
|
</button>
|
|
|
|
<!-- Nav Items -->
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
|
<i class="fas fa-robot text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
|
<span>Claw</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
|
<i class="fas fa-user-tie text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
|
<span>专家</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
|
<i class="fas fa-wand-magic-sparkles text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
|
<span>技能</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
|
<i class="fas fa-puzzle-piece text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
|
<span>插件</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors group">
|
|
<i class="far fa-clock text-gray-400 group-hover:text-emerald-600 w-5"></i>
|
|
<span>自动化</span>
|
|
</a>
|
|
|
|
<!-- Empty State -->
|
|
<div class="mt-8 px-4 text-center">
|
|
<p class="text-gray-500 text-sm mb-1">暂无任务</p>
|
|
<p class="text-gray-400 text-xs">点击上方按钮开始新任务</p>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- User Profile -->
|
|
<div class="p-4 border-t border-gray-200">
|
|
<button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold">
|
|
<i class="fas fa-robot text-sm"></i>
|
|
</div>
|
|
<span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
|
|
<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col h-full relative">
|
|
<!-- Top Bar -->
|
|
<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold">
|
|
<i class="fas fa-code text-sm"></i>
|
|
</div>
|
|
<span class="font-bold text-lg">WorkBuddy</span>
|
|
<button class="ml-2 p-1.5 hover:bg-gray-100 rounded-lg text-gray-400">
|
|
<i class="far fa-clone text-sm"></i>
|
|
</button>
|
|
</div>
|
|
<div class="text-sm text-gray-600 font-medium">Agents</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
|
|
<i class="fas fa-minus text-xs"></i>
|
|
</button>
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500">
|
|
<i class="far fa-square text-xs"></i>
|
|
</button>
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-500 hover:text-red-500">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Area -->
|
|
<div class="flex-1 overflow-y-auto bg-white">
|
|
<div class="max-w-5xl mx-auto px-8 py-12">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="text-center mb-12">
|
|
<!-- Robot Mascot -->
|
|
<div class="robot-float mb-6 inline-block">
|
|
<div class="w-24 h-24 mx-auto relative">
|
|
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw&backgroundColor=ffdfbf"
|
|
alt="Claw Robot"
|
|
class="w-full h-full drop-shadow-2xl">
|
|
<!-- Decorative elements -->
|
|
<div class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-xs animate-pulse">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2 tracking-tight">
|
|
Claw <span class="text-red-500 mx-1"><i class="fas fa-claw"></i></span> Your Ideas
|
|
</h1>
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-4 tracking-tight">
|
|
Into Reality
|
|
<span class="inline-block ml-1 text-emerald-400 animate-pulse">*</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Feature Cards -->
|
|
<div class="grid grid-cols-2 gap-6 mb-10 max-w-3xl mx-auto">
|
|
<!-- Code Development Card -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-gray-200 transition-all">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-gray-400 text-white text-xs px-4 py-1 rounded-b-lg font-medium">
|
|
代码开发
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<h3 class="text-gray-500 font-medium mb-2">面向代码与工程交付</h3>
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-100/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</div>
|
|
|
|
<!-- Daily Office Card -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 card-shadow border border-gray-100 relative overflow-hidden group hover:border-indigo-200 transition-all">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-indigo-500 text-white text-xs px-4 py-1 rounded-b-lg font-medium shadow-lg shadow-indigo-200">
|
|
日常办公
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<h3 class="text-indigo-600 font-medium mb-3">面向日常工作与知识生产</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed px-2">
|
|
将整理、写作、规划与跟进交给 AI 智能体推进，并获得结构化、可落地的工作成果。
|
|
</p>
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-indigo-50/30 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="bg-white border border-gray-200 rounded-2xl input-focus-ring transition-all">
|
|
<!-- Input Toolbar -->
|
|
<div class="flex items-center gap-2 px-4 py-3 border-b border-gray-100">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="@提及">
|
|
<i class="fas fa-at"></i>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
|
|
<i class="fas fa-paperclip"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Text Input -->
|
|
<div class="px-4 py-3">
|
|
<textarea
|
|
placeholder="输入消息..."
|
|
class="w-full h-24 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
|
|
style="min-height: 80px;"></textarea>
|
|
</div>
|
|
|
|
<!-- Bottom Toolbar -->
|
|
<div class="px-4 py-3 flex items-center justify-between border-t border-gray-100">
|
|
<div class="flex items-center gap-2">
|
|
<!-- Craft Dropdown -->
|
|
<div class="relative" id="craftDropdown">
|
|
<button onclick="toggleDropdown('craftDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
|
<i class="far fa-window-maximize text-xs"></i>
|
|
<span>Craft</span>
|
|
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
|
</button>
|
|
<!-- Dropdown Menu -->
|
|
<div class="hidden absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1 z-50">
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
|
<i class="far fa-window-maximize text-gray-400"></i>
|
|
<span>Craft</span>
|
|
<i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
|
|
</button>
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
|
<i class="far fa-calendar-check text-gray-400"></i>
|
|
<span>Plan</span>
|
|
</button>
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
|
<i class="far fa-comment-dots text-gray-400"></i>
|
|
<span>Ask</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto Dropdown -->
|
|
<div class="relative" id="autoDropdown">
|
|
<button onclick="toggleDropdown('autoDropdown')" class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
|
<i class="fas fa-layer-group text-xs"></i>
|
|
<span>Auto</span>
|
|
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
|
</button>
|
|
<!-- Model Selection Dropdown -->
|
|
<div class="hidden absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
|
<div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<i class="fas fa-layer-group text-gray-600"></i>
|
|
<span class="flex-1 text-sm">Auto</span>
|
|
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<i class="fas fa-wave-square text-pink-500"></i>
|
|
<span class="text-sm">MiniMax-M2.5</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<div class="w-4 h-4 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
|
<span class="text-sm">GLM-5.0</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<div class="w-4 h-4 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
|
<span class="text-sm">GLM-4.7</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<div class="w-4 h-4 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
|
<span class="text-sm">Kimi-K2.5</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<div class="w-4 h-4 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
|
<span class="text-sm">Kimi-K2-Thinking</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
|
|
<button class="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-left">
|
|
<i class="fas fa-fish text-blue-500"></i>
|
|
<span class="text-sm">DeepSeek-V3.2</span>
|
|
<i class="fas fa-snowflake text-gray-300 text-xs ml-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skills Button -->
|
|
<button class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors">
|
|
<i class="fas fa-wand-magic-sparkles text-xs"></i>
|
|
<span>Skills</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<!-- Folder Selection -->
|
|
<div class="relative" id="folderDropdown">
|
|
<button onclick="toggleDropdown('folderDropdown')" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 rounded-lg text-sm text-gray-600 transition-colors border border-gray-200">
|
|
<i class="fas fa-desktop text-xs"></i>
|
|
<span>选择文件夹</span>
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
|
</button>
|
|
<!-- Folder Menu -->
|
|
<div class="hidden absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
|
<div class="px-3 py-2 border-b border-gray-100">
|
|
<div class="relative">
|
|
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
<input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-3 py-1.5 bg-gray-50 rounded-lg text-sm outline-none">
|
|
</div>
|
|
</div>
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm">
|
|
<span class="flex-1">从空文件夹开始</span>
|
|
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
|
</button>
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-600">
|
|
<i class="far fa-folder-open"></i>
|
|
<span>打开新文件夹</span>
|
|
</button>
|
|
<div class="px-4 py-2 text-xs text-gray-400 font-medium">Claw</div>
|
|
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm pl-8 text-gray-600">
|
|
<span class="truncate">c:\Users\szend\WorkBuddy\Claw</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send Button -->
|
|
<button class="w-9 h-9 bg-gray-200 hover:bg-emerald-500 hover:text-white rounded-lg flex items-center justify-center text-gray-400 transition-all transform hover:scale-105">
|
|
<i class="fas fa-paper-plane text-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skill Tags -->
|
|
<div class="mt-6 flex flex-wrap justify-center gap-3">
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
文档处理
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
视频生成
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
深度研究
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
幻灯片
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
数据分析
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
数据可视化
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
金融服务
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
产品管理
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
设计
|
|
</button>
|
|
<button class="skill-tag px-4 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-600 hover:border-gray-300 hover:text-gray-800">
|
|
邮件编辑
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// Dropdown toggle functionality
|
|
function toggleDropdown(id) {
|
|
const dropdown = document.getElementById(id).querySelector('div[class*="hidden"], div[class*="block"]');
|
|
const allDropdowns = document.querySelectorAll('[id$="Dropdown"] > div');
|
|
|
|
// Close all other dropdowns
|
|
allDropdowns.forEach(d => {
|
|
if (d !== dropdown) {
|
|
d.classList.add('hidden');
|
|
d.classList.remove('block');
|
|
}
|
|
});
|
|
|
|
// Toggle current
|
|
if (dropdown.classList.contains('hidden')) {
|
|
dropdown.classList.remove('hidden');
|
|
dropdown.classList.add('block');
|
|
dropdown.classList.add('dropdown-enter');
|
|
setTimeout(() => {
|
|
dropdown.classList.add('dropdown-enter-active');
|
|
dropdown.classList.remove('dropdown-enter');
|
|
}, 10);
|
|
} else {
|
|
dropdown.classList.add('hidden');
|
|
dropdown.classList.remove('block');
|
|
}
|
|
}
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (!e.target.closest('[id$="Dropdown"]')) {
|
|
document.querySelectorAll('[id$="Dropdown"] > div').forEach(d => {
|
|
d.classList.add('hidden');
|
|
d.classList.remove('block');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Auto-resize textarea
|
|
const textarea = document.querySelector('textarea');
|
|
textarea.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.max(80, this.scrollHeight) + 'px';
|
|
});
|
|
|
|
// Skill tag click effect
|
|
document.querySelectorAll('.skill-tag').forEach(tag => {
|
|
tag.addEventListener('click', function() {
|
|
this.classList.toggle('bg-emerald-50');
|
|
this.classList.toggle('border-emerald-200');
|
|
this.classList.toggle('text-emerald-700');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |