GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile Document Editor Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: none;15 }16 17 /* Top area (status + app toolbar) */18 .top-wrapper {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 220px;24 background: #9F968E; /* gray-beige bar seen in screenshot */25 color: #ffffff;26 }27 .status-row {28 height: 80px;29 padding: 0 36px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 font-size: 34px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 24px;39 color: #ffffff;40 }41 .toolbar-row {42 height: 140px;43 display: flex;44 align-items: center;45 padding: 0 30px;46 gap: 36px;47 color: #ffffff;48 }49 .tool-btn {50 color: #ffffff;51 font-size: 40px;52 }53 .pill {54 width: 54px;55 height: 54px;56 border-radius: 27px;57 background: rgba(255,255,255,0.15);58 display: flex;59 align-items: center;60 justify-content: center;61 font-weight: bold;62 border: 1px solid rgba(255,255,255,0.35);63 }64 65 /* Document area */66 .doc-area {67 position: absolute;68 top: 220px;69 left: 0;70 width: 1080px;71 height: 1980px;72 background: #ffffff;73 }74 .page {75 position: absolute;76 left: 70px;77 top: 40px;78 width: 940px;79 min-height: 1760px;80 background: #ffffff;81 }82 83 .highlight {84 background: #BFD9FF;85 color: #214E9B;86 border-radius: 8px;87 padding: 16px 18px;88 margin-bottom: 22px;89 }90 .title {91 font-size: 72px;92 font-weight: 700;93 line-height: 1.1;94 margin-bottom: 16px;95 }96 .line {97 font-size: 40px;98 line-height: 1.4;99 }100 .label {101 font-size: 46px;102 font-weight: 600;103 margin: 14px 0;104 }105 106 .list {107 margin-left: 60px;108 margin-top: 10px;109 }110 .list-item {111 display: flex;112 align-items: flex-start;113 gap: 24px;114 margin: 18px 0;115 font-size: 44px;116 color: #214E9B;117 }118 .num {119 min-width: 40px;120 font-weight: 600;121 }122 123 /* Selection handle mock */124 .selection-handle {125 position: absolute;126 left: -20px;127 top: 120px;128 width: 52px;129 height: 52px;130 background: #2F6FDB;131 border-radius: 26px;132 border: 6px solid #6AA5FF;133 }134 135 /* Bottom editing toolbar */136 .bottom-bar {137 position: absolute;138 bottom: 140px;139 left: 0;140 width: 1080px;141 height: 160px;142 background: #ffffff;143 border-top: 1px solid #E0E0E0;144 display: flex;145 align-items: center;146 padding: 0 32px;147 gap: 36px;148 }149 .bottom-icon {150 width: 98px;151 height: 98px;152 border: 1px solid #CFCFCF;153 border-radius: 16px;154 display: flex;155 align-items: center;156 justify-content: center;157 color: #666666;158 background: #F7F7F7;159 }160 161 .select-label {162 position: absolute;163 bottom: 320px;164 left: 32px;165 font-size: 34px;166 color: #707070;167 background: rgba(245,245,245,0.85);168 padding: 10px 16px;169 border-radius: 12px;170 border: 1px solid #DADADA;171 }172 173 /* Android navigation pill */174 .nav-pill {175 position: absolute;176 bottom: 56px;177 left: 50%;178 transform: translateX(-50%);179 width: 420px;180 height: 16px;181 background: #6E6E6E;182 border-radius: 8px;183 }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Top status and toolbar -->190 <div class="top-wrapper">191 <div class="status-row">192 <div>9:42</div>193 <div class="status-right">194 <!-- Do Not Disturb icon -->195 <svg width="40" height="40">196 <circle cx="20" cy="20" r="16" fill="none" stroke="#fff" stroke-width="3"></circle>197 <rect x="10" y="18" width="20" height="4" fill="#fff"></rect>198 </svg>199 <!-- Wi-Fi icon -->200 <svg width="44" height="40" viewBox="0 0 44 40">201 <path d="M2 14c9-8 31-8 40 0" fill="none" stroke="#fff" stroke-width="3" />202 <path d="M8 20c7-6 21-6 28 0" fill="none" stroke="#fff" stroke-width="3" />203 <path d="M16 26c4-4 12-4 16 0" fill="none" stroke="#fff" stroke-width="3" />204 <circle cx="22" cy="32" r="3" fill="#fff" />205 </svg>206 <!-- Battery icon with percentage -->207 <div style="display:flex; align-items:center; gap:10px;">208 <svg width="60" height="28">209 <rect x="2" y="6" width="50" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"></rect>210 <rect x="54" y="10" width="6" height="8" fill="#fff"></rect>211 <rect x="6" y="9" width="36" height="10" fill="#fff"></rect>212 </svg>213 <span style="font-size:28px;">88%</span>214 </div>215 </div>216 </div>217 218 <div class="toolbar-row">219 <div class="tool-btn" style="margin-right:8px;">Done</div>220 221 <!-- Save/page icon -->222 <div class="bottom-icon" style="width:74px;height:74px;background:#CFC9C2;border-color:#BDB6AE;">223 <svg width="40" height="40" viewBox="0 0 40 40">224 <rect x="8" y="6" width="24" height="28" rx="3" fill="none" stroke="#6B6B6B" stroke-width="2"></rect>225 <rect x="12" y="10" width="16" height="6" fill="#6B6B6B"></rect>226 </svg>227 </div>228 229 <!-- Undo -->230 <svg width="60" height="60" viewBox="0 0 60 60">231 <path d="M22 20 L10 30 L22 40" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>232 <path d="M14 30h20c10 0 16 6 16 16" fill="none" stroke="#fff" stroke-width="4"></path>233 </svg>234 235 <!-- Redo -->236 <svg width="60" height="60" viewBox="0 0 60 60">237 <path d="M38 20 L50 30 L38 40" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>238 <path d="M46 30H26c-10 0-16 6-16 16" fill="none" stroke="#fff" stroke-width="4"></path>239 </svg>240 241 <!-- Page number bubble -->242 <div class="pill">1</div>243 244 <!-- Close (X) -->245 <svg width="60" height="60" viewBox="0 0 60 60" style="margin-left:auto;">246 <path d="M16 16 L44 44 M44 16 L16 44" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>247 </svg>248 </div>249 </div>250 251 <!-- Document area -->252 <div class="doc-area">253 <div class="page">254 <div class="selection-handle"></div>255 256 <div class="highlight">257 <div class="title">Meeting Agenda</div>258 <div class="line"><span style="font-weight:700;">Topic:</span> [Insert topic here]</div>259 </div>260 261 <div class="highlight">262 <div class="line"><span style="font-weight:700;">Date:</span> [Insert date here]</div>263 </div>264 265 <div class="highlight">266 <div class="line"><span style="font-weight:700;">Time:</span> [Insert time here]</div>267 </div>268 269 <div class="highlight" style="width:860px;">270 <div class="line"><span style="font-weight:700;">Location:</span> [Insert location here]</div>271 </div>272 273 <div class="highlight" style="padding-bottom:12px;">274 <div class="label">Agenda:</div>275 </div>276 277 <div class="highlight" style="padding-top:26px;">278 <div class="list">279 <div class="list-item"><div class="num">1.</div><div>Introductions and welcome</div></div>280 <div class="list-item"><div class="num">2.</div><div>Review of agenda and meeting objectives</div></div>281 <div class="list-item"><div class="num">3.</div><div>Presentation of topic by [Insert presenter]</div></div>282 <div class="list-item"><div class="num">4.</div><div>Discussion and brainstorming of key points</div></div>283 <div class="list-item"><div class="num">5.</div><div>Action items and next steps</div></div>284 <div class="list-item"><div class="num">6.</div><div>Other business</div></div>285 <div class="list-item"><div class="num">7.</div><div>Next meeting date and adjournment</div></div>286 </div>287 </div>288 </div>289 </div>290 291 <!-- Selected characters label -->292 <div class="select-label">Select: 351</div>293 294 <!-- Bottom editor toolbar -->295 <div class="bottom-bar">296 <div class="bottom-icon">297 <!-- grid icon -->298 <svg width="60" height="60" viewBox="0 0 60 60">299 <rect x="6" y="6" width="16" height="16" fill="#9E9E9E"></rect>300 <rect x="26" y="6" width="16" height="16" fill="#9E9E9E"></rect>301 <rect x="6" y="26" width="16" height="16" fill="#9E9E9E"></rect>302 <rect x="26" y="26" width="16" height="16" fill="#9E9E9E"></rect>303 </svg>304 </div>305 <div class="bottom-icon">306 <!-- insert image placeholder -->307 <div style="font-size:26px;">[IMG]</div>308 </div>309 <div class="bottom-icon">Aa</div>310 <div class="bottom-icon">311 <!-- list icon -->312 <svg width="70" height="70" viewBox="0 0 70 70">313 <rect x="10" y="14" width="46" height="6" fill="#8A8A8A"></rect>314 <rect x="10" y="30" width="46" height="6" fill="#8A8A8A"></rect>315 <rect x="10" y="46" width="46" height="6" fill="#8A8A8A"></rect>316 </svg>317 </div>318 <div class="bottom-icon">319 <!-- pen icon -->320 <svg width="60" height="60" viewBox="0 0 60 60">321 <path d="M14 44 L26 32 L42 16 L48 22 L32 38 L20 50 Z" fill="#8A8A8A"></path>322 </svg>323 </div>324 <div class="bottom-icon">325 <!-- image icon -->326 <svg width="70" height="70" viewBox="0 0 70 70">327 <rect x="8" y="12" width="54" height="46" fill="none" stroke="#8A8A8A" stroke-width="3"></rect>328 <circle cx="24" cy="28" r="6" fill="#8A8A8A"></circle>329 <path d="M14 52 L34 36 L46 48 L62 52 Z" fill="#8A8A8A"></path>330 </svg>331 </div>332 <div class="bottom-icon" style="background:#EFEFEF;">333 <!-- plus icon -->334 <svg width="50" height="50" viewBox="0 0 50 50">335 <path d="M25 10 V40 M10 25 H40" stroke="#707070" stroke-width="5" stroke-linecap="round"></path>336 </svg>337 </div>338 <div class="bottom-icon">339 <!-- comment icon -->340 <svg width="60" height="60" viewBox="0 0 60 60">341 <rect x="8" y="10" width="44" height="30" rx="6" fill="none" stroke="#888" stroke-width="3"></rect>342 <polygon points="20,40 26,40 22,50" fill="#888"></polygon>343 </svg>344 </div>345 <div class="bottom-icon">346 <!-- smiley -->347 <svg width="60" height="60" viewBox="0 0 60 60">348 <circle cx="30" cy="30" r="22" fill="none" stroke="#888" stroke-width="3"></circle>349 <circle cx="22" cy="26" r="3" fill="#888"></circle>350 <circle cx="38" cy="26" r="3" fill="#888"></circle>351 <path d="M20 36 C24 42 36 42 40 36" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round"></path>352 </svg>353 </div>354 </div>355 356 <!-- Android navigation pill -->357 <div class="nav-pill"></div>358</div>359</body>360</html>