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 Detail UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #fff;14  }15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #0b0b0b;21    border-radius: 0;22  }23 24  /* Status bar */25  .status-bar {26    position: absolute;27    top: 0;28    left: 0;29    width: 1080px;30    height: 90px;31    padding: 0 40px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #fff;36    font-size: 32px;37    letter-spacing: 0.5px;38  }39  .status-left, .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .status-icon svg { 45    width: 34px; height: 34px; 46    stroke: #fff; fill: none; stroke-width: 3;47    opacity: 0.9;48  }49  .battery {50    display: inline-flex;51    align-items: center;52    gap: 12px;53    font-size: 30px;54  }55  .battery svg { width: 44px; height: 24px; stroke-width: 3; }56 57  /* Top actions */58  .top-actions {59    position: absolute;60    top: 100px;61    left: 0;62    width: 1080px;63    height: 120px;64    padding: 0 30px;65    display: flex;66    align-items: center;67    justify-content: space-between;68  }69  .back-btn svg, .action-icon svg {70    width: 64px; height: 64px; stroke: #fff; fill: none; stroke-width: 3.5;71  }72  .actions {73    display: flex;74    align-items: center;75    gap: 34px;76    padding-right: 16px;77  }78 79  /* Hero image */80  .hero {81    position: absolute;82    top: 220px;83    left: 0;84    width: 1080px;85    height: 950px;86    background: #E0E0E0;87    border-top: 1px solid #BDBDBD;88    border-bottom: 1px solid #BDBDBD;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #5a5a5a;93    font-size: 36px;94    letter-spacing: 0.2px;95  }96 97  /* Reviews section */98  .reviews {99    position: absolute;100    top: 1170px;101    left: 0;102    width: 1080px;103    padding: 40px 50px 28px;104    background: #0b0b0b;105    color: #fff;106  }107  .reviews-header {108    display: flex;109    align-items: center;110    justify-content: space-between;111    margin-bottom: 18px;112  }113  .reviews-title {114    font-size: 54px;115    font-weight: 700;116  }117  .write-link {118    color: #ff7f3b;119    font-size: 40px;120    font-weight: 600;121  }122  .meta {123    font-size: 34px;124    color: #b5b5b5;125    margin-bottom: 40px;126  }127  .reviews-desc {128    font-size: 36px;129    color: #d6d6d6;130    line-height: 1.45;131    margin-bottom: 40px;132  }133  .divider {134    width: 100%;135    height: 1px;136    background: #2a2a2a;137  }138 139  /* Suggestions section */140  .suggestions {141    position: absolute;142    top: 1520px;143    left: 0;144    width: 1080px;145    padding: 40px 44px 0;146  }147  .suggestions h2 {148    font-size: 52px;149    font-weight: 700;150    margin: 0 0 32px 0;151  }152  .card-list {153    display: flex;154    gap: 34px;155    overflow: hidden;156    padding-bottom: 24px;157  }158  .card {159    position: relative;160    width: 486px;161    height: 620px;162    background: #111;163    border-radius: 36px;164    overflow: hidden;165    box-shadow: 0 12px 24px rgba(0,0,0,0.35);166  }167  .card .img {168    position: absolute;169    inset: 0;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    display: flex;173    align-items: center;174    justify-content: center;175    color: #6b6b6b;176    font-size: 32px;177  }178  .badge {179    position: absolute;180    top: 24px;181    left: 24px;182    background: #f6e7b2;183    color: #2e2e2e;184    padding: 12px 22px;185    border-radius: 24px;186    font-size: 30px;187    font-weight: 600;188  }189  .like-pill {190    position: absolute;191    right: 24px;192    bottom: 24px;193    background: rgba(255,255,255,0.95);194    color: #111;195    border-radius: 30px;196    padding: 12px 20px;197    display: inline-flex;198    align-items: center;199    gap: 14px;200    font-size: 30px;201    font-weight: 600;202  }203  .like-pill svg {204    width: 34px; height: 34px; stroke: #111; fill: none; stroke-width: 3;205  }206 207  /* Home indicator */208  .home-indicator {209    position: absolute;210    bottom: 56px;211    left: 50%;212    transform: translateX(-50%);213    width: 300px;214    height: 10px;215    background: #9c9c9c;216    border-radius: 10px;217    opacity: 0.85;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status Bar -->225  <div class="status-bar">226    <div class="status-left">227      <div>10:30</div>228      <div class="status-icon">229        <svg viewBox="0 0 24 24"><path d="M12 3 L23 21 H1 Z"></path></svg>230      </div>231      <div class="status-icon">232        <!-- simple cloud -->233        <svg viewBox="0 0 32 24"><path d="M10 16c-4 0-6 2-6 4s2 4 6 4h12c4 0 6-2 6-4s-2-4-6-4c0-4-3-7-7-7-3 0-5 2-5 7z"></path></svg>234      </div>235    </div>236    <div class="status-right">237      <div class="status-icon">238        <!-- wifi -->239        <svg viewBox="0 0 32 24">240          <path d="M2 8c7-6 21-6 28 0"></path>241          <path d="M6 12c5-4 15-4 20 0"></path>242          <path d="M10 16c3-2 9-2 12 0"></path>243          <circle cx="16" cy="19" r="2" fill="#fff" stroke="none"></circle>244        </svg>245      </div>246      <div class="battery">247        <svg viewBox="0 0 42 22">248          <rect x="2" y="3" width="34" height="16" rx="3"></rect>249          <rect x="37" y="7" width="4" height="8" rx="2"></rect>250          <rect x="4" y="5" width="26" height="12" fill="#fff" stroke="none"></rect>251        </svg>252        <span>100%</span>253      </div>254    </div>255  </div>256 257  <!-- Top actions -->258  <div class="top-actions">259    <div class="back-btn">260      <svg viewBox="0 0 48 48"><path d="M30 8 L14 24 L30 40"></path></svg>261    </div>262    <div class="actions">263      <div class="action-icon">264        <!-- heart outline -->265        <svg viewBox="0 0 64 64">266          <path d="M32 52 C12 38 8 30 8 22 c0-7 6-12 13-12 6 0 9 3 11 6 2-3 5-6 11-6 7 0 13 5 13 12 0 8-4 16-24 30z"></path>267        </svg>268      </div>269      <div class="action-icon">270        <!-- bookmark -->271        <svg viewBox="0 0 64 64">272          <path d="M20 8 h24 a4 4 0 0 1 4 4 v40 l-16-10 -16 10 V12 a4 4 0 0 1 4-4z"></path>273        </svg>274      </div>275      <div class="action-icon">276        <!-- share -->277        <svg viewBox="0 0 64 64">278          <circle cx="48" cy="16" r="6" fill="none"></circle>279          <circle cx="16" cy="32" r="6" fill="none"></circle>280          <circle cx="48" cy="48" r="6" fill="none"></circle>281          <path d="M22 30 L42 20"></path>282          <path d="M22 34 L42 44"></path>283        </svg>284      </div>285    </div>286  </div>287 288  <!-- Hero Image -->289  <div class="hero">[IMG: Dessert on plate with sauce]</div>290 291  <!-- Reviews Section -->292  <div class="reviews">293    <div class="reviews-header">294      <div class="reviews-title">Reviews</div>295      <div class="write-link">Write</div>296    </div>297    <div class="meta">0 comments - 0 images</div>298    <div class="reviews-desc">299      There are no reactions yet. Be the first to share your cooking experience!300    </div>301    <div class="divider"></div>302  </div>303 304  <!-- Suggestions -->305  <div class="suggestions">306    <h2>More delicious ideas for you</h2>307    <div class="card-list">308      <div class="card">309        <div class="img">[IMG: Apple pie on table]</div>310        <div class="badge">100 min.</div>311        <div class="like-pill">312          <svg viewBox="0 0 32 32"><path d="M16 28 C8 22 6 18 6 14 c0-4 3-7 7-7 3 0 5 2 6 4 1-2 3-4 6-4 4 0 7 3 7 7 0 4-2 8-10 14z"></path></svg>313          <span>0</span>314        </div>315      </div>316      <div class="card">317        <div class="img">[IMG: Simple biscuits on blue plate]</div>318        <div class="badge">30 min.</div>319        <div class="like-pill">320          <svg viewBox="0 0 32 32"><path d="M16 28 C8 22 6 18 6 14 c0-4 3-7 7-7 3 0 5 2 6 4 1-2 3-4 6-4 4 0 7 3 7 7 0 4-2 8-10 14z"></path></svg>321          <span>0</span>322        </div>323      </div>324    </div>325  </div>326 327  <!-- Home indicator -->328  <div class="home-indicator"></div>329</div>330</body>331</html>