Spaces:

new-human
/

interactive-map-studio

Sleeping

App Files Files Community

duqing2026 commited on 17 days ago

Commit

224e9b3

1 Parent(s): 9be94e6

chore: 增加默认演示数据，优化模板配置，确保HF运行稳定

Browse files

Files changed (5) hide show

Dockerfile +15 -0
README.md +46 -5
app.py +40 -0
requirements.txt +2 -0
templates/index.html +466 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,15 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Create storage directory with correct permissions
+RUN mkdir -p storage && chmod 777 storage
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md CHANGED Viewed

@@ -1,10 +1,51 @@
----
-title: Interactive Map Studio
-emoji: 👁
-colorFrom: red
 colorTo: indigo
 sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+title: 交互式地图工坊 (Interactive Map Studio)
+emoji: 🗺️
+colorFrom: blue
 colorTo: indigo
 sdk: docker
 pinned: false
+short_description: 为图片添加交互式热点，一键生成可点击的楼层指引、游戏地图或产品展示图。
 ---
+# 交互式地图工坊 (Interactive Map Studio)
+这是一个可视化的交互式地图制作工具，专为不需要编程基础的用户设计。你可以上传任意图片（如楼层平面图、游戏地图、产品拆解图），在图片上添加可点击的“热点”标记，并导出为独立的 HTML 文件或嵌入代码。
+## ✨ 主要功能
+- **可视化编辑器**：拖拽上传图片，点击即可添加热点。
+- **自定义热点**：支持修改图标（FontAwesome）、颜色、标题和描述内容。
+- **实时预览**：在编辑过程中随时切换到预览模式，体验最终交互效果。
+- **一键导出**：生成包含所有逻辑的单文件 HTML，无需服务器即可部署，或者嵌入到你的网站中。
+- **多场景适用**：
+  - 🏠 **房产/民宿**：展示房间布局和细节说明。
+  - 🎮 **游戏攻略**：标记地图上的资源点、BOSS 位置。
+  - 🏢 **商场/展会**：制作楼层指引和展位介绍。
+  - 🛍️ **电商详情**：在产品图上标记各个部件的功能。
+## 🛠️ 技术栈
+- **Frontend**: Vue 3 + Tailwind CSS (via CDN for simplicity)
+- **Backend**: Python Flask (Serving static files)
+- **Deployment**: Dockerized for Hugging Face Spaces
+## 🚀 快速开始
+1. 上传一张底图（支持拖拽）。
+2. 点击图片任意位置添加热点。
+3. 在左侧面板编辑热点的标题、描述、图标和颜色。
+4. 点击右上角“导出 HTML”保存成果。
+## 📦 部署
+本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces 或任何支持 Docker 的平台。
+```bash
+# 本地运行
+docker build -t interactive-map-studio .
+docker run -p 7860:7860 interactive-map-studio
+```
+## 📄 许可证
+MIT License

app.py ADDED Viewed

	@@ -0,0 +1,40 @@

+from flask import Flask, render_template, request, jsonify, send_from_directory
+import os
+import json
+from datetime import datetime
+app = Flask(__name__)
+# Configure Jinja2 to use [[ ]] to avoid conflict with Vue
+class CustomFlask(Flask):
+    jinja_options = Flask.jinja_options.copy()
+    jinja_options.update(dict(
+        variable_start_string='[[',
+        variable_end_string=']]',
+    ))
+app = CustomFlask(__name__)
+# Ensure storage directory exists
+STORAGE_DIR = "storage"
+if not os.path.exists(STORAGE_DIR):
+    os.makedirs(STORAGE_DIR)
+PROJECT_INFO = {
+    "name": "interactive-map-studio",
+    "title_cn": "交互式地图工坊",
+    "short_description": "为图片添加交互式热点，制作可点击的楼层指引、游戏地图或产品展示图。",
+    "version": "1.0.0"
+}
+@app.route('/')
+def index():
+    return render_template('index.html', project=PROJECT_INFO)
+@app.route('/health')
+def health():
+    return "OK"
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,466 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>[[ project.title_cn ]] - [[ project.name ]]</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+        .marker-pulse {
+            animation: pulse-animation 2s infinite;
+        }
+        @keyframes pulse-animation {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .map-container {
+            position: relative;
+            overflow: hidden;
+            user-select: none;
+            cursor: crosshair;
+        }
+        .map-container.preview-mode {
+            cursor: default;
+        }
+        .marker {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            transition: all 0.2s ease;
+            z-index: 10;
+        }
+        .marker:hover {
+            z-index: 20;
+            transform: translate(-50%, -50%) scale(1.2);
+        }
+        .tooltip-card {
+            position: absolute;
+            z-index: 30;
+            background: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            padding: 1rem;
+            width: 250px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s;
+            transform: translate(-50%, -110%); /* Default above */
+        }
+        .tooltip-card.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        /* Arrow */
+        .tooltip-card::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -8px;
+            border-width: 8px;
+            border-style: solid;
+            border-color: white transparent transparent transparent;
+        }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 h-screen flex flex-col overflow-hidden">
+    <div id="app" v-cloak class="flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-slate-200 px-6 py-3 flex justify-between items-center shadow-sm z-50">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white text-xl">
+                    <i class="fa-solid fa-map-location-dot"></i>
+                </div>
+                <div>
+                    <h1 class="font-bold text-lg text-slate-800">[[ project.title_cn ]]</h1>
+                    <p class="text-xs text-slate-500">v[[ project.version ]]</p>
+                </div>
+            </div>
+            <div class="flex items-center gap-3">
+                <button @click="isPreview = !isPreview"
+                    :class="isPreview ? 'bg-indigo-100 text-indigo-700 border-indigo-200' : 'bg-white border-slate-300 hover:bg-slate-50'"
+                    class="px-4 py-2 rounded-lg border text-sm font-medium flex items-center gap-2 transition-colors">
+                    <i :class="isPreview ? 'fa-solid fa-eye' : 'fa-regular fa-eye'"></i>
+                    {{ isPreview ? '退出预览' : '预览交互' }}
+                </button>
+                <button @click="exportProject" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 shadow-sm transition-colors">
+                    <i class="fa-solid fa-download"></i>
+                    导出 HTML
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="flex-1 flex overflow-hidden">
+            <!-- Left Sidebar (Settings) -->
+            <aside class="w-80 bg-white border-r border-slate-200 flex flex-col z-40">
+                <div class="p-4 border-b border-slate-100">
+                    <h2 class="font-semibold text-slate-800 mb-4">地图设置</h2>
+                    <!-- Image Upload -->
+                    <div class="mb-6">
+                        <label class="block text-sm font-medium text-slate-700 mb-2">底图上传</label>
+                        <div class="relative border-2 border-dashed border-slate-300 rounded-lg p-6 text-center hover:border-blue-500 transition-colors bg-slate-50 cursor-pointer"
+                             @dragover.prevent @drop.prevent="handleDrop">
+                            <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                            <div v-if="!bgImage">
+                                <i class="fa-regular fa-image text-2xl text-slate-400 mb-2"></i>
+                                <p class="text-xs text-slate-500">点击或拖拽上传图片</p>
+                                <button @click.stop="loadDemoImage" class="mt-2 text-xs text-blue-600 hover:underline">使用演示地图</button>
+                            </div>
+                            <div v-else class="relative h-20 w-full">
+                                <img :src="bgImage" class="h-full w-full object-cover rounded">
+                                <button @click.stop="bgImage = null; markers = []" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600">×</button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Marker Editor (Only visible when a marker is selected) -->
+                    <div v-if="selectedMarkerIndex !== -1" class="animate-fade-in">
+                        <div class="flex justify-between items-center mb-3">
+                            <h3 class="font-medium text-slate-700 text-sm">编辑热点 #{{ selectedMarkerIndex + 1 }}</h3>
+                            <button @click="deleteMarker(selectedMarkerIndex)" class="text-red-500 text-xs hover:text-red-700">
+                                <i class="fa-solid fa-trash"></i> 删除
+                            </button>
+                        </div>
+                        <div class="space-y-3">
+                            <div>
+                                <label class="block text-xs font-medium text-slate-500 mb-1">标题</label>
+                                <input v-model="markers[selectedMarkerIndex].title" type="text" class="w-full px-3 py-2 border border-slate-300 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="输入标题...">
+                            </div>
+                            <div>
+                                <label class="block text-xs font-medium text-slate-500 mb-1">描述内容</label>
+                                <textarea v-model="markers[selectedMarkerIndex].desc" rows="3" class="w-full px-3 py-2 border border-slate-300 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="输入描述..."></textarea>
+                            </div>
+                            <div class="grid grid-cols-2 gap-3">
+                                <div>
+                                    <label class="block text-xs font-medium text-slate-500 mb-1">图标</label>
+                                    <select v-model="markers[selectedMarkerIndex].icon" class="w-full px-2 py-2 border border-slate-300 rounded text-sm bg-white">
+                                        <option value="fa-location-dot">📍 定位</option>
+                                        <option value="fa-circle-info">ℹ️ 信息</option>
+                                        <option value="fa-star">⭐ 星标</option>
+                                        <option value="fa-camera">📷 相机</option>
+                                        <option value="fa-shop">🏪 商店</option>
+                                        <option value="fa-restroom">🚻 洗手间</option>
+                                        <option value="fa-utensils">🍴 餐饮</option>
+                                        <option value="fa-plus">➕ 加号</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-medium text-slate-500 mb-1">颜色</label>
+                                    <input type="color" v-model="markers[selectedMarkerIndex].color" class="w-full h-9 border border-slate-300 rounded cursor-pointer">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="text-center py-8 text-slate-400 bg-slate-50 rounded-lg border border-dashed border-slate-200">
+                        <p class="text-sm">点击地图任意位置<br>添加新热点</p>
+                    </div>
+                </div>
+                <!-- Markers List -->
+                <div class="flex-1 overflow-y-auto p-4">
+                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">热点列表 ({{ markers.length }})</h3>
+                    <div class="space-y-2">
+                        <div v-for="(marker, index) in markers" :key="index"
+                             @click="selectMarker(index)"
+                             :class="{'border-blue-500 ring-1 ring-blue-500 bg-blue-50': selectedMarkerIndex === index, 'border-slate-200 hover:border-blue-300': selectedMarkerIndex !== index}"
+                             class="p-3 border rounded-lg cursor-pointer transition-all flex items-start gap-3 bg-white">
+                            <div class="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs shrink-0" :style="{backgroundColor: marker.color}">
+                                <i class="fa-solid" :class="marker.icon"></i>
+                            </div>
+                            <div class="overflow-hidden">
+                                <div class="font-medium text-sm truncate text-slate-700">{{ marker.title || '未命名热点' }}</div>
+                                <div class="text-xs text-slate-500 truncate">{{ marker.desc || '无描述' }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+            <!-- Canvas Area -->
+            <main class="flex-1 bg-slate-100 relative overflow-auto flex items-center justify-center p-8">
+                <div v-if="!bgImage" class="text-center text-slate-400">
+                    <i class="fa-regular fa-image text-6xl mb-4 opacity-30"></i>
+                    <p>请先上传底图</p>
+                </div>
+                <div v-else
+                     ref="mapContainer"
+                     class="map-container shadow-2xl rounded-lg bg-white relative inline-block"
+                     :class="{'preview-mode': isPreview}"
+                     @click="handleMapClick">
+                    <img :src="bgImage" class="max-w-none" style="max-height: 80vh; display: block;">
+                    <!-- Markers -->
+                    <div v-for="(marker, index) in markers" :key="index"
+                         class="marker w-8 h-8 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer"
+                         :class="{'marker-pulse': selectedMarkerIndex === index && !isPreview}"
+                         :style="{
+                             left: marker.x + '%',
+                             top: marker.y + '%',
+                             backgroundColor: marker.color,
+                             fontSize: '14px'
+                         }"
+                         @click.stop="handleMarkerClick(index)">
+                        <i class="fa-solid" :class="marker.icon"></i>
+                        <!-- Tooltip (Only visible in preview or if active) -->
+                        <div v-if="isPreview && activeTooltipIndex === index"
+                             class="tooltip-card active"
+                             @click.stop>
+                            <h4 class="font-bold text-slate-800 mb-1">{{ marker.title }}</h4>
+                            <p class="text-sm text-slate-600 leading-relaxed">{{ marker.desc }}</p>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, reactive, onMounted } = Vue;
+        createApp({
+            setup() {
+                const bgImage = ref(null);
+                const markers = ref([]);
+                const selectedMarkerIndex = ref(-1);
+                const isPreview = ref(false);
+                const activeTooltipIndex = ref(-1);
+                const fileInput = ref(null);
+                const mapContainer = ref(null);
+                // Demo Image
+                const DEMO_IMAGE = "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=2070&auto=format&fit=crop";
+                const loadDemoImage = () => {
+                    // Convert URL to Base64 to ensure offline/export works cleanly without CORS issues if possible,
+                    // but for demo simple URL is fine. However, html2canvas prefers base64.
+                    // Let's just use the URL for now, but in a real app we might proxy it.
+                    bgImage.value = DEMO_IMAGE;
+                    markers.value = [
+                        { x: 25, y: 40, color: '#ef4444', icon: 'fa-bed', title: '主卧室', desc: '宽敞的主卧室，配有独立卫浴和步入式衣帽间。' },
+                        { x: 55, y: 60, color: '#3b82f6', icon: 'fa-couch', title: '客厅', desc: '开放式客厅，连接餐厅，采光极佳。' },
+                        { x: 75, y: 30, color: '#10b981', icon: 'fa-utensils', title: '厨房', desc: '现代化厨房，配备高端电器和中岛台。' }
+                    ];
+                };
+                onMounted(() => {
+                    // Auto-load demo to提供默认数据，确保开箱即用
+                    loadDemoImage();
+                });
+                const handleFileChange = (e) => {
+                    const file = e.target.files[0];
+                    if (!file) return;
+                    readFile(file);
+                };
+                const handleDrop = (e) => {
+                    const file = e.dataTransfer.files[0];
+                    if (file && file.type.startsWith('image/')) {
+                        readFile(file);
+                    }
+                };
+                const readFile = (file) => {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        bgImage.value = e.target.result;
+                        markers.value = [];
+                        selectedMarkerIndex.value = -1;
+                    };
+                    reader.readAsDataURL(file);
+                };
+                const handleMapClick = (e) => {
+                    if (isPreview.value) {
+                        activeTooltipIndex.value = -1; // Close tooltips
+                        return;
+                    }
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const x = ((e.clientX - rect.left) / rect.width) * 100;
+                    const y = ((e.clientY - rect.top) / rect.height) * 100;
+                    markers.value.push({
+                        x: x.toFixed(2),
+                        y: y.toFixed(2),
+                        title: '新热点',
+                        desc: '这里是描述内容...',
+                        color: '#3b82f6',
+                        icon: 'fa-location-dot'
+                    });
+                    selectedMarkerIndex.value = markers.value.length - 1;
+                };
+                const handleMarkerClick = (index) => {
+                    if (isPreview.value) {
+                        activeTooltipIndex.value = activeTooltipIndex.value === index ? -1 : index;
+                    } else {
+                        selectedMarkerIndex.value = index;
+                    }
+                };
+                const selectMarker = (index) => {
+                    selectedMarkerIndex.value = index;
+                    // Exit preview if selecting from list
+                    isPreview.value = false;
+                };
+                const deleteMarker = (index) => {
+                    markers.value.splice(index, 1);
+                    selectedMarkerIndex.value = -1;
+                };
+                const exportProject = () => {
+                    if (!bgImage.value) return alert('请先上传图片');
+                    const htmlContent = generateExportHTML(bgImage.value, markers.value, PROJECT_INFO);
+                    const blob = new Blob([htmlContent], { type: 'text/html' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = 'interactive-map.html';
+                    a.click();
+                    URL.revokeObjectURL(url);
+                };
+                // Helper to generate the standalone HTML
+                const generateExportHTML = (img, markers, info) => {
+                    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${info.title_cn} Export</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body { margin: 0; padding: 0; background: #f8fafc; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+        .map-wrapper { position: relative; display: inline-block; max-width: 100%; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+        .map-img { display: block; max-width: 100%; height: auto; }
+        .marker {
+            position: absolute; width: 32px; height: 32px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            color: white; transform: translate(-50%, -50%); cursor: pointer;
+            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+            transition: transform 0.2s;
+            font-size: 14px;
+        }
+        .marker:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 100; }
+        .tooltip {
+            position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
+            background: white; color: #334155; padding: 12px; border-radius: 6px;
+            width: 220px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+            opacity: 0; visibility: hidden; transition: all 0.2s; pointer-events: none;
+            text-align: left;
+        }
+        .tooltip h4 { margin: 0 0 4px 0; color: #1e293b; font-size: 14px; }
+        .tooltip p { margin: 0; font-size: 12px; line-height: 1.4; color: #64748b; }
+        .tooltip::after {
+            content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
+            border-width: 6px; border-style: solid; border-color: white transparent transparent transparent;
+        }
+        .marker.active .tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
+        /* Mobile responsive */
+        @media (max-width: 640px) {
+            .tooltip { width: 180px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="map-wrapper" id="map">
+        <img src="${img}" class="map-img" alt="Map">
+        <!-- Markers generated by JS -->
+    </div>
+    <script>
+        const markers = ${JSON.stringify(markers)};
+        const mapEl = document.getElementById('map');
+        let activeMarker = null;
+        markers.forEach((m, i) => {
+            const el = document.createElement('div');
+            el.className = 'marker';
+            el.style.left = m.x + '%';
+            el.style.top = m.y + '%';
+            el.style.backgroundColor = m.color;
+            el.innerHTML = '<i class="fa-solid ' + m.icon + '"></i>' +
+                           '<div class="tooltip">' +
+                               '<h4>' + (m.title || '') + '</h4>' +
+                               '<p>' + (m.desc || '') + '</p>' +
+                           '</div>';
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                // Toggle active class
+                if (activeMarker && activeMarker !== el) {
+                    activeMarker.classList.remove('active');
+                }
+                if (el.classList.contains('active')) {
+                    el.classList.remove('active');
+                    activeMarker = null;
+                } else {
+                    el.classList.add('active');
+                    activeMarker = el;
+                }
+            });
+            mapEl.appendChild(el);
+        });
+        // Close when clicking elsewhere
+        document.addEventListener('click', () => {
+            if (activeMarker) {
+                activeMarker.classList.remove('active');
+                activeMarker = null;
+            }
+        });
+    <\/script>
+</body>
+</html>`;
+                };
+                return {
+                    bgImage,
+                    markers,
+                    selectedMarkerIndex,
+                    isPreview,
+                    activeTooltipIndex,
+                    fileInput,
+                    mapContainer,
+                    handleFileChange,
+                    handleDrop,
+                    handleMapClick,
+                    handleMarkerClick,
+                    selectMarker,
+                    deleteMarker,
+                    loadDemoImage,
+                    exportProject,
+                    PROJECT_INFO: [[ project | tojson ]]
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>