diff --git a/build_editor.py b/build_editor.py
new file mode 100644
index 0000000..597412d
--- /dev/null
+++ b/build_editor.py
@@ -0,0 +1,102 @@
+"""Build editor.html template from vvvebjs source with Jinja2 escaping."""
+from pathlib import Path
+
+BASE = Path(__file__).parent
+SRC = BASE / "static" / "Vvvebjs" / "editor.html"
+OUT = BASE / "templates" / "editor.html"
+
+content = SRC.read_text(encoding="utf-8")
+
+# ── 1. Fix static asset paths ────────────────────────────────────
+VBASE = "/static/Vvvebjs/"
+replacements = [
+    ('href="css/', f'href="{VBASE}css/'),
+    ('href="libs/', f'href="{VBASE}libs/'),
+    ('href="img/', f'href="{VBASE}img/'),
+    ('href="favicon.ico"', f'href="{VBASE}favicon.ico"'),
+    ('src="libs/', f'src="{VBASE}libs/'),
+    ('src="js/', f'src="{VBASE}js/'),
+    ('src="img/', f'src="{VBASE}img/'),
+    ('src="media/', f'src="{VBASE}media/'),
+    ('src="fonts/', f'src="{VBASE}fonts/'),
+    ('src="demo/', f'src="{VBASE}demo/'),
+]
+for old, new in replacements:
+    content = content.replace(old, new)
+
+# ── 2. Fix PHP save URL → Flask API ─────────────────────────────
+content = content.replace('data-vvveb-url="save.php"', 'data-vvveb-url="/api/save"')
+
+# ── 3. Fix JS url variables ──────────────────────────────────────
+JS_VARS = [
+    ("let renameUrl = 'save.php?action=rename';",
+     "let renameUrl = '/api/save?action=rename';"),
+    ("let deleteUrl = 'save.php?action=delete';",
+     "let deleteUrl = '/api/save?action=delete';"),
+    ("let saveReusableUrl = 'save.php?action=saveReusable';",
+     "let saveReusableUrl = '/api/save?action=saveReusable';"),
+    ("let oEmbedProxyUrl = 'save.php?action=oembedProxy';",
+     "let oEmbedProxyUrl = '/api/save?action=oembedProxy';"),
+]
+for old, new in JS_VARS:
+    content = content.replace(old, new)
+
+# ── 4. Wrap everything in {% raw %} ... {% endraw %} to avoid Jinja2 parsing conflicts ──
+# We do this first so Jinja2 ignores VvvebJS's frontend micro-templates ({%= %}, {% %}).
+# Then we selectively exit the {% raw %} block using {% endraw %} ... {% raw %} for our dynamic values.
+content = "{% raw %}" + content + "{% endraw %}"
+
+# ── 5. Replace defaultPages block with Escaped Jinja2 Injection ──
+# Since we are inside a {% raw %} block, we use {% endraw %}{{ pages_json | safe }}{% raw %}
+start = content.find("let defaultPages = {")
+end = content.find("};\n\n\nlet pages = defaultPages;")
+if start != -1 and end != -1:
+    end += len("};\n\n\nlet pages = defaultPages;")
+    content = (
+        content[:start]
+        + "let defaultPages = {% endraw %}{{ pages_json | safe }}{% raw %};\nlet pages = defaultPages;"
+        + content[end:]
+    )
+
+# ── 6. Add back button + slug variable before </body> ───────────
+# We break out of {% raw %} using {% endraw %} to interpolate {{ slug | safe }}
+BACK_BTN = """
+<style>
+#back-to-dashboard {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  background: rgba(30,32,48,0.92);
+  color: #a5b4fc;
+  border: 1px solid rgba(99,102,241,0.4);
+  border-radius: 8px;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  backdrop-filter: blur(8px);
+  transition: background 0.2s, color 0.2s;
+  text-decoration: none;
+}
+#back-to-dashboard:hover {
+  background: rgba(99,102,241,0.25);
+  color: #fff;
+}
+</style>
+<a id="back-to-dashboard" href="/dashboard">
+  &#8592; 返回管理器
+</a>
+<script>
+// Inject project slug for save bridge
+window.VVVEB_PROJECT_SLUG = "{% endraw %}{{ slug | safe }}{% raw %}";
+</script>
+<script src="/static/js/my-editor.js"></script>
+"""
+content = content.replace("</body>", BACK_BTN + "\n</body>")
+
+OUT.write_text(content, encoding="utf-8")
+print(f"Successfully generated escaped Jinja2 template! Size: {len(content)} bytes.")
diff --git a/main.py b/main.py
index fb9c894..13394e5 100644
--- a/main.py
+++ b/main.py
@@ -1,6 +1,295 @@
-def main():
-    print("Hello from vvvebjs!")
+"""VvvebJS 網頁管理器 — Flask 主程式."""
 
+from __future__ import annotations
+
+import json
+import re
+import shutil
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any
+
+from flask import Flask, Response, abort, jsonify, render_template, request, send_from_directory
+
+app = Flask(__name__)
+
+# ── 路徑常數 ────────────────────────────────────────────────────────────────
+BASE_DIR = Path(__file__).parent
+WEBSITES_DIR = BASE_DIR / "websites"
+BLANK_TEMPLATE = BASE_DIR / "static" / "Vvvebjs" / "new-page-blank-template.html"
+
+
+# ── 輔助函式 ────────────────────────────────────────────────────────────────
+
+def slugify(text: str) -> str:
+    """將文字轉成 URL-safe slug."""
+    text = text.lower().strip()
+    text = re.sub(r"[^\w\s-]", "", text, flags=re.UNICODE)
+    text = re.sub(r"[\s_-]+", "-", text)
+    text = re.sub(r"^-+|-+$", "", text)
+    return text or "untitled"
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%S")
+
+
+def _project_dir(slug: str) -> Path:
+    return WEBSITES_DIR / slug
+
+
+def _project_json_path(slug: str) -> Path:
+    return _project_dir(slug) / "project.json"
+
+
+def _load_project(slug: str) -> dict[str, Any]:
+    """讀取專案設定，若不存在則回傳預設值."""
+    path = _project_json_path(slug)
+    if path.exists():
+        data: dict[str, Any] = json.loads(path.read_text(encoding="utf-8"))
+        return data
+    return {
+        "name": slug,
+        "slug": slug,
+        "description": "",
+        "created_at": _now_iso(),
+    }
+
+
+def _save_project(slug: str, data: dict[str, Any]) -> None:
+    path = _project_json_path(slug)
+    path.write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
+
+
+def _list_pages(slug: str) -> list[str]:
+    """列出專案目錄下所有 .html 頁面."""
+    proj_dir = _project_dir(slug)
+    if not proj_dir.exists():
+        return []
+    return sorted(p.name for p in proj_dir.glob("*.html"))
+
+
+def _project_summary(slug: str) -> dict[str, Any]:
+    data = _load_project(slug)
+    pages = _list_pages(slug)
+    proj_dir = _project_dir(slug)
+    html_files = list(proj_dir.glob("*.html"))
+    if html_files:
+        last_mod = max(f.stat().st_mtime for f in html_files)
+        last_mod_str = datetime.fromtimestamp(last_mod, tz=timezone.utc).strftime("%Y-%m-%dT%H:%M:%S")
+    else:
+        last_mod_str = str(data.get("created_at", _now_iso()))
+    return {
+        **data,
+        "slug": slug,
+        "page_count": len(pages),
+        "pages": pages,
+        "last_modified": last_mod_str,
+    }
+
+
+def _sanitize_file_path(slug: str, filename: str) -> Path | None:
+    """驗證並回傳安全的檔案路徑（防止路徑遍歷）."""
+    proj_dir = _project_dir(slug).resolve()
+    target = (proj_dir / Path(filename).name).resolve()
+    if not str(target).startswith(str(proj_dir)):
+        return None
+    if target.suffix.lower() != ".html":
+        return None
+    return target
+
+
+def _copy_blank_template(dest: Path) -> None:
+    """複製空白範本或建立最小 HTML."""
+    if BLANK_TEMPLATE.exists():
+        shutil.copy(BLANK_TEMPLATE, dest)
+    else:
+        dest.write_text(
+            "<!DOCTYPE html><html><head><title>My Page</title></head><body></body></html>",
+            encoding="utf-8",
+        )
+
+
+# ── 路由：一般頁面 ──────────────────────────────────────────────────────────
+
+@app.route("/")  # type: ignore[untyped-decorator]
+def index() -> Response:
+    from flask import redirect, url_for
+    return redirect(url_for("dashboard"))
+
+
+@app.route("/dashboard")  # type: ignore[untyped-decorator]
+def dashboard() -> str:
+    return str(render_template("dashboard.html"))
+
+
+@app.route("/editor/<slug>")  # type: ignore[untyped-decorator]
+def editor(slug: str) -> str:
+    proj_dir = _project_dir(slug)
+    if not proj_dir.exists():
+        abort(404)
+    pages = _list_pages(slug)
+    project = _load_project(slug)
+
+    pages_obj: dict[str, Any] = {}
+    for page in pages:
+        name = page.replace(".html", "")
+        pages_obj[name] = {
+            "name": name,
+            "title": name.replace("-", " ").title(),
+            "filename": page,
+            "file": page,
+            "url": f"/sites/{slug}/{page}",
+        }
+
+    if not pages_obj:
+        idx_path = proj_dir / "index.html"
+        _copy_blank_template(idx_path)
+        pages_obj["index"] = {
+            "name": "index",
+            "title": "Index",
+            "filename": "index.html",
+            "file": "index.html",
+            "url": f"/sites/{slug}/index.html",
+        }
+
+    return str(render_template(
+        "editor.html",
+        slug=slug,
+        project=project,
+        pages_json=json.dumps(pages_obj, ensure_ascii=False),
+    ))
+
+
+# ── 路由：API ───────────────────────────────────────────────────────────────
+
+@app.route("/api/projects", methods=["GET"])  # type: ignore[untyped-decorator]
+def api_list_projects() -> Response:
+    WEBSITES_DIR.mkdir(exist_ok=True)
+    projects = [_project_summary(d.name) for d in sorted(WEBSITES_DIR.iterdir()) if d.is_dir()]
+    return jsonify(projects)
+
+
+@app.route("/api/projects", methods=["POST"])  # type: ignore[untyped-decorator]
+def api_create_project() -> tuple[Response, int]:
+    body: dict[str, Any] = request.get_json(force=True) or {}
+    name: str = str(body.get("name", "")).strip()
+    if not name:
+        return jsonify({"error": "名稱不能為空"}), 400
+
+    slug = slugify(name)
+    proj_dir = _project_dir(slug)
+    base_slug = slug
+    counter = 1
+    while proj_dir.exists():
+        slug = f"{base_slug}-{counter}"
+        proj_dir = _project_dir(slug)
+        counter += 1
+
+    proj_dir.mkdir(parents=True, exist_ok=True)
+    data: dict[str, Any] = {
+        "name": name,
+        "slug": slug,
+        "description": str(body.get("description", "")),
+        "created_at": _now_iso(),
+    }
+    _save_project(slug, data)
+    _copy_blank_template(proj_dir / "index.html")
+    return jsonify(_project_summary(slug)), 201
+
+
+@app.route("/api/projects/<slug>", methods=["GET"])  # type: ignore[untyped-decorator]
+def api_get_project(slug: str) -> tuple[Response, int] | Response:
+    if not _project_dir(slug).exists():
+        return jsonify({"error": "專案不存在"}), 404
+    return jsonify(_project_summary(slug))
+
+
+@app.route("/api/projects/<slug>", methods=["PUT"])  # type: ignore[untyped-decorator]
+def api_update_project(slug: str) -> tuple[Response, int] | Response:
+    if not _project_dir(slug).exists():
+        return jsonify({"error": "專案不存在"}), 404
+    body: dict[str, Any] = request.get_json(force=True) or {}
+    data = _load_project(slug)
+    if "name" in body and str(body["name"]).strip():
+        data["name"] = str(body["name"]).strip()
+    if "description" in body:
+        data["description"] = str(body["description"])
+    data["updated_at"] = _now_iso()
+    _save_project(slug, data)
+    return jsonify(_project_summary(slug))
+
+
+@app.route("/api/projects/<slug>", methods=["DELETE"])  # type: ignore[untyped-decorator]
+def api_delete_project(slug: str) -> tuple[Response, int] | Response:
+    proj_dir = _project_dir(slug)
+    if not proj_dir.exists():
+        return jsonify({"error": "專案不存在"}), 404
+    shutil.rmtree(proj_dir)
+    return jsonify({"ok": True})
+
+
+@app.route("/api/projects/<slug>/pages", methods=["GET"])  # type: ignore[untyped-decorator]
+def api_list_pages(slug: str) -> tuple[Response, int] | Response:
+    if not _project_dir(slug).exists():
+        return jsonify({"error": "專案不存在"}), 404
+    return jsonify(_list_pages(slug))
+
+
+@app.route("/api/projects/<slug>/pages", methods=["POST"])  # type: ignore[untyped-decorator]
+def api_create_page(slug: str) -> tuple[Response, int]:
+    if not _project_dir(slug).exists():
+        return jsonify({"error": "專案不存在"}), 404
+    body: dict[str, Any] = request.get_json(force=True) or {}
+    page_name: str = str(body.get("name", "")).strip()
+    if not page_name:
+        return jsonify({"error": "頁面名稱不能為空"}), 400
+    page_slug = slugify(page_name)
+    page_path = _project_dir(slug) / f"{page_slug}.html"
+    if page_path.exists():
+        return jsonify({"error": "頁面已存在"}), 409
+    _copy_blank_template(page_path)
+    return jsonify({"page": f"{page_slug}.html"}), 201
+
+
+@app.route("/api/save", methods=["POST"])  # type: ignore[untyped-decorator]
+def api_save() -> tuple[Response, int] | Response:
+    """接受 vvvebjs 的儲存請求，寫入對應專案目錄."""
+    if request.is_json:
+        raw: dict[str, Any] = request.get_json(force=True) or {}
+        body: dict[str, Any] = raw
+    else:
+        form = dict(request.form)
+        body = {k: (v[0] if isinstance(v, list) else v) for k, v in form.items()}
+
+    slug: str = str(body.get("slug", "")).strip()
+    filename: str = str(body.get("file", "")).strip()
+    html: str = str(body.get("html", "")).strip()
+
+    if not slug or not filename or not html:
+        return jsonify({"error": "缺少必要參數 slug / file / html"}), 400
+
+    if not _project_dir(slug).exists():
+        return jsonify({"error": "專案不存在"}), 404
+
+    safe_path = _sanitize_file_path(slug, filename)
+    if safe_path is None:
+        return jsonify({"error": "不合法的檔案路徑"}), 400
+
+    safe_path.write_text(html, encoding="utf-8")
+    return jsonify({"ok": True, "saved": safe_path.name})
+
+
+@app.route("/sites/<slug>/<path:filename>")  # type: ignore[untyped-decorator]
+def serve_site_file(slug: str, filename: str) -> Response:
+    proj_dir = _project_dir(slug)
+    if not proj_dir.exists():
+        abort(404)
+    return send_from_directory(proj_dir, filename)
+
+
+# ── 啟動 ────────────────────────────────────────────────────────────────────
 
 if __name__ == "__main__":
-    main()
+    WEBSITES_DIR.mkdir(exist_ok=True)
+    app.run(debug=True, port=5000)
diff --git a/pyproject.toml b/pyproject.toml
index 2bdb68b..aad68eb 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,9 @@
 [project]
 name = "vvvebjs"
 version = "0.1.0"
-description = "Add your description here"
+description = "VvvebJS 網頁管理器"
 readme = "README.md"
 requires-python = ">=3.13"
-dependencies = []
+dependencies = [
+    "flask>=3.1",
+]
\ No newline at end of file
diff --git a/static/css/my-style.css b/static/css/my-style.css
index e69de29..b2ac112 100644
--- a/static/css/my-style.css
+++ b/static/css/my-style.css
@@ -0,0 +1,624 @@
+/* ================================================================
+   VvvebJS 網頁管理器 — 儀表板樣式
+   深色主題 + 玻璃態 (Glassmorphism)
+   ================================================================ */
+
+/* ── CSS 變數 ──────────────────────────────────────────────────── */
+:root {
+  --bg-base:        #0d0f14;
+  --bg-surface:     #13161e;
+  --bg-card:        rgba(255, 255, 255, 0.04);
+  --bg-card-hover:  rgba(255, 255, 255, 0.07);
+  --border:         rgba(255, 255, 255, 0.08);
+  --border-focus:   rgba(99, 102, 241, 0.6);
+
+  --text-primary:   #f0f2f8;
+  --text-secondary: #8b90a8;
+  --text-muted:     #555a72;
+
+  --accent:         #6366f1;
+  --accent-hover:   #4f52d8;
+  --accent-glow:    rgba(99, 102, 241, 0.25);
+  --purple:         #8b5cf6;
+  --danger:         #ef4444;
+  --danger-hover:   #dc2626;
+  --success:        #22c55e;
+
+  --radius-sm:      6px;
+  --radius-md:      12px;
+  --radius-lg:      18px;
+
+  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
+  --shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.6);
+
+  --transition:     0.2s ease;
+  --font:           'Inter', system-ui, -apple-system, sans-serif;
+}
+
+/* ── Reset ─────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; scroll-behavior: smooth; }
+body {
+  font-family: var(--font);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  min-height: 100vh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-decoration: none; }
+ul { list-style: none; }
+input, textarea, select { font-family: inherit; }
+button { cursor: pointer; font-family: inherit; }
+
+/* ── 頂部導覽列 ─────────────────────────────────────────────────── */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+  height: 62px;
+  background: rgba(13, 15, 20, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.brand-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.brand-name {
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  background: linear-gradient(135deg, #e0e2ff 0%, #a5b4fc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.brand-name em {
+  font-style: normal;
+  font-weight: 300;
+  opacity: 0.8;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.site-count {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* ── 按鈕 ─────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 1.1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
+  white-space: nowrap;
+}
+
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 0 var(--accent-glow);
+}
+.btn-primary:hover {
+  background: var(--accent-hover);
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: var(--border);
+}
+.btn-ghost:hover {
+  background: rgba(255,255,255,0.06);
+  color: var(--text-primary);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: #fff;
+  border-color: var(--danger);
+}
+.btn-danger:hover { background: var(--danger-hover); }
+
+.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  transition: background var(--transition), color var(--transition);
+}
+.icon-btn:hover {
+  background: rgba(255,255,255,0.1);
+  color: var(--text-primary);
+}
+
+/* ── 主內容 ───────────────────────────────────────────────────── */
+.main-content {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem 2rem 4rem;
+}
+
+/* ── 搜尋列 ─────────────────────────────────────────────────────── */
+.search-bar-wrap {
+  margin-bottom: 2rem;
+}
+
+.search-bar {
+  position: relative;
+  max-width: 380px;
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.9rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.search-bar input {
+  width: 100%;
+  padding: 0.6rem 0.9rem 0.6rem 2.6rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  transition: border-color var(--transition), background var(--transition);
+  outline: none;
+}
+.search-bar input::placeholder { color: var(--text-muted); }
+.search-bar input:focus {
+  border-color: var(--border-focus);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+/* ── 專案卡片網格 ─────────────────────────────────────────────── */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.25rem;
+}
+
+/* ── 專案卡片 ────────────────────────────────────────────────── */
+.project-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.4rem;
+  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
+  overflow: hidden;
+}
+
+.project-card:hover {
+  background: var(--bg-card-hover);
+  border-color: rgba(99, 102, 241, 0.3);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-card), 0 0 40px rgba(99, 102, 241, 0.08);
+}
+
+.card-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 20% 10%, rgba(99,102,241,0.08) 0%, transparent 60%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+.project-card:hover .card-glow { opacity: 1; }
+
+.card-header-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
+  border: 1px solid rgba(99,102,241,0.25);
+  border-radius: var(--radius-md);
+  color: #a5b4fc;
+}
+
+.card-body {
+  flex: 1;
+  margin-bottom: 1rem;
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.35rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-desc {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-meta {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.1rem;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+.card-actions { margin-top: auto; }
+.card-actions .btn { width: 100%; justify-content: center; }
+
+/* ── 空狀態 ─────────────────────────────────────────────────── */
+.empty-state {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 5rem 2rem;
+  color: var(--text-muted);
+  display: flex;
+  gap: 1rem;
+}
+
+.empty-state svg { opacity: 0.3; }
+.empty-state h2 { font-size: 1.3rem; color: var(--text-secondary); }
+.empty-state p { font-size: 0.9rem; max-width: 320px; }
+.empty-state .btn { margin-top: 0.5rem; }
+
+/* ── 輸入框 ─────────────────────────────────────────────────── */
+input[type=text],
+input[type=email],
+textarea {
+  width: 100%;
+  padding: 0.6rem 0.85rem;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  outline: none;
+  transition: border-color var(--transition);
+  resize: vertical;
+}
+
+input[type=text]:focus,
+input[type=email]:focus,
+textarea:focus {
+  border-color: var(--border-focus);
+  background: rgba(99,102,241,0.06);
+}
+
+input[type=text]::placeholder,
+textarea::placeholder { color: var(--text-muted); }
+
+.input-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── Form group ─────────────────────────────────────────────── */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-bottom: 1.1rem;
+}
+
+.form-group label {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.required { color: var(--danger); }
+
+.slug-preview {
+  font-size: 0.78rem;
+  color: var(--accent);
+  font-family: monospace;
+  min-height: 1.1em;
+}
+
+.hint-text {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+.hint-text.danger { color: rgba(239,68,68,0.7); }
+
+/* ── Modal ──────────────────────────────────────────────────── */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.65);
+  backdrop-filter: blur(6px);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition);
+}
+
+.modal-backdrop.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.modal-box {
+  background: #1a1d27;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-modal);
+  width: 90%;
+  max-width: 480px;
+  transform: translateY(20px) scale(0.97);
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-backdrop.active .modal-box {
+  transform: translateY(0) scale(1);
+}
+
+.modal-sm { max-width: 380px; }
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 6px;
+  transition: background var(--transition), color var(--transition);
+}
+.modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-body p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
+.modal-body strong { color: var(--text-primary); }
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border);
+}
+
+/* ── Offcanvas ──────────────────────────────────────────────── */
+.offcanvas-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+  z-index: 200;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition);
+}
+.offcanvas-backdrop.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.offcanvas {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  max-width: 100%;
+  background: #1a1d27;
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: -8px 0 40px rgba(0,0,0,0.4);
+}
+.offcanvas-backdrop.active .offcanvas {
+  transform: translateX(0);
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.offcanvas-header h2 { font-size: 1rem; font-weight: 600; }
+
+.offcanvas-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.offcanvas-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+/* ── 分隔線 / 區段標籤 ──────────────────────────────────────── */
+.divider {
+  height: 1px;
+  background: var(--border);
+  margin: 1.25rem 0;
+}
+
+.section-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+.section-label.danger { color: rgba(239,68,68,0.6); }
+
+/* ── 頁面清單 ─────────────────────────────────────────────── */
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.page-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.pages-loading, .no-pages {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  padding: 0.5rem 0;
+}
+
+/* ── 危險區域 ────────────────────────────────────────────── */
+.danger-zone {
+  padding: 1rem;
+  border: 1px solid rgba(239,68,68,0.2);
+  border-radius: var(--radius-md);
+  background: rgba(239,68,68,0.04);
+}
+.danger-zone .btn-danger { width: 100%; justify-content: center; }
+
+/* ── Toast ──────────────────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+
+.toast {
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #fff;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  transform: translateX(120%);
+  opacity: 0;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
+  pointer-events: all;
+  max-width: 320px;
+}
+
+.toast.show { transform: translateX(0); opacity: 1; }
+.toast-success { background: #166534; border: 1px solid #22c55e40; }
+.toast-error   { background: #7f1d1d; border: 1px solid #ef444440; }
+
+/* ── 捲軸美化 ─────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
+
+/* ── 響應式 ─────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .topbar { padding: 0 1rem; }
+  .main-content { padding: 1.25rem 1rem 3rem; }
+  .site-count { display: none; }
+  .offcanvas { width: 100%; }
+}
diff --git a/static/js/my-editor.js b/static/js/my-editor.js
index e69de29..c2fcf3f 100644
--- a/static/js/my-editor.js
+++ b/static/js/my-editor.js
@@ -0,0 +1,168 @@
+/**
+ * my-editor.js — VvvebJS 儲存橋接腳本
+ * 覆蓋 vvvebjs 的 saveAjax 行為，附加 project slug 後送至 Flask /api/save
+ */
+(function () {
+  "use strict";
+
+  const SLUG = window.VVVEB_PROJECT_SLUG || "";
+
+  // ── Toast 通知 ──────────────────────────────────────────────────
+  function showToast(msg, type) {
+    const existing = document.getElementById("vvveb-save-toast");
+    if (existing) existing.remove();
+
+    const toast = document.createElement("div");
+    toast.id = "vvveb-save-toast";
+    const bg = type === "error" ? "#7f1d1d" : "#14532d";
+    const border = type === "error" ? "#ef444460" : "#22c55e60";
+    Object.assign(toast.style, {
+      position: "fixed",
+      top: "1rem",
+      right: "1rem",
+      zIndex: "99999",
+      background: bg,
+      border: "1px solid " + border,
+      color: "#fff",
+      borderRadius: "8px",
+      padding: "0.65rem 1.1rem",
+      fontSize: "0.85rem",
+      fontFamily: "Inter, system-ui, sans-serif",
+      fontWeight: "500",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.5)",
+      opacity: "0",
+      transform: "translateY(-8px)",
+      transition: "opacity 0.3s ease, transform 0.3s ease",
+      pointerEvents: "none",
+    });
+    toast.textContent = msg;
+    document.body.appendChild(toast);
+
+    requestAnimationFrame(() => {
+      toast.style.opacity = "1";
+      toast.style.transform = "translateY(0)";
+    });
+    setTimeout(() => {
+      toast.style.opacity = "0";
+      toast.style.transform = "translateY(-8px)";
+      setTimeout(() => toast.remove(), 350);
+    }, 3000);
+  }
+
+  // ── 覆蓋 saveAjax ───────────────────────────────────────────────
+  function patchSaveAjax() {
+    if (typeof Vvveb === "undefined" || !Vvveb.Builder) {
+      // 等待 Vvveb 載入
+      setTimeout(patchSaveAjax, 200);
+      return;
+    }
+
+    const originalSaveAjax = Vvveb.Builder.saveAjax
+      ? Vvveb.Builder.saveAjax.bind(Vvveb.Builder)
+      : null;
+
+    Vvveb.Builder.saveAjax = function (saveUrl) {
+      if (!SLUG) {
+        showToast("錯誤：找不到專案識別碼 (slug)", "error");
+        return;
+      }
+
+      // 取得目前編輯的頁面檔名
+      const currentPage = Vvveb.FileManager
+        ? Vvveb.FileManager.getCurrentPage
+          ? Vvveb.FileManager.getCurrentPage()
+          : null
+        : null;
+
+      let filename = "index.html";
+      if (currentPage && currentPage.filename) {
+        filename = currentPage.filename;
+      } else if (currentPage && currentPage.file) {
+        // 只取檔名部分
+        filename = currentPage.file.split("/").pop();
+      }
+
+      // 取得 HTML 內容
+      let html = "";
+      try {
+        html = Vvveb.Builder.getHtml ? Vvveb.Builder.getHtml() : "";
+      } catch (e) {
+        console.error("[my-editor] getHtml failed:", e);
+      }
+
+      if (!html) {
+        showToast("無法取得頁面內容", "error");
+        return;
+      }
+
+      // 顯示儲存中狀態
+      const saveBtn = document.querySelector(".save-btn");
+      if (saveBtn) {
+        saveBtn.querySelector(".loading")?.classList.remove("d-none");
+        saveBtn.querySelector(".button-text")?.classList.add("d-none");
+      }
+
+      const body = new URLSearchParams({
+        slug: SLUG,
+        file: filename,
+        html: html,
+      });
+
+      fetch("/api/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: body.toString(),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.ok) {
+            showToast("✓ 已儲存：" + (data.saved || filename));
+          } else {
+            showToast("儲存失敗：" + (data.error || "未知錯誤"), "error");
+          }
+        })
+        .catch((err) => {
+          showToast("網路錯誤：" + err.message, "error");
+        })
+        .finally(() => {
+          if (saveBtn) {
+            saveBtn.querySelector(".loading")?.classList.add("d-none");
+            saveBtn.querySelector(".button-text")?.classList.remove("d-none");
+          }
+        });
+    };
+
+    console.log("[my-editor] saveAjax patched for slug:", SLUG);
+  }
+
+  // ── 啟用 Save 按鈕（vvvebjs 預設 disabled）──────────────────────
+  function enableSaveBtn() {
+    const btn = document.querySelector(".save-btn");
+    if (btn) {
+      btn.removeAttribute("disabled");
+    } else {
+      setTimeout(enableSaveBtn, 300);
+    }
+  }
+
+  // ── Ctrl+S 快捷鍵 ────────────────────────────────────────────────
+  document.addEventListener("keydown", function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+      e.preventDefault();
+      if (typeof Vvveb !== "undefined" && Vvveb.Builder && Vvveb.Builder.saveAjax) {
+        Vvveb.Builder.saveAjax("/api/save");
+      }
+    }
+  });
+
+  // ── 初始化 ────────────────────────────────────────────────────────
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      patchSaveAjax();
+      enableSaveBtn();
+    });
+  } else {
+    patchSaveAjax();
+    enableSaveBtn();
+  }
+})();
diff --git a/templates/dashboard.html b/templates/dashboard.html
new file mode 100644
index 0000000..0896714
--- /dev/null
+++ b/templates/dashboard.html
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VvvebJS 網頁管理器</title>
+  <meta name="description" content="使用 VvvebJS 管理您的靜態網站專案">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/css/my-style.css">
+</head>
+<body>
+
+<!-- ── 頂部導覽 ────────────────────────────────────────────────── -->
+<header class="topbar">
+  <div class="topbar-brand">
+    <svg class="brand-icon" viewBox="0 0 32 32" fill="none">
+      <rect width="32" height="32" rx="8" fill="url(#grad)"/>
+      <path d="M8 10h16M8 16h10M8 22h13" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
+      <defs>
+        <linearGradient id="grad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#6366f1"/>
+          <stop offset="1" stop-color="#8b5cf6"/>
+        </linearGradient>
+      </defs>
+    </svg>
+    <span class="brand-name">VvvebJS <em>Manager</em></span>
+  </div>
+  <div class="topbar-actions">
+    <span class="site-count" id="site-count">— 個專案</span>
+    <button class="btn btn-primary" id="new-project-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+      新增專案
+    </button>
+  </div>
+</header>
+
+<!-- ── 主內容 ─────────────────────────────────────────────────── -->
+<main class="main-content">
+
+  <!-- 搜尋列 -->
+  <div class="search-bar-wrap">
+    <div class="search-bar">
+      <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+      </svg>
+      <input type="text" id="search-input" placeholder="搜尋專案名稱…" autocomplete="off">
+    </div>
+  </div>
+
+  <!-- 卡片網格 -->
+  <div class="projects-grid" id="projects-grid">
+    <!-- 由 JS 動態填入 -->
+  </div>
+
+  <!-- 空狀態 -->
+  <div class="empty-state" id="empty-state" style="display:none">
+    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+      <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/>
+      <line x1="12" y1="17" x2="12" y2="21"/>
+    </svg>
+    <h2>尚無專案</h2>
+    <p>點擊右上角「新增專案」開始建立您的第一個網站</p>
+    <button class="btn btn-primary" id="empty-new-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+      建立第一個專案
+    </button>
+  </div>
+
+</main>
+
+<!-- ── 新增專案 Modal ──────────────────────────────────────────── -->
+<div class="modal-backdrop" id="create-modal-backdrop">
+  <div class="modal-box" id="create-modal" role="dialog" aria-labelledby="create-modal-title" aria-modal="true">
+    <div class="modal-header">
+      <h2 id="create-modal-title">新增專案</h2>
+      <button class="modal-close" id="create-modal-close" aria-label="關閉">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="new-project-name">專案名稱 <span class="required">*</span></label>
+        <input type="text" id="new-project-name" placeholder="例如：我的公司網站" autocomplete="off">
+        <span class="slug-preview" id="slug-preview"></span>
+      </div>
+      <div class="form-group">
+        <label for="new-project-desc">描述（選填）</label>
+        <textarea id="new-project-desc" rows="3" placeholder="簡短說明這個網站的用途…"></textarea>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" id="create-cancel-btn">取消</button>
+      <button class="btn btn-primary" id="create-confirm-btn">建立專案</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── 設定 Offcanvas ─────────────────────────────────────────── -->
+<div class="offcanvas-backdrop" id="settings-backdrop">
+  <div class="offcanvas" id="settings-panel" role="dialog" aria-labelledby="settings-title">
+    <div class="offcanvas-header">
+      <h2 id="settings-title">專案設定</h2>
+      <button class="modal-close" id="settings-close" aria-label="關閉">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+    </div>
+    <div class="offcanvas-body">
+      <input type="hidden" id="settings-slug">
+      <div class="form-group">
+        <label for="settings-name">專案名稱</label>
+        <input type="text" id="settings-name" placeholder="專案名稱">
+      </div>
+      <div class="form-group">
+        <label for="settings-desc">描述</label>
+        <textarea id="settings-desc" rows="4"></textarea>
+      </div>
+      <div class="form-group">
+        <label>Slug（資料夾名稱）</label>
+        <input type="text" id="settings-slug-display" disabled class="input-disabled">
+        <p class="hint-text">Slug 為唯一識別碼，建立後無法更改</p>
+      </div>
+
+      <div class="divider"></div>
+
+      <h3 class="section-label">頁面清單</h3>
+      <ul class="pages-list" id="settings-pages-list">
+        <li class="pages-loading">載入中…</li>
+      </ul>
+      <button class="btn btn-ghost btn-sm" id="add-page-btn" style="margin-top:0.75rem; width:100%">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+        </svg>
+        新增頁面
+      </button>
+
+      <div class="divider"></div>
+
+      <div class="danger-zone">
+        <h3 class="section-label danger">危險操作</h3>
+        <button class="btn btn-danger" id="delete-project-btn">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/>
+            <path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
+          </svg>
+          刪除此專案
+        </button>
+        <p class="hint-text danger">此操作不可復原，將刪除所有頁面檔案</p>
+      </div>
+    </div>
+    <div class="offcanvas-footer">
+      <button class="btn btn-ghost" id="settings-cancel-btn">取消</button>
+      <button class="btn btn-primary" id="settings-save-btn">儲存設定</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── 刪除確認 Modal ──────────────────────────────────────────── -->
+<div class="modal-backdrop" id="delete-modal-backdrop">
+  <div class="modal-box modal-sm" role="dialog" aria-modal="true">
+    <div class="modal-header">
+      <h2>確認刪除</h2>
+    </div>
+    <div class="modal-body">
+      <p>確定要刪除專案 <strong id="delete-project-name"></strong> 嗎？<br>
+      此操作不可復原，所有頁面檔案都將被刪除。</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" id="delete-cancel-btn">取消</button>
+      <button class="btn btn-danger" id="delete-confirm-btn">確認刪除</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Toast 通知 ─────────────────────────────────────────────── -->
+<div class="toast-container" id="toast-container"></div>
+
+<script>
+// ── 狀態 ─────────────────────────────────────────────────────────
+let allProjects = [];
+let settingsCurrentSlug = '';
+let deleteTargetSlug = '';
+
+// ── API 輔助 ─────────────────────────────────────────────────────
+async function apiFetch(url, opts = {}) {
+  const res = await fetch(url, {
+    headers: { 'Content-Type': 'application/json' },
+    ...opts,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
+// ── Toast ─────────────────────────────────────────────────────────
+function showToast(msg, type = 'success') {
+  const tc = document.getElementById('toast-container');
+  const t = document.createElement('div');
+  t.className = `toast toast-${type}`;
+  t.textContent = msg;
+  tc.appendChild(t);
+  requestAnimationFrame(() => t.classList.add('show'));
+  setTimeout(() => {
+    t.classList.remove('show');
+    setTimeout(() => t.remove(), 400);
+  }, 3000);
+}
+
+// ── Slug 預覽 ─────────────────────────────────────────────────────
+function toSlug(s) {
+  return s.toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '') || 'untitled';
+}
+
+// ── 渲染卡片 ─────────────────────────────────────────────────────
+function renderProjects(projects) {
+  const grid = document.getElementById('projects-grid');
+  const empty = document.getElementById('empty-state');
+  const count = document.getElementById('site-count');
+  count.textContent = `${projects.length} 個專案`;
+
+  if (projects.length === 0) {
+    grid.innerHTML = '';
+    empty.style.display = 'flex';
+    return;
+  }
+  empty.style.display = 'none';
+
+  grid.innerHTML = projects.map(p => {
+    const mod = p.last_modified ? p.last_modified.slice(0, 10) : '—';
+    const pages = p.page_count ?? 0;
+    return `
+    <div class="project-card" data-slug="${p.slug}">
+      <div class="card-glow"></div>
+      <div class="card-header-row">
+        <div class="card-icon">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <rect x="2" y="3" width="20" height="14" rx="2"/>
+            <line x1="8" y1="21" x2="16" y2="21"/>
+            <line x1="12" y1="17" x2="12" y2="21"/>
+          </svg>
+        </div>
+        <div class="card-menu">
+          <button class="icon-btn settings-btn" data-slug="${p.slug}" title="設定">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <h3 class="card-title">${escHtml(p.name)}</h3>
+        <p class="card-desc">${escHtml(p.description || '—')}</p>
+      </div>
+      <div class="card-meta">
+        <span class="meta-item">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          ${pages} 頁
+        </span>
+        <span class="meta-item">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+            <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
+            <line x1="3" y1="10" x2="21" y2="10"/>
+          </svg>
+          ${mod}
+        </span>
+      </div>
+      <div class="card-actions">
+        <a href="/editor/${p.slug}" class="btn btn-primary btn-sm" id="edit-btn-${p.slug}">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+          </svg>
+          開啟編輯器
+        </a>
+      </div>
+    </div>`;
+  }).join('');
+
+  // 綁定設定按鈕
+  grid.querySelectorAll('.settings-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      openSettings(btn.dataset.slug);
+    });
+  });
+}
+
+function escHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+// ── 載入專案 ─────────────────────────────────────────────────────
+async function loadProjects() {
+  try {
+    allProjects = await apiFetch('/api/projects');
+    renderProjects(allProjects);
+  } catch (e) {
+    showToast('載入專案失敗：' + e.message, 'error');
+  }
+}
+
+// ── 搜尋 ─────────────────────────────────────────────────────────
+document.getElementById('search-input').addEventListener('input', function() {
+  const q = this.value.toLowerCase();
+  const filtered = allProjects.filter(p =>
+    p.name.toLowerCase().includes(q) ||
+    (p.description || '').toLowerCase().includes(q)
+  );
+  renderProjects(filtered);
+});
+
+// ── 新增專案 Modal ────────────────────────────────────────────────
+function openCreateModal() {
+  document.getElementById('new-project-name').value = '';
+  document.getElementById('new-project-desc').value = '';
+  document.getElementById('slug-preview').textContent = '';
+  document.getElementById('create-modal-backdrop').classList.add('active');
+  setTimeout(() => document.getElementById('new-project-name').focus(), 50);
+}
+function closeCreateModal() {
+  document.getElementById('create-modal-backdrop').classList.remove('active');
+}
+
+document.getElementById('new-project-btn').addEventListener('click', openCreateModal);
+document.getElementById('empty-new-btn').addEventListener('click', openCreateModal);
+document.getElementById('create-modal-close').addEventListener('click', closeCreateModal);
+document.getElementById('create-cancel-btn').addEventListener('click', closeCreateModal);
+document.getElementById('create-modal-backdrop').addEventListener('click', e => {
+  if (e.target.id === 'create-modal-backdrop') closeCreateModal();
+});
+
+document.getElementById('new-project-name').addEventListener('input', function() {
+  const slug = toSlug(this.value);
+  const preview = document.getElementById('slug-preview');
+  preview.textContent = this.value ? `資料夾名稱：${slug}` : '';
+});
+
+document.getElementById('create-confirm-btn').addEventListener('click', async () => {
+  const name = document.getElementById('new-project-name').value.trim();
+  const desc = document.getElementById('new-project-desc').value.trim();
+  if (!name) {
+    showToast('請輸入專案名稱', 'error');
+    document.getElementById('new-project-name').focus();
+    return;
+  }
+  try {
+    const btn = document.getElementById('create-confirm-btn');
+    btn.disabled = true;
+    btn.textContent = '建立中…';
+    await apiFetch('/api/projects', {
+      method: 'POST',
+      body: JSON.stringify({ name, description: desc }),
+    });
+    closeCreateModal();
+    showToast(`專案「${name}」建立成功！`);
+    await loadProjects();
+  } catch(e) {
+    showToast('建立失敗：' + e.message, 'error');
+  } finally {
+    const btn = document.getElementById('create-confirm-btn');
+    btn.disabled = false;
+    btn.textContent = '建立專案';
+  }
+});
+
+// ── 設定 Offcanvas ────────────────────────────────────────────────
+async function openSettings(slug) {
+  settingsCurrentSlug = slug;
+  document.getElementById('settings-backdrop').classList.add('active');
+  document.getElementById('settings-slug').value = slug;
+  document.getElementById('settings-slug-display').value = slug;
+  document.getElementById('settings-pages-list').innerHTML = '<li class="pages-loading">載入中…</li>';
+
+  try {
+    const proj = await apiFetch(`/api/projects/${slug}`);
+    document.getElementById('settings-name').value = proj.name;
+    document.getElementById('settings-desc').value = proj.description || '';
+
+    const pages = proj.pages || [];
+    const listEl = document.getElementById('settings-pages-list');
+    if (pages.length === 0) {
+      listEl.innerHTML = '<li class="no-pages">尚無頁面</li>';
+    } else {
+      listEl.innerHTML = pages.map(p => `
+        <li class="page-item">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          ${escHtml(p)}
+        </li>`).join('');
+    }
+  } catch(e) {
+    showToast('載入設定失敗：' + e.message, 'error');
+  }
+}
+
+function closeSettings() {
+  document.getElementById('settings-backdrop').classList.remove('active');
+}
+
+document.getElementById('settings-close').addEventListener('click', closeSettings);
+document.getElementById('settings-cancel-btn').addEventListener('click', closeSettings);
+document.getElementById('settings-backdrop').addEventListener('click', e => {
+  if (e.target.id === 'settings-backdrop') closeSettings();
+});
+
+document.getElementById('settings-save-btn').addEventListener('click', async () => {
+  const name = document.getElementById('settings-name').value.trim();
+  const desc = document.getElementById('settings-desc').value.trim();
+  if (!name) {
+    showToast('名稱不能為空', 'error');
+    return;
+  }
+  try {
+    await apiFetch(`/api/projects/${settingsCurrentSlug}`, {
+      method: 'PUT',
+      body: JSON.stringify({ name, description: desc }),
+    });
+    closeSettings();
+    showToast('設定已儲存');
+    await loadProjects();
+  } catch(e) {
+    showToast('儲存失敗：' + e.message, 'error');
+  }
+});
+
+// 新增頁面
+document.getElementById('add-page-btn').addEventListener('click', async () => {
+  const name = prompt('請輸入新頁面名稱（例如：about）：');
+  if (!name) return;
+  try {
+    await apiFetch(`/api/projects/${settingsCurrentSlug}/pages`, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    });
+    showToast(`頁面「${name}」建立成功`);
+    openSettings(settingsCurrentSlug);  // 重新整理面板
+  } catch(e) {
+    showToast('建立頁面失敗：' + e.message, 'error');
+  }
+});
+
+// ── 刪除 ─────────────────────────────────────────────────────────
+document.getElementById('delete-project-btn').addEventListener('click', () => {
+  deleteTargetSlug = settingsCurrentSlug;
+  const proj = allProjects.find(p => p.slug === settingsCurrentSlug);
+  document.getElementById('delete-project-name').textContent = proj ? proj.name : deleteTargetSlug;
+  document.getElementById('delete-modal-backdrop').classList.add('active');
+});
+
+document.getElementById('delete-cancel-btn').addEventListener('click', () => {
+  document.getElementById('delete-modal-backdrop').classList.remove('active');
+});
+
+document.getElementById('delete-confirm-btn').addEventListener('click', async () => {
+  try {
+    await apiFetch(`/api/projects/${deleteTargetSlug}`, { method: 'DELETE' });
+    document.getElementById('delete-modal-backdrop').classList.remove('active');
+    closeSettings();
+    showToast('專案已刪除');
+    await loadProjects();
+  } catch(e) {
+    showToast('刪除失敗：' + e.message, 'error');
+  }
+});
+
+document.getElementById('delete-modal-backdrop').addEventListener('click', e => {
+  if (e.target.id === 'delete-modal-backdrop')
+    document.getElementById('delete-modal-backdrop').classList.remove('active');
+});
+
+// ── Enter 鍵快速提交 ─────────────────────────────────────────────
+document.getElementById('new-project-name').addEventListener('keydown', e => {
+  if (e.key === 'Enter') document.getElementById('create-confirm-btn').click();
+});
+
+// ── 初始化 ────────────────────────────────────────────────────────
+loadProjects();
+</script>
+</body>
+</html>
diff --git a/templates/editor.html b/templates/editor.html
index e69de29..36f2a90 100644
--- a/templates/editor.html
+++ b/templates/editor.html
@@ -0,0 +1,2321 @@
+{% raw %}<!DOCTYPE html>
+<html lang="en" data-bs-theme="auto">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<link rel="icon" href="/static/Vvvebjs/favicon.ico">
+	<base href="">
+	<title>VvvebJs</title>
+
+	<link href="/static/Vvvebjs/css/editor.css" rel="stylesheet">
+</head>
+
+<body>
+
+	<div id="vvveb-builder">
+		<div id="top-panel">
+
+			<div class="btn-group float-start" role="group">
+				<a href="https://www.vvveb.com" target="_blank">
+					<img src="/static/Vvvebjs/img/logo.png" alt="Vvveb" class="float-start" id="logo">
+				</a>
+
+				<button class="btn btn-light px-1" title="Toggle file manager" id="toggle-file-manager-btn"
+					data-vvveb-action="toggleFileManager" data-bs-toggle="button" aria-pressed="false">
+					<img src="/static/Vvvebjs/libs/builder/icons/file-manager-layout.svg" width="18" height="18" alt=""
+						role="presentation">
+				</button>
+
+				<button class="btn btn-light px-1" title="Toggle left column" id="toggle-left-column-btn"
+					data-vvveb-action="toggleLeftColumn" data-bs-toggle="button" aria-pressed="false">
+					<img src="/static/Vvvebjs/libs/builder/icons/left-column-layout.svg" width="18" height="18" alt=""
+						role="presentation">
+				</button>
+
+				<button class="btn btn-light px-1" title="Toggle right column" id="toggle-right-column-btn"
+					data-vvveb-action="toggleRightColumn" data-bs-toggle="button" aria-pressed="false">
+					<img src="/static/Vvvebjs/libs/builder/icons/right-column-layout.svg" width="18" height="18" alt=""
+						role="presentation">
+				</button>
+			</div>
+
+
+			<div>
+				<div class="btn-group me-3" role="group">
+					<button class="btn btn-light" title="Undo (Ctrl/Cmd + Z)" id="undo-btn" data-vvveb-action="undo"
+						data-vvveb-shortcut="ctrl+z">
+						<i class="la la-undo"></i>
+					</button>
+
+					<button class="btn btn-light" title="Redo (Ctrl/Cmd + Shift + Y)" id="redo-btn"
+						data-vvveb-action="redo" data-vvveb-shortcut="ctrl+shift+z">
+						<i class="la la-undo la-flip-horizontal"></i>
+					</button>
+				</div>
+
+
+				<div class="btn-group me-3" role="group">
+					<button class="btn btn-light" title="Designer Mode (Free dragging)" id="designer-mode-btn"
+						data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
+						<i class="la la-hand-rock"></i>
+					</button>
+
+					<button class="btn btn-light" title="Preview" id="preview-btn" type="button" data-bs-toggle="button"
+						aria-pressed="false" data-vvveb-action="preview">
+						<i class="icon-eye-outline"></i>
+					</button>
+
+					<button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-bs-toggle="button"
+						aria-pressed="false" data-vvveb-action="fullscreen">
+						<i class="icon-expand-outline"></i>
+					</button>
+
+					<button class="btn btn-light" title="Show hidden elements" id="toggle-hidden"
+						data-bs-toggle="button" data-vvveb-action="toggleHidden" aria-pressed="false">
+						<i class="icon-scan-outline"></i>
+					</button>
+
+					<button class="btn btn-light active" title="Toggle navigator (Ctrl + Shift + L)"
+						id="toggle-tree-list" data-bs-toggle="button" data-vvveb-action="toggleTreeList"
+						aria-pressed="true">
+						<i class="icon-layers-outline"></i>
+					</button>
+
+					<button class="btn btn-light" title="Download" id="download-btn" data-vvveb-action="download"
+						data-v-download="index.html">
+						<i class="la la-download"></i>
+					</button>
+				</div>
+			</div>
+
+
+			<div class="btn-group">
+
+				<div class="me-2">
+
+					<button class="btn btn-light btn-dark-mode" data-vvveb-action="darkMode">
+						<!-- i class="la la-adjust la-lg"></i -->
+						<i class="la la-sun fs-6"></i>
+					</button>
+
+					<a href="#" class="btn btn-light px-1 btn-preview-url" target="_blank" title="View page">
+						<i class="la la-external-link-alt fs-6"></i>
+					</a>
+
+					<div class="btn-group responsive-btns" role="group">
+
+						<button type="button" class="btn btn-light btn-sm px-1 me-1" data-bs-toggle="dropdown"
+							aria-expanded="false" title="Breakpoints">
+							<i class="la la-mobile"></i>
+						</button>
+
+						<div class="dropdown-menu">
+
+							<button id="mobile-view" data-view="sm" class="btn btn-light w-100" title="Mobile view"
+								data-vvveb-action="viewport">
+								<i class="la la-mobile"></i>
+								<span>Mobile view</span>
+							</button>
+
+							<button id="tablet-view" data-view="md" class="btn btn-light w-100" title="Tablet view"
+								data-vvveb-action="viewport">
+								<i class="la la-tablet la-rotate-90"></i>
+								<span>Tablet view</span>
+							</button>
+
+							<button id="tablet-landscape-view" data-view="lg" class="btn btn-light w-100"
+								title="Tablet landscape view" data-vvveb-action="viewport">
+								<i class="la la-tablet"></i>
+								<span>Tablet landscape view</span>
+							</button>
+
+							<button id="laptop-view" data-view="xl" class="btn btn-light w-100" title="Laptop view"
+								data-vvveb-action="viewport">
+								<i class="la la-laptop"></i>
+								<span>Laptop view</span>
+							</button>
+
+							<button id="desktop-view" data-view="xxl" class="btn btn-light w-100" title="Desktop view"
+								data-vvveb-action="viewport">
+								<i class="la la-desktop"></i>
+								<span>Desktop view</span>
+							</button>
+
+						</div>
+
+						<div class="percent">
+							<input type="number" id="zoom" value="100" step="10" min="10" max="100" class="form-control"
+								data-vvveb-action="zoomChange" data-vvveb-on="change">
+						</div>
+					</div>
+
+				</div>
+
+
+				<div class="btn-group me-2" role="group">
+
+					<div class="btn-group">
+						<button class="btn btn-primary btn-icon btn-sm save-btn" title="Save changes (Ctrl + S)"
+							data-vvveb-action="saveAjax" data-vvveb-url="/api/save" data-v-vvveb-shortcut="ctrl+s"
+							disabled>
+							<span class="loading d-none">
+
+								<!-- i class="la la-save"></i -->
+								<span class="spinner-border spinner-border-sm align-middle" role="status"
+									aria-hidden="true"></span>
+								<span>Saving </span> ...
+							</span>
+
+							<span class="button-text">
+								<!-- i class="icon-save-outline"></i -->
+								<span>Save</span>
+							</span>
+						</button>
+					</div>
+
+
+				</div>
+
+			</div>
+
+		</div>
+
+
+
+		<div id="left-panel">
+			<div>
+				<div id="filemanager">
+					<div class="header">
+						<span class="text-muted lh-lg">
+							<span>Pages</span>
+						</span>
+
+						<div class="float-end" role="group">
+
+							<button class="btn btn-outline-primary btn-sm btn-icon btn-add"
+								title="New page (Ctrl + Shift + P)" id="new-file-btn" data-vvveb-action="newPage"
+								data-vvveb-shortcut="">
+								<span>Add page</span>
+								<i class="icon-add"></i>
+							</button>
+
+							<button class="btn btn-primary btn-sm btn-icon btn-add"
+								title="New section (Ctrl + Shift + S)" id="new-section" data-vvveb-action="newSection"
+								data-vvveb-shortcut="">
+
+								<i class="icon-add"></i>
+							</button>
+
+							<!--  
+									  <button class="btn btn-link text-dark p-0"  title="Delete file" id="delete-file-btn" data-vvveb-action="deletePage" data-vvveb-shortcut="">
+										  <i class="la la-trash"></i> <small>Delete</small>
+									  </button> -->
+						</div>
+
+					</div>
+
+					<div class="tree">
+						<ol>
+						</ol>
+					</div>
+				</div>
+
+
+				<div class="drag-elements">
+
+					<div class="header">
+						<ul class="nav nav-tabs  nav-fill" id="elements-tabs" role="tablist">
+							<li class="nav-item component-tab">
+								<a class="nav-link active" id="components-tab" data-bs-toggle="tab"
+									href="#components-tabs" role="tab" aria-controls="components" aria-selected="true"
+									title="Components">
+									<i class="icon-cube-outline"></i>
+									<!-- img src="../../../js/vvvebjs/icons/product.svg" height="23" -->
+									<!-- div><small>Components</small></div -->
+								</a>
+							</li>
+							<li class="nav-item sections-tab">
+								<a class="nav-link" id="sections-tab" data-bs-toggle="tab" href="#sections" role="tab"
+									aria-controls="sections" aria-selected="false" title="Sections">
+									<i class="icon-layers-outline"></i>
+									<!-- img src="../../../js/vvvebjs/icons/list_group.svg" height="23" -->
+									<!-- div><small>Sections</small></div -->
+								</a>
+							</li>
+							<!-- li class="nav-item sections-tab">
+			<a class="nav-link" id="sections-tab" data-bs-toggle="tab" href="#sections" role="tab" aria-controls="sections" aria-selected="false" title="Sections"><img src="../../../js/vvvebjs/icons/list_group.svg" width="24" height="23"> <div><small>Sections</small></div></a>
+		  </li -->
+							<li class="nav-item component-configuration-tab">
+								<a class="nav-link" id="configuration-tab" data-bs-toggle="tab" href="#configuration"
+									role="tab" aria-controls="configuration" aria-selected="false" title="Style">
+									<i class="icon-sparkles-outline"></i>
+									<!-- img src="/js/vvvebjs/icons/filters.svg" height="23"-->
+									<!-- div><small>Properties</small></div -->
+								</a>
+							</li>
+							<li class="nav-item component-properties-tab d-none">
+								<a class="nav-link" id="properties-tab" data-bs-toggle="tab" href="#properties"
+									role="tab" aria-controls="properties" aria-selected="false" title="Properties">
+									<i class="icon-settings-outline"></i>
+									<!-- img src="/js/vvvebjs/icons/filters.svg" height="23"-->
+									<!-- div><small>Properties</small></div -->
+								</a>
+							</li>
+						</ul>
+
+						<div class="tab-content">
+
+							<div class="tab-pane show active" id="components-tabs" role="tabpanel"
+								aria-labelledby="components-tab">
+
+
+								<ul class="nav nav-tabs nav-fill sections-tabs" role="tablist">
+									<li class="nav-item components-tab">
+										<a class="nav-link active" data-bs-toggle="tab" href="#components" role="tab"
+											aria-controls="components" aria-selected="true">
+											<i class="icon-square-outline"></i>
+											<div>
+												<span>Components</span>
+											</div>
+										</a>
+									</li>
+									<li class="nav-item blocks-tab">
+										<a class="nav-link" data-bs-toggle="tab" href="#blocks" role="tab"
+											aria-controls="components" aria-selected="false">
+											<i class="icon-copy-outline"></i>
+											<div>
+												<span>Blocks</span>
+											</div>
+										</a>
+									</li>
+								</ul>
+
+								<div class="tab-content">
+
+									<div class="tab-pane show active components" id="components"
+										data-section="components" role="tabpanel" aria-labelledby="components-tab">
+
+										<div class="search">
+											<div class="expand">
+												<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+												<button title="Toggle" data-vvveb-action="toggleSections">
+													<i class="la la-minus"></i>
+												</button>
+											</div>
+
+											<input class="form-control component-search" placeholder="Search components"
+												type="text" data-vvveb-action="search" data-vvveb-on="keyup">
+											<button class="clear-backspace" data-vvveb-action="clearSearch">
+												<i class="la la-times"></i>
+											</button>
+										</div>
+
+										<div class="drag-elements-sidepane sidepane">
+											<div>
+
+												<ul class="components-list" data-type="leftpanel">
+												</ul>
+
+											</div>
+										</div>
+									</div>
+
+
+
+									<div class="tab-pane blocks" id="blocks" data-section="content" role="tabpanel"
+										aria-labelledby="content-tab">
+
+										<div class="search">
+											<div class="expand">
+												<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+												<button title="Toggle" data-vvveb-action="toggleSections">
+													<i class="la la-minus"></i>
+												</button>
+											</div>
+
+											<input class="form-control block-search" placeholder="Search blocks"
+												type="text" data-vvveb-action="search" data-vvveb-on="keyup">
+											<button class="clear-backspace" data-vvveb-action="clearSearch">
+												<i class="la la-times"></i>
+											</button>
+										</div>
+
+
+										<div class="drag-elements-sidepane sidepane">
+											<div class="block-preview">
+												<img src="">
+											</div>
+											<div>
+												<ul class="blocks-list" data-type="leftpanel">
+												</ul>
+
+											</div>
+										</div>
+									</div>
+
+								</div>
+							</div>
+
+							<div class="tab-pane show sections" id="sections" role="tabpanel"
+								aria-labelledby="sections-tab">
+
+
+								<ul class="nav nav-tabs nav-fill sections-tabs" id="sections-tabs" role="tablist">
+									<li class="nav-item content-tab">
+										<a class="nav-link active" data-bs-toggle="tab" href="#sections-new-tab"
+											role="tab" aria-controls="components" aria-selected="false">
+											<i class="icon-albums-outline"></i>
+											<div>
+												<span>Sections</span>
+											</div>
+										</a>
+									</li>
+									<li class="nav-item style-tab">
+										<a class="nav-link" data-bs-toggle="tab" href="#sections-list" role="tab"
+											aria-controls="sections" aria-selected="true">
+											<i class="icon-document-text-outline"></i>
+											<div>
+												<span>Page Sections</span>
+											</div>
+										</a>
+									</li>
+								</ul>
+
+								<div class="tab-content">
+
+									<div class="tab-pane" id="sections-list" data-section="style" role="tabpanel"
+										aria-labelledby="style-tab">
+										<div class="drag-elements-sidepane sidepane">
+											<div>
+												<div class="sections-container">
+
+													<div class="section-item" draggable="true">
+														<div class="controls">
+															<div class="handle"></div>
+															<div class="info">
+																<div class="name">&nbsp;
+																	<div class="type">&nbsp;</div>
+																</div>
+															</div>
+														</div>
+													</div>
+													<div class="section-item" draggable="true">
+														<div class="controls">
+															<div class="handle"></div>
+															<div class="info">
+																<div class="name">&nbsp;
+																	<div class="type">&nbsp;</div>
+																</div>
+															</div>
+														</div>
+													</div>
+													<div class="section-item" draggable="true">
+														<div class="controls">
+															<div class="handle"></div>
+															<div class="info">
+																<div class="name">&nbsp;
+																	<div class="type">&nbsp;</div>
+																</div>
+															</div>
+														</div>
+													</div>
+													<!-- div class="section-item" draggable="true">
+											<div class="controls">
+												<div class="handle"></div>
+												<div class="info">
+													<div class="name">welcome area
+														<div class="type">section</div>
+													</div>
+												</div>
+												<div class="buttons"> <a class="delete-btn" href="" title="Remove section"><i class="la la-trash text-danger"></i></a>
+													
+													<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a> </div>
+											</div>
+											<input class="header_check" type="checkbox" id="section-components-9338">
+											<label for="section-components-9338">
+												<div class="header-arrow"></div>
+											</label>
+											<div class="tree">
+												<ol></ol>
+											</div>
+										</div -->
+
+
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div class="tab-pane show active" id="sections-new-tab" data-section="content"
+										role="tabpanel" aria-labelledby="content-tab">
+
+
+										<div class="search">
+											<div class="expand">
+												<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+												<button title="Toggle" data-vvveb-action="toggleSections">
+													<i class="la la-minus"></i>
+												</button>
+											</div>
+
+											<input class="form-control section-search" placeholder="Search sections"
+												type="text" data-vvveb-action="search" data-vvveb-on="keyup">
+											<button class="clear-backspace" data-vvveb-action="clearSearch"
+												title="Clear search">
+												<i class="la la-times"></i>
+											</button>
+										</div>
+
+
+										<div class="drag-elements-sidepane sidepane">
+											<div class="block-preview">
+												<img src="" style="display:none">
+											</div>
+											<div>
+
+												<ul class="sections-list" data-type="leftpanel">
+												</ul>
+
+											</div>
+										</div>
+
+									</div>
+
+								</div>
+
+							</div>
+
+							<div class="tab-pane" id="properties" role="tabpanel" aria-labelledby="properties-tab">
+								<div class="component-properties-sidepane">
+									<div>
+										<div class="component-properties">
+											<ul class="nav nav-tabs nav-fill" id="properties-tabs" role="tablist">
+												<li class="nav-item content-tab">
+													<a class="nav-link content-tab active" data-bs-toggle="tab"
+														href="#content-left-panel-tab" role="tab"
+														aria-controls="components" aria-selected="true">
+														<i class="icon-albums-outline"></i>
+														<span>Content</span>
+													</a>
+												</li>
+												<li class="nav-item style-tab">
+													<a class="nav-link" data-bs-toggle="tab"
+														href="#style-left-panel-tab" role="tab" aria-controls="style"
+														aria-selected="false">
+														<i class="icon-color-fill-outline"></i>
+														<span>Style</span>
+													</a>
+												</li>
+												<li class="nav-item advanced-tab">
+													<a class="nav-link" data-bs-toggle="tab"
+														href="#advanced-left-panel-tab" role="tab"
+														aria-controls="advanced" aria-selected="false">
+														<i class="icon-settings-outline"></i>
+														<span>Advanced</span>
+													</a>
+												</li>
+											</ul>
+
+											<div class="tab-content" data-offset="35">
+												<div class="tab-pane show active" id="content-left-panel-tab"
+													data-section="content" role="tabpanel"
+													aria-labelledby="content-tab">
+													<div class="alert alert-dismissible fade show alert-light m-3"
+														role="alert" style="">
+														<button type="button" class="btn-close" data-bs-dismiss="alert"
+															aria-label="Close"></button>
+														<strong>No selected element!</strong>
+														<br> Click on an element to edit.
+													</div>
+												</div>
+
+												<div class="tab-pane show" id="style-left-panel-tab"
+													data-section="style" role="tabpanel" aria-labelledby="style-tab">
+													<div class="pb-2 px-2">
+														<div class="justify-content-end d-flex">
+															<select class="form-select w-50"
+																data-vvveb-action="setState" data-vvveb-on="change">
+																<option value=""> - State - </option>
+																<option value="hover">hover</option>
+																<option value="active">active</option>
+																<option value="nth-of-type(2n)">nth-of-type(2n)</option>
+															</select>
+														</div>
+													</div>
+												</div>
+
+												<div class="tab-pane show" id="advanced-left-panel-tab"
+													data-section="advanced" role="tabpanel"
+													aria-labelledby="advanced-tab">
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div class="tab-pane" id="configuration" role="tabpanel"
+								aria-labelledby="configuration-tab">
+
+								<ul class="nav nav-tabs nav-fill sections-tabs" id="vars-tabs" role="tablist">
+									<li class="nav-item styles-tab">
+										<a class="nav-link active" data-bs-toggle="tab" href="#styles-tab" role="tab"
+											aria-controls="styles" aria-selected="true">
+											<i class="icon-color-wand-outline"></i>
+											<div>
+												<span>Styles</span>
+											</div>
+										</a>
+									</li>
+									<li class="nav-item vars-tab">
+										<a class="nav-link" data-bs-toggle="tab" href="#vars-tab" role="tab"
+											aria-controls="components" aria-selected="false">
+											<i class="icon-brush-outline"></i>
+											<div>
+												<span>Variables</span>
+											</div>
+										</a>
+									</li>
+									<!--
+					  <li class="nav-item css-tab">
+						<a class="nav-link" data-bs-toggle="tab" href="#css-tab" role="tab" aria-controls="css" aria-selected="true">
+							<i class="icon-code-slash-outline"></i> <div><span>Css</span></div></a>
+					  </li>
+					  -->
+								</ul>
+
+								<div class="tab-content">
+
+									<div class="tab-pane show active styles" id="styles-tab" data-section="styles"
+										role="tabpanel" aria-labelledby="styles-tab">
+
+										<div class="search">
+											<div class="expand">
+												<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+												<button title="Toggle" data-vvveb-action="toggleSections">
+													<i class="la la-minus"></i>
+												</button>
+											</div>
+
+											<input class="form-control block-search" placeholder="Search styles"
+												type="text" data-vvveb-action="search" data-vvveb-on="keyup">
+											<button class="clear-backspace" data-vvveb-action="clearSearch">
+												<i class="la la-times"></i>
+											</button>
+										</div>
+
+
+										<div class="drag-elements-sidepane sidepane">
+											<div class="style-preview">
+												<img src="">
+											</div>
+											<div>
+												<ul class="styles-list" data-type="leftpanel">
+												</ul>
+
+											</div>
+										</div>
+
+									</div>
+
+									<div class="tab-pane" id="vars-tab" data-section="vars" role="tabpanel"
+										aria-labelledby="vars-tab">
+
+										<div class="drag-elements-sidepane sidepane">
+											<div>
+												<div class="component-properties d-block">
+													<!-- color palette -->
+													<!--
+											<label class="header" data-header="default" for="header_pallette"><span>Global styles</span>
+					<div class="header-arrow"></div>
+											</label> -->
+													<input class="header_check" type="checkbox" checked
+														id="header_pallette">
+													<div class="tab-pane section px-0" data-section="content">
+
+													</div>
+
+												</div>
+											</div>
+										</div>
+									</div>
+									<!--	
+						 <div class="tab-pane" id="css-tab" data-section="css" role="tabpanel" aria-labelledby="css-tab">
+							<div class="drag-elements-sidepane sidepane">
+							<div data-offset="80">
+								<textarea id="css-editor" class="form-control" rows="24"></textarea>
+							</div>
+							</div>
+						 </div>
+						-->
+								</div>
+
+
+							</div><!-- end configuration tab -->
+
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+
+
+		<div id="canvas">
+			<div id="iframe-wrapper">
+				<div id="iframe-layer">
+
+					<div class="loading-message active">
+						<div class="animation-container">
+							<div class="dot dot-1"></div>
+							<div class="dot dot-2"></div>
+							<div class="dot dot-3"></div>
+						</div>
+
+						<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+							<defs>
+								<filter id="goo">
+									<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+									<feColorMatrix in="blur" mode="matrix"
+										values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" />
+								</filter>
+							</defs>
+						</svg>
+						<!-- https://codepen.io/Izumenko/pen/MpWyXK -->
+					</div>
+
+					<div id="highlight-box">
+						<div id="highlight-name">
+							<span class="name"></span>
+							<span class="type"></span>
+						</div>
+
+						<div id="section-actions">
+							<a id="add-section-btn" href="" title="Add element">
+								<i class="la la-plus"></i>
+							</a>
+						</div>
+					</div>
+
+					<div id="select-box">
+
+						<div id="wysiwyg-editor" class="default-editor">
+							<!--
+					<a id="bold-btn" href="" title="Bold">
+						<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
+							<path clip-rule="evenodd" d="M56 40V216H148C176.719 216 200 192.719 200 164C200 147.849 192.637 133.418 181.084 123.88C187.926 115.076 192 104.014 192 92C192 63.2812 168.719 40 140 40H56ZM88 144V184H148C159.046 184 168 175.046 168 164C168 152.954 159.046 144 148 144H88ZM88 112V72H140C151.046 72 160 80.9543 160 92C160 103.046 151.046 112 140 112H88Z" fill="#252525" fill-rule="evenodd"/>
+						</svg>	
+					</a>
+					<a id="italic-btn" href="" title="Italic">
+						<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
+							<path d="M202 40H84V64H126.182L89.8182 192H54V216H172V192H129.818L166.182 64H202V40Z" fill="#252525"/>
+						</svg>											
+					</a>
+					<a id="underline-btn" href="" title="Underline">
+						<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
+							<path clip-rule="evenodd" d="M88 40H60V108.004C60 145.56 90.4446 176.004 128 176.004C165.555 176.004 196 145.56 196 108.004V40H168V108C168 130.091 150.091 148 128 148C105.909 148 88 130.091 88 108V40ZM204 216V192H52V216H204Z" fill="#252525" fill-rule="evenodd"/>
+						</svg>
+					</a>
+					-->
+
+							<a id="bold-btn" class="hint" href="" title="Bold" aria-label="Bold">
+								<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+									<path d="M6,4h8a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="currentColor"
+										stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
+									<path d="M6,12h9a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="currentColor"
+										stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
+								</svg>
+							</a>
+							<a id="italic-btn" class="hint" href="" title="Italic" aria-label="Italic">
+								<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+									<line fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2" x1="19" x2="10" y1="4" y2="4" />
+									<line fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2" x1="14" x2="5" y1="20" y2="20" />
+									<line fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2" x1="15" x2="9" y1="4" y2="20" />
+								</svg>
+							</a>
+							<a id="underline-btn" class="hint" href="" title="Underline" aria-label="Underline">
+								<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+									<path d="M6,4v7a6,6,0,0,0,6,6h0a6,6,0,0,0,6-6V4" fill="none" stroke="currentColor"
+										stroke-linecap="round" stroke-linejoin="round" stroke-width="2" y1="2" y2="2" />
+									<line fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2" x1="4" x2="20" y1="22" y2="22" />
+								</svg>
+							</a>
+
+
+							<a id="strike-btn" class="hint" href="" title="Strikeout" aria-label="Strikeout">
+								<del>S</del>
+							</a>
+
+							<div class="dropdown">
+								<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton"
+									data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+									<span class="hint" aria-label="Text align">
+										<i class="la la-align-left"></i>
+									</span>
+								</button>
+
+								<div id="justify-btn" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+									<a class="dropdown-item" href="#" data-value="Left">
+										<i class="la la-lg la-align-left"></i> Align Left
+									</a>
+									<a class="dropdown-item" href="#" data-value="Center">
+										<i class="la la-lg la-align-center"></i> Align Center
+									</a>
+									<a class="dropdown-item" href="#" data-value="Right">
+										<i class="la la-lg la-align-right"></i> Align Right
+									</a>
+									<a class="dropdown-item" href="#" data-value="Full">
+										<i class="la la-lg la-align-justify"></i> Align Justify
+									</a>
+								</div>
+							</div>
+
+							<div class="separator"></div>
+
+							<a id="link-btn" class="hint" href="" title="Create link" aria-label="Create link">
+								<i class="la la-link">
+								</i>
+							</a>
+
+							<div class="separator"></div>
+
+							<input id="fore-color" name="color" type="color" aria-label="Text color"
+								pattern="#[a-f0-9]{6}" class="form-control form-control-color hint">
+							<input id="back-color" name="background-color" type="color" aria-label="Background color"
+								pattern="#[a-f0-9]{6}" class="form-control form-control-color hint">
+
+							<div class="separator"></div>
+
+							<select id="font-size" class="form-select" aria-label="Font size">
+								<option value="">- Font size -</option>
+								<option value="8px">8 px</option>
+								<option value="9px">9 px</option>
+								<option value="10px">10 px</option>
+								<option value="11px">11 px</option>
+								<option value="12px">12 px</option>
+								<option value="13px">13 px</option>
+								<option value="14px">14 px</option>
+								<option value="15px">15 px</option>
+								<option value="16px">16 px</option>
+								<option value="17px">17 px</option>
+								<option value="18px">18 px</option>
+								<option value="19px">19 px</option>
+								<option value="20px">20 px</option>
+								<option value="21px">21 px</option>
+								<option value="22px">22 px</option>
+								<option value="23px">23 px</option>
+								<option value="24px">24 px</option>
+								<option value="25px">25 px</option>
+								<option value="26px">26 px</option>
+								<option value="27px">27 px</option>
+								<option value="28px">28 px</option>
+							</select>
+
+							<div class="separator"></div>
+
+							<select id="font-family" class="form-select" title="Font family">
+								<option value=""> - Font family - </option>
+								<optgroup label="System default">
+									<option value="Arial, Helvetica, sans-serif">Arial</option>
+									<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Grande
+									</option>
+									<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino
+										Linotype</option>
+									<option value="'Times New Roman', Times, serif">Times New Roman</option>
+									<option value="Georgia, serif">Georgia, serif</option>
+									<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
+									<option value="'Comic Sans MS', cursive, sans-serif">Comic Sans</option>
+									<option value="Verdana, Geneva, sans-serif">Verdana</option>
+									<option value="Impact, Charcoal, sans-serif">Impact</option>
+									<option value="'Arial Black', Gadget, sans-serif">Arial Black</option>
+									<option value="'Trebuchet MS', Helvetica, sans-serif">Trebuchet</option>
+									<option value="'Courier New', Courier, monospace">Courier New</option>
+									<option value="'Brush Script MT', sans-serif">Brush Script</option>
+								</optgroup>
+							</select>
+						</div>
+
+						<div id="select-actions">
+							<a id="drag-btn" href="" title="Drag element">
+								<i class="la la-arrows-alt"></i>
+							</a>
+							<a id="parent-btn" href="" title="Select parent" class="la-rotate-180">
+								<i class="la la-level-up-alt"></i>
+							</a>
+
+							<a id="up-btn" href="" title="Move element up">
+								<i class="la la-arrow-up"></i>
+							</a>
+							<a id="down-btn" href="" title="Move element down">
+								<i class="la la-arrow-down"></i>
+							</a>
+
+							<a id="edit-code-btn" href="" title="Edit html code">
+								<i class="icon-code-outline"></i>
+							</a>
+							<a id="translate-code-btn" href="" title="Translate text">
+								<i class="icon-language-outline"></i>
+							</a>
+
+							<a id="save-reusable-btn" href="" title="Save as reusable" class="mx-2">
+								<i class="icon-save-outline"></i>
+							</a>
+							<a id="clone-btn" href="" title="Clone element">
+								<i class="icon-copy-outline"></i>
+							</a>
+							<a id="delete-btn" href="" title="Remove element">
+								<i class="icon-trash-outline"></i>
+							</a>
+						</div>
+
+						<div class="resize">
+							<!-- top -->
+							<div class="top-left">
+							</div>
+							<div class="top-center">
+							</div>
+							<div class="top-right">
+							</div>
+							<!-- center -->
+							<div class="center-left">
+							</div>
+							<div class="center-right">
+							</div>
+							<!-- bottom -->
+							<div class="bottom-left">
+							</div>
+							<div class="bottom-center">
+							</div>
+							<div class="bottom-right">
+							</div>
+						</div>
+
+					</div>
+
+
+					<div id="drop-highlight-box">
+					</div>
+				</div>
+
+
+				<iframe src="" id="iframe1">
+				</iframe>
+			</div>
+
+			<!-- add section box -->
+			<div id="add-section-box" class="drag-elements">
+
+				<div class="header">
+					<ul class="nav nav-tabs bg-secondary bg-opacity-10" id="box-elements-tabs" role="tablist">
+						<li class="nav-item component-tab">
+							<a class="nav-link px-3 active" id="box-components-tab" data-bs-toggle="tab"
+								href="#box-components" role="tab" aria-controls="components" aria-selected="true">
+								<i class="icon-cube-outline"></i>
+								<small>Components</small>
+							</a>
+						</li>
+						<li class="nav-item blocks-tab">
+							<a class="nav-link px-3" id="box-blocks-tab" data-bs-toggle="tab" href="#box-blocks"
+								role="tab" aria-controls="blocks" aria-selected="false">
+								<i class="icon-copy-outline"></i>
+								<small>Blocks</small>
+							</a>
+						</li>
+						<li class="nav-item sections-tab">
+							<a class="nav-link px-3" id="box-sections-tab" data-bs-toggle="tab" href="#box-sections"
+								role="tab" aria-controls="sections" aria-selected="false">
+								<i class="icon-layers-outline"></i>
+								<small>Sections</small>
+							</a>
+						</li>
+						<!--
+				  <li class="nav-item component-properties-tab" style="display:none">
+					<a class="nav-link" id="box-properties-tab" data-bs-toggle="tab" href="#box-properties" role="tab" aria-controls="properties" aria-selected="false"><i class="la la-lg la-cog"></i> <div><small>Properties</small></div></a>
+				  </li>
+				  -->
+					</ul>
+
+					<div class="section-box-actions">
+
+						<div id="close-section-btn" class="btn btn-outline-secondary border-0 p-1 py-0 float-end">
+							<i class="la la-times"></i>
+						</div>
+
+						<div class="me-4 small float-end">
+
+							<div class="form-check d-inline-block small me-1">
+								<input type="radio" id="add-section-insert-mode-after" value="after" checked="checked"
+									name="add-section-insert-mode" class="form-check-input">
+								<label class="form-check-label" for="add-section-insert-mode-after">After</label>
+							</div>
+
+							<div class="form-check d-inline-block small">
+								<input type="radio" id="add-section-insert-mode-inside" value="inside"
+									name="add-section-insert-mode" class="form-check-input">
+								<label class="form-check-label" for="add-section-insert-mode-inside">Inside</label>
+							</div>
+
+						</div>
+
+					</div>
+
+					<div class="tab-content">
+						<div class="tab-pane show active" id="box-components" role="tabpanel"
+							aria-labelledby="components-tab">
+
+							<div class="search">
+								<div class="expand">
+									<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+									<button title="Toggle" data-vvveb-action="toggleSections">
+										<i class="la la-minus"></i>
+									</button>
+								</div>
+
+								<input class="form-control component-search" placeholder="Search components" type="text"
+									data-vvveb-action="search" data-vvveb-on="keyup">
+								<button class="clear-backspace" data-vvveb-action="clearSearch">
+									<i class="la la-times"></i>
+								</button>
+							</div>
+
+							<div class="overflow-y-auto mb-5">
+								<div>
+
+									<ul class="components-list" data-type="addbox">
+									</ul>
+
+								</div>
+							</div>
+
+						</div>
+						<div class="tab-pane" id="box-blocks" role="tabpanel" aria-labelledby="blocks-tab">
+
+							<div class="search">
+								<div class="expand">
+									<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button-->
+									<button title="Toggle" data-vvveb-action="toggleSections">
+										<i class="la la-minus"></i>
+									</button>
+								</div>
+
+								<input class="form-control block-search" placeholder="Search blocks" type="text"
+									data-vvveb-action="search" data-vvveb-on="keyup">
+								<button class="clear-backspace" data-vvveb-action="clearSearch">
+									<i class="la la-times"></i>
+								</button>
+							</div>
+
+							<div class="overflow-y-auto mb-5">
+								<div>
+
+									<ul class="blocks-list" data-type="addbox">
+									</ul>
+
+								</div>
+							</div>
+
+						</div>
+
+						<div class="tab-pane" id="box-sections" role="tabpanel" aria-labelledby="sections-tab">
+
+							<div class="search">
+								<div class="expand">
+									<!-- button class="text-sm" title="Expand All" data-vvveb-action="expand"><i class="la la-plus"></i></button -->
+									<button title="Toggle" data-vvveb-action="toggleSections">
+										<i class="la la-minus"></i>
+									</button>
+								</div>
+
+								<input class="form-control section-search" placeholder="Search sections" type="text"
+									data-vvveb-action="search" data-vvveb-on="keyup">
+								<button class="clear-backspace" data-vvveb-action="clearSearch">
+									<i class="la la-times"></i>
+								</button>
+							</div>
+
+							<div class="overflow-y-auto mb-5">
+								<div>
+
+									<ul class="sections-list" data-type="addbox">
+									</ul>
+
+								</div>
+							</div>
+
+						</div>
+
+						<!-- div class="tab-pane" id="box-properties" role="tabpanel" aria-labelledby="blocks-tab">
+						<div class="component-properties-sidepane">
+							<div>
+								<div class="component-properties">
+									<div class="mt-4 text-center">Click on an element to edit.</div>
+								</div>
+							</div>
+						</div>
+					</div -->
+					</div>
+				</div>
+
+			</div>
+			<!-- //add section box -->
+
+
+			<div id="tree-list">
+				<div class="header">
+					<div>Navigator</div>
+					<span>
+						<button class="btn btn-sm" data-vvveb-action="treeListRight" aria-pressed="true">
+							<i class="icon-stop-outline"></i>
+						</button>
+						<button class="btn btn-sm" data-vvveb-action="toggleTreeList" aria-pressed="true">
+							<i class="icon-close"></i>
+						</button>
+					</span>
+				</div>
+				<div class="tree">
+					<ol>
+						<!--
+				<li data-component="Products" class="file">							
+					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>							
+					<input type="checkbox" id="idNaN">
+				</li>
+				<li data-component="Posts" class="file">							
+					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>							
+					<input type="checkbox" id="idNaN">
+				</li>
+				-->
+					</ol>
+				</div>
+			</div>
+
+		</div>
+
+
+		<div id="right-panel">
+			<div class="component-properties">
+
+				<ul class="nav nav-tabs nav-fill" id="properties-tabs" role="tablist">
+					<li class="nav-item content-tab">
+						<a class="nav-link active" data-bs-toggle="tab" href="#content-tab" role="tab"
+							aria-controls="components" aria-selected="true">
+							<i class="icon-albums-outline"></i>
+							<span>Content</span>
+						</a>
+					</li>
+					<li class="nav-item style-tab">
+						<a class="nav-link" data-bs-toggle="tab" href="#style-tab" role="tab" aria-controls="blocks"
+							aria-selected="false">
+							<i class="icon-color-fill-outline"></i>
+							<span>Style</span>
+						</a>
+					</li>
+					<li class="nav-item advanced-tab">
+						<a class="nav-link" data-bs-toggle="tab" href="#advanced-tab" role="tab" aria-controls="blocks"
+							aria-selected="false">
+							<i class="icon-settings-outline"></i>
+							<span>Advanced</span>
+						</a>
+					</li>
+				</ul>
+
+				<div class="tab-content">
+					<div class="tab-pane show active" id="content-tab" data-section="content" role="tabpanel"
+						aria-labelledby="content-tab">
+						<div class="alert alert-dismissible fade show alert-light m-3" role="alert">
+							<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+							<strong>No selected element!</strong>
+							<br> Click on an element to edit.
+						</div>
+					</div>
+
+					<div class="tab-pane show" id="style-tab" data-section="style" role="tabpanel"
+						aria-labelledby="style-tab">
+						<div class="pb-2 px-2">
+							<div class="justify-content-end d-flex">
+								<select class="form-select w-50" data-vvveb-action="setState" data-vvveb-on="change">
+									<option value=""> - State - </option>
+									<option value="hover">hover</option>
+									<option value="active">active</option>
+									<option value="nth-of-type(2n)">nth-of-type(2n)</option>
+								</select>
+							</div>
+						</div>
+					</div>
+
+					<div class="tab-pane show" id="advanced-tab" data-section="advanced" role="tabpanel"
+						aria-labelledby="advanced-tab">
+						<!-- 
+						<div class="alert alert-dismissible fade show alert-info m-3" role="alert" style="">		  
+							<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>		  
+							<strong>No advanced properties!</strong><br> This component does not have advanced properties.		
+						</div>
+						-->
+					</div>
+
+
+				</div>
+
+
+			</div>
+		</div>
+
+
+		<div id="bottom-panel">
+
+			<div>
+
+				<div class="breadcrumb-navigator" style="--bs-breadcrumb-divider: '>';">
+
+					<ol class="breadcrumb">
+						<li class="breadcrumb-item">
+							<a href="#">body</a>
+						</li>
+						<li class="breadcrumb-item">
+							<a href="#">section</a>
+						</li>
+						<li class="breadcrumb-item">
+							<a href="#">img</a>
+						</li>
+					</ol>
+
+
+					<ul class="nav nav-tabs nav-fill d-none" id="code-tabs" role="tablist">
+						<li class="nav-item styles-tab" role="presentation">
+							<a class="nav-link active" data-bs-toggle="tab" href="#code-tab" role="tab"
+								aria-controls="code" aria-selected="false" tabindex="-1">
+								<i class="icon-code-slash-outline"></i>
+								<span>Html</span>
+							</a>
+						</li>
+						<li class="nav-item css-tab" role="presentation">
+							<a class="nav-link" data-bs-toggle="tab" href="#csscode-tab" role="tab" aria-controls="css"
+								aria-selected="true">
+								<i class="icon-color-fill-outline"></i>
+								<span>Css</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+
+
+				<div class="btn-group" role="group">
+
+					<div id="toggleEditorJsExecute" class="form-check mt-1" style="display:none">
+						<input type="checkbox" class="form-check-input" id="runjs" name="runjs"
+							data-vvveb-action="toggleEditorJsExecute">
+						<label class="form-check-label" for="runjs">
+							<small>Run javascript code on edit</small>
+						</label>
+					</div>
+
+
+					<button id="code-editor-btn" data-view="mobile" class="btn btn-sm btn-outline-secondary border-0"
+						title="Code editor (Ctrl + E)" data-vvveb-action="toggleEditor">
+						<i class="la la-code"></i> Code editor
+					</button>
+
+
+				</div>
+
+			</div>
+
+			<div id="vvveb-code-editor">
+				<div class="tab-content">
+					<div class="tab-pane active" id="code-tab" data-section="code" role="tabpanel"
+						aria-labelledby="code-tab">
+						<textarea class="form-control"></textarea>
+					</div>
+
+					<div class="tab-pane" id="csscode-tab" data-section="csscode" role="tabpanel"
+						aria-labelledby="csscode-tab">
+						<textarea id="css-editor" class="form-control" rows="24"></textarea>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+	</div>
+
+
+<!-- templates -->
+
+<script id="vvveb-input-textinput" type="text/html">
+	
+	<div>
+		<input name="{%=key%}" type="text" class="form-control"/>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-textareainput" type="text/html">
+	
+	<div>
+		<textarea name="{%=key%}" {% if (typeof rows !== 'undefined') { %} rows="{%=rows%}" {% } else { %} rows="3" {% } %} class="form-control"></textarea> 
+	</div>
+	
+</script>
+
+<script id="vvveb-input-checkboxinput" type="text/html">
+	
+	<div class="form-check{% if (typeof className !== 'undefined') { %} {%=className%}{% } %}">
+		  <input name="{%=key%}" class="form-check-input" type="checkbox" id="{%=key%}_check">
+		  <label class="form-check-label" for="{%=key%}_check">{% if (typeof text !== 'undefined') { %} {%=text%} {% } %}</label>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-radioinput" type="text/html">
+	
+	<div>
+	
+		{% for ( var i = 0; i < options.length; i++ ) { %}
+
+		<label class="form-check-input  {% if (typeof inline !== 'undefined' && inline == true) { %}custom-control-inline{% } %}"  title="{%=options[i].title%}">
+		  <input name="{%=key%}" class="form-check-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}>
+		  <label class="form-check-label" for="{%=key%}{%=i%}">{%=options[i].text%}</label>
+		</label>
+
+		{% } %}
+
+	</div>
+	
+</script>
+
+<script id="vvveb-input-radiobuttoninput" type="text/html">
+	
+	<div class="btn-group btn-group-sm {%if (extraclass) { %}{%=extraclass%}{% } %}" role="group">
+		{% var namespace = 'rb-' + Math.floor(Math.random() * 100); %}
+	
+		{% for ( var i = 0; i < options.length; i++ ) { %}
+
+		<input name="{%=key%}" class="btn-check" type="radio" value="{%=options[i].value%}" id="{%=namespace%}{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %} autocomplete="off">
+		<label class="btn btn-outline-secondary {%if (options[i].extraclass) { %}{%=options[i].extraclass%}{% } %}" for="{%=namespace%}{%=key%}{%=i%}" title="{%=options[i].title%}">
+		  {%if (options[i].icon) { %}<i class="{%=options[i].icon%}"></i>{% } %}
+		  {%=options[i].text%}
+		</label>
+
+		{% } %}
+				
+	</div>
+	
+</script>
+
+
+<script id="vvveb-input-toggle" type="text/html">
+	
+    <div class="form-check form-switch {% if (typeof className !== 'undefined') { %} {%=className%}{% } %}">
+        <input 
+		type="checkbox" 
+		name="{%=key%}" 
+		value="{%=on%}" 
+		{%if (off !== null) { %} data-value-off="{%=off%}" {% } %}
+		{%if (on !== null) { %} data-value-on="{%=on%}" {% } %} 
+		class="form-check-input" type="checkbox" role="switch"
+		id="{%=key%}">
+        <label class="form-check-label"for="{%=key%}">
+        </label>
+    </div>
+	
+</script>
+
+<script id="vvveb-input-header" type="text/html">
+
+		<h6 class="header">{%=header%}</h6>
+	
+</script>
+
+	
+<script id="vvveb-input-select" type="text/html">
+
+	<div>
+
+		<select class="form-select" name="{%=key%}">
+			{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
+				{% if (options[i].optgroup) {  %}
+					{% if (optgroup) {  %}
+						</optgroup>
+					{% } %}
+					<optgroup label="{%=options[i].optgroup%}">
+				{% optgroup = true; } else { %}
+			<option value="{%=options[i].value%}" 
+				{% 
+					for (attr in options[i]) {
+							if (attr != "value" && attr != "text") {
+						 %} 
+							{%=attr%}={%=options[i][attr]%} 
+						{% } 
+					} %}>
+			{%=options[i].text%}</option>
+			{% } } %}
+		</select>
+	
+	</div>
+	
+</script>
+
+<script id="vvveb-input-icon-select" type="text/html">
+
+	<div class="input-list-select">
+		
+		<div class="elements">
+			<div class="row">
+				{% for ( var i = 0; i < options.length; i++ ) { %}
+				<div class="col">
+					<div class="element">
+						{%=options[i].value%}
+						<label>{%=options[i].text%}</label>
+					</div>
+				</div>
+				{% } %}
+			</div>
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-html-list-select" type="text/html">
+
+	<div class="input-html-list-select">
+		
+		<div class="current-element">
+		</div>
+		
+		<div class="popup">
+			<select class="form-select">
+				{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
+					{% if (options[i].optgroup) {  %}
+						{% if (optgroup) {  %}
+							</optgroup>
+						{% } %}
+						<optgroup label="{%=options[i].optgroup%}">
+					{% optgroup = true; } else { %}
+					<option value="{%=options[i].value%}">{%=options[i].text%}</option>
+				{% } } %}
+			</select>
+			
+			<div class="search">
+				  <input class="form-control search" placeholder="Search elements" type="text">
+				  <button class="clear-backspace">
+					  <i class="la la-times"></i>
+				  </button>
+			</div>
+			
+			<div class="elements">
+				{%=elements%}
+			</div>
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-html-list-dropdown" type="text/html">
+
+	<div class="input-html-list-select" {% if (typeof id !== "undefined") { %} id={%=id%} {% } %}>
+		
+		<div class="current-element">
+		
+		</div>
+		
+		<div class="popup">
+			<select class="form-select">
+				{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
+					{% if (options[i].optgroup) {  %}
+						{% if (optgroup) {  %}
+							</optgroup>
+						{% } %}
+						<optgroup label="{%=options[i].optgroup%}">
+					{% optgroup = true; } else { %}
+					<option value="{%=options[i].value%}">{%=options[i].text%}</option>
+				{% } } %}
+			</select>
+
+		   <div class="search">
+				  <input class="form-control search" placeholder="Search elements" type="text">
+				  <button class="clear-backspace">
+					  <i class="la la-times"></i>
+				  </button>
+			</div>
+			
+			<div class="elements">
+					{%=elements%}
+			</div>
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-dateinput" type="text/html">
+	
+	<div>
+		<input name="{%=key%}" type="date" class="form-control" 
+			{% if (typeof min_date === 'undefined') { %} min="{%=min_date%}" {% } %} {% if (typeof max_date === 'undefined') { %} max="{%=max_date%}" {% } %}
+		/>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-listinput" type="text/html">
+
+	<div class="sections-container p-0">
+
+		{% for ( var i = 0; i < options.length; i++ ) { %}
+		<div class="section-item" draggable="true">
+			<div class="controls">
+				<div class="handle"></div>
+				<div class="info">
+					<div class="name">{%=options[i].name%}
+						<div class="type">{%=options[i].type%}</div>
+					</div>
+				</div>
+				<div class="buttons">
+					<a class="delete-btn" href="" title="Remove section"><i class="icon-trash-outline text-danger"></i></a>
+					<!-- 
+					<a class="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a>
+					<a class="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a>
+					<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a>
+					-->
+			</div>
+			</div>
+
+
+			<input class="header_check" type="checkbox" id="section-components-{%=key%}-{%=i%}">
+
+			<label for="section-components-{%=key%}-{%=i%}"> 
+				<div class="header-arrow"></div>
+			</label>
+			
+			<div class="tree">
+				{%=options[i].name%}
+			</div>
+		</div>
+		
+
+
+
+		{% } %}
+
+
+		{% if (typeof hide_remove === 'undefined') { %}
+		<div class="mt-3">
+		
+			<button class="btn btn-sm btn-outline-primary btn-new btn-icon">
+				<i class="la la-plus la-lg"></i> Add new
+			</button>
+			
+		</div>
+		{% } %}
+			
+	</div>
+	
+</script>
+
+<script id="vvveb-input-grid" type="text/html">
+
+	<div class="row g-2">
+		<div class="col-6">
+		
+			<label class="form-label">Extra small</label>
+			<select class="form-select" name="col" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col !== 'undefined') && col == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+
+				
+		<div class="col-6">
+			<label class="form-label">Small</label>
+			<select class="form-select" name="col-sm" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col_sm !== 'undefined') && col_sm == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+		
+		<div class="col-6">
+			<label class="form-label">Medium</label>
+			<select class="form-select" name="col-md" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col_md !== 'undefined') && col_md == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+		
+		<div class="col-6">
+			<label class="form-label">Large</label>
+			<select class="form-select" name="col-lg" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col_lg !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+		
+		
+		<div class="col-6">
+			<label class="form-label">Extra large </label>
+			<select class="form-select" name="col-xl" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col_xl !== 'undefined') && col_xl == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+		
+		<div class="col-6">
+			<label class="form-label">Extra extra large</label>
+			<select class="form-select" name="col-xxl" autocomplete="off">
+				
+				<option value="">None</option>
+				{% for ( var i = 1; i <= 12; i++ ) { %}
+				<option value="{%=i%}" {% if ((typeof col_xxl !== 'undefined') && col_xxl == i) { %} selected {% } %}>{%=i%}</option>
+				{% } %}
+				
+			</select>
+		</div>
+		
+		{% if (typeof hide_remove === 'undefined') { %}
+		<div class="col-12">
+		
+			<button class="btn btn-sm btn-outline-light text-danger">
+				<i class="la la-trash la-lg"></i> Remove
+			</button>
+			
+		</div>
+		{% } %}
+		
+	</div>
+	
+</script>
+
+<script id="vvveb-input-textvalue" type="text/html">
+	
+	<div class="row">
+		<div class="col-6 mb-1">
+			<label class="form-label">Value</label>
+			<input name="value" type="text" value="{%=value%}" class="form-control" autocomplete="off" />
+		</div>
+
+		<div class="col-6 mb-1">
+			<label class="form-label">Text</label>
+			<input name="text" type="text" value="{%=text%}" class="form-control" autocomplete="off" />
+		</div>
+
+		{% if (typeof hide_remove === 'undefined') { %}
+		<div class="col-12">
+		
+			<button class="btn btn-sm btn-outline-light text-danger">
+				<i class="la la-trash la-lg"></i> Remove
+			</button>
+			
+		</div>
+		{% } %}
+
+	</div>
+	
+</script>
+
+<script id="vvveb-input-rangeinput" type="text/html">
+	
+	<div class="input-range">
+		
+		<input name="{%=key%}" type="range" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-range" data-input-value/>
+		<input name="{%=key%}" type="number" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-control" data-input-value/>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-imageinput" type="text/html">
+	
+	<div>
+		<input name="{%=key%}" type="text" class="form-control"/>
+		<input name="file" type="file" class="form-control"/>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-imageinput-gallery" type="text/html">
+	
+	<div>
+		<img id="thumb-{%=key%}" class="img-thumbnail p-0" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}" style="cursor:pointer" src="" width="225" height="225">
+		<input name="{%=key%}" type="text" class="form-control mt-1" id="input-{%=key%}"/>
+		<button name="button" class="btn btn-outline-primary btn-sm btn-icon mt-2 w-100" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}"><i class="la la-image la-lg me-1"></i><span>Set image</span></button>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-svginput-gallery" type="text/html">
+	
+	<div>
+		<svg id="thumb-{%=key%}" class="img-thumbnail p-0" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}" style="cursor:pointer" src="" width="225" height="225"></svg>
+		<input name="{%=key%}" type="text" class="form-control mt-1 d-none" id="input-{%=key%}"/>
+		<button name="button" class="btn btn-outline-primary btn-sm btn-icon mt-2 w-100" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}"><i class="la la-image la-lg me-1"></i><span>Set image</span></button>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-videoinput-gallery" type="text/html">
+	
+	<div>
+		<video id="thumb-v{%=key%}" class="img-thumbnail p-0" data-target-input="#input-v{%=key%}" data-target-thumb="#thumb-v{%=key%}" style="cursor:pointer" src="" width="225" height="225" playsinline loop muted controls></video>
+		<input name="v{%=key%}" type="text" class="form-control mt-1" id="input-v{%=key%}"/>
+		<button name="button" class="btn btn-secondary btn-sm btn-icon mt-2 w-100" data-target-input="#vinput-v{%=key%}" data-target-thumb="#thumb-v{%=key%}"><i class="la la-video la-lg"></i><span>Set video</span></button>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-colorinput-native" type="text/html">
+
+	<div>
+		<input name="{%=key%}" {%  if (typeof palette !== 'undefined') { %} list="{%=key%}-color-palette" {% } %} type="color" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %}  pattern="#[a-f0-9]{6}" class="form-control form-control-color" placeholder="#000000"/>
+		{%  if (typeof palette !== 'undefined') { %}
+		<datalist id="{%=key%}-color-palette">
+			{% for (const color in palette) { %}
+				<option>{%=palette[color]%}</option>
+			{% } %}		
+		{% } %}
+	</div>
+	
+</script>
+
+<script id="vvveb-input-colorinput" type="text/html">
+
+	<div class="clr-field" style="{% if (typeof value !== 'undefined' && value != false) { %}color: {%=value%}" {% } %}">
+		<button type="button" aria-labelledby="clr-open-label"></button>
+		<input name="{%=key%}" type="text" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} class="coloris form-control"/>		
+	</div>
+	
+</script>
+
+<script id="vvveb-input-bootstrap-color-picker-input" type="text/html">
+	
+	<div>
+		<div id="cp2" class="input-group" title="Using input value">
+		  <input name="{%=key%}" type="text" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %}	 class="form-control"/>
+		  <span class="input-group-append">
+			<span class="input-group-text colorpicker-input-addon"><i></i></span>
+		  </span>
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-numberinput" type="text/html">
+	<div>
+		<input name="{%=key%}" type="number" value="{%=value%}" 
+			  {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %} 
+			  {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %} 
+			  {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} 
+		class="form-control"/>
+	</div>
+</script>
+
+<script id="vvveb-input-button" type="text/html">
+	<div>
+		<button class="btn btn-sm {% if (typeof className !== 'undefined') { %} {%=className%} {% } else { %}btn-outline-primary{% } %}">
+			<i class="la  {% if (typeof icon !== 'undefined') { %} {%=icon%} {% } else { %} la-plus {% } %} la-lg"></i> {%=text%}
+		</button>
+	</div>		
+</script>
+
+<script id="vvveb-input-cssunitinput" type="text/html">
+	<div class="input-group css-unit" id="cssunit-{%=key%}">
+		<input name="number" type="number"  {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} 
+			  {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %} 
+			  {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %} 
+			  {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} 
+		class="form-control"/>
+		<select class="form-select small-arrow" name="unit">
+			<option value="em">em</option>
+			<option value="rem">rem</option>
+			<option value="px">px</option>
+			<option value="%">%</option>
+			<option value="vw">vw</option>
+			<option value="vh">vh</option>
+			<option value="ex">ex</option>
+			<option value="ch">ch</option>
+			<option value="cm">cm</option>
+			<option value="mm">mm</option>
+			<option value="in">in</option>
+			<option value="pt">pt</option>
+			<option value="auto">auto</option>
+			<option value="">-</option>
+		</select>
+	</div>
+	
+</script>
+
+
+<script id="vvveb-filemanager-folder" type="text/html">
+	{% var rand = Math.floor(Math.random() * 10000); %}
+
+	<li data-folder="{%=folder%}" class="folder">
+		<label for="{%=folder%}{%=rand%}"><span>{%=folderTitle%}</span></label> <input type="checkbox" id="{%=folder%}{%=rand%}" />
+		<ol></ol>
+	</li>
+</script>
+
+<script id="vvveb-filemanager-page" type="text/html">
+	{% var rand = Math.floor(Math.random() * 10000); %}
+
+	<li data-url="{%=url%}" data-file="{%=file%}" data-page="{%=name%}" class="file{% if (typeof className !== 'undefined') { %} {%=className%}{% } %}" {%if (typeof post_id !== 'undefined') { %}data-post_id="{%=post_id%}"{% } %} {%if (typeof product_id !== 'undefined') { %}data-product_id="{%=product_id%}"{% } %} {%if (typeof global !== 'undefined' && global) { %}data-global="true"{% } %}>
+		<label for="{%=name%}{%=rand%}" {% if (typeof description !== 'undefined') { %} title="{%=description%}" {% } %}>
+			<span>{%=title%}</span>
+			<!-- <span class="text-muted small">{%=url%}</span> -->
+			<div class="file-actions">
+				<button href="#" class="delete btn btn-outline-danger" title="Delete"><i class="la la-trash"></i></button>
+				<a href="{%=url%}" target="_blank" class="view btn btn-outline-primary" title="View page"><i class="la la la-external-link-alt"></i></a>
+				<button href="#" class="rename btn btn-outline-primary" title="Rename"><i class="la la-pen"></i></button>
+				<button href="#" class="duplicate btn btn-outline-primary" title="Duplicate"><i class="icon-copy-outline"></i></button>
+			</div>
+		</label> <input type="checkbox" id="{%=name%}{%=rand%}" />
+		<!-- <ol></ol> -->
+	</li>
+</script>
+
+<script id="vvveb-filemanager-component" type="text/html">
+	<li data-url="{%=url%}" data-component="{%=name%}" class="component">
+		<a href="{%=url%}"><span>{%=title%}</span></a>
+	</li>
+</script>
+
+<script id="vvveb-breadcrumb-navigaton-item" type="text/html">
+	<li class="breadcrumb-item"><a href="#" {% if (typeof className !== 'undefined') { %}class="{%=className%}"{% } %}>{%=name%}</a></li>
+</script>
+
+<script id="vvveb-input-sectioninput" type="text/html">
+	<div>
+		{% var namespace = '-' + Math.floor(Math.random() * 1000); %}
+		<label class="header" data-header="{%=key%}" for="header_{%=key%}{%=namespace%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
+			<span>{%=header%}</span> 
+			<div class="header-arrow"></div>
+		</label> 
+		<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}{%=namespace%}"> 
+		<div class="section row" data-section="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}></div>		
+	</div>
+</script>
+
+<script id="vvveb-input-popoverinput" type="text/html">
+	<div>
+		{% var namespace = '-' + Math.floor(Math.random() * 1000); %}
+		<label class="header" data-header="{%=key%}" for="header_{%=key%}{%=namespace%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
+			<span>{%=header%}</span> 
+			<div class="header-arrow"></div>
+		</label> 
+		<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}{%=namespace%}"> 
+		<div class="section row" data-section="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}></div>		
+	</div>
+</script>
+
+
+<script id="vvveb-property" type="text/html">
+
+	<div class="mb-2 {% if (typeof col !== 'undefined' && col != false) { %} col-sm-{%=col%} {% } else { %}row{% } %} {% if (typeof inline !== 'undefined' && inline == true) { %}inline{% } %} " data-key="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
+		
+		{% if (typeof name !== 'undefined' && name != false) { %}<label class="{% if (typeof inline === 'undefined' ) { %}col-sm-4{% } %} form-label" for="input-model">
+			<span>{%=name%}</span>
+			<!-- <button class="btn-close ms-1" title="Clear"></button> -->
+		</label>{% } %}
+		
+		<div class="{% if (typeof inline === 'undefined') { %}col-sm-{% if (typeof name !== 'undefined' && name != false) { %}8{% } else { %}12{% } } %} input"></div>
+		
+	</div>		 
+	
+</script>
+
+<script id="vvveb-input-autocompletelist" type="text/html">
+	
+	<div>
+		<input name="{%=key%}" type="text" class="form-control"/>
+		
+		<div class="form-control autocomplete-list" style="min-height: 150px; overflow: auto;">
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-tagsinput" type="text/html">
+	
+	<div>
+		<div class="form-control tags-input p-0" style="height:auto;">
+				
+
+				<input name="{%=key%}" type="text" class="form-control" style="border:none;min-width:60px;"/>
+		</div>
+	</div>
+	
+</script>
+
+<script id="vvveb-input-noticeinput" type="text/html">
+	<div>
+		<div class="alert alert-dismissible fade show alert-{%=type%}" role="alert">		  
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>		  
+			<strong class="d-block mb-1">{%=title%}</strong>
+			
+			{%=text%}
+		</div>
+	</div>
+</script>
+
+<script id="vvveb-section" type="text/html">
+	{% var suffix = Math.floor(Math.random() * 10000); %}
+
+	<div class="section-item" draggable="true">
+		<div class="controls">
+			<div class="handle"></div>
+			<div class="info">
+				<div class="name">{%=name%} 
+					<div class="type">{%=type%}</div>
+				</div>
+			</div>
+			<div class="buttons">
+				<a class="delete-btn" href="" title="Remove section"><i class="la la-trash text-danger"></i></a>
+				<!-- 
+				<a class="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a>
+				<a class="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a>
+				-->
+				<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a>
+		</div>
+		</div>
+
+
+		<input class="header_check" type="checkbox" id="section-components-{%=suffix%}">
+
+		<label for="section-components-{%=suffix%}"> 
+			<div class="header-arrow"></div>
+		</label>
+		
+		<div class="tree">
+			<ol>
+				<!--
+				<li data-component="Products" class="file">							
+					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>							
+					<input type="checkbox" id="idNaN">
+				</li>
+				<li data-component="Posts" class="file">							
+					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>							
+					<input type="checkbox" id="idNaN">
+				</li>
+				-->
+			</ol>
+		</div>
+	</div>
+	
+</script>
+
+<!--// end templates -->
+
+<!-- code editor modal -->
+<div class="modal modal-full fade" id="codeEditorModal" tabindex="-1" aria-labelledby="codeEditorModal"
+	role="dialog" aria-hidden="true">
+	<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+		<div class="modal-content">
+			<input type="hidden" name="file" value="">
+
+			<div class="modal-header justify-content-between">
+				<span class="modal-title"></span>
+				<div class="float-end">
+					<button type="button" class="btn btn-light border btn-icon" data-bs-dismiss="modal"><i
+							class="la la-times"></i>Close</button>
+
+					<button class="btn btn-primary btn-icon save-btn" title="Save changes">
+						<span class="loading d-none">
+							<i class="la la-save"></i>
+							<span class="spinner-border spinner-border-sm align-middle" role="status"
+								aria-hidden="true">
+							</span>
+							<span>Saving </span> ... </span>
+
+						<span class="button-text">
+							<i class="la la-save"></i> <span>Save changes</span>
+						</span>
+					</button>
+				</div>
+			</div>
+
+			<div class="modal-body p-0">
+				<textarea class="form-control h-100"></textarea>
+			</div>
+
+
+		</div>
+	</div>
+</div>
+
+<!-- export html modal-->
+<div class="modal fade" id="textarea-modal" tabindex="-1" role="dialog" aria-labelledby="textarea-modal"
+	aria-hidden="true">
+	<div class="modal-dialog modal-lg" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<p class="modal-title text-primary"><i class="la la-lg la-save"></i> Export html</p>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+					<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
+				</button>
+			</div>
+			<div class="modal-body">
+
+				<textarea rows="25" cols="150" class="form-control"></textarea>
+
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal"><i
+						class="la la-times"></i> Close</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- message modal-->
+<div class="modal fade" id="message-modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<p class="modal-title text-primary"><i class="la la-lg la-comment"></i> VvvebJs</p>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+					<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
+				</button>
+			</div>
+			<div class="modal-body">
+				<p>Page was successfully saved!.</p>
+			</div>
+			<div class="modal-footer">
+				<!-- <button type="button" class="btn btn-primary">Ok</button> -->
+				<button type="button" class="btn btn-secondary btn-lg" data-bs-dismiss="modal"><i
+						class="la la-times"></i> Close</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- new page modal-->
+<div class="modal fade" id="new-page-modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+
+		<form action="save.php">
+
+			<div class="modal-content">
+				<div class="modal-header">
+					<span class="modal-title text-primary fw-normal"><i class="la la-lg la-file"></i> New
+						page</span>
+					<button type="button" class="btn-close p-0 me-1" data-bs-dismiss="modal" aria-label="Close">
+						<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
+					</button>
+				</div>
+
+				<div class="modal-body text">
+					<div class="mb-3 row" data-key="type">
+						<label class="col-sm-3 col-form-label">
+							Template
+							<abbr
+								title="The contents of this template will be used as a start for the new template">
+								<i class="la la-lg la-question-circle text-primary"></i>
+							</abbr>
+
+						</label>
+						<div class="col-sm-9 input">
+							<div>
+								<select class="form-select" name="startTemplateUrl">
+									<option value="new-page-blank-template.html">Blank Template</option>
+									<option value="demo/narrow-jumbotron/index.html">Narrow jumbotron</option>
+									<option value="demo/album/index.html">Album</option>
+								</select>
+							</div>
+						</div>
+					</div>
+
+					<div class="mb-3 row" data-key="href">
+						<label class="col-sm-3 col-form-label">Page name</label>
+						<div class="col-sm-9 input">
+							<div>
+								<input name="title" type="text" value="My page" class="form-control"
+									placeholder="My page" required>
+							</div>
+						</div>
+					</div>
+
+					<div class="mb-3 row" data-key="href">
+						<label class="col-sm-3 col-form-label">File name</label>
+						<div class="col-sm-9 input">
+							<div>
+								<input name="file" type="text" value="my-page.html" class="form-control"
+									placeholder="my-page.html" required>
+							</div>
+						</div>
+					</div>
+
+					<!-- 
+					<div class="mb-3 row" data-key="href">     
+						 <label class="col-sm-3 form-label">Url</label>      
+						<div class="col-sm-9 input">
+							<div>   
+								<input name="url" type="text" value="my-page.html" class="form-control" placeholder="/my-page.html" required>  
+							</div>
+						</div>     
+					</div>
+					-->
+
+					<div class="mb-3 row" data-key="href">
+						<label class="col-sm-3 col-form-label">Save to folder</label>
+						<div class="col-sm-9 input">
+							<div>
+								<input name="folder" type="text" value="my-pages" class="form-control"
+									placeholder="/" required>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="modal-footer">
+					<button class="btn btn-outline-secondary btn-icon" type="reset" data-bs-dismiss="modal">
+						<i class="la la-times"></i> Cancel
+					</button>
+					<button class="btn btn-primary btn-icon" type="submit">
+						<i class="la la-check"></i>
+						<span>Create</span>
+					</button>
+				</div>
+			</div>
+
+		</form>
+
+	</div>
+</div>
+
+<!-- save toast -->
+<div class="toast-container position-fixed end-0 bottom-0 me-4 my-4">
+	<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" id="bottom-toast">
+		<div class="toast-header bg-success bg-opacity-25 border-0">
+			<strong class="me-auto">Page save</strong>
+			<!-- <small class="badge bg-success">status</small> -->
+			<button type="button" class="btn-close me-1" data-bs-dismiss="toast" aria-label="Close"></button>
+		</div>
+		<div class="toast-body">
+			<div class="flex-grow-1">
+				<div class="message">
+					<div>Elements saved!</div>
+					<div>Template backup was saved!</div>
+					<div>Template was saved!</div>
+				</div>
+				<div>
+					<!-- <a class="btn btn-success  btn-icon btn-sm w-100 mt-2" href="">View page</a></div> -->
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="toast-container position-fixed end-0 top-0 me-4 my-4">
+	<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" id="top-toast">
+		<div class="toast-header bg-success bg-opacity-25 border-0">
+			<strong class="me-auto">Page save</strong>
+			<!-- <small class="badge bg-success">status</small> -->
+			<button type="button" class="btn-close me-1" data-bs-dismiss="toast" aria-label="Close"></button>
+		</div>
+		<div class="toast-body">
+			<div class="flex-grow-1">
+				<div class="message">
+					<div>Elements saved!</div>
+					<div>Template backup was saved!</div>
+					<div>Template was saved!</div>
+				</div>
+				<div>
+					<!-- <a class="btn btn-success  btn-icon btn-sm w-100 mt-2" href="">View page</a></div> -->
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- bootstrap-->
+<script src="/static/Vvvebjs/js/popper.min.js"></script>
+<script src="/static/Vvvebjs/js/bootstrap.min.js"></script>
+
+<!-- builder code-->
+<script src="/static/Vvvebjs/libs/builder/builder.js"></script>
+<!-- undo manager-->
+<script src="/static/Vvvebjs/libs/builder/undo.js"></script>
+<!-- inputs-->
+<script src="/static/Vvvebjs/libs/builder/inputs.js"></script>
+
+
+<!-- media gallery -->
+<link href="/static/Vvvebjs/libs/media/media.css" rel="stylesheet">
+<script>
+	window.mediaPath = '../../media';
+	Vvveb.themeBaseUrl = 'demo/landing/';
+</script>
+<script src="/static/Vvvebjs/libs/media/media.js"></script>
+	<!--
+<script src="/static/Vvvebjs/libs/media/openverse.js"></script>
+-->
+<script src="/static/Vvvebjs/libs/builder/plugin-media.js"></script>
+
+<!-- bootstrap colorpicker //uncomment bellow scripts to enable -->
+<!--
+<script src="/static/Vvvebjs/libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
+<link href="/static/Vvvebjs/libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
+<script src="/static/Vvvebjs/libs/builder/plugin-bootstrap-colorpicker.js"></script>
+-->
+
+<link href="/static/Vvvebjs/libs/coloris/coloris.min.css" rel="stylesheet">
+<script src="/static/Vvvebjs/libs/coloris/coloris.js"></script>
+<script id="plugin-coloris" src="/static/Vvvebjs/libs/builder/plugin-coloris.js"></script>
+
+<!-- components-->
+<!-- script src="/static/Vvvebjs/libs/builder/components-server.js"></script -->
+<script src="/static/Vvvebjs/libs/builder/plugin-google-fonts.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-common.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-aos.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-html.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-elements.js"></script>
+<script src="/static/Vvvebjs/libs/builder/section.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-bootstrap5.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-widgets.js"></script>
+<script src="/static/Vvvebjs/libs/builder/oembed.js"></script>
+<script src="/static/Vvvebjs/libs/builder/components-embeds.js"></script>
+
+
+<!-- sections-->
+<script src="/static/Vvvebjs/demo/landing/sections/sections.js"></script>
+<script src="/static/Vvvebjs/libs/builder/sections-bootstrap4.js"></script>
+
+<!-- blocks-->
+<script src="/static/Vvvebjs/libs/builder/blocks-bootstrap4.js"></script>
+
+<!-- styles-->
+<script src="/static/Vvvebjs/demo/landing/styles/styles.js"></script>
+
+<!-- plugins -->
+
+<!-- code mirror - code editor syntax highlight -->
+<link href="/static/Vvvebjs/libs/codemirror/lib/codemirror.css" rel="stylesheet" />
+<link href="/static/Vvvebjs/libs/codemirror/theme/duotone-dark.css" rel="stylesheet" />
+<script src="/static/Vvvebjs/libs/codemirror/lib/codemirror.js"></script>
+<script src="/static/Vvvebjs/libs/codemirror/lib/xml.js"></script>
+<script src="/static/Vvvebjs/libs/codemirror/lib/css.js"></script>
+<script src="/static/Vvvebjs/libs/codemirror/lib/formatting.js"></script>
+<script src="/static/Vvvebjs/libs/codemirror/lib/searchcursor.js"></script>
+<script src="/static/Vvvebjs/libs/codemirror/lib/search.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-codemirror.js"></script>
+
+
+<!-- 
+Tinymce plugin
+Clone or copy https://github.com/tinymce/tinymce-dist to libs/tinymce-dist 
+-->
+
+<!-- 
+<script src="/static/Vvvebjs/libs/tinymce-dist/tinymce.min.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-tinymce.js"></script>	
+-->
+
+<!-- 
+CKEditor plugin
+Unzip the latest ckeditor release zip from https://github.com/ckeditor/ckeditor4/releases to libs/ckeditor or use the CDN
+-->
+	<!--
+<script src="/static/Vvvebjs/libs/ckeditor/ckeditor.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-ckeditor.js"></script>	
+-->
+
+<!-- jszip - download page as zip -->
+<script src="/static/Vvvebjs/libs/jszip/jszip.min.js"></script>
+<script src="/static/Vvvebjs/libs/jszip/filesaver.min.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-jszip.js"></script>
+<script src="/static/Vvvebjs/libs/builder/plugin-ai-assistant.js"></script>
+
+
+<!-- autocomplete plugin used by autocomplete input-->
+<script src="/static/Vvvebjs/libs/autocomplete/autocomplete.js"></script>
+<script>
+let renameUrl = '/api/save?action=rename';
+let deleteUrl = '/api/save?action=delete';
+let saveReusableUrl = '/api/save?action=saveReusable';
+let oEmbedProxyUrl = '/api/save?action=oembedProxy';
+let chatgptOptions = { "key": "", "model": "gpt-3.5-turbo-instruct", "temperature": 0, "max_tokens": 300 };
+
+let defaultPages = {% endraw %}{{ pages_json | safe }}{% raw %};
+let pages = defaultPages;
+
+let firstPage = Object.keys(pages)[0];
+Vvveb.Builder.init(pages[firstPage]["url"], function () {
+	//load code after page is loaded here
+});
+
+Vvveb.Gui.init();
+Vvveb.FileManager.init();
+Vvveb.SectionList.init();
+Vvveb.StyleList.init();
+Vvveb.TreeList.init();
+Vvveb.Breadcrumb.init();
+Vvveb.CssEditor.init();
+
+Vvveb.FileManager.addPages(pages);
+Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
+Vvveb.Gui.toggleRightColumn(false);
+Vvveb.Breadcrumb.init();
+</script>
+
+<style>
+#back-to-dashboard {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  background: rgba(30,32,48,0.92);
+  color: #a5b4fc;
+  border: 1px solid rgba(99,102,241,0.4);
+  border-radius: 8px;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  backdrop-filter: blur(8px);
+  transition: background 0.2s, color 0.2s;
+  text-decoration: none;
+}
+#back-to-dashboard:hover {
+  background: rgba(99,102,241,0.25);
+  color: #fff;
+}
+</style>
+<a id="back-to-dashboard" href="/dashboard">
+  &#8592; 返回管理器
+</a>
+<script>
+// Inject project slug for save bridge
+window.VVVEB_PROJECT_SLUG = "{% endraw %}{{ slug | safe }}{% raw %}";
+</script>
+<script src="/static/js/my-editor.js"></script>
+
+</body>
+
+</html>
+{% endraw %}
\ No newline at end of file
diff --git a/uv.lock b/uv.lock
new file mode 100644
index 0000000..dbff83a
--- /dev/null
+++ b/uv.lock
@@ -0,0 +1,146 @@
+version = 1
+revision = 3
+requires-python = ">=3.13"
+
+[[package]]
+name = "blinker"
+version = "1.9.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/21/28/9b3f50ce0e048515135495f198351908d99540d69bfdc8c1d15b73dc55ce/blinker-1.9.0.tar.gz", hash = "sha256:b4ce2265a7abece45e7cc896e98dbebe6cead56bcf805a3d23136d145f5445bf", size = 22460, upload-time = "2024-11-08T17:25:47.436Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/10/cb/f2ad4230dc2eb1a74edf38f1a38b9b52277f75bef262d8908e60d957e13c/blinker-1.9.0-py3-none-any.whl", hash = "sha256:ba0efaa9080b619ff2f3459d1d500c57bddea4a6b424b60a91141db6fd2f08bc", size = 8458, upload-time = "2024-11-08T17:25:46.184Z" },
+]
+
+[[package]]
+name = "click"
+version = "8.4.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "colorama", marker = "sys_platform == 'win32'" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/23/e4/796662cd90cf80e3a363c99db2b88e0e394b988a575f60a17e16440cd011/click-8.4.0.tar.gz", hash = "sha256:638f1338fe1235c8f4e008e4a8a254fb5c5fbdcbb40ece3c9142ebb78e792973", size = 350843, upload-time = "2026-05-17T00:47:58.425Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ee/ae/8e92f8058baf87f6c7d86ee7e457668690195cc77efedb8d3797a06e3940/click-8.4.0-py3-none-any.whl", hash = "sha256:40c50b7c6c6adac2823d411041ec84f3f103f1b280d5e9ce0d7f998995832f81", size = 116147, upload-time = "2026-05-17T00:47:56.842Z" },
+]
+
+[[package]]
+name = "colorama"
+version = "0.4.6"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/d8/53/6f443c9a4a8358a93a6792e2acffb9d9d5cb0a5cfd8802644b7b1c9a02e4/colorama-0.4.6.tar.gz", hash = "sha256:08695f5cb7ed6e0531a20572697297273c47b8cae5a63ffc6d6ed5c201be6e44", size = 27697, upload-time = "2022-10-25T02:36:22.414Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d1/d6/3965ed04c63042e047cb6a3e6ed1a63a35087b6a609aa3a15ed8ac56c221/colorama-0.4.6-py2.py3-none-any.whl", hash = "sha256:4f1d9991f5acc0ca119f9d443620b77f9d6b33703e51011c16baf57afb285fc6", size = 25335, upload-time = "2022-10-25T02:36:20.889Z" },
+]
+
+[[package]]
+name = "flask"
+version = "3.1.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "blinker" },
+    { name = "click" },
+    { name = "itsdangerous" },
+    { name = "jinja2" },
+    { name = "markupsafe" },
+    { name = "werkzeug" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/26/00/35d85dcce6c57fdc871f3867d465d780f302a175ea360f62533f12b27e2b/flask-3.1.3.tar.gz", hash = "sha256:0ef0e52b8a9cd932855379197dd8f94047b359ca0a78695144304cb45f87c9eb", size = 759004, upload-time = "2026-02-19T05:00:57.678Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7f/9c/34f6962f9b9e9c71f6e5ed806e0d0ff03c9d1b0b2340088a0cf4bce09b18/flask-3.1.3-py3-none-any.whl", hash = "sha256:f4bcbefc124291925f1a26446da31a5178f9483862233b23c0c96a20701f670c", size = 103424, upload-time = "2026-02-19T05:00:56.027Z" },
+]
+
+[[package]]
+name = "itsdangerous"
+version = "2.2.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/9c/cb/8ac0172223afbccb63986cc25049b154ecfb5e85932587206f42317be31d/itsdangerous-2.2.0.tar.gz", hash = "sha256:e0050c0b7da1eea53ffaf149c0cfbb5c6e2e2b69c4bef22c81fa6eb73e5f6173", size = 54410, upload-time = "2024-04-16T21:28:15.614Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/96/92447566d16df59b2a776c0fb82dbc4d9e07cd95062562af01e408583fc4/itsdangerous-2.2.0-py3-none-any.whl", hash = "sha256:c6242fc49e35958c8b15141343aa660db5fc54d4f13a1db01a3f5891b98700ef", size = 16234, upload-time = "2024-04-16T21:28:14.499Z" },
+]
+
+[[package]]
+name = "jinja2"
+version = "3.1.6"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "markupsafe" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/df/bf/f7da0350254c0ed7c72f3e33cef02e048281fec7ecec5f032d4aac52226b/jinja2-3.1.6.tar.gz", hash = "sha256:0137fb05990d35f1275a587e9aee6d56da821fc83491a0fb838183be43f66d6d", size = 245115, upload-time = "2025-03-05T20:05:02.478Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/62/a1/3d680cbfd5f4b8f15abc1d571870c5fc3e594bb582bc3b64ea099db13e56/jinja2-3.1.6-py3-none-any.whl", hash = "sha256:85ece4451f492d0c13c5dd7c13a64681a86afae63a5f347908daf103ce6d2f67", size = 134899, upload-time = "2025-03-05T20:05:00.369Z" },
+]
+
+[[package]]
+name = "markupsafe"
+version = "3.0.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/7e/99/7690b6d4034fffd95959cbe0c02de8deb3098cc577c67bb6a24fe5d7caa7/markupsafe-3.0.3.tar.gz", hash = "sha256:722695808f4b6457b320fdc131280796bdceb04ab50fe1795cd540799ebe1698", size = 80313, upload-time = "2025-09-27T18:37:40.426Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/38/2f/907b9c7bbba283e68f20259574b13d005c121a0fa4c175f9bed27c4597ff/markupsafe-3.0.3-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:e1cf1972137e83c5d4c136c43ced9ac51d0e124706ee1c8aa8532c1287fa8795", size = 11622, upload-time = "2025-09-27T18:36:41.777Z" },
+    { url = "https://files.pythonhosted.org/packages/9c/d9/5f7756922cdd676869eca1c4e3c0cd0df60ed30199ffd775e319089cb3ed/markupsafe-3.0.3-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:116bb52f642a37c115f517494ea5feb03889e04df47eeff5b130b1808ce7c219", size = 12029, upload-time = "2025-09-27T18:36:43.257Z" },
+    { url = "https://files.pythonhosted.org/packages/00/07/575a68c754943058c78f30db02ee03a64b3c638586fba6a6dd56830b30a3/markupsafe-3.0.3-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:133a43e73a802c5562be9bbcd03d090aa5a1fe899db609c29e8c8d815c5f6de6", size = 24374, upload-time = "2025-09-27T18:36:44.508Z" },
+    { url = "https://files.pythonhosted.org/packages/a9/21/9b05698b46f218fc0e118e1f8168395c65c8a2c750ae2bab54fc4bd4e0e8/markupsafe-3.0.3-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:ccfcd093f13f0f0b7fdd0f198b90053bf7b2f02a3927a30e63f3ccc9df56b676", size = 22980, upload-time = "2025-09-27T18:36:45.385Z" },
+    { url = "https://files.pythonhosted.org/packages/7f/71/544260864f893f18b6827315b988c146b559391e6e7e8f7252839b1b846a/markupsafe-3.0.3-cp313-cp313-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:509fa21c6deb7a7a273d629cf5ec029bc209d1a51178615ddf718f5918992ab9", size = 21990, upload-time = "2025-09-27T18:36:46.916Z" },
+    { url = "https://files.pythonhosted.org/packages/c2/28/b50fc2f74d1ad761af2f5dcce7492648b983d00a65b8c0e0cb457c82ebbe/markupsafe-3.0.3-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:a4afe79fb3de0b7097d81da19090f4df4f8d3a2b3adaa8764138aac2e44f3af1", size = 23784, upload-time = "2025-09-27T18:36:47.884Z" },
+    { url = "https://files.pythonhosted.org/packages/ed/76/104b2aa106a208da8b17a2fb72e033a5a9d7073c68f7e508b94916ed47a9/markupsafe-3.0.3-cp313-cp313-musllinux_1_2_riscv64.whl", hash = "sha256:795e7751525cae078558e679d646ae45574b47ed6e7771863fcc079a6171a0fc", size = 21588, upload-time = "2025-09-27T18:36:48.82Z" },
+    { url = "https://files.pythonhosted.org/packages/b5/99/16a5eb2d140087ebd97180d95249b00a03aa87e29cc224056274f2e45fd6/markupsafe-3.0.3-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:8485f406a96febb5140bfeca44a73e3ce5116b2501ac54fe953e488fb1d03b12", size = 23041, upload-time = "2025-09-27T18:36:49.797Z" },
+    { url = "https://files.pythonhosted.org/packages/19/bc/e7140ed90c5d61d77cea142eed9f9c303f4c4806f60a1044c13e3f1471d0/markupsafe-3.0.3-cp313-cp313-win32.whl", hash = "sha256:bdd37121970bfd8be76c5fb069c7751683bdf373db1ed6c010162b2a130248ed", size = 14543, upload-time = "2025-09-27T18:36:51.584Z" },
+    { url = "https://files.pythonhosted.org/packages/05/73/c4abe620b841b6b791f2edc248f556900667a5a1cf023a6646967ae98335/markupsafe-3.0.3-cp313-cp313-win_amd64.whl", hash = "sha256:9a1abfdc021a164803f4d485104931fb8f8c1efd55bc6b748d2f5774e78b62c5", size = 15113, upload-time = "2025-09-27T18:36:52.537Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/3a/fa34a0f7cfef23cf9500d68cb7c32dd64ffd58a12b09225fb03dd37d5b80/markupsafe-3.0.3-cp313-cp313-win_arm64.whl", hash = "sha256:7e68f88e5b8799aa49c85cd116c932a1ac15caaa3f5db09087854d218359e485", size = 13911, upload-time = "2025-09-27T18:36:53.513Z" },
+    { url = "https://files.pythonhosted.org/packages/e4/d7/e05cd7efe43a88a17a37b3ae96e79a19e846f3f456fe79c57ca61356ef01/markupsafe-3.0.3-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:218551f6df4868a8d527e3062d0fb968682fe92054e89978594c28e642c43a73", size = 11658, upload-time = "2025-09-27T18:36:54.819Z" },
+    { url = "https://files.pythonhosted.org/packages/99/9e/e412117548182ce2148bdeacdda3bb494260c0b0184360fe0d56389b523b/markupsafe-3.0.3-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:3524b778fe5cfb3452a09d31e7b5adefeea8c5be1d43c4f810ba09f2ceb29d37", size = 12066, upload-time = "2025-09-27T18:36:55.714Z" },
+    { url = "https://files.pythonhosted.org/packages/bc/e6/fa0ffcda717ef64a5108eaa7b4f5ed28d56122c9a6d70ab8b72f9f715c80/markupsafe-3.0.3-cp313-cp313t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:4e885a3d1efa2eadc93c894a21770e4bc67899e3543680313b09f139e149ab19", size = 25639, upload-time = "2025-09-27T18:36:56.908Z" },
+    { url = "https://files.pythonhosted.org/packages/96/ec/2102e881fe9d25fc16cb4b25d5f5cde50970967ffa5dddafdb771237062d/markupsafe-3.0.3-cp313-cp313t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:8709b08f4a89aa7586de0aadc8da56180242ee0ada3999749b183aa23df95025", size = 23569, upload-time = "2025-09-27T18:36:57.913Z" },
+    { url = "https://files.pythonhosted.org/packages/4b/30/6f2fce1f1f205fc9323255b216ca8a235b15860c34b6798f810f05828e32/markupsafe-3.0.3-cp313-cp313t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:b8512a91625c9b3da6f127803b166b629725e68af71f8184ae7e7d54686a56d6", size = 23284, upload-time = "2025-09-27T18:36:58.833Z" },
+    { url = "https://files.pythonhosted.org/packages/58/47/4a0ccea4ab9f5dcb6f79c0236d954acb382202721e704223a8aafa38b5c8/markupsafe-3.0.3-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:9b79b7a16f7fedff2495d684f2b59b0457c3b493778c9eed31111be64d58279f", size = 24801, upload-time = "2025-09-27T18:36:59.739Z" },
+    { url = "https://files.pythonhosted.org/packages/6a/70/3780e9b72180b6fecb83a4814d84c3bf4b4ae4bf0b19c27196104149734c/markupsafe-3.0.3-cp313-cp313t-musllinux_1_2_riscv64.whl", hash = "sha256:12c63dfb4a98206f045aa9563db46507995f7ef6d83b2f68eda65c307c6829eb", size = 22769, upload-time = "2025-09-27T18:37:00.719Z" },
+    { url = "https://files.pythonhosted.org/packages/98/c5/c03c7f4125180fc215220c035beac6b9cb684bc7a067c84fc69414d315f5/markupsafe-3.0.3-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:8f71bc33915be5186016f675cd83a1e08523649b0e33efdb898db577ef5bb009", size = 23642, upload-time = "2025-09-27T18:37:01.673Z" },
+    { url = "https://files.pythonhosted.org/packages/80/d6/2d1b89f6ca4bff1036499b1e29a1d02d282259f3681540e16563f27ebc23/markupsafe-3.0.3-cp313-cp313t-win32.whl", hash = "sha256:69c0b73548bc525c8cb9a251cddf1931d1db4d2258e9599c28c07ef3580ef354", size = 14612, upload-time = "2025-09-27T18:37:02.639Z" },
+    { url = "https://files.pythonhosted.org/packages/2b/98/e48a4bfba0a0ffcf9925fe2d69240bfaa19c6f7507b8cd09c70684a53c1e/markupsafe-3.0.3-cp313-cp313t-win_amd64.whl", hash = "sha256:1b4b79e8ebf6b55351f0d91fe80f893b4743f104bff22e90697db1590e47a218", size = 15200, upload-time = "2025-09-27T18:37:03.582Z" },
+    { url = "https://files.pythonhosted.org/packages/0e/72/e3cc540f351f316e9ed0f092757459afbc595824ca724cbc5a5d4263713f/markupsafe-3.0.3-cp313-cp313t-win_arm64.whl", hash = "sha256:ad2cf8aa28b8c020ab2fc8287b0f823d0a7d8630784c31e9ee5edea20f406287", size = 13973, upload-time = "2025-09-27T18:37:04.929Z" },
+    { url = "https://files.pythonhosted.org/packages/33/8a/8e42d4838cd89b7dde187011e97fe6c3af66d8c044997d2183fbd6d31352/markupsafe-3.0.3-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:eaa9599de571d72e2daf60164784109f19978b327a3910d3e9de8c97b5b70cfe", size = 11619, upload-time = "2025-09-27T18:37:06.342Z" },
+    { url = "https://files.pythonhosted.org/packages/b5/64/7660f8a4a8e53c924d0fa05dc3a55c9cee10bbd82b11c5afb27d44b096ce/markupsafe-3.0.3-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:c47a551199eb8eb2121d4f0f15ae0f923d31350ab9280078d1e5f12b249e0026", size = 12029, upload-time = "2025-09-27T18:37:07.213Z" },
+    { url = "https://files.pythonhosted.org/packages/da/ef/e648bfd021127bef5fa12e1720ffed0c6cbb8310c8d9bea7266337ff06de/markupsafe-3.0.3-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:f34c41761022dd093b4b6896d4810782ffbabe30f2d443ff5f083e0cbbb8c737", size = 24408, upload-time = "2025-09-27T18:37:09.572Z" },
+    { url = "https://files.pythonhosted.org/packages/41/3c/a36c2450754618e62008bf7435ccb0f88053e07592e6028a34776213d877/markupsafe-3.0.3-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:457a69a9577064c05a97c41f4e65148652db078a3a509039e64d3467b9e7ef97", size = 23005, upload-time = "2025-09-27T18:37:10.58Z" },
+    { url = "https://files.pythonhosted.org/packages/bc/20/b7fdf89a8456b099837cd1dc21974632a02a999ec9bf7ca3e490aacd98e7/markupsafe-3.0.3-cp314-cp314-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:e8afc3f2ccfa24215f8cb28dcf43f0113ac3c37c2f0f0806d8c70e4228c5cf4d", size = 22048, upload-time = "2025-09-27T18:37:11.547Z" },
+    { url = "https://files.pythonhosted.org/packages/9a/a7/591f592afdc734f47db08a75793a55d7fbcc6902a723ae4cfbab61010cc5/markupsafe-3.0.3-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:ec15a59cf5af7be74194f7ab02d0f59a62bdcf1a537677ce67a2537c9b87fcda", size = 23821, upload-time = "2025-09-27T18:37:12.48Z" },
+    { url = "https://files.pythonhosted.org/packages/7d/33/45b24e4f44195b26521bc6f1a82197118f74df348556594bd2262bda1038/markupsafe-3.0.3-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:0eb9ff8191e8498cca014656ae6b8d61f39da5f95b488805da4bb029cccbfbaf", size = 21606, upload-time = "2025-09-27T18:37:13.485Z" },
+    { url = "https://files.pythonhosted.org/packages/ff/0e/53dfaca23a69fbfbbf17a4b64072090e70717344c52eaaaa9c5ddff1e5f0/markupsafe-3.0.3-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:2713baf880df847f2bece4230d4d094280f4e67b1e813eec43b4c0e144a34ffe", size = 23043, upload-time = "2025-09-27T18:37:14.408Z" },
+    { url = "https://files.pythonhosted.org/packages/46/11/f333a06fc16236d5238bfe74daccbca41459dcd8d1fa952e8fbd5dccfb70/markupsafe-3.0.3-cp314-cp314-win32.whl", hash = "sha256:729586769a26dbceff69f7a7dbbf59ab6572b99d94576a5592625d5b411576b9", size = 14747, upload-time = "2025-09-27T18:37:15.36Z" },
+    { url = "https://files.pythonhosted.org/packages/28/52/182836104b33b444e400b14f797212f720cbc9ed6ba34c800639d154e821/markupsafe-3.0.3-cp314-cp314-win_amd64.whl", hash = "sha256:bdc919ead48f234740ad807933cdf545180bfbe9342c2bb451556db2ed958581", size = 15341, upload-time = "2025-09-27T18:37:16.496Z" },
+    { url = "https://files.pythonhosted.org/packages/6f/18/acf23e91bd94fd7b3031558b1f013adfa21a8e407a3fdb32745538730382/markupsafe-3.0.3-cp314-cp314-win_arm64.whl", hash = "sha256:5a7d5dc5140555cf21a6fefbdbf8723f06fcd2f63ef108f2854de715e4422cb4", size = 14073, upload-time = "2025-09-27T18:37:17.476Z" },
+    { url = "https://files.pythonhosted.org/packages/3c/f0/57689aa4076e1b43b15fdfa646b04653969d50cf30c32a102762be2485da/markupsafe-3.0.3-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:1353ef0c1b138e1907ae78e2f6c63ff67501122006b0f9abad68fda5f4ffc6ab", size = 11661, upload-time = "2025-09-27T18:37:18.453Z" },
+    { url = "https://files.pythonhosted.org/packages/89/c3/2e67a7ca217c6912985ec766c6393b636fb0c2344443ff9d91404dc4c79f/markupsafe-3.0.3-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:1085e7fbddd3be5f89cc898938f42c0b3c711fdcb37d75221de2666af647c175", size = 12069, upload-time = "2025-09-27T18:37:19.332Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/00/be561dce4e6ca66b15276e184ce4b8aec61fe83662cce2f7d72bd3249d28/markupsafe-3.0.3-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:1b52b4fb9df4eb9ae465f8d0c228a00624de2334f216f178a995ccdcf82c4634", size = 25670, upload-time = "2025-09-27T18:37:20.245Z" },
+    { url = "https://files.pythonhosted.org/packages/50/09/c419f6f5a92e5fadde27efd190eca90f05e1261b10dbd8cbcb39cd8ea1dc/markupsafe-3.0.3-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:fed51ac40f757d41b7c48425901843666a6677e3e8eb0abcff09e4ba6e664f50", size = 23598, upload-time = "2025-09-27T18:37:21.177Z" },
+    { url = "https://files.pythonhosted.org/packages/22/44/a0681611106e0b2921b3033fc19bc53323e0b50bc70cffdd19f7d679bb66/markupsafe-3.0.3-cp314-cp314t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:f190daf01f13c72eac4efd5c430a8de82489d9cff23c364c3ea822545032993e", size = 23261, upload-time = "2025-09-27T18:37:22.167Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/57/1b0b3f100259dc9fffe780cfb60d4be71375510e435efec3d116b6436d43/markupsafe-3.0.3-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:e56b7d45a839a697b5eb268c82a71bd8c7f6c94d6fd50c3d577fa39a9f1409f5", size = 24835, upload-time = "2025-09-27T18:37:23.296Z" },
+    { url = "https://files.pythonhosted.org/packages/26/6a/4bf6d0c97c4920f1597cc14dd720705eca0bf7c787aebc6bb4d1bead5388/markupsafe-3.0.3-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:f3e98bb3798ead92273dc0e5fd0f31ade220f59a266ffd8a4f6065e0a3ce0523", size = 22733, upload-time = "2025-09-27T18:37:24.237Z" },
+    { url = "https://files.pythonhosted.org/packages/14/c7/ca723101509b518797fedc2fdf79ba57f886b4aca8a7d31857ba3ee8281f/markupsafe-3.0.3-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:5678211cb9333a6468fb8d8be0305520aa073f50d17f089b5b4b477ea6e67fdc", size = 23672, upload-time = "2025-09-27T18:37:25.271Z" },
+    { url = "https://files.pythonhosted.org/packages/fb/df/5bd7a48c256faecd1d36edc13133e51397e41b73bb77e1a69deab746ebac/markupsafe-3.0.3-cp314-cp314t-win32.whl", hash = "sha256:915c04ba3851909ce68ccc2b8e2cd691618c4dc4c4232fb7982bca3f41fd8c3d", size = 14819, upload-time = "2025-09-27T18:37:26.285Z" },
+    { url = "https://files.pythonhosted.org/packages/1a/8a/0402ba61a2f16038b48b39bccca271134be00c5c9f0f623208399333c448/markupsafe-3.0.3-cp314-cp314t-win_amd64.whl", hash = "sha256:4faffd047e07c38848ce017e8725090413cd80cbc23d86e55c587bf979e579c9", size = 15426, upload-time = "2025-09-27T18:37:27.316Z" },
+    { url = "https://files.pythonhosted.org/packages/70/bc/6f1c2f612465f5fa89b95bead1f44dcb607670fd42891d8fdcd5d039f4f4/markupsafe-3.0.3-cp314-cp314t-win_arm64.whl", hash = "sha256:32001d6a8fc98c8cb5c947787c5d08b0a50663d139f1305bac5885d98d9b40fa", size = 14146, upload-time = "2025-09-27T18:37:28.327Z" },
+]
+
+[[package]]
+name = "vvvebjs"
+version = "0.1.0"
+source = { virtual = "." }
+dependencies = [
+    { name = "flask" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "flask", specifier = ">=3.1" }]
+
+[[package]]
+name = "werkzeug"
+version = "3.1.8"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "markupsafe" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/dd/b2/381be8cfdee792dd117872481b6e378f85c957dd7c5bca38897b08f765fd/werkzeug-3.1.8.tar.gz", hash = "sha256:9bad61a4268dac112f1c5cd4630a56ede601b6ed420300677a869083d70a4c44", size = 875852, upload-time = "2026-04-02T18:49:14.268Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/93/8c/2e650f2afeb7ee576912636c23ddb621c91ac6a98e66dc8d29c3c69446e1/werkzeug-3.1.8-py3-none-any.whl", hash = "sha256:63a77fb8892bf28ebc3178683445222aa500e48ebad5ec77b0ad80f8726b1f50", size = 226459, upload-time = "2026-04-02T18:49:12.72Z" },
+]
diff --git a/websites/my-website/index.html b/websites/my-website/index.html
new file mode 100644
index 0000000..968063a
--- /dev/null
+++ b/websites/my-website/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" =""><head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>My page</title>
+    <!-- Bootstrap core CSS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+	
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <style>
+		html, body
+		{
+			width:100%;
+			height:100%;
+		}
+    </style>
+  <style id="vvvebjs-styles"></style></head>
+  <body>
+    <!-- Page Content -->
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12 text-center">
+          <h1 class="mt-5">Bootstrap 5 start page</h1>
+          <p class="lead">Start by dragging components to page or double click to edit text</p>
+        </div>
+      </div>
+    </div>
+  
+
+</body></html>
\ No newline at end of file
diff --git a/websites/my-website/project.json b/websites/my-website/project.json
new file mode 100644
index 0000000..534e4cb
--- /dev/null
+++ b/websites/my-website/project.json
@@ -0,0 +1,6 @@
+{
+  "name": "My Website",
+  "slug": "my-website",
+  "description": "",
+  "created_at": "2026-05-17T13:53:12"
+}
\ No newline at end of file
diff --git a/websites/second-web/project.json b/websites/second-web/project.json
new file mode 100644
index 0000000..15b2603
--- /dev/null
+++ b/websites/second-web/project.json
@@ -0,0 +1,6 @@
+{
+  "name": "Second Web",
+  "slug": "second-web",
+  "description": "",
+  "created_at": "2026-05-17T13:53:12"
+}
\ No newline at end of file