GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 88px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 box-sizing: border-box;29 color: #222;30 font-weight: 600;31 }32 .status-right {33 display: flex;34 gap: 18px;35 align-items: center;36 }37 .status-icon {38 width: 26px;39 height: 26px;40 border-radius: 4px;41 background: #111;42 }43 .signal { width: 22px; height: 22px; background: #4a4a4a; border-radius: 3px; }44 .wifi { width: 26px; height: 22px; background: #4a4a4a; border-radius: 3px; }45 .battery {46 width: 34px; height: 18px; border: 2px solid #4a4a4a; border-radius: 4px; position: relative;47 }48 .battery::after {49 content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: #4a4a4a; border-radius: 2px;50 }51 52 /* Content wrapper */53 .content {54 position: absolute;55 top: 88px;56 left: 0;57 width: 100%;58 box-sizing: border-box;59 padding: 24px 36px 220px 36px;60 }61 62 /* Search bar */63 .search-bar {64 width: 100%;65 height: 116px;66 background: #f3f5f7;67 border-radius: 30px;68 display: flex;69 align-items: center;70 padding: 0 36px;71 box-sizing: border-box;72 gap: 22px;73 }74 .search-input {75 font-size: 40px;76 color: #8d94a1;77 letter-spacing: 0.2px;78 }79 .search-icon {80 width: 48px; height: 48px;81 }82 83 /* Promo card */84 .promo-card {85 margin-top: 36px;86 background: #fff;87 border-radius: 28px;88 border: 1px solid #e8e9ed;89 box-shadow: 0 10px 30px rgba(20,20,20,0.06);90 padding: 40px;91 display: flex;92 align-items: center;93 justify-content: space-between;94 }95 .promo-text {96 max-width: 620px;97 }98 .promo-title {99 font-size: 50px;100 line-height: 1.2;101 font-weight: 700;102 color: #111;103 }104 .promo-actions {105 margin-top: 26px;106 }107 .btn {108 display: inline-flex;109 padding: 24px 30px;110 border-radius: 999px;111 background: #2f7af7;112 color: #fff;113 font-weight: 700;114 font-size: 38px;115 box-shadow: 0 6px 16px rgba(47,122,247,0.35);116 }117 .promo-image {118 width: 320px;119 height: 200px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 border-radius: 24px;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 text-align: center;128 font-size: 34px;129 padding: 10px;130 }131 132 /* Section titles */133 .section-title {134 margin-top: 48px;135 font-size: 64px;136 font-weight: 800;137 letter-spacing: 0.4px;138 }139 140 /* List grid */141 .grid {142 margin-top: 22px;143 display: grid;144 grid-template-columns: 1fr 1fr;145 gap: 30px;146 }147 .card {148 background: #fff;149 border-radius: 28px;150 border: 1px solid #e9eaee;151 height: 330px;152 padding: 40px;153 position: relative;154 box-shadow: 0 8px 26px rgba(20,20,20,0.05);155 }156 .card-title {157 font-size: 54px;158 font-weight: 600;159 }160 .badge {161 position: absolute;162 top: 26px;163 right: 26px;164 width: 68px;165 height: 68px;166 border-radius: 34px;167 background: #f3f5f7;168 color: #333;169 display: flex;170 align-items: center;171 justify-content: center;172 font-weight: 700;173 font-size: 34px;174 border: 1px solid #e0e3e8;175 }176 .icon-basket {177 position: absolute;178 right: 40px;179 bottom: 40px;180 width: 64px;181 height: 64px;182 }183 .plus-card {184 display: flex;185 align-items: center;186 justify-content: center;187 }188 .plus-icon {189 width: 92px; height: 92px;190 }191 192 /* Workspace area */193 .workspace-header {194 display: flex;195 align-items: center;196 gap: 18px;197 margin-top: 40px;198 }199 .pill {200 font-size: 28px;201 font-weight: 800;202 color: #fff;203 background: #2f7af7;204 padding: 12px 20px;205 border-radius: 999px;206 box-shadow: 0 6px 16px rgba(47,122,247,0.35);207 }208 .workspace-sub {209 margin-top: 12px;210 color: #6e7685;211 font-size: 38px;212 line-height: 1.3;213 }214 .workspace-grid {215 margin-top: 24px;216 display: grid;217 grid-template-columns: 1fr 1fr;218 gap: 30px;219 }220 .workspace-large {221 width: 480px;222 height: 480px;223 border-radius: 28px;224 border: 1px solid #e9eaee;225 box-shadow: 0 8px 26px rgba(20,20,20,0.05);226 background: #fff;227 display: flex;228 align-items: center;229 justify-content: center;230 }231 232 /* Bottom nav */233 .bottom-nav {234 position: absolute;235 left: 36px;236 right: 36px;237 bottom: 140px;238 height: 180px;239 background: #fff;240 border: 1px solid #e9eaee;241 border-radius: 100px;242 box-shadow: 0 12px 34px rgba(20,20,20,0.08);243 display: flex;244 align-items: center;245 justify-content: space-around;246 padding: 0 20px;247 }248 .nav-item {249 display: flex;250 flex-direction: column;251 align-items: center;252 gap: 12px;253 color: #2f7af7;254 font-weight: 700;255 font-size: 36px;256 }257 .nav-icon {258 width: 72px; height: 72px;259 }260 261 /* Gesture bar */262 .gesture {263 position: absolute;264 bottom: 60px;265 left: 50%;266 transform: translateX(-50%);267 width: 320px; height: 12px;268 background: #444;269 border-radius: 8px;270 opacity: 0.4;271 }272</style>273</head>274<body>275<div id="render-target">276 277 <!-- Status Bar -->278 <div class="status-bar">279 <div class="status-left" style="display:flex; align-items:center; gap:16px;">280 <div style="font-size:42px;">3:44</div>281 </div>282 <div class="status-right">283 <div class="signal"></div>284 <div class="wifi"></div>285 <div class="battery"></div>286 </div>287 </div>288 289 <div class="content">290 <!-- Search Bar -->291 <div class="search-bar">292 <svg class="search-icon" viewBox="0 0 24 24">293 <circle cx="10" cy="10" r="7" stroke="#748092" stroke-width="2" fill="none"></circle>294 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#748092" stroke-width="2" stroke-linecap="round"></line>295 </svg>296 <div class="search-input">Search for tasks, events, etc...</div>297 </div>298 299 <!-- Promo Card -->300 <div class="promo-card">301 <div class="promo-text">302 <div class="promo-title">Bring your team's work to Any.do Workspace</div>303 <div class="promo-actions">304 <div class="btn">Try It Free</div>305 </div>306 </div>307 <div class="promo-image">[IMG: Team Avatars]</div>308 </div>309 310 <!-- My lists -->311 <div class="section-title">My lists</div>312 313 <div class="grid">314 <div class="card">315 <div class="card-title">Personal</div>316 <div class="badge">2</div>317 </div>318 <div class="card">319 <div class="card-title">Work</div>320 </div>321 <div class="card">322 <div class="card-title">Grocery List</div>323 <svg class="icon-basket" viewBox="0 0 24 24">324 <path d="M3 9h18l-2 10H5L3 9z" fill="none" stroke="#2f7af7" stroke-width="2" stroke-linejoin="round"></path>325 <path d="M7 9l4-5 4 5" fill="none" stroke="#2f7af7" stroke-width="2" stroke-linecap="round"></path>326 <circle cx="9" cy="19" r="1.8" fill="#2f7af7"></circle>327 <circle cx="15" cy="19" r="1.8" fill="#2f7af7"></circle>328 </svg>329 </div>330 <div class="card plus-card">331 <svg class="plus-icon" viewBox="0 0 24 24">332 <path d="M12 4v16M4 12h16" stroke="#2f7af7" stroke-width="2.5" stroke-linecap="round"></path>333 </svg>334 </div>335 </div>336 337 <!-- Workspace -->338 <div class="workspace-header">339 <div style="font-size:56px; font-weight:800;">Workspace</div>340 <div class="pill">TRY IT FREE</div>341 </div>342 <div class="workspace-sub">Easily manage your team's work with project boards, customized workflows and integrations</div>343 344 <div class="workspace-grid">345 <div class="workspace-large">346 <svg class="plus-icon" viewBox="0 0 24 24">347 <path d="M12 4v16M4 12h16" stroke="#2f7af7" stroke-width="2.5" stroke-linecap="round"></path>348 </svg>349 </div>350 <div class="workspace-large" style="opacity:0.2;">351 <!-- Empty right column to mirror layout spacing -->352 </div>353 </div>354 </div>355 356 <!-- Bottom Navigation -->357 <div class="bottom-nav">358 <div class="nav-item">359 <svg class="nav-icon" viewBox="0 0 24 24">360 <circle cx="12" cy="12" r="9" fill="none" stroke="#2f7af7" stroke-width="2"></circle>361 <circle cx="12" cy="12" r="3" fill="#2f7af7"></circle>362 </svg>363 <div>My Day</div>364 </div>365 <div class="nav-item">366 <svg class="nav-icon" viewBox="0 0 24 24">367 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#2f7af7" stroke-width="2"></rect>368 <line x1="7" y1="3" x2="7" y2="7" stroke="#2f7af7" stroke-width="2" stroke-linecap="round"></line>369 <line x1="17" y1="3" x2="17" y2="7" stroke="#2f7af7" stroke-width="2" stroke-linecap="round"></line>370 <text x="12" y="17" font-size="8" text-anchor="middle" fill="#2f7af7" font-weight="700">7</text>371 </svg>372 <div>Next 7 days</div>373 </div>374 <div class="nav-item">375 <svg class="nav-icon" viewBox="0 0 24 24">376 <circle cx="12" cy="12" r="9" fill="none" stroke="#2f7af7" stroke-width="2"></circle>377 <path d="M7 12l3 3 6-6" fill="none" stroke="#2f7af7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>378 </svg>379 <div>All Tasks</div>380 </div>381 <div class="nav-item">382 <svg class="nav-icon" viewBox="0 0 24 24">383 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#2f7af7" stroke-width="2"></rect>384 <line x1="7" y1="3" x2="7" y2="7" stroke="#2f7af7" stroke-width="2" stroke-linecap="round"></line>385 <line x1="17" y1="3" x2="17" y2="7" stroke="#2f7af7" stroke-width="2" stroke-linecap="round"></line>386 <line x1="3" y1="10" x2="21" y2="10" stroke="#2f7af7" stroke-width="2"></line>387 </svg>388 <div>Calendar</div>389 </div>390 </div>391 392 <!-- Gesture bar -->393 <div class="gesture"></div>394</div>395</body>396</html>