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>Save - Cookbooks</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #000000;14  }15 16  /* Hero image area */17  .hero-img {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 460px;23    background: #E0E0E0;24    border-bottom: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28    color: #757575;29    font-size: 28px;30    letter-spacing: 0.5px;31  }32  .hero-overlay {33    position: absolute;34    inset: 0;35    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.85));36    pointer-events: none;37  }38 39  /* Back button */40  .back-btn {41    position: absolute;42    top: 110px;43    left: 48px;44    width: 112px;45    height: 112px;46    border-radius: 56px;47    background: rgba(0,0,0,0.85);48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .back-btn svg { width: 48px; height: 48px; }53 54  /* Titles */55  .page-title {56    position: absolute;57    top: 280px;58    left: 56px;59    color: #FFFFFF;60    font-size: 86px;61    font-weight: 700;62    letter-spacing: 0.5px;63  }64  .sub-title {65    position: absolute;66    top: 382px;67    left: 56px;68    color: #EDEDED;69    font-size: 42px;70  }71 72  /* List */73  .list {74    position: absolute;75    top: 520px;76    left: 0;77    right: 0;78    padding: 0 48px;79  }80  .item {81    display: flex;82    align-items: center;83    padding: 34px 0;84  }85  .thumb {86    width: 190px;87    margin-right: 32px;88  }89  .thumb .big {90    width: 190px;91    height: 108px;92    background: #F6EDE2;93    border: 2px solid #E8DFD4;94    border-radius: 6px;95  }96  .small-row {97    margin-top: 10px;98    display: flex;99    gap: 12px;100  }101  .small-row .small {102    width: calc((190px - 12px)/2);103    height: 64px;104    background: #F6EDE2;105    border: 2px solid #E8DFD4;106    border-radius: 6px;107  }108  .info .title {109    color: #FFFFFF;110    font-size: 42px;111    margin-bottom: 10px;112  }113  .info .sub {114    color: #9BA09B;115    font-size: 30px;116    letter-spacing: 1px;117  }118 119  /* Bottom create button */120  .create-btn {121    position: absolute;122    bottom: 170px;123    left: 50%;124    transform: translateX(-50%);125    width: 720px;126    height: 108px;127    border-radius: 54px;128    border: 2px solid #BFE7D8;129    color: #BFE7D8;130    background: transparent;131    font-size: 42px;132    letter-spacing: 0.3px;133    display: flex;134    align-items: center;135    justify-content: center;136  }137 138  /* Gesture bar */139  .gesture {140    position: absolute;141    bottom: 70px;142    left: 50%;143    transform: translateX(-50%);144    width: 420px;145    height: 12px;146    background: #3a3a3a;147    border-radius: 6px;148  }149 150  /* Status indicators (simple) */151  .status-bar {152    position: absolute;153    top: 24px;154    left: 34px;155    right: 34px;156    height: 44px;157    color: #FFFFFF;158    font-size: 28px;159    display: flex;160    align-items: center;161    justify-content: space-between;162    opacity: 0.9;163  }164  .status-icons {165    display: flex;166    gap: 18px;167    align-items: center;168  }169  .icon-battery, .icon-wifi, .icon-signal {170    width: 32px;171    height: 32px;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <div class="hero-img">179    <div>[IMG: Cooking pot photo]</div>180    <div class="hero-overlay"></div>181  </div>182 183  <div class="status-bar">184    <div>8:16</div>185    <div class="status-icons">186      <!-- simple wifi icon -->187      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">188        <path d="M2 8c6-4 14-4 20 0"></path>189        <path d="M5 12c4-3 10-3 14 0"></path>190        <path d="M8 16c2-2 6-2 8 0"></path>191        <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>192      </svg>193      <!-- signal icon -->194      <svg class="icon-signal" viewBox="0 0 24 24" fill="#fff">195        <rect x="3" y="14" width="3" height="7" opacity="0.5"></rect>196        <rect x="9" y="11" width="3" height="10" opacity="0.7"></rect>197        <rect x="15" y="7" width="3" height="14"></rect>198      </svg>199      <!-- battery icon -->200      <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">201        <rect x="2" y="7" width="18" height="10" rx="2"></rect>202        <rect x="20" y="10" width="2" height="4" fill="#fff" stroke="none"></rect>203      </svg>204    </div>205  </div>206 207  <div class="back-btn">208    <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">209      <path d="M15 6l-6 6 6 6"></path>210    </svg>211  </div>212 213  <div class="page-title">Save</div>214  <div class="sub-title">Classic Ratatouille</div>215 216  <div class="list">217    <div class="item">218      <div class="thumb">219        <div class="big"></div>220        <div class="small-row">221          <div class="small"></div>222          <div class="small"></div>223        </div>224      </div>225      <div class="info">226        <div class="title">My first cookbook</div>227        <div class="sub">0 items</div>228      </div>229    </div>230 231    <div class="item">232      <div class="thumb">233        <div class="big"></div>234        <div class="small-row">235          <div class="small"></div>236          <div class="small"></div>237        </div>238      </div>239      <div class="info">240        <div class="title">My first cookbook</div>241        <div class="sub">0 items</div>242      </div>243    </div>244  </div>245 246  <div class="create-btn">+ Create new cookbook</div>247  <div class="gesture"></div>248 249</div>250</body>251</html>