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 - Time Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212;13 }14 /* Top system/status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; background: #0E4A8F; color: #fff;18 padding: 0 30px; box-sizing: border-box;19 display: flex; align-items: center; justify-content: space-between;20 }21 .status-left { font-size: 42px; letter-spacing: 1px; }22 .status-right { display: flex; align-items: center; gap: 28px; }23 .status-icon { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 6; }24 /* App bar */25 .app-bar {26 position: absolute; top: 120px; left: 0; right: 0;27 height: 150px; background: #0E4A8F; color: #EAF3FF;28 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;29 }30 .menu-btn { width: 72px; height: 72px; margin-right: 24px; }31 .menu-btn svg { width: 100%; height: 100%; stroke: #EAF3FF; stroke-width: 10; }32 .title { font-size: 64px; font-weight: 600; flex: 1; }33 .actions { display: flex; gap: 36px; align-items: center; }34 .action-icon { width: 70px; height: 70px; }35 .action-icon svg { width: 100%; height: 100%; fill: none; stroke: #C6DAFF; stroke-width: 10; }36 /* Warning bar */37 .warning {38 position: absolute; top: 270px; left: 0; right: 0;39 height: 90px; background: rgba(0,0,0,0.35);40 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;41 color: #E53935; gap: 22px;42 }43 .warning svg { width: 46px; height: 46px; fill: #E53935; }44 .warning-text { font-size: 36px; }45 .enable-btn {46 margin-left: auto; background: #1565C0; color: #EAF3FF;47 padding: 18px 30px; border-radius: 8px; font-size: 34px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);48 }49 /* Content area */50 .content {51 position: absolute; top: 360px; left: 30px; right: 30px; bottom: 240px;52 }53 .sheet {54 position: absolute; top: 360px; left: 30px; width: 1020px;55 background: #1E1E1E; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);56 }57 .sheet-header {58 height: 110px; background: #1876D1; color: #EAF3FF;59 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;60 border-top-left-radius: 12px; border-top-right-radius: 12px;61 }62 .sheet-header .close-x {63 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-right: 18px;64 }65 .sheet-header .close-x svg { width: 44px; height: 44px; stroke: #EAF3FF; stroke-width: 8; }66 .sheet-title { font-size: 44px; font-weight: 600; flex: 1; }67 .sheet-save {68 background: #EAF3FF; color: #0E4A8F; font-weight: 700; border-radius: 10px;69 padding: 14px 22px; font-size: 36px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);70 }71 .sheet-body { padding: 26px; color: #BDBDBD; font-size: 36px; }72 /* Modal time picker */73 .modal {74 position: absolute; top: 930px; left: 120px; width: 840px; height: 660px;75 background: #3D3D3D; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,0.7);76 padding: 40px; box-sizing: border-box; color: #E0E0E0;77 }78 .tp-row { display: flex; justify-content: space-between; align-items: center; }79 .tp-row.info { color: #BDBDBD; font-size: 42px; margin-bottom: 36px; }80 .tp-row.select { align-items: flex-end; margin-bottom: 20px; }81 .tp-item {82 font-size: 70px; color: #FFFFFF; padding-bottom: 16px;83 border-bottom: 6px solid #29B6F6; min-width: 140px; text-align: center;84 }85 .tp-colon { font-size: 70px; color: #FFFFFF; padding: 0 18px; }86 .tp-ampm { min-width: 160px; }87 .tp-row.sub { color: #9E9E9E; font-size: 44px; justify-content: space-around; margin-top: 14px; }88 .tp-actions { position: absolute; bottom: 28px; right: 40px; display: flex; gap: 40px; font-size: 40px; }89 .tp-actions .cancel { color: #1E88E5; }90 .tp-actions .ok { color: #1E88E5; font-weight: 600; }91 /* Bottom ad banner */92 .bottom-ad {93 position: absolute; left: 0; right: 0; bottom: 120px;94 height: 180px; background: #1FA94A; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;95 color: #EAF3FF; gap: 24px;96 box-shadow: 0 -6px 16px rgba(0,0,0,0.4);97 }98 .ad-img {99 width: 280px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;101 border-radius: 6px;102 }103 .ad-text { font-size: 42px; font-weight: 700; }104 .ad-cta {105 margin-left: auto; background: rgba(255,255,255,0.15);106 padding: 16px 24px; border-radius: 10px; font-size: 34px; color: #fff;107 border: 1px solid rgba(255,255,255,0.25);108 }109 .ad-close {110 position: absolute; right: 24px; top: 14px; width: 48px; height: 48px;111 }112 .ad-close svg { width: 100%; height: 100%; stroke: #EAF3FF; stroke-width: 8; }113 /* Navigation pill */114 .home-pill {115 position: absolute; left: 50%; transform: translateX(-50%);116 bottom: 40px; width: 220px; height: 16px; background: #FFFFFF; border-radius: 10px; opacity: 0.9;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="status-left">6:19</div>126 <div class="status-right">127 <!-- simple small dot -->128 <svg class="status-icon" viewBox="0 0 50 50"><circle cx="25" cy="25" r="8" fill="#fff"/></svg>129 <!-- WiFi -->130 <svg class="status-icon" viewBox="0 0 64 64">131 <path d="M4 20c14-12 42-12 56 0" stroke-linecap="round"/>132 <path d="M12 30c10-8 30-8 40 0" stroke-linecap="round"/>133 <path d="M20 40c6-5 18-5 24 0" stroke-linecap="round"/>134 <circle cx="32" cy="48" r="4" fill="#fff" stroke="none"/>135 </svg>136 <!-- Battery -->137 <svg class="status-icon" viewBox="0 0 80 50">138 <rect x="6" y="10" width="60" height="30" rx="6" stroke="#fff"/>139 <rect x="12" y="16" width="40" height="18" fill="#fff" stroke="none"/>140 <rect x="66" y="18" width="8" height="14" rx="2" fill="#fff" stroke="none"/>141 </svg>142 </div>143 </div>144 145 <!-- App bar -->146 <div class="app-bar">147 <div class="menu-btn">148 <svg viewBox="0 0 100 100">149 <line x1="12" y1="24" x2="88" y2="24"/>150 <line x1="12" y1="50" x2="88" y2="50"/>151 <line x1="12" y1="76" x2="88" y2="76"/>152 </svg>153 </div>154 <div class="title">Tasks</div>155 <div class="actions">156 <!-- Add (+) with small ring -->157 <div class="action-icon">158 <svg viewBox="0 0 100 100">159 <circle cx="50" cy="50" r="40"/>160 <line x1="50" y1="28" x2="50" y2="72"/>161 <line x1="28" y1="50" x2="72" y2="50"/>162 </svg>163 </div>164 <!-- Check -->165 <div class="action-icon">166 <svg viewBox="0 0 100 100">167 <path d="M20 50l18 18 42-42" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 <!-- Search -->171 <div class="action-icon">172 <svg viewBox="0 0 100 100">173 <circle cx="42" cy="42" r="26"/>174 <line x1="64" y1="64" x2="90" y2="90"/>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Warning bar -->181 <div class="warning">182 <svg viewBox="0 0 64 64">183 <circle cx="32" cy="32" r="30" fill="none" stroke="#E53935" stroke-width="6"/>184 <rect x="30" y="18" width="4" height="24" fill="#E53935"/>185 <rect x="30" y="46" width="4" height="4" fill="#E53935"/>186 </svg>187 <div class="warning-text">Please allow app to send you notification</div>188 <div class="enable-btn">Enable</div>189 </div>190 191 <!-- Content area with underlying sheet -->192 <div class="content">193 <div class="sheet">194 <div class="sheet-header">195 <div class="close-x">196 <svg viewBox="0 0 60 60">197 <line x1="12" y1="12" x2="48" y2="48"/>198 <line x1="48" y1="12" x2="12" y2="48"/>199 </svg>200 </div>201 <div class="sheet-title">Add Reminder</div>202 <div class="sheet-save">SAVE</div>203 </div>204 <div class="sheet-body">205 <!-- Placeholder lines to hint list inputs behind the modal -->206 <div style="height: 70px; border-bottom: 1px solid #2A2A2A; display:flex; align-items:center; color:#BDBDBD;">Title: Roslyn...</div>207 <div style="height: 70px; border-bottom: 1px solid #2A2A2A; display:flex; align-items:center; color:#BDBDBD;">Write...</div>208 <div style="height: 70px; border-bottom: 1px solid #2A2A2A; display:flex; align-items:center; color:#BDBDBD;">Schedule</div>209 <div style="height: 70px; border-bottom: 1px solid #2A2A2A; display:flex; align-items:center; color:#BDBDBD;">Repeat: No repeat</div>210 </div>211 </div>212 </div>213 214 <!-- Modal time picker -->215 <div class="modal">216 <div class="tp-row info">217 <div>12</div>218 <div>29</div>219 <div>AM</div>220 </div>221 <div class="tp-row select">222 <div class="tp-item" style="min-width:160px;">1</div>223 <div class="tp-colon">:</div>224 <div class="tp-item" style="min-width:180px;">30</div>225 <div class="tp-item tp-ampm">PM</div>226 </div>227 <div class="tp-row sub">228 <div>2</div>229 <div>31</div>230 </div>231 <div class="tp-actions">232 <div class="cancel">CANCEL</div>233 <div class="ok">OK</div>234 </div>235 </div>236 237 <!-- Bottom ad banner -->238 <div class="bottom-ad">239 <div class="ad-img">[IMG: Milk Product Ad]</div>240 <div class="ad-text">Cow Milk at ₹25.5/Packet</div>241 <div class="ad-cta">Start VIP Trial at ₹35</div>242 <div class="ad-close">243 <svg viewBox="0 0 60 60">244 <line x1="12" y1="12" x2="48" y2="48"/>245 <line x1="48" y1="12" x2="12" y2="48"/>246 </svg>247 </div>248 </div>249 250 <!-- Navigation pill -->251 <div class="home-pill"></div>252 253</div>254</body>255</html>