AbabCatのblog

1
<div class="not-prose text-center my-8">
2
  <span class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 animate-pulse">
3
    LEVEL UP YOUR CODE
4
  </span>
5
</div>

1
<div class="not-prose relative my-8 p-6 rounded-2xl overflow-hidden shadow-xl
2
            border border-gray-300/50 dark:border-white/20
3
            bg-white/60 dark:bg-black/20 backdrop-blur-xl">
4

5
  <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-500/20 rounded-full blur-2xl"></div>
6
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500/20 rounded-full blur-2xl"></div>
7

8
  <div class="relative z-10">
9
    <h3 class="text-xl font-bold mb-2 flex items-center gap-2 text-gray-900 dark:text-white">
10
      🎮 电脑环境配置
11
    </h3>
12
    <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
13
      <li class="flex items-center">✅ CPU: AMD Ryzen 7500F</li>
14
      <li class="flex items-center">✅ GPU: RTX 4060 Ti 16G</li>
15
    </ul>
16
  </div>
17
</div>

1
<div class="not-prose my-6 rounded-lg overflow-hidden bg-[#1e1e1e] shadow-2xl border border-gray-700 font-mono text-sm">
2
  <div class="bg-[#2d2d2d] px-4 py-2 flex items-center gap-2 border-b border-gray-700">
3
    <div class="w-3 h-3 rounded-full bg-red-500"></div>
4
    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
5
    <div class="w-3 h-3 rounded-full bg-green-500"></div>
6
    <div class="ml-2 text-gray-400 text-xs">cxz-terminal — -zsh</div>
7
  </div>
8
  <div class="p-4 text-gray-300">
9
    <div class="flex">
10
      <span class="text-green-400 mr-2">➜</span>
11
      <span class="text-blue-400 mr-2">~</span>
12
      <span class="typing-effect">npm run build</span>
13
    </div>
14
    <div class="mt-2 text-gray-500">
15
      > Astro v4.0.0<br>
16
      > Building client...<br>
17
      <span class="text-green-400">✓ Completed in 1.45s</span>
18
    </div>
19
  </div>
20
</div>

1
<details class="not-prose group my-4 bg-red-500/10 border border-red-500/20 rounded-lg open:bg-red-500/5 transition-all duration-300">
2
  <summary class="cursor-pointer p-4 font-bold text-red-500 flex justify-between items-center select-none">
3
    <span>⚠️ 警告：包含《传送门》结局剧透</span>
4
    <span class="group-open:rotate-180 transition-transform duration-300">▼</span>
5
  </summary>
6
  <div class="p-4 pt-0 text-gray-600 dark:text-gray-300 border-t border-red-500/10 mt-2">
7
    The cake is a lie. 蛋糕是个谎言，GLaDOS 其实一直都知道...
8
  </div>
9
</details>

1
<div class="not-prose my-8 w-full h-[450px] rounded-2xl overflow-hidden shadow-[0_20px_50px_rgba(8,_112,_184,_0.4)] border border-blue-500/30 relative group bg-black">
2
  <div class="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-transparent transition-all duration-500 pointer-events-none z-10">
3
    <span class="text-white/80 border border-white/30 px-4 py-2 rounded-full backdrop-blur-md text-sm group-hover:opacity-0 transition-opacity">
4
      点击并拖拽查看3D模型
5
    </span>
6
  </div>
7

8
  <iframe
9
    title="Sci-Fi Drone"
10
    frameborder="0"
11
    allowfullscreen
12
    mozallowfullscreen="true"
13
    webkitallowfullscreen="true"
14
    allow="autoplay; fullscreen; xr-spatial-tracking"
15
    xr-spatial-tracking
16
    execution-while-out-of-viewport
17
    execution-while-not-rendered
18
    web-share
19
    src="https://sketchfab.com/models/ebea8df5042d447fa3ae2c45de3056fd/embed?autostart=0&ui_theme=dark&dnt=1"
20
    class="w-full h-full"
21
  >
22
  </iframe>
23
</div>
24
<p class="text-center text-sm opacity-60 -mt-4 mb-8">鼠标拖拽旋转，滚轮可以缩放</p>

1
<div class="not-prose my-10 grid grid-cols-1 md:grid-cols-3 gap-6">
2
  <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-red-900 hover:border-red-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(239,68,68,0.5)]">
3
    <div class="absolute -right-4 -bottom-4 text-9xl text-red-500/10 group-hover:text-red-500/20 transition-all group-hover:rotate-12">💪</div>
4
    <h3 class="text-2xl font-bold text-red-500 mb-2">STRENGTH (力量)</h3>
5
    <div class="text-4xl font-black text-white mb-4">A+</div>
6
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
7
      <div class="h-full bg-gradient-to-r from-red-800 to-red-500 w-[90%] group-hover:animate-pulse"></div>
8
    </div>
9
    <p class="text-slate-400 text-sm mt-4">精通 C++ 与底层架构，能扛住高并发压力。</p>
10
  </div>
11

12
  <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-emerald-900 hover:border-emerald-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(16,185,129,0.5)]">
13
    <div class="absolute -right-4 -bottom-4 text-9xl text-emerald-500/10 group-hover:text-emerald-500/20 transition-all group-hover:rotate-12">⚡</div>
14
    <h3 class="text-2xl font-bold text-emerald-500 mb-2">AGILITY (敏捷)</h3>
15
    <div class="text-4xl font-black text-white mb-4">S</div>
16
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
17
      <div class="h-full bg-gradient-to-r from-emerald-800 to-emerald-500 w-[98%] group-hover:animate-pulse"></div>
18
    </div>
19
    <p class="text-slate-400 text-sm mt-4">快速学习新技术，代码交付速度极快。</p>
20
  </div>
21

22
   <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-blue-900 hover:border-blue-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(59,130,246,0.5)]">
23
    <div class="absolute -right-4 -bottom-4 text-9xl text-blue-500/10 group-hover:text-blue-500/20 transition-all group-hover:rotate-12">🧠</div>
24
    <h3 class="text-2xl font-bold text-blue-500 mb-2">INTELLECT (智力)</h3>
25
    <div class="text-4xl font-black text-white mb-4">A</div>
26
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
27
      <div class="h-full bg-gradient-to-r from-blue-800 to-blue-500 w-[85%] group-hover:animate-pulse"></div>
28
    </div>
29
    <p class="text-slate-400 text-sm mt-4">擅长算法设计与复杂系统架构分析。</p>
30
  </div>
31
</div>

1
<div class="not-prose my-8 p-6 bg-[#1a1b26] rounded-xl border border-gray-800 relative overflow-hidden">
2
  <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent animate-[shimmer_2s_infinite_linear]" style="background-size: 200% 100%;"></div>
3

4
  <h4 class="text-cyan-400 mb-4 font-mono flex items-center">
5
    <span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-ping"></span>
6
    > 正在初始化神经链接...
7
  </h4>
8

9
  <div class="relative w-full h-4 bg-gray-900/50 rounded-full overflow-hidden border border-gray-700/50 backdrop-blur">
10
    <style>
11
      @keyframes load-progress {
12
        0% { width: 5%; }
13
        100% { width: 85%; }
14
      }
15
    </style>
16
    <div class="h-full bg-gradient-to-r from-cyan-600 via-blue-500 to-purple-600 rounded-full relative"
17
         style="animation: load-progress 3s ease-out forwards; width: 85%;">
18
         <div class="absolute right-0 top-0 h-full w-10 bg-white/50 blur-[10px]"></div>
19
    </div>
20
  </div>
21
  <div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-2">
22
    <span>STATUS: CONNECTING</span>
23
    <span>85% COMPLETE</span>
24
  </div>
25
</div>

1
<div class="not-prose my-8 p-8 bg-gray-100 dark:bg-slate-800 rounded-xl flex items-center justify-center gap-4 flex-wrap border border-gray-200 dark:border-gray-700">
2
  <style>
3
    .kbd-key {
4
      background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
5
      color: #374151;
6
      border: 1px solid #d1d5db;
7
      box-shadow: 0 4px 0 #9ca3af, 0 5px 5px rgba(0,0,0,0.1);
8
      transition: all 0.1s;
9
    }
10
    /* 暗色模式适配 */
11
    .dark .kbd-key {
12
      background: linear-gradient(to bottom, #374151, #1f2937);
13
      color: #e5e7eb;
14
      border: 1px solid #4b5563;
15
      box-shadow: 0 4px 0 #111827, 0 5px 5px rgba(0,0,0,0.3);
16
    }
17
    /* 按下效果 */
18
    .kbd-key:active {
19
      transform: translateY(4px);
20
      box-shadow: 0 0 0 #9ca3af, inset 0 2px 4px rgba(0,0,0,0.1);
21
    }
22
    .dark .kbd-key:active {
23
      box-shadow: 0 0 0 #111827, inset 0 2px 4px rgba(0,0,0,0.3);
24
    }
25
  </style>
26

27
  <span class="text-gray-500 dark:text-gray-400 text-sm font-bold mr-2">快捷键：</span>
28

29
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">CTRL</button>
30
  <span class="text-gray-400">+</span>
31
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">ALT</button>
32
  <span class="text-gray-400">+</span>
33
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">DEL</button>
34
</div>

1
<div class="not-prose mt-6 -mb-2 bg-slate-800 rounded-t-lg border-b border-slate-700 flex justify-between items-center px-4 py-2 text-xs text-slate-300 font-mono">
2
  <div class="flex items-center gap-2">
3
    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg>
4
    <span>src/components/GameEngine.cpp</span>
5
  </div>
6
  <span class="text-slate-500">C++</span>
7
</div>

1
<div class="not-prose my-12 relative group">
2
<div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl blur-xl opacity-30 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
3
<div class="relative p-6 bg-[#0a0a0a]/80 backdrop-blur-xl rounded-xl border border-cyan-500/30 shadow-[inset_0_0_20px_rgba(6,182,212,0.2)] overflow-hidden">
4
<div class="absolute inset-0 bg-[linear-gradient(rgba(6,182,212,0.1)_1px,transparent_1px)] bg-[size:100%_4px] pointer-events-none"></div>
5
<div class="flex justify-between items-center mb-6 border-b border-cyan-500/20 pb-2">
6
<h3 class="text-cyan-400 font-mono text-lg tracking-wider flex items-center"><span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse shadow-[0_0_10px_#22d3ee]"></span>SYSTEM STATUS_</h3>
7
<span class="text-xs text-cyan-300/50 font-mono">UID: 9527-TK</span></div>
8
<div class="grid grid-cols-2 gap-6 relative z-10">
9
<div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">CPU LOAD</span><div class="flex items-end"><span class="text-3xl font-bold text-white font-mono mr-2">32%</span><div class="h-6 w-24 bg-cyan-900/50 rounded-sm overflow-hidden flex items-end gap-[2px] p-[2px]"><div class="h-[30%] w-1 bg-cyan-400"></div><div class="h-[50%] w-1 bg-cyan-400"></div><div class="h-[80%] w-1 bg-cyan-400 animate-pulse"></div><div class="h-[40%] w-1 bg-cyan-400"></div><div class="h-[60%] w-1 bg-cyan-400"></div></div></div></div>
10
<div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">MEMORY</span><span class="text-3xl font-bold text-white font-mono">12.4 <span class="text-lg text-cyan-400">GB</span></span></div>
11
<div class="col-span-2"><span class="text-cyan-300/60 text-xs font-mono mb-1">NETWORK UPLINK</span><div class="w-full h-2 bg-cyan-900/50 rounded-full overflow-hidden relative"><div class="absolute inset-y-0 left-0 bg-gradient-to-r from-cyan-500 to-blue-500 w-[75%] shadow-[0_0_10px_#22d3ee]"><div class="absolute right-0 top-0 h-full w-4 bg-white/80 blur-sm"></div></div></div><div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-1"><span>Stable</span><span>750 Mbps</span></div></div></div>
12
<div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-cyan-500/50"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-cyan-500/50"></div>
13
</div>
14
</div>

1
<div class="not-prose my-8 rounded-lg overflow-hidden relative border-2 border-yellow-500/50 shadow-[0_0_20px_rgba(234,179,8,0.3)]">
2
  <style>
3
    @keyframes scroll-stripes {
4
      0% { background-position: 0 0; }
5
      100% { background-position: 50px 0; }
6
    }
7
    .hazard-stripes {
8
      /* 使用 repeating-linear-gradient 创建斜条纹 */
9
      background-image: repeating-linear-gradient(
10
        -45deg,
11
        #eab308, /* 黄色 */
12
        #eab308 20px,
13
        #000000 20px, /* 黑色 */
14
        #000000 40px
15
      );
16
      background-size: 200% 200%;
17
      animation: scroll-stripes 1s linear infinite;
18
    }
19
  </style>
20

21
  <div class="hazard-stripes absolute inset-0 opacity-20 z-0"></div>
22

23
  <div class="relative z-10 bg-[#1a1a1a]/90 p-4 flex items-center gap-4 backdrop-blur-sm">
24
    <div class="h-12 w-12 flex-shrink-0 bg-yellow-500 text-black rounded flex items-center justify-center font-bold text-2xl shadow-lg">
25
      ⚠️
26
    </div>
27
    <div>
28
      <h4 class="text-yellow-500 font-bold text-lg uppercase tracking-wider mb-1">Warning: Breaking Changes</h4>
29
      <p class="text-yellow-100/80 text-sm">
30
        即将到来的 V2.0 版本将重构核心 API。请务必查看迁移指南，否则你的项目可能会崩溃。
31
      </p>
32
    </div>
33
  </div>
34
</div>

1
<div class="not-prose my-8 inline-block group cursor-pointer">
2
<style>.secret-blur{filter:blur(6px);letter-spacing:0.2em;opacity:0.6;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);user-select:none;background:#1e293b;color:transparent;text-shadow:0 0 10px rgba(255,255,255,0.5);}.group:hover .secret-blur{filter:blur(0px);letter-spacing:normal;opacity:1;background:transparent;color:#4ade80;text-shadow:none;}.group:hover .secret-container{animation:text-flash 0.5s ease-out;}@keyframes text-flash{0%{text-shadow:0 0 30px #4ade80,0 0 10px white;color:white;}100%{text-shadow:none;color:#4ade80;}}</style>
3
<div class="secret-container relative px-4 py-2 bg-slate-800 border border-slate-700 rounded overflow-hidden">
4
<div class="absolute inset-0 flex items-center justify-center text-slate-500/30 group-hover:hidden font-mono">[LOCKED DATA]</div>
5
<p class="secret-blur font-mono font-bold text-lg relative z-10">> 宝箱密码：xxxx</p>
6
</div>
7
</div>

1
<div class="not-prose my-12 flex justify-center perspective-1000">
2
<div class="holo-card relative w-[300px] h-[420px] rounded-xl bg-[#1c1c1c] transition-all duration-100 ease-out preserve-3d cursor-pointer group shadow-2xl">
3

4
  <div class="absolute inset-0 rounded-xl overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-black z-10 border border-white/20">
5
    <div class="absolute inset-0 bg-[linear-gradient(rgba(0,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,255,0.1)_1px,transparent_1px)] bg-[size:20px_20px] opacity-30"></div>
6
    <div class="absolute bottom-0 inset-x-0 p-6 bg-gradient-to-t from-black to-transparent">
7
      <h3 class="text-2xl font-bold text-white mb-1 text-shadow-[0_0_10px_rgba(0,255,255,0.5)]">Cyberdeck Unit</h3>
8
      <p class="text-cyan-400 text-sm font-mono">LEGENDARY / HARDWARE</p>
9
    </div>
10
  </div>
11

12
  <div class="holo-glare absolute inset-0 rounded-xl z-20 mix-blend-color-dodge opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" style="transform: translateZ(2px);"></div>
13

14
  <div class="absolute inset-0 rounded-xl z-30 border-2 border-white/0 group-hover:border-cyan-400/50 transition-colors duration-300 pointer-events-none"></div>
15

16
</div>
17

18
<script>
19
(function(){
20
  // 使用 IIFE 确保变量隔离
21
  const card = document.currentScript.previousElementSibling;
22
  const glare = card.querySelector('.holo-glare');
23

24
  if (!card || !glare) return;
25

26
  // 鼠标移动事件
27
  card.addEventListener('mousemove', (e) => {
28
    const rect = card.getBoundingClientRect();
29
    const x = e.clientX - rect.left;
30
    const y = e.clientY - rect.top;
31
    const centerX = rect.width / 2;
32
    const centerY = rect.height / 2;
33

34
    // 计算旋转角度（增加了一点灵敏度）
35
    const rotateX = ((y - centerY) / centerY) * -18;
36
    const rotateY = ((x - centerX) / centerX) * 18;
37

38
    // 应用卡片 3D 旋转
39
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
40

41
    // 计算流光位置和颜色 (动态彩虹色)
42
    const angle = Math.atan2(y - centerY, x - centerX) * (180 / Math.PI);
43
    glare.style.background = `linear-gradient(${angle}deg, rgba(255,255,255,0.1), rgba(0,255,255,0.3), rgba(255,0,255,0.3), rgba(255,255,255,0.1)), radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.8) 0%, transparent 60%)`;
44
  });
45

46
  // 鼠标离开重置
47
  card.addEventListener('mouseleave', () => {
48
    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
49
    glare.style.background = 'none';
50
  });
51
})();
52
</script>
53
<style>
54
  /* 补充一些必要的 CSS 样式来确保 3D 效果 */
55
  .preserve-3d { transform-style: preserve-3d; }
56
  .perspective-1000 { perspective: 1000px; }
57
</style>
58
</div>

1
<div class="not-prose my-8 w-full overflow-hidden bg-[#0d1117] border-y border-gray-800 relative">
2
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 mix-blend-overlay pointer-events-none"></div>
3
<div class="flex animate-[marquee_20s_linear_infinite] hover:[animation-play-state:paused] items-center whitespace-nowrap py-3" id="crypto-ticker-track">
4
<span class="text-gray-500 font-mono mx-4">Loading Market Data...</span>
5
</div>
6
<style>
7
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
8
.crypto-item { display: inline-flex; align-items: center; margin: 0 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
9
.crypto-symbol { color: #8b949e; font-weight: bold; margin-right: 0.5rem; }
10
.crypto-price { color: #e6edf3; font-weight: bold; margin-right: 0.5rem; }
11
.crypto-change-up { color: #3fb950; } .crypto-change-down { color: #f85149; }
12
</style>
13
<script>
14
(function(){
15
var track = document.getElementById('crypto-ticker-track');
16
if(!track) return;
17
fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h')
18
.then(r => r.json())
19
.then(data => {
20
var html = '';
21
data.forEach(coin => {
22
var isUp = coin.price_change_percentage_24h >= 0;
23
var changeClass = isUp ? 'crypto-change-up' : 'crypto-change-down';
24
var sign = isUp ? '+' : '';
25
html += `<div class="crypto-item">
26
<img src="${coin.image}" class="w-5 h-5 mr-2 grayscale brightness-125">
27
<span class="crypto-symbol">${coin.symbol.toUpperCase()}</span>
28
<span class="crypto-price">$${coin.current_price.toLocaleString()}</span>
29
<span class="${changeClass}">${sign}${coin.price_change_percentage_24h.toFixed(2)}%</span>
30
</div>`;
31
});
32
track.innerHTML = html + html; // 复制一份用于无缝滚动
33
}).catch(e => { track.innerHTML = '<span class="text-red-500 mx-4">Failed to load data. API limit may be reached.</span>'; });
34
})();
35
</script>
36
</div>

1
<div class="not-prose my-12 flex justify-center">
2
<div class="relative group cursor-pointer">
3
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
4
<button id="web3-connect-btn" class="relative px-8 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600 text-gray-100 transition-all hover:bg-gray-900">
5
<span class="flex items-center space-x-3 pr-4">
6
<svg class="h-6 w-6 text-pink-500 animate-pulse" 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>
7
<span id="btn-text" class="font-bold font-mono tracking-wider text-lg">CONNECT WALLET</span>
8
</span>
9
<span class="pl-4 text-pink-400 transition-colors group-hover:text-gray-100 font-mono text-sm" id="btn-status">Web3 Ready</span>
10
</button>
11
</div>
12
<script>
13
(function(){
14
var btn = document.getElementById('web3-connect-btn');
15
var textSpan = document.getElementById('btn-text');
16
var statusSpan = document.getElementById('btn-status');
17
var isConnected = false;
18
btn.addEventListener('click', function() {
19
if (!isConnected) {
20
textSpan.innerHTML = '0x1F9...8A2B';
21
statusSpan.innerHTML = '<span class="text-green-500">● Connected</span>';
22
btn.classList.add('border-green-500/50');
23
isConnected = true;
24
} else {
25
textSpan.innerHTML = 'CONNECT WALLET';
26
statusSpan.innerHTML = 'Web3 Ready';
27
btn.classList.remove('border-green-500/50');
28
isConnected = false;
29
}
30
});
31
})();
32
</script>
33
<style>
34
@keyframes tilt { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.5deg); } 75% { transform: rotate(-0.5deg); } }
35
.animate-tilt { animation: tilt 5s infinite linear; }
36
</style>
37
</div>