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 Bottom Sheet UI</title>7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #ffffff;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 120px;23    background: #1c1c1c;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 32px;28    font-size: 40px;29  }30  .statusbar .left { font-weight: 600; }31  .statusbar .right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .sb-dot { width: 14px; height: 14px; background:#d8d8d8; border-radius:50%; opacity:.8; }38  .sb-rect { width: 36px; height: 24px; border:2px solid #eaeaea; border-radius:4px; }39  .sb-wifi {40    width: 36px; height: 24px; position: relative;41  }42  .sb-wifi:before, .sb-wifi:after {43    content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #fff; border-color:#fff transparent transparent transparent; border-radius:50%;44  }45  .sb-wifi:before { top:6px; width:28px; height:28px; }46  .sb-wifi:after { top:10px; width:18px; height:18px; }47 48  /* Hero image placeholder */49  .hero {50    position: absolute;51    top: 120px;52    left: 0;53    right: 0;54    height: 900px;55  }56  .img-ph {57    width: 100%; height: 100%;58    background: #E0E0E0;59    border: 1px solid #BDBDBD;60    display: flex; justify-content: center; align-items: center;61    color: #757575; font-size: 44px; font-weight: 600;62  }63 64  /* Overlay action buttons on hero */65  .circle-btn {66    position: absolute;67    width: 112px; height: 112px;68    border-radius: 50%;69    background: rgba(0,0,0,0.25);70    display: flex; align-items: center; justify-content: center;71  }72  .circle-btn.left { left: 36px; top: 350px; }73  .circle-btn.right { right: 36px; top: 350px; }74  .circle-btn svg { width: 50px; height: 50px; fill: #fff; }75 76  /* Details section */77  .details {78    position: absolute;79    top: 1020px;80    left: 40px; right: 40px;81    background: #ffffff;82    border-radius: 8px;83    padding: 24px 16px 0 16px;84  }85  .title-row {86    display: flex; align-items: center;87    gap: 20px;88    padding: 8px 8px 0 8px;89  }90  h1 {91    font-size: 64px; margin: 0; line-height: 1.2; font-weight: 800; color: #222;92    flex: 1;93  }94  .subtitle {95    font-size: 28px; letter-spacing: 2px; color: #6f6f6f; margin: 12px 8px 0 8px;96  }97  .add-pill {98    width: 112px; height: 112px; border-radius: 56px;99    background: #2F9C95; display:flex; align-items:center; justify-content:center;100  }101  .add-pill svg { width: 56px; height: 56px; fill: #fff; }102 103  .tabs {104    display: flex; gap: 56px;105    padding: 28px 8px 16px 8px;106    border-bottom: 4px solid #e5e5e5;107  }108  .tab {109    font-size: 40px; color: #5b5b5b; padding-bottom: 20px; position: relative;110    font-weight: 600;111  }112  .tab.active { color: #2F9C95; }113  .tab.active:after {114    content:""; position:absolute; left:0; right:0; bottom:-4px; height:8px;115    background:#2F9C95; border-radius: 4px;116  }117 118  /* Backdrop for bottom sheet */119  .backdrop {120    position: absolute; inset: 0;121    background: rgba(0,0,0,0.45);122    z-index: 5;123  }124 125  /* Bottom sheet */126  .sheet {127    position: absolute;128    left: 36px; right: 36px;129    bottom: 140px;130    background: #ffffff;131    border-radius: 28px;132    box-shadow: 0 16px 40px rgba(0,0,0,0.35);133    z-index: 10;134    padding: 28px 24px 40px 24px;135  }136  .sheet .handle {137    width: 110px; height: 10px; background: #cfcfcf; border-radius: 10px; margin: 0 auto 20px auto;138  }139  .sheet .chev {140    width: 60px; height: 30px; margin: -6px auto 24px auto; display:block;141  }142  .sheet .row {143    display: flex; align-items: center; gap: 28px;144    padding: 36px 12px;145  }146  .sheet .row + .row { border-top: 1px solid #f0f0f0; }147  .icon {148    width: 72px; height: 72px; border-radius: 14px;149    display:flex; align-items:center; justify-content:center;150    color:#2F9C95;151  }152  .icon svg { width: 60px; height: 60px; fill: #2F9C95; }153  .row .label {154    font-size: 44px; color: #3a3a3a; font-weight: 700;155  }156 157  /* Bottom navigation bar (gesture area) */158  .nav-bottom {159    position: absolute; left: 0; right: 0; bottom: 0; height: 120px;160    background: #121212; display:flex; align-items:center; justify-content:center;161  }162  .nav-bottom .pill {163    width: 180px; height: 14px; background:#f0f0f0; border-radius: 8px; opacity: .92;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="statusbar">172    <div class="left">6:15</div>173    <div class="right">174      <div class="sb-dot"></div>175      <div class="sb-dot"></div>176      <div class="sb-rect"></div>177      <div class="sb-dot"></div>178      <div class="sb-wifi"></div>179      <div class="sb-rect" style="width:28px; height:18px;"></div>180    </div>181  </div>182 183  <!-- Hero image area -->184  <div class="hero">185    <div class="img-ph">[IMG: Bruschetta close-up]</div>186 187    <!-- Back button -->188    <div class="circle-btn left">189      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-2 2L3 12 13.5 2.5z"/></svg>190    </div>191    <!-- Share / open in new -->192    <div class="circle-btn right">193      <svg viewBox="0 0 24 24"><path d="M14 3h7v7h-3V7.41l-8.29 8.3-2.12-2.12L15.59 5H14V3zM19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z"/></svg>194    </div>195  </div>196 197  <!-- Details section -->198  <div class="details">199    <div class="title-row">200      <h1>Classic Bruschetta</h1>201      <div class="add-pill">202        <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2h5z"/></svg>203      </div>204    </div>205    <div class="subtitle">LA BELLA VITA CUCINA</div>206    <div class="tabs">207      <div class="tab active">Overview</div>208      <div class="tab">Ingredients</div>209      <div class="tab">Directions</div>210    </div>211  </div>212 213  <!-- Dim backdrop for sheet -->214  <div class="backdrop"></div>215 216  <!-- Bottom Sheet -->217  <div class="sheet">218    <div class="handle"></div>219    <svg class="chev" viewBox="0 0 24 24"><path d="M12 15L6 9h12l-6 6z" fill="#c7c7c7"/></svg>220 221    <div class="row">222      <div class="icon">223        <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8h16v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm3 8H9V7a3 3 0 016 0v3z"/></svg>224      </div>225      <div class="label">Add to Meal Plan</div>226    </div>227 228    <div class="row">229      <div class="icon">230        <svg viewBox="0 0 24 24"><path d="M7 6h2l1 3h8l-1.5 6h-9L6 5H3V3h4l1 3zm2.5 14a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm7 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>231      </div>232      <div class="label">Add to Shopping List</div>233    </div>234 235    <div class="row">236      <div class="icon">237        <svg viewBox="0 0 24 24"><path d="M10 4H4v16h16V8h-6l-4-4zm2 1.5L16.5 10H20v8H6V6h6zM12 12h2v2h2v2h-2v2h-2v-2H10v-2h2v-2z"/></svg>238      </div>239      <div class="label">Add to Collections</div>240    </div>241  </div>242 243  <!-- Bottom navigation gesture bar -->244  <div class="nav-bottom">245    <div class="pill"></div>246  </div>247 248</div>249</body>250</html>