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 with Share Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 92px;22    padding: 0 28px;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    font-weight: 600;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 22px; }31  .time { font-size: 36px; letter-spacing: 0.5px; }32 33  .status-icon {34    width: 38px; height: 24px; opacity: 0.9;35    display: inline-flex; align-items: center; justify-content: center;36  }37  .status-icon svg { width: 100%; height: 100%; fill: #fff; }38 39  /* Top navigation overlay */40  .top-nav {41    position: absolute;42    top: 92px; left: 0; right: 0;43    height: 120px;44    color: #fff;45    display: flex;46    align-items: center;47    justify-content: space-between;48    padding: 0 32px;49    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.35));50  }51  .nav-left, .nav-right { display: flex; align-items: center; gap: 34px; }52  .nav-icon {53    width: 54px; height: 54px; opacity: 0.9;54  }55  .nav-icon svg { width: 100%; height: 100%; stroke: #fff; stroke-width: 2.2; fill: none; }56 57  /* Content */58  .content {59    position: relative;60    padding-top: 92px; /* status bar height */61  }62 63  .step-header {64    height: 120px;65    display: flex;66    align-items: center;67    padding: 0 36px;68    background: #222;69    color: #bfbfbf;70    font-size: 44px;71    font-weight: 800;72    letter-spacing: 1px;73  }74 75  .image-block {76    width: 100%;77    height: 560px;78    background: #E0E0E0;79    border-top: 1px solid #BDBDBD;80    border-bottom: 1px solid #BDBDBD;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #757575;85    font-size: 36px;86  }87 88  .description {89    padding: 38px 36px 54px 36px;90    color: #d6d6d6;91    font-size: 36px;92    line-height: 1.55;93    background: rgba(0,0,0,0.85);94  }95  .clock-pill {96    display: inline-flex; align-items: center; gap: 12px;97    background: #2b2b2b;98    padding: 6px 14px;99    border-radius: 22px;100    border: 1px solid #3a3a3a;101  }102  .clock {103    width: 28px; height: 28px; border-radius: 50%;104    background: #9fa1a6;105    display: inline-block;106    position: relative;107  }108  .clock::before, .clock::after {109    content: "";110    position: absolute; background: #333;111    left: 50%; top: 50%; transform-origin: left center;112  }113  .clock::before { width: 10px; height: 2px; transform: translate(-50%,-50%) rotate(0deg); }114  .clock::after  { width: 7px; height: 2px; transform: translate(-50%,-50%) rotate(90deg); }115  .highlight { color: #ff8f3a; font-weight: 700; }116 117  .step-header.dark { background: #1a1a1a; }118 119  /* Share sheet */120  .share-sheet {121    position: absolute;122    left: 0; right: 0; bottom: 0;123    height: 980px;124    background: #1f1f1f;125    border-top-left-radius: 36px;126    border-top-right-radius: 36px;127    box-shadow: 0 -12px 30px rgba(0,0,0,0.6);128    color: #fff;129    padding: 24px 36px 120px 36px;130  }131  .sheet-handle {132    width: 140px; height: 10px; border-radius: 6px;133    background: #666;134    margin: 10px auto 28px auto;135    opacity: 0.8;136  }137  .share-url {138    font-size: 34px;139    line-height: 1.45;140    color: #eaeaea;141    margin-top: 8px;142    word-break: break-all;143  }144  .action-row {145    display: flex; gap: 28px;146    margin-top: 34px;147  }148  .action-btn {149    flex: 0 0 240px;150    height: 104px;151    border: 2px solid #4b7cf0;152    border-radius: 24px;153    display: flex; align-items: center; justify-content: center;154    gap: 16px;155    color: #dfe6ff; font-weight: 700; font-size: 34px;156    background: rgba(75,124,240,0.08);157  }158  .action-btn svg { width: 40px; height: 40px; stroke: #7ea3ff; stroke-width: 2.2; fill: none; }159 160  .no-people {161    text-align: center;162    color: #9c9c9c;163    font-size: 32px;164    margin: 56px 0 18px 0;165  }166 167  .apps {168    display: flex;169    justify-content: space-around;170    align-items: center;171    margin-top: 24px;172    padding: 0 18px;173  }174  .app {175    width: 180px;176    text-align: center;177    color: #cfd3d8;178    font-size: 30px;179  }180  .app-icon {181    width: 120px; height: 120px; border-radius: 60px;182    background: #ffffff;183    margin: 0 auto 16px auto;184    display: flex; align-items: center; justify-content: center;185    color: #222; font-weight: 800; font-size: 28px;186    border: 1px solid #d9d9d9;187  }188  .home-indicator {189    position: absolute;190    bottom: 26px; left: 50%;191    width: 300px; height: 12px;192    transform: translateX(-50%);193    background: #cfcfcf;194    border-radius: 8px;195    opacity: 0.9;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status Bar -->203  <div class="status-bar">204    <div class="status-left">205      <div class="time">11:13</div>206      <div class="status-icon">207        <svg viewBox="0 0 24 16"><rect x="2" y="3" width="20" height="10" rx="2"></rect></svg>208      </div>209      <div class="status-icon">210        <svg viewBox="0 0 24 16"><path d="M3 13l8-10 8 10" stroke="#fff" fill="none" stroke-width="2"></path></svg>211      </div>212      <div class="status-icon">213        <svg viewBox="0 0 24 16"><rect x="3" y="2" width="18" height="12" rx="2"></rect><path d="M6 5h12M6 8h12" stroke="#000"></path></svg>214      </div>215      <div class="status-icon">216        <svg viewBox="0 0 24 16"><path d="M2 8h20" stroke="#fff" stroke-width="2"></path><circle cx="12" cy="8" r="3" fill="#fff"></circle></svg>217      </div>218    </div>219    <div class="status-right">220      <div class="status-icon">221        <svg viewBox="0 0 24 16"><path d="M3 13c2-3 5-5 9-5s7 2 9 5" stroke="#fff" stroke-width="2" fill="none"></path></svg>222      </div>223      <div class="status-icon">224        <svg viewBox="0 0 24 16"><rect x="3" y="3" width="16" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect><rect x="20" y="6" width="2" height="4" fill="#fff"></rect></svg>225      </div>226    </div>227  </div>228 229  <!-- Top Navigation -->230  <div class="top-nav">231    <div class="nav-left">232      <div class="nav-icon">233        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg>234      </div>235    </div>236    <div class="nav-right">237      <div class="nav-icon">238        <svg viewBox="0 0 24 24"><path d="M12 21c4.5-3.8 8-6.9 8-11a5 5 0 0 0-9-2 5 5 0 0 0-9 2c0 4.1 3.5 7.2 8 11z"></path></svg>239      </div>240      <div class="nav-icon">241        <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>242      </div>243      <div class="nav-icon">244        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="3"></circle><circle cx="12" cy="7" r="3"></circle><circle cx="19" cy="12" r="3"></circle><path d="M7.6 10.8l2.8-2M14 8.8l3 2.2" stroke="#fff" stroke-width="2" fill="none"></path></svg>245      </div>246    </div>247  </div>248 249  <!-- Main content -->250  <div class="content">251    <div class="step-header">STEP 6/7</div>252    <div class="image-block">[IMG: Batter divided into tins]</div>253    <div class="description">254      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 –255      <span class="clock-pill"><span class="clock"></span><span class="highlight">7 min.</span></span>256    </div>257 258    <div class="step-header dark">STEP 7/7</div>259    <div class="image-block" style="height: 520px;">[IMG: Oven rack with tins]</div>260  </div>261 262  <!-- Share Sheet -->263  <div class="share-sheet">264    <div class="sheet-handle"></div>265    <div class="share-url">https://www.kitchenstories.com/en/recipes/molten-chocolate-cake</div>266 267    <div class="action-row">268      <div class="action-btn">269        <svg viewBox="0 0 24 24">270          <rect x="4" y="4" width="12" height="12" rx="2"></rect>271          <rect x="8" y="8" width="12" height="12" rx="2"></rect>272        </svg>273        <span>Copy</span>274      </div>275      <div class="action-btn">276        <svg viewBox="0 0 24 24">277          <path d="M6 18l12-12M6 6h6v6" stroke="#7ea3ff" stroke-width="2" fill="none"></path>278        </svg>279        <span>Nearby</span>280      </div>281    </div>282 283    <div class="no-people">No recommended people to share with</div>284 285    <div class="apps">286      <div class="app">287        <div class="app-icon">M</div>288        <div>Gmail</div>289      </div>290      <div class="app">291        <div class="app-icon">Drive</div>292        <div>Drive</div>293      </div>294      <div class="app">295        <div class="app-icon">Chat</div>296        <div>Messages</div>297      </div>298      <div class="app">299        <div class="app-icon">Keep</div>300        <div>Keep Notes</div>301      </div>302    </div>303  </div>304 305  <div class="home-indicator"></div>306</div>307</body>308</html>