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>New Document - Mock UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Top bars */19  .status-bar {20    height: 60px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #4a4a4a;26    font-size: 28px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 18px;32  }33  .header {34    height: 120px;35    padding: 0 28px;36    display: flex;37    align-items: center;38    border-bottom: 1px solid #eee;39  }40  .title {41    font-size: 48px;42    font-weight: 700;43    margin-left: 18px;44  }45  .header-spacer { flex: 1; }46  .icon-btn {47    width: 64px; height: 64px;48    display: inline-flex;49    align-items: center;50    justify-content: center;51    margin-left: 18px;52    border-radius: 14px;53  }54 55  /* Content */56  .content {57    position: absolute;58    left: 0; right: 0;59    top: 180px;60    bottom: 0;61    overflow: hidden; /* page screenshot is fixed, not scrollable */62  }63  .section {64    padding: 28px 40px 6px 40px;65  }66  .section h2 {67    margin: 16px 0 22px 0;68    font-size: 42px;69    font-weight: 700;70  }71  .section-header {72    display: flex;73    align-items: center;74    justify-content: space-between;75    padding: 0 40px;76    margin-top: 8px;77  }78  .section-header h2 {79    margin: 0;80  }81  .more {82    color: #4a4a4a;83    font-size: 36px;84    display: inline-flex;85    align-items: center;86    gap: 10px;87  }88 89  /* Grids */90  .grid-2 {91    display: grid;92    grid-template-columns: 480px 480px;93    gap: 40px;94    padding: 6px 40px 0 40px;95  }96  .grid-3 {97    display: grid;98    grid-template-columns: 320px 320px 320px;99    gap: 36px;100    padding: 6px 40px 0 40px;101  }102 103  /* Tiles */104  .tile {105    width: 100%;106  }107  .image {108    width: 100%;109    height: 480px;110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    border-radius: 18px;113    display: flex;114    align-items: center;115    justify-content: center;116    color: #757575;117    text-align: center;118    padding: 20px;119    box-sizing: border-box;120  }121  .image.small {122    height: 430px;123  }124  .caption {125    font-size: 34px;126    margin-top: 16px;127    color: #333;128  }129 130  /* Special blank tile with plus */131  .blank-tile {132    background: #ffffff;133    border: 1px solid #dcdcdc;134  }135  .plus {136    width: 140px; height: 140px;137    border-radius: 24px;138    color: #7aa6ff;139    display: flex; align-items: center; justify-content: center;140    border: 4px solid #7aa6ff;141    font-size: 110px;142    line-height: 110px;143  }144 145  /* Helper small text */146  .muted { color: #6b6b6b; }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div>9:38</div>155    <div class="status-right">156      <!-- Do not disturb icon -->157      <svg width="36" height="36" viewBox="0 0 24 24">158        <circle cx="12" cy="12" r="10" fill="none" stroke="#555" stroke-width="2"/>159        <rect x="6" y="11" width="12" height="2" fill="#555"/>160      </svg>161      <!-- Wi-Fi -->162      <svg width="36" height="36" viewBox="0 0 24 24">163        <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>164        <path d="M5 12c3-3 11-3 14 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>165        <path d="M8 16c2-2 6-2 8 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>166        <circle cx="12" cy="19" r="1.5" fill="#555"/>167      </svg>168      <!-- Battery with percentage -->169      <div style="display:flex; align-items:center; gap:10px;">170        <svg width="48" height="24" viewBox="0 0 36 18">171          <rect x="1" y="3" width="30" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>172          <rect x="32" y="6" width="3" height="6" rx="1" fill="#555"/>173          <rect x="3" y="5" width="24" height="8" fill="#6abf69"/>174        </svg>175        <span>86%</span>176      </div>177    </div>178  </div>179 180  <!-- Header -->181  <div class="header">182    <!-- Back icon -->183    <svg width="56" height="56" viewBox="0 0 24 24">184      <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185    </svg>186    <div class="title">New Document</div>187    <div class="header-spacer"></div>188    <!-- Profile icon -->189    <div class="icon-btn">190      <svg width="48" height="48" viewBox="0 0 24 24">191        <circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/>192        <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>193      </svg>194    </div>195    <!-- Small document icon -->196    <div class="icon-btn">197      <svg width="48" height="48" viewBox="0 0 24 24">198        <path d="M6 3h8l4 4v14H6z" fill="none" stroke="#333" stroke-width="2"/>199        <path d="M14 3v5h5" fill="none" stroke="#333" stroke-width="2"/>200      </svg>201    </div>202  </div>203 204  <div class="content">205    <!-- Most Used -->206    <div class="section">207      <h2>Most Used</h2>208    </div>209    <div class="grid-2">210      <!-- Blank -->211      <div class="tile">212        <div class="image blank-tile" style="display:flex; align-items:center; justify-content:center;">213          <div class="plus">+</div>214        </div>215        <div class="caption">Blank</div>216      </div>217 218      <!-- Delicate Resumes -->219      <div class="tile">220        <div class="image">221          <div>[IMG: Delicate Resumes Illustration]</div>222        </div>223        <div class="caption">Delicate Resumes</div>224      </div>225    </div>226 227    <!-- Letters -->228    <div class="section-header" style="margin-top: 32px;">229      <h2>Letters</h2>230      <div class="more">More231        <svg width="30" height="30" viewBox="0 0 24 24">232          <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>233        </svg>234      </div>235    </div>236    <div class="grid-3" style="margin-top: 8px;">237      <div class="tile">238        <div class="image small">239          <div>[IMG: Blue and Yellow Letter Template]</div>240        </div>241        <div class="caption">Blue and Yellow Let...</div>242      </div>243      <div class="tile">244        <div class="image small">245          <div>[IMG: Fresh Green Leaf Letter Template]</div>246        </div>247        <div class="caption">Fresh Green Leaf L...</div>248      </div>249      <div class="tile">250        <div class="image small">251          <div>[IMG: Snow and Girl Winter Letter]</div>252        </div>253        <div class="caption">Snow and Girl Letter</div>254      </div>255    </div>256 257    <!-- Resumes -->258    <div class="section-header" style="margin-top: 36px;">259      <h2>Resumes</h2>260      <div class="more">More261        <svg width="30" height="30" viewBox="0 0 24 24">262          <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263        </svg>264      </div>265    </div>266    <div class="grid-3" style="margin-top: 8px;">267      <div class="tile">268        <div class="image small">269          <div>[IMG: Simple Green Resume Template]</div>270        </div>271        <div class="caption">Simple Green Resu...</div>272      </div>273      <div class="tile">274        <div class="image small">275          <div>[IMG: Simple Resume Format (Minimal)]</div>276        </div>277        <div class="caption">Simple Resume for...</div>278      </div>279      <div class="tile">280        <div class="image small">281          <div>[IMG: Black Simple Resume Template]</div>282        </div>283        <div class="caption">Black Simple Resu...</div>284      </div>285    </div>286  </div>287 288</div>289</body>290</html>