GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Tasks - Time Picker</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#0f274c; color:#fff;10 }11 12 /* Top bars */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:70px;15 background:#123a6d;16 display:flex; align-items:center; padding:0 24px; color:#dbe7ff; font-size:26px;17 }18 .title-bar {19 position:absolute; top:70px; left:0; right:0; height:120px;20 background:#153e75; display:flex; align-items:center;21 padding:0 24px;22 }23 .icon {24 width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center;25 margin-right:24px;26 color:#cfe1ff;27 }28 .title { font-size:54px; font-weight:700; letter-spacing:1px; }29 .right-actions { margin-left:auto; display:flex; gap:26px; }30 .round-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }31 32 /* Section header */33 .section-header {34 position:absolute; top:190px; left:0; right:0; height:80px;35 background:#e5a800; color:#0b1831; display:flex; align-items:center; padding:0 28px;36 font-weight:700; font-size:44px;37 }38 39 /* List area */40 .content {41 position:absolute; top:270px; left:0; right:0; bottom:0; padding:18px 24px 220px;42 overflow:hidden;43 }44 .card {45 background:#0b1529; border-radius:12px; padding:28px; margin-bottom:18px; border:1px solid rgba(255,255,255,0.06);46 }47 .card h3 { margin:0 0 10px 0; font-size:48px; font-weight:700; }48 .meta { display:flex; align-items:center; gap:20px; color:#cbd7ff; font-size:30px; margin-top:6px; }49 .meta .dot { width:8px; height:8px; border-radius:50%; background:#7ea6ff; display:inline-block; }50 51 .subhead { color:#d3ddff; font-size:44px; margin:16px 8px; }52 53 .reminder-bar {54 background:#1e63c8; border-radius:10px; padding:22px; display:flex; align-items:center;55 }56 .reminder-bar .close {57 width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-right:18px;58 border-radius:6px; background:rgba(255,255,255,0.08);59 }60 .reminder-bar span { font-size:42px; font-weight:700; flex:1; }61 .save-btn {62 background:#e1ecff; color:#0b2c68; border-radius:12px; padding:14px 22px; font-weight:800; font-size:36px;63 }64 65 .note {66 color:#ff6d6d; font-size:34px; margin:18px 6px;67 }68 69 /* Time picker modal */70 .overlay {71 position:absolute; inset:0; background:rgba(0,0,0,0.55);72 }73 .time-modal {74 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);75 width:860px; height:600px; background:#333; border-radius:10px;76 box-shadow:0 18px 40px rgba(0,0,0,0.6); padding:30px 24px; color:#e8f0ff;77 }78 .wheel {79 display:flex; justify-content:space-around; margin-top:10px;80 }81 .col {82 width:30%; text-align:center;83 }84 .ghost { color:#9aa3b2; opacity:0.6; font-size:44px; margin:26px 0 16px; }85 .selected-row {86 display:flex; justify-content:center; align-items:center; gap:18px;87 font-size:84px; font-weight:700; color:#ffffff;88 }89 .divider { width:14px; height:6px; background:#64a2ff; margin:0 6px; visibility:hidden; }90 .below { color:#b9c2d0; opacity:0.75; font-size:46px; margin:16px 0 28px; }91 .action-row {92 position:absolute; bottom:24px; right:24px; display:flex; gap:36px; font-weight:700;93 }94 .link-btn { color:#79aaff; font-size:40px; }95 96 /* Ad bar */97 .ad-bar {98 position:absolute; left:0; right:0; bottom:0; height:180px; background:#122e57; border-top:1px solid rgba(255,255,255,0.1);99 display:flex; align-items:center; padding:0 20px; gap:18px;100 }101 .ad-img {102 width:260px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;103 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;104 }105 .ad-info { flex:1; }106 .ad-title { font-size:42px; margin:0; }107 .ad-sub { color:#c9d6ff; font-size:30px; }108 .ad-open {109 background:#2ecc71; color:#04230d; font-weight:800; padding:18px 30px; border-radius:50px; font-size:40px;110 }111 112 /* Floating action button (alarm with plus) */113 .fab {114 position:absolute; right:36px; bottom:220px; width:120px; height:120px;115 background:#2f78ff; border-radius:50%; display:flex; align-items:center; justify-content:center;116 box-shadow:0 10px 24px rgba(0,0,0,0.4);117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar (simplified) -->124 <div class="status-bar">125 6:50126 <div style="margin-left:auto; display:flex; gap:12px; align-items:center;">127 <div style="width:12px; height:12px; background:#e9f3ff; border-radius:50%;"></div>128 <div style="width:12px; height:12px; background:#e9f3ff; border-radius:50%;"></div>129 <div style="width:12px; height:12px; background:#e9f3ff; border-radius:50%;"></div>130 <div style="width:12px; height:12px; background:#e9f3ff; border-radius:50%;"></div>131 <div style="width:12px; height:12px; background:#e9f3ff; border-radius:50%;"></div>132 <div style="width:22px; height:22px; border:3px solid #e9f3ff; border-radius:50%;"></div>133 </div>134 </div>135 136 <!-- Title bar -->137 <div class="title-bar">138 <div class="icon">139 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#e6f0ff" stroke-width="2">140 <path d="M3 6h18M3 12h18M3 18h18"/>141 </svg>142 </div>143 <div class="title">Tasks</div>144 <div class="right-actions">145 <div class="round-btn">146 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e6f0ff" stroke-width="2">147 <path d="M6 8h12a2 2 0 012 2v7a6 6 0 01-6 6H10a6 6 0 01-6-6v-7a2 2 0 012-2z"/>148 <path d="M8 2l2 2M16 2l-2 2M12 9v6M9 12h6"/>149 </svg>150 </div>151 <div class="round-btn">152 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e6f0ff" stroke-width="2">153 <path d="M9 12l2 2 4-4"/>154 <circle cx="12" cy="12" r="9"/>155 </svg>156 </div>157 <div class="round-btn">158 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e6f0ff" stroke-width="2">159 <circle cx="11" cy="11" r="7"/>160 <path d="M21 21l-4.3-4.3"/>161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Section label -->167 <div class="section-header">Tomorrow</div>168 169 <!-- Content area -->170 <div class="content">171 172 <div class="card">173 <h3>Catch Subway</h3>174 <div class="meta">175 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#cbd7ff" stroke-width="2">176 <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>177 </svg>178 <span>08:00 AM</span>179 <span class="dot"></span>180 <span>1 day</span>181 </div>182 <div class="meta" style="margin-top:10px;">183 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#cbd7ff" stroke-width="2">184 <path d="M3 4h18M3 8h18M5 12h14v8H5z"/>185 </svg>186 <span>Thu, Sep 28, 2023</span>187 </div>188 </div>189 190 <div class="subhead">Yoga classes</div>191 192 <div class="reminder-bar">193 <div class="close">194 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#e9f3ff" stroke-width="2" fill="none">195 <path d="M18 6L6 18M6 6l12 12"/>196 </svg>197 </div>198 <span>Add Reminder</span>199 <div class="save-btn">SAVE</div>200 </div>201 202 <div class="card" style="margin-top:18px;">203 <h3>Dance performance</h3>204 <div class="meta">205 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#cbd7ff" stroke-width="2">206 <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>207 </svg>208 <span>06:00 PM</span>209 </div>210 </div>211 212 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>213 214 </div>215 216 <!-- Dim overlay and Time Picker modal -->217 <div class="overlay"></div>218 <div class="time-modal">219 <div class="wheel">220 <div class="col">221 <div class="ghost">3</div>222 <div class="selected-row">4</div>223 <div class="below">5</div>224 </div>225 <div class="col">226 <div class="ghost">54</div>227 <div class="selected-row">55</div>228 <div class="below">56</div>229 </div>230 <div class="col">231 <div class="ghost">AM</div>232 <div class="selected-row">PM</div>233 <div class="below" style="opacity:0;"> </div>234 </div>235 </div>236 <div class="action-row">237 <div class="link-btn">CANCEL</div>238 <div class="link-btn">OK</div>239 </div>240 </div>241 242 <!-- Floating action button -->243 <div class="fab">244 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#eaf1ff" stroke-width="2">245 <path d="M6 8h12a2 2 0 012 2v6a6 6 0 01-6 6H10a6 6 0 01-6-6v-6a2 2 0 012-2z"/>246 <path d="M8 3l2 2M16 3l-2 2M12 10v5M9.5 12.5h5"/>247 </svg>248 </div>249 250 <!-- Ad row -->251 <div class="ad-bar">252 <div class="ad-img">[IMG: Train station ad]</div>253 <div class="ad-info">254 <p class="ad-title">Omio</p>255 <div class="ad-sub">4.6 • FREE</div>256 </div>257 <div class="ad-open">Open</div>258 </div>259</div>260</body>261</html>