GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status/header area */16 .top-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 180px;22 background: #978F8C; /* warm grey like screenshot */23 color: #FFFFFF;24 }25 .status-row {26 height: 70px;27 display: flex;28 align-items: center;29 padding: 0 36px;30 font-size: 36px;31 letter-spacing: 0.2px;32 opacity: 0.95;33 }34 .status-row .spacer { flex: 1; }35 .toolbar-row {36 height: 110px;37 display: flex;38 align-items: center;39 padding: 0 36px;40 gap: 30px;41 }42 .toolbar-row .done {43 font-size: 44px;44 font-weight: 600;45 }46 .icon-btn {47 width: 64px; height: 64px;48 display: inline-flex;49 align-items: center; justify-content: center;50 border-radius: 14px;51 }52 .page-chip {53 border: 2px solid #D9D4D2;54 color: #2b2b2b;55 background: #ffffff;56 width: 64px; height: 64px;57 border-radius: 8px;58 display: inline-flex;59 align-items: center; justify-content: center;60 font-weight: 600;61 font-size: 32px;62 margin-left: 10px;63 }64 .close-btn {65 margin-left: auto;66 width: 72px; height: 72px;67 display: flex; align-items: center; justify-content: center;68 }69 70 /* Document area */71 .doc-area {72 position: absolute;73 top: 180px;74 left: 0;75 width: 1080px;76 height: 1460px;77 background: #ffffff;78 }79 80 /* Bottom AI panel */81 .ai-panel {82 position: absolute;83 bottom: 100px;84 left: 0;85 width: 1080px;86 height: 760px;87 background: #ffffff;88 border-top-left-radius: 40px;89 border-top-right-radius: 40px;90 box-shadow: 0 -20px 40px rgba(144, 114, 173, 0.25);91 border: 1px solid rgba(180, 160, 220, 0.25);92 }93 .ai-panel::before {94 content: "";95 position: absolute;96 top: -40px; left: -40px; right: -40px; height: 80px;97 background: radial-gradient(ellipse at center, rgba(186,160,255,0.25) 0%, rgba(255,255,255,0) 70%);98 filter: blur(10px);99 }100 .ai-header {101 position: relative;102 height: 90px;103 display: flex;104 align-items: center;105 justify-content: center;106 }107 .sparkle {108 width: 64px; height: 64px;109 display: flex; align-items: center; justify-content: center;110 }111 .panel-close {112 position: absolute;113 right: 30px; top: 18px;114 width: 64px; height: 64px;115 display: flex; align-items: center; justify-content: center;116 }117 .section {118 padding: 10px 40px;119 }120 .row {121 display: flex; align-items: center;122 gap: 20px;123 color: #3b3b3b;124 }125 .row .label {126 font-size: 42px;127 font-weight: 600;128 }129 .row .arrow {130 margin-left: auto;131 }132 133 .cards {134 display: flex;135 flex-wrap: wrap;136 padding: 20px 24px;137 gap: 24px;138 }139 .card {140 width: calc(50% - 24px);141 min-height: 160px;142 border: 2px solid #E5DDF6;143 border-radius: 24px;144 padding: 28px 26px;145 box-sizing: border-box;146 background: #FBFAFF;147 }148 .card .title {149 font-size: 40px;150 color: #362C53;151 font-weight: 700;152 margin-bottom: 14px;153 }154 .card .subtitle {155 font-size: 30px;156 color: #7A7A7A;157 }158 159 .more-row {160 text-align: center;161 font-size: 34px;162 color: #6F69A8;163 font-weight: 600;164 margin-top: 10px;165 }166 .more-row svg { vertical-align: middle; }167 168 /* Gesture bar */169 .gesture {170 position: absolute;171 bottom: 24px;172 left: 50%;173 transform: translateX(-50%);174 width: 360px; height: 10px;175 background: #A9A6A3;176 border-radius: 8px;177 opacity: 0.7;178 }179 180 /* Icon coloring */181 svg { fill: none; }182 .white-stroke svg path { stroke: #FFFFFF; }183 .dark-stroke svg path { stroke: #3B3B3B; }184 .purple-stroke svg path { stroke: #7D5AC6; }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Top status + toolbar -->191 <div class="top-bar">192 <div class="status-row">193 <div>9:38</div>194 <div class="spacer"></div>195 <!-- status icons -->196 <div class="icon-btn white-stroke">197 <svg width="32" height="32" viewBox="0 0 24 24">198 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z" stroke-width="1.5"/>199 <path d="M12 16v-4" stroke-width="1.5"/>200 </svg>201 </div>202 <div class="icon-btn white-stroke" style="opacity:0.9;">203 <!-- WiFi -->204 <svg width="32" height="32" viewBox="0 0 24 24">205 <path d="M3 9c4.4-3.7 13.6-3.7 18 0" stroke-width="1.5"/>206 <path d="M6 12c3.1-2.6 8.9-2.6 12 0" stroke-width="1.5"/>207 <path d="M9.5 15.5c1.4-1 3.6-1 5 0" stroke-width="1.5"/>208 <path d="M12 19h0" stroke-width="2" stroke-linecap="round"/>209 </svg>210 </div>211 <div class="icon-btn white-stroke" style="opacity:0.9;">212 <!-- Battery -->213 <svg width="38" height="32" viewBox="0 0 28 16">214 <rect x="1" y="3" width="22" height="10" rx="2" stroke-width="1.5"></rect>215 <rect x="3.5" y="5" width="14" height="6" rx="1" fill="#FFFFFF" stroke="none"></rect>216 <rect x="24" y="6" width="3" height="4" rx="1" stroke-width="1.5"></rect>217 </svg>218 </div>219 <div style="font-size:34px; margin-left:8px; opacity:0.95;">86%</div>220 </div>221 222 <div class="toolbar-row">223 <div class="done">Done</div>224 <!-- Save icon -->225 <div class="icon-btn white-stroke" title="Save">226 <svg width="36" height="36" viewBox="0 0 24 24">227 <path d="M4 4h12l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4z" stroke-width="1.5"/>228 <path d="M7 4v6h10V6" stroke-width="1.5"/>229 <path d="M8 18h8" stroke-width="1.5"/>230 </svg>231 </div>232 <!-- Undo -->233 <div class="icon-btn white-stroke" title="Undo">234 <svg width="36" height="36" viewBox="0 0 24 24">235 <path d="M7 7l-4 4 4 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>236 <path d="M20 11c-4-4-9-4-13 0" stroke-width="1.5" stroke-linecap="round"/>237 </svg>238 </div>239 <!-- Redo -->240 <div class="icon-btn white-stroke" title="Redo">241 <svg width="36" height="36" viewBox="0 0 24 24">242 <path d="M17 7l4 4-4 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>243 <path d="M4 11c4-4 9-4 13 0" stroke-width="1.5" stroke-linecap="round"/>244 </svg>245 </div>246 247 <div class="page-chip">1</div>248 249 <div class="close-btn white-stroke" title="Close">250 <svg width="42" height="42" viewBox="0 0 24 24">251 <path d="M5 5l14 14M19 5L5 19" stroke-width="1.8" stroke-linecap="round"/>252 </svg>253 </div>254 </div>255 </div>256 257 <!-- White document area (blank page) -->258 <div class="doc-area">259 <!-- Placeholder for the page content -->260 </div>261 262 <!-- Bottom assistant panel -->263 <div class="ai-panel">264 <div class="ai-header">265 <div class="sparkle purple-stroke">266 <svg width="40" height="40" viewBox="0 0 24 24">267 <path d="M12 3l1.5 3.5L17 8l-3.5 1.5L12 13l-1.5-3.5L7 8l3.5-1.5L12 3z" stroke-width="1.4" stroke-linejoin="round"/>268 <path d="M19 16l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8.8-2z" stroke-width="1.4" stroke-linejoin="round"/>269 </svg>270 </div>271 <div class="panel-close dark-stroke">272 <svg width="32" height="32" viewBox="0 0 24 24">273 <path d="M5 5l14 14M19 5L5 19" stroke-width="1.8" stroke-linecap="round"/>274 </svg>275 </div>276 </div>277 278 <div class="section">279 <div class="row">280 <div class="dark-stroke" style="width:56px; height:56px; display:flex; align-items:center; justify-content:center;">281 <!-- Chat bubble -->282 <svg width="40" height="40" viewBox="0 0 24 24">283 <path d="M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" stroke-width="1.5" stroke-linejoin="round"/>284 </svg>285 </div>286 <div class="label">Chat</div>287 </div>288 </div>289 290 <div class="section" style="padding-top: 6px;">291 <div class="row">292 <div class="dark-stroke" style="width:56px; height:56px; display:flex; align-items:center; justify-content:center;">293 <!-- Pen icon -->294 <svg width="38" height="38" viewBox="0 0 24 24">295 <path d="M3 17l2.5.5L17.5 6a2 2 0 0 0 0-2.8l-.7-.7a2 2 0 0 0-2.8 0L2 14.5 3 17z" stroke-width="1.5" stroke-linejoin="round"/>296 <path d="M14 4l6 6" stroke-width="1.5" stroke-linecap="round"/>297 </svg>298 </div>299 <div class="label">Write</div>300 <div class="arrow dark-stroke">301 <svg width="32" height="32" viewBox="0 0 24 24">302 <path d="M9 6l6 6-6 6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 </div>306 </div>307 308 <div class="cards">309 <div class="card">310 <div class="title">Brainstorm</div>311 <div class="subtitle">Unleashing Creative Potential</div>312 </div>313 <div class="card">314 <div class="title">Outline</div>315 <div class="subtitle">Structuring Ideas Efficiently</div>316 </div>317 <div class="card">318 <div class="title">To-do list</div>319 <div class="subtitle">Efficient Task Management</div>320 </div>321 <div class="card">322 <div class="title">Pros and cons list</div>323 <div class="subtitle">Evaluating Options Effectively</div>324 </div>325 <div class="card">326 <div class="title">Meeting agenda</div>327 <div class="subtitle">Effective Meeting Planning</div>328 </div>329 <div class="card">330 <div class="title">Press release</div>331 <div class="subtitle">Announcing Latest Updates</div>332 </div>333 </div>334 335 <div class="more-row">336 More337 <svg width="28" height="28" viewBox="0 0 24 24">338 <path d="M9 6l6 6-6 6" stroke="#6F69A8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>339 </svg>340 </div>341 </div>342 343 <div class="gesture"></div>344</div>345</body>346</html>