LeonMMcoset/leonapp
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

feat(UI): 为页面添加淡入动画效果和搜索框样式优化

Browse Source 
为多个页面添加页面加载时的淡入动画效果，提升用户体验
优化搜索框和下拉选择框的样式，使用form-floating布局
统一在DOM加载完成后添加page-transition类触发动画
This commit is contained in:
Leonmmcoset
2025-07-07 23:13:18 +08:00
parent e5bcd5e039
commit 51d6fdc6ee
4 changed files with 102 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
admin/index.php
View File

@@ -25,6 +25,22 @@ if (!$resultApps) {
} else { } else {
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<style>
.page-transition {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -42,7 +58,7 @@ if (!$resultApps) {
} }
</style> </style>
</head> </head>
<body> <body class="page-transition">
<!-- 导航栏 --> <!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light blur-bg"> <nav class="navbar navbar-expand-lg navbar-light blur-bg">
<div class="container"> <div class="container">
@@ -125,6 +141,11 @@ if (!$resultApps) {
} }
}); });
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('page-transition');
});
</script>
</body> </body>
</html> </html>
<?php <?php

26
developer_apps.php
View File

@@ -49,9 +49,24 @@ $resultApps = $conn->query($sqlApps);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.page-transition {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style> </style>
</head> </head>
<body> <body class="page-transition">
<!-- 导航栏 --> <!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light blur-bg"> <nav class="navbar navbar-expand-lg navbar-light blur-bg">
<div class="container"> <div class="container">
@@ -75,6 +90,10 @@ $resultApps = $conn->query($sqlApps);
</nav> </nav>
<div class="container mt-4"> <div class="container mt-4">
<div class="mb-3 form-floating">
<input type="text" class="form-control" id="searchApp" placeholder="搜索应用">
<label for="searchApp">搜索应用</label>
</div>
<h1><?php echo $developerName; ?> 的应用</h1> <h1><?php echo $developerName; ?> 的应用</h1>
<hr> <hr>
@@ -113,5 +132,10 @@ $resultApps = $conn->query($sqlApps);
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('page-transition');
});
</script>
</body> </body>
</html> </html>

33
index.php
View File

@@ -6,6 +6,22 @@ if (!isset($conn) || !$conn instanceof mysqli) {
die('数据库连接失败，请检查配置文件。'); die('数据库连接失败，请检查配置文件。');
}?> }?>
<!DOCTYPE html> <!DOCTYPE html>
<style>
.page-transition {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -24,7 +40,7 @@ if (!isset($conn) || !$conn instanceof mysqli) {
} }
</style> </style>
</head> </head>
<body> <body class="page-transition">
<!-- 导航栏 --> <!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light blur-bg"> <nav class="navbar navbar-expand-lg navbar-light blur-bg">
<div class="container"> <div class="container">
@@ -82,10 +98,14 @@ if (!isset($conn) || !$conn instanceof mysqli) {
</script> </script>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<input type="text" name="search" class="form-control" placeholder="搜索应用..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>"> <div class="form-floating">
<input type="text" name="search" class="form-control" id="searchInput" placeholder="搜索应用..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
<label for="searchInput">搜索应用</label>
</div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<select name="tag" class="form-select"> <div class="form-floating">
<select name="tag" class="form-select" id="tagSelect">
<option value="">所有标签</option> <option value="">所有标签</option>
<?php <?php
$tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name"); $tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name");
@@ -96,6 +116,8 @@ if (!isset($conn) || !$conn instanceof mysqli) {
<option value="<?php echo $tag['id']; ?>" <?php echo $selected; ?>><?php echo htmlspecialchars($tag['name']); ?></option> <option value="<?php echo $tag['id']; ?>" <?php echo $selected; ?>><?php echo htmlspecialchars($tag['name']); ?></option>
<?php endwhile; ?> <?php endwhile; ?>
</select> </select>
<label for="tagSelect">选择标签</label>
</div>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button class="btn btn-primary w-100" type="submit">搜索</button> <button class="btn btn-primary w-100" type="submit">搜索</button>
@@ -308,5 +330,10 @@ if (!isset($conn) || !$conn instanceof mysqli) {
} }
}); });
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('page-transition');
});
</script>
</body> </body>
</html> </html>

26
version_list.php
View File

@@ -58,9 +58,24 @@ while ($row = $result->fetch_assoc()) {
background-color: #0b5ed7; background-color: #0b5ed7;
border-color: #0a58ca; border-color: #0a58ca;
} }
.page-transition {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style> </style>
</head> </head>
<body> <body class="page-transition">
<!-- 导航栏 --> <!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container"> <div class="container">
@@ -82,6 +97,10 @@ while ($row = $result->fetch_assoc()) {
</nav> </nav>
<div class="container mt-4"> <div class="container mt-4">
<div class="mb-3 form-floating">
<input type="text" class="form-control" id="searchVersion" placeholder="搜索版本">
<label for="searchVersion">搜索版本</label>
</div>
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<h1><?php echo htmlspecialchars($app['name']); ?> - 版本历史</h1> <h1><?php echo htmlspecialchars($app['name']); ?> - 版本历史</h1>
@@ -124,5 +143,10 @@ while ($row = $result->fetch_assoc()) {
} }
}); });
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('page-transition');
});
</script>
</body> </body>
</html> </html>