455 lines
14 KiB
HTML
455 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hysteria2 Subscription</title>
|
|
<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: 'Inter', -apple-system, sans-serif;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
transition: all 0.3s ease;
|
|
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 {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-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;
|
|
}
|
|
|
|
.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;
|
|
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 {
|
|
background: var(--primary-gradient);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--secondary-gradient);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.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;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.dark-mode .loading-indicator {
|
|
background: rgba(31, 41, 55, 0.9);
|
|
}
|
|
|
|
.spinner {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border: 4px solid #6366f1;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cards-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="background-animation"></div>
|
|
<div class="loading-indicator" id="loading-indicator">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="header">
|
|
<h2>Welcome {{ username }} 🚀❤️</h2>
|
|
<button class="theme-toggle" id="dark-mode-toggle">
|
|
<i id="theme-icon" class="fas fa-sun"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="cards-grid">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-user"></i>
|
|
Username
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">{{ username }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<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 }}">
|
|
{{ usage }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<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="qr-item">
|
|
<h3 class="qr-title">IPv4 URI</h3>
|
|
{% if ipv4_qrcode %}
|
|
<img src="{{ ipv4_qrcode }}" alt="IPv4 QR Code" class="qrcode">
|
|
<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="qr-item">
|
|
<h3 class="qr-title">IPv6 URI</h3>
|
|
{% if ipv6_qrcode %}
|
|
<img src="{{ ipv6_qrcode }}" alt="IPv6 QR Code" class="qrcode">
|
|
<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 %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('Copied to clipboard!');
|
|
}).catch(err => {
|
|
console.error('Failed to copy text: ', err);
|
|
});
|
|
}
|
|
|
|
const themeToggle = document.getElementById('dark-mode-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
let darkMode = localStorage.getItem('dark-mode');
|
|
|
|
const enableDarkMode = () => {
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.classList.remove('fa-sun');
|
|
themeIcon.classList.add('fa-moon');
|
|
localStorage.setItem('dark-mode', 'enabled');
|
|
}
|
|
|
|
const disableDarkMode = () => {
|
|
document.body.classList.remove('dark-mode');
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
localStorage.setItem('dark-mode', null);
|
|
}
|
|
|
|
if (darkMode === 'enabled') {
|
|
enableDarkMode();
|
|
}
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
darkMode = localStorage.getItem('dark-mode');
|
|
if (darkMode !== 'enabled') {
|
|
enableDarkMode();
|
|
} else {
|
|
disableDarkMode();
|
|
}
|
|
});
|
|
|
|
document.getElementById('loading-indicator').style.display = 'block';
|
|
window.addEventListener('load', () => {
|
|
document.getElementById('loading-indicator').style.display = 'none';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|