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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Top overlay area */20  .top-header {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 170px;24    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.15));25    padding: 18px 32px;26    box-sizing: border-box;27  }28  .status-bar {29    display: flex;30    align-items: center;31    justify-content: space-between;32    height: 58px;33    opacity: 0.95;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 22px;39    font-size: 40px;40    font-weight: 600;41    letter-spacing: 1px;42  }43  .mini-icons {44    display: flex; align-items: center; gap: 22px;45  }46  .mini-item {47    width: 36px; height: 36px;48    display: inline-flex; align-items: center; justify-content: center;49    border-radius: 18px; border: 1px solid rgba(255,255,255,0.35);50    font-size: 22px; color: rgba(255,255,255,0.85);51  }52  .status-right {53    display: flex; align-items: center; gap: 26px;54  }55  .toolbar {56    display: flex;57    align-items: center;58    justify-content: space-between;59    margin-top: 14px;60  }61  .tool-left, .tool-right { display: flex; align-items: center; gap: 26px; }62  .icon-btn {63    width: 70px; height: 70px; display: inline-flex;64    align-items: center; justify-content: center;65    border-radius: 40px;66  }67  .icon-btn svg { width: 48px; height: 48px; }68 69  /* Photo area */70  .photo-wrap {71    position: absolute;72    top: 170px; left: 0; right: 0;73    bottom: 360px; /* space for bottom sheet */74    padding: 0;75    box-sizing: border-box;76  }77  .photo {78    width: 100%; height: 100%;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex; align-items: flex-end; justify-content: flex-start;82    color: #757575;83    font-size: 40px;84    padding: 24px;85  }86 87  /* Bottom panel */88  .bottom-sheet {89    position: absolute;90    left: 0; right: 0; bottom: 60px;91    height: 300px;92    background: linear-gradient(to top, rgba(20,20,20,1), rgba(20,20,20,0.92));93    padding: 40px 48px;94    box-sizing: border-box;95    display: flex; align-items: center; justify-content: space-between;96  }97  .more-area {98    display: flex; align-items: center; gap: 24px;99    color: #fff;100    font-size: 44px;101    font-weight: 600;102  }103  .circle {104    width: 80px; height: 80px; border-radius: 40px;105    background: #fff; color: #222;106    display: flex; align-items: center; justify-content: center;107  }108  .save-btn {109    background: #00C7B0;110    color: #053c33;111    border-radius: 18px;112    padding: 26px 46px;113    font-weight: 800;114    font-size: 46px;115    letter-spacing: 3px;116    display: inline-flex; align-items: center; gap: 22px;117    box-shadow: 0 8px 20px rgba(0, 199, 176, 0.35);118  }119  .save-btn svg { width: 56px; height: 56px; }120 121  /* Home indicator */122  .home-indicator {123    position: absolute;124    bottom: 18px; left: 50%;125    transform: translateX(-50%);126    width: 240px; height: 12px;127    background: rgba(255,255,255,0.85);128    border-radius: 8px;129  }130</style>131</head>132<body>133<div id="render-target">134  <!-- Top overlay (status + toolbar) -->135  <div class="top-header">136    <div class="status-bar">137      <div class="status-left">138        <div>10:39</div>139        <div class="mini-icons">140          <div class="mini-item">☼</div>141          <div class="mini-item">⚙︎</div>142          <div class="mini-item">LR</div>143          <div class="mini-item">144            <svg viewBox="0 0 48 48" fill="none">145              <circle cx="20" cy="20" r="12" stroke="white" stroke-width="3" />146              <line x1="30" y1="30" x2="42" y2="42" stroke="white" stroke-width="3" />147            </svg>148          </div>149          <div class="mini-item">•</div>150        </div>151      </div>152      <div class="status-right">153        <svg viewBox="0 0 48 48" width="44" height="44">154          <path d="M6 30c6-8 18-8 24 0" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>155          <path d="M12 30c4-5 10-5 14 0" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>156          <circle cx="18" cy="34" r="2.5" fill="white"/>157        </svg>158        <svg viewBox="0 0 48 48" width="44" height="44">159          <rect x="6" y="12" width="32" height="20" rx="3" ry="3" stroke="white" stroke-width="3" fill="none"/>160          <rect x="39" y="18" width="3" height="8" fill="white"/>161        </svg>162      </div>163    </div>164    <div class="toolbar">165      <div class="tool-left">166        <div class="icon-btn">167          <svg viewBox="0 0 48 48">168            <path d="M30 10 L16 24 L30 38" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169          </svg>170        </div>171      </div>172      <div class="tool-right">173        <div class="icon-btn">174          <svg viewBox="0 0 48 48">175            <path d="M10 34 L30 14" stroke="white" stroke-width="3" />176            <path d="M34 10 L38 14 L28 24 L24 20 Z" fill="none" stroke="white" stroke-width="3"/>177          </svg>178        </div>179        <div class="icon-btn">180          <svg viewBox="0 0 48 48">181            <circle cx="12" cy="32" r="4" fill="none" stroke="white" stroke-width="3"/>182            <circle cx="24" cy="16" r="4" fill="none" stroke="white" stroke-width="3"/>183            <circle cx="36" cy="28" r="4" fill="none" stroke="white" stroke-width="3"/>184            <path d="M14 29 L22 19 M26 19 L34 25" stroke="white" stroke-width="3" fill="none"/>185          </svg>186        </div>187      </div>188    </div>189  </div>190 191  <!-- Photo content -->192  <div class="photo-wrap">193    <div class="photo">[IMG: Living room decor photo]</div>194  </div>195 196  <!-- Bottom sheet with actions -->197  <div class="bottom-sheet">198    <div class="more-area">199      <div class="circle">200        <svg viewBox="0 0 48 48">201          <path d="M12 30 L24 18 L36 30" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202        </svg>203      </div>204      <div>More</div>205    </div>206    <div class="save-btn">207      <svg viewBox="0 0 48 48">208        <path d="M24 40 L12 26 C8 20 12 12 20 14 C22 15 24 17 24 19 C24 17 26 15 28 14 C36 12 40 20 36 26 L24 40"209              stroke="#053c33" stroke-width="3.5" fill="none" stroke-linejoin="round"/>210      </svg>211      <div>SAVE</div>212    </div>213  </div>214 215  <div class="home-indicator"></div>216</div>217</body>218</html>