<!DOCTYPE html>

<head>

<title>0寻漫 - 全景文创智能设计工作台</title>

<style>

:root {

--primary-accent: #eab308;

--secondary-accent: #1f2937;

}

body { background-color: #f3f4f6; font-family: 'Roboto', 'Noto Serif SC', sans-serif; overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.preview-container { transform: scale(0.65); transform-origin: top left; width: 875px; }

.postcard { width: 875px; height: 550px; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; border-radius: 4px; transition: all 0.3s ease; }

.front-bg { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.85)), url('https://images.unsplash.com/photo-1541888049100-34e81561fbe2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover; height: 100%; width: 100%; transition: opacity 0.3s ease; }

.qr-bg { background: url('https://upload.wikimedia.org/wikipedia/commons/d/d0/QR_code_for_mobile_English_Wikipedia.svg') center/cover; }

.post-stamp-box { width: 80px; height: 90px; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 14px; font-family: sans-serif; }

.address-line { border-bottom: 1px solid #aaa; height: 40px; width: 100%; }

.zip-box { width: 25px; height: 30px; border: 1px solid #ff4d4f; display: inline-block; margin-right: 2px; }

[contenteditable="true"]:hover { background-color: rgba(255, 255, 255, 0.2); outline: 1px dashed #ccc; border-radius: 4px; cursor: text; }

[contenteditable="true"]:focus { background-color: rgba(255, 255, 255, 0.4); outline: 2px solid #3b82f6; border-radius: 4px; }

.text-dark-editable[contenteditable="true"]:hover { background-color: rgba(0, 0, 0, 0.05); outline: 1px dashed #666; }

.text-dark-editable[contenteditable="true"]:focus { background-color: rgba(0, 0, 0, 0.05); outline: 2px solid #3b82f6; }

.dynamic-border { border-color: var(--primary-accent) !important; }

.dynamic-text { color: var(--primary-accent) !important; }

.dynamic-bg { background-color: var(--secondary-accent) !important; }

.tab-active { border-bottom: 3px solid #3b82f6; color: #1d4ed8; font-weight: bold; }

.tab-inactive { color: #6b7280; font-weight: normal; }

.tab-inactive:hover { color: #374151; }

</style>

</head>

<h1 class="text-xl font-bold tracking-widest">0寻漫 <span class="font-light text-gray-400 text-sm ml-2">全景文创智能设计台</span></h1>

</div>

</div>

</header>

<h2 class="text-lg font-bold text-gray-800 border-l-4 border-blue-500 pl-2 mb-4">1. 基础信息与智能策划</h2>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-1">拍摄场景名称：</label>

</div>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-1">期望视觉风格：</label>

<option value="科技前沿、现代感、硬核">科技硬核风 (适合大创工场/实验室)</option>

<option value="文艺清新、高级留白、诗意">文艺清新风 (适合美术馆/书屋)</option>

<option value="历史沉淀、古典人文、厚重">历史人文风 (适合古建筑/图书馆)</option>

</select>

</div>

✨ AI 写文案

</button>

🎨 AI 算配色

</button>

</div>

<p class="text-xs text-gray-400 mt-1">* 提示：右侧预览区的文字可直接点击进行手动修改。</p>

</div>

</section>

<h2 class="text-lg font-bold text-gray-800 border-l-4 border-blue-500 pl-2 mb-4">2. 本地素材装载</h2>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-1">上传品牌/学校 Logo (透明PNG佳)：</label>

</div>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-1">上传全景正面海报图 (主视觉)：</label>

</div>

<div>

<label class="block text-sm font-semibold text-gray-700 mb-1">上传全景漫游二维码：</label>

</div>

</section>

<h2 class="text-lg font-bold text-blue-800 mb-3">3. 结课作品交付区</h2>

<div>

<label class="block text-xs font-semibold text-blue-800 mb-1">1. 提交印刷级 JPG 效果图：</label>

</div>

<div>

<label class="block text-xs font-semibold text-blue-800 mb-1">2. 提交 PSD 完整源文件：</label>

</div>

📤 提交作品并发布至展厅

</button>

</div>

</section>

</div>

<p class="text-gray-500 text-sm font-bold">👀 实时设计预览区 (175mm × 110mm 比例)</p>

</div>

沈阳城市学院<br>Shenyang City University

</div>

<h2 id="front-title" contenteditable="true" class="text-5xl font-black text-white tracking-widest mb-1 shadow-sm inline-block">绿岛大创工场</h2>

<br>

<p id="front-slogan" contenteditable="true" class="font-sans tracking-[0.25em] uppercase text-sm font-bold inline-block mt-2 dynamic-text">Innovation Space • AR Tour</p>

</div>

思想的火花在这里碰撞，创新的梦想在这里起航。用全景技术记录每一个改变未来的瞬间。

</p>

</div>

</div>

<div>

<h3 id="back-title" contenteditable="true" class="text-xl font-bold text-gray-800 mb-2 font-sans tracking-wide text-dark-editable">全景探索视界</h3>

绿岛大创工场是青年创客的摇篮。扫描下方二维码，跨越物理空间的限制，720度沉浸式漫游各大创新实验室，感受科技与灵感交织的魅力。

</p>

</div>

</div>

<p class="text-xs text-gray-500 font-sans mt-1">Scan to start VR Tour</p>

<p class="text-[10px] text-blue-500 font-sans mt-1">Powered by 0寻漫</p>

</div>

</div>

<div>

<h2 class="text-3xl font-bold text-gray-800">优秀作品展厅</h2>

<p class="text-gray-500 mt-2">2026级虚拟现实技术专业结课项目成果库</p>

</div>

<div class="text-sm text-gray-400">Powered by 0寻漫工作室</div>

</div>

<h3 class="font-bold text-lg text-gray-800">绿岛图书馆</h3>

<p class="text-xs text-blue-500 mb-3">#历史人文风</p>

<p class="text-sm text-gray-600 line-clamp-2">书香浸润岁月，光影镌刻时光。利用全景影像技术，将知识的殿堂折叠于掌心之间。</p>

</div>

</main>

<p id="loader-text" class="text-lg font-bold tracking-widest">文件打包并上传至服务器中...</p>

</div>

// ==========================================

// 核心修改：将请求地址指向我们上传的 PHP 代理文件

// ==========================================

const apiUrl = "/gemini-proxy.php";

async function fetchWithRetry(url, options, maxRetries = 3) {

for (let i = 0; i < maxRetries; i++) {

try {

const response = await fetch(url, options);

if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

return await response.json();

} catch (error) {

if (i === maxRetries - 1) throw error;

await new Promise(resolve => setTimeout(resolve, 1500));

}

function switchTab(tab) {

const wsView = document.getElementById('view-workspace');

const glView = document.getElementById('view-gallery');

const wsTab = document.getElementById('tab-workspace');

const glTab = document.getElementById('tab-gallery');

if (tab === 'workspace') {

wsView.classList.remove('hidden'); glView.classList.add('hidden');

wsTab.className = "pb-1 tab-active transition"; glTab.className = "pb-1 tab-inactive transition";

} else {

wsView.classList.add('hidden'); glView.classList.remove('hidden');

wsTab.className = "pb-1 tab-inactive transition"; glTab.className = "pb-1 tab-active transition";

}

function handleImageUpload(inputId, targetCallback) {

document.getElementById(inputId).addEventListener('change', function(e) {

const file = e.target.files[0];

if (file) {

const url = URL.createObjectURL(file);

targetCallback(url);

}

});

}

handleImageUpload('upload-logo', (url) => {

const img = document.getElementById('preview-logo');

img.src = url; img.classList.remove('bg-white', 'p-1');

});

handleImageUpload('upload-bg', (url) => {

document.getElementById('front-bg-layer').style.backgroundImage = `linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.85)), url('${url}')`;

window.currentBgUrl = url;

});

handleImageUpload('upload-qr', (url) => {

document.getElementById('preview-qr').style.backgroundImage = `url('${url}')`;

});

function setButtonLoading(btnId, isLoading, originalText) {

const btn = document.getElementById(btnId);

if (isLoading) {

btn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> 思考中...`;

btn.disabled = true; btn.classList.add('opacity-70');

} else {

btn.innerHTML = originalText; btn.disabled = false; btn.classList.remove('opacity-70');

}

async function generateAICopy() {

const location = document.getElementById('ai-location').value || '全景风光';

const style = document.getElementById('ai-style').value;

const originalText = "✨ AI 写文案";

setButtonLoading('btn-ai-copy', true, originalText);

const promptText = `你是一名文创策划大师。正在制作全景明信片。场景：【${location}】。风格：【${style}】。请务必以纯JSON格式返回，不要包含任何markdown标记（如\`\`\`json）。格式如下：{"frontTitle": "正面短标题", "frontSlogan": "英文副标题", "backDescription": "背面80字中文介绍", "frontDesc": "正面30字介绍"}`;

const payload = {

contents: [{ parts: [{ text: promptText }] }]

};

try {

const data = await fetchWithRetry(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });

let rawText = data.candidates[0].content.parts[0].text;

// 去除可能存在的 markdown 代码块包裹

rawText = rawText.replace(/```json/g, '').replace(/```/g, '').trim();

const aiContent = JSON.parse(rawText);

document.getElementById('front-title').innerText = aiContent.frontTitle;

document.getElementById('front-slogan').innerText = aiContent.frontSlogan;

document.getElementById('back-desc').innerText = aiContent.backDescription;

document.getElementById('back-title').innerText = "云游 " + aiContent.frontTitle;

document.getElementById('front-desc').innerText = aiContent.frontDesc;

} catch (error) {

alert("生成文案失败，请确保您的服务器能够顺畅连接外网。");

console.error(error);

} finally { setButtonLoading('btn-ai-copy', false, originalText); }

}

async function generateAIColor() {

const location = document.getElementById('ai-location').value;

const style = document.getElementById('ai-style').value;

const originalText = "🎨 AI 算配色";

setButtonLoading('btn-ai-color', true, originalText);

const promptText = `作为排版设计师，为【${location}】的明信片推荐配色。风格：【${style}】。请务必以纯JSON格式返回，不要包含任何markdown标记。格式如下：{"primaryHex": "#eab308", "secondaryHex": "#1f2937"}`;

const payload = {

contents: [{ parts: [{ text: promptText }] }]

};

try {

const data = await fetchWithRetry(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });

let rawText = data.candidates[0].content.parts[0].text;

rawText = rawText.replace(/```json/g, '').replace(/```/g, '').trim();

const aiContent = JSON.parse(rawText);

document.documentElement.style.setProperty('--primary-accent', aiContent.primaryHex);

document.documentElement.style.setProperty('--secondary-accent', aiContent.secondaryHex);

} catch (error) {

alert("配色计算失败，请检查网络。");

console.error(error);

} finally { setButtonLoading('btn-ai-color', false, originalText); }

}

function submitProject() {

const jpgInput = document.getElementById('submit-jpg');

const psdInput = document.getElementById('submit-psd');

if (!jpgInput.files.length || !psdInput.files.length) {

alert("⚠️ 请先上传您本地输出好的 JPG效果图和 PSD源文件！\n\n（注：当前为前端模拟展示，实际教学中请让学生将源文件打包发送至您的指定云盘/邮箱）");

return;

}

const title = document.getElementById('front-title').innerText;

const desc = document.getElementById('front-desc').innerText;

const styleText = document.getElementById('ai-style').options[document.getElementById('ai-style').selectedIndex].text;

const bgUrl = window.currentBgUrl || 'https://images.unsplash.com/photo-1541888049100-34e81561fbe2?ixlib=rb-4.0.3&w=800&q=80';

const loader = document.getElementById('global-loader');

loader.classList.remove('hidden');

loader.classList.add('flex');

setTimeout(() => {

loader.classList.add('hidden');

loader.classList.remove('flex');

const cardHtml = `

<h3 class="font-bold text-lg text-gray-800">${title} <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded ml-2">最新上传</span></h3>

<p class="text-xs text-blue-500 mb-3">#${styleText.split(' ')[0]}</p>

<span class="text-xs text-green-600 font-bold flex items-center"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>展示更新成功</span>

</div>

const galleryGrid = document.getElementById('gallery-grid');

galleryGrid.insertAdjacentHTML('afterbegin', cardHtml);

jpgInput.value = '';

psdInput.value = '';

alert("🎉 恭喜！前台作品展厅已更新。（注：源文件请学生通过云盘上交）");

switchTab('gallery');

}, 2000);

}

</script>

</body>

</html>