GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Time Picker Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#121015; color:#EEE;10  }11 12  /* Status bar */13  .status-bar{14    position:absolute; top:0; left:0; right:0; height:90px;15    padding:0 32px; box-sizing:border-box; display:flex; align-items:center;16    font-size:34px; color:#fff; opacity:0.9;17  }18  .status-left{flex:1;}19  .status-right{display:flex; gap:22px; align-items:center;}20  .icon-signal, .icon-wifi, .icon-battery { width:44px; height:36px; }21 22  /* Header / page content behind dialog */23  .close-btn{24    position:absolute; top:120px; left:48px; width:64px; height:64px;25    display:flex; align-items:center; justify-content:center; border-radius:32px;26    color:#cfc3e6; opacity:0.9;27  }28  .page-title{29    position:absolute; top:150px; left:130px; font-size:78px; color:#d4c7ea; letter-spacing:1px;30  }31  .save-pill{32    position:absolute; top:150px; right:72px; width:190px; height:90px; border-radius:45px;33    background:#7E5AAE; display:flex; align-items:center; justify-content:center;34    color:#f7eefe; font-weight:700; font-size:38px;35  }36 37  .list-area{ position:absolute; top:330px; left:72px; right:72px; }38  .row{39    display:flex; align-items:center; gap:22px; height:120px; border-bottom:1px solid #2a2530;40    color:#c9c4d6; font-size:42px;41  }42  .avatar{43    width:72px; height:72px; border-radius:50%; background:#6c3a56; color:#fff;44    display:flex; align-items:center; justify-content:center; font-weight:700;45  }46  .dim-line{ height:100px; border-bottom:1px solid #2a2530; opacity:0.6; }47 48  /* Modal overlay + card */49  .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); z-index:5; }50  .modal{51    position:absolute; z-index:10; left:76px; top:520px; width:928px; height:1180px;52    background:#26222B; border-radius:44px; box-shadow:0 20px 60px rgba(0,0,0,0.7);53    padding:48px; box-sizing:border-box;54    color:#EFEAF6;55  }56  .modal h2{ margin:0 0 36px 0; font-size:44px; font-weight:700; color:#EDE7F6; }57 58  .time-head{59    display:flex; align-items:center; gap:24px; margin-bottom:26px;60  }61  .box-hour, .box-min{62    width:230px; height:190px; border-radius:22px; display:flex;63    align-items:center; justify-content:center; font-size:110px; font-weight:700;64  }65  .box-hour{ background:#7E5AAF; color:#FFF; }66  .box-min{ background:#3A333F; color:#EEE; }67  .colon{ font-size:120px; color:#CFC8DA; margin:0 8px; }68  .ampm{69    margin-left:auto; display:flex; flex-direction:column; gap:14px;70  }71  .ampm .btn{72    width:150px; height:90px; border-radius:18px; display:flex; align-items:center; justify-content:center;73    font-size:42px; font-weight:700; color:#F4E9F7; background:#1E1A21; border:2px solid #47404E;74  }75  .ampm .btn.active{ background:#6b494b; border-color:#6b494b; }76 77  /* Clock */78  .clock-wrap{ margin-top:24px; display:flex; justify-content:center; }79  .clock{80    position:relative; width:760px; height:760px; border-radius:50%;81    background:#332D39; box-shadow:inset 0 0 0 6px #3f3746;82  }83  .num{84    position:absolute; color:#d8d2e2; font-size:48px; font-weight:600;85  }86  /* approximate positions */87  .n12{ top:24px; left:50%; transform:translateX(-50%); }88  .n1{ top:78px; right:182px; }89  .n2{ top:184px; right:86px; }90  .n3{ top:50%; right:26px; transform:translateY(-50%); }91  .n4{ bottom:182px; right:86px; }92  .n5{ bottom:82px; right:182px; }93  .n6{ bottom:24px; left:50%; transform:translateX(-50%); }94  .n7{ bottom:82px; left:182px; }95  .n8{ bottom:182px; left:86px; }96  .n9{ top:50%; left:26px; transform:translateY(-50%); }97  .n10{ top:184px; left:86px; }98  .n11{ top:78px; left:182px; }99 100  /* selected hand to 9 o'clock */101  .hand{102    position:absolute; left:50%; top:50%;103    width:300px; height:6px; background:#cbaae8; border-radius:3px;104    transform:translate(-300px,-3px);105  }106  .hand .center-dot{107    position:absolute; right:-12px; top:50%; width:12px; height:12px; border-radius:50%;108    transform:translateY(-50%); background:#d6baf1;109  }110  .bubble9{111    position:absolute; left:-10px; top:50%; transform:translateY(-50%);112    width:140px; height:140px; background:#c8a8ed; border-radius:50%;113    display:flex; align-items:center; justify-content:center; color:#3a2948; font-size:56px; font-weight:800;114    box-shadow:0 0 0 6px rgba(200,168,237,0.2) inset;115  }116 117  /* bottom buttons */118  .modal-footer{119    position:absolute; left:48px; right:48px; bottom:36px; display:flex; align-items:center;120  }121  .kbd{122    width:68px; height:48px; border-radius:8px; background:#4a4250; display:flex; align-items:center; justify-content:center;123  }124  .kbd svg{ width:40px; height:40px; }125  .actions{ margin-left:auto; display:flex; gap:60px; }126  .btn-text{ font-size:44px; color:#caa9ee; font-weight:700; }127 128  /* subtle content underneath the overlay */129  .under-note{130    position:absolute; bottom:120px; left:72px; right:72px; color:#8b8498; opacity:0.5; font-size:38px;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status bar -->138  <div class="status-bar">139    <div class="status-left">8:41</div>140    <div class="status-right">141      <!-- simple icons -->142      <svg class="icon-signal" viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2v-13h-2v13zm4 0h2V3h-2v17z"/></svg>143      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5l2.1 2.1-2.1 2.1-2.1-2.1L12 18.5zM2 9l2 2c4.9-4.9 12.9-4.9 17.8 0l2-2C17.4 3.6 6.6 3.6 2 9zm5 5l2 2c2.7-2.7 7.3-2.7 10 0l2-2c-4-4-10-4-14 0z"/></svg>144      <svg class="icon-battery" viewBox="0 0 24 24" fill="#fff"><path d="M16 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h13v8zM21 10v4h2v-4h-2z"/></svg>145    </div>146  </div>147 148  <!-- Page content behind -->149  <div class="close-btn">150    <svg width="44" height="44" viewBox="0 0 24 24" stroke="#d9ccec" stroke-width="2" fill="none" stroke-linecap="round">151      <path d="M5 5L19 19M19 5L5 19"/>152    </svg>153  </div>154  <div class="page-title">Transport</div>155  <div class="save-pill">Save</div>156 157  <div class="list-area">158    <div class="row">159      <div class="avatar">C</div>160      <div>Events</div>161    </div>162    <div class="dim-line"></div>163    <div class="dim-line"></div>164    <div class="dim-line"></div>165    <div class="dim-line"></div>166  </div>167 168  <div class="under-note">Add location • Add notification • Default color</div>169 170  <!-- Overlay and Modal -->171  <div class="overlay"></div>172 173  <div class="modal">174    <h2>Select time</h2>175    <div class="time-head">176      <div class="box-hour">09</div>177      <div class="colon">:</div>178      <div class="box-min">00</div>179      <div class="ampm">180        <div class="btn active">AM</div>181        <div class="btn">PM</div>182      </div>183    </div>184 185    <div class="clock-wrap">186      <div class="clock">187        <!-- numbers -->188        <div class="num n12">12</div>189        <div class="num n1">1</div>190        <div class="num n2">2</div>191        <div class="num n3">3</div>192        <div class="num n4">4</div>193        <div class="num n5">5</div>194        <div class="num n6">6</div>195        <div class="num n7">7</div>196        <div class="num n8">8</div>197        <div class="num n9">9</div>198        <div class="num n10">10</div>199        <div class="num n11">11</div>200 201        <!-- selected hand and bubble -->202        <div class="hand">203          <div class="center-dot"></div>204        </div>205        <div class="bubble9">9</div>206      </div>207    </div>208 209    <div class="modal-footer">210      <div class="kbd">211        <svg viewBox="0 0 24 24" fill="#e9def7">212          <rect x="3" y="6" width="18" height="12" rx="2" ry="2"></rect>213          <rect x="5" y="8.5" width="14" height="2.5"></rect>214        </svg>215      </div>216      <div class="actions">217        <div class="btn-text">Cancel</div>218        <div class="btn-text">OK</div>219      </div>220    </div>221  </div>222 223</div>224</body>225</html>