<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机网页生成器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 2.5rem;
}
.subtitle {
color: #7f8c8d;
font-size: 1.1rem;
}
.controls {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}
button {
padding: 1rem 2rem;
font-size: 1rem;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.generate-btn {
background: linear-gradient(45deg, #3498db, #2980b9);
color: white;
}
.theme-btn {
background: linear-gradient(45deg, #e74c3c, #c0392b);
color: white;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.webpage-display {
background: white;
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
min-height: 500px;
}
.webpage-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.webpage-title {
color: #2c3e50;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.webpage-nav {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.nav-item {
color: #3498db;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: all 0.3s ease;
}
.nav-item:hover {
background: #3498db;
color: white;
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.card {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-title {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.card-content {
color: #7f8c8d;
line-height: 1.6;
}
.webpage-footer {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid #ecf0f1;
color: #7f8c8d;
}
.info-panel {
background: #e8f4f8;
border-radius: 10px;
padding: 1.5rem;
margin: 2rem 0;
}
.info-title {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.info-content {
color: #7f8c8d;
line-height: 1.6;
}
.theme-dark {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
}
.theme-dark .webpage-display,
.theme-dark .info-panel {
background: #34495e;
color: white;
}
.theme-dark .card {
background: #2c3e50;
}
.theme-dark .card-title,
.theme-dark .webpage-title,
.theme-dark .info-title {
color: white;
}
.theme-dark .card-content,
.theme-dark .info-content,
.theme-dark .webpage-footer {
color: #bdc3c7;
}
.theme-dark .nav-item {
color: #3498db;
}
@media (max-width: 768px) {
.content-grid {
grid-template-columns: 1fr;
}
.webpage-nav {
flex-direction: column;
gap: 0.5rem;
}
body {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🎲 随机网页生成器</h1>
<p class="subtitle">每次点击都会生成一个全新的网页设计</p>
</header>
<div class="controls">
<button class="generate-btn" onclick="generateWebpage()">🔄 生成新网页</button>
<button class="theme-btn" onclick="toggleTheme()">🌓 切换主题</button>
</div>
<div class="webpage-display" id="webpageDisplay">
<!-- 生成的网页内容将显示在这里 -->
</div>
<div class="info-panel">
<h3 class="info-title">💡 关于随机网页生成</h3>
<p class="info-content">
这个工具使用算法随机生成网页布局、颜色方案、内容结构和视觉元素。
每次生成都是独一无二的设计，展示了程序化内容创作的可能性。
适用于灵感获取、原型设计和创意探索。
</p>
</div>
</div>
<script>
// 网页主题数据
const webpageThemes = [
"科技公司官网", "个人博客", "电商平台", "新闻网站",
"创意工作室", "教育平台", "健康生活", "旅游攻略",
"美食分享", "摄影作品集", "音乐平台", "游戏社区"
];
// 颜色方案
const colorSchemes = [
{ primary: '#3498db', secondary: '#2c3e50', accent: '#e74c3c' },
{ primary: '#9b59b6', secondary: '#8e44ad', accent: '#f39c12' },
{ primary: '#27ae60', secondary: '#2ecc71', accent: '#e67e22' },
{ primary: '#e74c3c', secondary: '#c0392b', accent: '#3498db' },
{ primary: '#f39c12', secondary: '#e67e22', accent: '#27ae60' }
];
// 内容模板
const contentTemplates = {
titles: [
"创新改变未来", "探索无限可能", "品质成就卓越", "连接美好生活",
"专业服务至上", "用心创造价值", "科技引领时代", "梦想照进现实"
],
navItems: [
["首页", "关于我们", "产品服务", "新闻动态", "联系我们"],
["主页", "作品集", "服务项目", "客户案例", "在线咨询"],
["首页", "最新文章", "分类目录", "标签云", "关于我们"],
["主页", "产品展示", "购物车", "用户中心", "客服支持"]
],
cardTitles: [
"核心优势", "服务特色", "最新动态", "客户评价",
"产品亮点", "技术实力", "行业洞察", "成功案例"
],
cardContents: [
"我们致力于为客户提供最优质的服务体验，通过创新的技术解决方案帮助您实现业务目标。",
"专业的团队和丰富的行业经验，确保每一个项目都能达到甚至超越客户的期望标准。",
"紧跟时代发展趋势，不断优化和升级我们的产品与服务，保持行业领先地位。",
"以客户需求为导向，提供个性化定制解决方案，助力企业数字化转型。"
]
};
// 当前主题状态
let currentTheme = 'light';
// 生成随机网页
function generateWebpage() {
const display = document.getElementById('webpageDisplay');
const theme = getRandomItem(webpageThemes);
const colors = getRandomItem(colorSchemes);
const title = getRandomItem(contentTemplates.titles);
const navItems = getRandomItem(contentTemplates.navItems);
// 应用颜色方案
applyColorScheme(colors);
// 生成网页内容
display.innerHTML = `
<div class="webpage-header">
<h2 class="webpage-title">${title}</h2>
<p>—— ${theme} ——</p>
</div>
<nav class="webpage-nav">
${navItems.map(item =>
`<a href="#" class="nav-item" style="border: 2px solid ${colors.primary}">${item}</a>`
).join('')}
</nav>
<div class="content-grid">
${generateCards(4)}
</div>
<div class="webpage-footer">
<p>© 2024 ${theme} | 随机生成的网页设计</p>
</div>
`;
}
// 生成卡片内容
function generateCards(count) {
let cards = '';
for (let i = 0; i < count; i++) {
const title = getRandomItem(contentTemplates.cardTitles);
const content = getRandomItem(contentTemplates.cardContents);
cards += `
<div class="card">
<h3 class="card-title">${title}</h3>
<p class="card-content">${content}</p>
</div>
`;
}
return cards;
}
// 应用颜色方案
function applyColorScheme(colors) {
const style = document.createElement('style');
style.textContent = `
.nav-item {
border-color: ${colors.primary} !important;
color: ${colors.primary} !important;
}
.nav-item:hover {
background: ${colors.primary} !important;
}
.generate-btn {
background: linear-gradient(45deg, ${colors.primary}, ${colors.secondary}) !important;
}
`;
document.head.appendChild(style);
}
// 获取随机项目
function getRandomItem(array) {
return array[Math.floor(Math.random() * array.length)];
}
// 切换主题
function toggleTheme() {
document.body.classList.toggle('theme-dark');
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
}
// 初始化
window.onload = function() {
generateWebpage();
};
</script>
</body>
</html>
index.html
index.html