GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recipe App - Overview</title>6<style>7  body{8    margin:0;9    padding:0;10    background:transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color:#222;13  }14  #render-target{15    position:relative;16    width:1080px;17    height:2400px;18    overflow:hidden;19    background:#ffffff;20    border:1px solid #e5e5e5;21    border-radius:0;22  }23 24  /* Status bar */25  .status-bar{26    position:absolute;27    top:0;28    left:0;29    width:100%;30    height:120px;31    background:#2f2f2f;32    color:#fff;33    display:flex;34    align-items:center;35    justify-content:flex-start;36    padding:0 36px;37    box-sizing:border-box;38    font-size:34px;39    letter-spacing:1px;40  }41  .status-right{42    margin-left:auto;43    display:flex;44    align-items:center;45    gap:26px;46    font-size:34px;47  }48  /* Header with actions */49  .header{50    position:absolute;51    top:120px;52    left:0;53    right:0;54    height:170px;55    background:#ffffff;56    display:flex;57    align-items:center;58    justify-content:space-between;59    padding:0 44px;60    box-sizing:border-box;61  }62  .circle-btn{63    width:110px;64    height:110px;65    border-radius:55px;66    background:#f3f5f4;67    display:flex;68    align-items:center;69    justify-content:center;70    border:1px solid #e6e6e6;71  }72  .icon{73    width:46px;74    height:46px;75    fill:#202124;76  }77  .icon-teal{ fill:#2c9e90; }78  .icon-orange{ fill:#e5732e; }79  .icon-gray{ fill:#757575; }80 81  /* Tabs */82  .tabs{83    position:absolute;84    top:290px;85    left:0;86    right:0;87    height:110px;88    display:flex;89    align-items:flex-end;90    padding:0 44px;91    box-sizing:border-box;92    gap:56px;93    background:#ffffff;94    border-bottom:1px solid #e8eeec;95  }96  .tab{97    font-size:56px;98    color:#7aaea6;99    padding-bottom:26px;100  }101  .tab.active{102    color:#2c9e90;103    border-bottom:6px solid #2c9e90;104  }105 106  /* Content scroll area */107  .content{108    position:absolute;109    top:400px;110    left:0;111    right:0;112    bottom:0;113    overflow:auto;114    padding:0 44px 40px 44px;115    box-sizing:border-box;116    background:#ffffff;117  }118 119  /* Update Collection row */120  .update-collection{121    display:flex;122    align-items:center;123    gap:24px;124    border-top:1px solid #e8eeec;125    border-bottom:1px solid #e8eeec;126    padding:34px 0;127    margin-top:10px;128    font-size:52px;129    color:#333;130  }131  .folder-icon{132    width:72px; height:72px;133    background:#e5f4f1;134    border-radius:16px;135    display:flex; align-items:center; justify-content:center;136  }137 138  /* Detail rows */139  .detail-list{140    margin-top:10px;141    border-top:1px solid #edf1ef;142  }143  .detail-row{144    display:flex;145    align-items:center;146    justify-content:space-between;147    padding:36px 0;148    border-bottom:1px solid #edf1ef;149  }150  .detail-left{151    display:flex;152    align-items:center;153    gap:28px;154    font-size:48px;155    color:#222;156  }157  .detail-right{158    font-size:48px;159    color:#333;160  }161  .time-badge{162    color:#6f6f6f;163  }164 165  /* Section headings */166  .section-header{167    margin-top:44px;168    display:flex;169    align-items:center;170    justify-content:space-between;171  }172  .section-title{173    font-size:64px;174    font-weight:700;175    color:#2d2d2d;176  }177  .link{178    font-size:48px;179    color:#2c9e90;180  }181 182  /* Cards row */183  .cards{184    margin-top:26px;185    display:flex;186    gap:36px;187    overflow:hidden;188  }189  .card{190    width:320px;191    border-radius:18px;192    overflow:hidden;193  }194  .card-img{195    width:100%;196    height:320px;197    background:#E0E0E0;198    border:1px solid #BDBDBD;199    display:flex;200    align-items:center;201    justify-content:center;202    color:#757575;203    font-size:32px;204  }205  .stars{206    margin-top:18px;207    color:#f07a2b;208    font-size:34px;209    letter-spacing:4px;210  }211  .card-title{212    margin-top:12px;213    font-size:44px;214    color:#222;215    line-height:1.2;216  }217  .control-row{218    display:flex;219    align-items:center;220    gap:18px;221    margin-top:6px;222  }223  .chip{224    width:80px; height:80px; border-radius:40px;225    display:flex; align-items:center; justify-content:center;226    font-size:54px;227    color:#fff;228  }229  .chip.plus{ background:#2c9e90; }230  .chip.minus{ background:#b9bfc0; }231 232  /* More by this creator */233  .creator-header{234    margin-top:54px;235    display:flex;236    align-items:center;237    justify-content:space-between;238  }239 240  /* small handle at bottom (gesture bar) */241  .gesture{242    position:absolute;243    left:50%;244    transform:translateX(-50%);245    bottom:18px;246    width:520px;247    height:14px;248    background:#bfbfbf;249    border-radius:8px;250    opacity:.8;251  }252</style>253</head>254<body>255<div id="render-target">256 257  <!-- Status bar -->258  <div class="status-bar">259    1:11260    <div class="status-right">261      <span>◦</span>262      <span>◉</span>263      <span>90%</span>264    </div>265  </div>266 267  <!-- Header with back and external link -->268  <div class="header">269    <div class="circle-btn">270      <svg class="icon" viewBox="0 0 24 24">271        <path d="M15.5 3.5 7 12l8.5 8.5-2 2L3 12 13.5 1.5l2 2z"/>272      </svg>273    </div>274    <div class="circle-btn">275      <svg class="icon" viewBox="0 0 24 24">276        <path d="M14 3h7v7h-2V6.4l-7.8 7.8-1.4-1.4L17.6 5H14V3z"/>277        <path d="M5 5h9v2H7v10h10v-7h2v9H5V5z"/>278      </svg>279    </div>280  </div>281 282  <!-- Tabs -->283  <div class="tabs">284    <div class="tab active">Overview</div>285    <div class="tab">Ingredients</div>286    <div class="tab">Directions</div>287  </div>288 289  <!-- Content -->290  <div class="content">291 292    <div class="update-collection">293      <div class="folder-icon">294        <svg class="icon-teal" viewBox="0 0 24 24">295          <path d="M10 4l2 2h8v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4z"/>296        </svg>297      </div>298      <div>Update Collection</div>299    </div>300 301    <div class="detail-list">302      <div class="detail-row">303        <div class="detail-left">304          <svg class="icon-orange" viewBox="0 0 24 24">305            <path d="M12 17.3l-5.5 3 1.1-6.4-4.6-4.5 6.4-.9L12 2l2.6 5.5 6.4.9-4.6 4.5 1.1 6.4z"/>306          </svg>307          <span>Rating</span>308        </div>309        <div class="detail-right">4.83</div>310      </div>311 312      <div class="detail-row">313        <div class="detail-left">314          <svg class="icon-orange" viewBox="0 0 24 24">315            <path d="M4 10h16v2H4v-2zm0 4h16v2H4v-2zM4 6h16v2H4V6z"/>316          </svg>317          <span>Servings</span>318        </div>319        <div class="detail-right">1</div>320      </div>321 322      <div class="detail-row">323        <div class="detail-left">324          <svg class="icon-orange" viewBox="0 0 24 24">325            <path d="M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11S5 15 5 10a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 .002 6.002A3 3 0 0 0 12 7z"/>326          </svg>327          <span>Calories per serving</span>328        </div>329        <div class="detail-right">290</div>330      </div>331 332      <div class="detail-row">333        <div class="detail-left">334          <svg class="icon-orange" viewBox="0 0 24 24">335            <path d="M12 8V4h2v4h4v2h-4v4h-2v-4H8V8h4z"/>336          </svg>337          <span>Total time</span>338        </div>339        <div class="detail-right time-badge">5m</div>340      </div>341    </div>342 343    <div class="section-header">344      <div class="section-title">Related recipes</div>345      <div class="link">View More</div>346    </div>347 348    <div class="cards">349      <!-- Card 1 -->350      <div class="card">351        <div class="card-img">[IMG: Hawaiian Shrimp dish on rice]</div>352        <div class="stars">★★★★☆</div>353        <div class="control-row">354          <div class="card-title">Hawaiian Shrimp</div>355          <div class="chip minus">−</div>356        </div>357      </div>358 359      <!-- Card 2 -->360      <div class="card">361        <div class="card-img">[IMG: Hawaiian Sliders in pan]</div>362        <div class="stars">★★★★★</div>363        <div class="control-row">364          <div class="card-title">Hawaiian Sliders</div>365          <div class="chip plus">＋</div>366        </div>367      </div>368 369      <!-- Card 3 -->370      <div class="card">371        <div class="card-img">[IMG: Hawaiian chicken kabobs]</div>372        <div class="stars">★★★★☆</div>373        <div class="card-title">Hawaiian Chicken Kabob</div>374      </div>375    </div>376 377    <div class="creator-header">378      <div class="section-title">More by this creator</div>379      <div class="link">View All</div>380    </div>381 382    <!-- Example thumbnails for creator (placeholders) -->383    <div class="cards" style="margin-top:24px;">384      <div class="card">385        <div class="card-img" style="height:260px;">[IMG: Colorful drink on stick]</div>386      </div>387      <div class="card">388        <div class="card-img" style="height:260px;">[IMG: Glazed meatballs]</div>389      </div>390      <div class="card">391        <div class="card-img" style="height:260px;">[IMG: Green salad bowl]</div>392      </div>393    </div>394 395  </div>396 397  <div class="gesture"></div>398</div>399</body>400</html>