1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5    <title>Subscription Information</title>
  6    <style>
  7        body {
  8            font-family: Arial, sans-serif;
  9            padding: 20px;
 10        }
 11
 12        h1 {
 13            margin-top: 0;
 14        }
 15
 16        .link-input {
 17            margin-bottom: 10px;
 18        }
 19
 20        .copy-button {
 21            margin-left: 10px;
 22        }
 23
 24        .status {
 25            display: inline-block;
 26            padding: 3px 8px;
 27            border-radius: 3px;
 28            font-weight: bold;
 29            font-size: 16px;
 30            line-height: 1;
 31        }
 32
 33        .active {
 34            background-color: #4CAF50;
 35            color: white;
 36        }
 37
 38        .limited {
 39            background-color: #F44336;
 40            color: white;
 41        }
 42
 43        .expired {
 44            background-color: #FF9800;
 45            color: white;
 46        }
 47
 48        .disabled {
 49            background-color: #9E9E9E;
 50            color: white;
 51        }
 52
 53        .qr-popup {
 54            position: fixed;
 55            top: 50%;
 56            left: 50%;
 57            transform: translate(-50%, -50%);
 58            background-color: white;
 59            padding: 10px 25px 25px 25px;
 60            border-radius: 8px;
 61            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 62            display: none;
 63            z-index: 9999;
 64        }
 65
 66        .qr-close-button {
 67            text-align: right;
 68            margin-bottom: 5px;
 69            margin-right: -15px;
 70        }
 71    </style>
 72    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 73</head>
 74
 75<body>
 76    <h1>User Information</h1>
 77    <p>Username: {{ user.username }}</p>
 78    <p>Status: <span
 79            class="status {% if user.status.value == 'active' %}active{% elif user.status.value == 'limited' %}limited{% elif user.status.value == 'expired' %}expired{% elif user.status.value == 'disabled' %}disabled{% endif %}">{{
 80            user.status.value }}</span></p>
 81    <p>Data Limit: {% if not user.data_limit %}∞{% else %}{{ user.data_limit | bytesformat }}{% endif %}</p>
 82    <p>Data Used: {{ user.used_traffic | bytesformat }}{% if user.data_limit_reset_strategy != 'no_reset' %} (resets
 83        every {{ user.data_limit_reset_strategy.value }}){% endif %}</p>
 84    <p>Expiration Date:
 85        {% if not user.expire %}
 86        ∞
 87        {% else %}
 88        {% set current_datetime = now() %}
 89        {% set remaining_days = ((user.expire - current_datetime).days) %}
 90        {{ user.expire | datetime }} ({{ remaining_days | int }} days
 91        remaining)
 92        {% endif %}</p>
 93
 94    {% if user.status == 'active' %}
 95    <h2>Links:</h2>
 96    <ul>
 97        {% for link in links %}
 98        <li>
 99            <input type="text" value="{{ link }}" readonly>
100            <button class="copy-button" onclick="copyLink('{{ link }}', this)">Copy</button>
101            <button class="qr-button" data-link="{{ link }}">QR Code</button>
102        </li>
103        {% endfor %}
104    </ul>
105    <div class="qr-popup" id="qrPopup">
106        <div class="qr-close-button">
107            <button onclick="closeQrPopup()">X</button>
108        </div>
109        <div id="qrCodeContainer"></div>
110    </div>
111    {% endif %}
112
113    <script>
114        function copyLink(link, button) {
115            const tempInput = document.createElement('input');
116            tempInput.setAttribute('value', link);
117            document.body.appendChild(tempInput);
118            tempInput.select();
119            document.execCommand('copy');
120            document.body.removeChild(tempInput);
121
122            button.textContent = 'Copied!';
123            setTimeout(function () {
124                button.textContent = 'Copy';
125            }, 1500);
126        }
127
128        const qrButtons = document.querySelectorAll('.qr-button');
129        const qrPopup = document.getElementById('qrPopup');
130
131        qrButtons.forEach((qrButton) => {
132            qrButton.addEventListener('click', () => {
133                const link = qrButton.dataset.link;
134                while (qrCodeContainer.firstChild) {
135                    qrCodeContainer.removeChild(qrCodeContainer.firstChild);
136                }
137                const qrCode = new QRCode(qrCodeContainer, {
138                    text: link,
139                    width: 256,
140                    height: 256
141                });
142                qrPopup.style.display = 'block';
143            });
144        });
145        function closeQrPopup() {
146            document.getElementById('qrPopup').style.display = 'none';
147        }
148    </script>
149</body>
150
151</html>