Hugging Face's logo

Spaces:
benzzi1111
/
undefined
Running

App Files Community
undefined
File size: 19,673 Bytes 
a1b1d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI标书生成 - 橙智标书魔法师</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            100: '#FFEDD5',
                            200: '#FED7AA',
                            300: '#FDBA74',
                            400: '#FB923C',
                            500: '#F97316',
                            600: '#EA580C',
                            700: '#C2410C',
                            800: '#9A3412',
                            900: '#7C2D12',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .generator-card {
            transition: all 0.3s;
            border-left: 4px solid #F97316;
        }
        .generator-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
        }
        .progress-bar {
            height: 6px;
            background-color: #FED7AA;
        }
        .progress-value {
            height: 100%;
            background-color: #F97316;
            transition: width 0.5s;
        }
    </style>
</head>
<body class="bg-orange-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-primary-500 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i data-feather="file-text" class="text-white h-8 w-8"></i>
                        <span class="ml-2 text-white text-xl font-bold">橙智标书魔法师</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center space-x-4">
                    <a href="index.html" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">首页</a>
                    <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">历史记录</a>
                    <a href="generator.html" class="bg-white text-primary-600 px-3 py-2 rounded-md text-sm font-medium">标书生成</a>
                    <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">API文档</a>
                    <button class="bg-white text-primary-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100">
                        登录/注册
                    </button>
                </div>
                <div class="-mr-2 flex md:hidden">
                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white hover:bg-primary-600 focus:outline-none">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 标题和简介 -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">AI智能标书生成</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                只需输入项目基本信息，AI将为您自动生成专业标书大纲和图文并茂的正文内容
            </p>
        </div>

        <!-- 生成步骤 -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">标书生成流程</h2>
            
            <div class="progress-bar rounded-full mb-8">
                <div class="progress-value rounded-full w-1/3"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 步骤1 -->
                <div class="generator-card bg-white rounded-lg p-6 shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div>
                        <h3 class="text-lg font-medium text-gray-900">基本信息填写</h3>
                    </div>
                    <form class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">项目类型</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <option>建筑工程</option>
                                <option>IT服务</option>
                                <option>政府采购</option>
                                <option>咨询服务</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">项目预算</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">特殊要求</label>
                            <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
                        </div>
                    </form>
                </div>

                <!-- 步骤2 -->
                <div class="generator-card bg-white rounded-lg p-6 shadow-md opacity-50">
                    <div class="flex items-center mb-4">
                        <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
                        <h3 class="text-lg font-medium text-gray-900">大纲生成与调整</h3>
                    </div>
                    <div class="flex items-center justify-center h-64 bg-gray-100 rounded-md">
                        <p class="text-gray-500">完成第一步后生成标书大纲</p>
                    </div>
                </div>

                <!-- 步骤3 -->
                <div class="generator-card bg-white rounded-lg p-6 shadow-md opacity-50">
                    <div class="flex items-center mb-4">
                        <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
                        <h3 class="text-lg font-medium text-gray-900">正文生成与下载</h3>
                    </div>
                    <div class="flex items-center justify-center h-64 bg-gray-100 rounded-md">
                        <p class="text-gray-500">完成第二步后生成完整标书</p>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end">
                <button class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium text-lg flex items-center">
                    下一步：生成大纲
                    <i data-feather="arrow-right" class="ml-2"></i>
                </button>
            </div>
        </div>

        <!-- 示例标书 -->
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">示例标书展示</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="border border-gray-200 rounded-lg overflow-hidden">
                    <div class="bg-primary-500 text-white p-4">
                        <h3 class="font-medium">智慧园区建设项目标书</h3>
                    </div>
                    <div class="p-4">
                        <img src="http://static.photos/technology/640x360/1" alt="示例标书封面" class="w-full h-auto mb-4 rounded">
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <i data-feather="file-text" class="text-primary-500 mr-2"></i>
                                <span>150页完整标书文档</span>
                            </div>
                            <div class="flex items-center">
                                <i data-feather="image" class="text-primary-500 mr-2"></i>
                                <span>35张专业图表</span>
                            </div>
                            <div class="flex items-center">
                                <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                <span>合规性检查通过</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="border border-gray-200 rounded-lg overflow-hidden">
                    <div class="bg-primary-500 text-white p-4">
                        <h3 class="font-medium">政务云平台建设标书</h3>
                    </div>
                    <div class="p-4">
                        <img src="http://static.photos/technology/640x360/2" alt="示例标书内页" class="w-full h-auto mb-4 rounded">
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <i data-feather="file-text" class="text-primary-500 mr-2"></i>
                                <span>210页完整标书文档</span>
                            </div>
                            <div class="flex items-center">
                                <i data-feather="image" class="text-primary-500 mr-2"></i>
                                <span>48张专业图表</span>
                            </div>
                            <div class="flex items-center">
                                <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                <span>评分点自动标记</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-primary-800 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-medium mb-4">橙智标书魔法师</h3>
                    <p class="text-primary-200">
                        AI驱动的标书生成与解析专家
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">产品</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-primary-200 hover:text-white">功能特点</a></li>
                        <li><a href="generator.html" class="text-primary-200 hover:text-white">标书生成</a></li>
                        <li><a href="#" class="text-primary-200 hover:text-white">定价</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">资源</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-primary-200 hover:text-white">文档</a></li>
                        <li><a href="#" class="text-primary-200 hover:text-white">博客</a></li>
                        <li><a href="#" class="text-primary-200 hover:text-white">帮助中心</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i data-feather="mail" class="h-4 w-4 mr-2"></i>
                            <span class="text-primary-200">contact@aibid.com</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="phone" class="h-4 w-4 mr-2"></i>
                            <span class="text-primary-200">400-888-9999</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-primary-700 mt-8 pt-8 text-center text-primary-300">
                <p>© 2023 橙智标书魔法师 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();

        // 模拟进度条动画
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            const progressBar = document.querySelector('.progress-value');
            const step2 = document.querySelectorAll('.generator-card')[1];
            const step3 = document.querySelectorAll('.generator-card')[2];
            
            // 动画进度条到66%
            progressBar.style.width = '66%';
            
            // 显示第二步内容
            setTimeout(() => {
                step2.classList.remove('opacity-50');
                step2.innerHTML = `
                    <div class="flex items-center mb-4">
                        <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
                        <h3 class="text-lg font-medium text-gray-900">大纲生成与调整</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-primary-50 p-4 rounded-md">
                            <div class="flex items-start">
                                <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
                                <div>
                                    <h4 class="font-medium">1. 项目概述</h4>
                                    <p class="text-sm text-gray-600">包括项目背景、目标、范围等</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-primary-50 p-4 rounded-md">
                            <div class="flex items-start">
                                <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
                                <div>
                                    <h4 class="font-medium">2. 技术方案</h4>
                                    <p class="text-sm text-gray-600">详细技术实施方案和架构</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-primary-50 p-4 rounded-md">
                            <div class="flex items-start">
                                <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
                                <div>
                                    <h4 class="font-medium">3. 项目管理</h4>
                                    <p class="text-sm text-gray-600">项目进度计划和质量管理</p>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 rounded-md border border-dashed border-gray-300">
                            <div class="flex items-start">
                                <i data-feather="plus" class="text-primary-500 mt-1 mr-2"></i>
                                <div>
                                    <h4 class="font-medium">添加自定义章节</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                feather.replace();
                
                // 更新按钮文本
                document.querySelector('button').innerHTML = `
                    下一步：生成完整标书
                    <i data-feather="arrow-right" class="ml-2"></i>
                `;
                
                // 为第二步添加提交事件
                document.querySelector('button').addEventListener('click', function() {
                    progressBar.style.width = '100%';
                    
                    // 显示第三步内容
                    setTimeout(() => {
                        step3.classList.remove('opacity-50');
                        step3.innerHTML = `
                            <div class="flex items-center mb-4">
                                <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
                                <h3 class="text-lg font-medium text-gray-900">正文生成与下载</h3>
                            </div>
                            <div class="text-center p-6">
                                <i data-feather="check-circle" class="text-green-500 w-12 h-12 mx-auto mb-4"></i>
                                <h4 class="text-xl font-medium text-gray-900 mb-2">标书生成完成！</h4>
                                <p class="text-gray-600 mb-6">已为您生成150页专业标书文档，包含35张图表</p>
                                <div class="grid grid-cols-2 gap-4">
                                    <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md font-medium flex items-center justify-center">
                                        <i data-feather="download" class="mr-2"></i>
                                        PDF下载
                                    </button>
                                    <button class="bg-white hover:bg-gray-100 text-primary-600 border border-primary-600 px-4 py-2 rounded-md font-medium flex items-center justify-center">
                                        <i data-feather="edit" class="mr-2"></i>
                                        在线编辑
                                    </button>
                                </div>
                            </div>
                        `;
                        feather.replace();
                        
                        // 更新按钮为重新生成
                        document.querySelector('button').innerHTML = `
                            <i data-feather="refresh-cw" class="mr-2"></i>
                            重新生成标书
                        `;
                        feather.replace();
                    }, 500);
                });
            }, 800);
        });
    </script>
</body>
</html>