GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1c1c1c; border-radius: 36px;12 color: #fff;13 }14 15 /* Top bars */16 .status-bar {17 height: 110px; background: #3e8eea; color: #fff; display: flex; align-items: center;18 padding: 0 30px; font-size: 38px; letter-spacing: 0.5px;19 }20 .status-left { flex: 0 0 auto; }21 .status-center { flex: 1; text-align: center; opacity: 0.9; }22 .status-right { flex: 0 0 auto; display: flex; gap: 22px; align-items: center; }23 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }24 25 .app-bar {26 height: 140px; background: #5aa6f8; display: flex; align-items: center; padding: 0 24px;27 position: relative;28 }29 .app-action { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }30 .app-action svg { width: 54px; height: 54px; stroke: #fff; fill: none; stroke-width: 5; }31 .app-title {32 font-size: 44px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;33 color: #fff; margin-left: 8px;34 }35 .app-actions-right { margin-left: auto; display: flex; gap: 26px; }36 .circle-icon { stroke: none !important; }37 .circle-icon circle { stroke: none; fill: transparent; }38 .circle-icon path { stroke: #fff; }39 40 /* Tooltip overlay */41 .tooltip {42 position: absolute; left: 180px; top: 220px; background: #505050; color: #fff;43 padding: 22px 26px; border-radius: 6px; box-shadow: 0 6px 12px rgba(0,0,0,0.6);44 font-size: 34px; max-width: 720px;45 }46 47 /* Sections and cards */48 .content { position: absolute; left: 0; right: 0; top: 250px; bottom: 900px; overflow: hidden; }49 .section-label {50 padding: 26px 30px; font-size: 42px; font-weight: 700;51 }52 .label-red { background: #d84343; }53 .label-red2 { background: #e44b49; }54 .label-yellow { background: #f2c04a; color: #1b1b1b; }55 .label-blue { background: #64a0ff; }56 .card {57 background: #2b2b2b; margin: 16px 0; padding: 26px 30px; border-radius: 8px;58 position: relative;59 }60 .card-title { font-size: 48px; font-weight: 600; margin-bottom: 18px; }61 .card-row { display: flex; align-items: center; gap: 16px; color: #c9c9c9; font-size: 34px; margin-bottom: 10px; }62 .mute { color: #b7b7b7; }63 .danger { color: #e76a5c; font-weight: 600; position: absolute; right: 28px; top: 36px; font-size: 34px; }64 .right-chevron { position: absolute; right: 28px; bottom: 34px; opacity: 0.7; }65 .icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }66 .icon svg { width: 36px; height: 36px; stroke: #cfcfcf; fill: none; stroke-width: 3; }67 68 /* Keyboard mock */69 #keyboard {70 position: absolute; left: 0; right: 0; bottom: 0; height: 900px; background: #121212; border-top: 1px solid #2a2a2a;71 }72 .suggestions {73 height: 110px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: #232323;74 color: #eaeaea; font-size: 34px;75 }76 .sugg-key { width: 72px; height: 72px; border-radius: 18px; background: #2e2e2e; display: flex; align-items: center; justify-content: center; }77 .pill {78 padding: 14px 20px; border-radius: 22px; background: #2e2e2e; border: 1px solid #3a3a3a;79 }80 .kb-row { display: flex; gap: 12px; padding: 16px 24px; }81 .key {82 flex: 1; height: 120px; background: #2d2d2d; border-radius: 22px; display: flex; align-items: center; justify-content: center;83 color: #f0f0f0; font-size: 44px; box-shadow: inset 0 0 0 1px #3a3a3a;84 }85 .key.small { flex: 0 0 88px; }86 .key.wide { flex: 2; }87 .space { flex: 6; font-size: 32px; color: #bfbfbf; }88 .accent { background: #a4f1ea; color: #132929; font-weight: 700; }89 .bottom-nav {90 position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px;91 width: 210px; height: 8px; background: #eaeaea; border-radius: 6px; opacity: 0.85;92 }93 .kb-emoji { width: 80px; height: 80px; border-radius: 18px; background: #2e2e2e; display: flex; align-items: center; justify-content: center; }94 .kb-emoji span { font-size: 40px; }95 96 /* Chevron icon in cards */97 .chev svg { width: 44px; height: 44px; stroke: #9e9e9e; stroke-width: 4; }98 99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status bar -->105 <div class="status-bar">106 <div class="status-left">9:12</div>107 <div class="status-center">• • •</div>108 <div class="status-right">109 <div class="status-icon">110 <svg viewBox="0 0 24 24"><path d="M2 18c4-4 8-6 12-6s8 2 8 2" /></svg>111 </div>112 <div class="status-icon">113 <svg viewBox="0 0 24 24"><path d="M2 18h20M6 18V6h12v12" /></svg>114 </div>115 <div class="status-icon">116 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2" ry="2" /><path d="M7 7v-3M17 7v-3" /></svg>117 </div>118 </div>119 </div>120 121 <!-- App bar -->122 <div class="app-bar">123 <div class="app-action">124 <svg viewBox="0 0 48 48"><path d="M30 12 L16 24 L30 36" /></svg>125 </div>126 <div class="app-title">Renew Peloton and Soul cycle membership</div>127 <div class="app-actions-right">128 <div class="app-action">129 <svg class="circle-icon" viewBox="0 0 48 48">130 <circle cx="24" cy="24" r="20"></circle>131 <path d="M24 14v20M14 24h20"></path>132 </svg>133 </div>134 <div class="app-action">135 <svg class="circle-icon" viewBox="0 0 48 48">136 <circle cx="24" cy="24" r="20"></circle>137 <path d="M16 24l6 6 10-12"></path>138 </svg>139 </div>140 </div>141 </div>142 143 <!-- Tooltip overlay -->144 <div class="tooltip">Renew Peloton and Soul cycle membership</div>145 146 <!-- Content list -->147 <div class="content">148 <!-- Overdue -->149 <div class="section-label label-red">Overdue</div>150 151 <div class="card">152 <div class="card-title">Call Janet</div>153 <div class="card-row">154 <span class="icon">155 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path></svg>156 </span>157 <span>03:30 PM</span>158 <span class="icon">159 <svg viewBox="0 0 24 24"><path d="M8 8l8 8M16 8l-8 8"></path></svg>160 </span>161 <span>S</span>162 </div>163 <div class="card-row">164 <span class="icon">165 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M7 5v-2M17 5v-2M3 9h18"></path></svg>166 </span>167 <span>Sun, Sep 03, 2023</span>168 </div>169 <div class="danger">(Missed)</div>170 <div class="right-chevron chev">171 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg>172 </div>173 </div>174 175 <!-- Today -->176 <div class="section-label label-red2">Today</div>177 178 <div class="card">179 <div class="card-title">Yoga classes</div>180 <div class="card-row">181 <span class="icon">182 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path></svg>183 </span>184 <span>11:00 AM</span>185 <span class="mute">•</span>186 <span>1 day</span>187 </div>188 <div class="card-row">189 <span class="icon">190 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M7 5v-2M17 5v-2M3 9h18"></path></svg>191 </span>192 <span>Thu, Aug 31, 2023</span>193 </div>194 <div class="right-chevron chev">195 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg>196 </div>197 </div>198 199 <!-- Tomorrow -->200 <div class="section-label label-yellow">Tomorrow</div>201 202 <div class="card">203 <div class="card-title">Catch Subway</div>204 <div class="card-row">205 <span class="icon">206 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path></svg>207 </span>208 <span>08:00 AM</span>209 <span class="mute">•</span>210 <span>1 day</span>211 </div>212 <div class="card-row">213 <span class="icon">214 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M7 5v-2M17 5v-2M3 9h18"></path></svg>215 </span>216 <span>Fri, Sep 01, 2023</span>217 </div>218 <div class="right-chevron chev">219 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg>220 </div>221 </div>222 223 <!-- Next 7 days -->224 <div class="section-label label-blue">Next 7 days</div>225 226 <div class="card">227 <div class="card-title">Visit Mom at Arizona</div>228 <div class="card-row">229 <span class="icon">230 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 2"></path></svg>231 </span>232 <span>11:30 AM</span>233 <span class="mute">•</span>234 <span>Once</span>235 </div>236 <div class="right-chevron chev">237 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg>238 </div>239 </div>240 </div>241 242 <!-- Keyboard -->243 <div id="keyboard">244 <div class="suggestions">245 <div class="sugg-key">246 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#ddd" fill="none" stroke-width="2">247 <circle cx="12" cy="8" r="3"></circle><path d="M4 20c4-6 12-6 16 0"></path>248 </svg>249 </div>250 <div class="pill">membership</div>251 <div class="pill">memberships</div>252 <div style="margin-left:auto; display:flex; align-items:center; gap:16px;">253 <div class="kb-emoji"><span>🎤</span></div>254 </div>255 </div>256 257 <!-- Row 1 -->258 <div class="kb-row">259 <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>260 <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>261 </div>262 <!-- Row 2 -->263 <div class="kb-row" style="padding-left: 54px; padding-right: 54px;">264 <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>265 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>266 </div>267 <!-- Row 3 -->268 <div class="kb-row" style="padding-left: 110px; padding-right: 110px;">269 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>270 <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>271 </div>272 <!-- Row 4 -->273 <div class="kb-row">274 <div class="key wide">?123</div>275 <div class="key small">,</div>276 <div class="key small">😊</div>277 <div class="key space">space</div>278 <div class="key small">.</div>279 <div class="key accent wide">280 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#15403b" fill="none" stroke-width="2">281 <circle cx="11" cy="11" r="9"></circle><path d="M11 7l-4 4M11 7l4 4M7 15h8"></path>282 </svg>283 </div>284 </div>285 286 <div class="bottom-nav"></div>287 </div>288 289</div>290</body>291</html>