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>Recipes UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: "Roboto", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Status Bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    padding: 0 34px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 16px;38    color: #222;39    font-size: 40px;40    font-weight: 500;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .icon-square {48    width: 36px;49    height: 36px;50    border-radius: 6px;51    background: #C7C7C7;52  }53 54  /* Header */55  .header {56    position: absolute;57    top: 110px;58    left: 0;59    width: 1080px;60    height: 120px;61    padding: 0 34px;62    box-sizing: border-box;63    display: flex;64    align-items: center;65    gap: 24px;66  }67  .back-btn {68    width: 68px;69    height: 68px;70    border-radius: 34px;71    display: flex;72    align-items: center;73    justify-content: center;74  }75  .back-btn svg {76    width: 48px;77    height: 48px;78    fill: #333;79  }80  .title {81    font-size: 56px;82    font-weight: 700;83    color: #222;84  }85 86  /* Sort / Filter row */87  .tabs {88    position: absolute;89    top: 240px;90    left: 0;91    width: 1080px;92    height: 110px;93    display: flex;94    border-top: 1px solid #eee;95    border-bottom: 1px solid #eee;96    background: #fafafa;97  }98  .tab {99    width: 50%;100    display: flex;101    align-items: center;102    justify-content: center;103    font-size: 40px;104    color: #333;105    box-sizing: border-box;106  }107  .tab:first-child {108    border-right: 1px solid #e6e6e6;109  }110 111  .count-row {112    position: absolute;113    top: 350px;114    left: 34px;115    right: 34px;116    height: 80px;117    display: flex;118    align-items: center;119    color: #6f6f6f;120    font-size: 36px;121  }122 123  /* Cards grid */124  .grid {125    position: absolute;126    top: 430px;127    left: 34px;128    right: 34px;129    display: flex;130    gap: 48px;131    flex-wrap: wrap;132  }133  .card {134    width: calc((100% - 48px) / 2);135  }136  .card-image {137    width: 100%;138    height: 470px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    border-radius: 28px;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 32px;147    text-align: center;148    padding: 12px;149    box-sizing: border-box;150  }151  .card-title {152    margin-top: 22px;153    font-size: 44px;154    font-weight: 600;155    color: #222;156    line-height: 1.2;157  }158  .card-sub {159    margin-top: 10px;160    font-size: 36px;161    color: #8b8b8b;162  }163 164  /* Home indicator */165  .home-indicator {166    position: absolute;167    bottom: 30px;168    left: 50%;169    transform: translateX(-50%);170    width: 720px;171    height: 12px;172    background: #BDBDBD;173    border-radius: 8px;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status Bar -->181  <div class="status-bar">182    <div class="status-left">183      <span>8:53</span>184    </div>185    <div class="status-right">186      <div class="icon-square"></div>187      <div class="icon-square"></div>188      <div class="icon-square"></div>189    </div>190  </div>191 192  <!-- Header with back and title -->193  <div class="header">194    <div class="back-btn" aria-label="Back">195      <svg viewBox="0 0 24 24">196        <path d="M15.5 3.5L7 12l8.5 8.5-2 2L3 12l10.5-10.5 2 2z"></path>197      </svg>198    </div>199    <div class="title">Recipes</div>200  </div>201 202  <!-- Sort / Filter -->203  <div class="tabs">204    <div class="tab">Sort</div>205    <div class="tab">Filter</div>206  </div>207 208  <!-- Count -->209  <div class="count-row">2 Recipes</div>210 211  <!-- Grid of recipe cards -->212  <div class="grid">213    <div class="card">214      <div class="card-image">[IMG: White Sauce Chicken Pasta bowl]</div>215      <div class="card-title">White Sauce Chicken Pasta</div>216      <div class="card-sub">Total Time: 35 mins</div>217    </div>218 219    <div class="card">220      <div class="card-image">[IMG: Healthy Alfredo Pasta with chicken]</div>221      <div class="card-title">Healthy Alfredo Pasta</div>222      <div class="card-sub">Total Time: 30 mins</div>223    </div>224  </div>225 226  <!-- Home indicator -->227  <div class="home-indicator"></div>228 229</div>230</body>231</html>