|
|
@@ -0,0 +1,154 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>登录界面</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 100vh;
|
|
|
+ margin: 0;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ .login-container {
|
|
|
+ background: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .tab.active {
|
|
|
+ color: #007bff;
|
|
|
+ border-bottom: 2px solid #007bff;
|
|
|
+ }
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .form-group input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .form-group input:focus {
|
|
|
+ border-color: #007bff;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ .form-group.error input {
|
|
|
+ border-color: #dc3545;
|
|
|
+ }
|
|
|
+ .form-group .error-message {
|
|
|
+ color: #dc3545;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .form-group.error .error-message {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: white;
|
|
|
+ background-color: #007bff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .btn:active {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+ .telegram-btn {
|
|
|
+ background-color: #36a8e6;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .telegram-btn i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="login-container">
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab active" id="code-login-tab">验证码登录</div>
|
|
|
+ <div class="tab" id="account-login-tab">账号密码登录</div>
|
|
|
+ </div>
|
|
|
+ <form id="code-login-form" action="{{ route('admin.tglogin') }}" method="POST">
|
|
|
+ <div class="form-group" id="telegram-id-group">
|
|
|
+ <input type="text" placeholder="📨 电报用户ID" id="telegram-id" name="telegram_id" required>
|
|
|
+ <div class="error-message">请输入机器人个人中心用户ID！</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" id="verification-code-group">
|
|
|
+ <input type="text" placeholder="🔒 请输入验证码" id="verification-code" name="verification_code" required>
|
|
|
+ <div class="error-message">请输入验证码！</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <button type="button" class="btn" id="get-code-btn">获取验证码</button>
|
|
|
+ </div>
|
|
|
+ <button type="submit" class="btn" id="code-login-btn">账号登录</button>
|
|
|
+ <button type="button" class="btn telegram-btn" id="telegram-login-btn">
|
|
|
+ <i>📨</i> Telegram 一键快捷登录
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ document.getElementById("get-code-btn").addEventListener("click", function () {
|
|
|
+ const telegramId = document.getElementById("telegram-id").value.trim();
|
|
|
+ const verificationCode = document.getElementById("verification-code").value.trim();
|
|
|
+ const telegramIdGroup = document.getElementById("telegram-id-group");
|
|
|
+ const verificationCodeGroup = document.getElementById("verification-code-group");
|
|
|
+
|
|
|
+ // 清除之前的错误状态
|
|
|
+ telegramIdGroup.classList.remove("error");
|
|
|
+ verificationCodeGroup.classList.remove("error");
|
|
|
+
|
|
|
+ let hasError = false;
|
|
|
+
|
|
|
+ if (!telegramId) {
|
|
|
+ telegramIdGroup.classList.add("error");
|
|
|
+ hasError = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!verificationCode) {
|
|
|
+ verificationCodeGroup.classList.add("error");
|
|
|
+ hasError = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!hasError) {
|
|
|
+ // 如果没有错误，执行获取验证码逻辑
|
|
|
+ alert("验证码已发送到您的 Telegram 账号！");
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
