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: #ffffff;15    box-sizing: border-box;16    font-family: "Helvetica Neue", Arial, sans-serif;17    color: #6f7981;18  }19  /* Top device status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000;27  }28 29  /* Search/header bar */30  .search-area {31    position: absolute;32    top: 120px;33    left: 0;34    width: 1080px;35    background: #fff;36    padding: 36px 40px 24px 40px;37    box-sizing: border-box;38  }39  .search-row {40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .icon-btn {45    width: 64px;46    height: 64px;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .icon-btn svg { stroke: #60686f; fill: none; stroke-width: 6; }52  .search-text {53    flex: 1;54    font-size: 42px;55    color: #3b3f44;56  }57  .search-underline {58    margin-top: 18px;59    height: 2px;60    background: #d9dde1;61    width: 100%;62  }63 64  /* Outline banner */65  .outline-banner {66    position: absolute;67    top: 234px;68    left: 0;69    width: 1080px;70    box-sizing: border-box;71    padding: 24px 40px;72    background: #fff;73    box-shadow: 0 2px 6px rgba(0,0,0,0.08);74    display: flex;75    align-items: center;76    gap: 22px;77  }78  .doc-icon {79    width: 80px;80    height: 80px;81    border-radius: 8px;82    background: #f3f5f7;83    border: 1px solid #d5d9dd;84    display: flex;85    align-items: center;86    justify-content: center;87  }88  .banner-text {89    font-size: 40px;90    color: #3b3f44;91  }92 93  /* Content */94  .content {95    position: absolute;96    top: 360px;97    left: 40px;98    right: 40px;99  }100  .lead-text {101    font-size: 52px;102    line-height: 1.36;103    color: #86929a;104    margin: 40px 0 70px 0;105  }106  .divider {107    height: 2px;108    background: #e2e5e8;109    margin: 10px 0 40px 0;110  }111  .section-header {112    display: flex;113    align-items: center;114    justify-content: space-between;115  }116  .section-title {117    font-size: 88px;118    line-height: 1.1;119    font-weight: 300;120    color: #808a91;121  }122  .section-title .num {123    color: #0a7cab;124    margin-right: 12px;125  }126  .chevron-down svg { stroke: #2d2f31; stroke-width: 8; fill: none; }127  .subheading {128    font-size: 64px;129    font-style: italic;130    color: #0a7cab;131    margin: 50px 0 70px 0;132  }133  .paragraph {134    font-size: 56px;135    line-height: 1.38;136    color: #7f8890;137  }138  .highlight {139    background: #f4b896;140    padding: 12px 18px;141    border-radius: 6px;142    color: #3b3f44;143  }144 145  /* Bottom gesture area */146  .bottom-area {147    position: absolute;148    bottom: 0;149    left: 0;150    width: 1080px;151    height: 140px;152    background: #fafafa;153    display: flex;154    align-items: center;155    justify-content: center;156  }157  .gesture-pill {158    width: 220px;159    height: 16px;160    background: #c5c9cc;161    border-radius: 12px;162  }163</style>164</head>165<body>166<div id="render-target">167  <div class="status-bar"></div>168 169  <div class="search-area">170    <div class="search-row">171      <div class="icon-btn">172        <svg width="44" height="44" viewBox="0 0 44 44">173          <path d="M26 8 L14 22 L26 36"></path>174          <path d="M14 22 H34"></path>175        </svg>176      </div>177      <div class="search-text">signature</div>178      <div class="icon-btn">179        <svg width="44" height="44" viewBox="0 0 44 44">180          <path d="M12 12 L32 32"></path>181          <path d="M32 12 L12 32"></path>182        </svg>183      </div>184      <div class="icon-btn">185        <svg width="44" height="44" viewBox="0 0 44 44">186          <path d="M26 10 L16 22 L26 34"></path>187        </svg>188      </div>189      <div class="icon-btn">190        <svg width="44" height="44" viewBox="0 0 44 44">191          <path d="M18 10 L28 22 L18 34"></path>192        </svg>193      </div>194    </div>195    <div class="search-underline"></div>196  </div>197 198  <div class="outline-banner">199    <div class="doc-icon">200      <svg width="54" height="54" viewBox="0 0 54 54">201        <rect x="8" y="8" width="38" height="38" rx="6" stroke="#9aa2a9" fill="none" stroke-width="3"></rect>202        <line x1="14" y1="18" x2="40" y2="18" stroke="#9aa2a9" stroke-width="3"></line>203        <line x1="14" y1="26" x2="40" y2="26" stroke="#9aa2a9" stroke-width="3"></line>204        <line x1="14" y1="34" x2="34" y2="34" stroke="#9aa2a9" stroke-width="3"></line>205      </svg>206    </div>207    <div class="banner-text">Tap to show outline</div>208  </div>209 210  <div class="content">211    <div class="lead-text">212      can also insert, delete, or rotate pages on your desktop, tablet, or mobile device.213    </div>214 215    <div class="divider"></div>216 217    <div class="section-header">218      <div class="section-title"><span class="num">03</span> Share files<br>with others</div>219      <div class="chevron-down">220        <svg width="56" height="56" viewBox="0 0 56 56">221          <path d="M10 20 L28 36 L46 20"></path>222        </svg>223      </div>224    </div>225 226    <div class="subheading">Send, track, and<br>manage</div>227 228    <div class="paragraph">229      Now you can share files for viewing, commenting, or <span class="highlight">signature</span>—and track status every step of the way.230    </div>231  </div>232 233  <div class="bottom-area">234    <div class="gesture-pill"></div>235  </div>236</div>237</body>238</html>