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