v1.1.1 — 心愿清单移至独立面板

- 从侧边栏移出，改为左侧菜单入口 → 独立页面
- 卡片式布局，对齐每周评分等面板风格
- 拖拽排序、完成勾选、编辑模式切换功能不变

app.py

@@ -6,10 +6,11 @@ from datetime import timedelta
 from functools import wraps
 from flask import Flask, render_template, request, jsonify, session, redirect, url_for
 from werkzeug.security import generate_password_hash, check_password_hash
-from database import init_db, get_checkin, save_checkin, delete_checkin, get_all_checkins
+from database import init_db, get_checkin, save_checkin, delete_checkin, get_all_checkins, get_wishes, save_wish, update_wish, delete_wish, reorder_wishes
 
 app = Flask(__name__)
-app.secret_key = os.urandom(24)
+# 固定密钥确保 gunicorn 多 worker 下 session 可互通
+app.secret_key = os.environ.get('SECRET_KEY', 'ziwei-power-secret-2026')
 
 # 会话持久化：30 天
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=30)
@@ -114,9 +115,11 @@ def compute_stats():
 def index():
     import json
     stats = compute_stats()
+    wishes = [dict(w) for w in get_wishes()]
     return render_template('index.html',
                            username=session.get('display_name', session.get('username', '')),
-                           initial_stats=json.dumps(stats, ensure_ascii=False))
+                           initial_stats=json.dumps(stats, ensure_ascii=False),
+                           initial_wishes=json.dumps(wishes, ensure_ascii=False))
 
 
 # ── API ──────────────────────────────────────────────
@@ -174,6 +177,54 @@ def api_user():
     })
 
 
+# ── 心愿清单 API ──────────────────────────────
+
+@app.route('/api/wishes', methods=['GET'])
+@login_required
+def api_get_wishes():
+    wishes = [dict(w) for w in get_wishes()]
+    return jsonify({'ok': True, 'data': wishes})
+
+
+@app.route('/api/wishes', methods=['POST'])
+@login_required
+def api_create_wish():
+    body = request.get_json(force=True)
+    name = body.get('name', '').strip()
+    if not name:
+        return jsonify({'ok': False, 'error': '名称不能为空'}), 400
+    priority = body.get('priority', '中')
+    deadline = body.get('deadline', '')
+    wid = save_wish(name, priority, deadline)
+    return jsonify({'ok': True, 'id': wid})
+
+
+@app.route('/api/wishes/<int:wish_id>', methods=['PUT'])
+@login_required
+def api_update_wish(wish_id):
+    body = request.get_json(force=True)
+    update_wish(wish_id, **body)
+    return jsonify({'ok': True})
+
+
+@app.route('/api/wishes/<int:wish_id>', methods=['DELETE'])
+@login_required
+def api_delete_wish(wish_id):
+    delete_wish(wish_id)
+    return jsonify({'ok': True})
+
+
+@app.route('/api/wishes/reorder', methods=['PUT'])
+@login_required
+def api_reorder_wishes():
+    body = request.get_json(force=True)
+    order = body.get('order', [])
+    if not isinstance(order, list):
+        return jsonify({'ok': False, 'error': 'order 必须是列表'}), 400
+    reorder_wishes(order)
+    return jsonify({'ok': True})
+
+
 # ── 启动 ──────────────────────────────────────────────
 
 if __name__ == '__main__':

database.py

@@ -10,6 +10,9 @@ DB_DIR = os.path.join(os.path.expanduser('~'), '.workbuddy', 'data', 'ziwei-powe
 os.makedirs(DB_DIR, exist_ok=True)
 DB_PATH = os.path.join(DB_DIR, 'ziwei_power.db')
 
+# 当前数据库 schema 版本 —— 改表结构时必须 +1 并补迁移逻辑
+CURRENT_SCHEMA_VERSION = 2
+
 
 def get_conn():
     conn = sqlite3.connect(DB_PATH)
@@ -17,18 +20,63 @@ def get_conn():
     return conn
 
 
-def init_db():
+def _get_schema_version(conn):
-    """初始化数据库表"""
+    """读取当前数据库的 schema 版本，无表时返回 0"""
-    conn = get_conn()
     conn.execute('''
-        CREATE TABLE IF NOT EXISTS checkins (
+        CREATE TABLE IF NOT EXISTS schema_version (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            version INTEGER NOT NULL
-            date TEXT UNIQUE NOT NULL,
-            data TEXT NOT NULL,
-            created_at TEXT NOT NULL,
-            updated_at TEXT NOT NULL
         )
     ''')
+    row = conn.execute('SELECT version FROM schema_version').fetchone()
+    return row['version'] if row else 0
+
+
+def _set_schema_version(conn, version):
+    """写入 schema 版本"""
+    conn.execute('DELETE FROM schema_version')
+    conn.execute('INSERT INTO schema_version (version) VALUES (?)', (version,))
+
+
+def init_db():
+    """初始化数据库表 & 自动迁移"""
+    conn = get_conn()
+    current = _get_schema_version(conn)
+
+    # ── 迁移步骤（按版本号递增）────────────────────────
+    if current < 1:
+        # v1: 初始表结构
+        conn.execute('''
+            CREATE TABLE IF NOT EXISTS checkins (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                date TEXT UNIQUE NOT NULL,
+                data TEXT NOT NULL,
+                created_at TEXT NOT NULL,
+                updated_at TEXT NOT NULL
+            )
+        ''')
+
+    if current < 2:
+        # v2: 心愿清单
+        conn.execute('''
+            CREATE TABLE IF NOT EXISTS wishes (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL,
+                priority TEXT NOT NULL DEFAULT '中',
+                deadline TEXT NOT NULL DEFAULT '',
+                done INTEGER NOT NULL DEFAULT 0,
+                sort_order INTEGER NOT NULL DEFAULT 0,
+                created_at TEXT NOT NULL
+            )
+        ''')
+
+    # ── 将来加字段/改表在此扩展 ──
+    # if current < 2:
+    #     conn.execute('ALTER TABLE checkins ADD COLUMN tags TEXT DEFAULT ""')
+    #     # 可选：对已有行做数据补全
+    #     conn.execute("UPDATE checkins SET tags = '[]' WHERE tags IS NULL")
+
+    # ── 写入最新版本号 ──
+    _set_schema_version(conn, CURRENT_SCHEMA_VERSION)
     conn.commit()
     conn.close()
 
@@ -92,3 +140,59 @@ def get_all_checkins():
             'updated_at': row['updated_at']
         })
     return results
+
+
+# ── 心愿清单 CRUD ──────────────────────────────────
+
+def get_wishes():
+    """获取所有心愿，按 sort_order 排序"""
+    conn = get_conn()
+    rows = conn.execute('SELECT * FROM wishes ORDER BY sort_order').fetchall()
+    conn.close()
+    return [dict(row) for row in rows]
+
+
+def save_wish(name, priority, deadline):
+    """新增一条心愿"""
+    now = datetime.now().isoformat()
+    conn = get_conn()
+    max_order = conn.execute('SELECT COALESCE(MAX(sort_order), -1) + 1 AS n FROM wishes').fetchone()['n']
+    conn.execute(
+        'INSERT INTO wishes (name, priority, deadline, done, sort_order, created_at) VALUES (?, ?, ?, 0, ?, ?)',
+        (name, priority, deadline, max_order, now)
+    )
+    conn.commit()
+    wish_id = conn.execute('SELECT last_insert_rowid()').fetchone()[0]
+    conn.close()
+    return wish_id
+
+
+def update_wish(wish_id, **kwargs):
+    """更新心愿字段"""
+    allowed = ['name', 'priority', 'deadline', 'done']
+    updates = {k: v for k, v in kwargs.items() if k in allowed}
+    if not updates:
+        return
+    conn = get_conn()
+    sets = ', '.join(f'{k} = ?' for k in updates)
+    vals = list(updates.values()) + [wish_id]
+    conn.execute(f'UPDATE wishes SET {sets} WHERE id = ?', vals)
+    conn.commit()
+    conn.close()
+
+
+def delete_wish(wish_id):
+    """删除心愿"""
+    conn = get_conn()
+    conn.execute('DELETE FROM wishes WHERE id = ?', (wish_id,))
+    conn.commit()
+    conn.close()
+
+
+def reorder_wishes(order_list):
+    """批量更新排序：order_list = [id1, id2, ...]"""
+    conn = get_conn()
+    for idx, wid in enumerate(order_list):
+        conn.execute('UPDATE wishes SET sort_order = ? WHERE id = ?', (idx, wid))
+    conn.commit()
+    conn.close()

deploy.sh

@@ -1,6 +1,9 @@
 #!/bin/bash
 # ziwei-power 一键部署脚本
 # 用法: bash deploy.sh [port]
+#
+# 首次运行: 自动生成 .env (SECRET_KEY)，之后不变
+# 多 worker 安全: 所有 worker 共享同一密钥
 
 set -e
 
@@ -30,7 +33,15 @@ fi
 echo "安装依赖..."
 venv/bin/pip install -q -r requirements.txt
 
-# 3. 自动建表（首次运行）
+# 3. 生成/读取固定 SECRET_KEY（多 worker 共享）
+if [ ! -f ".env" ]; then
+    echo "生成 SECRET_KEY..."
+    python3 -c "import os; print('SECRET_KEY=' + os.urandom(24).hex())" > .env
+fi
+set -a; source .env; set +a
+export SECRET_KEY
+
+# 4. 自动建表（首次运行）
 echo "初始化数据库..."
 venv/bin/python -c "
 from database import init_db

static/app.js

@@ -105,6 +105,7 @@
 
     if (name === 'weekly') loadWeekly();
     if (name === 'history') loadHistory();
+    if (name === 'wishes') loadWishes();
   };
 
   /* ================================================================
@@ -634,6 +635,167 @@
     });
   };
 
+  /* ================================================================
+     Wishes — 心愿清单
+     ================================================================ */
+  var wishes = [];
+  var dragSourceId = null;
+  var wishesLoaded = false;
+
+  function loadWishes() {
+    if (wishesLoaded) { renderWishes(); return; }
+    // 优先使用页面嵌入数据
+    if (window.__INITIAL_WISHES__) {
+      wishes = window.__INITIAL_WISHES__;
+      wishesLoaded = true;
+      renderWishes();
+      return;
+    }
+    fetch('/api/wishes')
+      .then(function(r){ return r.json(); })
+      .then(function(res){ if (res.ok) { wishes = res.data; wishesLoaded = true; renderWishes(); } });
+  }
+
+  function renderWishes() {
+    var list = document.getElementById('wishes-list');
+    var empty = document.getElementById('wishes-empty');
+    if (!list) return;
+    if (wishes.length === 0) {
+      list.innerHTML = '';
+      if (empty) empty.style.display = 'block';
+      return;
+    }
+    if (empty) empty.style.display = 'none';
+    var html = '';
+    for (var i = 0; i < wishes.length; i++) {
+      var w = wishes[i];
+      var doneCls = w.done ? ' done' : '';
+      var priCls = 'pri-' + (w.priority || '中');
+      var deadline = w.deadline ? w.deadline : '';
+      html += '<div class="wish-item' + doneCls + '" draggable="true" data-id="' + w.id + '">' +
+        '<span class="wish-drag-handle"><svg class="icon-xs"><use href="#icon-list-bullet"/></svg></span>' +
+        '<input type="checkbox" class="wish-check" ' + (w.done ? 'checked' : '') + ' onchange="toggleWish(' + w.id + ', this.checked)">' +
+        '<span class="wish-name" title="' + esc(w.name) + '">' + esc(w.name) + '</span>' +
+        '<span class="wish-pri ' + priCls + '">' + esc(w.priority) + '</span>' +
+        (deadline ? '<span class="wish-deadline">' + esc(deadline) + '</span>' : '') +
+        '<button class="btn-del wish-del" onclick="deleteWishItem(' + w.id + ')"><svg class="icon-xs"><use href="#icon-x"/></svg></button>' +
+      '</div>';
+    }
+    list.innerHTML = html;
+    bindDragEvents();
+  }
+
+  /* ── Drag & Drop ── */
+
+  function bindDragEvents() {
+    var items = document.querySelectorAll('#wishes-list .wish-item');
+    items.forEach(function(item) {
+      item.addEventListener('dragstart', function(e) {
+        dragSourceId = parseInt(this.dataset.id);
+        this.classList.add('dragging');
+        e.dataTransfer.effectAllowed = 'move';
+      });
+      item.addEventListener('dragend', function(e) {
+        this.classList.remove('dragging');
+        dragSourceId = null;
+        // 移除所有 over 状态
+        document.querySelectorAll('#wishes-list .wish-item').forEach(function(el){ el.classList.remove('drag-over'); });
+      });
+      item.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        this.classList.add('drag-over');
+      });
+      item.addEventListener('dragleave', function() {
+        this.classList.remove('drag-over');
+      });
+      item.addEventListener('drop', function(e) {
+        e.preventDefault();
+        this.classList.remove('drag-over');
+        var targetId = parseInt(this.dataset.id);
+        if (dragSourceId === targetId) return;
+        // 更新本地顺序
+        var fromIdx = -1, toIdx = -1;
+        for (var j = 0; j < wishes.length; j++) {
+          if (wishes[j].id === dragSourceId) fromIdx = j;
+          if (wishes[j].id === targetId) toIdx = j;
+        }
+        if (fromIdx >= 0 && toIdx >= 0) {
+          var item = wishes.splice(fromIdx, 1)[0];
+          wishes.splice(toIdx, 0, item);
+          renderWishes();
+          saveWishOrder();
+        }
+      });
+    });
+  }
+
+  function saveWishOrder() {
+    var order = wishes.map(function(w){ return w.id; });
+    fetch('/api/wishes/reorder', {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({order: order})
+    });
+  }
+
+  /* ── CRUD ── */
+
+  window.showWishForm = function() {
+    var form = document.getElementById('wish-form');
+    if (form) form.style.display = 'block';
+  };
+
+  window.hideWishForm = function() {
+    var form = document.getElementById('wish-form');
+    if (form) form.style.display = 'none';
+    document.getElementById('wish-name').value = '';
+    document.getElementById('wish-deadline').value = '';
+    document.getElementById('wish-priority').value = '中';
+  };
+
+  window.addWish = function() {
+    var name = document.getElementById('wish-name').value.trim();
+    if (!name) { showToast('请输入心愿名称', 'error'); return; }
+    var priority = document.getElementById('wish-priority').value;
+    var deadline = document.getElementById('wish-deadline').value;
+    fetch('/api/wishes', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({name: name, priority: priority, deadline: deadline})
+    }).then(function(r){ return r.json(); })
+      .then(function(res){
+        if (!res.ok) { showToast(res.error, 'error'); return; }
+        hideWishForm();
+        wishes.push({id: res.id, name: name, priority: priority, deadline: deadline, done: 0});
+        renderWishes();
+      });
+  };
+
+  window.toggleWish = function(id, done) {
+    fetch('/api/wishes/' + id, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({done: done ? 1 : 0})
+    });
+    var w = wishes.find(function(x){ return x.id === id; });
+    if (w) w.done = done ? 1 : 0;
+    renderWishes();
+  };
+
+  window.deleteWishItem = function(id) {
+    fetch('/api/wishes/' + id, {method: 'DELETE'});
+    wishes = wishes.filter(function(w){ return w.id !== id; });
+    renderWishes();
+  };
+
+  window.toggleWishesEdit = function(btn) {
+    var panel = document.getElementById('panel-wishes');
+    if (!panel) return;
+    var editing = panel.classList.toggle('editing');
+    btn.classList.toggle('active', editing);
+  };
+
   /* ================================================================
      Init
      ================================================================ */

static/style.css

@@ -1080,6 +1080,164 @@ body {
 .toast.error   { background: var(--danger);   color: #FFF; }
 .toast.info    { background: var(--primary);  color: #FFF; }
 
+/* ═══════════════════════════════════════════
+   Wishes Panel
+   ═══════════════════════════════════════════ */
+
+#panel-wishes.editing .edit-only { display: inline-flex; }
+#panel-wishes.editing .wish-del { display: inline-flex; }
+
+.wish-form {
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  max-width: 480px;
+}
+.wish-form input[type="text"],
+.wish-form input[type="date"],
+.wish-form select {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--text);
+  margin-bottom: 8px;
+  box-sizing: border-box;
+  background: var(--card);
+}
+.wish-form input[type="text"]:focus,
+.wish-form input[type="date"]:focus,
+.wish-form select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(74,108,247,0.08);
+}
+.wish-form-row {
+  display: flex;
+  gap: 8px;
+}
+.wish-form-row select,
+.wish-form-row input { flex: 1; }
+.wish-form-actions {
+  display: flex;
+  gap: 8px;
+}
+.btn-wish-save {
+  flex: 1;
+  padding: 8px;
+  border: none;
+  background: var(--primary);
+  color: #FFF;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+}
+.btn-wish-save:hover { background: var(--primary-dark); }
+.btn-wish-cancel {
+  flex: 1;
+  padding: 8px;
+  border: 1.5px solid var(--border);
+  background: var(--card);
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.wishes-grid {
+  max-width: 640px;
+}
+
+.wishes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wishes-empty {
+  font-size: 13px;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 32px 0;
+}
+
+.wish-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  border: 0.5px solid var(--border);
+  box-shadow: var(--shadow);
+  transition: background 0.15s, box-shadow 0.15s;
+}
+.wish-item:hover { box-shadow: var(--shadow-hover); }
+.wish-item.dragging { opacity: 0.4; }
+.wish-item.drag-over {
+  background: var(--primary-light);
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
+
+.wish-drag-handle {
+  color: var(--text-muted);
+  cursor: grab;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.wish-drag-handle:active { cursor: grabbing; }
+
+.wish-check {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--success);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.wish-name {
+  flex: 1;
+  font-size: 14px;
+  color: var(--text);
+  min-width: 0;
+  word-break: break-all;
+}
+.wish-item.done .wish-name {
+  text-decoration: line-through;
+  color: var(--text-muted);
+}
+
+.wish-pri {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.wish-pri.pri-高 { background: var(--danger-light); color: var(--danger); }
+.wish-pri.pri-中 { background: var(--warning-light); color: #D97706; }
+.wish-pri.pri-低 { background: var(--bg); color: var(--text-muted); }
+
+.wish-deadline {
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.wish-del {
+  display: none;
+}
+.wish-del .icon-xs { width: 14px; height: 14px; }
+
 /* ═══════════════════════════════════════════
    SVG icons helpers
    ═══════════════════════════════════════════ */

templates/icons.html

@@ -67,4 +67,8 @@
   <symbol id="icon-pencil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
     <path d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
   </symbol>
+  <!-- 星星 -->
+  <symbol id="icon-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.563.563 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.563.563 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+  </symbol>
 </svg>

templates/index.html

@@ -6,6 +6,7 @@
 <title>紫微 · 磁场管理</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 <script>window.__INITIAL_STATS__ = {{ initial_stats | safe }};</script>
+<script>window.__INITIAL_WISHES__ = {{ initial_wishes | safe }};</script>
 </head>
 <body>
 {% include "icons.html" %}
@@ -77,6 +78,10 @@
         <svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
         每周评分
       </a>
+      <a class="nav-item" data-panel="wishes" onclick="switchPanel('wishes')">
+        <svg class="icon-sm"><use href="#icon-star"/></svg>
+        心愿清单
+      </a>
       <a class="nav-item" data-panel="history" onclick="switchPanel('history')">
         <svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
         历史记录
@@ -188,6 +193,40 @@
       <div id="history-grid" class="history-grid"></div>
     </section>
 
+    <!-- ── 心愿清单面板 ── -->
+    <section class="panel" id="panel-wishes">
+      <div class="panel-header">
+        <h2>心愿清单</h2>
+        <button class="btn-edit-toggle" id="wishes-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
+          <svg class="icon-sm"><use href="#icon-pencil"/></svg>
+        </button>
+      </div>
+      <!-- 新增表单 -->
+      <div class="wish-form" id="wish-form" style="display:none">
+        <input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
+        <div class="wish-form-row">
+          <select id="wish-priority">
+            <option value="高">高优先</option>
+            <option value="中" selected>中优先</option>
+            <option value="低">低优先</option>
+          </select>
+          <input type="date" id="wish-deadline">
+        </div>
+        <div class="wish-form-actions">
+          <button class="btn-wish-save" onclick="addWish()">添加</button>
+          <button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
+        </div>
+      </div>
+      <button class="btn-add edit-only" id="wishes-add-btn" onclick="showWishForm()" style="margin-bottom:12px">
+        <svg class="icon-sm"><use href="#icon-plus"/></svg> 新增心愿
+      </button>
+      <!-- 列表 -->
+      <div class="wishes-grid" id="wishes-grid">
+        <div class="wishes-list" id="wishes-list"></div>
+        <div class="wishes-empty" id="wishes-empty">暂无心愿，点击上方按钮添加</div>
+      </div>
+    </section>
+
   </main>
 </div>