llmapi-v2 2.1.0

package/views/pages/settings.ejs

@@ -0,0 +1,373 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<main class="min-h-[calc(100vh-4rem)] py-10 px-4">
+  <div class="max-w-3xl mx-auto space-y-8">
+    <!-- Page Header -->
+    <div>
+      <h1 class="text-2xl font-bold text-claude-dark">账户设置</h1>
+      <p class="mt-1 text-sm text-claude-dark/60">管理您的个人信息、密码和订阅</p>
+    </div>
+
+    <!-- Global Messages -->
+    <div id="globalSuccess" class="hidden p-4 rounded-lg bg-green-50 border border-green-200 text-sm text-green-700"></div>
+    <div id="globalError" class="hidden p-4 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"></div>
+
+    <!-- Profile Section -->
+    <section class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6">
+      <h2 class="text-lg font-semibold text-claude-dark mb-4">个人信息</h2>
+      <form id="profileForm" onsubmit="handleUpdateProfile(event)" class="space-y-4">
+        <div>
+          <label for="profileName" class="block text-sm font-medium text-claude-dark/80 mb-1.5">用户名</label>
+          <input
+            type="text"
+            id="profileName"
+            value="<%= viewUser.name %>"
+            required
+            minlength="2"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+        <div>
+          <label for="profileEmail" class="block text-sm font-medium text-claude-dark/80 mb-1.5">邮箱地址</label>
+          <input
+            type="email"
+            id="profileEmail"
+            value="<%= viewUser.email %>"
+            disabled
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/10 bg-claude-dark/5 text-claude-dark/50 cursor-not-allowed"
+          >
+          <p class="mt-1 text-xs text-claude-dark/40">邮箱地址不可更改</p>
+        </div>
+        <div class="flex justify-end">
+          <button
+            type="submit"
+            id="profileBtn"
+            class="px-6 py-2.5 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-claude-orange/30 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+          >
+            保存修改
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <!-- Change Password Section -->
+    <section class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6">
+      <h2 class="text-lg font-semibold text-claude-dark mb-4">修改密码</h2>
+      <div id="pwdError" class="hidden mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"></div>
+      <div id="pwdSuccess" class="hidden mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-sm text-green-700"></div>
+      <form id="passwordForm" onsubmit="handleChangePassword(event)" class="space-y-4">
+        <div>
+          <label for="currentPassword" class="block text-sm font-medium text-claude-dark/80 mb-1.5">当前密码</label>
+          <input
+            type="password"
+            id="currentPassword"
+            required
+            placeholder="输入当前密码"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+        <div>
+          <label for="newPassword" class="block text-sm font-medium text-claude-dark/80 mb-1.5">新密码</label>
+          <input
+            type="password"
+            id="newPassword"
+            required
+            minlength="8"
+            placeholder="至少 8 个字符"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+        <div>
+          <label for="confirmNewPassword" class="block text-sm font-medium text-claude-dark/80 mb-1.5">确认新密码</label>
+          <input
+            type="password"
+            id="confirmNewPassword"
+            required
+            minlength="8"
+            placeholder="再次输入新密码"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+        <div class="flex justify-end">
+          <button
+            type="submit"
+            id="pwdBtn"
+            class="px-6 py-2.5 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-claude-orange/30 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+          >
+            修改密码
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <!-- Current Plan Section -->
+    <section class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-lg font-semibold text-claude-dark">当前套餐</h2>
+          <p class="mt-1 text-sm text-claude-dark/60" id="planInfo">加载中...</p>
+        </div>
+        <a
+          href="/pricing"
+          class="px-5 py-2.5 bg-claude-cream text-claude-orange font-medium rounded-lg hover:bg-claude-orange hover:text-white transition-colors text-sm border border-claude-orange/20"
+        >
+          升级套餐
+        </a>
+      </div>
+    </section>
+
+    <!-- Danger Zone -->
+    <section class="bg-white rounded-2xl shadow-sm border border-red-200 p-6">
+      <h2 class="text-lg font-semibold text-red-600 mb-2">危险操作</h2>
+      <p class="text-sm text-claude-dark/60 mb-4">删除账户后，所有数据将被永久清除且无法恢复。此操作不可撤销。</p>
+      <button
+        onclick="showDeleteModal()"
+        class="px-5 py-2.5 bg-red-50 text-red-600 font-medium rounded-lg hover:bg-red-100 transition-colors text-sm border border-red-200"
+      >
+        删除账户
+      </button>
+    </section>
+  </div>
+</main>
+
+<!-- Delete Account Modal -->
+<div id="deleteModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+  <div class="bg-white rounded-2xl shadow-xl max-w-md w-full mx-4 p-6">
+    <div class="text-center mb-6">
+      <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
+        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+        </svg>
+      </div>
+      <h3 class="text-lg font-semibold text-claude-dark">确认删除账户</h3>
+      <p class="mt-2 text-sm text-claude-dark/60">此操作不可撤销。请输入您的邮箱地址 <span class="font-medium text-claude-dark"><%= viewUser.email %></span> 以确认删除。</p>
+    </div>
+
+    <div id="deleteError" class="hidden mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"></div>
+
+    <div class="mb-4">
+      <input
+        type="email"
+        id="deleteEmailConfirm"
+        placeholder="输入您的邮箱地址"
+        class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 transition-colors"
+      >
+    </div>
+
+    <div class="flex space-x-3">
+      <button
+        onclick="hideDeleteModal()"
+        class="flex-1 py-2.5 px-4 bg-claude-dark/5 text-claude-dark font-medium rounded-lg hover:bg-claude-dark/10 transition-colors text-sm"
+      >
+        取消
+      </button>
+      <button
+        onclick="handleDeleteAccount()"
+        id="deleteBtn"
+        class="flex-1 py-2.5 px-4 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        确认删除
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Load current plan info
+  (async function() {
+    try {
+      var res = await fetch('/api/auth/me', { credentials: 'same-origin' });
+      var data = await res.json();
+      if (data.success && data.subscription) {
+        var sub = data.subscription;
+        document.getElementById('planInfo').textContent =
+          (sub.display_name || sub.plan_name) + ' - ' +
+          (sub.price_monthly > 0 ? sub.price_monthly + ' 元/月' : '免费') +
+          ' | 额度: ' + formatTokens(sub.token_limit_monthly) + ' tokens/月';
+      } else {
+        document.getElementById('planInfo').textContent = 'Free - 免费套餐';
+      }
+    } catch (e) {
+      document.getElementById('planInfo').textContent = '无法加载套餐信息';
+    }
+  })();
+
+  function formatTokens(n) {
+    if (!n) return '0';
+    if (n >= 1000000000) return (n / 1000000000).toFixed(0) + 'B';
+    if (n >= 1000000) return (n / 1000000).toFixed(0) + 'M';
+    if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+    return String(n);
+  }
+
+  function showGlobalSuccess(msg) {
+    var el = document.getElementById('globalSuccess');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+    document.getElementById('globalError').classList.add('hidden');
+    setTimeout(function() { el.classList.add('hidden'); }, 3000);
+  }
+
+  function showGlobalError(msg) {
+    var el = document.getElementById('globalError');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+    document.getElementById('globalSuccess').classList.add('hidden');
+  }
+
+  // Update profile
+  async function handleUpdateProfile(e) {
+    e.preventDefault();
+    var btn = document.getElementById('profileBtn');
+    var name = document.getElementById('profileName').value.trim();
+
+    if (!name || name.length < 2) {
+      showGlobalError('用户名至少需要 2 个字符');
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = '保存中...';
+
+    try {
+      var res = await fetch('/api/auth/update-profile', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ name: name }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        showGlobalSuccess('个人信息已更新');
+      } else {
+        showGlobalError(data.error || '更新失败，请重试');
+      }
+    } catch (err) {
+      showGlobalError('网络错误，请重试');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '保存修改';
+    }
+  }
+
+  // Change password
+  async function handleChangePassword(e) {
+    e.preventDefault();
+    var pwdError = document.getElementById('pwdError');
+    var pwdSuccess = document.getElementById('pwdSuccess');
+    pwdError.classList.add('hidden');
+    pwdSuccess.classList.add('hidden');
+
+    var currentPassword = document.getElementById('currentPassword').value;
+    var newPassword = document.getElementById('newPassword').value;
+    var confirmNewPassword = document.getElementById('confirmNewPassword').value;
+
+    if (!currentPassword) {
+      pwdError.textContent = '请输入当前密码';
+      pwdError.classList.remove('hidden');
+      return;
+    }
+    if (newPassword.length < 8) {
+      pwdError.textContent = '新密码至少需要 8 个字符';
+      pwdError.classList.remove('hidden');
+      return;
+    }
+    if (newPassword !== confirmNewPassword) {
+      pwdError.textContent = '两次输入的新密码不一致';
+      pwdError.classList.remove('hidden');
+      return;
+    }
+
+    var btn = document.getElementById('pwdBtn');
+    btn.disabled = true;
+    btn.textContent = '修改中...';
+
+    try {
+      var res = await fetch('/api/auth/change-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ currentPassword: currentPassword, newPassword: newPassword }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        pwdSuccess.textContent = '密码已成功修改';
+        pwdSuccess.classList.remove('hidden');
+        document.getElementById('passwordForm').reset();
+      } else {
+        pwdError.textContent = data.error || '修改失败，请重试';
+        pwdError.classList.remove('hidden');
+      }
+    } catch (err) {
+      pwdError.textContent = '网络错误，请重试';
+      pwdError.classList.remove('hidden');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '修改密码';
+    }
+  }
+
+  // Delete account modal
+  function showDeleteModal() {
+    document.getElementById('deleteModal').classList.remove('hidden');
+    document.getElementById('deleteEmailConfirm').value = '';
+    document.getElementById('deleteError').classList.add('hidden');
+  }
+
+  function hideDeleteModal() {
+    document.getElementById('deleteModal').classList.add('hidden');
+  }
+
+  // Close modal on backdrop click
+  document.getElementById('deleteModal').addEventListener('click', function(e) {
+    if (e.target === this) hideDeleteModal();
+  });
+
+  async function handleDeleteAccount() {
+    var email = document.getElementById('deleteEmailConfirm').value.trim();
+    var deleteError = document.getElementById('deleteError');
+    deleteError.classList.add('hidden');
+
+    if (email !== '<%= viewUser.email %>') {
+      deleteError.textContent = '邮箱地址不匹配，请重新输入';
+      deleteError.classList.remove('hidden');
+      return;
+    }
+
+    var btn = document.getElementById('deleteBtn');
+    btn.disabled = true;
+    btn.textContent = '删除中...';
+
+    try {
+      var res = await fetch('/api/auth/delete-account', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ email: email }),
+      });
+
+      var data = await res.json();
+
+      if (data.success) {
+        window.location.href = '/?deleted=1';
+      } else {
+        deleteError.textContent = data.error || '删除失败，请重试';
+        deleteError.classList.remove('hidden');
+      }
+    } catch (err) {
+      deleteError.textContent = '网络错误，请重试';
+      deleteError.classList.remove('hidden');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '确认删除';
+    }
+  }
+</script>
+
+</body>
+</html>

package/views/partials/header.ejs

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= typeof pageTitle !== 'undefined' ? pageTitle + ' - LLM API' : 'LLM API - Claude Code Compatible API | 90% Cost Savings' %></title>
+  <meta name="description" content="LLM API — a Claude Code compatible API with 90% cost savings. Two-variable setup, multi-provider high availability, stable and fast. Full tool support.">
+  <meta name="keywords" content="Claude Code API, cheap Claude Code, AI coding API, LLM API, API relay, Anthropic API, AI developer tools, code assistant API, Claude Code compatible">
+  <link rel="canonical" href="https://llmapi.pro<%= typeof canonicalPath !== 'undefined' ? canonicalPath : '' %>">
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://llmapi.pro<%= typeof canonicalPath !== 'undefined' ? canonicalPath : '' %>">
+  <meta property="og:title" content="<%= typeof pageTitle !== 'undefined' ? pageTitle + ' - LLM API' : 'LLM API - Claude Code Compatible API | 90% Cost Savings' %>">
+  <meta property="og:description" content="Claude Code compatible API relay with 90% cost savings. One-line config, multi-provider high availability.">
+  <meta property="og:site_name" content="LLM API">
+  <meta property="og:locale" content="en_US">
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="<%= typeof pageTitle !== 'undefined' ? pageTitle + ' - LLM API' : 'LLM API - Claude Code Compatible API | 90% Cost Savings' %>">
+  <meta name="twitter:description" content="Claude Code compatible API relay with 90% cost savings. One-line config, multi-provider high availability.">
+  <meta name="twitter:site" content="@llmapi">
+
+  <!-- JSON-LD Organization Schema -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "LLM API",
+    "url": "https://llmapi.pro",
+    "description": "Claude Code compatible API relay service with 90% cost savings and multi-provider high availability.",
+    "sameAs": []
+  }
+  </script>
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            'claude-orange': '#D97757',
+            'claude-orange-hover': '#C4684A',
+            'claude-cream': '#FAF6F1',
+            'claude-dark': '#1A1915',
+          },
+          fontFamily: {
+            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+          },
+        },
+      },
+    }
+  </script>
+
+  <!-- Inter Font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <style>
+    html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #D9775740 transparent; }
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #D9775740; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #D97757; }
+  </style>
+</head>
+<body class="bg-claude-cream text-claude-dark font-sans antialiased">

package/views/partials/nav.ejs

@@ -0,0 +1,140 @@
+<!-- Navigation -->
+<nav class="sticky top-0 z-50 bg-white/70 backdrop-blur-md border-b border-gray-200/50 shadow-sm">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+
+      <!-- Logo -->
+      <a href="/" class="flex items-center space-x-2 group">
+        <svg class="w-7 h-7 text-claude-orange" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="28" height="28" rx="6" fill="currentColor" fill-opacity="0.1"/>
+          <path d="M9 8l5 6-5 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M16 18h4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
+        </svg>
+        <span class="text-xl font-bold text-claude-dark tracking-tight">LLM <span class="text-claude-orange">API</span></span>
+      </a>
+
+      <!-- Desktop Nav Links -->
+      <div class="hidden md:flex items-center space-x-8">
+        <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-claude-orange transition-colors">Pricing</a>
+        <a href="/docs" class="text-sm font-medium text-gray-600 hover:text-claude-orange transition-colors">Docs</a>
+        <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-claude-orange transition-colors">Blog</a>
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <a href="/dashboard" class="text-sm font-medium text-gray-600 hover:text-claude-orange transition-colors">Dashboard</a>
+        <% } %>
+      </div>
+
+      <!-- Desktop Right Section -->
+      <div class="hidden md:flex items-center space-x-4">
+        <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+          <!-- User Dropdown -->
+          <div class="relative" id="userDropdown">
+            <button
+              onclick="toggleDropdown()"
+              class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
+            >
+              <div class="w-8 h-8 rounded-full bg-claude-orange text-white flex items-center justify-center text-sm font-semibold">
+                <%= viewUser.name ? viewUser.name.charAt(0).toUpperCase() : 'U' %>
+              </div>
+              <span class="text-sm font-medium text-claude-dark"><%= viewUser.name || 'User' %></span>
+              <svg class="w-4 h-4 text-gray-400 transition-transform" id="dropdownChevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+            <div
+              id="dropdownMenu"
+              class="hidden absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1 z-50"
+            >
+              <a href="/dashboard" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Dashboard</a>
+              <a href="/dashboard/orders" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Orders</a>
+              <a href="/dashboard/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Settings</a>
+              <div class="border-t border-gray-100 my-1"></div>
+              <button
+                onclick="handleLogout()"
+                class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
+              >Log Out</button>
+            </div>
+          </div>
+        <% } else { %>
+          <a href="/login" class="text-sm font-medium text-gray-600 hover:text-claude-orange transition-colors">Log In</a>
+          <a href="/register" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-claude-orange rounded-lg hover:bg-claude-orange-hover transition-all shadow-sm hover:shadow">Get API Key</a>
+        <% } %>
+      </div>
+
+      <!-- Mobile Hamburger -->
+      <button
+        onclick="toggleMobileMenu()"
+        class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
+        aria-label="Toggle menu"
+        id="mobileMenuBtn"
+      >
+        <svg class="w-6 h-6 text-claude-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path id="menuIconOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+          <path id="menuIconClose" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile Menu -->
+  <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200/50 bg-white/95 backdrop-blur-md">
+    <div class="px-4 py-4 space-y-1">
+      <a href="/pricing" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Pricing</a>
+      <a href="/docs" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Docs</a>
+      <a href="/blog" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Blog</a>
+      <% if (typeof viewUser !== 'undefined' && viewUser) { %>
+        <div class="border-t border-gray-100 my-2"></div>
+        <a href="/dashboard" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Dashboard</a>
+        <a href="/dashboard/orders" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Orders</a>
+        <a href="/dashboard/settings" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Settings</a>
+        <div class="border-t border-gray-100 my-2"></div>
+        <button onclick="handleLogout()" class="block w-full text-left px-3 py-2.5 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50 transition-colors">Log Out</button>
+      <% } else { %>
+        <div class="border-t border-gray-100 my-2"></div>
+        <a href="/login" class="block px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">Log In</a>
+        <a href="/register" class="block px-3 py-2.5 text-sm font-medium text-white bg-claude-orange rounded-lg text-center hover:bg-claude-orange-hover transition-colors">Get API Key</a>
+      <% } %>
+    </div>
+  </div>
+</nav>
+
+<script>
+  function toggleDropdown() {
+    const menu = document.getElementById('dropdownMenu');
+    const chevron = document.getElementById('dropdownChevron');
+    menu.classList.toggle('hidden');
+    chevron.classList.toggle('rotate-180');
+  }
+
+  function toggleMobileMenu() {
+    const menu = document.getElementById('mobileMenu');
+    const iconOpen = document.getElementById('menuIconOpen');
+    const iconClose = document.getElementById('menuIconClose');
+    menu.classList.toggle('hidden');
+    iconOpen.classList.toggle('hidden');
+    iconClose.classList.toggle('hidden');
+  }
+
+  // Close dropdown on outside click
+  document.addEventListener('click', function(e) {
+    const dropdown = document.getElementById('userDropdown');
+    const menu = document.getElementById('dropdownMenu');
+    const chevron = document.getElementById('dropdownChevron');
+    if (dropdown && menu && !dropdown.contains(e.target)) {
+      menu.classList.add('hidden');
+      if (chevron) chevron.classList.remove('rotate-180');
+    }
+  });
+
+  async function handleLogout() {
+    try {
+      const res = await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' });
+      if (res.ok) {
+        window.location.href = '/';
+      } else {
+        alert('Logout failed. Please try again.');
+      }
+    } catch (err) {
+      alert('Network error. Please try again.');
+    }
+  }
+</script>