zizo007's picture
You are a Lead Systems Engineer specializing in distributed, high-reliability financial technology. Your task is to architect and generate the complete Python source code for a local Binance Spot Copy Trading engine. Your design philosophy must prioritize robustness, restart safety, and absolute data integrity.
dd9bd90 verified
Raw
History Blame Contribute Delete
3.62 kB
class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
font-family: 'Inter', sans-serif;
}
.header-container {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(6, 182, 212, 0.2);
position: sticky;
top: 0;
z-index: 50;
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #06b6d4;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #06b6d4, #3b82f6);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.mobile-menu {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.mobile-menu.open {
transform: translateX(0);
}
@media (max-width: 768px) {
.desktop-nav {
display: none;
}
}
@media (min-width: 769px) {
.mobile-menu-button {
display: none;
}
}
</style>
<header class="header-container">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div>
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-300">
SpotSync Alpha
</h1>
<p class="text-xs text-gray-400">Master-Follower Replication Engine</p>
</div>
</div>
<!-- Desktop Navigation -->
<div class="desktop-nav flex items-center gap-6">
<a href="index.html" class="nav-link text-gray-300">Dashboard</a>
<a href="#engine" class="nav-link text-gray-300">Engine</a>