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        .inactive {
 39            background-color: #9E9E9E;
 40            color: white;
 41        }
 42
 43        .qr-popup {
 44            position: fixed;
 45            top: 50%;
 46            left: 50%;
 47            transform: translate(-50%, -50%);
 48            background-color: white;
 49            padding: 10px 25px 25px 25px;
 50            border-radius: 8px;
 51            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 52            display: none;
 53            z-index: 9999;
 54        }
 55
 56        .qr-close-button {
 57            text-align: right;
 58            margin-bottom: 5px;
 59            margin-right: -15px;
 60        }
 61    </style>
 62    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 63</head>
 64
 65<body>
 66<h1>User Information</h1>
 67<p>Username: {{ user.username }} <span class="status {% if user.is_active %}active{% else %}inactive{% endif %}">{{
 68    "Active" if user.is_active else "Inactive"}}</span></p>
 69
 70<p>Data Used: {{ user.used_traffic | bytesformat }}{% if user.data_limit_reset_strategy != 'no_reset' %} (resets
 71    every {{ user.data_limit_reset_strategy.value }}){% endif %}</p>
 72<p>Data Limit: {% if not user.data_limit %}∞{% else %}{{ user.data_limit | bytesformat }}{% endif %}</p>
 73<p>Expiration Date:
 74    {% if user.expire_strategy == "never" %}
 75    never
 76    {% elif user.expire_strategy == "start_on_first_use" %}
 77    {{ user.usage_duration // 3600 // 24}} days after the first use
 78    {% else %}
 79    {% set current_datetime = now() %}
 80    {% set remaining_days = ((user.expire_date - current_datetime).days) %}
 81    {{ user.expire_date | datetime }} ({{ remaining_days | int }} days
 82    remaining)
 83    {% endif %}</p>
 84
 85{% if user.is_active %}
 86<h2>Links:</h2>
 87<ul>
 88    {% for link in links %}
 89    <li>
 90        <input type="text" value="{{ link }}" readonly>
 91        <button class="copy-button" onclick="copyLink('{{ link }}', this)">Copy</button>
 92        <button class="qr-button" data-link="{{ link }}">QR Code</button>
 93    </li>
 94    {% endfor %}
 95</ul>
 96<div class="qr-popup" id="qrPopup">
 97    <div class="qr-close-button">
 98        <button onclick="closeQrPopup()">X</button>
 99    </div>
100    <div id="qrCodeContainer"></div>
101</div>
102{% endif %}
103
104<script>
105
106    function copyLink(link, button) {
107        const tempInput = document.createElement('input');
108        tempInput.setAttribute('value', link);
109        document.body.appendChild(tempInput);
110        tempInput.select();
111        document.execCommand('copy');
112        document.body.removeChild(tempInput);
113
114        button.textContent = 'Copied!';
115        setTimeout(function () {
116            button.textContent = 'Copy';
117        }, 1500);
118    }
119
120    const qrButtons = document.querySelectorAll('.qr-button');
121    const qrPopup = document.getElementById('qrPopup');
122
123    qrButtons.forEach((qrButton) => {
124        qrButton.addEventListener('click', () => {
125            const link = qrButton.dataset.link;
126            while (qrCodeContainer.firstChild) {
127                qrCodeContainer.removeChild(qrCodeContainer.firstChild);
128            }
129            const qrCode = new QRCode(qrCodeContainer, {
130                text: link,
131                width: 256,
132                height: 256
133            });
134            qrPopup.style.display = 'block';
135        });
136    });
137    function closeQrPopup() {
138        document.getElementById('qrPopup').style.display = 'none';
139    }
140</script>
141</body>
142
143</html>