Spaces:

benzzi1111
/

undefined

Running

App Files Files Community

undefined / generator.html

benzzi1111

生成一个AI智能标书生成模块，能生成大纲和图文并茂的正文，整体界面用橙色，中文编写

a1b1d26 verified 3 months ago

raw

history blame contribute delete

19.7 kB

	<!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>