GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>White Sauce Chicken Pasta - UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0b1423;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-weight: 600;30    letter-spacing: 0.5px;31    font-size: 40px;32  }33  .status-icons {34    display: flex;35    gap: 26px;36    align-items: center;37    opacity: 0.95;38  }39  .dot { width: 10px; height: 10px; background:#fff; border-radius:50%; display:inline-block; margin-left:6px; opacity:0.8;}40  /* Top app bar */41  .app-bar {42    position: absolute;43    top: 120px;44    left: 0;45    width: 1080px;46    height: 96px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .icon-btn {54    width: 72px;55    height: 72px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59    border-radius: 16px;60    color: #fff;61  }62  .right-icons {63    display: flex;64    align-items: center;65    gap: 28px;66    color: #dfe6ef;67    font-size: 36px;68  }69  .comment-count {70    margin-left: 6px;71    font-size: 40px;72    color: #dfe6ef;73  }74 75  /* Hero image */76  .hero {77    position: absolute;78    top: 216px;79    left: 0;80    width: 1080px;81    height: 870px;82    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), #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: #3a3a3a;89    text-transform: none;90    font-size: 40px;91  }92  .hero::after {93    content: "[IMG: White sauce chicken pasta in bowl]";94    color: #5a5a5a;95  }96  .play-overlay {97    position: absolute;98    top: 216px;99    left: 0;100    width: 1080px;101    height: 870px;102    display: flex;103    align-items: center;104    justify-content: center;105    pointer-events: none;106  }107  .play-circle {108    width: 160px;109    height: 160px;110    background: rgba(0,0,0,0.45);111    border-radius: 50%;112    display: flex;113    align-items: center;114    justify-content: center;115  }116 117  /* Content section */118  .content {119    position: absolute;120    top: 1086px;121    left: 0;122    width: 1080px;123    padding: 36px 40px 0 40px;124    box-sizing: border-box;125    background: #071321;126  }127  .title-row {128    display: flex;129    align-items: center;130    justify-content: space-between;131    gap: 18px;132  }133  .title-left {134    display: flex;135    align-items: center;136    gap: 18px;137  }138  .live-dot {139    width: 26px;140    height: 26px;141    background: #ff3b30;142    border-radius: 50%;143    box-shadow: 0 0 0 3px rgba(255,255,255,0.1) inset;144  }145  .title {146    font-size: 54px;147    font-weight: 700;148    letter-spacing: 0.2px;149  }150  .spice {151    margin-left: 10px;152    font-size: 44px;153  }154  .spice span:nth-child(2),155  .spice span:nth-child(3) { opacity: 0.35; }156  .bookmark {157    width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;158  }159  .meta {160    margin-top: 18px;161    color: #b7c0cf;162    font-size: 36px;163  }164  .submeta {165    margin-top: 10px;166    color: #9aa6bb;167    font-size: 34px;168  }169  .divider {170    margin: 28px 0 20px 0;171    height: 2px; background: #0e2139;172    width: 100%;173  }174  .time-row {175    display: flex; align-items: center; gap: 18px; color: #d7deea; font-size: 40px;176  }177 178  /* Buttons */179  .primary-btn {180    margin-top: 36px;181    width: 100%;182    height: 120px;183    background: #cf6d2f;184    border-radius: 22px;185    display: flex;186    align-items: center;187    justify-content: center;188    gap: 18px;189    font-weight: 700;190    font-size: 42px;191    letter-spacing: 0.6px;192    box-shadow: 0 6px 0 rgba(0,0,0,0.2) inset;193  }194  .helper {195    margin-top: 22px;196    color: #9aa3b2;197    font-size: 34px;198    text-align: center;199  }200  .outline-btn {201    margin-top: 34px;202    width: 100%;203    height: 110px;204    border-radius: 18px;205    border: 3px solid #cf6d2f;206    color: #e2e5ea;207    display: flex;208    align-items: center;209    justify-content: center;210    font-weight: 700;211    font-size: 40px;212    letter-spacing: 0.4px;213    background: transparent;214  }215  .footer-hint {216    margin-top: 60px;217    color: #cfd6e1;218    opacity: 0.35;219    font-size: 36px;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    <div>8:54</div>229    <div class="status-icons">230      <!-- simple mock status icons -->231      <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9"><path d="M5 2h14v2H5zM3 6h18v2H3zM1 10h22v2H1z"/></svg>232      <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9"><path d="M12 22c3.3 0 6-2.7 6-6h-2a4 4 0 1 1-8 0H6c0 3.3 2.7 6 6 6zM18 8V6a6 6 0 0 0-12 0v2L4 9v5h16V9l-2-1zm-2 0H8V6a4 4 0 1 1 8 0v2z"/></svg>233      <div class="dot"></div>234    </div>235  </div>236 237  <!-- App bar -->238  <div class="app-bar">239    <div class="icon-btn">240      <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff">241        <path d="M15.5 5.5 9 12l6.5 6.5-1.5 1.5L6 12l8-8 1.5 1.5z"/>242      </svg>243    </div>244    <div class="right-icons">245      <!-- share icon -->246      <svg width="44" height="44" viewBox="0 0 24 24" fill="#e1e7f5">247        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.3 3.3 0 0 0 0-1.39l7.02-4.05A3 3 0 1 0 14 5a3 3 0 0 0 .05.5L7.03 9.55a3 3 0 1 0 0 4.9l7.02 4.05c-.03.16-.05.33-.05.5a3 3 0 1 0 3-2.92z"/>248      </svg>249      <!-- comment/chat icon -->250      <svg width="44" height="44" viewBox="0 0 24 24" fill="#e1e7f5">251        <path d="M20 2H4a2 2 0 0 0-2 2v17l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/>252      </svg>253      <span class="comment-count">15</span>254    </div>255  </div>256 257  <!-- Hero image placeholder -->258  <div class="hero"></div>259  <div class="play-overlay">260    <div class="play-circle">261      <svg width="80" height="80" viewBox="0 0 24 24" fill="#ffffff">262        <path d="M8 5v14l11-7z"/>263      </svg>264    </div>265  </div>266 267  <!-- Content -->268  <div class="content">269    <div class="title-row">270      <div class="title-left">271        <div class="live-dot"></div>272        <div>273          <div class="title">White Sauce Chicken Pasta274            <span class="spice"><span>🌶</span><span>🌶</span><span>🌶</span></span>275          </div>276        </div>277      </div>278      <div class="bookmark">279        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e6edf8" stroke-width="2">280          <path d="M6 2h12a1 1 0 0 1 1 1v18l-7-4-7 4V3a1 1 0 0 1 1-1z"/>281        </svg>282      </div>283    </div>284 285    <div class="meta">Italian • Main Course • Pasta • General/Balanced</div>286    <div class="submeta">Lunch, Brunch • Sautéed</div>287 288    <div class="divider"></div>289 290    <div class="time-row">291      <svg width="40" height="40" viewBox="0 0 24 24" fill="#d7deea">292        <path d="M12 1a11 11 0 1 0 .001 22.001A11 11 0 0 0 12 1zm1 11.3V6h-2v7l6 3 .9-1.8-4.9-2z"/>293      </svg>294      <span>35 Min</span>295    </div>296 297    <div class="primary-btn">298      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">299        <path d="M8 5v14l11-7z"/>300      </svg>301      <span>START COOKING</span>302    </div>303 304    <div class="helper">By step-by-step video instruction in cooking mode</div>305 306    <div class="outline-btn">ADD TO MY MEAL PLAN</div>307 308    <div class="footer-hint">Nutrient Info (Per Serving)</div>309  </div>310 311</div>312</body>313</html>