<%@ page import="java.sql.*"%> <!-- 导入Java SQL包，用于数据库操作 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型为HTML，字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义文档类型为HTML 4.01 Transitional -->
<html>
<head>
<meta charset="UTF-8" /> <!-- 设置字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 设置浏览器兼容模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和初始缩放比例 -->
<title>Nifty Modal Window Effects</title> <!-- 设置网页标题 -->
<meta name="description"
content="Nifty Modal Window Effects with CSS Transitions and Animations" /> <!-- 设置网页描述 -->
<meta name="keywords"
content="modal, window, overlay, modern, box, css transition, css animation, effect, 3d, perspective" /> <!-- 设置网页关键词 -->
<meta name="author" content="Codrops" /> <!-- 设置作者信息 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap样式表 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<link rel="stylesheet" type="text/css" href="../public/css/default.css" /> <!-- 引入默认样式表 -->
<link rel="stylesheet" type="text/css"
href="../public/css/component.css" /> <!-- 引入组件样式表 -->
</head>
<body>
<%
if (session.getAttribute("reader") == null) { //<!-- 如果会话中的reader属性为空 -->
%>
location.href = "../loginReader.html"; <!-- 重定向到登录页面 -->
<%
}
%>
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 使用JSP标签创建JDBCBean对象 -->
<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
<div class="md-modal md-effect-13" id="modal-13"> <!-- 模态框容器 -->
<div class="md-content"> <!-- 模态框内容 -->
<h3>修改密码</h3> <!-- 模态框标题 -->
<form action="11updatePswSus.jsp" method="post"
class="form-horizontal"> <!-- 表单提交到11updatePswSus.jsp，使用POST方法，水平排列表单元素 -->
<div class="form-group" align="center"> <!-- 表单组 -->
<br>
<label for="psw1" class="col-sm-2 control-label">新密码</label> <!-- 新密码标签 -->
<div class="col-sm-10" align="center"> <!-- 输入框容器 -->
<input type="password" class="form-control" name="psw1" id="password1" placeholder="请输入新密码" style="width:70%;"/> <!-- 新密码输入框 -->
</div>
</div>
<br>
<div class="form-group" align="center"> <!-- 表单组 -->
<label for="psw2" class="col-sm-2 control-label">新密码</label> <!-- 确认新密码标签 -->
<div class="col-sm-10"> <!-- 输入框容器 -->
<input type="password" class="form-control" name="psw2" id="password2" placeholder="请再次输入密码进行确认" style="width:70%;"/> <!-- 确认新密码输入框 -->
</div>
</div>
<div align="center"> <!-- 提交按钮容器 -->
<input type="submit" class="btn btn-primary" value="确认"> <!-- 提交按钮 -->
<br>
</div>
</form>
<button class="md-close btn-primary">取消</button> <!-- 取消按钮 -->
<br>
</div>
</div>
<div class="container"> <!-- 主容器 -->
<!-- Top Navigation -->
<header style="backgorund-color:lightblue;height:20%;width:100%;font-family:YouYuan;"> <!-- 顶部导航栏 -->
<h1>个人信息
<span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="font-size:17px"> Success is waking up in the morning, excited about what you have to do.</span>
</h1>
</header>
<div class="main clearfix" style="font-size:10px;margin-top:5%;font-family:YouYuan;"> <!-- 主要内容区域 -->
<div class="column"> <!-- 左侧列 -->
<%
try{
String cardId = session.getAttribute("reader").toString(); // 获取会话中的reader属性并转换为字符串
String sql = "select * from borrow_card where ID = '" + cardId + "';"; // SQL查询语句，根据reader ID查询借阅卡信息
ResultSet rs = check.executeQuery(sql); // 执行SQL查询，返回结果集
while(rs.next()){ // 遍历结果集
%>
<% int id =rs.getInt("ID"); %> <%-- 获取ID字段的值 --%>
<p><span class="glyphicon glyphicon-tags"> 借阅卡编号：<%=rs.getString("ID")%></span></p> <%-- 显示借阅卡编号 --%>
<p><span class="glyphicon glyphicon-user"> 借阅人：<%=rs.getString("READER")%></span></p> <%-- 显示借阅人 --%>
<p><span class="glyphicon glyphicon-tag"> 规则编号：<%=rs.getString("RULE_ID")%></span></p> <%-- 显示规则编号 --%>
<p><span class="glyphicon glyphicon-star-empty"> 状态：
<%
if(rs.getString("STATUS").equals("1")){ // 根据状态值判断状态
out.println("可用"); // 如果状态值为1，显示“可用”
}else{
out.println("挂失"); // 如果状态值不为1，显示“挂失”
}
%>
</span></p>
<%}
}catch(Exception e){ // 捕获异常
}
%>
</div>
<div class="column" align="center" style="font-size:15px;"> <!-- 右侧列 -->
<button class="md-trigger btn-primary" data-modal="modal-13" style="margin-top:20%;">修改密码</button> <!-- 修改密码按钮 -->
</div>
</div>
</div>
<div class="md-overlay"></div> <!-- 模态框覆盖层 -->
<!-- classie by @desandro https://github.com/desandro/classie -->
<!-- classie.js - class helper functions by desandro -->
<script src="js/classie.js"></script>
<!-- for the blur effect -->
<!-- by @derekdrees https://github.com/ded/SpinKit -->
<script src="js/spinkit.js"></script>
<script>
// this is important for the blur effect
var polyfillscriptpath = 'polyfill/'; // polyfill脚本路径
</script>
</body>
</html>