Feat: Refactor subscription page templates

core/scripts/normalsub/normalsub.py

@@ -12,7 +12,7 @@ from io import BytesIO
 
 from aiohttp import web
 from aiohttp.web_middlewares import middleware
-from urllib.parse import unquote, parse_qs, urlparse, urljoin
+from urllib.parse import unquote, parse_qs, urlparse, urljoin, quote
 from dotenv import load_dotenv
 import qrcode
 from jinja2 import Environment, FileSystemLoader
@@ -127,9 +127,14 @@ class TemplateContext:
     expiration_date: str
     sublink_qrcode: str
     sub_link: str
+    sub_link_encoded: str
     blocked: bool = False
     local_uris: List[NodeURI] = field(default_factory=list)
     node_uris: List[NodeURI] = field(default_factory=list)
+    singbox_qrcode: Optional[str] = None
+    hiddify_qrcode: Optional[str] = None
+    streisand_qrcode: Optional[str] = None
+    nekobox_qrcode: Optional[str] = None
 
 
 class Utils:
@@ -398,14 +403,14 @@ class SubscriptionManager:
             f"total={user_info.max_download_bytes}; "
             f"expire={user_info.expiration_timestamp}\n"
         )
-        profile_lines = f"//profile-title: {username}-Hysteria2 🚀\n//profile-update-interval: 1\n"
+        profile_lines = f"//profile-title: {username}-Blitz ⚡\n//profile-update-interval: 1\n"
         return profile_lines + subscription_info + "\n".join(all_processed_uris)
 
 
 class TemplateRenderer:
     def __init__(self, template_dir: str, config: AppConfig):
         self.env = Environment(loader=FileSystemLoader(template_dir), autoescape=True)
-        self.html_template = self.env.get_template('template.html')
+        self.html_template = self.env.get_template('index.html')
         self.config = config
 
     def render(self, context: TemplateContext) -> str:
@@ -430,6 +435,8 @@ class HysteriaServer:
         safe_subpath = self.validate_and_escape_subpath(self.config.subpath)
 
         base_path = f'/{safe_subpath}'
+        self.app.router.add_get(f'{base_path}/sub/normal/style.css', self.handle_style)
+        self.app.router.add_get(f'{base_path}/sub/normal/script.js', self.handle_script)
         self.app.router.add_get(f'{base_path}/sub/normal/{{password_token}}', self.handle)
         self.app.router.add_get(f'{base_path}/robots.txt', self.robots_handler)
         self.app.router.add_route('*', f'{base_path}/{{tail:.*}}', self.handle_404_subpath)
@@ -452,7 +459,7 @@ class HysteriaServer:
         extra_config_path = '/etc/hysteria/extra.json'
         rate_limit = 100
         rate_limit_window = 60
-        template_dir = os.path.dirname(__file__)
+        template_dir = os.path.join(os.path.dirname(__file__), 'template')
 
         sni = self._load_sni_from_env(sni_file)
         return AppConfig(domain=domain, external_port=external_port,
@@ -565,6 +572,7 @@ class HysteriaServer:
             expiration_date=user_info.expiration_date,
             sublink_qrcode="",
             sub_link="#blocked",
+            sub_link_encoded="",
             blocked=True,
             local_uris=[
                 NodeURI(
@@ -603,8 +611,14 @@ class HysteriaServer:
             print(f"Warning: Constructed base URL '{base_url}' might be invalid. Check domain and port config.")
         
         sub_link = f"{base_url}/{self.config.subpath}/sub/normal/{user_info.password}"
+        sub_link_encoded = quote(sub_link, safe='')
         sublink_qrcode = Utils.generate_qrcode_base64(sub_link)
         
+        singbox_qrcode = Utils.generate_qrcode_base64(f"sing-box://import-remote-profile?url={sub_link_encoded}")
+        hiddify_qrcode = Utils.generate_qrcode_base64(f"hiddify://import/{sub_link_encoded}")
+        streisand_qrcode = Utils.generate_qrcode_base64(f"streisand://import/sub?url={sub_link_encoded}")
+        nekobox_qrcode = Utils.generate_qrcode_base64(f"nekobox://import?url={sub_link_encoded}")
+        
         local_uris = []
         node_uris = []
 
@@ -626,9 +640,14 @@ class HysteriaServer:
             expiration_date=user_info.expiration_date,
             sublink_qrcode=sublink_qrcode,
             sub_link=sub_link,
+            sub_link_encoded=sub_link_encoded,
             blocked=user_info.blocked,
             local_uris=local_uris,
-            node_uris=node_uris
+            node_uris=node_uris,
+            singbox_qrcode=singbox_qrcode,
+            hiddify_qrcode=hiddify_qrcode,
+            streisand_qrcode=streisand_qrcode,
+            nekobox_qrcode=nekobox_qrcode
         )
 
     async def robots_handler(self, request: web.Request) -> web.Response:
@@ -637,6 +656,12 @@ class HysteriaServer:
     async def handle_404_subpath(self, request: web.Request) -> web.Response:
         print(f"404 Not Found (within subpath, unhandled by specific routes): {request.path}")
         return web.Response(status=404, text="Not Found within Subpath")
+    
+    async def handle_style(self, request: web.Request) -> web.Response:
+        return web.FileResponse(os.path.join(self.config.template_dir, 'style.css'))
+
+    async def handle_script(self, request: web.Request) -> web.Response:
+        return web.FileResponse(os.path.join(self.config.template_dir, 'script.js'))
 
     def run(self):
         print(f"Starting Hysteria Normalsub server on {self.config.aiohttp_listen_address}:{self.config.aiohttp_listen_port}")

core/scripts/normalsub/template.html

@@ -1,519 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hysteria2 Subscription</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-            --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-            --danger-color: #ef4444;
-            --card-bg-light: #ffffff;
-            --card-bg-dark: #1f2937;
-            --text-light: #1f2937;
-            --text-dark: #f3f4f6;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, sans-serif;
-            margin: 0;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-            background:
-                radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-                #f8fafc;
-            background-attachment: fixed;
-        }
-
-        body.dark-mode {
-            background:
-                radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
-                #111827;
-            color: var(--text-dark);
-        }
-
-        .background-animation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            overflow: hidden;
-        }
-
-        .background-animation::before,
-        .background-animation::after {
-            content: '';
-            position: absolute;
-            width: 300px;
-            height: 300px;
-            border-radius: 50%;
-            background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
-            animation: float 20s infinite linear;
-        }
-
-        .background-animation::before {
-            top: -150px;
-            left: -150px;
-        }
-
-        .background-animation::after {
-            bottom: -150px;
-            right: -150px;
-            animation-delay: -10s;
-        }
-
-        @keyframes float {
-            0% {
-                transform: translate(0, 0) rotate(0deg);
-            }
-            50% {
-                transform: translate(100px, 100px) rotate(180deg);
-            }
-            100% {
-                transform: translate(0, 0) rotate(360deg);
-            }
-        }
-
-        .container {
-            max-width: 1000px;
-            margin: 2rem auto;
-            padding: 0 1rem;
-            position: relative;
-            z-index: 1;
-        }
-
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 0.2rem;
-        }
-
-        .theme-toggle {
-            background: none;
-            border: none;
-            color: #6366f1;
-            font-size: 1.5rem;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 50%;
-            transition: all 0.3s ease;
-        }
-
-        .theme-toggle:hover {
-            background: rgba(99, 102, 241, 0.1);
-        }
-
-        .cards-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 1rem;
-        }
-
-        .card {
-            background: var(--card-bg-light);
-            border-radius: 1rem;
-            overflow: hidden;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .dark-mode .card {
-            background: rgba(31, 41, 55, 0.8);
-            border-color: rgba(255, 255, 255, 0.05);
-        }
-
-        .card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-        }
-
-        .card-header {
-            background: var(--primary-gradient);
-            color: white;
-            padding: 1.25rem;
-            font-weight: 600;
-            font-size: 1.1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .card-body {
-            padding: 1.5rem;
-        }
-
-        .card-text {
-            margin: 0;
-            font-size: 1.1rem;
-            color: var(--text-light);
-        }
-
-        .dark-mode .card-text {
-            color: var(--text-dark);
-        }
-
-        .qr-section {
-            background: var(--card-bg-light);
-            border-radius: 1rem;
-            overflow: hidden;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            margin-bottom: 1.5rem;
-        }
-
-        .qr-header {
-            background: var(--primary-gradient);
-            color: white;
-            padding: 1.25rem;
-            font-weight: 600;
-            font-size: 1.1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        
-        .qr-header.blocked {
-             background: var(--danger-color);
-        }
-
-        .qr-content {
-            padding: 2rem;
-        }
-
-        .dark-mode .qr-section {
-            background: rgba(31, 41, 55, 0.8);
-            border-color: rgba(255, 255, 255, 0.05);
-        }
-
-        .qr-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
-        }
-
-        .qr-item {
-            text-align: center;
-        }
-
-        .qr-title {
-            color: #6366f1;
-            font-weight: 600;
-            margin-bottom: 1rem;
-        }
-
-        .qr-title.blocked {
-            color: var(--danger-color);
-        }
-
-        .dark-mode .qr-title {
-            color: #818cf8;
-        }
-        
-        .dark-mode .qr-title.blocked {
-            color: #f87171;
-        }
-
-        .qrcode {
-            max-width: 200px;
-            padding: 1rem;
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        
-        .uri-unavailable {
-            color: #9ca3af;
-        }
-        
-        .dark-mode .uri-unavailable {
-            color: #4b5563;
-        }
-
-        .btn-group {
-            display: flex;
-            gap: 0.5rem;
-            justify-content: center;
-            margin-top: 1rem;
-        }
-
-        .btn {
-            padding: 0.5rem 1rem;
-            border: none;
-            border-radius: 0.5rem;
-            font-weight: 500;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            transition: all 0.3s ease;
-        }
-
-        .btn-primary {
-            background: var(--primary-gradient);
-            color: white;
-        }
-
-        .btn-primary:hover {
-            opacity: 0.9;
-        }
-
-        .btn-secondary {
-            background: var(--secondary-gradient);
-            color: white;
-        }
-
-        .btn-secondary:hover {
-            opacity: 0.9;
-        }
-
-        .loading-indicator {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(255, 255, 255, 0.9);
-            padding: 2rem;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            display: none;
-            backdrop-filter: blur(10px);
-            z-index: 100;
-        }
-
-        .dark-mode .loading-indicator {
-            background: rgba(31, 41, 55, 0.9);
-        }
-
-        .spinner {
-            width: 3rem;
-            height: 3rem;
-            border: 4px solid #6366f1;
-            border-top-color: transparent;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        @media (max-width: 768px) {
-            .cards-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div class="background-animation"></div>
-    <div class="loading-indicator" id="loading-indicator">
-        <div class="spinner"></div>
-    </div>
-
-    <div class="container">
-        <div class="header">
-            <h2>Welcome {{ username }} 🚀❤️</h2>
-            <button class="theme-toggle" id="dark-mode-toggle">
-                <i id="theme-icon" class="fas fa-sun"></i>
-            </button>
-        </div>
-
-        <div class="cards-grid">
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-user"></i>
-                    Username
-                </div>
-                <div class="card-body">
-                    <p class="card-text">{{ username }}</p>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-chart-bar"></i>
-                    Used / Total
-                </div>
-                <div class="card-body">
-                    <p class="card-text" data-toggle="tooltip" data-placement="top"
-                        title="Total Data Usage: {{ usage_raw }}">
-                        {{ usage }}
-                    </p>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-calendar-alt"></i>
-                    Expiration Date
-                </div>
-                <div class="card-body">
-                    <p class="card-text">{{ expiration_date }}</p>
-                </div>
-            </div>
-        </div>
-        
-        <div class="qr-section">
-            <div class="qr-header {% if blocked %}blocked{% endif %}">
-                <i class="fas fa-link"></i>
-                Subscription Link
-            </div>
-             <div class="qr-content">
-                <div class="qr-grid">
-                    {% if blocked %}
-                    <div class="qr-item" style="grid-column: 1 / -1;">
-                        <h3 class="qr-title blocked">Account Suspended</h3>
-                        <p class="card-text">Your subscription link is disabled. Please contact support.</p>
-                    </div>
-                    {% else %}
-                    <div class="qr-item" style="grid-column: 1 / -1;">
-                        <h3 class="qr-title">Universal Subscription Link</h3>
-                        <img src="{{ sublink_qrcode }}" alt="Subscription QR Code" class="qrcode">
-                        <div class="btn-group">
-                            <button class="btn btn-primary" onclick="copyToClipboard('{{ sub_link }}')">
-                                <i class="fas fa-copy"></i> Copy
-                            </button>
-                        </div>
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-
-        <div class="qr-section">
-            <div class="qr-header {% if blocked %}blocked{% endif %}">
-                <i class="fas fa-server"></i>
-                 {% if blocked %}
-                    Connection Status
-                {% else %}
-                    Local Server Connections
-                {% endif %}
-            </div>
-            <div class="qr-content">
-                <div class="qr-grid">
-                     {% if blocked %}
-                        {% for item in local_uris %}
-                        <div class="qr-item" style="grid-column: 1 / -1;">
-                             <h3 class="qr-title blocked">{{ item.label }}</h3>
-                             <p class="card-text">{{ usage_raw }}</p>
-                        </div>
-                        {% endfor %}
-                    {% else %}
-                        {% for item in local_uris %}
-                        <div class="qr-item">
-                            <h3 class="qr-title">{{ item.label }} URI</h3>
-                            {% if item.qrcode %}
-                            <img src="{{ item.qrcode }}" alt="{{ item.label }} QR Code" class="qrcode">
-                            <div class="btn-group">
-                                <button class="btn btn-primary" onclick="copyToClipboard('{{ item.uri }}')">
-                                    <i class="fas fa-copy"></i> Copy
-                                </button>
-                            </div>
-                            {% else %}
-                            <p class="uri-unavailable">{{ item.label }} URI not available</p>
-                            {% endif %}
-                        </div>
-                        {% endfor %}
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-
-        {% if node_uris and not blocked %}
-        <div class="qr-section">
-            <div class="qr-header">
-                <i class="fas fa-globe-americas"></i>
-                External Nodes
-            </div>
-            <div class="qr-content">
-                <div class="qr-grid">
-                    {% for item in node_uris %}
-                    <div class="qr-item">
-                        <h3 class="qr-title">{{ item.label }}</h3>
-                        {% if item.qrcode %}
-                        <img src="{{ item.qrcode }}" alt="{{ item.label }} QR Code" class="qrcode">
-                        <div class="btn-group">
-                            <button class="btn btn-primary" onclick="copyToClipboard('{{ item.uri }}')">
-                                <i class="fas fa-copy"></i> Copy
-                            </button>
-                        </div>
-                        {% else %}
-                        <p class="uri-unavailable">{{ item.label }} URI not available</p>
-                        {% endif %}
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-        {% endif %}
-
-    </div>
-
-    <script>
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                alert('Copied to clipboard!');
-            }).catch(err => {
-                console.error('Failed to copy text: ', err);
-            });
-        }
-
-        const themeToggle = document.getElementById('dark-mode-toggle');
-        const themeIcon = document.getElementById('theme-icon');
-        let darkMode = localStorage.getItem('dark-mode');
-
-        const enableDarkMode = () => {
-            document.body.classList.add('dark-mode');
-            themeIcon.classList.remove('fa-sun');
-            themeIcon.classList.add('fa-moon');
-            localStorage.setItem('dark-mode', 'enabled');
-        }
-
-        const disableDarkMode = () => {
-            document.body.classList.remove('dark-mode');
-            themeIcon.classList.remove('fa-moon');
-            themeIcon.classList.add('fa-sun');
-            localStorage.setItem('dark-mode', null);
-        }
-
-        if (darkMode === 'enabled') {
-            enableDarkMode();
-        }
-
-        themeToggle.addEventListener('click', () => {
-            darkMode = localStorage.getItem('dark-mode');
-            if (darkMode !== 'enabled') {
-                enableDarkMode();
-            } else {
-                disableDarkMode();
-            }
-        });
-
-        document.getElementById('loading-indicator').style.display = 'block';
-        window.addEventListener('load', () => {
-            document.getElementById('loading-indicator').style.display = 'none';
-        });
-    </script>
-</body>
-
-</html>

core/scripts/normalsub/template/index.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ username }}</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+</head>
+<body>
+    <div class="background-animation"></div>
+    <div id="loading-indicator" class="loading-indicator">
+        <div class="spinner"></div>
+    </div>
+
+    <div class="container">
+        <header class="header">
+            <h1 class="header-title">Welcome, <strong>{{ username }}</strong></h1>
+            <button id="dark-mode-toggle" class="theme-toggle" aria-label="Toggle theme">
+                <i id="theme-icon" class="fas fa-sun"></i>
+            </button>
+        </header>
+
+        <main>
+            <section class="info-grid">
+                <div class="card info-card">
+                    <div class="card-icon"><i class="fas fa-user"></i></div>
+                    <div class="card-content">
+                        <h2 class="card-title">Username</h2>
+                        <p class="card-value">{{ username }}</p>
+                    </div>
+                </div>
+
+                <div class="card info-card">
+                    <div class="card-icon"><i class="fas fa-chart-line"></i></div>
+                    <div class="card-content" data-tooltip="{{ usage_raw }}">
+                        <h2 class="card-title">Data Usage</h2>
+                        <p class="card-value">{{ usage }}</p>
+                    </div>
+                </div>
+
+                <div class="card info-card">
+                    <div class="card-icon"><i class="fas fa-calendar-check"></i></div>
+                    <div class="card-content">
+                        <h2 class="card-title">Expires On</h2>
+                        <p class="card-value">{{ expiration_date }}</p>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="card app-import-section {% if blocked %}blocked{% endif %}">
+                <div class="card-header">
+                    <i class="fas fa-link"></i>
+                    <h2>Client Import</h2>
+                </div>
+                <div class="card-body">
+                    {% if blocked %}
+                    <div class="blocked-message">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        <h3>Account Suspended</h3>
+                        <p>Your subscription is currently disabled.</p>
+                    </div>
+                    {% else %}
+                    <div class="app-tabs">
+                        <div class="app-tabs-nav">
+                            <button class="app-tab-btn active" data-target="#tab-general">General</button>
+                            <button class="app-tab-btn" data-target="#tab-singbox">Sing-Box</button>
+                            <button class="app-tab-btn" data-target="#tab-hiddify">Hiddify</button>
+                            <button class="app-tab-btn" data-target="#tab-streisand">Streisand</button>
+                            <button class="app-tab-btn" data-target="#tab-nekobox">NekoBox</button>
+                        </div>
+                        <div class="app-tabs-content">
+                            <div class="app-tab-pane active" id="tab-general">
+                                <img src="{{ sublink_qrcode }}" alt="Universal Subscription QR Code" class="qrcode">
+                                <button class="btn btn-primary" onclick="copyToClipboard('{{ sub_link }}')">
+                                    <i class="fas fa-copy"></i> Copy Universal Link
+                                </button>
+                            </div>
+                            <div class="app-tab-pane" id="tab-singbox">
+                                <img src="{{ singbox_qrcode }}" alt="Sing-Box QR Code" class="qrcode">
+                                <a href="sing-box://import-remote-profile?url={{ sub_link_encoded }}" class="btn btn-secondary">
+                                    <i class="fas fa-arrow-right"></i> Add to Sing-Box
+                                </a>
+                            </div>
+                            <div class="app-tab-pane" id="tab-hiddify">
+                                <img src="{{ hiddify_qrcode }}" alt="Hiddify QR Code" class="qrcode">
+                                <a href="hiddify://import/{{ sub_link_encoded }}" class="btn btn-secondary">
+                                    <i class="fas fa-arrow-right"></i> Add to Hiddify
+                                </a>
+                            </div>
+                            <div class="app-tab-pane" id="tab-streisand">
+                                <img src="{{ streisand_qrcode }}" alt="Streisand QR Code" class="qrcode">
+                                <a href="streisand://import/sub?url={{ sub_link_encoded }}" class="btn btn-secondary">
+                                    <i class="fas fa-arrow-right"></i> Add to Streisand
+                                </a>
+                            </div>
+                            <div class="app-tab-pane" id="tab-nekobox">
+                                <img src="{{ nekobox_qrcode }}" alt="NekoBox QR Code" class="qrcode">
+                                <a href="nekobox://import?url={{ sub_link_encoded }}" class="btn btn-secondary">
+                                    <i class="fas fa-arrow-right"></i> Add to NekoBox
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+            </section>
+
+            <section class="card uri-section {% if blocked %}blocked{% endif %}">
+                <div class="card-header">
+                    <i class="fas fa-server"></i>
+                    <h2>Manual Connection URIs</h2>
+                </div>
+                <div class="card-body">
+                    {% if blocked %}
+                        <div class="blocked-message">
+                             <i class="fas fa-ban"></i>
+                             <h3>Connections Disabled</h3>
+                             <p>{{ usage_raw }}</p>
+                        </div>
+                    {% else %}
+                        <div class="qr-grid">
+                        {% for item in local_uris %}
+                            <div class="qr-item">
+                                <h3 class="qr-title">{{ item.label }}</h3>
+                                {% if item.qrcode %}
+                                    <img src="{{ item.qrcode }}" alt="{{ item.label }} QR Code" class="qrcode">
+                                    <button class="btn btn-secondary" onclick="copyToClipboard('{{ item.uri }}')">
+                                        <i class="fas fa-copy"></i> Copy URI
+                                    </button>
+                                {% else %}
+                                    <p class="uri-unavailable">URI not available</p>
+                                {% endif %}
+                            </div>
+                        {% endfor %}
+                        </div>
+                    {% endif %}
+                </div>
+            </section>
+
+            {% if node_uris and not blocked %}
+            <section class="card uri-section">
+                <div class="card-header">
+                    <i class="fas fa-globe"></i>
+                    <h2>External Node URIs</h2>
+                </div>
+                <div class="card-body">
+                    <div class="qr-grid">
+                        {% for item in node_uris %}
+                        <div class="qr-item">
+                            <h3 class="qr-title">{{ item.label }}</h3>
+                            {% if item.qrcode %}
+                                <img src="{{ item.qrcode }}" alt="{{ item.label }} QR Code" class="qrcode">
+                                <button class="btn btn-secondary" onclick="copyToClipboard('{{ item.uri }}')">
+                                    <i class="fas fa-copy"></i> Copy URI
+                                </button>
+                            {% else %}
+                                <p class="uri-unavailable">URI not available</p>
+                            {% endif %}
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </section>
+            {% endif %}
+        </main>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

core/scripts/normalsub/template/script.js

@@ -0,0 +1,119 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('dark-mode-toggle');
+    const themeIcon = document.getElementById('theme-icon');
+    let isDarkMode = localStorage.getItem('darkMode') === 'enabled';
+
+    const enableDarkMode = () => {
+        document.body.classList.add('dark-mode');
+        themeIcon.classList.replace('fa-sun', 'fa-moon');
+        localStorage.setItem('darkMode', 'enabled');
+        isDarkMode = true;
+    };
+
+    const disableDarkMode = () => {
+        document.body.classList.remove('dark-mode');
+        themeIcon.classList.replace('fa-moon', 'fa-sun');
+        localStorage.setItem('darkMode', 'disabled');
+        isDarkMode = false;
+    };
+
+    if (isDarkMode) {
+        enableDarkMode();
+    } else {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (prefersDark && localStorage.getItem('darkMode') === null) {
+            enableDarkMode();
+        }
+    }
+
+    themeToggle.addEventListener('click', () => {
+        isDarkMode ? disableDarkMode() : enableDarkMode();
+    });
+
+    // --- Loading Indicator ---
+    const loadingIndicator = document.getElementById('loading-indicator');
+    window.addEventListener('load', () => {
+        loadingIndicator.style.opacity = '0';
+        setTimeout(() => {
+            loadingIndicator.style.display = 'none';
+        }, 300);
+    });
+
+    // --- App Import Tabs ---
+    const tabsContainer = document.querySelector('.app-tabs');
+    if (tabsContainer) {
+        const tabButtons = tabsContainer.querySelectorAll('.app-tab-btn');
+        const tabPanes = tabsContainer.querySelectorAll('.app-tab-pane');
+
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const targetId = button.getAttribute('data-target');
+                
+                tabButtons.forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                
+                tabPanes.forEach(pane => {
+                    if ('#' + pane.id === targetId) {
+                        pane.classList.add('active');
+                    } else {
+                        pane.classList.remove('active');
+                    }
+                });
+            });
+        });
+    }
+});
+
+function copyToClipboard(text) {
+    if (!navigator.clipboard) {
+        alert('Clipboard API not available.');
+        return;
+    }
+    navigator.clipboard.writeText(text).then(() => {
+        showToast('Copied to clipboard!');
+    }).catch(err => {
+        console.error('Failed to copy text: ', err);
+        alert('Failed to copy.');
+    });
+}
+
+function showToast(message) {
+    let toast = document.querySelector('.toast');
+    if (toast) {
+        toast.remove();
+    }
+
+    toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.textContent = message;
+    
+    document.body.appendChild(toast);
+    
+    const toastStyles = `
+        position: fixed;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%) translateY(20px);
+        background-color: var(--text-light-primary);
+        color: var(--bg-light);
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.75rem;
+        font-weight: 500;
+        z-index: 1001;
+        opacity: 0;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        box-shadow: var(--shadow-lg);
+    `;
+    toast.style.cssText = toastStyles;
+
+    setTimeout(() => {
+        toast.style.opacity = '1';
+        toast.style.transform = 'translateX(-50%) translateY(0)';
+    }, 10);
+
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(-50%) translateY(20px)';
+        toast.addEventListener('transitionend', () => toast.remove());
+    }, 2000);
+}

core/scripts/normalsub/template/style.css

@@ -0,0 +1,118 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    /* Color Palette */
+    --bg-light: #f9fafb;
+    --bg-dark: #111827;
+    --card-bg-light: #ffffff;
+    --card-bg-dark: #1f2937;
+    --text-light-primary: #1f2937;
+    --text-light-secondary: #6b7280;
+    --text-dark-primary: #f9fafb;
+    --text-dark-secondary: #9ca3af;
+    --accent-primary: #4f46e5;
+    --accent-secondary: #3b82f6;
+    --accent-danger: #e11d48;
+    --border-light: #e5e7eb;
+    --border-dark: #374151;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --gradient: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+    
+    /* Layout & Design */
+    --radius: 0.75rem;
+    --transition-speed: 0.3s;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: var(--bg-light);
+    color: var(--text-light-primary);
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body.dark-mode {
+    --bg-light: var(--bg-dark);
+    --card-bg-light: var(--card-bg-dark);
+    --text-light-primary: var(--text-dark-primary);
+    --text-light-secondary: var(--text-dark-secondary);
+    --border-light: var(--border-dark);
+    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
+}
+
+.background-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background: var(--bg-light); transition: background var(--transition-speed) ease; }
+.background-animation::before, .background-animation::after { content: ''; position: absolute; width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; border-radius: 50%; background: var(--gradient); opacity: 0.1; filter: blur(120px); animation: float 30s infinite ease-in-out; }
+.background-animation::before { top: 5%; left: 5%; }
+.background-animation::after { bottom: 5%; right: 5%; animation-delay: -15s; }
+@keyframes float { 50% { transform: translate(20%, -20%) scale(1.1); } }
+
+.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3.5rem; }
+.header-title { font-size: 1.75rem; font-weight: 600; }
+.header-title strong { font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+.theme-toggle { background-color: transparent; border: 1px solid var(--border-light); color: var(--text-light-secondary); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.125rem; transition: all var(--transition-speed) ease; }
+.theme-toggle:hover { color: var(--accent-primary); border-color: var(--accent-primary); transform: rotate(15deg); }
+
+.card { background: var(--card-bg-light); border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 1rem;  margin-top: 1rem; box-shadow: var(--shadow-md); transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; }
+.dark-mode .card { background: var(--card-bg-dark); }
+.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
+.card:last-child { margin-bottom: 0; }
+.card-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-light); font-weight: 600; font-size: 1.125rem; }
+.card-header i { color: var(--accent-primary); }
+.card-body { padding: 1.5rem; }
+
+.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
+.info-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; margin-bottom: 0; }
+.card-icon { background: var(--gradient); color: white; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
+.card-title { font-size: 0.875rem; font-weight: 500; color: var(--text-light-secondary); margin-bottom: 0.25rem; }
+.card-value { font-size: 1.25rem; font-weight: 600; }
+
+[data-tooltip] { position: relative; cursor: help; }
+[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: var(--text-light-primary); color: var(--bg-light); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease; box-shadow: var(--shadow-lg); }
+[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
+
+.app-import-section.blocked, .uri-section.blocked { background-color: var(--accent-danger); color: white; }
+.app-import-section.blocked .card-header, .uri-section.blocked .card-header { border-color: transparent; color: white; }
+.app-import-section.blocked .card-header i, .uri-section.blocked .card-header i { color: white; }
+.blocked-message { text-align: center; }
+.blocked-message i { font-size: 2.5rem; margin-bottom: 1rem; }
+.blocked-message h3 { font-size: 1.25rem; }
+.blocked-message p { opacity: 0.9; }
+
+.app-tabs-nav { display: flex; overflow-x: auto; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); gap: 0.5rem; }
+.app-tab-btn { font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-light-secondary); background: transparent; border: none; padding: 0.75rem 1rem; cursor: pointer; transition: all var(--transition-speed) ease; border-bottom: 2px solid transparent; }
+.app-tab-btn:hover { color: var(--text-light-primary); }
+.app-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
+.app-tabs-content { padding-top: 1rem; }
+.app-tab-pane { display: none; flex-direction: column; align-items: center; gap: 1.25rem; }
+.app-tab-pane.active { display: flex; }
+
+.qr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; place-items: center; }
+.qr-item { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
+.qr-title { font-weight: 600; font-size: 1rem; }
+.qrcode { max-width: 200px; width: 100%; padding: 0.75rem; background: white; border-radius: 0.75rem; box-shadow: var(--shadow-md); }
+
+.btn { font-family: inherit; text-decoration: none; font-size: 1rem; font-weight: 600; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all var(--transition-speed) ease; }
+.btn-primary { background: var(--gradient); color: white; box-shadow: var(--shadow-md); }
+.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+.btn-secondary { background: var(--card-bg-light); color: var(--accent-primary); border: 1px solid var(--border-light); }
+.btn-secondary:hover { background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); }
+
+.uri-unavailable { color: var(--text-light-secondary); }
+
+.loading-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-light); display: grid; place-items: center; z-index: 1000; transition: opacity var(--transition-speed) ease; }
+.spinner { width: 3rem; height: 3rem; border: 4px solid var(--accent-primary); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 768px) {
+    .container { padding: 1rem; }
+    .header { flex-direction: column; gap: 1.5rem; align-items: flex-start; margin-bottom: 2.5rem; }
+    .header-title { font-size: 1.5rem; }
+    .card-body { padding: 1rem; }
+    .info-grid { grid-template-columns: 1fr; }
+}