app/static/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sublink — 订阅转换</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* 自定义滚动条 */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: #060914; }
  ::-webkit-scrollbar-thumb { background: #00d4ff; border-radius: 2px; }

  /* CSS 自定义属性用于旋转边框动画 */
  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes spin-border {
    to { --angle: 360deg; }
  }

  /* 标题光标闪烁 */
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* 扫描线按钮效果 */
  @keyframes scan-line {
    0% { left: -100%; }
    100% { left: 150%; }
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #060914;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
  }

  /* 背景 canvas 全屏 */
  #bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .container {
    width: 100%;
    max-width: 680px;
    position: relative;
    z-index: 1;
  }

  h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #00d4ff;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px #00d4ff, 0 0 40px rgba(0, 212, 255, 0.3);
  }

  .cursor {
    display: inline-block;
    animation: blink 1s step-end infinite;
    color: #00d4ff;
  }

  .subtitle {
    font-size: 0.75rem;
    color: #00d4ff;
    margin-bottom: 2rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  /* Card 旋转渐变边框 */
  .card {
    background: rgba(10, 14, 28, 0.9);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    z-index: 0;
    overflow: hidden;
    backdrop-filter: blur(12px);
  }

  .card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    background: conic-gradient(from var(--angle), #6366f1, #00d4ff, #6366f1);
    animation: spin-border 4s linear infinite;
    z-index: -1;
  }

  .field {
    margin-bottom: 1.25rem;
  }

  label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  textarea, select, input[type="text"] {
    width: 100%;
    background: rgba(5, 8, 18, 0.8);
    border: 1px solid #2d3348;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
  }

  textarea:focus, select:focus, input[type="text"]:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15), 0 0 12px rgba(0, 212, 255, 0.2);
  }

  textarea {
    resize: vertical;
    min-height: 80px;
  }

  select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
  }

  select option { background: #0a0e1c; }

  /* 高级选项折叠 */
  .advanced-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #64748b;
    user-select: none;
    margin-bottom: 1rem;
    border: none;
    background: none;
    padding: 0;
    letter-spacing: 0.08em;
    transition: color 0.2s;
  }

  .advanced-toggle:hover { color: #00d4ff; }

  .toggle-icon {
    display: inline-block;
    transition: transform 0.2s;
    font-style: normal;
  }

  .toggle-icon.open { transform: rotate(90deg); }

  #advanced-section { display: none; }
  #advanced-section.open { display: block; }

  /* Bool 开关行 */
  .bool-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
  }

  .bool-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(5, 8, 18, 0.8);
    border: 1px solid #2d3348;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #94a3b8;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  }

  .bool-item:hover { border-color: #6366f1; color: #e2e8f0; }

  /* checked 态发光 */
  .bool-item:has(input:checked) {
    border-color: #6366f1;
    color: #a5b4fc;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.3);
  }

  .bool-item input[type="checkbox"] {
    width: auto;
    accent-color: #6366f1;
    cursor: pointer;
  }

  /* 两列布局 */
  .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* 按钮 */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.2s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
  }

  .btn:active { opacity: 0.7; }

  .btn-primary {
    background: linear-gradient(90deg, #6366f1, #00d4ff);
    color: #fff;
    padding: 0.65rem 1.5rem;
    width: 100%;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    letter-spacing: 0.05em;
  }

  /* 扫描光效 */
  .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.4s ease;
  }

  .btn-primary:hover::after { left: 150%; }
  .btn-primary:hover { box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); }

  .btn-sm {
    background: #2d3348;
    color: #e2e8f0;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
  }

  .btn-sm:hover { background: #3d4460; color: #00d4ff; }

  /* 结果区域 */
  #result-section {
    margin-top: 1.25rem;
    display: none;
  }

  #result-section.show { display: block; }

  /* 终端风格结果框 */
  .result-box {
    background: rgba(5, 8, 18, 0.9);
    border: 1px solid #2d3348;
    border-left: 2px solid #00d4ff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    word-break: break-all;
    font-size: 0.8375rem;
    font-family: 'Courier New', Courier, monospace;
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }

  .result-actions {
    display: flex;
    gap: 0.5rem;
  }

  /* 错误提示 */
  #error-msg {
    display: none;
    background: #3b1f1f;
    border: 1px solid #7f1d1d;
    color: #fca5a5;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.8375rem;
    margin-top: 0.75rem;
  }

  #error-msg.show { display: block; }

  /* Toast：左下角，玻璃风格 */
  #toast {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    background: rgba(6, 9, 20, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid #00d4ff;
    color: #00d4ff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 100;
  }

  #toast.show { opacity: 1; }

  /* 预览区域 */
  #preview-section { margin-top: 0.75rem; display: none; }
  #preview-section.show { display: block; }
  #preview-content {
    background: rgba(5, 8, 18, 0.95);
    border: 1px solid #2d3348;
    border-left: 2px solid #00d4ff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre;
    line-height: 1.4;
  }
  #preview-content.error { color: #fca5a5; }
</style>
</head>
<body>
<!-- 背景粒子网络 canvas -->
<canvas id="bg-canvas"></canvas>

<div class="container">
  <h1>SUBLINK<span class="cursor">_</span></h1>
  <p class="subtitle">Subscription Converter</p>

  <div class="card">
    <!-- 订阅链接 -->
    <div class="field">
      <label>订阅链接 <span style="color:#6366f1">*</span></label>
      <textarea id="url" placeholder="输入订阅链接，多个链接用 | 分隔"></textarea>
    </div>

    <!-- 目标格式 -->
    <div class="field">
      <label>目标格式 <span style="color:#6366f1">*</span></label>
      <select id="target-select">
        <option value="clash">Clash</option>
        <option value="surge4">Surge 4</option>
        <option value="quanx">QuantumultX</option>
        <option value="loon">Loon</option>
        <option value="v2ray">V2Ray</option>
        <option value="ss">SS</option>
        <option value="ssr">SSR</option>
        <option value="trojan">Trojan</option>
        <option value="mixed">Mixed</option>
        <option value="clash-list">Node List (Clash)</option>
      </select>
    </div>

    <!-- 高级选项折叠 -->
    <button class="advanced-toggle" type="button" id="advanced-toggle">
      <i class="toggle-icon" id="toggle-icon">▶</i>
      高级选项
    </button>

    <div id="advanced-section">
      <!-- 外部配置 -->
      <div class="field">
        <label>外部配置 (config URL)</label>
        <input type="text" id="config" placeholder="留空使用 subconverter 默认配置">
      </div>

      <!-- 文件名 -->
      <div class="field">
        <label>文件名 (filename)</label>
        <input type="text" id="filename" placeholder="下载时的文件名">
      </div>

      <!-- 包含 / 排除 -->
      <div class="row-2">
        <div class="field">
          <label>包含节点 (include)</label>
          <input type="text" id="include" placeholder="正则表达式">
        </div>
        <div class="field">
          <label>排除节点 (exclude)</label>
          <input type="text" id="exclude" placeholder="正则表达式">
        </div>
      </div>

      <!-- 分组 -->
      <div class="field">
        <label>代理分组 (group)</label>
        <input type="text" id="group" placeholder="自定义分组名">
      </div>

      <!-- Bool 开关 -->
      <div class="field">
        <label>开关选项</label>
        <div class="bool-grid">
          <label class="bool-item"><input type="checkbox" id="emoji" checked> emoji</label>
          <label class="bool-item"><input type="checkbox" id="udp"> udp</label>
          <label class="bool-item"><input type="checkbox" id="tfo"> tfo</label>
          <label class="bool-item"><input type="checkbox" id="sort"> sort</label>
          <label class="bool-item"><input type="checkbox" id="fdn"> fdn</label>
          <label class="bool-item"><input type="checkbox" id="expand" checked> expand</label>
          <label class="bool-item"><input type="checkbox" id="append_type"> append_type</label>
          <label class="bool-item"><input type="checkbox" id="scv"> scv</label>
          <label class="bool-item"><input type="checkbox" id="append_info" checked> append_info</label>
          <label class="bool-item"><input type="checkbox" id="new_name"> new_name</label>
        </div>
      </div>
    </div>

    <!-- 生成按钮 -->
    <button class="btn btn-primary" id="gen-btn" type="button">生成订阅链接</button>

    <!-- 错误 -->
    <div id="error-msg"></div>

    <!-- 结果 -->
    <div id="result-section">
      <div class="result-box" id="result-url"></div>
      <div class="result-actions">
        <button class="btn btn-sm" id="copy-btn" type="button">复制</button>
        <button class="btn btn-sm" id="open-btn" type="button">在新标签打开</button>
        <button class="btn btn-sm" id="preview-btn" type="button">预览内容</button>
      </div>
      <div id="preview-section">
        <pre id="preview-content"></pre>
      </div>
    </div>
  </div>
</div>

<div id="toast">[ COPIED ]</div>

<script>
// 背景粒子网络动画
(function() {
  const canvas = document.getElementById('bg-canvas');
  const ctx = canvas.getContext('2d');
  const PARTICLE_COUNT = 60;
  const CONNECT_DIST = 120;
  const COLOR = '0, 212, 255';

  let particles = [];

  function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  function initParticles() {
    particles = [];
    for (let i = 0; i < PARTICLE_COUNT; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.4,
        vy: (Math.random() - 0.5) * 0.4,
        r: Math.random() * 1.5 + 0.5,
      });
    }
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新粒子位置
    particles.forEach(p => {
      p.x += p.vx;
      p.y += p.vy;
      // 边界反弹
      if (p.x < 0 || p.x > canvas.width)  p.vx *= -1;
      if (p.y < 0 || p.y > canvas.height) p.vy *= -1;

      // 绘制粒子点
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(${COLOR}, 0.5)`;
      ctx.fill();
    });

    // 绘制连线
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x;
        const dy = particles[i].y - particles[j].y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < CONNECT_DIST) {
          const alpha = (1 - dist / CONNECT_DIST) * 0.4;
          ctx.beginPath();
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
          ctx.strokeStyle = `rgba(${COLOR}, ${alpha})`;
          ctx.lineWidth = 0.5;
          ctx.stroke();
        }
      }
    }

    requestAnimationFrame(draw);
  }

  resize();
  initParticles();
  draw();
  window.addEventListener('resize', () => { resize(); initParticles(); });
})();

// 高级选项折叠/展开
const advancedToggle = document.getElementById('advanced-toggle');
const advancedSection = document.getElementById('advanced-section');
const toggleIcon = document.getElementById('toggle-icon');

advancedToggle.addEventListener('click', () => {
  const open = advancedSection.classList.toggle('open');
  toggleIcon.classList.toggle('open', open);
  toggleIcon.textContent = open ? '▼' : '▶';
});

// subconverter 实际默认值，与之相同的 bool 不传（null = 后端跳过）
const BOOL_DEFAULTS = {
  emoji:       true,
  udp:         false,
  tfo:         false,
  sort:        false,
  fdn:         false,
  expand:      true,
  append_type: false,
  scv:         false,
  append_info: true,
  new_name:    false,
};

// 生成链接
document.getElementById('gen-btn').addEventListener('click', async () => {
  const url = document.getElementById('url').value.trim();
  if (!url) { showError('请填写订阅链接'); return; }

  const targetVal = document.getElementById('target-select').value;

  // target 映射
  const targetMap = {
    'clash':      { target: 'clash' },
    'surge4':     { target: 'surge', ver: '4' },
    'quanx':      { target: 'quanx' },
    'loon':       { target: 'loon' },
    'v2ray':      { target: 'v2ray' },
    'ss':         { target: 'ss' },
    'ssr':        { target: 'ssr' },
    'trojan':     { target: 'trojan' },
    'mixed':      { target: 'mixed' },
    'clash-list': { target: 'clash', list: true },
  };

  const extra = targetMap[targetVal] || { target: targetVal };

  // 只传与默认值不同的 bool，相同的传 null（后端跳过）
  const boolFields = Object.keys(BOOL_DEFAULTS);
  const boolValues = {};
  boolFields.forEach(id => {
    const val = document.getElementById(id).checked;
    boolValues[id] = (val === BOOL_DEFAULTS[id]) ? null : val;
  });

  // list 来自 extra（clash-list 模式）
  if (extra.list !== undefined) {
    boolValues.list = extra.list;
    delete extra.list;
  }

  const body = {
    url,
    ...extra,
    config:   document.getElementById('config').value.trim() || null,
    filename: document.getElementById('filename').value.trim() || null,
    include:  document.getElementById('include').value.trim() || null,
    exclude:  document.getElementById('exclude').value.trim() || null,
    group:    document.getElementById('group').value.trim() || null,
    ...boolValues,
  };

  hideError();
  hidePreview();

  try {
    const res = await fetch('/api/convert', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      showError(err.detail || `请求失败 (${res.status})`);
      return;
    }

    const data = await res.json();
    const fullUrl = window.location.origin + data.url;
    document.getElementById('result-url').textContent = fullUrl;
    document.getElementById('result-section').classList.add('show');

    // 绑定按钮（每次生成都重新绑，避免重复监听器）
    const copyBtn = document.getElementById('copy-btn');
    const openBtn = document.getElementById('open-btn');
    const previewBtn = document.getElementById('preview-btn');

    copyBtn.onclick = () => {
      navigator.clipboard.writeText(fullUrl).then(() => showToast());
    };

    openBtn.onclick = () => window.open(fullUrl, '_blank');

    previewBtn.onclick = () => togglePreview(fullUrl, previewBtn);

  } catch (e) {
    showError('网络错误：' + e.message);
  }
});

// 预览内容 toggle
async function togglePreview(fullUrl, btn) {
  const section = document.getElementById('preview-section');
  const content = document.getElementById('preview-content');

  // 已展开则收起
  if (section.classList.contains('show')) {
    hidePreview();
    return;
  }

  btn.textContent = '加载中…';
  btn.disabled = true;

  try {
    const res = await fetch(fullUrl);
    const text = await res.text();
    const lines = text.split('\n');
    content.textContent = lines.slice(0, 500).join('\n') + (lines.length > 500 ? '\n... (已截断)' : '');
    content.classList.remove('error');
  } catch (e) {
    content.textContent = 'Error: ' + e.message;
    content.classList.add('error');
  }

  section.classList.add('show');
  btn.textContent = '预览内容';
  btn.disabled = false;
}

function hidePreview() {
  document.getElementById('preview-section').classList.remove('show');
  document.getElementById('preview-content').textContent = '';
  const btn = document.getElementById('preview-btn');
  if (btn) { btn.textContent = '预览内容'; btn.disabled = false; }
}

function showError(msg) {
  const el = document.getElementById('error-msg');
  el.textContent = msg;
  el.classList.add('show');
}

function hideError() {
  document.getElementById('error-msg').classList.remove('show');
}

function showToast() {
  const t = document.getElementById('toast');
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2000);
}
</script>
</body>
</html>