| <!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; } |
| |
| |
| @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; |
| } |
| |
| |
| #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 { |
| 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-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; } |
| |
| |
| .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 { |
| 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 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> |
|
|
| |
| <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 ? '▼' : '▶'; |
| }); |
| |
| |
| 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; |
| |
| |
| 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 }; |
| |
| |
| 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; |
| }); |
| |
| |
| 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); |
| } |
| }); |
| |
| |
| 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> |
|
|
