mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-04-19 21:42:24 +00:00
remaining traffic value in template
This commit is contained in:
Mo30-mtg
GitHub
parent
6a0d2e0a29
commit
550f377263
1 changed files with 142 additions and 0 deletions
142
sub/html/sub.html
Normal file
142
sub/html/sub.html
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ .sId }} - Sub Info</title>
|
||||
<script src="https://unpkg.com/tailwindcss-cdn@3.4.10/tailwindcss-with-all-plugins.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@33.003/Vazirmatn-Variable-font-face.css"
|
||||
rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
||||
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
|
||||
crossorigin="anonymous" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/jalaali-js/dist/jalaali.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"
|
||||
integrity="sha256-25ncr0CpJhgbzkUiR3wu/Fkk9sSykRG2qX+upHfJUos=" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body class="flex items-center justify-center min-h-screen bg-gray-900 text-white font-[Vazirmatn] mr-4 ml-4">
|
||||
<div class="container text-center max-w-screen-sm">
|
||||
<div class="shadow-lg bg-gray-800 rounded-xl p-5 mt-3">
|
||||
<h1 class="text-2xl font-bold">پنل کاربری اشتراک</h1>
|
||||
</div>
|
||||
<div class="shadow-lg bg-gray-800 rounded-xl p-5 mt-3">
|
||||
<table class="table-auto w-full">
|
||||
<tr>
|
||||
<td class="w-1/3 content-center"><i
|
||||
class="bg-gray-900 mx-2 p-5 w-20 h-20 rounded-full text-4xl text-white fa fa-user"></i></td>
|
||||
<td class="w-2/3 content-center">
|
||||
<center>
|
||||
<h3 class="text-xl font-bold leading-10">سلام {{ .sId }} عزیز</h3>
|
||||
<p>اشتراک شما <span class="bg-gray-700 px-2 m-1 rounded-lg"><span id="status"></span></span>
|
||||
می باشد</p>
|
||||
</center>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="shadow-lg bg-gray-800 rounded-xl p-5 mt-3 leading-8">
|
||||
از <span class="text-lime-500"><span id="total"></span></span> حجمی که خریداری کرده اید <span
|
||||
class="text-cyan-400 ">{{ .download }} دانلود</span> و <span class="text-yellow-300">{{ .upload }}
|
||||
آپلود</span> داشتید!<br>
|
||||
حجم باقی مانده از سرویس شما <span class="text-pink-500" id="remaining"></span> و تا تاریخ <span
|
||||
class="bg-gray-700 px-2 m-1 rounded-lg"><span id="timestamp"></span></span> معتبر می باشد
|
||||
</div>
|
||||
<div class="shadow-lg bg-gray-800 rounded-xl p-5 mt-3">
|
||||
از طریق هر یک از روش های زیر میتوانید به اشتراکتان متصل شوید
|
||||
</div>
|
||||
<div class="shadow-lg bg-gray-800 rounded-xl p-5 mt-3">
|
||||
<canvas id="qrcode" class="rounded-lg inline mt-2 mb-3"></canvas>
|
||||
</div>
|
||||
<div class="bg-gray-700 rounded-xl shadow-lg p-4 font-mono flow-text break-words mt-3">
|
||||
{{ range .result }}
|
||||
<div class="text-gray-400 text-sm">
|
||||
<button onclick="copyToClipboard('{{ . }}')" class="bg-gray-500 px-2 py-1 m-1 rounded-lg text-white"><i
|
||||
class="fa-regular fa-copy"></i> کپی</button>
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<script>
|
||||
// Get the HTML element to display the timestamp.
|
||||
const humanDateElement = document.getElementById('timestamp');
|
||||
// Convert timestamp to a human-readable date
|
||||
const timestamp = parseInt("{{ .expire }}", 10) * 1000; // Parse and convert to milliseconds
|
||||
const date = new Date(timestamp);
|
||||
// Extract the Gregorian year, month, and day
|
||||
const gregorianYear = date.getFullYear();
|
||||
const gregorianMonth = date.getMonth() + 1; // Months are 0-indexed
|
||||
const gregorianDay = date.getDate();
|
||||
// Convert Gregorian to Jalali
|
||||
const jalaliDate = jalaali.toJalaali(gregorianYear, gregorianMonth, gregorianDay);
|
||||
// Format the Jalali date
|
||||
const formattedJalaliDate = `${jalaliDate.jy}/${jalaliDate.jm}/${jalaliDate.jd}`;
|
||||
// Display the Jalali date in the HTML
|
||||
if ('{{ .expire }}' === '0') {
|
||||
humanDateElement.textContent = 'ابد و یک روز';
|
||||
} else {
|
||||
humanDateElement.textContent = formattedJalaliDate;
|
||||
}
|
||||
// Get the HTML element to display the status.
|
||||
const statusElement = document.getElementById('status');
|
||||
if (timestamp >= Date.now() && parseInt('{{ .downloadByte}}') + parseInt('{{ .uploadByte }}') <= parseInt('{{ .totalByte }}')) {
|
||||
statusElement.textContent = 'فعال';
|
||||
} else {
|
||||
statusElement.textContent = 'غیرفعال';
|
||||
}
|
||||
if ('{{ .totalByte }}' === '0') {
|
||||
document.getElementById('total').textContent = '∞';
|
||||
statusElement.textContent = 'نامحدود';
|
||||
document.getElementById('remaining').textContent = '∞';
|
||||
} else {
|
||||
document.getElementById('total').textContent = '{{ .total }}';
|
||||
document.getElementById('remaining').textContent = formatBytes(parseInt('{{ .totalByte }}') - (parseInt('{{ .downloadByte}}') + parseInt('{{ .uploadByte }}')));
|
||||
}
|
||||
// Remaining Traffic Calculation
|
||||
function formatBytes(bytes, decimals = 2) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
|
||||
const result = (Math.abs(bytes) / Math.pow(k, i)).toFixed(decimals);
|
||||
return parseFloat(result) * Math.sign(bytes) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
|
||||
(function () {
|
||||
var qr = new QRious({
|
||||
element: document.getElementById('qrcode'),
|
||||
value: '{{ .subUrl }}',
|
||||
size: 250
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<div class="mt-4 flex justify-center gap-4">
|
||||
<button class="flex items-center gap-2 px-3 py-3 bg-zinc-900 text-white rounded-xl hover:bg-zinc-600"
|
||||
onclick="window.location.href='v2box://install-sub?url={{ .subUrl }}&name={{ .sId }}';">
|
||||
<span>افزودن به V2Box</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-3 py-3 bg-violet-900 text-white rounded-xl hover:bg-violet-600"
|
||||
onclick="window.location.href='streisand://import/{{ .subUrl }}';">
|
||||
<span>افزودن به Streisand</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-3 py-3 bg-gray-100 text-black rounded-xl hover:bg-gray-500"
|
||||
onclick="window.location.href='v2rayng://install-config?url={{ .subUrl }}';">
|
||||
<span>افزودن به V2RayNG</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 text-sm text-gray-400">طراحی با <i class="text-red-500 fa fa-heart"></i> توسط <a
|
||||
href="https://github.com/aghayecoder/tx-ui">تی
|
||||
ایکس</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue