GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Recipe Steps</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Top system/status bar */20 .status-bar {21 height: 90px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #EAEAEA;27 font-weight: 600;28 font-size: 36px;29 letter-spacing: 0.5px;30 opacity: 0.9;31 }32 .status-icons { display: flex; gap: 26px; align-items: center; }33 .status-dot { width: 14px; height: 14px; background: #EAEAEA; border-radius: 50%; display: inline-block; }34 .battery {35 width: 46px; height: 24px; border: 3px solid #EAEAEA; border-radius: 6px; position: relative;36 }37 .battery::after {38 content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #EAEAEA; border-radius: 2px;39 }40 .battery .level {41 position: absolute; left: 3px; top: 3px; bottom: 3px; width: 28px; background: #EAEAEA; border-radius: 3px;42 }43 44 /* Header with actions */45 .top-actions {46 height: 120px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 padding: 0 36px;51 }52 .left-action, .right-actions { display: flex; align-items: center; }53 .right-actions { gap: 34px; }54 55 .icon-btn svg { width: 56px; height: 56px; }56 .icon-stroke { stroke: #FFFFFF; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }57 .icon-fill { fill: #FFFFFF; }58 59 /* Step bars */60 .step-bar {61 background: #2B2B2B;62 padding: 28px 36px;63 font-size: 48px;64 font-weight: 800;65 letter-spacing: 1px;66 }67 68 /* Content text */69 .content {70 padding: 36px;71 font-size: 38px;72 line-height: 1.5;73 color: #F5F5F5;74 }75 .accent { color: #FFB74D; font-weight: 700; }76 77 /* Image placeholder */78 .img-placeholder {79 margin-top: 0;80 width: 100%;81 height: 780px;82 background: #E0E0E0;83 border-top: 1px solid #BDBDBD;84 border-bottom: 1px solid #BDBDBD;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #757575;89 font-size: 40px;90 font-weight: 600;91 letter-spacing: 0.5px;92 }93 94 /* Bottom list + CTA */95 .list {96 padding: 28px 36px 0 36px;97 }98 .row {99 display: flex;100 align-items: center;101 gap: 24px;102 padding: 26px 0;103 border-bottom: 1px solid rgba(255,255,255,0.08);104 font-size: 36px;105 }106 .row svg { width: 54px; height: 54px; }107 .cta {108 width: 820px;109 margin: 34px auto;110 background: #BFE6D6;111 color: #0C3B2E;112 text-align: center;113 padding: 28px 20px;114 border-radius: 999px;115 font-size: 40px;116 font-weight: 700;117 }118 119 .note {120 padding: 20px 36px;121 font-size: 34px;122 line-height: 1.55;123 color: #EDEDED;124 }125 .note .linkish { color: #9FD6FF; text-decoration: underline; }126</style>127</head>128<body>129<div id="render-target">130 <!-- Simulated status bar -->131 <div class="status-bar">132 <div>11:16</div>133 <div class="status-icons">134 <span class="status-dot"></span>135 <span class="status-dot"></span>136 <span class="status-dot"></span>137 <div class="battery"><div class="level"></div></div>138 </div>139 </div>140 141 <!-- Header actions -->142 <div class="top-actions">143 <div class="left-action icon-btn" aria-label="Back">144 <svg viewBox="0 0 48 48">145 <path class="icon-stroke" d="M30 8 L14 24 L30 40"></path>146 </svg>147 </div>148 <div class="right-actions">149 <!-- Heart (favorite) -->150 <div class="icon-btn" aria-label="Favorite">151 <svg viewBox="0 0 48 48">152 <path class="icon-stroke" d="M24 40 L10 27 C5 22 5 14 10 10 C14 6 20 7 24 12 C28 7 34 6 38 10 C43 14 43 22 38 27 L24 40 Z"></path>153 </svg>154 </div>155 <!-- Bookmark -->156 <div class="icon-btn" aria-label="Bookmark">157 <svg viewBox="0 0 48 48">158 <path class="icon-stroke" d="M12 8 H36 V40 L24 32 L12 40 Z"></path>159 </svg>160 </div>161 <!-- Share -->162 <div class="icon-btn" aria-label="Share">163 <svg viewBox="0 0 48 48">164 <circle cx="12" cy="24" r="4" class="icon-stroke"></circle>165 <circle cx="36" cy="12" r="4" class="icon-stroke"></circle>166 <circle cx="36" cy="36" r="4" class="icon-stroke"></circle>167 <path d="M15 23 L32 14" class="icon-stroke"></path>168 <path d="M15 25 L32 34" class="icon-stroke"></path>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Step 6 -->175 <div class="step-bar">STEP 6/7</div>176 <div class="content">177 Now, divide the batter evenly among the buttered baking tins (approx. 4 cm high). Next, place the filled tins in the freezer for approx. 5 – 🕒 <span class="accent">7 min.</span>178 </div>179 180 <!-- Step 7 -->181 <div class="step-bar">STEP 7/7</div>182 183 <!-- Image for step 7 -->184 <div class="img-placeholder">[IMG: Oven with chocolate batter in small tins]</div>185 186 <!-- Ingredients / tools -->187 <div class="list">188 <div class="row">189 <svg viewBox="0 0 48 48">190 <path class="icon-stroke" d="M6 22 H42"></path>191 <path class="icon-stroke" d="M10 22 L14 36 H34 L38 22"></path>192 <path class="icon-stroke" d="M18 14 L12 22"></path>193 <path class="icon-stroke" d="M30 14 L36 22"></path>194 </svg>195 <div>300 g bittersweet couverture chocolate</div>196 </div>197 <div class="row">198 <svg viewBox="0 0 48 48">199 <rect x="8" y="18" width="32" height="18" rx="3" class="icon-stroke"></rect>200 <path d="M14 18 L34 18 L32 14 H16 Z" class="icon-stroke"></path>201 <path d="M20 12 H28" class="icon-stroke"></path>202 </svg>203 <div>Oven preheated to 200°C/400°F</div>204 </div>205 </div>206 207 <div class="cta">Start cooking!</div>208 209 <div class="note">210 Bake cakes in a <span class="linkish">preheated oven</span> at 200°C/400°F for the indicated time until edges are set and centers are soft.211 </div>212</div>213</body>214</html>