代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书后台管理系统</title>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.calendar-day {
aspect-ratio: 1/1;
}
.weather-card {
background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
}
.weather-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.fa-sun {
color: #ffc107;
animation: sun-rotate 15s linear infinite;
}
.fa-cloud {
color: #f8f9fa;
animation: cloud-float 8s ease-in-out infinite;
}
.fa-cloud-rain {
color: #adb5bd;
animation: cloud-float 10s ease-in-out infinite;
}
.fa-wind {
color: #6c757d;
animation: wind-blow 3s ease-in-out infinite;
}
.fa-tint {
color: #0dcaf0;
animation: rain-fall 1s linear infinite;
position: absolute;
}
.fa-tint:nth-child(1) {
left: 25%;
animation-delay: 0.2s;
}
.fa-tint:nth-child(2) {
left: 50%;
animation-delay: 0.5s;
}
.fa-tint:nth-child(3) {
left: 75%;
animation-delay: 0.8s;
}
@keyframes sun-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes cloud-float {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
@keyframes wind-blow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes rain-fall {
0% { transform: translateY(-10px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(20px); opacity: 0; }
}
}
</style>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a73e8',
success: '#4CAF50',
danger: '#ff4444',
neutral: {
100: '#f5f5f5',
200: '#e5e5e5',
300: '#d4d4d4',
400: '#a3a3a3',
500: '#737373',
600: '#525252',
700: '#404040',
800: '#262626',
900: '#171717',
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="max-w-7xl mx-auto p-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 添加图书表单 - 左侧 -->
<div class="lg:col-span-2">
<div class="bg-white p-6 rounded-lg shadow-md h-full">
<h2 class="text-xl font-semibold mb-4 flex items-center">
<i class="fa fa-book text-primary mr-2"></i> 添加图书
</h2>
<form id="bookForm" method="post" action="insert_book_check.php" enctype="multipart/form-data">
<div class="mb-4">
<label for="book_name" class="block text-sm font-medium text-gray-700 mb-1">图书名称:</label>
<input type="text" id="book_name" name="book_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required>
</div>
<div class="mb-4">
<label for="book_img" class="block text-sm font-medium text-gray-700 mb-1">封面图片:</label>
<div class="relative">
<input type="file" id="book_img" name="book_img" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm">
<div id="imgPreview" class="mt-2 hidden">
<img id="previewImg" src="" alt="预览图" class="max-h-32 rounded-md shadow">
</div>
</div>
</div>
<div class="mb-4">
<label for="author" class="block text-sm font-medium text-gray-700 mb-1">作者:</label>
<input type="text" id="author" name="author" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required>
</div>
<div class="mb-4">
<label for="brief" class="block text-sm font-medium text-gray-700 mb-1">图书简介 (不超过50字):</label>
<textarea id="brief" name="brief" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required></textarea>
<div class="text-xs text-gray-500 mt-1"><span id="charCount">0</span>/50</div>
</div>
<div class="flex justify-end">
<button type="reset" class="mr-3 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors shadow-sm">
<i class="fa fa-times mr-1"></i> 重置
</button>
<button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-300 shadow-md">
<i class="fa fa-save mr-1"></i> 保存图书
</button>
</div>
</form>
</div>
</div>
<!-- 日历和天气 - 右侧 -->
<div class="lg:col-span-1 space-y-6">
<!-- 天气卡片 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="weather-card text-white p-5 relative">
<div class="absolute top-0 right-0 w-24 h-24 opacity-20">
<div class="weather-icon">
<i class="fa fa-cloud text-5xl fa-cloud animate-cloud-float"></i>
</div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-semibold mb-1">泉州南安市</h3>
<p class="text-white/80 text-sm" id="weather-date">2025年5月29日 星期四</p>
</div>
<div class="text-right">
<i class="fa fa-map-marker text-white/80"></i>
</div>
</div>
<div class="flex items-center justify-center mt-6">
<div class="text-center">
<div class="weather-icon mx-auto mb-2">
<i class="fa fa-cloud text-5xl animate-cloud-float"></i>
</div>
<div class="text-4xl font-bold mb-1" id="weather-temp">26°C</div>
<div class="text-lg mb-1" id="weather-desc">多云</div>
<div class="text-sm text-white/80" id="weather-wind">微风</div>
</div>
</div>
<div class="mt-4 text-center">
<a href="http://www.weather.com.cn/" target="_blank" class="text-white/90 text-sm hover:text-white transition-colors flex items-center justify-center">
<i class="fa fa-external-link mr-1"></i> 查看更多天气信息
</a>
</div>
</div>
<div class="p-4">
<div class="grid grid-cols-4 gap-2 text-center">
<div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="sunny" data-temp="24~32°C">
<p class="text-xs text-gray-500">周五</p>
<div class="weather-icon mx-auto my-1">
<i class="fa fa-sun text-3xl animate-sun-rotate"></i>
</div>
<p class="text-sm font-medium">24~32°C</p>
</div>
<div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="cloudy" data-temp="23~30°C">
<p class="text-xs text-gray-500">周六</p>
<div class="weather-icon mx-auto my-1">
<i class="fa fa-cloud text-3xl animate-cloud-float"></i>
</div>
<p class="text-sm font-medium">23~30°C</p>
</div>
<div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="cloudy" data-temp="22~29°C">
<p class="text-xs text-gray-500">周日</p>
<div class="weather-icon mx-auto my-1">
<i class="fa fa-cloud text-3xl animate-cloud-float"></i>
</div>
<p class="text-sm font-medium">22~29°C</p>
</div>
<div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="rainy" data-temp="21~27°C">
<p class="text-xs text-gray-500">周一</p>
<div class="weather-icon mx-auto my-1 relative">
<i class="fa fa-cloud-rain text-3xl animate-cloud-float"></i>
<i class="fa fa-tint text-lg"></i>
<i class="fa fa-tint text-lg"></i>
<i class="fa fa-tint text-lg"></i>
</div>
<p class="text-sm font-medium">21~27°C</p>
</div>
</div>
</div>
</div>
<!-- 日历组件 -->
<div class="bg-white rounded-lg shadow-md p-5">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold" id="calendar-month">2025年5月</h3>
<div class="flex space-x-2">
<button id="prev-month" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
<i class="fa fa-chevron-left text-gray-600"></i>
</button>
<button id="next-month" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
<i class="fa fa-chevron-right text-gray-600"></i>
</button>
</div>
</div>
<div class="grid grid-cols-7 gap-1 mb-2">
<div class="text-center text-xs text-gray-500 py-1">日</div>
<div class="text-center text-xs text-gray-500 py-1">一</div>
<div class="text-center text-xs text-gray-500 py-1">二</div>
<div class="text-center text-xs text-gray-500 py-1">三</div>
<div class="text-center text-xs text-gray-500 py-1">四</div>
<div class="text-center text-xs text-gray-500 py-1">五</div>
<div class="text-center text-xs text-gray-500 py-1">六</div>
</div>
<div id="calendar-days" class="grid grid-cols-7 gap-1">
<!-- 日历日期将通过JavaScript动态生成 -->
</div>
<div class="mt-4 pt-4 border-t border-gray-100">
<h4 class="font-medium mb-2">图书添加记录</h4>
<div id="book-records" class="space-y-2 max-h-40 overflow-y-auto">
<div class="flex items-center p-2 bg-blue-50 rounded-md">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
<span class="text-sm">《PHP编程实战》 - 2025-05-29 10:30</span>
</div>
<div class="flex items-center p-2 bg-green-50 rounded-md">
<div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
<span class="text-sm">《JavaScript高级教程》 - 2025-05-28 14:15</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 通知隐藏 -->
<div id="notification" class="fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 flex items-center max-w-sm z-50">
<div id="notifyIcon" class="mr-3 text-xl"></div>
<div>
<h4 id="notifyTitle" class="font-medium text-gray-900"></h4>
<p id="notifyMessage" class="text-sm text-gray-600"></p>
</div>
<button id="closeNotify" class="ml-4 text-gray-400 hover:text-gray-600">
<i class="fa fa-times"></i>
</button>
</div>
<script>
// 全局变量
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
document.addEventListener('DOMContentLoaded', () => {
// 更新日期显示
updateDateTime();
// 生成日历
generateCalendar(currentYear, currentMonth);
// 由于浏览器安全限制，无法直接获取实时天气数据
// 这里使用模拟数据，实际应用中需要通过天气API获取
fetchWeatherData();
// 天气日点击事件
document.querySelectorAll('.weather-day').forEach(day => {
day.addEventListener('click', () => {
const weather = day.getAttribute('data-weather');
const temp = day.getAttribute('data-temp');
// 更新主天气显示
document.getElementById('weather-temp').textContent = temp.split('~')[1];
document.getElementById('weather-desc').textContent = getWeatherDescription(weather);
// 更新天气图标
updateWeatherIcon(weather);
// 跳转到中国气象网
window.open('http://www.weather.com.cn/', '_blank');
});
});
// 日历月份切换
document.getElementById('prev-month').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
generateCalendar(currentYear, currentMonth);
});
document.getElementById('next-month').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
generateCalendar(currentYear, currentMonth);
});
// 其余原有的JavaScript代码保持不变
const bookForm = document.getElementById('bookForm');
const charCount = document.getElementById('charCount');
const briefTextarea = document.getElementById('brief');
const bookImg = document.getElementById('book_img');
const imgPreview = document.getElementById('imgPreview');
const previewImg = document.getElementById('previewImg');
const notification = document.getElementById('notification');
const notifyIcon = document.getElementById('notifyIcon');
const notifyTitle = document.getElementById('notifyTitle');
const notifyMessage = document.getElementById('notifyMessage');
const closeNotify = document.getElementById('closeNotify');
briefTextarea.addEventListener('input', () => {
const count = briefTextarea.value.length;
charCount.textContent = count;
if (count > 250) {
charCount.classList.add('text-red-500');
briefTextarea.value = briefTextarea.value.substring(0, 250);
charCount.textContent = 250;
} else {
charCount.classList.remove('text-red-500');
}
});
bookImg.addEventListener('change', (e) => {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
previewImg.src = e.target.result;
imgPreview.classList.remove('hidden');
}
reader.readAsDataURL(e.target.files[0]);
} else {
imgPreview.classList.add('hidden');
}
});
bookForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(bookForm);
try {
showLoading(true);
const response = await fetch('insert_book_check.php', {
method: 'POST',
body: formData
});
const result = await response.text();
if (result.includes('成功')) {
showNotification('success', '添加成功', '图书已成功添加到系统中');
// 添加图书记录
addBookRecord();
bookForm.reset();
imgPreview.classList.add('hidden');
} else {
showNotification('error', '添加失败', result || '添加图书时发生错误');
}
} catch (error) {
console.error('Error submitting form:', error);
showNotification('error', '网络错误', '提交表单时发生网络错误');
} finally {
showLoading(false);
}
});
function showNotification(type, title, message) {
notifyTitle.textContent = title;
notifyMessage.textContent = message;
if (type === 'success') {
notifyIcon.className = 'fa fa-check-circle text-green-500';
notification.classList.add('border-l-4', 'border-green-500');
} else if (type === 'error') {
notifyIcon.className = 'fa fa-times-circle text-red-500';
notification.classList.add('border-l-4', 'border-red-500');
} else if (type === 'warning') {
notifyIcon.className = 'fa fa-exclamation-triangle text-yellow-500';
notification.classList.add('border-l-4', 'border-yellow-500');
} else {
notifyIcon.className = 'fa fa-info-circle text-blue-500';
notification.classList.add('border-l-4', 'border-blue-500');
}
notification.classList.remove('translate-x-full', 'opacity-0');
notification.classList.add('translate-x-0', 'opacity-100');
const timeout = setTimeout(() => {
hideNotification();
}, 5000);
closeNotify.addEventListener('click', () => {
clearTimeout(timeout);
hideNotification();
});
}
function hideNotification() {
notification.classList.remove('translate-x-0', 'opacity-100');
notification.classList.add('translate-x-full', 'opacity-0');
setTimeout(() => {
notification.className = 'fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 flex items-center max-w-sm z-50';
}, 300);
}
function showLoading(isLoading) {
const loader = document.getElementById('pageLoader');
if (isLoading) {
if (!loader) {
const loaderHtml = `
<div id="pageLoader" class="fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-50">
<div class="bg-white p-4 rounded-lg flex items-center">
<i class="fa fa-spinner fa-spin text-primary mr-2"></i>
<span>处理中...</span>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', loaderHtml);
}
} else {
if (loader) {
document.body.removeChild(loader);
}
}
}
});
// 更新日期时间显示
function updateDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const day = days[now.getDay()];
document.getElementById('weather-date').textContent =
`${year}年${month}月${date}日 ${day}`;
}
// 获取天气描述
function getWeatherDescription(weather) {
const descriptions = {
'sunny': '晴',
'cloudy': '多云',
'rainy': '雨',
'windy': '有风'
};
return descriptions[weather] || '未知';
}
// 模拟获取天气数据
function fetchWeatherData() {
// 模拟天气数据
const weatherData = {
temperature: 26,
description: '多云',
wind: '微风'
};
document.getElementById('weather-temp').textContent = `${weatherData.temperature}°C`;
document.getElementById('weather-desc').textContent = weatherData.description;
document.getElementById('weather-wind').textContent = weatherData.wind;
}
// 更新天气图标
function updateWeatherIcon(weather) {
const mainIcon = document.querySelector('.weather-card .weather-icon');
mainIcon.innerHTML = '';
if (weather === 'sunny') {
mainIcon.innerHTML = '<i class="fa fa-sun text-5xl animate-sun-rotate"></i>';
} else if (weather === 'cloudy') {
mainIcon.innerHTML = '<i class="fa fa-cloud text-5xl animate-cloud-float"></i>';
} else if (weather === 'rainy') {
mainIcon.innerHTML = `
<div class="relative">
<i class="fa fa-cloud-rain text-5xl animate-cloud-float"></i>
<i class="fa fa-tint text-xl"></i>
<i class="fa fa-tint text-xl"></i>
<i class="fa fa-tint text-xl"></i>
</div>
`;
} else if (weather === 'windy') {
mainIcon.innerHTML = '<i class="fa fa-wind text-5xl animate-wind-blow"></i>';
}
}
// 生成日历
function generateCalendar(year, month) {
const calendarDays = document.getElementById('calendar-days');
const calendarMonth = document.getElementById('calendar-month');
// 更新月份显示
calendarMonth.textContent = `${year}年${month + 1}月`;
// 清空日历
calendarDays.innerHTML = '';
// 获取当月第一天是星期几
const firstDay = new Date(year, month, 1).getDay();
// 获取当月有多少天
const daysInMonth = new Date(year, month + 1, 0).getDate();
// 添加上个月的占位日期
for (let i = 0; i < firstDay; i++) {
const prevMonthDay = new Date(year, month, 0).getDate() - firstDay + i + 1;
const dayElement = document.createElement('div');
dayElement.className = 'text-center text-gray-400 py-2 calendar-day';
dayElement.textContent = prevMonthDay;
calendarDays.appendChild(dayElement);
}
// 添加当月日期
const today = new Date();
const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'text-center py-2 calendar-day hover:bg-gray-100 rounded-full transition-colors cursor-pointer';
dayElement.textContent = i;
// 高亮今天的日期
if (isCurrentMonth && today.getDate() === i) {
dayElement.className = 'text-center py-2 bg-primary text-white rounded-full font-medium calendar-day';
}
// 添加点击事件
dayElement.addEventListener('click', () => {
selectDate(year, month, i);
});
calendarDays.appendChild(dayElement);
}
// 添加下个月的占位日期
const remainingDays = 42 - (firstDay + daysInMonth);
if (remainingDays < 7) {
for (let i = 1; i <= remainingDays; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'text-center text-gray-400 py-2 calendar-day';
dayElement.textContent = i;
calendarDays.appendChild(dayElement);
}
}
}
// 选择日期
function selectDate(year, month, day) {
// 更新日期显示
document.getElementById('weather-date').textContent =
`${year}年${month + 1}月${day}日 ${getDayOfWeek(year, month, day)}`;
// 移除之前的选中状态
document.querySelectorAll('#calendar-days div').forEach(el => {
if (el.classList.contains('bg-primary')) {
el.classList.remove('bg-primary', 'text-white', 'font-medium');
el.classList.add('hover:bg-gray-100');
}
});
// 设置新的选中状态
const selectedDay = Array.from(calendarDays.children).find(el =>
el.textContent === String(day) && !el.classList.contains('text-gray-400')
);
if (selectedDay) {
selectedDay.classList.remove('hover:bg-gray-100');
selectedDay.classList.add('bg-primary', 'text-white', 'font-medium');
}
}
// 获取星期几
function getDayOfWeek(year, month, day) {
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return days[new Date(year, month, day).getDay()];
}
// 添加图书记录
function addBookRecord() {
const bookName = document.getElementById('book_name').value;
const now = new Date();
const recordDate = now.toISOString().split('T')[0];
const recordTime = now.toTimeString().split(' ')[0];
const recordsContainer = document.getElementById('book-records');
const recordElement = document.createElement('div');
recordElement.className = 'flex items-center p-2 bg-blue-50 rounded-md animate-fadeIn';
recordElement.innerHTML = `
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
<span class="text-sm">《${bookName}》 - ${recordDate} ${recordTime}</span>
`;
// 添加到容器顶部
if (recordsContainer.firstChild) {
recordsContainer.insertBefore(recordElement, recordsContainer.firstChild);
} else {
recordsContainer.appendChild(recordElement);
}
// 添加入场动画
setTimeout(() => {
recordElement.classList.add('opacity-100');
}, 10);
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手