GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Welcome</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #0b0b0b;14 color: #e6e6e6;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 100px;25 color: #f5f5f5;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 box-sizing: border-box;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-left { display:flex; align-items:center; gap:20px; }35 .status-right { display:flex; align-items:center; gap:26px; }36 .chip { color:#bdbdbd; font-weight:600; }37 .icon {38 width: 40px; height: 40px;39 display:inline-block;40 }41 .wifi svg, .battery svg { fill:#f5f5f5; }42 43 /* App header */44 .app-header {45 position: absolute;46 top: 120px;47 left: 24px;48 right: 24px;49 height: 100px;50 display: flex;51 align-items: center;52 justify-content: space-between;53 }54 .header-left { display:flex; align-items:center; gap:26px; }55 .back-btn {56 width: 64px; height:64px; display:flex; align-items:center; justify-content:center;57 }58 .title {59 display:flex; align-items:center; gap:20px;60 font-size: 54px; font-weight: 700;61 }62 .title .wave { font-size:56px; }63 .title .chev { width:32px; height:32px; margin-left:6px; }64 .kebab { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; }65 66 /* Date row */67 .date-row {68 position: absolute;69 top: 260px;70 left: 36px;71 right: 36px;72 height: 80px;73 display:flex;74 align-items:center;75 justify-content: space-between;76 }77 .date-left { display:flex; align-items:center; gap:20px; }78 .date-text { color:#4aa3ff; font-size:44px; font-weight:600; }79 .date-icon { width:46px; height:46px; }80 .small-red {81 width:50px; height:50px; display:flex; align-items:center; justify-content:center;82 }83 /* Title section */84 .page-title {85 position: absolute;86 top: 360px;87 left: 36px;88 right: 36px;89 font-size: 66px;90 font-weight: 800;91 color:#dcdcdc;92 }93 94 /* Item input row */95 .input-row {96 position: absolute;97 top: 560px;98 left: 36px;99 right: 36px;100 height: 140px;101 display:flex;102 align-items:center;103 justify-content: space-between;104 border-bottom: 2px solid #1f1f1f;105 }106 .check {107 width: 64px; height:64px; border:3px solid #6b6b6b; border-radius:8px;108 }109 .placeholder {110 flex: 1;111 margin: 0 30px;112 color:#7a7a7a;113 font-size: 42px;114 }115 .sliders { width: 70px; height: 70px; }116 117 /* Bottom sheet */118 .sheet {119 position: absolute;120 left: 0;121 right: 0;122 bottom: 0;123 height: 980px;124 background: #161616;125 border-top-left-radius: 24px;126 border-top-right-radius: 24px;127 box-shadow: 0 -8px 24px rgba(0,0,0,0.6);128 padding: 40px 36px 140px;129 box-sizing: border-box;130 }131 .handle {132 position:absolute; top: 16px; left:50%; transform:translateX(-50%);133 width: 180px; height: 16px; border-radius: 10px; background:#2e2e2e;134 }135 136 .action-grid {137 display: grid;138 grid-template-columns: repeat(4, 1fr);139 gap: 24px;140 margin-top: 40px;141 }142 .action {143 background:#1f1f1f;144 border-radius: 18px;145 height: 180px;146 display:flex; flex-direction:column;147 align-items:center; justify-content:center;148 gap: 16px;149 box-shadow: inset 0 0 0 1px #2b2b2b;150 }151 .action-label { font-size:38px; color:#d9d9d9; font-weight:600; }152 153 .list {154 margin-top: 36px;155 background:#1a1a1a;156 border-radius: 18px;157 padding: 24px;158 box-shadow: inset 0 0 0 1px #2b2b2b;159 }160 .list-row {161 display:flex; align-items:center; gap:24px;162 padding: 26px 12px;163 border-radius: 12px;164 font-size:42px;165 color:#e0e0e0;166 }167 .list-row + .list-row { border-top: 1px solid #262626; }168 .list .icon-gray svg { fill:#b5b5b5; }169 170 .copy-box {171 margin-top: 28px;172 background:#1a1a1a;173 border-radius: 18px;174 padding: 26px;175 box-shadow: inset 0 0 0 1px #2b2b2b;176 display:flex; align-items:center; gap:24px;177 font-size:44px; color:#eaeaea;178 }179 .copy-box .icon-gray svg { fill:#bfbfbf; }180 181 /* Bottom gesture bar */182 .gesture-bar {183 position: absolute;184 bottom: 20px;185 left: 50%;186 transform: translateX(-50%);187 width: 560px;188 height: 14px;189 background: #cfcfcf;190 border-radius: 10px;191 opacity: 0.35;192 }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Status bar -->199 <div class="status-bar">200 <div class="status-left">201 <div class="chip">1:43</div>202 <div class="chip">👻</div>203 <div class="chip">34°</div>204 </div>205 <div class="status-right">206 <div class="wifi icon">207 <svg viewBox="0 0 24 24">208 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM2.5 9.5c5.3-4.7 13.7-4.7 19 0l-2 2c-4.5-3.9-10.5-3.9-15 0l-2-2zm4 4c3.6-3.2 9.4-3.2 13 0l-2 2c-2.8-2.4-6.2-2.4-9 0l-2-2z"/>209 </svg>210 </div>211 <div class="battery icon">212 <svg viewBox="0 0 28 24">213 <rect x="2" y="6" width="20" height="12" rx="2"></rect>214 <rect x="4" y="8" width="14" height="8" fill="#9fe59f"></rect>215 <rect x="22" y="9" width="4" height="6" rx="1"></rect>216 </svg>217 </div>218 </div>219 </div>220 221 <!-- App Header -->222 <div class="app-header">223 <div class="header-left">224 <div class="back-btn">225 <svg width="56" height="56" viewBox="0 0 24 24" fill="#eaeaea">226 <path d="M15 18l-6-6 6-6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>227 </svg>228 </div>229 <div class="title">230 <span class="wave">👋</span>231 <span>Welcome</span>232 <svg class="chev" viewBox="0 0 24 24" fill="#bdbdbd">233 <path d="M7 9l5 6 5-6"></path>234 </svg>235 </div>236 </div>237 <div class="kebab">238 <svg width="40" height="40" viewBox="0 0 24 24" fill="#bdbdbd">239 <circle cx="12" cy="5" r="2"></circle>240 <circle cx="12" cy="12" r="2"></circle>241 <circle cx="12" cy="19" r="2"></circle>242 </svg>243 </div>244 </div>245 246 <!-- Date Row -->247 <div class="date-row">248 <div class="date-left">249 <div class="date-icon">250 <svg viewBox="0 0 24 24" fill="#c4c4c4">251 <rect x="3" y="5" width="18" height="16" rx="2" fill="#3a3a3a"></rect>252 <rect x="3" y="8" width="18" height="3" fill="#555"></rect>253 <rect x="6" y="12" width="3" height="3" fill="#777"></rect>254 <rect x="11" y="12" width="3" height="3" fill="#777"></rect>255 <rect x="16" y="12" width="3" height="3" fill="#777"></rect>256 </svg>257 </div>258 <div class="date-text">Fri, Aug 4</div>259 </div>260 <div class="small-red">261 <svg width="48" height="48" viewBox="0 0 24 24" fill="#d96a5c">262 <rect x="4" y="6" width="16" height="12" rx="2" fill="#a33a2a"></rect>263 <rect x="6" y="8" width="12" height="2" fill="#d96a5c"></rect>264 <rect x="6" y="12" width="12" height="2" fill="#d96a5c"></rect>265 </svg>266 </div>267 </div>268 269 <!-- Page Title -->270 <div class="page-title">Meeting update</div>271 272 <!-- Input Row -->273 <div class="input-row">274 <div class="check"></div>275 <div class="placeholder">Tap "Enter" to create an item</div>276 <div class="sliders">277 <svg viewBox="0 0 24 24" fill="#bdbdbd">278 <rect x="4" y="6" width="16" height="2"></rect>279 <circle cx="9" cy="7" r="2" fill="#d0d0d0"></circle>280 <rect x="4" y="12" width="16" height="2"></rect>281 <circle cx="15" cy="13" r="2" fill="#d0d0d0"></circle>282 </svg>283 </div>284 </div>285 286 <!-- Bottom Sheet -->287 <div class="sheet">288 <div class="handle"></div>289 290 <div class="action-grid">291 <div class="action">292 <svg width="64" height="64" viewBox="0 0 24 24">293 <path d="M7 7l5-2 5 2-5 2-5-2zm5 2v8" stroke="#f4b400" stroke-width="2" fill="none" stroke-linecap="round"></path>294 </svg>295 <div class="action-label">Pin</div>296 </div>297 <div class="action">298 <svg width="64" height="64" viewBox="0 0 24 24">299 <path d="M12 5l6 6-6 6" stroke="#2ecc71" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>300 <rect x="4" y="7" width="6" height="10" rx="2" fill="#2ecc71" opacity="0.2"></rect>301 </svg>302 <div class="action-label">Share</div>303 </div>304 <div class="action">305 <svg width="64" height="64" viewBox="0 0 24 24">306 <rect x="4" y="4" width="16" height="16" rx="4" fill="#274bff" opacity="0.15"></rect>307 <path d="M8 8l8 8M16 8l-8 8" stroke="#4f73ff" stroke-width="2"></path>308 </svg>309 <div class="action-label">Won't Do</div>310 </div>311 <div class="action">312 <svg width="64" height="64" viewBox="0 0 24 24">313 <path d="M6 7h12l-1 12H7L6 7zm2-3h8l1 3H7l1-3z" fill="#e74c3c"></path>314 </svg>315 <div class="action-label">Delete</div>316 </div>317 </div>318 319 <div class="list">320 <div class="list-row">321 <div class="icon-gray">322 <svg width="48" height="48" viewBox="0 0 24 24">323 <path d="M5 6h14v2H5zm0 5h10v2H5zm0 5h6v2H5z" />324 </svg>325 </div>326 <div>Add Subtask</div>327 </div>328 <div class="list-row">329 <div class="icon-gray">330 <svg width="48" height="48" viewBox="0 0 24 24">331 <path d="M4 5h16v10H7l-3 4V5z" />332 </svg>333 </div>334 <div>Comment</div>335 </div>336 <div class="list-row">337 <div class="icon-gray">338 <svg width="48" height="48" viewBox="0 0 24 24">339 <path d="M6 7c4-4 10 2 6 6l-4 4c-4-4-10-2-6-6l4-4z" />340 </svg>341 </div>342 <div>Attachment</div>343 </div>344 <div class="list-row">345 <div class="icon-gray">346 <svg width="48" height="48" viewBox="0 0 24 24">347 <path d="M14 3l7 7-9 9H5V12l9-9z" />348 </svg>349 </div>350 <div>Tags</div>351 </div>352 <div class="list-row">353 <div class="icon-gray">354 <svg width="48" height="48" viewBox="0 0 24 24">355 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />356 </svg>357 </div>358 <div>Location</div>359 </div>360 </div>361 362 <div class="copy-box">363 <div class="icon-gray">364 <svg width="48" height="48" viewBox="0 0 24 24">365 <path d="M8 7h8a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3zm2-3h6a3 3 0 0 1 3 3v1" stroke="#bfbfbf" stroke-width="1.6" fill="none"/>366 </svg>367 </div>368 <div>Copy Link</div>369 </div>370 371 </div>372 373 <!-- Bottom gesture bar -->374 <div class="gesture-bar"></div>375</div>376</body>377</html>