diff --git a/game.html b/game.html
new file mode 100644
index 0000000..f0dc043
--- /dev/null
+++ b/game.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Game Navigation</title>
+  <style>
+    /* CSS 样式 */
+    *{
+      margin: 0px;
+      padding: 0px;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f4f4f4;
+    }
+    .header {
+        align-items: center;
+        background-color: #fff;
+        border-bottom: 1px solid #ececf1;
+        display: flex;
+        height: 10vh;
+        justify-content: space-between;
+        overflow: auto;
+        padding: 0 0px;
+        top: 0;
+        width: 100%;
+        z-index: 100;
+    }
+    .header h1 {
+      margin: 0;
+    }
+    .user-settings {
+      align-items: center;
+      position: absolute;
+      right: 20px;
+      top: 18px;
+      display: inline-block;
+      height: 50px;
+    }
+    .user-settings img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        margin-right: 10px;
+    }
+    .container {
+      width: 100%;
+
+        height: 80vh;
+      margin: 0 auto;
+      padding: 0px;
+      background-color: #fff;
+      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+      margin-top: 0px;
+    }
+
+    h1 {
+      text-align: left;
+      display: inline-block;
+    }
+
+    .root{
+        width: 200px;
+        background-color:white;
+        position: absolute;
+        top: 27px;
+        right: 37px;
+        display:none;
+    }
+
+    a{
+        text-decoration: none;
+        color: black;
+    }
+    .user-message div{
+        color: #202123;
+        font-weight: 700;
+        margin-top: 10px;
+    }
+    .separator{
+        width: 100%;
+        height: 1px;
+        margin: 5px 0px;
+        background-color: #ececf1;
+    }
+    .option1:hover{
+        background-color: #b9eebc;
+        cursor: pointer;
+    }
+    .option2:hover{
+        background-color: #b9eebc;
+    }
+    .email-message{
+        margin-top: 10px;
+        margin-left: 10px;
+        margin-bottom: 5px;
+    }
+    .user-type{
+        padding: 5px 10px;
+    }
+    .option1{
+        padding: 5px 10px;
+    }
+    .option2 {
+        padding: 5px 10px;
+    }
+    a:visited{
+        color:black;
+        font-size: 14px;
+        font-family:  "ColfaxAl", "Helvetica", sans-serif;;
+
+    }
+    #toggle:checked  ~  .root{
+        display: block;
+    }
+    #toggle{
+        display: none;
+    }
+    label {
+  cursor: pointer;
+        }
+        #id-search{
+    width: 280px;
+    height: 30px;
+    }
+    #id-search::placeholder{
+        font-size: 16px;
+    }
+    form{
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    #search{
+      width: 50px;
+      height: 35px;
+      color: white;
+      background-color: black;
+      cursor: pointer;
+    }
+    #search:hover{
+        background-color: rgb(61, 59, 59);
+    }
+    .game{
+      border-top: rgba(0, 0, 0, 0.3) 1px solid;
+      border-bottom:rgba(0, 0, 0, 0.3) 1px solid ;
+      margin-top: 4px;
+
+    }
+     .game div{
+      display: inline-block;
+      width: 10%;
+      margin-left: 4%;
+      position: relative;
+      border-bottom:none ;
+    }
+    .game div a img{
+      width: 100%;
+      background-color: blue;
+      height: 200px;
+      transition: transform 0.3s ease;
+
+    }
+    .game div a img:hover{
+        cursor: pointer;
+        transform: scale(1.1);
+    }
+
+    .hot-game{
+      border-top: none;
+      border-bottom:none ;
+    }
+  footer {
+    background-color: white;
+    width: 100%;
+      height: 10vh;
+    color: black;
+    padding: 20px;
+    text-align: center;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  footer nav ul li {
+    margin-right: 10px;
+  }
+
+  footer nav ul li a {
+    color: black;
+    text-decoration: none;
+  }
+  nav ul {
+    list-style-type: none;
+  }
+
+  nav ul li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  nav ul li a {
+    color: #fff;
+    text-decoration: none;
+  }
+  li a:hover{
+      color: greenyellow;
+
+  }
+  .descrip{
+    font-size: 16px;
+    font-family: 微软雅黑;
+    text-align: center;
+    font-weight: bold;
+  }
+  .descrip:hover{
+      cursor: pointer;
+  }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>游戏导航</h1>
+    <div class="user-settings">
+        <input type="checkbox"  id ="toggle">
+        <label for="toggle"><img src="/static/images/登录头像.png" alt="User Avatar" class="user-avatar"></label>
+        
+        <div class="root">
+        <div class="user-message">
+            <div class="email-message">{{ user.email }}</div>
+        </div>
+        <div class="separator"></div>
+        <div class="user-type"><div class="user">user</div> </div>
+        <div class="separator"></div>
+        <div class="option1" onclick="sendEmail()"><div>编辑</div></div>
+        <div class="option2"> <div><a href="/">登出</a></div></div>
+        </div>
+    </div>
+  </div>
+  
+  <div class="container">
+  <h2>游戏搜索</h2>
+  <form action="">
+    <input type="text" id="id-search" placeholder="请输入你想搜索的游戏">
+    <button type="submit" id="search">搜索</button>
+  </form>
+  <div class="game new-game">
+    <h2>年度新作</h2>
+      {% for src in srcs %}
+    <div class="game"><a href="{{ src.url }}">
+        <img src="{{ src.img }}" alt=""></a>
+        <p class="descrip">{{ src.word }}</p>
+    </div>
+      {% endfor %}
+      </div>
+    <div class="game hot-game">
+      <h2>热门游戏</h2>
+      {% for src in src1s %}
+        <div class="game">
+        <a href="{{ src.url }}"><img src="{{ src.img }}" alt=""></a>
+        <p class="descrip">{{ src.word }}</p>
+        </div>
+      {% endfor %}
+      </div>
+  </div>
+  <footer>
+    <p>&copy; 2023 游戏导航网站. 版权所有.</p>
+    <nav>
+      <ul>
+        <li><a href="index.html">首页</a></li>
+        <li><a href="games.html">游戏</a></li>
+        <li><a href="about.html">关于</a></li>
+        <li><a href="contact.html">联系</a></li>
+      </ul>
+    </nav>
+  </footer>
+</body>
+<script>
+  function sendEmail() {
+    var emailMessage = document.querySelector('.email-message').textContent;
+
+  var form = document.createElement('form');
+  form.method = 'POST';
+  form.action = 'http://127.0.0.1:5000/edit';
+
+  var input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = 'email';
+  input.value = emailMessage;
+
+  form.appendChild(input);
+
+  document.body.appendChild(form);
+
+  form.submit();
+}
+
+
+</script>
+</html>
