File size: 7,518 Bytes
133609a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<!-- Bootstrap 5.3 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="/">
<img src="/static/images/ShareAPI.png" alt="API Router Logo" width="30" height="30" class="d-inline-block align-text-top me-2">
<span class="fw-bold fs-5">API Router</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-comment-dots me-1"></i> 聊天
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-key me-1"></i> 令牌
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-shopping-cart me-1"></i> 充值
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-chart-bar me-1"></i> 总览
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-file-alt me-1"></i> 日志
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-cog me-1"></i> 设置
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-info-circle me-1"></i> 关于
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center me-3" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-font me-1"></i> A|文
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">中文</a></li>
<li><a class="dropdown-item" href="#">English</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="/login">
<i class="fas fa-user me-1"></i> 登录
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="auth-container d-flex justify-content-center align-items-center">
<div class="login-card card shadow-sm p-4">
<div class="text-center mb-4 d-flex align-items-center justify-content-center">
<img src="/static/images/ShareAPI.png" alt="API Router Logo" width="48" height="48" class="me-2">
<h3 class="card-title mb-0">用户登录</h3>
</div>
<form @submit.prevent="login">
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="email" class="form-control" id="loginEmail" v-model="loginForm.email" placeholder="用户名 / 邮箱地址" required autocomplete="username">
</div>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="loginPassword" v-model="loginForm.password" placeholder="密码" required autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">登录</button>
<div class="d-flex justify-content-between mb-3">
<div class="text-decoration-none text-muted">忘记密码？<a href="/reset-password"><span class="text-primary">点击重置</span></a></div>
<div class="text-decoration-none text-muted">没有账号？<a href="/signup"><span class="text-primary">点击注册</span></a></div>
</div>
<div class="divider my-4">
<span class="divider-text">使用其他方式登录</span>
</div>
<div class="d-flex justify-content-center social-login-icons">
<a href="#" class="btn btn-outline-secondary rounded-circle mx-2 github-icon"><i class="fab fa-github fa-lg"></i></a>
<a href="#" class="btn btn-outline-secondary rounded-circle mx-2 wechat-icon"><i class="fab fa-weixin fa-lg"></i></a>
</div>
</form>
<p v-if="authMessage" class="mt-3 text-center text-info">
{{ authMessage }}
</p>
</div>
</div>
<footer class="footer text-center py-3 mt-auto">
<p class="mb-0 text-muted">API Router v0.6.11-preview.6 由 JustSong 构建，源代码遵循 <a href="#" class="text-decoration-none">MIT 协议</a></p>
</footer>
</div>
<!-- Vue 3 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<!-- Bootstrap 5.3 JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Vue.js App Logic -->
<script type="module" src="/static/app.js"></script>
</body>
</html>
|