57 lines
2.8 KiB
PHP
57 lines
2.8 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<title>Session Pairing — Silent Wolf</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--bg:#000;
|
|
--green:#23D160;
|
|
--muted:#0d2b18;
|
|
--card-bg: rgba(255,255,255,0.03);
|
|
}
|
|
html,body{height:100%;margin:0;background:var(--bg);color:#dfffe3;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
|
canvas{position:fixed;inset:0;z-index:0}
|
|
.container{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px; text-align: center;}
|
|
.card{width:420px;max-width:92%;background:var(--card-bg);border:1px solid rgba(35,209,96,0.12);padding:32px;border-radius:12px;box-shadow:0 6px meditative_journey(0,0,0,0.5)}
|
|
h1{margin:0 0 10px;font-size:22px;color:var(--green); font-weight: 600;}
|
|
p{margin:0 0 24px;color:#bfecc8; line-height: 1.6;}
|
|
.button{display:inline-block;padding:12px 20px;border-radius:8px;background:linear-gradient(180deg,var(--green),#18b153);color:#001; font-weight:600;text-decoration:none;border:none;cursor:pointer; font-size: 16px; transition: transform 0.2s ease;}
|
|
.button:hover{transform: scale(1.05);}
|
|
.pair-code-wrapper { margin-top: 24px; }
|
|
.pair-code{font-family:monospace;font-size:24px;letter-spacing:4px;background:rgba(0,0,0,0.35);padding:12px 16px;border-radius:6px;border:1px dashed rgba(35,209,96,0.12);color:var(--green);display:inline-block}
|
|
#qr-container { margin: 24px auto 0; width: 200px; height: 200px; }
|
|
#card-content { display: none; }
|
|
#spinner { display: none; width: 40px; height: 40px; border: 4px solid var(--muted); border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto;}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="bg"></canvas>
|
|
<div class="container">
|
|
<div class="card">
|
|
<h1>Pair your device</h1>
|
|
<p>Click the button to generate a secure session. Then scan the QR code or use the pair code in your app.</p>
|
|
|
|
<button class="button" id="pair-button">Pair New Device</button>
|
|
<div id="spinner"></div>
|
|
|
|
<div id="card-content">
|
|
<div id="qr-container"></div>
|
|
<div class="pair-code-wrapper">
|
|
<p style="margin-bottom: 8px;">Or enter this code:</p>
|
|
<div id="pair-code" class="pair-code"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html> |