|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AzureSlide Pro</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css"> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/white.css"> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="reveal"> |
|
|
<div class="slides"> |
|
|
|
|
|
<section class="cover-slide" data-background="linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)"> |
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center text-white p-12"> |
|
|
<h1 class="text-5xl font-bold mb-8">Presentation Title</h1> |
|
|
<p class="text-2xl opacity-80">Your Name / Company</p> |
|
|
<p class="text-xl opacity-70 mt-4">Date</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section data-background="linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)"> |
|
|
<div class="content-slide"> |
|
|
<h2 class="text-3xl font-bold text-white mb-6">Slide Title</h2> |
|
|
<div class="grid grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-blue-200 mb-4">Key Point 1</h3> |
|
|
<p class="text-white leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-blue-200 mb-4">Key Point 2</h3> |
|
|
<p class="text-white leading-relaxed">Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section data-background="linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)"> |
|
|
<div class="content-slide"> |
|
|
<h2 class="text-3xl font-bold text-white mb-6" style="font-family: 'SimHei', 'Microsoft YaHei', sans-serif;">中文标题</h2> |
|
|
<div class="flex flex-col gap-6"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-blue-200 mb-2" style="font-family: 'SimHei', 'Microsoft YaHei', sans-serif;">要点一</h3> |
|
|
<p class="text-white leading-relaxed" style="font-family: 'SimHei', 'Microsoft YaHei', sans-serif;">这是第一个要点的详细说明内容。</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-blue-200 mb-2" style="font-family: 'SimHei', 'Microsoft YaHei', sans-serif;">要点二</h3> |
|
|
<p class="text-white leading-relaxed" style="font-family: 'SimHei', 'Microsoft YaHei', sans-serif;">这是第二个要点的详细说明内容。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section data-background="linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)"> |
|
|
<div class="table-slide"> |
|
|
<h2 class="text-3xl font-bold text-white mb-8">团队成员工作内容</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full rounded-lg overflow-hidden"> |
|
|
<thead class="bg-blue-800 text-white"> |
|
|
<tr> |
|
|
<th class="py-3 px-4 text-left">姓名</th> |
|
|
<th class="py-3 px-4 text-left">工作内容</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-blue-700"> |
|
|
<tr class="bg-blue-600/30 text-white"> |
|
|
<td class="py-3 px-4">张三</td> |
|
|
<td class="py-3 px-4"> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li>负责前端界面开发</li> |
|
|
<li>优化用户交互体验</li> |
|
|
<li>编写组件文档</li> |
|
|
</ul> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="bg-blue-600/50 text-white"> |
|
|
<td class="py-3 px-4">李四</td> |
|
|
<td class="py-3 px-4"> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li>后端API接口开发</li> |
|
|
<li>数据库设计与优化</li> |
|
|
<li>服务器维护部署</li> |
|
|
</ul> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
