XLAdmin 项目管理系统 - 由ChatGPT生成

<form method='get'>
  <label for='search'>搜索项目：</label>
  <input type='text' name='search' id='search' value='<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>'>
  <button type='submit'>搜索</button>
</form>
<?php
// 读取JSON文件
$data = file_get_contents('projects.json');
$projects = json_decode($data, true);

// 处理搜索请求
if(isset($_GET['search'])) {
  $search = htmlspecialchars($_GET['search']);
  $filteredProjects = array_filter($projects['projects'], function($project) use ($search) {
    return strpos(strtolower($project['name']), strtolower($search)) !== false;
  });
  $projects['projects'] = array_values($filteredProjects);
}

// 显示每个项目的信息
echo '<div class='container'>';
foreach($projects['projects'] as $project) {
  echo '<div class='project'>';
  echo '<img src=' . $project['image'] . '>';
  echo '<h2>' . $project['name'] . '</h2>';
  echo '<p>' . $project['description'] . '</p>';
  echo '<a href=' . $project['link'] . '>项目进入</a>';
  echo '</div>';
}
echo '</div>';

// 显示搜索框
echo '<form method='get'>';
  echo '<input type='text' name='search' placeholder='搜索项目'>';
  echo '<button type='submit'>搜索</button>';
  echo '</form>';

// 统计项目数据及添加友情链接
$numProjects = count($projects['projects']);
echo '<p>共有 ' . $numProjects . ' 个项目</p>';
echo '<p>本站由 <a href='https://www.chatgpt.com/'>ChatGpt</a> 生成</p>';
?>
<style>
form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

input[type='text'] {
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}

button[type='submit'] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
}
  .container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 20px;
  }

  .project {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .project img {
    max-width: 100%;
    margin-bottom: 10px;
  }
  
  .project h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .project p {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .project a {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
  }
  
  .project a:hover {
    background-color: #0062cc;
  }
</style>