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>Choose Space</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, -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: #FFFFFF;15  }16 17  /* Back arrow */18  .back-btn {19    position: absolute;20    top: 110px;21    left: 70px;22    width: 64px;23    height: 64px;24    opacity: 0.35;25  }26 27  /* Title Section */28  .title-wrap {29    position: absolute;30    top: 470px;31    left: 0;32    width: 100%;33    text-align: center;34  }35  .title-wrap h1 {36    margin: 0;37    font-size: 64px;38    line-height: 1.2;39    color: #1D1D1F;40    font-weight: 800;41    letter-spacing: -0.5px;42  }43  .title-wrap p {44    margin: 16px 0 0 0;45    font-size: 38px;46    color: #9AA6BD;47    font-weight: 600;48  }49 50  /* Cards */51  .card {52    position: relative;53    width: 972px; /* 1080 - 2*54 */54    height: 290px;55    margin-left: 54px;56    border-radius: 44px;57    background: #EEF1F6;58    margin-top: 48px;59    display: flex;60    align-items: center;61    padding: 36px 40px;62    box-sizing: border-box;63  }64  .list {65    position: absolute;66    top: 680px;67    width: 100%;68  }69 70  .thumb-stack {71    position: relative;72    width: 210px;73    height: 210px;74    margin-right: 40px;75    flex: 0 0 auto;76  }77  .thumb {78    position: absolute;79    width: 190px;80    height: 190px;81    border-radius: 32px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #757575;88    font-size: 28px;89    text-align: center;90    padding: 10px;91    box-sizing: border-box;92  }93  .thumb.back1 {94    width: 180px;95    height: 180px;96    left: 26px;97    top: 16px;98    opacity: 0.7;99  }100  .thumb.back2 {101    width: 170px;102    height: 170px;103    left: 44px;104    top: 30px;105    opacity: 0.5;106  }107  .thumb.front {108    left: 0;109    top: 0;110  }111 112  .card-content h3 {113    margin: 0;114    font-size: 52px;115    color: #1E1E1E;116    font-weight: 800;117    letter-spacing: -0.2px;118  }119  .card-content span {120    display: block;121    margin-top: 12px;122    font-size: 36px;123    color: #9AA6BD;124    font-weight: 600;125  }126 127  .menu {128    position: absolute;129    right: 46px;130    top: 42px;131    width: 60px;132    height: 60px;133    opacity: 0.4;134  }135 136  /* Primary Button */137  .primary-btn {138    position: absolute;139    left: 72px;140    right: 72px;141    bottom: 340px;142    height: 140px;143    background: #0AC7A0;144    border: none;145    color: #FFFFFF;146    border-radius: 80px;147    font-size: 44px;148    font-weight: 800;149    letter-spacing: 0.2px;150    box-shadow: 0 6px 20px rgba(10, 199, 160, 0.35);151  }152 153  /* Device footer (home indicator) */154  .device-footer {155    position: absolute;156    bottom: 0;157    left: 0;158    width: 100%;159    height: 160px;160    background: #000000;161  }162  .home-indicator {163    position: absolute;164    bottom: 38px;165    left: 50%;166    transform: translateX(-50%);167    width: 220px;168    height: 12px;169    background: rgba(255,255,255,0.7);170    border-radius: 8px;171  }172</style>173</head>174<body>175<div id="render-target">176  <!-- Back Arrow Icon -->177  <svg class="back-btn" viewBox="0 0 24 24">178    <path d="M15.5 4.5L8.5 12l7 7.5" fill="none" stroke="#394B63" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>179  </svg>180 181  <!-- Title -->182  <div class="title-wrap">183    <h1>Choose space</h1>184    <p>Where to add plant?</p>185  </div>186 187  <!-- Cards List -->188  <div class="list">189    <div class="card">190      <div class="thumb-stack">191        <div class="thumb front">[IMG: Space]</div>192        <div class="thumb back1"></div>193        <div class="thumb back2"></div>194      </div>195      <div class="card-content">196        <h3>General</h3>197        <span>0 plants</span>198      </div>199    </div>200 201    <div class="card" style="margin-top: 44px;">202      <div class="thumb-stack">203        <div class="thumb front">[IMG: Space]</div>204        <div class="thumb back1"></div>205        <div class="thumb back2"></div>206      </div>207      <div class="card-content">208        <h3>Natalie</h3>209        <span>0 plants</span>210      </div>211      <!-- Menu icon (three dots) -->212      <svg class="menu" viewBox="0 0 24 24">213        <circle cx="5" cy="12" r="2" fill="#394B63"/>214        <circle cx="12" cy="12" r="2" fill="#394B63"/>215        <circle cx="19" cy="12" r="2" fill="#394B63"/>216      </svg>217    </div>218  </div>219 220  <!-- Primary Button -->221  <button class="primary-btn">Create space</button>222 223  <!-- Device Footer -->224  <div class="device-footer">225    <div class="home-indicator"></div>226  </div>227</div>228</body>229</html>