GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-weight: 600;27    font-size: 36px;28    letter-spacing: 1px;29  }30  .status-icons {31    display: flex;32    gap: 26px;33    align-items: center;34  }35  .icon {36    width: 40px;37    height: 40px;38  }39 40  /* App bar */41  .app-bar {42    height: 120px;43    padding: 0 28px;44    display: flex;45    align-items: center;46    justify-content: space-between;47  }48  .app-actions {49    display: flex;50    gap: 40px;51    align-items: center;52  }53  .action-icon {54    width: 56px;55    height: 56px;56  }57 58  /* Section headers */59  .section-header {60    background: #2d2d2d;61    color: #FFFFFF;62    padding: 34px 32px;63    font-weight: 800;64    font-size: 52px;65    letter-spacing: 1px;66  }67 68  /* Text block */69  .text-block {70    padding: 36px 32px 44px;71    font-size: 42px;72    line-height: 1.6;73    color: #EDEDED;74  }75  .highlight {76    color: #FFB15A;77    font-weight: 700;78  }79  .clock {80    display: inline-block;81    vertical-align: middle;82    margin: 0 10px;83  }84 85  /* Image placeholder */86  .image {87    width: 100%;88    height: 760px;89    background: #E0E0E0;90    border-top: 1px solid #BDBDBD;91    border-bottom: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96    font-size: 40px;97    text-align: center;98  }99 100  /* CTA pill overlay */101  .cta-pill {102    position: absolute;103    left: 150px;104    top: 1460px;105    width: 780px;106    height: 110px;107    background: #BFE7D9;108    color: #073B2F;109    border-radius: 60px;110    display: flex;111    align-items: center;112    justify-content: center;113    font-size: 40px;114    font-weight: 700;115    box-shadow: 0 6px 16px rgba(0,0,0,0.35);116  }117 118  /* Bottom list & instructions */119  .bottom-area {120    padding: 24px 32px 40px;121  }122  .list-row {123    display: flex;124    align-items: center;125    gap: 24px;126    margin: 22px 0;127    font-size: 38px;128    color: #F1F1F1;129  }130  .instruction {131    margin-top: 28px;132    font-size: 40px;133    line-height: 1.6;134    color: #F6F6F6;135  }136  .underline-link {137    color: #BDE7FF;138    text-decoration: underline;139    text-underline-offset: 6px;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div>11:12</div>149    <div class="status-icons">150      <!-- Simple app icons -->151      <svg class="icon" viewBox="0 0 24 24">152        <rect x="3" y="6" width="18" height="12" fill="#ffffff"/>153        <polygon points="9,9 15,12 9,15" fill="#000000"/>154      </svg>155      <svg class="icon" viewBox="0 0 24 24">156        <rect x="2" y="5" width="20" height="14" fill="none" stroke="#ffffff" stroke-width="2"/>157        <path d="M3 6 L12 12 L21 6" stroke="#ffffff" stroke-width="2" fill="none"/>158      </svg>159      <svg class="icon" viewBox="0 0 24 24">160        <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>161        <rect x="7" y="8" width="10" height="8" fill="#ffffff"/>162      </svg>163      <svg class="icon" viewBox="0 0 24 24">164        <path d="M6 16 C6 11 10 7 15 7" stroke="#ffffff" stroke-width="2" fill="none"/>165        <path d="M17 6 L19 8 L21 6" stroke="#ffffff" stroke-width="2" fill="none"/>166      </svg>167      <!-- Connection + battery -->168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M2 18 L6 14 L10 18 L14 14 L18 18" stroke="#ffffff" stroke-width="2" fill="none"/>170      </svg>171      <svg class="icon" viewBox="0 0 24 24">172        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>173        <rect x="4" y="8" width="10" height="8" fill="#ffffff"/>174        <rect x="20" y="9" width="2" height="6" fill="#ffffff"/>175      </svg>176    </div>177  </div>178 179  <!-- App bar -->180  <div class="app-bar">181    <svg class="action-icon" viewBox="0 0 24 24">182      <path d="M15 6 L9 12 L15 18" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>183    </svg>184    <div class="app-actions">185      <svg class="action-icon" viewBox="0 0 24 24">186        <path d="M12 20 C7 17 4 14 4 10 C4 7 6.5 5 9 5 C10.5 5 11.8 5.8 12 6.5 C12.2 5.8 13.5 5 15 5 C17.5 5 20 7 20 10 C20 14 17 17 12 20 Z" fill="none" stroke="#ffffff" stroke-width="2"/>187      </svg>188      <svg class="action-icon" viewBox="0 0 24 24">189        <path d="M7 4 H17 V20 L12 17 L7 20 Z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>190      </svg>191      <svg class="action-icon" viewBox="0 0 24 24">192        <circle cx="7" cy="12" r="3" fill="none" stroke="#ffffff" stroke-width="2"/>193        <circle cx="17" cy="6" r="3" fill="none" stroke="#ffffff" stroke-width="2"/>194        <circle cx="17" cy="18" r="3" fill="none" stroke="#ffffff" stroke-width="2"/>195        <path d="M9.5 10.5 L14.5 7.5 M9.5 13.5 L14.5 16.5" stroke="#ffffff" stroke-width="2"/>196      </svg>197    </div>198  </div>199 200  <!-- Step 6 header -->201  <div class="section-header">STEP 6/7</div>202 203  <!-- Step 6 description -->204  <div class="text-block">205    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 -206    <svg class="clock" width="38" height="38" viewBox="0 0 24 24">207      <circle cx="12" cy="12" r="10" fill="#e6e6e6" stroke="#8a8a8a" stroke-width="2"/>208      <path d="M12 7 L12 12 L16 12" stroke="#636363" stroke-width="2" stroke-linecap="round"/>209    </svg>210    <span class="highlight">7 min.</span>211  </div>212 213  <!-- Step 7 header -->214  <div class="section-header">STEP 7/7</div>215 216  <!-- Image of oven -->217  <div class="image">[IMG: Oven with chocolate cakes in tins]</div>218 219  <!-- CTA overlay -->220  <div class="cta-pill">Start cooking!</div>221 222  <!-- Bottom items and instructions -->223  <div class="bottom-area">224    <div class="list-row">225      <svg class="action-icon" viewBox="0 0 24 24">226        <path d="M3 7 H21 L19 18 H5 Z" fill="none" stroke="#ffffff" stroke-width="2"/>227        <circle cx="8" cy="20" r="2" fill="#ffffff"/>228        <circle cx="16" cy="20" r="2" fill="#ffffff"/>229      </svg>230      <span>300 g bittersweet couverture chocolate</span>231    </div>232 233    <div class="list-row">234      <svg class="action-icon" viewBox="0 0 24 24">235        <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>236        <circle cx="12" cy="12" r="4" fill="none" stroke="#ffffff" stroke-width="2"/>237      </svg>238      <span>oven</span>239    </div>240 241    <div class="instruction">242      Bake cakes in a <span class="underline-link">preheated oven</span> at 200°C/400°F for approx. <span class="highlight">7 min.</span> Keep a close eye to avoid overbaking.243    </div>244  </div>245 246</div>247</body>248</html>