GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Recipe UI - Easy Dumpling Soup</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 28px;14    box-shadow: 0 8px 40px rgba(0,0,0,0.15);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 30px 40px 0 40px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #2b2b2b;30    font-size: 40px;31  }32  .status-icons svg { width: 42px; height: 42px; margin-left: 24px; fill: #2b2b2b; }33  .top-nav {34    position: absolute;35    top: 120px;36    left: 0;37    width: 1080px;38    height: 110px;39    padding: 0 36px;40    box-sizing: border-box;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }46  .icon-btn svg { width: 48px; height: 48px; fill: #2b2b2b; }47  .header-row {48    position: absolute;49    top: 220px;50    left: 0;51    width: 1080px;52    padding: 0 40px;53    box-sizing: border-box;54    display: flex;55    align-items: center;56    justify-content: flex-start;57  }58  .rating-value { font-size: 44px; font-weight: 700; margin-right: 16px; }59  .stars { display: flex; align-items: center; }60  .stars svg { width: 40px; height: 40px; fill: #ffb300; margin-right: 6px; }61  .ratings-count { margin-left: 20px; font-size: 32px; color: #555; }62  .community {63    margin-left: auto;64    display: flex; align-items: center; gap: 14px;65    background: #f5f5f7;66    padding: 12px 20px;67    border-radius: 26px;68    font-weight: 700;69    letter-spacing: 0.5px;70  }71  .community svg { width: 40px; height: 40px; fill: #505050; }72  .title {73    position: absolute;74    top: 320px;75    left: 40px;76    width: 1000px;77    font-size: 44px;78    line-height: 62px;79    color: #2c2c2c;80  }81  .cards {82    position: absolute;83    top: 700px;84    left: 40px;85    width: 1000px;86    display: flex;87    gap: 30px;88  }89  .stat-card {90    flex: 1;91    background: #ffffff;92    border: 2px solid #e3e3e6;93    border-radius: 36px;94    height: 280px;95    box-sizing: border-box;96    padding: 60px 40px;97    display: flex;98    flex-direction: column;99    align-items: center;100    justify-content: center;101  }102  .stat-value { font-size: 64px; font-weight: 800; margin-bottom: 18px; }103  .stat-label { font-size: 32px; color: #6b6b6b; text-align: center; line-height: 42px; }104  .section-title {105    position: absolute;106    top: 1050px;107    left: 40px;108    font-size: 56px;109    font-weight: 800;110  }111  .serves-row {112    position: absolute;113    top: 1140px;114    left: 40px;115    width: 1000px;116    display: flex;117    align-items: center;118    justify-content: space-between;119  }120  .serves-left {121    display: flex; align-items: center; gap: 24px;122    font-size: 44px; font-weight: 700;123  }124  .circle-icon {125    width: 74px; height: 74px; border-radius: 50%;126    border: 2px solid #cfcfcf; display: flex; align-items: center; justify-content: center;127  }128  .circle-icon svg { width: 38px; height: 38px; fill: #333; }129  .unit-toggle { font-size: 34px; color: #5a5a5a; letter-spacing: 1px; }130  .unit-toggle span { margin: 0 10px; color: #9b9b9b; }131  .list {132    position: absolute;133    top: 1240px;134    left: 40px;135    width: 1000px;136  }137  .item {138    display: flex;139    align-items: center;140    padding: 34px 0;141    border-bottom: 1px solid #eee;142  }143  .thumb {144    width: 120px; height: 120px; border-radius: 60px;145    background: #E0E0E0; border: 1px solid #BDBDBD;146    display: flex; align-items: center; justify-content: center; color: #757575;147    font-size: 24px;148    margin-right: 30px;149  }150  .qty {151    width: 140px; text-align: left; font-size: 40px; color: #555;152    margin-right: 20px;153  }154  .item-name {155    font-size: 44px; font-weight: 800; color: #222;156  }157  .bottom-actions {158    position: absolute;159    bottom: 140px;160    left: 40px;161    width: 1000px;162    display: flex;163    gap: 30px;164  }165  .btn-outline, .btn-solid {166    flex: 1;167    height: 130px;168    border-radius: 80px;169    font-size: 44px;170    font-weight: 800;171    display: flex; align-items: center; justify-content: center;172  }173  .btn-outline {174    border: 2px solid #d6d6d6; color: #1f1f1f; background: #ffffff;175  }176  .btn-solid {177    background: #202020; color: #ffffff;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-time">10:46</div>187    <div class="status-icons">188      <!-- WiFi -->189      <svg viewBox="0 0 24 24">190        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zM2 8c2.7-2.3 6.1-3.5 10-3.5s7.3 1.2 10 3.5l-1.7 1.7C18.9 7.7 15.6 6.8 12 6.8c-3.6 0-6.9.9-8.3 2.9L2 8zM5.2 11.2c1.7-1.4 4.1-2.2 6.8-2.2s5.1.8 6.8 2.2l-1.7 1.7c-1.4-1-3.4-1.6-5.2-1.6s-3.8.6-5.2 1.6l-1.5-1.7z"/>191      </svg>192      <!-- Signal -->193      <svg viewBox="0 0 24 24">194        <rect x="2" y="16" width="3" height="6"></rect>195        <rect x="7" y="12" width="3" height="10"></rect>196        <rect x="12" y="8" width="3" height="14"></rect>197        <rect x="17" y="4" width="3" height="18"></rect>198      </svg>199      <!-- Battery -->200      <svg viewBox="0 0 28 18">201        <rect x="1" y="3" width="22" height="12" rx="2"></rect>202        <rect x="24" y="6" width="3" height="6" rx="1"></rect>203        <rect x="3" y="5" width="15" height="8" fill="#2b2b2b"></rect>204      </svg>205    </div>206  </div>207 208  <!-- Top navigation -->209  <div class="top-nav">210    <div class="icon-btn">211      <!-- Back Arrow -->212      <svg viewBox="0 0 24 24">213        <path d="M15 19l-7-7 7-7v14z"></path>214      </svg>215    </div>216    <div style="display:flex; align-items:center;">217      <div class="icon-btn" title="Share">218        <svg viewBox="0 0 24 24">219          <path d="M18 16a3 3 0 0 0-2.5 1.3L8.8 13a3.1 3.1 0 0 0 0-2l6.7-4.3A3 3 0 1 0 16 5a3 3 0 0 0 .1.7L9.4 10a3 3 0 1 0 0 4l6.7 4.3A3 3 0 1 0 18 16z"/>220        </svg>221      </div>222      <div class="icon-btn" title="Bookmark">223        <svg viewBox="0 0 24 24">224          <path d="M6 4c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v18l-7-4-7 4V4z"></path>225        </svg>226      </div>227    </div>228  </div>229 230  <!-- Rating and community -->231  <div class="header-row">232    <div class="rating-value">4.9</div>233    <div class="stars">234      <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6.1 4 6.1 7 1-5 4.8 1.2 6.9z"/></svg>235      <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6.1 4 6.1 7 1-5 4.8 1.2 6.9z"/></svg>236      <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6.1 4 6.1 7 1-5 4.8 1.2 6.9z"/></svg>237      <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6.1 4 6.1 7 1-5 4.8 1.2 6.9z"/></svg>238      <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 4-6.1 4 6.1 7 1-5 4.8 1.2 6.9z"/></svg>239    </div>240    <div class="ratings-count">18 Ratings</div>241    <div class="community">242      <svg viewBox="0 0 24 24"><path d="M12 2l2.2 6.4H21l-5.2 3.8 2 6.3L12 15.7 6.3 18.5l2-6.3L3 8.4h6.8z"/></svg>243      <div>COMMUNITY PICK</div>244    </div>245  </div>246 247  <!-- Description -->248  <div class="title">249    Easy Dumpling Soup is the perfect quick dinner because it’s endlessly versatile, insanely budget-friendly, and can be made in 15 minutes.250  </div>251 252  <!-- Stat Cards -->253  <div class="cards">254    <div class="stat-card">255      <div class="stat-value">15min</div>256      <div class="stat-label">Total Time</div>257    </div>258    <div class="stat-card">259      <div class="stat-value">$ 1.49</div>260      <div class="stat-label">Cost<br>Per Serving</div>261    </div>262  </div>263 264  <!-- Ingredients section -->265  <div class="section-title">Ingredients</div>266 267  <div class="serves-row">268    <div class="serves-left">269      <div class="circle-icon" title="minus">270        <svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="2"></rect></svg>271      </div>272      <div>Serves 2</div>273      <div class="circle-icon" title="plus">274        <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"></path></svg>275      </div>276    </div>277    <div class="unit-toggle">US <span>/</span> METRIC</div>278  </div>279 280  <div class="list">281    <div class="item">282      <div class="thumb">IMG</div>283      <div class="qty">10</div>284      <div class="item-name">Frozen Pork Dumplings</div>285    </div>286    <div class="item">287      <div class="thumb">IMG</div>288      <div class="qty">2 cups</div>289      <div class="item-name">Vegetable Broth</div>290    </div>291    <div class="item" style="border-bottom:none;">292      <div class="thumb">IMG</div>293      <div class="qty">1 Tbsp</div>294      <div class="item-name">Soy Sauce</div>295    </div>296  </div>297 298  <!-- Bottom buttons -->299  <div class="bottom-actions">300    <div class="btn-outline">ADD TO PLAN</div>301    <div class="btn-solid">ADD TO CART</div>302  </div>303 304</div>305</body>306</html>