e9b369e667
- Added theme-aware accent and info colors in tailwind configuration for improved visual consistency. - Updated CSS variables for accent and info styles to support light and dark themes. - Refactored various components to utilize the new themed badge logic, ensuring consistent styling based on the current theme. - Improved accessibility and visual feedback in components like SidebarTaskItem, TeamListView, and ActivityItem by adjusting color schemes and hover states. - Enhanced the CreateTeamDialog and other team-related components with updated styling for better user experience.
89 lines
3.9 KiB
HTML
89 lines
3.9 KiB
HTML
<!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/png" href="./favicon.png" />
|
|
<title>Claude Agent Teams UI</title>
|
|
<style>
|
|
/* Splash: spotlight gradient + noise overlay */
|
|
#splash {
|
|
position: fixed; inset: 0; z-index: 9999;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
background: radial-gradient(ellipse 60% 50% at 50% 45%, #181924 0%, #0c0d13 100%);
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
#splash-noise {
|
|
position: absolute; inset: 0; width: 100%; height: 100%;
|
|
opacity: 0.03; pointer-events: none;
|
|
}
|
|
#splash-logo { margin-bottom: 18px; }
|
|
#splash-text {
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
font-size: 15px; font-weight: 500; letter-spacing: 0.05em;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* Logo node breathing — cycles through 3 agent nodes */
|
|
@keyframes splash-node {
|
|
0%, 100% { opacity: 0.18; }
|
|
12%, 28% { opacity: 1; }
|
|
45% { opacity: 0.18; }
|
|
}
|
|
.splash-node {
|
|
animation: splash-node 3s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
.splash-edge { transition: opacity 0.3s; }
|
|
|
|
/* Light theme splash overrides */
|
|
:root.light #splash {
|
|
background: radial-gradient(ellipse 60% 50% at 50% 45%, #fafafa 0%, #e4e4e7 100%);
|
|
}
|
|
:root.light #splash-text { color: #52525b; }
|
|
:root.light #splash-noise { opacity: 0.02; }
|
|
:root.light #splash-logo { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }
|
|
</style>
|
|
<script>
|
|
// Flash prevention: Apply cached theme before React loads
|
|
(function() {
|
|
try {
|
|
var theme = localStorage.getItem('claude-devtools-theme-cache');
|
|
if (theme === 'light') {
|
|
document.documentElement.classList.add('light');
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="splash">
|
|
<!-- SVG noise texture — matte paper grain -->
|
|
<svg id="splash-noise" xmlns="http://www.w3.org/2000/svg">
|
|
<filter id="noiseFilter">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
|
|
</filter>
|
|
<rect width="100%" height="100%" filter="url(#noiseFilter)"/>
|
|
</svg>
|
|
<!-- Logo with animated agent nodes -->
|
|
<svg id="splash-logo" viewBox="0 0 56 56" width="56" height="56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect class="splash-logo-bg" width="56" height="56" rx="14" fill="#151620"/>
|
|
<!-- Edges connecting nodes -->
|
|
<line class="splash-edge" x1="19" y1="19" x2="37" y2="19" stroke="#818cf8" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<line class="splash-edge" x1="37" y1="19" x2="28" y2="37" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<line class="splash-edge" x1="28" y1="37" x2="19" y2="19" stroke="#c084fc" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Agent nodes -->
|
|
<circle class="splash-node splash-node-fill" style="animation-delay:0s" cx="19" cy="19" r="5.5" fill="#818cf8"/>
|
|
<circle class="splash-node splash-node-fill" style="animation-delay:1s" cx="37" cy="19" r="5.5" fill="#a78bfa"/>
|
|
<circle class="splash-node splash-node-fill" style="animation-delay:2s" cx="28" cy="37" r="6" fill="#c084fc"/>
|
|
<!-- Core highlights -->
|
|
<circle class="splash-node splash-core-fill" style="animation-delay:0s" cx="19" cy="19" r="2" fill="#e0e7ff"/>
|
|
<circle class="splash-node splash-core-fill" style="animation-delay:1s" cx="37" cy="19" r="2" fill="#ede9fe"/>
|
|
<circle class="splash-node splash-core-fill" style="animation-delay:2s" cx="28" cy="37" r="2.2" fill="#f3e8ff"/>
|
|
</svg>
|
|
<div id="splash-text">Claude Agent Teams UI</div>
|
|
</div>
|
|
<div id="root"></div>
|
|
<script type="module" src="./main.tsx"></script>
|
|
</body>
|
|
</html>
|