468 lines
28 KiB
HTML
468 lines
28 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}工作台 - AI 视界{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- 中间：AI 功能设定区 -->
|
||
<aside
|
||
class="w-80 lg:w-[340px] flex-shrink-0 glass-sidebar flex flex-col z-30 border-r border-slate-200/60 shadow-xl bg-white/50 backdrop-blur-xl">
|
||
<div class="p-6 pb-2">
|
||
<h2 class="text-xl font-black text-slate-900 tracking-tight">创作工作台</h2>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">智能试戴引擎配置</p>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-6 custom-scrollbar">
|
||
<section id="authSection" class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">01</span>
|
||
<h3 class="text-sm font-bold text-slate-800">授权验证</h3>
|
||
</div>
|
||
<!-- 积分显示 -->
|
||
<div id="pointsBadge"
|
||
class="{% if not g.user %}hidden{% endif %} px-2 py-0.5 bg-amber-50 text-amber-600 border border-amber-100 rounded-lg text-[10px] font-black uppercase">
|
||
可用积分: <span id="pointsDisplay">{{ g.user.points if g.user else 0 }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-2 hidden">
|
||
<button id="modeTrialBtn"
|
||
class="flex-1 py-2 rounded-xl text-[10px] font-bold border-2 border-indigo-500 bg-indigo-50 text-indigo-600 transition-all">积分/试用模式</button>
|
||
<button id="modeKeyBtn"
|
||
class="flex-1 py-2 rounded-xl text-[10px] font-bold border border-slate-200 text-slate-400 hover:bg-slate-50 transition-all">自定义
|
||
Key</button>
|
||
</div>
|
||
|
||
<div id="premiumToggle"
|
||
class="flex items-center justify-between bg-amber-50/50 border border-amber-100/50 p-3 rounded-2xl animate-in fade-in duration-500">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-7 h-7 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center">
|
||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||
</div>
|
||
<div>
|
||
<div class="text-[10px] font-black text-amber-700 uppercase tracking-tight">优质渲染模式</div>
|
||
<div class="text-[8px] text-amber-500 font-bold">使用专属通道 · 积分消耗 X2</div>
|
||
</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="isPremium" class="sr-only peer">
|
||
<div
|
||
class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-500">
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="keyInputGroup" class="hidden relative group animate-in slide-in-from-top-2 duration-300">
|
||
<input id="apiKey" type="password" placeholder="输入您的 OpenAI API 密钥"
|
||
class="w-full bg-white border border-slate-200 rounded-2xl p-3.5 pl-11 text-xs outline-none focus:border-indigo-500 transition-all shadow-sm">
|
||
<i data-lucide="key-round" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-indigo-400"></i>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">02</span>
|
||
<h3 class="text-sm font-bold text-slate-800">渲染设定</h3>
|
||
</div>
|
||
<button id="openVisualizerBtn"
|
||
class="text-[10px] font-bold text-indigo-500 hover:text-indigo-600 flex items-center gap-1 transition-colors">
|
||
<i data-lucide="video" class="w-3.5 h-3.5"></i>
|
||
拍摄角度设置器
|
||
</button>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="cpu" class="w-3 h-3"></i>计算模型</label>
|
||
<select id="modelSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-xs font-bold outline-none focus:border-indigo-500 transition-all"></select>
|
||
</div>
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="layout" class="w-3 h-3"></i>画面比例</label>
|
||
<select id="ratioSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-xs font-bold outline-none focus:border-indigo-500 transition-all"></select>
|
||
</div>
|
||
<div id="sizeGroup" class="hidden space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="maximize" class="w-3 h-3"></i>输出尺寸</label>
|
||
<select id="sizeSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-xs font-bold outline-none focus:border-indigo-500 transition-all"></select>
|
||
</div>
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="copy" class="w-3 h-3"></i>生成数量</label>
|
||
<select id="numSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-xs font-bold outline-none focus:border-indigo-500 transition-all">
|
||
<option value="1">1 张</option>
|
||
<option value="2">2 张</option>
|
||
<option value="3">3 张</option>
|
||
<option value="4">4 张</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="rounded-2xl border border-slate-100 overflow-hidden bg-white shadow-sm">
|
||
<select id="promptTpl"
|
||
class="w-full bg-slate-50 border-b border-slate-100 p-3 text-[10px] font-bold text-indigo-600 outline-none cursor-pointer">
|
||
<option value="manual">✨ 自定义创作</option>
|
||
</select>
|
||
<div id="deletePromptContainer" class="hidden relative h-0">
|
||
<button id="deletePromptBtn"
|
||
class="absolute -top-10 right-2 w-8 h-8 rounded-lg bg-rose-50 border border-rose-100 text-rose-500 hover:bg-rose-100 transition-colors flex items-center justify-center z-10"
|
||
title="删除这个收藏">
|
||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
<div class="relative group/area">
|
||
<textarea id="manualPrompt" rows="4"
|
||
class="w-full p-3 text-xs outline-none resize-none leading-relaxed"
|
||
placeholder="描述您的需求..."></textarea>
|
||
<button id="openSavePromptBtn"
|
||
class="absolute bottom-2 right-2 p-1.5 bg-white/80 backdrop-blur-sm border border-slate-100 text-slate-400 rounded-lg hover:text-indigo-600 hover:border-indigo-200 transition-all opacity-0 group-hover/area:opacity-100"
|
||
title="收藏当前提示词">
|
||
<i data-lucide="bookmark-plus" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="space-y-4 pb-2">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">03</span>
|
||
<h3 class="text-sm font-bold text-slate-800">参考底图</h3>
|
||
</div>
|
||
<div id="dropZone" class="relative group">
|
||
<div
|
||
class="border-2 border-dashed border-slate-100 rounded-3xl p-6 text-center bg-white/30 hover:border-indigo-200 transition-all cursor-pointer">
|
||
<i data-lucide="image-plus" class="w-6 h-6 mx-auto mb-2 text-slate-300"></i>
|
||
<p class="text-[10px] text-slate-400 font-bold">点击、拖拽或粘贴肖像照片</p>
|
||
</div>
|
||
<input id="fileInput" type="file" multiple class="absolute inset-0 opacity-0 cursor-pointer">
|
||
</div>
|
||
<div id="imagePreview" class="flex flex-wrap gap-3 py-1"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="p-6 bg-white/95 border-t border-slate-100">
|
||
<button id="submitBtn"
|
||
class="w-full btn-primary py-4 rounded-2xl shadow-lg hover:scale-[1.02] active:scale-[0.98] gap-2 flex items-center justify-center">
|
||
<i data-lucide="wand-2" class="w-5 h-5"></i>
|
||
<span class="text-base font-bold tracking-widest">立即生成作品</span>
|
||
</button>
|
||
<p id="costPreview" class="text-center text-[10px] text-amber-600 font-bold mt-2 hidden"></p>
|
||
<p id="loginHint" class="text-center text-[10px] text-slate-400 mt-2 {% if g.user %}hidden{% endif %}">
|
||
<i data-lucide="lock" class="w-2.5 h-2.5 inline"></i> 请先登录以使用生成功能
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧：主展示 -->
|
||
<main class="flex-1 relative flex flex-col bg-slate-50 overflow-hidden">
|
||
<div class="h-24 flex items-center justify-between px-12 relative z-10">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-2.5 h-2.5 bg-indigo-500 rounded-full animate-ping"></div>
|
||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest text-xs">引擎就绪</span>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-6">
|
||
<!-- 历史记录触发按钮 -->
|
||
<button id="showHistoryBtn"
|
||
class="flex items-center gap-2 bg-white/80 backdrop-blur-md px-4 py-2 rounded-2xl border border-white shadow-sm cursor-pointer hover:bg-white transition-all text-xs font-bold text-slate-600">
|
||
<i data-lucide="history" class="w-4 h-4 text-indigo-500"></i>
|
||
历史记录
|
||
</button>
|
||
<div id="userProfile" onclick="openPointsModal()"
|
||
class="{% if not g.user %}hidden{% endif %} flex items-center gap-3 bg-white/80 backdrop-blur-md px-4 py-2 rounded-2xl border border-white shadow-sm hover:bg-white transition-all cursor-pointer group">
|
||
<div
|
||
class="w-8 h-8 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||
<i data-lucide="wallet" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<span id="userPhoneDisplay" class="text-xs font-bold text-slate-600">{{ g.user.phone[:3] ~ "****" ~
|
||
g.user.phone[-4:] if g.user else "--" }}</span>
|
||
<span class="text-[9px] font-black text-amber-600 uppercase">余额: <span id="headerPoints">{{
|
||
g.user.points if g.user else 0 }}</span> 积分</span>
|
||
</div>
|
||
<button id="openPwdModalBtn" title="修改密码" onclick="event.stopPropagation(); openPwdModal()"
|
||
class="ml-1 p-1.5 text-slate-400 hover:text-indigo-600 transition-colors">
|
||
<i data-lucide="key-round" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
<a id="loginEntryBtn" href="/login"
|
||
class="{% if g.user %}hidden{% endif %} bg-indigo-600 text-white px-6 py-2.5 rounded-2xl text-xs font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all">
|
||
立即登录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1 flex flex-col p-8 relative overflow-hidden min-h-0">
|
||
<div id="statusInfo" class="absolute top-8 left-1/2 -translate-x-1/2 hidden z-20">
|
||
<div
|
||
class="bg-white/90 backdrop-blur-xl border border-indigo-100 px-6 py-3 rounded-2xl shadow-xl flex items-center gap-3">
|
||
<div class="w-2 h-2 bg-indigo-500 rounded-full animate-bounce"></div>
|
||
<span class="text-xs font-black text-slate-600 uppercase tracking-widest">AI 正在处理您的请求...</span>
|
||
</div>
|
||
</div>
|
||
<div id="resultCanvas" class="flex-1 w-full flex flex-col relative overflow-hidden">
|
||
<!-- 初始占位状态 -->
|
||
<div id="placeholder" class="flex-1 flex flex-col items-center justify-center text-center max-w-lg mx-auto">
|
||
<div
|
||
class="w-48 h-48 bg-white rounded-[4.5rem] shadow-2xl flex items-center justify-center rotate-6 mx-auto mb-12 border border-slate-100">
|
||
<i data-lucide="glasses" class="w-20 h-20 text-indigo-500"></i>
|
||
</div>
|
||
<h2 class="text-4xl font-black text-slate-900 mb-8">视界进化 · 艺术呈现</h2>
|
||
<p class="text-slate-500 text-lg font-medium">在左侧完成设定，开启 AI 试戴体验</p>
|
||
</div>
|
||
|
||
<div id="finalWrapper" class="hidden flex-1 w-full flex flex-col overflow-hidden">
|
||
<!-- 滚动区域 -->
|
||
<div class="flex-1 w-full overflow-y-auto custom-scrollbar px-8 py-10">
|
||
<div id="imageGrid"
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-10 w-full max-w-6xl mx-auto items-start"></div>
|
||
</div>
|
||
|
||
<!-- 固定底部操作栏 -->
|
||
<div id="resultActions"
|
||
class="w-full flex-shrink-0 bg-slate-50/80 backdrop-blur-sm border-t border-slate-200/60 py-6 flex items-center justify-center gap-8 z-10">
|
||
<!-- 全部下载按钮 -->
|
||
<button id="downloadAllBtn"
|
||
class="bg-indigo-600 text-white px-10 py-4 rounded-3xl text-sm font-bold shadow-xl shadow-indigo-100 hover:bg-indigo-700 hover:scale-105 active:scale-95 transition-all flex items-center gap-3">
|
||
<i data-lucide="download" class="w-5 h-5"></i>
|
||
<span>全部下载</span>
|
||
</button>
|
||
<!-- 重新生成按钮 -->
|
||
<button id="regenBtn"
|
||
class="w-16 h-16 bg-white border border-slate-100 rounded-3xl flex items-center justify-center text-slate-400 shadow-xl hover:text-indigo-600 transition-all hover:scale-110 active:scale-95 group">
|
||
<i data-lucide="refresh-cw"
|
||
class="w-6 h-6 group-hover:rotate-180 transition-transform duration-500"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史记录滑出抽屉 (子页面) -->
|
||
<div id="historyDrawer"
|
||
class="absolute inset-y-0 right-0 w-96 bg-white/95 backdrop-blur-2xl border-l border-slate-100 shadow-2xl z-50 translate-x-full transition-transform duration-500 flex flex-col">
|
||
<div class="p-8 border-b border-slate-100 flex items-center justify-between">
|
||
<div>
|
||
<h3 class="text-xl font-black text-slate-900">创作历史</h3>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">展示 90 天内的生成记录</p>
|
||
</div>
|
||
<button id="closeHistoryBtn"
|
||
class="w-10 h-10 rounded-xl hover:bg-slate-100 flex items-center justify-center text-slate-400 transition-colors">
|
||
<i data-lucide="x" class="w-5 h-5"></i>
|
||
</button>
|
||
</div>
|
||
<div id="historyList" class="flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar">
|
||
<!-- 历史记录项 -->
|
||
</div>
|
||
<!-- 加载更多触发器 -->
|
||
<div id="historyFooter" class="p-4 border-t border-slate-50 flex justify-center hidden">
|
||
<div class="flex items-center gap-2 text-[10px] font-bold text-slate-400 animate-pulse">
|
||
<i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>
|
||
正在加载更多...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 积分与钱包中心弹窗 -->
|
||
<div id="pointsModal"
|
||
class="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[60] flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
<div
|
||
class="bg-white w-full max-w-4xl rounded-[3rem] shadow-3xl overflow-hidden transform scale-95 transition-transform duration-300 flex flex-col h-[85vh]">
|
||
<div
|
||
class="px-10 py-8 border-b border-slate-100 flex items-center justify-between flex-shrink-0 bg-slate-50/50">
|
||
<div class="flex items-center gap-4">
|
||
<div
|
||
class="w-12 h-12 bg-amber-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-amber-200">
|
||
<i data-lucide="line-chart" class="w-6 h-6"></i>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-2xl font-black text-slate-900 tracking-tight">财富与积分中心</h2>
|
||
<p class="text-xs text-slate-400 font-bold uppercase tracking-widest mt-0.5">Wallet & Usage
|
||
Statistics</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closePointsModal()"
|
||
class="w-12 h-12 rounded-2xl hover:bg-slate-200/50 flex items-center justify-center text-slate-400 transition-colors">
|
||
<i data-lucide="x" class="w-6 h-6"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto p-10 space-y-10 custom-scrollbar">
|
||
<!-- 统计概览卡片 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div class="lg:col-span-2 bg-slate-50 rounded-[2.5rem] p-8 border border-slate-100">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="text-sm font-black text-slate-900 uppercase tracking-widest">消费趋势 (近7日)</h3>
|
||
<div class="flex items-center gap-4 text-[10px] font-bold">
|
||
<div class="flex items-center gap-1.5"><span
|
||
class="w-2 h-2 rounded-full bg-indigo-500"></span> 消耗积分</div>
|
||
<div class="flex items-center gap-1.5"><span
|
||
class="w-2 h-2 rounded-full bg-emerald-500"></span> 充值积分</div>
|
||
</div>
|
||
</div>
|
||
<div class="h-64">
|
||
<canvas id="pointsChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-6">
|
||
<div
|
||
class="bg-indigo-600 rounded-[2rem] p-8 text-white relative overflow-hidden shadow-2xl shadow-indigo-200">
|
||
<div class="relative z-10">
|
||
<p class="text-xs font-bold opacity-80 mb-2">当前可用余额</p>
|
||
<h4 class="text-5xl font-black tracking-tighter mb-4"><span id="modalPointsDisplay">0</span>
|
||
<span class="text-lg opacity-60">Pts</span>
|
||
</h4>
|
||
<a href="/buy"
|
||
class="inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 px-5 py-2.5 rounded-xl text-xs font-bold backdrop-blur-md transition-all">
|
||
<i data-lucide="plus-circle" class="w-4 h-4"></i> 立即充值
|
||
</a>
|
||
</div>
|
||
<i data-lucide="wallet" class="absolute -right-6 -bottom-6 w-32 h-32 opacity-10 rotate-12"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用明细 -->
|
||
<div class="space-y-6">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="text-sm font-black text-slate-900 uppercase tracking-widest">积分消耗明细</h3>
|
||
<button onclick="loadPointDetails()"
|
||
class="text-indigo-500 hover:text-indigo-600 p-2 transition-colors">
|
||
<i data-lucide="rotate-cw" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-100 rounded-[2rem] overflow-hidden shadow-sm">
|
||
<table class="w-full text-left">
|
||
<thead>
|
||
<tr class="bg-slate-50 font-black text-[10px] text-slate-400 uppercase tracking-widest">
|
||
<th class="px-8 py-4">动作描述</th>
|
||
<th class="px-8 py-4">计算核心</th>
|
||
<th class="px-8 py-4">积分变动</th>
|
||
<th class="px-8 py-4 text-right">发生时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="pointDetailsBody" class="text-xs font-bold text-slate-600">
|
||
<!-- 动态数据 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码弹窗 -->
|
||
<div id="pwdModal"
|
||
class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
<div
|
||
class="bg-white w-full max-w-sm rounded-[2.5rem] shadow-2xl p-10 space-y-8 transform scale-95 transition-transform duration-300">
|
||
<h2 class="text-2xl font-black text-slate-900">修改登录密码</h2>
|
||
<form id="pwdForm" class="space-y-5">
|
||
<div class="space-y-2">
|
||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">原密码</label>
|
||
<input type="password" id="oldPwd" required
|
||
class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">新密码</label>
|
||
<input type="password" id="newPwd" required
|
||
class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
||
</div>
|
||
<div class="flex gap-4 pt-4">
|
||
<button type="button" onclick="closePwdModal()"
|
||
class="flex-1 px-8 py-4 rounded-2xl border border-slate-100 font-bold text-slate-400 hover:bg-slate-50 transition-all">取消</button>
|
||
<button type="submit"
|
||
class="flex-1 btn-primary px-8 py-4 rounded-2xl font-bold shadow-lg shadow-indigo-100">确认修改</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 拍摄角度设置器弹窗 -->
|
||
<div id="visualizerModal"
|
||
class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[60] flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
<div
|
||
class="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300 flex flex-col h-[85vh]">
|
||
<div class="p-6 border-b border-slate-100 flex items-center justify-between flex-shrink-0">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
|
||
<i data-lucide="video" class="w-6 h-6"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-black text-slate-900">拍摄角度设置器</h3>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">相对于参考图设置相机移动路径</p>
|
||
</div>
|
||
</div>
|
||
<button id="closeVisualizerBtn"
|
||
class="w-10 h-10 rounded-xl hover:bg-slate-100 flex items-center justify-center text-slate-400 transition-colors">
|
||
<i data-lucide="x" class="w-5 h-5"></i>
|
||
</button>
|
||
</div>
|
||
<div class="flex-1 overflow-hidden relative">
|
||
<iframe id="visualizerFrame" src="/visualizer" class="w-full h-full border-none"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保存提示词弹窗 -->
|
||
<div id="savePromptModal"
|
||
class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
<div
|
||
class="bg-white w-full max-w-sm rounded-[2rem] shadow-2xl p-8 space-y-6 transform scale-95 transition-transform duration-300">
|
||
<h2 class="text-xl font-black text-slate-900">收藏提示词</h2>
|
||
<div class="space-y-2">
|
||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">给这个灵感起个名字</label>
|
||
<input type="text" id="promptTitleInput" placeholder="例如：赛博朋克风格"
|
||
class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
||
</div>
|
||
<div class="flex gap-4 pt-2">
|
||
<button onclick="closeSavePromptModal()"
|
||
class="flex-1 px-6 py-3 rounded-2xl border border-slate-100 font-bold text-slate-400 hover:bg-slate-50 transition-all">取消</button>
|
||
<button onclick="confirmSavePrompt()"
|
||
class="flex-1 btn-primary px-6 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-100">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 删除确认弹窗 -->
|
||
<div id="deleteConfirmModal"
|
||
class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
<div
|
||
class="bg-white w-full max-w-sm rounded-[2rem] shadow-2xl p-8 space-y-6 transform scale-95 transition-transform duration-300">
|
||
<div class="flex flex-col items-center text-center space-y-4">
|
||
<div class="w-16 h-16 bg-rose-50 text-rose-500 rounded-2xl flex items-center justify-center mb-2">
|
||
<i data-lucide="alert-triangle" class="w-8 h-8"></i>
|
||
</div>
|
||
<h2 class="text-xl font-black text-slate-900">确认删除？</h2>
|
||
<p class="text-sm text-slate-500 font-bold leading-relaxed px-4">
|
||
您确定要删除这个收藏的提示词吗？<br>此操作无法撤销。
|
||
</p>
|
||
</div>
|
||
<div class="flex gap-4 pt-2">
|
||
<button onclick="closeDeleteConfirmModal()"
|
||
class="flex-1 px-6 py-3 rounded-2xl border border-slate-100 font-bold text-slate-400 hover:bg-slate-50 transition-all">取消</button>
|
||
<button id="confirmDeleteBtn"
|
||
class="flex-1 bg-rose-500 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-rose-200 hover:bg-rose-600 transition-all">确认删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||
{% endblock %} |