bivashy/Blitz-Proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Template

Browse Source
This commit is contained in:
Whispering Wind
2025-02-22 20:26:45 +03:30
committed by GitHub
parent f0697d56e6
commit dfbde933ef
1 changed files with 357 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

516
core/scripts/normalsub/template.html
View File

@ -4,183 +4,331 @@
<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>
: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 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
}
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);
font-family: 'Inter', -apple-system, sans-serif;
margin: 0;
min-height: 100vh;
transition: all 0.3s ease;
border-radius: 10px;
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;
}
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 {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.card.dark-mode {
background-color: #3d4852;
color: #ffffff;
box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.075);
}
.card.dark-mode:hover {
box-shadow: 0 0.5rem 1rem rgba(255,255,255, 0.15);
}
.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;
}
.btn-primary.dark-mode {
color: #fff;
background-color: #5a6a7f;
border-color: #5a6a7f;
}
.btn-primary.dark-mode:hover {
background-color: #6d7d94;
border-color: #6d7d94;
opacity: 0.9;
}
.btn-info {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
transition: background-color 0.3s ease, border-color 0.3s ease;
.btn-secondary {
background: var(--secondary-gradient);
color: white;
}
.btn-info:hover{
background-color: #117a8b;
border-color: #117a8b;
.btn-secondary:hover {
opacity: 0.9;
}
.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;
}
#loading-indicator {
.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;
}
.col-md-4 {
padding: 15px;
}
h5 {
color: #5e72e4;
margin-top: 15px;
font-weight: 600;
}
h5.dark-mode{
color: #ffffff;
}
.card-text {
font-size: 1.1em;
color: #333;
}
.card-text.dark-mode{
color: #f8f9fa;
@keyframes spin {
to { transform: rotate(360deg); }
}
.uri-unavailable {
color: #777;
text-align: center;
margin: 10px auto;
@media (max-width: 768px) {
.cards-grid {
grid-template-columns: 1fr;
}
}
</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="cards-grid">
<div class="card">
<div class="card-header">
<i class="fas fa-user"></i> Username
<i class="fas fa-user"></i>
Username
</div>
<div class="card-body">
<p class="card-text">{{ username }}</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<i class="fas fa-chart-bar"></i> Used / Total
<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 }}">
@ -188,49 +336,67 @@
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<i class="fas fa-calendar-alt"></i> Expiration Date
<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="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="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>
<div class="qr-item">
<h3 class="qr-title">IPv4 URI</h3>
{% 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>
<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="col-md-4">
<h5>IPv6 URI</h5>
<div class="qr-item">
<h3 class="qr-title">IPv6 URI</h3>
{% 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>
<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 %}
@ -239,69 +405,31 @@
</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>