From dfbde933ef12e3c75230674f75a047e3065ca265 Mon Sep 17 00:00:00 2001
From: Whispering Wind <151555003+ReturnFI@users.noreply.github.com>
Date: Sat, 22 Feb 2025 20:26:45 +0330
Subject: [PATCH] New Template

---
 core/scripts/normalsub/template.html | 582 ++++++++++++++++-----------
 1 file changed, 357 insertions(+), 225 deletions(-)

diff --git a/core/scripts/normalsub/template.html b/core/scripts/normalsub/template.html
index 625a3b3..29f4a38 100644
--- a/core/scripts/normalsub/template.html
+++ b/core/scripts/normalsub/template.html
@@ -4,304 +4,432 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hysteria2 Subscription</title>
-    <link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css" id="theme-link">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-
     <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f5f5f5;
+        :root {
+            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+            --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            --card-bg-light: #ffffff;
+            --card-bg-dark: #1f2937;
+            --text-light: #1f2937;
+            --text-dark: #f3f4f6;
         }
-        body.dark-mode {
-            background-color: #343a40;
-            color: white;
-        }
-        .container {
-            margin-top: 20px;
-        }
-        .card {
-            border: none;
-            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
-            transition: all 0.3s ease;
-            border-radius: 10px;
-        }
-        .card:hover {
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-            transform: translateY(-5px);
-        }
-        .card.dark-mode {
 
-             background-color: #3d4852;
-             color: #ffffff; 
-             box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.075); 
+        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;
         }
-        .card.dark-mode:hover {
-          
-             box-shadow: 0 0.5rem 1rem rgba(255,255,255, 0.15);
+
+        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);
         }
+
+        /* Animated background elements */
+        .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);
+            }
+        }
+
+        /* Rest of the styles remain the same */
+        .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 {
-            font-weight: bold;
-            color: #fff; 
-            background-color: #5e72e4; 
-             /* border-bottom: 1px solid #5e72e4; */
-             transition: background-color 0.3s ease;
-             padding: 1rem 1.25rem; 
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
+            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-header.dark-mode {
-            color: #fff;
-            background-color: #5a6a7f;
-             /* border-bottom: 1px solid #5a6a7f; */
+
+        .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; /* Add this to contain the header */
+            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);
+        }
+
+        .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-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;
+        }
+
+        .dark-mode .qr-title {
+            color: #818cf8;
         }
 
         .qrcode {
             max-width: 200px;
-            margin: 10px auto;
-            display: block;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 5px;
+            padding: 1rem;
+            background: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
+
+        .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 {
-             color: #fff;
-            background-color: #5e72e4;
-            border-color: #5e72e4;
-            transition: background-color 0.3s ease, border-color 0.3s ease;
+            background: var(--primary-gradient);
+            color: white;
         }
+
         .btn-primary:hover {
-            background-color: #324cdd;
-            border-color: #324cdd;
+            opacity: 0.9;
         }
-        .btn-primary.dark-mode {
-              color: #fff;
-              background-color: #5a6a7f;
-              border-color:  #5a6a7f;
 
-          }
-        .btn-primary.dark-mode:hover {
-            
-            background-color:  #6d7d94;
-             border-color:  #6d7d94;
-          }
-
-         .btn-info {
-           color: #fff;
-           background-color: #17a2b8;
-           border-color: #17a2b8;
-           transition: background-color 0.3s ease, border-color 0.3s ease;
-         }
-          .btn-info:hover{
-              background-color: #117a8b;
-               border-color: #117a8b;
-
-          }
-          .btn-info.dark-mode{
-               color: #fff;
-                background-color: #38b2ac;
-               border-color: #38b2ac;
-           }
-           .btn-info.dark-mode:hover {
-             background-color: #4ecdc4;
-              border-color: #4ecdc4;
-           }
-        .tooltip-inner {
-            max-width: 300px;
-            text-align: left;
+        .btn-secondary {
+            background: var(--secondary-gradient);
+            color: white;
         }
-        #loading-indicator {
+
+        .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;
-            z-index: 1000;
+            backdrop-filter: blur(10px);
         }
-        .spinner-border {
+
+        .dark-mode .loading-indicator {
+            background: rgba(31, 41, 55, 0.9);
+        }
+
+        .spinner {
             width: 3rem;
             height: 3rem;
-            color: #5e72e4;
+            border: 4px solid #6366f1;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
 
-        .row {
-            margin-bottom: 20px;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
-        .col-md-4 {
-            padding: 15px;
-        }
-        h5 {
-            color: #5e72e4;
-            margin-top: 15px;
-            font-weight: 600;
 
+        @media (max-width: 768px) {
+            .cards-grid {
+                grid-template-columns: 1fr;
+            }
         }
-        h5.dark-mode{
-             color:  #ffffff;
-         }
-        .card-text {
-            font-size: 1.1em;
-            color: #333;
-        }
-         .card-text.dark-mode{
-                color: #f8f9fa;
-         }
-
-        .uri-unavailable {
-           color: #777;
-           text-align: center;
-           margin: 10px auto;
-       }
     </style>
 </head>
 <body>
-    <div id="loading-indicator">
-        <div class="spinner-border text-primary" role="status">
-            <span class="sr-only">Loading...</span>
-        </div>
+    <div class="background-animation"></div>
+    <div class="loading-indicator" id="loading-indicator">
+        <div class="spinner"></div>
     </div>
+
+    <!-- Rest of the HTML remains the same -->
     <div class="container">
-        <div class="d-flex justify-content-end mb-3">
-            <button class="btn btn-light" id="dark-mode-toggle">
+        <div class="header">
+            <h2>Hysteria2 Subscription</h2>
+            <button class="theme-toggle" id="dark-mode-toggle">
                 <i id="theme-icon" class="fas fa-sun"></i>
             </button>
         </div>
 
-        <div class="row">
-            <div class="col-md-4">
-                <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 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="col-md-4">
-                <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 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="col-md-4">
-                <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 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="row mt-4">
-            <div class="col-md-12">
-                <div class="card">
-                    <div class="card-header">
-                        <i class="fas fa-qrcode"></i> QR Codes
-                    </div>
-                    <div class="card-body text-center">
-                        <div class="row">
-                            <div class="col-md-4">
-                                <h5>Subscription Link</h5>
-                                <img src="{{ sublink_qrcode }}" alt="Subscription QR Code" class="qrcode">
-                                <button class="btn btn-primary" onclick="copyToClipboard('{{ sub_link }}')"><i class="fas fa-copy"></i> Copy</button>
-                                <a href="{{ sub_link }}" class="btn btn-info" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt"></i> Open Link</a>
-                            </div>
-                            <div class="col-md-4">
-                                <h5>IPv4 URI</h5>
-                                {% if ipv4_qrcode %}
-                                    <img src="{{ ipv4_qrcode }}" alt="IPv4 QR Code" class="qrcode">
-                                    <button class="btn btn-primary" onclick="copyToClipboard('{{ ipv4_uri }}')"><i class="fas fa-copy"></i> Copy</button>
-                                    <a href="{{ ipv4_uri }}" class="btn btn-info" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt"></i> Open Link</a>
-                                {% else %}
-                                    <p class="uri-unavailable">IPv4 URI not available</p>
-                                {% endif %}
-                            </div>
-                            <div class="col-md-4">
-                                <h5>IPv6 URI</h5>
-                                {% if ipv6_qrcode %}
-                                    <img src="{{ ipv6_qrcode }}" alt="IPv6 QR Code" class="qrcode">
-                                    <button class="btn btn-primary" onclick="copyToClipboard('{{ ipv6_uri }}')"><i class="fas fa-copy"></i> Copy</button>
-                                    <a href="{{ ipv6_uri }}" class="btn btn-info" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt"></i> Open Link</a>
-                                {% else %}
-                                    <p class="uri-unavailable">IPv6 URI not available</p>
-                                {% endif %}
-                            </div>
+        <div class="qr-section">
+            <div class="qr-header">
+                <i class="fas fa-qrcode"></i>
+                QR Codes
+            </div>
+            <div class="qr-content">
+                <div class="qr-grid">
+                    <div class="qr-item">
+                        <h3 class="qr-title">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>
+                            <a href="{{ sub_link }}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
+                                <i class="fas fa-external-link-alt"></i> Open
+                            </a>
                         </div>
                     </div>
+        
+                    <div class="qr-item">
+                        <h3 class="qr-title">IPv4 URI</h3>
+                        {% if ipv4_qrcode %}
+                            <img src="{{ ipv4_qrcode }}" alt="IPv4 QR Code" class="qrcode">
+                            <div class="btn-group">
+                                <button class="btn btn-primary" onclick="copyToClipboard('{{ ipv4_uri }}')">
+                                    <i class="fas fa-copy"></i> Copy
+                                </button>
+                                <a href="{{ ipv4_uri }}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
+                                    <i class="fas fa-external-link-alt"></i> Open
+                                </a>
+                            </div>
+                        {% else %}
+                            <p class="uri-unavailable">IPv4 URI not available</p>
+                        {% endif %}
+                    </div>
+        
+                    <div class="qr-item">
+                        <h3 class="qr-title">IPv6 URI</h3>
+                        {% if ipv6_qrcode %}
+                            <img src="{{ ipv6_qrcode }}" alt="IPv6 QR Code" class="qrcode">
+                            <div class="btn-group">
+                                <button class="btn btn-primary" onclick="copyToClipboard('{{ ipv6_uri }}')">
+                                    <i class="fas fa-copy"></i> Copy
+                                </button>
+                                <a href="{{ ipv6_uri }}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
+                                    <i class="fas fa-external-link-alt"></i> Open
+                                </a>
+                            </div>
+                        {% else %}
+                            <p class="uri-unavailable">IPv6 URI not available</p>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        });
-
         function copyToClipboard(text) {
-            var textArea = document.createElement("textarea");
-            textArea.value = text;
-            document.body.appendChild(textArea);
-            textArea.select();
-            document.execCommand("Copy");
-            textArea.remove();
-            alert('URI copied to clipboard!');
+            navigator.clipboard.writeText(text).then(() => {
+                alert('Copied to clipboard!');
+            }).catch(err => {
+                console.error('Failed to copy text: ', err);
+            });
         }
 
-        function showLoadingIndicator() {
-            document.getElementById('loading-indicator').style.display = 'block';
-        }
-
-        function hideLoadingIndicator() {
-            document.getElementById('loading-indicator').style.display = 'none';
-        }
-
-        window.addEventListener('load', hideLoadingIndicator);
-
         const themeToggle = document.getElementById('dark-mode-toggle');
         const themeIcon = document.getElementById('theme-icon');
-        const themeLink = document.getElementById('theme-link');
         let darkMode = localStorage.getItem('dark-mode');
 
         const enableDarkMode = () => {
-
             document.body.classList.add('dark-mode');
-            document.querySelectorAll('.card').forEach(card => card.classList.add('dark-mode'));
-            document.querySelectorAll('.card-header').forEach(header => header.classList.add('dark-mode'));
-            document.querySelectorAll('.btn-primary').forEach(button => button.classList.add('dark-mode'));
-            document.querySelectorAll('.btn-info').forEach(button => button.classList.add('dark-mode'));
-             document.querySelectorAll('h5').forEach(button => button.classList.add('dark-mode'));
-             document.querySelectorAll('.card-text').forEach(button => button.classList.add('dark-mode'));
             themeIcon.classList.remove('fa-sun');
             themeIcon.classList.add('fa-moon');
-            themeLink.href = "https://bootswatch.com/4/darkly/bootstrap.min.css";
             localStorage.setItem('dark-mode', 'enabled');
         }
 
         const disableDarkMode = () => {
             document.body.classList.remove('dark-mode');
-            document.querySelectorAll('.card').forEach(card => card.classList.remove('dark-mode'));
-             document.querySelectorAll('.card-header').forEach(header => header.classList.remove('dark-mode'));
-             document.querySelectorAll('.btn-primary').forEach(button => button.classList.remove('dark-mode'));
-             document.querySelectorAll('.btn-info').forEach(button => button.classList.remove('dark-mode'));
-            document.querySelectorAll('h5').forEach(button => button.classList.remove('dark-mode'));
-            document.querySelectorAll('.card-text').forEach(button => button.classList.remove('dark-mode'));
-
             themeIcon.classList.remove('fa-moon');
             themeIcon.classList.add('fa-sun');
-            themeLink.href = "https://bootswatch.com/4/pulse/bootstrap.min.css";
             localStorage.setItem('dark-mode', null);
         }
 
@@ -317,7 +445,11 @@
                 disableDarkMode();
             }
         });
-         showLoadingIndicator();
+
+        document.getElementById('loading-indicator').style.display = 'block';
+        window.addEventListener('load', () => {
+            document.getElementById('loading-indicator').style.display = 'none';
+        });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>