mirror of
https://github.com/IdalecioSch/WGDashboard-WHMCS.git
synced 2026-07-28 00:30:07 -03:00
removed generate qrcodes that i struggled settin up
This commit is contained in:
+234
-318
@@ -1,288 +1,152 @@
|
||||
{if $error}
|
||||
<div class="alert alert-danger">
|
||||
<strong>Error:</strong> {$error}
|
||||
</div>
|
||||
{else}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{if $formatted_config}
|
||||
{if $error}
|
||||
<div class="alert alert-danger">
|
||||
<strong>Error:</strong> {$error}
|
||||
</div>
|
||||
{else}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{if $formatted_config}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-qrcode"></i> QR Code
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div id="qrcode" style="display: inline-block; margin-bottom: 10px;"></div>
|
||||
<p class="text-muted">Scan this QR code with your WireGuard client</p>
|
||||
<div class="text-center" style="margin-top: 15px;">
|
||||
<button class="btn btn-info btn-sm" onclick="showInstructions()">
|
||||
<i class="fa fa-info-circle"></i> Installation Instructions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{else}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-qrcode"></i> QR Code
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<p class="text-muted">Configuration not available</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-qrcode"></i> QR Code
|
||||
<i class="fa fa-cog"></i> WireGuard Configuration
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div id="qrcode" style="display: inline-block; margin-bottom: 10px;"></div>
|
||||
<p class="text-muted">Scan this QR code with your WireGuard client</p>
|
||||
<div class="text-center" style="margin-top: 15px;">
|
||||
<button class="btn btn-info btn-sm" onclick="showInstructions()">
|
||||
<i class="fa fa-info-circle"></i> Installation Instructions
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{if $formatted_config}
|
||||
<div class="form-group">
|
||||
<label>Configuration File:</label>
|
||||
<pre class="wireguard-config" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4; color: #333; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; max-height: 350px; overflow-y: auto;">{$formatted_config|escape}</pre>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary" onclick="downloadFormattedConfig()">
|
||||
<i class="fa fa-download"></i> Download Configuration
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="copyFormattedConfig()">
|
||||
<i class="fa fa-copy"></i> Copy to Clipboard
|
||||
</button>
|
||||
</div>
|
||||
{else}
|
||||
<p class="text-muted">Configuration not available</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{else}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-qrcode"></i> QR Code
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<p class="text-muted">Configuration not available</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-cog"></i> WireGuard Configuration
|
||||
</h3>
|
||||
{* Instructions Modal *}
|
||||
<div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">WireGuard Setup Instructions</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{if $formatted_config}
|
||||
<div class="form-group">
|
||||
<label>Configuration File:</label>
|
||||
<pre class="wireguard-config" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4; color: #333; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; max-height: 350px; overflow-y: auto;">{$formatted_config|escape}</pre>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary" onclick="downloadFormattedConfig()">
|
||||
<i class="fa fa-download"></i> Download Configuration
|
||||
</button>
|
||||
<button class="btn btn-default" onclick="copyFormattedConfig()">
|
||||
<i class="fa fa-copy"></i> Copy to Clipboard
|
||||
</button>
|
||||
</div>
|
||||
{else}
|
||||
<p class="text-muted">Configuration not available</p>
|
||||
{/if}
|
||||
<div class="modal-body">
|
||||
<h5>Mobile Devices (Android/iOS):</h5>
|
||||
<ol>
|
||||
<li>Install the WireGuard app from Google Play Store or App Store</li>
|
||||
<li>Open the app and tap the "+" button</li>
|
||||
<li>Select "Scan from QR code"</li>
|
||||
<li>Scan the QR code displayed above</li>
|
||||
<li>Give your tunnel a name and save</li>
|
||||
</ol>
|
||||
|
||||
<h5>Desktop (Windows/macOS/Linux):</h5>
|
||||
<ol>
|
||||
<li>Download and install WireGuard from <a href="https://www.wireguard.com/install/" target="_blank">wireguard.com</a></li>
|
||||
<li>Click "Add Tunnel" → "Add empty tunnel..."</li>
|
||||
<li>Copy the configuration above and paste it</li>
|
||||
<li>Save and activate the tunnel</li>
|
||||
</ol>
|
||||
|
||||
<h5>Command Line (Linux):</h5>
|
||||
<ol>
|
||||
<li>Save the configuration to a file (e.g., <code>wg0.conf</code>)</li>
|
||||
<li>Run: <code>sudo wg-quick up wg0</code></li>
|
||||
<li>To stop: <code>sudo wg-quick down wg0</code></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{* Instructions Modal *}
|
||||
<div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">WireGuard Setup Instructions</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>Mobile Devices (Android/iOS):</h5>
|
||||
<ol>
|
||||
<li>Install the WireGuard app from Google Play Store or App Store</li>
|
||||
<li>Open the app and tap the "+" button</li>
|
||||
<li>Select "Scan from QR code"</li>
|
||||
<li>Scan the QR code displayed above</li>
|
||||
<li>Give your tunnel a name and save</li>
|
||||
</ol>
|
||||
<script src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&format=svg&data=test" style="display:none;"></script>
|
||||
<script>
|
||||
var configForQR = null;
|
||||
|
||||
<h5>Desktop (Windows/macOS/Linux):</h5>
|
||||
<ol>
|
||||
<li>Download and install WireGuard from <a href="https://www.wireguard.com/install/" target="_blank">wireguard.com</a></li>
|
||||
<li>Click "Add Tunnel" → "Add empty tunnel..."</li>
|
||||
<li>Copy the configuration above and paste it</li>
|
||||
<li>Save and activate the tunnel</li>
|
||||
</ol>
|
||||
|
||||
<h5>Command Line (Linux):</h5>
|
||||
<ol>
|
||||
<li>Save the configuration to a file (e.g., <code>wg0.conf</code>)</li>
|
||||
<li>Run: <code>sudo wg-quick up wg0</code></li>
|
||||
<li>To stop: <code>sudo wg-quick down wg0</code></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js" onload="initQRCode()" onerror="loadQRCodeFallback()"></script>
|
||||
<script>
|
||||
var qrCodeLibraryLoaded = false;
|
||||
var configForQR = null;
|
||||
|
||||
function initQRCode() {
|
||||
qrCodeLibraryLoaded = true;
|
||||
console.log('QRCode library loaded successfully');
|
||||
if (configForQR) {
|
||||
generateQRCode(configForQR);
|
||||
}
|
||||
}
|
||||
|
||||
function loadQRCodeFallback() {
|
||||
console.log('Primary QRCode library failed, trying fallback...');
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js';
|
||||
script.onload = function() {
|
||||
console.log('Fallback QRCode library loaded');
|
||||
qrCodeLibraryLoaded = true;
|
||||
if (configForQR) {
|
||||
generateQRCodeFallback(configForQR);
|
||||
}
|
||||
};
|
||||
script.onerror = function() {
|
||||
console.error('Both QRCode libraries failed to load');
|
||||
function generateQRCode(configText) {
|
||||
var qrCodeElement = document.getElementById('qrcode');
|
||||
if (qrCodeElement) {
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">Unable to load QR Code library</p>';
|
||||
}
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
function generateQRCode(configText) {
|
||||
var qrCodeElement = document.getElementById('qrcode');
|
||||
|
||||
console.log('Generating QR Code with qrcode.js...');
|
||||
console.log('Config text length:', configText.length);
|
||||
|
||||
if (qrCodeElement && configText && configText.trim() !== '') {
|
||||
if (typeof QRCode === 'undefined') {
|
||||
console.error('QRCode library not available, trying fallback');
|
||||
generateQRCodeFallback(configText);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
QRCode.toCanvas(qrCodeElement, configText, {
|
||||
width: 250,
|
||||
margin: 3,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
}, function(error) {
|
||||
if (error) {
|
||||
console.error('QR Code generation failed:', error);
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">QR Code generation failed: ' + error.message + '</p>';
|
||||
} else {
|
||||
console.log('QR Code generated successfully');
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Exception during QR code generation:', e);
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">QR Code generation error: ' + e.message + '</p>';
|
||||
}
|
||||
} else {
|
||||
console.error('QR Code generation failed: element or config missing');
|
||||
if (qrCodeElement) {
|
||||
qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateQRCodeFallback(configText) {
|
||||
var qrCodeElement = document.getElementById('qrcode');
|
||||
console.log('Trying fallback QR code generation...');
|
||||
|
||||
if (qrCodeElement && configText) {
|
||||
try {
|
||||
var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
|
||||
var img = document.createElement('img');
|
||||
img.src = qrUrl;
|
||||
img.alt = 'WireGuard QR Code';
|
||||
img.style.border = '3px solid #ddd';
|
||||
img.style.borderRadius = '4px';
|
||||
img.onload = function() {
|
||||
console.log('Fallback QR code loaded successfully');
|
||||
};
|
||||
img.onerror = function() {
|
||||
if (qrCodeElement && configText && configText.trim() !== '') {
|
||||
try {
|
||||
var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
|
||||
var img = document.createElement('img');
|
||||
img.src = qrUrl;
|
||||
img.alt = 'WireGuard QR Code';
|
||||
img.style.border = '3px solid #ddd';
|
||||
img.style.borderRadius = '4px';
|
||||
img.onerror = function() {
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
|
||||
};
|
||||
qrCodeElement.innerHTML = '';
|
||||
qrCodeElement.appendChild(img);
|
||||
} catch (e) {
|
||||
console.error('QR code generation failed:', e);
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
|
||||
};
|
||||
qrCodeElement.innerHTML = '';
|
||||
qrCodeElement.appendChild(img);
|
||||
} catch (e) {
|
||||
console.error('Fallback QR code generation failed:', e);
|
||||
qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{if $formatted_config}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
configForQR = {$formatted_config|json_encode};
|
||||
|
||||
if (qrCodeLibraryLoaded) {
|
||||
generateQRCode(configForQR);
|
||||
} else {
|
||||
console.log('Waiting for QRCode library to load...');
|
||||
setTimeout(function() {
|
||||
if (!qrCodeLibraryLoaded && configForQR) {
|
||||
console.log('Timeout reached, using fallback QR generation');
|
||||
generateQRCodeFallback(configForQR);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
{else}
|
||||
console.log('No configuration available for QR code');
|
||||
{/if}
|
||||
|
||||
function downloadFormattedConfig() {
|
||||
{if $formatted_config}
|
||||
var config = {$formatted_config|json_encode};
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
|
||||
element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
{/if}
|
||||
}
|
||||
|
||||
function copyFormattedConfig() {
|
||||
{if $formatted_config}
|
||||
var config = {$formatted_config|json_encode};
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(config).then(function() {
|
||||
alert('Configuration copied to clipboard!');
|
||||
}).catch(function(err) {
|
||||
fallbackCopyTextToClipboard(config);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyTextToClipboard(config);
|
||||
}
|
||||
{/if}
|
||||
}
|
||||
|
||||
function fallbackCopyTextToClipboard(text) {
|
||||
var textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.top = "0";
|
||||
textArea.style.left = "0";
|
||||
textArea.style.position = "fixed";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
var successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
alert('Configuration copied to clipboard!');
|
||||
} else {
|
||||
alert('Failed to copy configuration. Please copy manually.');
|
||||
if (qrCodeElement) {
|
||||
qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to copy configuration. Please copy manually.');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
// Legacy functions for backward compatibility
|
||||
function downloadConfig() {
|
||||
var textarea = document.querySelector('textarea');
|
||||
if (textarea) {
|
||||
var config = textarea.value;
|
||||
{if $formatted_config}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
configForQR = {$formatted_config|json_encode};
|
||||
generateQRCode(configForQR);
|
||||
});
|
||||
{/if}
|
||||
|
||||
function downloadFormattedConfig() {
|
||||
{if $formatted_config}
|
||||
var config = {$formatted_config|json_encode};
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
|
||||
element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
|
||||
@@ -290,76 +154,128 @@ function downloadConfig() {
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
{/if}
|
||||
}
|
||||
}
|
||||
|
||||
function copyConfig() {
|
||||
var textarea = document.querySelector('textarea');
|
||||
if (textarea) {
|
||||
textarea.select();
|
||||
function copyFormattedConfig() {
|
||||
{if $formatted_config}
|
||||
var config = {$formatted_config|json_encode};
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(config).then(function() {
|
||||
alert('Configuration copied to clipboard!');
|
||||
}).catch(function(err) {
|
||||
fallbackCopyTextToClipboard(config);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyTextToClipboard(config);
|
||||
}
|
||||
{/if}
|
||||
}
|
||||
|
||||
function fallbackCopyTextToClipboard(text) {
|
||||
var textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.top = "0";
|
||||
textArea.style.left = "0";
|
||||
textArea.style.position = "fixed";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
alert('Configuration copied to clipboard!');
|
||||
var successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
alert('Configuration copied to clipboard!');
|
||||
} else {
|
||||
alert('Failed to copy configuration. Please copy manually.');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to copy configuration. Please select and copy manually.');
|
||||
alert('Failed to copy configuration. Please copy manually.');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
// Legacy functions for backward compatibility
|
||||
function downloadConfig() {
|
||||
var textarea = document.querySelector('textarea');
|
||||
if (textarea) {
|
||||
var config = textarea.value;
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
|
||||
element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showInstructions() {
|
||||
$('#instructionsModal').modal('show');
|
||||
}
|
||||
</script>
|
||||
function copyConfig() {
|
||||
var textarea = document.querySelector('textarea');
|
||||
if (textarea) {
|
||||
textarea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
alert('Configuration copied to clipboard!');
|
||||
} catch (err) {
|
||||
alert('Failed to copy configuration. Please select and copy manually.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
.panel-heading .fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
function showInstructions() {
|
||||
$('#instructionsModal').modal('show');
|
||||
}
|
||||
</script>
|
||||
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
<style>
|
||||
.panel-heading .fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
code {
|
||||
word-break: break-all;
|
||||
}
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.table-condensed td {
|
||||
padding: 5px;
|
||||
}
|
||||
code {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.modal-body h5 {
|
||||
color: #337ab7;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.table-condensed td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.modal-body h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-body h5 {
|
||||
color: #337ab7;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/***** Modal close button alignment *****/
|
||||
.modal-header {
|
||||
position: relative;
|
||||
}
|
||||
.modal-header .close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
.modal-body h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wireguard-config {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/***** Modal close button alignment *****/
|
||||
.modal-header {
|
||||
position: relative;
|
||||
}
|
||||
.modal-header .close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#qrcode canvas {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
.wireguard-config {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#qrcode canvas {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user