update:优化项目结构

2025-09-16 04:09:41 +08:00 · 2024-12-31 10:40:52 +08:00
parent b8252d412c
commit eaec2dbad7
5 changed files with 7 additions and 7 deletions
--- a/templates/overview.html.j2
+++ b/templates/overview.html.j2
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+  <title>ComiPy-概览</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f0f0f0;
+    }
+
+    #gallery {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 20px;
+      font-size: small;
+    }
+
+    /* 当屏幕宽度大于600px时，调整列数和列的宽度 */
+    @media (min-width: 600px) {
+      #gallery {
+        grid-template-columns: repeat(3, 1fr);
+        font-size: medium;
+        /* 两列布局 */
+      }
+    }
+
+    /* 当屏幕宽度大于900px时，进一步调整列数和列的宽度 */
+    @media (min-width: 900px) {
+      #gallery {
+        grid-template-columns: repeat(5, 1fr);
+        font-size: large;
+        /* 三列布局 */
+      }
+    }
+
+    #global-blur {
+      background-color: rgba(255, 255, 255, 0.5);
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      /* 模糊度可以根据需要调整 */
+      transition: display;
+      z-index: 10;
+      /* 保证遮罩在页面上方 */
+      pointer-events: none;
+      /* 确保遮罩不影响下方元素的交互 */
+      opacity: 0;
+      transition: opacity 0.1s ease
+    }
+  </style>
+</head>
+
+<body>
+  <div style="display: flex;">
+    <div class="input-group">
+      <input type="text" class="form-control" id="search_text" placeholder="键入以搜索">
+      <button class="btn btn-secondary" type="button"
+        onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
+    </div>
+    <div class="dropdown" style="margin-left: 10px;">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {{username}}
+      </button>
+      <ul class="dropdown-menu">
+        <li><button class="dropdown-item" href="#" onclick="logout()">Log out</button></li>
+      </ul>
+    </div>
+  </div>
+  <hr />
+  <div id="gallery">
+    {% for item in list %}
+    <div class="card">
+      {% if item[4] > aftertime %}
+      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">New</span>
+      {% endif %}
+      <img src="/api/img/{{ item[1] }}/0?mini=yes" class="img-thumbnail card-img-top"
+        onclick="linkjump('{{ item[1] }}')" />
+      <div class="card-body">
+        <p class="card-text">{{ item[2] }}</p>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  <hr />
+  <div style=display:flex;justify-content:center;align-items:center;>
+    <ul class="pagination">
+      <li class="page-item">
+        <a class="page-link">Page</a>
+      </li>
+      {% for item in lastPageList %}
+      <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
+      {% endfor %}
+      <li class="page-item active" aria-current="page">
+        <a class="page-link">{{pagenow}}</a>
+      </li>
+      {% for item in nextPageList %}
+      <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
+      {% endfor %}
+      <ul>
+  </div>
+
+  <div id="global-blur" onclick="unshow_global_blur()"></div>
+
+  <script src="https://unpkg.com/@popperjs/core@2"></script>
+  <script src="/static/js/jquery.min.js"></script>
+  <script src="/static/js/bootstrap.min.js"></script>
+  <script>
+    function linkjump(url) {
+      window.open("/book/" + url)
+    }
+    function switchPage(pagemun) {
+      window.location.replace("/overview/" + pagemun)
+    }
+
+
+    document.addEventListener('visibilitychange', documentVisibilityChange)
+    global_blur = document.getElementById("global-blur")
+
+    function documentVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        global_blur.style.opacity = 1;
+        global_blur.style.pointerEvents = "auto";
+      }
+      if (document.visibilityState === "visible") {
+      }
+    }
+
+    function unshow_global_blur() {
+      global_blur.style.opacity = 0;
+      global_blur.style.pointerEvents = "none";
+    }
+
+    function logout() {
+      document.cookie = "islogin=1; max-age=0"
+      //location.href = "/";
+    }
+
+  </script>
+</body>
+
+</html>