Hugging Face's logo

Spaces:
jun2024
/
fc
Paused

App Files Community
fc / apiSystem /templates /index /_sms_flow.html
jun2024's picture
jun2024
Upload 2241 files
b4f2238 verified
Raw History Blame Contribute Delete
13.5 kB
{% load i18n %}
<!-- 法院短信自动处理流程演示 -->
<section class="sms-flow-section" id="sms-flow">
<div class="sms-flow-container">
<div class="section-header reveal">
<span class="section-tag">⚡ {% trans "自动化演示" %}</span>
<h2 class="section-title">{% trans "法院短信智能处理流程" %}</h2>
<p class="section-desc">{% trans "从收到短信到文书归档，全程自动化处理，7×24 小时无人值守" %}</p>
</div>
<div class="flow-demo" id="flowDemo">
<!-- 左侧：手机模拟器 -->
<div class="flow-left">
<div class="phone-mockup" id="phoneMockup">
<div class="phone-notch"></div>
<div class="phone-screen">
<div class="phone-status-bar">
<span>中国移动</span>
<span>10:24</span>
<span>📶</span>
</div>
<div class="sms-notification" id="smsNotification">
<div class="sms-header">
<div class="sms-icon">📩</div>
<div>
<div class="sms-sender">{% trans "浦东法院" %}</div>
<div class="sms-time">{% trans "刚刚" %}</div>
</div>
</div>
<div class="sms-content">
【浦东法院】张某诉李某民间借贷纠纷一案，现有法律文书送达：<span class="sms-link">https://ssfw...</span>
</div>
</div>
<div class="sms-notification" id="smsForward" style="background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3);">
<div class="sms-header">
<div class="sms-icon" style="background: linear-gradient(135deg, #fbbf24, #f59e0b);">📤</div>
<div>
<div class="sms-sender">{% trans "快捷指令" %}</div>
<div class="sms-time">{% trans "刚刚" %}</div>
</div>
</div>
<div class="sms-content">
{% trans "正在转发至法穿AI..." %}
</div>
</div>
</div>
</div>
</div>
<!-- 中间：转发说明卡片 + 箭头 -->
<div class="forward-section" id="forwardSection">
<div class="forward-card" id="forwardCard">
<div class="forward-card-icon">📱</div>
<div class="forward-card-title">{% trans "自动转发" %}</div>
<div class="forward-card-desc">iOS {% trans "快捷指令" %}<br>Android SMS Forwarder</div>
</div>
<!-- 连接箭头 -->
<div class="flow-arrow" id="flowArrow1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<!-- 右侧：处理流程 + 结果卡片 -->
<div class="flow-right">
<div class="flow-center">
<!-- 流程标题 -->
<div class="flow-center-title">
<div class="flow-center-title-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
</div>
<span class="flow-center-title-text">{% trans "法穿AI 智能处理" %}</span>
<span class="flow-center-title-sub">{% trans "7×24 自动化" %}</span>
</div>
<!-- 处理节点网格 -->
<div class="process-grid">
<div class="process-node" id="processReceive">
<div class="process-node-icon receive">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "接收短信" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processParse">
<div class="process-node-icon parse">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "解析链接" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processDownload">
<div class="process-node-icon download">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "下载文书" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processMatch">
<div class="process-node-icon match">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "匹配案件" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processRename">
<div class="process-node-icon rename">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "重命名归档" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processAnalyze">
<div class="process-node-icon analyze">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "智能分析" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processNotify" style="grid-column: span 2;">
<div class="process-node-icon notify">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "推送通知给律师（飞书/Telegram）" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
</div>
</div>
<!-- 结果展示卡片 -->
<div class="result-cards" id="resultCards">
<div class="result-card success" id="resultBind">
<div class="result-icon">📁</div>
<div class="result-title">{% trans "文书已归档" %}</div>
<div class="result-desc">{% trans "自动绑定至案件" %}</div>
</div>
<div class="result-card success" id="resultRename">
<div class="result-icon">✏️</div>
<div class="result-title">{% trans "已重命名" %}</div>
<div class="result-desc">{% trans "传票（张某诉李某…）.pdf" %}</div>
</div>
<div class="result-card warning" id="resultReminder">
<div class="result-icon">⏰</div>
<div class="result-title">{% trans "开庭提醒" %}</div>
<div class="result-desc">2026-02-15 09:30</div>
</div>
<div class="result-card alert" id="resultAlert">
<div class="result-icon">⚠️</div>
<div class="result-title">{% trans "费用异常" %}</div>
<div class="result-desc">{% trans "受理费计算有误，立即联系书记员" %}</div>
</div>
</div>
</div>
</div>
<!-- 流程步骤指示器 -->
<div class="flow-steps" id="flowSteps">
<div class="flow-step" data-step="1">
<span class="flow-step-num">1</span>
<span>{% trans "收到短信" %}</span>
</div>
<div class="flow-step" data-step="2">
<span class="flow-step-num">2</span>
<span>{% trans "自动转发" %}</span>
</div>
<div class="flow-step" data-step="3">
<span class="flow-step-num">3</span>
<span>{% trans "解析链接" %}</span>
</div>
<div class="flow-step" data-step="4">
<span class="flow-step-num">4</span>
<span>{% trans "下载文书" %}</span>
</div>
<div class="flow-step" data-step="5">
<span class="flow-step-num">5</span>
<span>{% trans "归档绑定" %}</span>
</div>
<div class="flow-step" data-step="6">
<span class="flow-step-num">6</span>
<span>{% trans "智能提醒" %}</span>
</div>
</div>
<!-- 控制按钮 -->
<div class="flow-controls">
<button class="flow-btn flow-btn-play" id="flowPlayBtn" onclick="startFlowAnimation()">
<span>▶</span> {% trans "播放演示" %}
</button>
<button class="flow-btn flow-btn-reset" id="flowResetBtn" onclick="resetFlowAnimation()">
<span>↺</span> {% trans "重置" %}
</button>
</div>
</div>
</section>