b5447a9903
This commit introduces a new test suite for evaluating the HTML/CSS beautification capabilities of different AI models. The suite includes: - A baseline unstyled HTML file (`plain_html/index.html`) to be used as the common input. - Standardized prompts for various design aesthetics (e.g., Professional, Minimalist). - Initial results for the 'Professional' style from several models, including ChatGPT, Kimi, Gemini, Doubao, Deepseek, and Yuanbao.
469 lines
13 KiB
HTML
469 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>AI Beautify — 企业官网风格</title>
|
||
<style>
|
||
/* --- 1. 全局与变量定义 --- */
|
||
:root {
|
||
--primary-color: #0d47a1; /* 深邃蓝，用于标题和重要元素 */
|
||
--accent-color: #1976d2; /* 活力蓝，用于链接和按钮 */
|
||
--text-color: #343a40; /* 深灰，用于标题 */
|
||
--secondary-text-color: #6c757d; /* 中性灰，用于段落 */
|
||
--background-color: #f8f9fa; /* 淡灰色背景 */
|
||
--card-background-color: #ffffff; /* 卡片背景 */
|
||
--border-color: #dee2e6; /* 边框颜色 */
|
||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol";
|
||
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
||
--border-radius: 8px;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-family);
|
||
background-color: var(--background-color);
|
||
color: var(--secondary-text-color);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* --- 2. 响应式布局 --- */
|
||
/* 桌面端：主区域与侧边栏左右布局 */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
display: grid;
|
||
grid-template-columns: 3fr 1fr;
|
||
grid-template-areas:
|
||
"header header"
|
||
"main aside"
|
||
"footer footer";
|
||
gap: 2rem;
|
||
}
|
||
|
||
header {
|
||
grid-area: header;
|
||
}
|
||
main {
|
||
grid-area: main;
|
||
}
|
||
aside {
|
||
grid-area: aside;
|
||
}
|
||
footer {
|
||
grid-area: footer;
|
||
}
|
||
|
||
/* 移动端：所有内容垂直堆叠 */
|
||
@media (max-width: 992px) {
|
||
.container {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas:
|
||
"header"
|
||
"main"
|
||
"aside"
|
||
"footer";
|
||
padding: 1rem;
|
||
}
|
||
}
|
||
|
||
/* --- 3. 排版与通用元素 --- */
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
color: var(--text-color);
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
}
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 0.5rem;
|
||
text-align: center;
|
||
}
|
||
h2 {
|
||
font-size: 2rem;
|
||
margin-top: 0;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid var(--border-color);
|
||
}
|
||
h3 {
|
||
font-size: 1.25rem;
|
||
color: var(--primary-color);
|
||
}
|
||
p {
|
||
margin-top: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
a {
|
||
color: var(--accent-color);
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
a:hover {
|
||
color: var(--primary-color);
|
||
text-decoration: underline;
|
||
}
|
||
ul {
|
||
padding-left: 0;
|
||
list-style: none;
|
||
}
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: var(--border-radius);
|
||
}
|
||
|
||
/* --- 4. 模块样式 --- */
|
||
|
||
/* Header */
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
header p {
|
||
font-size: 1.1rem;
|
||
max-width: 60ch;
|
||
margin: 0 auto 1.5rem auto;
|
||
}
|
||
header nav ul {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem 1.5rem;
|
||
margin: 0;
|
||
}
|
||
header nav a {
|
||
font-weight: 500;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 2px solid transparent;
|
||
transition: border-color 0.2s ease, color 0.2s ease;
|
||
}
|
||
header nav a:hover {
|
||
color: var(--primary-color);
|
||
border-bottom-color: var(--primary-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 通用卡片样式 (应用于 Section, Aside) */
|
||
section,
|
||
aside {
|
||
background-color: var(--card-background-color);
|
||
padding: 2rem;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
section,
|
||
aside {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
|
||
/* Features Section */
|
||
#features ul {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
#features li {
|
||
padding: 1.5rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
#features li:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
|
||
}
|
||
#features h3 {
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
#features p {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Gallery Section */
|
||
#gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
#gallery > div {
|
||
/* For wrapping figures if needed, though direct styling is fine */
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
#gallery figure {
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
#gallery figcaption {
|
||
margin-top: 0.5rem;
|
||
font-style: italic;
|
||
font-size: 0.9rem;
|
||
color: var(--secondary-text-color);
|
||
}
|
||
|
||
/* Pricing Table */
|
||
#pricing table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: left;
|
||
}
|
||
#pricing caption {
|
||
font-weight: bold;
|
||
caption-side: bottom;
|
||
text-align: center;
|
||
margin-top: 1rem;
|
||
font-size: 0.9rem;
|
||
color: var(--secondary-text-color);
|
||
}
|
||
#pricing th,
|
||
#pricing td {
|
||
padding: 1rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
#pricing thead {
|
||
background-color: var(--background-color);
|
||
}
|
||
#pricing th {
|
||
color: var(--text-color);
|
||
font-weight: 600;
|
||
}
|
||
#pricing tbody tr:hover {
|
||
background-color: #f1f3f5;
|
||
}
|
||
|
||
/* Contact Form */
|
||
#contact form {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
}
|
||
#contact fieldset {
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
#contact legend {
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 0.5rem;
|
||
padding: 0;
|
||
}
|
||
#contact label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
font-weight: 500;
|
||
}
|
||
#contact input,
|
||
#contact textarea {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: calc(var(--border-radius) / 2);
|
||
font-family: inherit;
|
||
font-size: 1rem;
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||
box-sizing: border-box; /* Ensures padding doesn't affect width */
|
||
}
|
||
#contact input:focus,
|
||
#contact textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent-color);
|
||
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
|
||
}
|
||
#contact button {
|
||
background-color: var(--accent-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.75rem 1.5rem;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
border-radius: calc(var(--border-radius) / 2);
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||
justify-self: start; /* Align button to the left */
|
||
}
|
||
#contact button:hover {
|
||
background-color: var(--primary-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Aside */
|
||
aside {
|
||
background-color: #e9ecef; /* Slightly different background for distinction */
|
||
border-left: 4px solid var(--accent-color);
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
margin-top: 1rem;
|
||
background-color: var(--text-color);
|
||
color: var(--background-color);
|
||
border-radius: var(--border-radius);
|
||
}
|
||
footer p {
|
||
margin: 0.5rem 0;
|
||
}
|
||
footer a {
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
footer a:hover {
|
||
color: #ced4da;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>产品演示 — AI 美化基线</h1>
|
||
<p>
|
||
这是一个用于不同生成式 AI 美化对比的基础 HTML
|
||
页面。页面不含任何样式或脚本。
|
||
</p>
|
||
<nav aria-label="主导航">
|
||
<ul>
|
||
<li><a href="#overview">概述</a></li>
|
||
<li><a href="#features">功能</a></li>
|
||
<li><a href="#gallery">展示</a></li>
|
||
<li><a href="#pricing">价格</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="overview" aria-labelledby="overview-title">
|
||
<h2 id="overview-title">概述</h2>
|
||
<p>
|
||
我们的示例产品旨在演示一个简单的单页面布局：标题、特色、图集、价格与联系表单。你可以把本文件交给多个
|
||
AI，让它们为此页面生成 CSS、设计系统或重构 HTML。
|
||
</p>
|
||
</section>
|
||
|
||
<section id="features" aria-labelledby="features-title">
|
||
<h2 id="features-title">功能亮点</h2>
|
||
<ul>
|
||
<li>
|
||
<h3>高性能</h3>
|
||
<p>优化的渲染流程与低延迟响应。</p>
|
||
</li>
|
||
<li>
|
||
<h3>安全可靠</h3>
|
||
<p>采用行业标准的安全实践，保障数据与隐私。</p>
|
||
</li>
|
||
<li>
|
||
<h3>易于扩展</h3>
|
||
<p>模块化设计，便于功能扩展与集成第三方服务。</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="gallery" aria-labelledby="gallery-title">
|
||
<h2 id="gallery-title">作品展示</h2>
|
||
<div>
|
||
<figure>
|
||
<img src="https://picsum.photos/640/360?1" alt="示例图 1" />
|
||
<figcaption>示例图 1 — 产品界面快照</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="https://picsum.photos/640/360?2" alt="示例图 2" />
|
||
<figcaption>示例图 2 — 使用场景示例</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="pricing" aria-labelledby="pricing-title">
|
||
<h2 id="pricing-title">价格一览</h2>
|
||
<table>
|
||
<caption>
|
||
方案与价格
|
||
</caption>
|
||
<thead>
|
||
<tr>
|
||
<th>方案</th>
|
||
<th>价格（每月）</th>
|
||
<th>适用对象</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>免费</td>
|
||
<td>¥0</td>
|
||
<td>个人与试用</td>
|
||
</tr>
|
||
<tr>
|
||
<td>专业</td>
|
||
<td>¥49</td>
|
||
<td>中小型团队</td>
|
||
</tr>
|
||
<tr>
|
||
<td>企业</td>
|
||
<td>面议</td>
|
||
<td>大规模部署与 SLA</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="contact" aria-labelledby="contact-title">
|
||
<h2 id="contact-title">联系我们</h2>
|
||
<form action="#" method="post" aria-describedby="contact-desc">
|
||
<p id="contact-desc">填写下列信息，我们会尽快与您取得联系。</p>
|
||
<fieldset>
|
||
<legend>联系信息</legend>
|
||
|
||
<label for="name"
|
||
>姓名
|
||
<input id="name" name="name" type="text" required />
|
||
</label>
|
||
|
||
<label for="email"
|
||
>邮箱
|
||
<input id="email" name="email" type="email" required />
|
||
</label>
|
||
|
||
<label for="message"
|
||
>留言
|
||
<textarea id="message" name="message" rows="5"></textarea>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<button type="submit">发送</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
|
||
<aside aria-labelledby="note-title">
|
||
<h2 id="note-title">测试说明</h2>
|
||
<p>
|
||
你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS
|
||
和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。
|
||
</p>
|
||
</aside>
|
||
|
||
<footer>
|
||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||
<p><a href="#top">返回顶部</a></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|