GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Rendered Mobile UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #ffffff;18  }19 20  /* Top app bar */21  .top-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 230px;27    background: #2d6cff;28    color: #fff;29  }30  .status-row {31    height: 90px;32    display: flex;33    align-items: center;34    padding: 0 36px;35    font-size: 40px;36    letter-spacing: 0.5px;37  }38  .status-icons {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .title-row {45    height: 140px;46    display: flex;47    align-items: center;48    padding: 0 30px;49    position: relative;50  }51  .menu-icon {52    width: 80px;53    height: 80px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58  .file-title {59    position: absolute;60    left: 0;61    right: 0;62    text-align: center;63    font-size: 44px;64    font-weight: 600;65  }66  .done-btn {67    margin-left: auto;68    font-size: 44px;69    font-weight: 600;70  }71  .icon-strip {72    position: absolute;73    right: 200px;74    top: 100px;75    display: flex;76    align-items: center;77    gap: 40px;78  }79 80  /* Document area */81  .doc-area {82    position: absolute;83    top: 230px;84    left: 0;85    right: 0;86    bottom: 160px;87    background: #ffffff;88    padding: 60px 60px 220px;89    overflow: hidden;90  }91  .doc-text {92    font-size: 88px;93    line-height: 1.2;94    color: #222;95    margin-top: 80px;96  }97 98  /* Floating action bubble */99  .floating-menu {100    position: absolute;101    top: 540px;102    left: 60px;103    background: #fff;104    border: 1px solid #e5e5e5;105    border-radius: 60px;106    box-shadow: 0 8px 20px rgba(0,0,0,0.12);107    padding: 26px 30px;108    display: flex;109    gap: 44px;110  }111  .floating-menu .chip {112    font-size: 40px;113    color: #222;114    white-space: nowrap;115  }116 117  /* Bottom formatting toolbar */118  .bottom-toolbar {119    position: absolute;120    left: 0;121    bottom: 0;122    width: 1080px;123    height: 160px;124    background: #f2f2f2;125    border-top: 1px solid #ddd;126    display: flex;127    align-items: center;128    justify-content: space-around;129    padding: 0 30px;130  }131  .bt-item {132    display: flex;133    flex-direction: column;134    align-items: center;135    gap: 8px;136    color: #333;137    font-size: 42px;138    min-width: 90px;139  }140  .label {141    font-size: 42px;142    font-weight: 700;143  }144  .italic {145    font-style: italic;146    font-weight: 600;147  }148  .underline {149    text-decoration: underline;150    font-weight: 600;151  }152  .subtle {153    color: #666;154    font-size: 38px;155    font-weight: 600;156  }157 158  /* Simple icon helpers */159  .svg-icon {160    width: 64px;161    height: 64px;162  }163  .svg-md {164    width: 72px;165    height: 72px;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Top blue app bar -->173  <div class="top-bar">174    <div class="status-row">175      <div>9:12</div>176      <div class="status-icons">177        <!-- Status dots -->178        <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#fff"/></svg>179        <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>180        <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="18" cy="12" r="3" fill="#fff"/></svg>181        <!-- WiFi -->182        <svg class="svg-icon" viewBox="0 0 24 24">183          <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" />184          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" />185          <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" />186          <circle cx="12" cy="18" r="2" fill="#fff"/>187        </svg>188        <!-- Battery -->189        <svg class="svg-icon" viewBox="0 0 28 18">190          <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>191          <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"/>192          <rect x="23" y="6" width="3" height="6" rx="1" fill="#fff"/>193        </svg>194      </div>195    </div>196 197    <div class="title-row">198      <div class="menu-icon">199        <!-- Hamburger -->200        <svg class="svg-md" viewBox="0 0 24 24">201          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round" />202        </svg>203      </div>204      <div class="file-title">New word.docx</div>205      <div class="icon-strip">206        <!-- Back -->207        <svg class="svg-md" viewBox="0 0 24 24">208          <path d="M15 5L7 12l8 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209        </svg>210        <!-- Redo -->211        <svg class="svg-md" viewBox="0 0 24 24">212          <path d="M9 5h7v7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>213          <path d="M16 12c-2.5-4-9-4-11 0" stroke="#fff" stroke-width="2" fill="none" />214        </svg>215        <!-- Crown -->216        <svg class="svg-md" viewBox="0 0 24 24">217          <path d="M3 18h18l-2-9-4 4-4-6-4 6-4-4z" fill="none" stroke="#fff" stroke-width="2"/>218        </svg>219        <!-- User -->220        <svg class="svg-md" viewBox="0 0 24 24">221          <circle cx="12" cy="8" r="4" fill="none" stroke="#fff" stroke-width="2"/>222          <path d="M4 20c2-4 14-4 16 0" stroke="#fff" stroke-width="2" fill="none"/>223        </svg>224      </div>225      <div class="done-btn">Done</div>226    </div>227  </div>228 229  <!-- Document area -->230  <div class="doc-area">231    <div class="doc-text">staurants next week.</div>232 233    <!-- Floating pill menu -->234    <div class="floating-menu">235      <div class="chip">Select All</div>236      <div class="chip">Copy Format</div>237      <div class="chip">AI Write</div>238      <div class="chip">Text to Image</div>239    </div>240  </div>241 242  <!-- Bottom formatting toolbar -->243  <div class="bottom-toolbar">244    <div class="bt-item">245      <!-- Pen icon -->246      <svg class="svg-md" viewBox="0 0 24 24">247        <path d="M3 21l5-1 11-11-4-4L4 16l-1 5z" fill="none" stroke="#333" stroke-width="2"/>248      </svg>249    </div>250    <div class="bt-item label">B</div>251    <div class="bt-item italic">I</div>252    <div class="bt-item underline">U</div>253    <div class="bt-item">254      <!-- A with underline -->255      <div class="label">A</div>256      <svg class="svg-icon" viewBox="0 0 24 6"><rect x="3" y="1" width="18" height="4" fill="#333"/></svg>257    </div>258    <div class="bt-item">259      <div class="subtle">A</div>260      <!-- small pencil -->261      <svg class="svg-icon" viewBox="0 0 24 24">262        <path d="M3 21l5-1 11-11-4-4L4 16l-1 5z" fill="none" stroke="#777" stroke-width="2"/>263      </svg>264    </div>265    <div class="bt-item">266      <!-- Chevron up -->267      <svg class="svg-md" viewBox="0 0 24 24">268        <path d="M5 15l7-7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>269      </svg>270    </div>271    <div class="bt-item">272      <!-- Keyboard -->273      <svg class="svg-md" viewBox="0 0 24 24">274        <rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="#333" stroke-width="2"/>275        <rect x="5" y="8" width="2" height="2" fill="#333"/>276        <rect x="9" y="8" width="2" height="2" fill="#333"/>277        <rect x="13" y="8" width="2" height="2" fill="#333"/>278        <rect x="17" y="8" width="2" height="2" fill="#333"/>279        <rect x="5" y="12" width="14" height="2" fill="#333"/>280      </svg>281    </div>282  </div>283 284</div>285</body>286</html>