GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks - Time Picker Modal</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#121212; font-family: "Segoe UI", Roboto, Arial, sans-serif; color:#FFFFFF;11 }12 13 /* Top App Bar */14 .appbar { position:absolute; top:0; left:0; width:100%; height:220px; background:#0E5EA8; box-shadow:0 2px 0 rgba(0,0,0,0.4); }15 .status-row {16 height:76px; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:34px;17 }18 .status-icons { display:flex; gap:20px; align-items:center; }19 .title-row { height:144px; display:flex; align-items:center; padding:0 28px; gap:28px; }20 .title-text { font-size:64px; font-weight:600; letter-spacing:0.5px; }21 .actions { margin-left:auto; display:flex; gap:40px; align-items:center; }22 23 .icon-btn { width:84px; height:84px; background:transparent; border:none; padding:0; cursor:default; }24 .icon { width:84px; height:84px; }25 .icon.stroke path, .icon.stroke circle, .icon.stroke line { stroke:#FFFFFF; stroke-width:8; fill:none; stroke-linecap:round; stroke-linejoin:round; }26 .icon.fill path { fill:#FFFFFF; }27 28 /* Warning banner */29 .alert-banner {30 position:absolute; top:220px; left:0; width:100%; height:110px;31 background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:space-between; padding:0 28px;32 }33 .alert-left { display:flex; align-items:center; gap:16px; }34 .alert-text { color:#E53935; font-size:36px; }35 .enable-btn {36 background:#245E9C; color:#E9F0FB; border:1px solid rgba(255,255,255,0.25);37 border-radius:10px; padding:18px 28px; font-size:34px; font-weight:600;38 box-shadow:0 2px 0 rgba(0,0,0,0.4);39 }40 41 /* Underlying "Add Reminder" card */42 .reminder-card { position:absolute; top:760px; left:60px; width:960px; height:300px; border-radius:12px; background:rgba(255,255,255,0.05); box-shadow:0 24px 60px rgba(0,0,0,0.6); }43 .reminder-header { height:92px; background:#1565C0; border-radius:12px 12px 0 0; display:flex; align-items:center; padding:0 20px; gap:20px; }44 .header-title { font-size:44px; font-weight:600; }45 .save-btn { margin-left:auto; background:#E6EEF8; color:#1565C0; border:none; border-radius:12px; padding:16px 26px; font-size:36px; font-weight:700; }46 47 /* Modal dialog */48 .modal-overlay { position:absolute; inset:0; }49 .time-dialog {50 position:absolute; left:115px; top:980px; width:850px; height:640px;51 background:#3A3A3A; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.8);52 padding:40px 50px;53 }54 .wheel-top { display:flex; justify-content:space-between; color:#B0BEC5; opacity:0.8; font-size:44px; padding:10px 40px 0; }55 .selected-row { display:flex; align-items:center; justify-content:space-between; margin-top:60px; padding:0 20px; }56 .value { width:200px; text-align:center; font-size:80px; font-weight:700; color:#FFFFFF; }57 .colon { width:60px; text-align:center; font-size:80px; font-weight:700; color:#FFFFFF; }58 .line-row { display:flex; justify-content:space-between; margin-top:20px; padding:0 20px; }59 .selected-line { width:200px; height:6px; background:#57B6D9; border-radius:3px; }60 .small-gap { width:60px; }61 .wheel-bottom { display:flex; justify-content:space-between; color:#9EA6AB; font-size:42px; padding:22px 40px; }62 .dialog-actions { position:absolute; bottom:32px; right:40px; display:flex; gap:40px; }63 .action-btn { font-size:40px; color:#2196F3; font-weight:700; }64 65 /* Ad banner placeholder */66 .ad-banner {67 position:absolute; left:0; bottom:140px; width:100%; height:180px;68 background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;69 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;70 }71 72 /* Gesture pill */73 .gesture-pill { position:absolute; bottom:56px; left:50%; transform:translateX(-50%); width:220px; height:12px; background:#FFFFFF; border-radius:6px; opacity:0.8; }74</style>75</head>76<body>77<div id="render-target">78 79 <!-- Top status row -->80 <div class="appbar">81 <div class="status-row">82 <div>6:18</div>83 <div class="status-icons">84 <!-- simple dots and icons to mimic status -->85 <svg width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4" fill="#fff"/></svg>86 <svg width="36" height="24" viewBox="0 0 36 24">87 <path d="M2 20 L18 4 L34 20" stroke="#fff" stroke-width="3" fill="none" />88 <circle cx="18" cy="18" r="2" fill="#fff"/>89 </svg>90 <svg width="40" height="24" viewBox="0 0 40 24">91 <rect x="2" y="4" width="28" height="16" rx="3" stroke="#fff" stroke-width="3" fill="none"/>92 <rect x="6" y="8" width="20" height="8" fill="#fff"/>93 <rect x="32" y="10" width="6" height="4" rx="1" fill="#fff"/>94 </svg>95 </div>96 </div>97 98 <!-- App title row -->99 <div class="title-row">100 <button class="icon-btn" aria-label="Open menu">101 <svg class="icon stroke" viewBox="0 0 100 100">102 <path d="M16 28 H84 M16 50 H84 M16 72 H84"></path>103 </svg>104 </button>105 <div class="title-text">Tasks</div>106 <div class="actions">107 <!-- Add (plus in circle) -->108 <svg class="icon stroke" viewBox="0 0 100 100" aria-hidden="true">109 <circle cx="50" cy="50" r="32"></circle>110 <path d="M50 36 V64 M36 50 H64"></path>111 </svg>112 <!-- Check circle -->113 <svg class="icon stroke" viewBox="0 0 100 100" aria-hidden="true">114 <circle cx="50" cy="50" r="32"></circle>115 <path d="M32 52 L46 64 L70 42"></path>116 </svg>117 <!-- Search icon -->118 <svg class="icon stroke" viewBox="0 0 100 100" aria-hidden="true">119 <circle cx="44" cy="44" r="26"></circle>120 <path d="M66 66 L86 86"></path>121 </svg>122 </div>123 </div>124 </div>125 126 <!-- Warning banner -->127 <div class="alert-banner">128 <div class="alert-left">129 <svg width="40" height="40" viewBox="0 0 40 40">130 <circle cx="20" cy="20" r="19" fill="#E53935"/>131 <rect x="18.5" y="10" width="3" height="16" fill="#fff" rx="1"/>132 <rect x="18.5" y="28" width="3" height="3" fill="#fff" rx="1"/>133 </svg>134 <div class="alert-text">Please allow app to send you notification</div>135 </div>136 <button class="enable-btn">Enable</button>137 </div>138 139 <!-- Underlying card (partially visible behind modal) -->140 <div class="reminder-card">141 <div class="reminder-header">142 <svg width="42" height="42" viewBox="0 0 42 42">143 <path d="M10 10 L32 32 M32 10 L10 32" stroke="#fff" stroke-width="4" stroke-linecap="round"/>144 </svg>145 <div class="header-title">Add Reminder</div>146 <button class="save-btn">SAVE</button>147 </div>148 </div>149 150 <!-- Modal Dialog -->151 <div class="modal-overlay">152 <div class="time-dialog">153 <div class="wheel-top">154 <div style="width:200px; text-align:center;">3</div>155 <div class="small-gap"></div>156 <div style="width:200px; text-align:center;">14</div>157 <div style="width:200px; text-align:center;">AM</div>158 </div>159 160 <div class="selected-row">161 <div class="value">4</div>162 <div class="colon">:</div>163 <div class="value">15</div>164 <div class="value">PM</div>165 </div>166 167 <div class="line-row">168 <div class="selected-line"></div>169 <div class="small-gap"></div>170 <div class="selected-line"></div>171 <div class="selected-line"></div>172 </div>173 174 <div class="wheel-bottom">175 <div style="width:200px; text-align:center;">5</div>176 <div class="small-gap"></div>177 <div style="width:200px; text-align:center;">16</div>178 <div style="width:200px; text-align:center;"> </div>179 </div>180 181 <div class="dialog-actions">182 <div class="action-btn">CANCEL</div>183 <div class="action-btn">OK</div>184 </div>185 </div>186 </div>187 188 <!-- Ad banner placeholder -->189 <div class="ad-banner">[IMG: Ad Banner]</div>190 191 <!-- Gesture navigation pill -->192 <div class="gesture-pill"></div>193 194</div>195</body>196</html>