<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>专业级饮料包装生成器</title>
<style>
:root {
--can-width: 200px;
--can-height: 420px;
--box-width: 220px;
--box-height: 320px;
--bg-color: #f5f7fa;
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #e0e7ff, #f0f4ff);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 20px;
color: #334155;
overflow-x: hidden;
}
header {
text-align: center;
margin-bottom: 30px;
width: 100%;
max-width: 800px;
}
h1 {
font-size: 2.8rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 10px;
letter-spacing: -0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.subtitle {
font-size: 1.1rem;
color: #64748b;
max-width: 600px;
line-height: 1.6;
margin: 0 auto;
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
justify-content: center;
}
button {
padding: 14px 28px;
font-size: 1.1rem;
background: linear-gradient(to bottom, #4f46e5, #4338ca);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: var(--shadow);
transition: all 0.3s ease;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #4338ca;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
background: linear-gradient(to bottom, #4338ca, #3730a3);
}
button:active {
transform: translateY(1px);
}
button.secondary {
background: white;
color: #4f46e5;
border: 1px solid #cbd5e1;
}
button.secondary:hover {
background: #f1f5f9;
}
.scene {
perspective: 1200px;
margin-bottom: 40px;
display: flex;
justify-content: center;
width: 100%;
max-width: 1000px;
}
/* 圆形罐装样式 */
.can {
width: var(--can-width);
height: var(--can-height);
position: relative;
border-radius: 25px 25px 35px 35px;
background-color: #ccc;
box-shadow:
inset -15px 0 30px rgba(0,0,0,0.3),
inset 15px 0 30px rgba(255,255,255,0.4),
0 30px 60px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.1);
background-position: center;
background-repeat: no-repeat;
transform-style: preserve-3d;
}
.can::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1));
border-radius: 25px 25px 10px 10px;
z-index: 10;
pointer-events: none;
}
/* 方形盒装样式 */
.box {
width: var(--box-width);
height: var(--box-height);
position: relative;
border-radius: 8px;
background-color: #ccc;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
background-position: center;
background-repeat: no-repeat;
transform-style: preserve-3d;
transform: rotateX(5deg) rotateY(-5deg);
}
.box::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.3));
border-radius: 8px 8px 0 0;
z-index: 10;
pointer-events: none;
}
.package-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
perspective: 1200px;
}
/* 通用包装内容 */
.package-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px 20px;
z-index: 5;
}
.brand-name {
font-size: 2.8rem;
font-weight: 900;
text-transform: uppercase;
color: #fff;
text-shadow: 2px 2px 0px rgba(0,0,0,0.4);
line-height: 0.9;
margin-bottom: 15px;
font-style: italic;
letter-spacing: -1px;
transform: skewX(-10deg);
text-align: center;
width: 100%;
padding: 0 10px;
}
.flavor-badge {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
color: #fff;
padding: 8px 16px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 10px;
}
.type-indicator {
position: absolute;
bottom: 40px;
font-size: 0.8rem;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
letter-spacing: 3px;
border-top: 2px solid rgba(255,255,255,0.5);
padding-top: 8px;
width: 60%;
text-align: center;
z-index: 5;
font-weight: 500;
}
.volume {
position: absolute;
top: 25px;
right: 20px;
background: rgba(0,0,0,0.2);
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.7rem;
letter-spacing: 0.5px;
z-index: 5;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* 营养成分表 */
.nutrition {
position: absolute;
bottom: 60px;
right: 15px;
width: 40px;
height: 80px;
background: rgba(255,255,255,0.2);
border-radius: 4px;
z-index: 5;
padding: 4px;
box-sizing: border-box;
font-size: 0.55rem;
color: white;
text-align: center;
line-height: 1.2;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.nutrition-title {
font-size: 0.65rem;
margin-bottom: 2px;
border-bottom: 1px solid rgba(255,255,255,0.5);
padding-bottom: 1px;
}
.nutrition-value {
margin-top: 1px;
}
/* 条形码 */
.barcode {
position: absolute;
bottom: 15px;
width: 90%;
height: 25px;
display: flex;
z-index: 5;
padding: 0 10px;
}
.barcode-line {
width: 1.5px;
background: white;
margin: 0 0.2px;
border-radius: 1px;
}
/* 生产商信息 */
.manufacturer {
position: absolute;
bottom: 42px;
width: 90%;
text-align: center;
font-size: 0.65rem;
color: rgba(255,255,255,0.7);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
z-index: 5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expiry {
position: absolute;
bottom: 25px;
width: 90%;
text-align: center;
font-size: 0.6rem;
color: rgba(255,255,255,0.6);
z-index: 5;
}
/* 材质效果 */
.metallic {
background: linear-gradient(135deg, #c0c0c0 0%, #e0e0e0 50%, #b0b0b0 100%);
background-blend-mode: overlay;
}
.matte {
filter: contrast(1.1) brightness(0.95);
}
.frosted {
backdrop-filter: blur(2px);
filter: brightness(0.95);
}
.transparent {
opacity: 0.95;
}
/* 动画效果 */
.pop-in {
animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.27);
}
@keyframes popIn {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.stats {
margin-top: 20px;
font-size: 0.85rem;
color: #64748b;
text-align: center;
line-height: 1.5;
max-width: 800px;
background: white;
padding: 15px 25px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-left: 4px solid #4f46e5;
}
.stats h3 {
color: #1e293b;
margin-bottom: 8px;
font-size: 1.1rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 10px;
}
.stat-item {
background: #f8fafc;
padding: 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.stat-value {
font-size: 1.3rem;
font-weight: 700;
color: #4f46e5;
margin: 5px 0;
}
.stat-label {
font-size: 0.85rem;
color: #64748b;
}
.highlight {
color: #4f46e5;
font-weight: 600;
}
footer {
margin-top: 30px;
text-align: center;
color: #94a3b8;
font-size: 0.9rem;
padding: 20px;
width: 100%;
max-width: 800px;
}
@media (max-width: 600px) {
.can, .box {
transform: scale(0.9);
}
h1 {
font-size: 2.2rem;
}
.controls {
flex-direction: column;
width: 100%;
}
button {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<header>
<h1>专业级饮料包装生成器</h1>
<p class="subtitle">每次生成都包含100+种随机品牌、口味、包装类型和表面纹理，附带完整产品信息和专业细节</p>
</header>
<div class="controls">
<button id="generateBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 2.1l4 4-4 4"></path>
<path d="M3 12h16a10 10 0 0 1 0 20H7a5 5 0 0 1-5-5v-7"></path>
</svg>
生成全新饮料
</button>
<button class="secondary" id="toggleShapeBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<line x1="12" y1="2" x2="12" y2="22"></line>
</svg>
切换包装形状
</button>
</div>
<div class="scene">
<div class="package-container">
<!-- 包装将由JS动态生成 -->
<div id="packageContainer"></div>
</div>
</div>
<div class="stats">
<h3>生成器数据统计</h3>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-label">随机品牌</div>
<div class="stat-value" id="brandCount">400+</div>
<div class="stat-desc">前缀×后缀组合</div>
</div>
<div class="stat-item">
<div class="stat-label">随机口味</div>
<div class="stat-value" id="flavorCount">600+</div>
<div class="stat-desc">基底×修饰词组合</div>
</div>
<div class="stat-item">
<div class="stat-label">包装类型</div>
<div class="stat-value" id="typeCount">30+</div>
<div class="stat-desc">饮料分类</div>
</div>
<div class="stat-item">
<div class="stat-label">表面纹理</div>
<div class="stat-value" id="textureCount">20+</div>
<div class="stat-desc">CSS生成图案</div>
</div>
</div>
<p style="margin-top: 15px; font-size: 0.9rem;">
总组合数: <span class="highlight" id="totalCombinations">∞</span> -
每次生成都是<span class="highlight">全球唯一</span>的饮料包装设计
</p>
</div>
<footer>
<p>专业饮料包装生成器 | 模拟真实产品设计流程 | 2026 © 饮料设计实验室</p>
</footer>
<script>
// ==========================================
// 数据源配置 (大幅扩展至100+选项)
// ==========================================
// 1. 品牌生成器 (25 前缀 x 20 后缀 = 500 种品牌)
const brandPrefixes = [
"Ultra", "Hyper", "Mega", "Super", "Neon", "Cyber", "Retro", "Pure", "Zen", "Wild",
"Crazy", "Happy", "Lucky", "Golden", "Silver", "Iron", "Titan", "Solar", "Lunar", "Star",
"Cosmo", "Astro", "Geo", "Hydro", "Aero", "Terra", "Flora", "Fauna", "Aqua", "Ignis",
"Ventus", "Nova", "Quantum", "Pixel", "Vapor", "Liquid", "Atomic", "Molecular", "Robo", "Techno",
"Electro", "Sonic", "Magic", "Mystic", "Crystal"
];
const brandSuffixes = [
"Fizz", "Pop", "Soda", "Cola", "Drink", "Brew", "Juice", "Tea", "Water", "Energy",
"Boost", "Flow", "Wave", "Spark", "Bolt", "Flash", "Glow", "Shine", "Zest", "Kick",
"Rush", "Vibe", "Mode", "X", "Zero", "One", "Max", "Pro", "Plus", "Go",
"Life", "Pure", "Fresh", "Natural", "Organic", "Elite", "Prime", "Core", "Edge", "Peak"
];
// 2. 口味生成器 (35 基底 x 20 修饰 = 700 种口味)
const flavorBase = [
"Lemon", "Lime", "Orange", "Grapefruit", "Berry", "Strawberry", "Blueberry", "Raspberry",
"Mango", "Peach", "Apple", "Pear", "Cherry", "Watermelon", "Melon", "Coconut", "Pineapple",
"Passion Fruit", "Kiwi", "Banana", "Grape", "Plum", "Apricot", "Fig", "Pomegranate",
"Cola", "Root Beer", "Ginger", "Mint", "Vanilla", "Cucumber", "Aloe", "Hibiscus",
"Ginseng", "Matcha", "Yuzu", "Lychee"
];
const flavorMod = [
"Spicy", "Sweet", "Sour", "Bitter", "Fresh", "Icy", "Frozen", "Chilled", "Warm", "Hot",
"Zesty", "Tangy", "Creamy", "Smooth", "Rich", "Light", "Dark", "Golden", "Silver", "Midnight",
"Tropical", "Citrus", "Berry", "Herbal", "Floral", "Minty", "Citrus", "Tart", "Sweetened", "Zero Sugar"
];
// 3. 饮料类型 (扩展至 35+ 种)
const drinkTypes = [
"Sparkling Water", "Still Water", "Energy Drink", "Sports Drink", "Iced Tea",
"Green Tea", "Black Tea", "Fruit Juice", "Vegetable Juice", "Smoothie",
"Protein Shake", "Coffee Soda", "Kombucha", "Kefir", "Yogurt Drink",
"Alcohol-Free Beer", "Malt Beverage", "Tonic Water", "Ginger Ale", "Root Beer",
"Cream Soda", "Fruit Punch", "Lemonade", "Limeade", "Orangeade",
"Coconut Water", "Almond Milk", "Oat Milk", "Soy Milk", "Rice Milk",
"Plant-Based Drink", "Electrolyte Water", "Recovery Drink", "Immunity Boost", "Detox Tea"
];
// 4. 生产商名称 (50+ 种)
const manufacturers = [
"环球饮料集团", "创新饮品有限公司", "未来饮料科技", "自然之源饮品", "城市饮料工坊",
"山峰饮品制造", "海洋饮料公司", "阳光饮料集团", "绿洲饮品有限公司", "北极星饮料厂",
"银河饮料科技", "极光饮品制造", "晨曦饮料公司", "暮色饮品工坊", "星辰饮料集团",
"翡翠饮料有限公司", "琥珀饮品科技", "水晶饮料制造", "珍珠饮料公司", "钻石饮品工坊",
"黄金饮料集团", "白银饮品有限公司", "青铜饮料科技", "钢铁饮料制造", "钛合金饮品公司",
"量子饮料工坊", "纳米饮料集团", "生物饮料有限公司", "生态饮品科技", "有机饮料制造",
"纯净饮品公司", "天然饮料工坊", "活力饮料集团", "能量饮料有限公司", "健康饮品科技",
"幸福饮料制造", "快乐饮品公司", "微笑饮料工坊", "梦想饮料集团", "希望饮品有限公司",
"勇气饮料科技", "和平饮料制造", "自由饮品公司", "平等饮料工坊", "正义饮料集团",
"真理饮品有限公司", "智慧饮料科技", "爱饮料制造", "光饮品公司", "生命饮料工坊"
];
// 5. 字体样式 (随机化关键)
const fontWeights = [300, 400, 500, 600, 700, 800, 900];
const fontStyles = ['normal', 'italic', 'oblique'];
const textTransforms = ['uppercase', 'lowercase', 'capitalize'];
const letterSpacings = ['-1px', '0px', '0.5px', '1px', '1.5px', '2px', '2.5px'];
const textShadows = [
'2px 2px 0px rgba(0,0,0,0.4)',
'1px 1px 0px rgba(0,0,0,0.3)',
'0px 0px 5px rgba(0,0,0,0.2)',
'none'
];
// 6. 表面纹理 (20+ 种CSS生成图案)
function generatePattern() {
const color1 = getRandomColor();
const color2 = getRandomColor();
const color3 = getRandomLightColor();
const angle = Math.floor(Math.random() * 360);
const size = Math.floor(Math.random() * 50) + 10;
const stripeSize = Math.floor(Math.random() * 15) + 5;
const patterns = [
// 1. 纯色
`linear-gradient(${angle}deg, ${color1}, ${color1})`,
// 2. 线性渐变
`linear-gradient(${angle}deg, ${color1}, ${color2})`,
// 3. 径向渐变
`radial-gradient(circle at 30% 30%, ${color1}, ${color2})`,
// 4. 锥形渐变
`conic-gradient(from ${angle}deg, ${color1}, ${color2}, ${color1})`,
// 5. 条纹
`repeating-linear-gradient(${angle}deg, ${color1}, ${color1} ${stripeSize}px, ${color2} ${stripeSize}px, ${color2} ${stripeSize*2}px)`,
// 6. 斜条纹
`repeating-linear-gradient(45deg, ${color1}, ${color1} 15px, ${color2} 15px, ${color2} 30px)`,
// 7. 圆点
`radial-gradient(${color2} 20%, transparent 20%), radial-gradient(${color2} 20%, transparent 20%)`,
// 8. 网格
`linear-gradient(${color1} 1px, transparent 1px), linear-gradient(90deg, ${color1} 1px, transparent 1px)`,
// 9. 波浪
`repeating-linear-gradient(${angle}deg, ${color1}, ${color1} 5px, ${color2} 5px, ${color2} 10px)`,
// 10. 噪点
`radial-gradient(${color2} 1px, transparent 1px)`,
// 11. 棋盘格
`linear-gradient(45deg, ${color1} 25%, transparent 25%, transparent 75%, ${color1} 75%, ${color1}), linear-gradient(45deg, ${color1} 25%, transparent 25%, transparent 75%, ${color1} 75%, ${color1})`,
// 12. 聚光灯
`radial-gradient(circle at 50% 0%, ${color3}, ${color1} 60%)`,
// 13. 三角形
`linear-gradient(60deg, ${color1} 50%, transparent 50%), linear-gradient(-60deg, ${color1} 50%, ${color2} 50%)`,
// 14. 菱形
`linear-gradient(45deg, ${color1} 25%, transparent 25%, transparent 75%, ${color1} 75%, ${color1}), linear-gradient(-45deg, ${color1} 25%, transparent 25%, transparent 75%, ${color1} 75%, ${color1})`,
// 15. 水彩效果
`repeating-linear-gradient(${angle}deg, ${color1}, ${color1} 10px, ${color2} 10px, ${color2} 15px), radial-gradient(circle, ${color3} 15%, transparent 15%)`,
// 16. 金属拉丝
`linear-gradient(${angle}deg, transparent 50%, rgba(255,255,255,0.1) 50%), linear-gradient(${angle+90}deg, ${color1}, ${color2})`,
// 17. 磨砂效果
`linear-gradient(${angle}deg, ${color1}, ${color2}), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 18c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm44 25c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-27-7c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm0 32c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zM11 52c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm63-25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-7 39c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 83c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm27-7c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill-opacity='0.03' fill='%23000'/%3E%3C/svg%3E")`,
// 18. 半透明效果
`linear-gradient(135deg, ${color1} 0%, ${color2} 100%), linear-gradient(to right, rgba(255,255,255,0.2), transparent)`,
// 19. 几何图案
`conic-gradient(from 0deg, ${color1} 0% 25%, ${color2} 25% 50%, ${color1} 50% 75%, ${color2} 75% 100%)`,
// 20. 手绘风格
`repeating-linear-gradient(${angle}deg, ${color1}, ${color1} 8px, ${color2} 8px, ${color2} 12px), radial-gradient(circle, ${color3} 10%, transparent 10%)`
];
const selectedPattern = getRandomItem(patterns);
// 返回图案和材质类型
return {
image: selectedPattern,
size: size > 30 ? 'cover' : `${size}px ${size}px`,
color: color1,
texture: getRandomItem(['metallic', 'matte', 'frosted', 'transparent'])
};
}
// ==========================================
// 核心工具函数
// ==========================================
function getRandomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function getRandomColor() {
const h = Math.floor(Math.random() * 360);
const s = Math.floor(Math.random() * 40) + 60; // 60-100% 饱和度
const l = Math.floor(Math.random() * 40) + 30; // 30-70% 亮度
return `hsl(${h}, ${s}%, ${l}%)`;
}
function getRandomLightColor() {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}, 70%, 85%)`;
}
function getRandomFontStyle() {
return {
fontWeight: getRandomItem(fontWeights),
fontStyle: getRandomItem(fontStyles),
textTransform: getRandomItem(textTransforms),
letterSpacing: getRandomItem(letterSpacings),
textShadow: getRandomItem(textShadows)
};
}
function generateBarcode() {
const barcode = [];
const widths = [1, 2, 3, 4];
// 生成12位随机数字
let code = '';
for (let i = 0; i < 12; i++) {
code += Math.floor(Math.random() * 10);
}
// 生成条形码线条
for (let i = 0; i < 100; i++) {
const width = getRandomItem(widths);
barcode.push(`<div class="barcode-line" style="height: ${20 + Math.random() * 5}px; width: ${width}px"></div>`);
}
return {
html: barcode.join(''),
code: code
};
}
function generateExpiryDate() {
const today = new Date();
const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
// 随机生成3-12个月后的日期
const monthsToAdd = Math.floor(Math.random() * 10) + 3;
today.setMonth(today.getMonth() + monthsToAdd);
return `BEST BEFORE: ${months[today.getMonth()]} ${today.getFullYear()}`;
}
function generateNutrition() {
const calories = Math.floor(Math.random() * 150) + 50;
const sugar = Math.floor(calories * 0.7 / 4);
return `
<div class="nutrition-title">NUTRITION</div>
<div class="nutrition-value">${calories}kcal</div>
<div class="nutrition-value">${sugar}g糖</div>
`;
}
function generateVolume() {
const volumes = ['250ml', '330ml', '355ml', '500ml', '1L'];
return getRandomItem(volumes);
}
// ==========================================
// 包装生成逻辑
// ==========================================
let isSquare = false;
function generatePackage() {
try {
const container = document.getElementById('packageContainer');
const statsText = document.getElementById('statsText');
// 清空容器
container.innerHTML = '';
// 随机选择形状
if (!isSquare) {
isSquare = Math.random() > 0.5;
}
// 1. 生成包装元素
const packageEl = document.createElement('div');
packageEl.className = isSquare ? 'box' : 'can';
packageEl.id = 'drinkPackage';
// 2. 生成视觉
const visual = generatePattern();
// 3. 创建内容元素
const content = document.createElement('div');
content.className = 'package-content';
// 4. 生成文本
const brand = getRandomItem(brandPrefixes) + " " + getRandomItem(brandSuffixes);
const flavor = getRandomItem(flavorMod) + " " + getRandomItem(flavorBase);
const type = getRandomItem(drinkTypes);
const manufacturer = getRandomItem(manufacturers);
const volume = generateVolume();
const expiry = generateExpiryDate();
// 5. 生成字体样式
const brandStyle = getRandomFontStyle();
const flavorStyle = getRandomFontStyle();
const typeStyle = getRandomFontStyle();
// 6. 应用样式
packageEl.style.backgroundImage = visual.image;
packageEl.style.backgroundSize = visual.size;
// 添加材质类
packageEl.classList.add(visual.texture);
// 7. 创建品牌名称
const brandEl = document.createElement('div');
brandEl.className = 'brand-name';
brandEl.textContent = brand;
brandEl.style.fontWeight = brandStyle.fontWeight;
brandEl.style.fontStyle = brandStyle.fontStyle;
brandEl.style.textTransform = brandStyle.textTransform;
brandEl.style.letterSpacing = brandStyle.letterSpacing;
brandEl.style.textShadow = brandStyle.textShadow;
// 8. 创建口味标签
const flavorEl = document.createElement('div');
flavorEl.className = 'flavor-badge';
flavorEl.textContent = flavor;
flavorEl.style.fontWeight = flavorStyle.fontWeight;
flavorEl.style.fontStyle = flavorStyle.fontStyle;
flavorEl.style.letterSpacing = flavorStyle.letterSpacing;
// 9. 创建类型指示器
const typeEl = document.createElement('div');
typeEl.className = 'type-indicator';
typeEl.textContent = type;
typeEl.style.fontWeight = typeStyle.fontWeight;
typeEl.style.letterSpacing = typeStyle.letterSpacing;
// 10. 创建体积标签
const volumeEl = document.createElement('div');
volumeEl.className = 'volume';
volumeEl.textContent = volume;
// 11. 创建营养成分
const nutritionEl = document.createElement('div');
nutritionEl.className = 'nutrition';
nutritionEl.innerHTML = generateNutrition();
// 12. 创建条形码
const barcodeData = generateBarcode();
const barcodeEl = document.createElement('div');
barcodeEl.className = 'barcode';
barcodeEl.innerHTML = barcodeData.html;
// 13. 创建生
index.html
index.html