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>Classic Potato Salad</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EAEAEA;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 90px;23    background: #000000;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    color: #ffffff;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37    font-size: 28px;38  }39  .status-icon { width: 36px; height: 36px; opacity: 0.9; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 90px;45    left: 0; right: 0;46    height: 140px;47    background: #1E1E1E;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-sizing: border-box;52    border-bottom: 1px solid #2a2a2a;53  }54  .back-btn {55    width: 64px; height: 64px;56    display: flex; align-items: center; justify-content: center;57    margin-right: 12px;58  }59  .title {60    font-size: 54px;61    color: #F5F5F5;62    font-weight: 600;63  }64 65  /* Content area */66  .content {67    position: absolute;68    top: 230px;69    left: 0; right: 0; bottom: 0;70    padding: 36px 56px 24px 56px;71    box-sizing: border-box;72    overflow: hidden; /* keep inside the fixed screen */73  }74 75  /* Ad card */76  .ad-card {77    width: 100%;78    background: #262626;79    border-radius: 14px;80    box-shadow: 0 6px 18px rgba(0,0,0,0.4);81    overflow: hidden;82  }83  .ad-banner {84    position: relative;85    width: 100%;86    height: 560px;87    background: #E0E0E0;88    border-bottom: 1px solid #BDBDBD;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #757575;93    font-size: 40px;94  }95  .ad-floating-icons {96    position: absolute;97    top: 18px;98    right: 18px;99    display: flex;100    gap: 10px;101  }102  .info-badge, .close-badge {103    width: 48px; height: 48px;104    background: #E9F2FF;105    border: 1px solid #BBD2FF;106    color: #1E5BD6;107    border-radius: 8px;108    display: flex; align-items: center; justify-content: center;109    font-weight: 700;110    font-size: 28px;111  }112  .close-badge {113    background: #F7F7F7;114    border-color: #D0D0D0;115    color: #5C5C5C;116  }117  .install-btn {118    position: absolute;119    bottom: -34px;120    left: 50%;121    transform: translateX(-50%);122    background: #2E7D32;123    color: #ffffff;124    border-radius: 16px;125    padding: 22px 60px;126    font-size: 42px;127    font-weight: 600;128    box-shadow: 0 6px 10px rgba(0,0,0,0.35);129  }130  .ad-bottom {131    background: #FAFAFA;132    color: #222;133    display: flex;134    align-items: center;135    gap: 24px;136    padding: 40px 36px;137    box-sizing: border-box;138  }139  .app-icon {140    width: 106px; height: 106px;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    border-radius: 22px;144    display: flex; align-items: center; justify-content: center;145    color: #757575;146    font-size: 22px;147    text-align: center;148    line-height: 1.1;149  }150  .ad-app-texts .name {151    font-size: 40px;152    font-weight: 600;153    color: #111;154  }155  .ad-app-texts .meta {156    margin-top: 6px;157    display: flex;158    align-items: center;159    gap: 16px;160    color: #444;161    font-size: 30px;162  }163 164  /* Divider */165  .dashed {166    margin: 34px 0 26px 0;167    border: none;168    border-top: 2px dashed #3F3F3F;169  }170 171  /* Section headings */172  .section-title {173    font-size: 50px;174    font-weight: 600;175    margin: 8px 0 22px 0;176    color: #EDEDED;177  }178 179  /* Review input row */180  .review-row {181    display: flex; align-items: center;182    gap: 20px;183    background: #1B1B1B;184    border: 1px solid #343434;185    border-radius: 12px;186    padding: 26px 22px;187    color: #BDBDBD;188    font-size: 36px;189  }190  .review-icon { width: 48px; height: 48px; opacity: 0.9; }191 192  /* Tags */193  .tags {194    display: flex;195    flex-wrap: wrap;196    gap: 18px 18px;197    margin-top: 6px;198  }199  .chip {200    border: 2px solid #5E5E5E;201    color: #DADADA;202    border-radius: 999px;203    padding: 18px 26px;204    font-size: 32px;205    line-height: 1;206    background: transparent;207  }208 209  /* Report a problem */210  .report {211    margin-top: 36px;212    display: flex; align-items: center; gap: 18px;213    color: #E0E0E0;214    font-size: 36px;215  }216  .flag { width: 44px; height: 44px; opacity: 0.95; }217 218  /* Gesture bar */219  .gesture-bar {220    position: absolute;221    bottom: 20px; left: 50%;222    transform: translateX(-50%);223    width: 320px; height: 10px;224    background: #E6E6E6;225    border-radius: 8px;226    opacity: 0.95;227  }228</style>229</head>230<body>231<div id="render-target">232  <!-- Status bar -->233  <div class="status-bar">234    <div class="time">10:13</div>235    <div class="status-right">236      <!-- simple signal icon -->237      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M4 20h2v-3H4v3zm4 0h2v-6H8v6zm4 0h2v-9h-2v9zm4 0h2v-12h-2v12z"/></svg>238      <!-- wifi -->239      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 20.5l-2.5-2.5h5L12 20.5zM2 8.5C6.4 5 17.6 5 22 8.5l-1.6 1.8C16.9 7.5 7.1 7.5 3.6 10.3L2 8.5zm4 4c3.2-2.3 8.8-2.3 12 0l-1.6 1.8c-2.7-1.9-6.1-1.9-8.8 0L6 12.5zm4 4c1.6-1 4.4-1 6 0l-1.6 1.8c-1-0.6-1.9-0.9-2.4-0.9s-1.4 0.3-2.4 0.9L10 16.5z"/></svg>240      <!-- battery -->241      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M16 7h1a2 2 0 012 2v6a2 2 0 01-2 2h-1v1h-2v-1H6a2 2 0 01-2-2V9a2 2 0 012-2h10zm1 2H6v6h11V9z"/></svg>242      <span style="font-size:28px; opacity:0.95;">97%</span>243    </div>244  </div>245 246  <!-- App bar -->247  <div class="app-bar">248    <div class="back-btn" aria-label="Back">249      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#EDEDED" d="M15.5 19l-7-7 7-7v14z"/></svg>250    </div>251    <div class="title">Classic Potato Salad</div>252  </div>253 254  <!-- Content -->255  <div class="content">256    <!-- Ad card -->257    <div class="ad-card">258      <div class="ad-banner">259        <div class="ad-floating-icons">260          <div class="info-badge">i</div>261          <div class="close-badge">×</div>262        </div>263        [IMG: Ad Banner - Hong's Kitchen]264        <div class="install-btn">Install</div>265      </div>266      <div class="ad-bottom">267        <div class="app-icon">[IMG: App Icon]</div>268        <div class="ad-app-texts">269          <div class="name">Hong’s Kitchen</div>270          <div class="meta">271            <span>FREE</span>272            <svg width="26" height="26" viewBox="0 0 24 24"><path fill="#3DDC84" d="M3 2l12 10L3 22V2z"/><path fill="#4285F4" d="M15 12l4-3v6l-4-3z"/></svg>273            <span>Google Play</span>274          </div>275        </div>276      </div>277    </div>278 279    <hr class="dashed" />280 281    <div class="section-title">Reviews</div>282    <div class="review-row">283      <svg class="review-icon" viewBox="0 0 24 24">284        <path fill="#BDBDBD" d="M3 3h18v14H8l-5 4V3zm4 4v2h10V7H7z"/>285      </svg>286      <span>Read/Write reviews...</span>287    </div>288 289    <hr class="dashed" style="margin-top:28px;" />290 291    <div class="section-title">Related tags</div>292    <div class="tags">293      <div class="chip">#15 minutes or less</div>294      <div class="chip">#time to make</div>295      <div class="chip">#course</div>296      <div class="chip">#main ingredient</div>297      <div class="chip">#cuisine</div>298      <div class="chip">#preparation</div>299      <div class="chip">#occasion</div>300      <div class="chip">#north american</div>301      <div class="chip">#lunch</div>302      <div class="chip">#salads</div>303      <div class="chip">#side dishes</div>304      <div class="chip">#eggs dairy</div>305      <div class="chip">#potatoes</div>306      <div class="chip">#vegetables</div>307      <div class="chip">#american</div>308      <div class="chip">#german</div>309      <div class="chip">#southern united states</div>310      <div class="chip">#easy</div>311      <div class="chip">#european</div>312      <div class="chip">#potluck</div>313      <div class="chip">#holiday event</div>314      <div class="chip">#picnic</div>315      <div class="chip">#eggs</div>316      <div class="chip">#dietary</div>317      <div class="chip">#</div>318    </div>319 320    <div class="report">321      <svg class="flag" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M5 3h10l-1 3h5v10h-9l-1-3H6v8H4V3h1z"/></svg>322      <span>Report a problem</span>323    </div>324  </div>325 326  <div class="gesture-bar"></div>327</div>328</body>329</html>