GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>New Task UI</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: #0b0b0b;13 color: #fff;14 }15 /* Status bar */16 .statusbar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 padding: 0 32px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #ffffff;28 font-size: 44px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 26px;35 font-size: 32px;36 opacity: 0.9;37 }38 .status-icon {39 width: 40px;40 height: 40px;41 border-radius: 6px;42 background: #1e1e1e;43 }44 45 /* App bar */46 .appbar {47 position: absolute;48 top: 120px;49 left: 0;50 width: 1080px;51 height: 140px;52 display: flex;53 align-items: center;54 padding: 0 32px;55 box-sizing: border-box;56 }57 .appbar .title {58 font-size: 62px;59 margin-left: 24px;60 }61 .appbar .right-icon {62 margin-left: auto;63 }64 .icon-btn {65 width: 72px;66 height: 72px;67 display: inline-flex;68 align-items: center;69 justify-content: center;70 }71 72 /* Labels */73 .section-label {74 position: absolute;75 left: 40px;76 font-size: 36px;77 color: #8ea6cf;78 letter-spacing: 1px;79 text-transform: uppercase;80 }81 82 /* Task card */83 .task-card {84 position: absolute;85 left: 32px;86 top: 360px;87 width: 1016px;88 height: 360px;89 background: #151515;90 border-radius: 28px;91 box-shadow: inset 0 0 0 1px #2a2a2a;92 padding: 36px;93 box-sizing: border-box;94 }95 .task-input {96 font-size: 48px;97 color: #e8e8e8;98 line-height: 1.2;99 padding-right: 100px;100 }101 .blue-underline {102 position: absolute;103 left: 36px;104 right: 36px;105 bottom: 104px;106 height: 8px;107 background: #5fa7ff;108 border-radius: 4px;109 }110 .mic-icon {111 position: absolute;112 right: 36px;113 top: 36px;114 }115 .notes-row {116 position: absolute;117 left: 36px;118 right: 36px;119 bottom: 24px;120 display: flex;121 align-items: center;122 justify-content: space-between;123 }124 .notes-link {125 font-size: 36px;126 color: #bfc9e6;127 text-decoration: underline;128 }129 130 /* Add to list dropdown */131 .dropdown-card {132 position: absolute;133 left: 32px;134 top: 840px;135 width: 1016px;136 height: 140px;137 background: #151515;138 border-radius: 24px;139 box-shadow: inset 0 0 0 1px #2a2a2a;140 display: flex;141 align-items: center;142 padding: 0 36px;143 box-sizing: border-box;144 color: #e8e8e8;145 font-size: 44px;146 gap: 24px;147 }148 .dropdown-line {149 position: absolute;150 left: 36px;151 right: 36px;152 bottom: 18px;153 height: 4px;154 background: #6f6f6f;155 border-radius: 2px;156 opacity: 0.6;157 }158 159 /* Buttons */160 .save-btn {161 position: absolute;162 left: 40px;163 top: 1310px;164 width: 320px;165 height: 120px;166 border-radius: 28px;167 background: #b7c6e7;168 color: #0b0b0b;169 display: flex;170 align-items: center;171 justify-content: center;172 gap: 18px;173 font-size: 44px;174 font-weight: bold;175 }176 .alarm-btn {177 position: absolute;178 right: 48px;179 top: 1320px;180 width: 160px;181 height: 160px;182 border-radius: 28px;183 background: #f5a7a7;184 display: flex;185 align-items: center;186 justify-content: center;187 }188 189 /* Keyboard */190 .keyboard {191 position: absolute;192 left: 0;193 bottom: 0;194 width: 1080px;195 height: 880px;196 background: #111111;197 box-shadow: 0 -4px 0 rgba(255,255,255,0.05) inset;198 }199 .suggestions {200 height: 120px;201 display: flex;202 align-items: center;203 padding: 0 24px;204 box-sizing: border-box;205 gap: 24px;206 color: #dcdcdc;207 font-size: 40px;208 }209 .chip {210 background: #1f1f1f;211 border-radius: 22px;212 padding: 14px 26px;213 border: 1px solid #2a2a2a;214 }215 .keys {216 padding: 18px 24px;217 box-sizing: border-box;218 }219 .row {220 display: flex;221 justify-content: center;222 gap: 16px;223 margin: 18px 0;224 }225 .key {226 width: 96px;227 height: 120px;228 background: #1a1a1a;229 border-radius: 18px;230 border: 1px solid #2a2a2a;231 color: #eee;232 font-size: 46px;233 display: flex;234 align-items: center;235 justify-content: center;236 }237 .key.wide { width: 140px; }238 .space { width: 480px; }239 .return {240 width: 120px;241 height: 120px;242 background: #2a2a2a;243 border-radius: 30px;244 }245 246 /* Gesture bar */247 .gesture-bar {248 position: absolute;249 bottom: 20px;250 left: 50%;251 transform: translateX(-50%);252 width: 400px;253 height: 10px;254 background: #eaeaea;255 border-radius: 8px;256 opacity: 0.8;257 }258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status bar -->264 <div class="statusbar">265 <div>12:53</div>266 <div class="status-icons">267 <div class="status-icon" title="Signal"></div>268 <div style="color:#bfbfbf;font-size:34px;">70°</div>269 <div class="status-icon" title="Wi‑Fi"></div>270 <div class="status-icon" title="Battery"></div>271 </div>272 </div>273 274 <!-- App bar -->275 <div class="appbar">276 <div class="icon-btn">277 <svg width="60" height="60" viewBox="0 0 24 24" fill="#ffffff">278 <path d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6z"/>279 </svg>280 </div>281 <div class="title">New task</div>282 <div class="right-icon icon-btn">283 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">284 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>285 </svg>286 </div>287 </div>288 289 <!-- Labels -->290 <div class="section-label" style="top: 300px;">TASK:</div>291 292 <!-- Task card -->293 <div class="task-card">294 <div class="task-input">Buy New Balance hiking shoes</div>295 <div class="mic-icon">296 <svg width="56" height="56" viewBox="0 0 24 24" fill="#a9c9ff">297 <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3s-3 1.3-3 3v5c0 1.7 1.3 3 3 3zm5-3c0 3.1-2.5 5.6-5.5 5.6S6 14.1 6 11H4c0 3.6 2.7 6.6 6.2 7.1V21h3.6v-2.9C17.3 17.6 20 14.6 20 11h-2z"/>298 </svg>299 </div>300 <div class="blue-underline"></div>301 <div class="notes-row">302 <div class="notes-link">Notes:</div>303 <div>304 <svg width="48" height="48" viewBox="0 0 24 24" fill="#bfc9e6">305 <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>306 </svg>307 </div>308 </div>309 </div>310 311 <div class="section-label" style="top: 780px;">ADD TO LIST:</div>312 313 <!-- Dropdown -->314 <div class="dropdown-card">315 <div>316 <svg width="54" height="54" viewBox="0 0 24 24" fill="#8ea6cf">317 <path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h14v2H3v-2z"/>318 </svg>319 </div>320 <div>Default</div>321 <div style="margin-left:auto;">322 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8e3">323 <path d="M7 10l5 5 5-5z"/>324 </svg>325 </div>326 <div class="dropdown-line"></div>327 </div>328 329 <!-- Save button -->330 <div class="save-btn">331 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0b0b0b">332 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19l10-10-1.4-1.4z"/>333 </svg>334 <span>Save</span>335 </div>336 337 <!-- Alarm/Reminder button -->338 <div class="alarm-btn">339 <svg width="76" height="76" viewBox="0 0 24 24" fill="#0b0b0b">340 <path d="M7.88 3.39L2 7l1.12 1.66 5.76-3.61L7.88 3.39zM16.12 3.39L15.12 5.05 20.88 8.66 22 7l-5.88-3.61zM12 7a7 7 0 100 14 7 7 0 000-14zm0 4a1 1 0 011 1v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0v-2H9a1 1 0 110-2h2v-2a1 1 0 011-1z"/>341 </svg>342 </div>343 344 <!-- Keyboard -->345 <div class="keyboard">346 <div class="suggestions">347 <div class="chip">shoes</div>348 <div class="chip">shows</div>349 <div class="chip">🧦</div>350 <div style="margin-left:auto;">351 <svg width="54" height="54" viewBox="0 0 24 24" fill="#cfd8e3">352 <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3s-3 1.3-3 3v5c0 1.7 1.3 3 3 3z"/>353 </svg>354 </div>355 </div>356 <div class="keys">357 <div class="row">358 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>359 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>360 <div class="key wide">⌫</div>361 </div>362 <div class="row">363 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>364 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>365 </div>366 <div class="row">367 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>368 <div class="key">n</div><div class="key">m</div>369 </div>370 <div class="row" style="gap:20px;">371 <div class="key wide">?123</div>372 <div class="key">,</div>373 <div class="key wide">😊</div>374 <div class="key space"></div>375 <div class="key">.</div>376 <div class="return">377 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">378 <path d="M10 19l7-7-7-7v4H4v6h6v4z"/>379 </svg>380 </div>381 </div>382 </div>383 <div class="gesture-bar"></div>384 </div>385 386 <!-- Section label positions -->387 <div class="section-label" style="top: 780px; visibility:hidden;">.</div>388 389</div>390</body>391</html>