GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Find Tasks UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#222527; color:#fff;11 }12 13 /* Top status bar */14 .status-bar {15 height:110px; background:#4589e6; display:flex; align-items:center;16 padding:0 30px; font-weight:600; font-size:40px; color:#ffffff;17 }18 .status-right { margin-left:auto; display:flex; gap:24px; align-items:center; }19 .status-icon svg { width:42px; height:42px; fill:#fff; }20 21 /* App bar */22 .app-bar {23 height:160px; background:#5da0f0; position:relative; display:flex; align-items:center;24 padding:0 24px;25 }26 .back-btn {27 width:90px; height:90px; display:flex; align-items:center; justify-content:center;28 }29 .back-btn svg { width:56px; height:56px; stroke:#fff; stroke-width:8; fill:none; }30 .title-area { margin-left:12px; }31 .title {32 font-size:56px; font-weight:600; line-height:1;33 }34 .title-underline {35 height:4px; width:540px; background:#7fb3f4; margin-top:18px;36 }37 .actions { margin-left:auto; display:flex; gap:26px; padding-right:20px; }38 .circle-action {39 width:88px; height:88px; border-radius:44px; border:3px solid #ffffff88;40 display:flex; align-items:center; justify-content:center;41 }42 .circle-action svg { width:48px; height:48px; stroke:#fff; stroke-width:6; fill:none; }43 44 /* Sections and cards */45 .content { padding-top:0; }46 .section-header {47 height:86px; display:flex; align-items:center; padding:0 30px; font-size:44px; font-weight:700;48 }49 .hdr-red { background:#e74c3c; }50 .hdr-yellow { background:#f1c40f; color:#333; }51 .hdr-blue { background:#62a3ff; }52 53 .task-card {54 background:#33373b; margin:0; padding:28px 30px 26px 30px; position:relative;55 border-bottom:2px solid #2b2f33;56 }57 .task-title { font-size:54px; font-weight:700; margin-bottom:24px; }58 .row { display:flex; align-items:center; gap:18px; color:#d6d6d6; font-size:36px; margin:8px 0; }59 .row .spacer { margin-left:12px; margin-right:12px; opacity:.6; }60 .meta { color:#b0b0b0; font-size:36px; }61 .icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; }62 .icon svg { width:42px; height:42px; fill:none; stroke:#cfcfcf; stroke-width:5; }63 .chevron {64 position:absolute; right:30px; top:36px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; opacity:.8;65 }66 .chevron svg { width:44px; height:44px; stroke:#bfbfbf; stroke-width:8; fill:none; }67 .missed { position:absolute; right:96px; bottom:26px; color:#ff6b6b; font-size:34px; }68 69 /* Keyboard mock */70 .keyboard {71 position:absolute; left:0; right:0; bottom:90px; height:700px; background:#121315;72 border-top:2px solid #0d0e10; padding:20px 24px;73 }74 .kbd-tools { display:flex; gap:22px; margin-bottom:18px; }75 .tool {76 width:92px; height:92px; background:#1c1e21; border-radius:20px; border:1px solid #2a2d31;77 display:flex; align-items:center; justify-content:center; color:#ddd; font-size:34px;78 }79 80 .key-row { display:grid; gap:14px; margin:16px 0; }81 .row-10 { grid-template-columns:repeat(10, 1fr); }82 .row-9 { grid-template-columns:repeat(9, 1fr); }83 .row-8 { grid-template-columns:repeat(8, 1fr); }84 85 .key {86 background:#1e2124; border:1px solid #2a2d31; color:#eaeaea; height:110px; border-radius:18px;87 display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:600;88 }89 .key.wide { grid-column:span 2; }90 .key.space { grid-column:span 5; }91 92 /* Bottom home indicator */93 .home-indicator {94 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);95 width:520px; height:12px; border-radius:6px; background:#e5e5e5;96 opacity:.9;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div>9:11</div>106 <div class="status-right">107 <div class="status-icon">108 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z"/></svg>109 </div>110 <div class="status-icon">111 <svg viewBox="0 0 24 24"><path d="M3 12h18M6 16h12" stroke="#fff"/></svg>112 </div>113 <div class="status-icon">114 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2"/><rect x="18" y="8" width="3" height="8" fill="#fff"/></svg>115 </div>116 </div>117 </div>118 119 <!-- App bar -->120 <div class="app-bar">121 <div class="back-btn">122 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>123 </div>124 <div class="title-area">125 <div class="title">Find Tasks</div>126 <div class="title-underline"></div>127 </div>128 <div class="actions">129 <div class="circle-action">130 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 6v4M12 12l3 2"/></svg>131 </div>132 <div class="circle-action">133 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M7 12l3 3 7-7"/></svg>134 </div>135 </div>136 </div>137 138 <div class="content">139 140 <!-- Overdue -->141 <div class="section-header hdr-red">Overdue</div>142 <div class="task-card">143 <div class="task-title">Call Janet</div>144 <div class="row">145 <div class="icon">146 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/></svg>147 </div>148 <div>03:30 PM</div>149 <span class="spacer">•</span>150 <div class="icon">151 <svg viewBox="0 0 24 24"><path d="M7 7l-3 3 3 3M17 17l3-3-3-3" /></svg>152 </div>153 <div>S</div>154 </div>155 <div class="row meta">156 <div class="icon">157 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M4 9h16"/></svg>158 </div>159 <div>Sun, Sep 03, 2023</div>160 </div>161 <div class="chevron">162 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>163 </div>164 <div class="missed">(Missed)</div>165 </div>166 167 <!-- Today -->168 <div class="section-header hdr-red">Today</div>169 <div class="task-card">170 <div class="task-title">Yoga classes</div>171 <div class="row">172 <div class="icon">173 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/></svg>174 </div>175 <div>11:00 AM</div>176 <span class="spacer">•</span>177 <div>1 day</div>178 </div>179 <div class="row meta">180 <div class="icon">181 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M4 9h16"/></svg>182 </div>183 <div>Thu, Aug 31, 2023</div>184 </div>185 <div class="chevron">186 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>187 </div>188 </div>189 190 <!-- Tomorrow -->191 <div class="section-header hdr-yellow">Tomorrow</div>192 <div class="task-card">193 <div class="task-title">Catch Subway</div>194 <div class="row">195 <div class="icon">196 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/></svg>197 </div>198 <div>08:00 AM</div>199 <span class="spacer">•</span>200 <div>1 day</div>201 </div>202 <div class="row meta">203 <div class="icon">204 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M4 9h16"/></svg>205 </div>206 <div>Fri, Sep 01, 2023</div>207 </div>208 <div class="chevron">209 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>210 </div>211 </div>212 213 <!-- Next 7 days -->214 <div class="section-header hdr-blue">Next 7 days</div>215 <div class="task-card">216 <div class="task-title">Visit Mom at Arizona</div>217 <div class="row">218 <div class="icon">219 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/></svg>220 </div>221 <div>11:30 AM</div>222 <span class="spacer">•</span>223 <div>Once</div>224 </div>225 <div class="chevron">226 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>227 </div>228 </div>229 230 </div>231 232 <!-- Keyboard mock -->233 <div class="keyboard">234 <div class="kbd-tools">235 <div class="tool">⌘</div>236 <div class="tool">🙂</div>237 <div class="tool">GIF</div>238 <div class="tool">Gᵗʳ</div>239 <div class="tool">⚙️</div>240 <div class="tool">🎨</div>241 <div class="tool">🎙️</div>242 </div>243 244 <div class="key-row row-10">245 <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>246 <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>247 </div>248 <div class="key-row row-9">249 <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>250 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>251 </div>252 <div class="key-row row-8">253 <div class="key wide">⇧</div><div class="key">Z</div><div class="key">X</div><div class="key">C</div>254 <div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>255 </div>256 <div class="key-row row-10">257 <div class="key">?123</div>258 <div class="key">,</div>259 <div class="key">🙂</div>260 <div class="key space">Space</div>261 <div class="key">.</div>262 <div class="key wide">⌫</div>263 <div class="key wide">🔎</div>264 </div>265 </div>266 267 <div class="home-indicator"></div>268</div>269</body>270</html>