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>Save - Chinese fried rice</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #000000;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20    color: #FFFFFF;21  }22 23  /* Hero / top image */24  .hero {25    position: relative;26    width: 1080px;27    height: 360px;28    overflow: hidden;29  }30  .hero .img {31    position: absolute;32    inset: 0;33    background: #E0E0E0;34    border-bottom: 1px solid #BDBDBD;35    display: flex;36    align-items: center;37    justify-content: center;38    color: #757575;39    font-size: 30px;40    letter-spacing: .2px;41  }42  .hero:after {43    /* fade to black like the screenshot */44    content: "";45    position: absolute;46    left: 0; right: 0; bottom: 0;47    height: 70%;48    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,1) 100%);49    pointer-events: none;50  }51 52  /* Back button */53  .back-btn {54    position: absolute;55    top: 210px;56    left: 40px;57    width: 104px;58    height: 104px;59    background: #0C0C0C;60    border-radius: 52px;61    display: flex;62    align-items: center;63    justify-content: center;64    box-shadow: 0 2px 6px rgba(0,0,0,0.4);65  }66  .back-btn svg {67    width: 40px;68    height: 40px;69    fill: none;70    stroke: #FFFFFF;71    stroke-width: 8;72    stroke-linecap: round;73    stroke-linejoin: round;74  }75 76  /* Titles */77  .content {78    position: relative;79    padding: 24px 64px 0 64px;80  }81  .title {82    font-size: 72px;83    font-weight: 800;84    margin: 8px 0 8px 0;85    letter-spacing: -0.5px;86  }87  .subtitle {88    font-size: 40px;89    color: #D5D5D5;90    margin: 0 0 38px 0;91  }92 93  /* Cookbook row */94  .row {95    display: flex;96    align-items: center;97    gap: 28px;98  }99  .mosaic {100    width: 140px;101    height: 140px;102    display: grid;103    grid-template-columns: 1fr 1fr;104    grid-template-rows: 1fr 1fr;105    gap: 6px;106  }107  .mosaic .tile {108    background: #F1E9DD;109    border: 1px solid #BDBDBD;110  }111  .mosaic .tile.img {112    background: #E0E0E0;113    display: flex;114    align-items: center;115    justify-content: center;116    color: #757575;117    font-size: 20px;118    text-align: center;119    padding: 6px;120  }121  .row .texts .name {122    font-size: 44px;123    font-weight: 600;124    margin: 0 0 8px 0;125  }126  .row .texts .meta {127    font-size: 28px;128    letter-spacing: 2px;129    color: #9E9E9E;130    margin: 0;131  }132 133  /* Create button */134  .create-wrap {135    position: absolute;136    left: 90px;137    right: 90px;138    bottom: 230px;139    display: flex;140    justify-content: center;141  }142  .create-btn {143    width: 900px;144    max-width: 900px;145    height: 128px;146    border-radius: 64px;147    border: 3px solid #9FDCCB;148    color: #C7F2E7;149    background: transparent;150    font-size: 40px;151    letter-spacing: .2px;152    display: flex;153    align-items: center;154    justify-content: center;155  }156 157  /* Home indicator */158  .home-indicator {159    position: absolute;160    left: 50%;161    transform: translateX(-50%);162    bottom: 84px;163    width: 290px;164    height: 12px;165    background: #D9D9D9;166    border-radius: 8px;167    opacity: 0.9;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <div class="hero">175    <div class="img">[IMG: Blurred kitchen background]</div>176  </div>177 178  <div class="back-btn">179    <svg viewBox="0 0 48 48" aria-hidden="true">180      <path d="M30 8 L14 24 L30 40"></path>181    </svg>182  </div>183 184  <div class="content">185    <div class="title">Save</div>186    <div class="subtitle">Chinese fried rice</div>187 188    <div class="row">189      <div class="mosaic">190        <div class="tile img">[IMG: Food photo]</div>191        <div class="tile"></div>192        <div class="tile"></div>193        <div class="tile"></div>194      </div>195      <div class="texts">196        <div class="name">My first cookbook</div>197        <p class="meta">1 items</p>198      </div>199    </div>200  </div>201 202  <div class="create-wrap">203    <div class="create-btn">+ Create new cookbook</div>204  </div>205 206  <div class="home-indicator"></div>207</div>208</body>209</html>