StillHammer
1d1d42b8d9
- Fix html2pptx Windows file path handling (file:/// URLs) - Fix Italian flag diagonal (remove CSS rotation, use positioned rectangles) - Add Chinese character background watermark (意) - Add geometric pattern attempt (Art Deco style) - Fix validation errors (text positioning, margins) - Add backup slides directory - Add build scripts and image resources 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
530 lines
14 KiB
HTML
530 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
html { background: #ffffff; }
|
|
body {
|
|
width: 720pt;
|
|
height: 405pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Georgia, serif;
|
|
color: #2C2C2C;
|
|
display: flex;
|
|
}
|
|
|
|
.slide {
|
|
width: 720pt;
|
|
height: 405pt;
|
|
position: relative;
|
|
overflow: hidden;
|
|
page-break-after: always;
|
|
}
|
|
|
|
/* Slide 1 - Title */
|
|
.slide-1 {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.flag-stripe-top {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 20pt;
|
|
background: #009246;
|
|
}
|
|
|
|
.flag-stripe-mid {
|
|
position: absolute;
|
|
top: 20pt;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 20pt;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.flag-stripe-bot {
|
|
position: absolute;
|
|
top: 40pt;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 20pt;
|
|
background: #CE2B37;
|
|
}
|
|
|
|
.title-container {
|
|
position: absolute;
|
|
top: 80pt;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #F8F8F8;
|
|
padding: 24pt 45pt;
|
|
border-radius: 15pt;
|
|
box-shadow: 0 8pt 25pt rgba(0, 0, 0, 0.15);
|
|
border: 3pt solid #D4AF37;
|
|
text-align: center;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 44pt;
|
|
font-weight: 700;
|
|
color: #009246;
|
|
margin-bottom: 12pt;
|
|
}
|
|
|
|
.title-sub {
|
|
font-size: 26pt;
|
|
color: #CE2B37;
|
|
font-weight: 600;
|
|
margin-bottom: 8pt;
|
|
}
|
|
|
|
.title-tag {
|
|
font-size: 16pt;
|
|
color: #666666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Slide 2 - Location */
|
|
.slide-2 {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.header-green {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60pt;
|
|
background: #009246;
|
|
}
|
|
|
|
.header-text {
|
|
position: absolute;
|
|
top: 12pt;
|
|
left: 35pt;
|
|
font-size: 32pt;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.info-box-1 {
|
|
position: absolute;
|
|
top: 80pt;
|
|
left: 30pt;
|
|
width: 300pt;
|
|
background: #F8F8F8;
|
|
border-radius: 10pt;
|
|
padding: 15pt;
|
|
border-left: 5pt solid #009246;
|
|
box-shadow: 0 3pt 10pt rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.info-box-2 {
|
|
position: absolute;
|
|
top: 80pt;
|
|
right: 30pt;
|
|
width: 300pt;
|
|
background: #F8F8F8;
|
|
border-radius: 10pt;
|
|
padding: 15pt;
|
|
border-left: 5pt solid #009246;
|
|
box-shadow: 0 3pt 10pt rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.info-box-3 {
|
|
position: absolute;
|
|
top: 185pt;
|
|
left: 30pt;
|
|
width: 300pt;
|
|
background: #F8F8F8;
|
|
border-radius: 10pt;
|
|
padding: 15pt;
|
|
border-left: 5pt solid #009246;
|
|
box-shadow: 0 3pt 10pt rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.info-box-4 {
|
|
position: absolute;
|
|
top: 185pt;
|
|
right: 30pt;
|
|
width: 300pt;
|
|
background: #F8F8F8;
|
|
border-radius: 10pt;
|
|
padding: 15pt;
|
|
border-left: 5pt solid #009246;
|
|
box-shadow: 0 3pt 10pt rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 16pt;
|
|
color: #CE2B37;
|
|
font-weight: 700;
|
|
margin-bottom: 6pt;
|
|
}
|
|
|
|
.info-text {
|
|
font-size: 19pt;
|
|
color: #2C2C2C;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.star-gold {
|
|
color: #D4AF37;
|
|
}
|
|
|
|
.image-bottom {
|
|
position: absolute;
|
|
bottom: 20pt;
|
|
left: 30pt;
|
|
right: 30pt;
|
|
height: 90pt;
|
|
border-radius: 10pt;
|
|
box-shadow: 0 4pt 15pt rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Slide 3 & 4 - Dishes */
|
|
.slide-dish {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.dish-photo-section {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 400pt;
|
|
height: 405pt;
|
|
}
|
|
|
|
.dish-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.dish-details-section {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 320pt;
|
|
height: 405pt;
|
|
background: #F8F8F8;
|
|
border-left: 6pt solid #009246;
|
|
padding: 45pt 25pt 90pt 25pt;
|
|
}
|
|
|
|
.dish-label {
|
|
font-size: 14pt;
|
|
color: #CE2B37;
|
|
font-weight: 700;
|
|
margin-bottom: 7pt;
|
|
}
|
|
|
|
.dish-title {
|
|
font-size: 27pt;
|
|
font-weight: 700;
|
|
color: #009246;
|
|
margin-bottom: 12pt;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.keyword-item {
|
|
background: #FFFFFF;
|
|
padding: 6pt 11pt;
|
|
border-radius: 6pt;
|
|
border-left: 3pt solid #D4AF37;
|
|
box-shadow: 0 2pt 5pt rgba(0, 0, 0, 0.06);
|
|
margin-bottom: 7pt;
|
|
}
|
|
|
|
.keyword-txt {
|
|
font-size: 14pt;
|
|
color: #2C2C2C;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.price-badge {
|
|
background: #009246;
|
|
padding: 8pt 15pt;
|
|
border-radius: 8pt;
|
|
display: inline-block;
|
|
box-shadow: 0 3pt 10pt rgba(0, 146, 70, 0.25);
|
|
margin-top: 10pt;
|
|
}
|
|
|
|
.price-val {
|
|
font-size: 20pt;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Slide 5 - Evaluation */
|
|
.slide-5 {
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
.eval-head {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 55pt;
|
|
background: #CE2B37;
|
|
}
|
|
|
|
.eval-head-txt {
|
|
position: absolute;
|
|
top: 10pt;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 34pt;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.eval-item-1 {
|
|
position: absolute;
|
|
top: 75pt;
|
|
left: 30pt;
|
|
width: 310pt;
|
|
height: 90pt;
|
|
background: #FFFFFF;
|
|
border-radius: 10pt;
|
|
padding: 12pt;
|
|
box-shadow: 0 4pt 12pt rgba(0, 0, 0, 0.08);
|
|
border-top: 5pt solid #D4AF37;
|
|
text-align: center;
|
|
}
|
|
|
|
.eval-item-2 {
|
|
position: absolute;
|
|
top: 75pt;
|
|
right: 30pt;
|
|
width: 310pt;
|
|
height: 90pt;
|
|
background: #FFFFFF;
|
|
border-radius: 10pt;
|
|
padding: 12pt;
|
|
box-shadow: 0 4pt 12pt rgba(0, 0, 0, 0.08);
|
|
border-top: 5pt solid #D4AF37;
|
|
text-align: center;
|
|
}
|
|
|
|
.eval-item-3 {
|
|
position: absolute;
|
|
top: 185pt;
|
|
left: 30pt;
|
|
width: 310pt;
|
|
height: 90pt;
|
|
background: #FFFFFF;
|
|
border-radius: 10pt;
|
|
padding: 12pt;
|
|
box-shadow: 0 4pt 12pt rgba(0, 0, 0, 0.08);
|
|
border-top: 5pt solid #D4AF37;
|
|
text-align: center;
|
|
}
|
|
|
|
.eval-item-4 {
|
|
position: absolute;
|
|
top: 185pt;
|
|
right: 30pt;
|
|
width: 310pt;
|
|
height: 90pt;
|
|
background: #FFFFFF;
|
|
border-radius: 10pt;
|
|
padding: 12pt;
|
|
box-shadow: 0 4pt 12pt rgba(0, 0, 0, 0.08);
|
|
border-top: 5pt solid #D4AF37;
|
|
text-align: center;
|
|
}
|
|
|
|
.eval-label {
|
|
font-size: 18pt;
|
|
color: #CE2B37;
|
|
font-weight: 700;
|
|
margin-bottom: 8pt;
|
|
}
|
|
|
|
.eval-value {
|
|
font-size: 24pt;
|
|
color: #009246;
|
|
font-weight: 700;
|
|
margin-bottom: 4pt;
|
|
}
|
|
|
|
.eval-detail {
|
|
font-size: 15pt;
|
|
color: #666666;
|
|
}
|
|
|
|
.final-box {
|
|
position: absolute;
|
|
bottom: 90pt;
|
|
left: 30pt;
|
|
right: 30pt;
|
|
height: 46pt;
|
|
background: #009246;
|
|
border-radius: 10pt;
|
|
box-shadow: 0 4pt 15pt rgba(0, 146, 70, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.final-msg {
|
|
font-size: 20pt;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.flag-badge {
|
|
position: absolute;
|
|
bottom: 15pt;
|
|
right: 15pt;
|
|
width: 40pt;
|
|
height: 40pt;
|
|
border-radius: 5pt;
|
|
box-shadow: 0 2pt 6pt rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.badge-green { background: #009246; }
|
|
.badge-white { background: #FFFFFF; border: 2pt solid #D4AF37; }
|
|
.badge-red { background: #CE2B37; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Slide 1: Title -->
|
|
<div class="slide slide-1">
|
|
<div class="flag-stripe-top"></div>
|
|
<div class="flag-stripe-mid"></div>
|
|
<div class="flag-stripe-bot"></div>
|
|
|
|
<div class="title-container">
|
|
<p class="title-main">Alimentari Piccolo</p>
|
|
<p class="title-sub">意大利餐吧 & 披萨</p>
|
|
<p class="title-tag">上海番禺路店</p>
|
|
</div>
|
|
|
|
<div class="flag-badge badge-green"></div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Location & Ambiance -->
|
|
<div class="slide slide-2">
|
|
<div class="header-green"></div>
|
|
<p class="header-text">餐厅概况 | RISTORANTE</p>
|
|
|
|
<div class="info-box-1">
|
|
<p class="info-title">📍 位置</p>
|
|
<p class="info-text">番禺路390号103室A区</p>
|
|
</div>
|
|
|
|
<div class="info-box-2">
|
|
<p class="info-title">🍝 类型</p>
|
|
<p class="info-text">正宗意大利料理</p>
|
|
</div>
|
|
|
|
<div class="info-box-3">
|
|
<p class="info-title">🌟 评分</p>
|
|
<p class="info-text"><span class="star-gold">★★★★</span> 4.4/5 (3511条)</p>
|
|
</div>
|
|
|
|
<div class="info-box-4">
|
|
<p class="info-title">💰 人均</p>
|
|
<p class="info-text" style="color: #D4AF37;">¥136/人</p>
|
|
</div>
|
|
|
|
<img src="outside.jpg" class="image-bottom" alt="Restaurant">
|
|
|
|
<div class="flag-badge badge-red"></div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Dish 1 - Piadina -->
|
|
<div class="slide slide-dish">
|
|
<div class="dish-photo-section">
|
|
<img src="plat1.jpg" class="dish-photo" alt="Piadina">
|
|
</div>
|
|
|
|
<div class="dish-details-section">
|
|
<p class="dish-label">推荐菜品 #1 | ¥65-75</p>
|
|
<p class="dish-title">意式皮亚迪纳<br>Piadina</p>
|
|
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">🔥 现烤薄饼 金黄酥脆</p>
|
|
</div>
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">🥗 新鲜蔬菜 色彩缤纷</p>
|
|
</div>
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">🥓 意式火腿 奶酪酱汁</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flag-badge badge-green"></div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Dish 2 - Croquettes -->
|
|
<div class="slide slide-dish">
|
|
<div class="dish-photo-section">
|
|
<img src="plat2.jpg" class="dish-photo" alt="Croquettes">
|
|
</div>
|
|
|
|
<div class="dish-details-section">
|
|
<p class="dish-label">推荐菜品 #2 | ¥65</p>
|
|
<p class="dish-title">意式炸肉丸<br>Croquettes</p>
|
|
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">✨ 金黄酥脆 外壳完美</p>
|
|
</div>
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">🥩 肉质鲜嫩 多汁饱满</p>
|
|
</div>
|
|
<div class="keyword-item">
|
|
<p class="keyword-txt">🧈 奶油酱汁 香草点缀</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flag-badge badge-white"></div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Price & Evaluation -->
|
|
<div class="slide slide-5">
|
|
<div class="eval-head"></div>
|
|
<p class="eval-head-txt">综合评价 | VALUTAZIONE</p>
|
|
|
|
<div class="eval-item-1">
|
|
<p class="eval-label">💵 价格区间</p>
|
|
<p class="eval-value">¥65-75/道菜</p>
|
|
<p class="eval-detail">人均约¥136</p>
|
|
</div>
|
|
|
|
<div class="eval-item-2">
|
|
<p class="eval-label">⭐ 性价比</p>
|
|
<p class="eval-value">优秀</p>
|
|
<p class="eval-detail">物超所值</p>
|
|
</div>
|
|
|
|
<div class="eval-item-3">
|
|
<p class="eval-label">👨🍳 服务</p>
|
|
<p class="eval-value">热情周到</p>
|
|
<p class="eval-detail">专业细致</p>
|
|
</div>
|
|
|
|
<div class="eval-item-4">
|
|
<p class="eval-label">🏆 总体评分</p>
|
|
<p class="eval-value">4.4/5 ★★★★</p>
|
|
<p class="eval-detail">强烈推荐</p>
|
|
</div>
|
|
|
|
<div class="final-box">
|
|
<p class="final-msg">正宗意式风味 · 温馨舒适环境 · 值得一试！</p>
|
|
</div>
|
|
|
|
<div class="flag-badge badge-red"></div>
|
|
</div>
|
|
</body>
|
|
</html> |