GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - 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;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #141418;13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    color: #D9D9D9;24    font-size: 42px;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-bar .right-icons {31    margin-left: auto;32    display: flex;33    gap: 24px;34    align-items: center;35  }36  .icon-battery, .icon-wifi {37    width: 56px; height: 32px;38    border: 2px solid #D9D9D9;39    border-radius: 6px;40    position: relative;41  }42  .icon-battery::after {43    content: "";44    position: absolute;45    right: -8px; top: 8px;46    width: 8px; height: 16px;47    background: #D9D9D9; border-radius: 2px;48  }49  .icon-wifi {50    border: none;51  }52  .icon-wifi::before {53    content: "";54    position: absolute; inset: 0;55    background: radial-gradient(circle at 50% 60%, rgba(217,217,217,0.9) 0 6px, transparent 7px),56                radial-gradient(circle at 50% 60%, rgba(217,217,217,0.7) 0 12px, transparent 13px),57                radial-gradient(circle at 50% 60%, rgba(217,217,217,0.5) 0 18px, transparent 19px);58  }59 60  /* App header */61  .app-header {62    position: absolute;63    top: 140px;64    left: 40px;65    right: 40px;66    height: 140px;67    display: flex;68    align-items: center;69    color: #F2F2F2;70  }71  .close-btn {72    width: 72px; height: 72px;73    border-radius: 36px;74    display: inline-flex;75    align-items: center;76    justify-content: center;77    color: #CFCFCF;78    border: 2px solid #3A3A42;79    margin-right: 20px;80  }81  .close-btn svg { width: 36px; height: 36px; }82  .title {83    font-size: 88px;84    letter-spacing: 1px;85    flex: 1;86  }87  .save-pill {88    background: #8E76D6;89    color: white;90    padding: 26px 44px;91    border-radius: 48px;92    font-size: 46px;93    box-shadow: 0 10px 20px rgba(0,0,0,0.4);94  }95 96  /* Event details (background content) */97  .details {98    position: absolute;99    top: 320px;100    left: 40px;101    right: 40px;102    color: #BFBFC7;103    font-size: 46px;104  }105  .detail-row {106    display: flex;107    align-items: center;108    gap: 24px;109    padding: 22px 0;110  }111  .dot {112    width: 30px; height: 30px; border-radius: 50%; background: #4CA3FF;113  }114  .label-strong { color: #E6E6EB; }115  .left-icon {116    width: 62px; height: 62px; border-radius: 31px; background: #23232A;117    display: inline-flex; align-items: center; justify-content: center; color: #8E8EA3; margin-right: 8px;118  }119 120  /* Scrim + Modal */121  .scrim {122    position: absolute; inset: 0;123    background: rgba(0,0,0,0.55);124  }125  .modal {126    position: absolute;127    left: 80px;128    top: 720px;129    width: 920px;130    height: 1100px;131    background: #2A2432;132    border-radius: 48px;133    box-shadow: 0 40px 120px rgba(0,0,0,0.6);134    color: #ECEAF6;135    padding: 52px;136    box-sizing: border-box;137  }138  .modal-title {139    font-size: 48px;140    color: #DCD8EA;141    margin-bottom: 40px;142  }143 144  /* Time display row */145  .time-row {146    display: grid;147    grid-template-columns: 1fr 40px 1fr 160px;148    align-items: center;149    gap: 26px;150    margin-bottom: 30px;151  }152  .time-box {153    height: 190px;154    border-radius: 28px;155    display: flex;156    align-items: center;157    justify-content: center;158    font-size: 128px;159    font-weight: bold;160    letter-spacing: 4px;161  }162  .hour-box { background: #3A3542; color: #EDE8F8; }163  .minute-box { background: #7E63C8; color: #F5EDFF; }164  .time-colon {165    font-size: 140px; color: #CFC1E8; text-align: center;166  }167  .ampm {168    display: flex; flex-direction: column; gap: 16px;169  }170  .ampm .btn {171    height: 90px; border-radius: 18px; display: flex; align-items: center; justify-content: center;172    font-size: 48px; font-weight: 700;173    background: #3A3542; color: #EDE8F8;174    border: 2px solid #524B60;175  }176  .ampm .btn.active {177    background: #8E76D6; color: white; border-color: transparent;178  }179  .ampm .btn.inactive {180    background: #5B4E69; color: #E8DDF7;181  }182 183  /* Dial */184  .dial {185    position: relative;186    margin: 30px auto 0 auto;187    width: 760px; height: 760px;188    background: radial-gradient(circle at 50% 50%, #30283A 0%, #2A2432 70%);189    border-radius: 50%;190    border: 1px solid #4B4358;191  }192  .dial .number {193    position: absolute; color: #DCD3EB; font-size: 54px;194  }195 196  /* Place minute numbers around the circle (approximate positions) */197  .n05  { left: 570px; top: 60px; }198  .n10  { left: 655px; top: 180px; }199  .n15  { left: 700px; top: 330px; }200  .n20  { left: 655px; top: 480px; }201  .n25  { left: 565px; top: 600px; }202  .n30  { left: 360px; top: 680px; }203  .n35  { left: 160px; top: 600px; }204  .n40  { left: 70px;  top: 480px; }205  .n45  { left: 30px;  top: 330px; }206  .n50  { left: 70px;  top: 180px; }207  .n55  { left: 160px; top: 60px; }208 209  /* Center top "00" bubble and pointer line */210  .bubble-00 {211    position: absolute;212    left: 330px; top: 20px;213    width: 100px; height: 100px;214    border-radius: 50%;215    background: #D7C8F7;216    color: #2A2432; font-weight: 800; font-size: 48px;217    display: flex; align-items: center; justify-content: center;218    box-shadow: 0 6px 10px rgba(0,0,0,0.3);219  }220  .pointer {221    position: absolute;222    left: 380px; top: 120px;223    width: 6px; height: 520px;224    background: #D7C8F7;225  }226  .pointer-end {227    position: absolute;228    left: 352px; top: 620px;229    width: 56px; height: 56px; border-radius: 50%;230    background: #D7C8F7;231  }232 233  /* Modal footer */234  .footer {235    position: absolute; bottom: 40px; left: 52px; right: 52px;236    display: flex; justify-content: space-between; align-items: center;237  }238  .kbd {239    width: 120px; height: 72px; border-radius: 12px;240    background: #3A3542; color: #CFC7DE; font-size: 36px;241    display: flex; align-items: center; justify-content: center;242    border: 2px solid #524B60;243  }244  .actions {245    display: flex; gap: 40px; font-size: 48px; font-weight: 700;246    color: #B9A9E6;247  }248  .actions .ghost { color: #CFC1E8; }249</style>250</head>251<body>252<div id="render-target">253 254  <!-- Status bar -->255  <div class="status-bar">256    <div>8:42</div>257    <div class="right-icons">258      <div class="icon-wifi"></div>259      <div class="icon-battery"></div>260    </div>261  </div>262 263  <!-- App header -->264  <div class="app-header">265    <div class="close-btn" title="Close">266      <svg viewBox="0 0 24 24">267        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"/>268      </svg>269    </div>270    <div class="title">Transport</div>271    <div class="save-pill">Save</div>272  </div>273 274  <!-- Background details (partially visible behind modal) -->275  <div class="details">276    <div class="detail-row">277      <div class="left-icon">🗓️</div>278      <div class="dot"></div>279      <div class="label-strong">Events</div>280    </div>281    <div class="detail-row" style="padding-left: 86px;">282      dbwscratch.test.id4@gmail.com283    </div>284    <div class="detail-row">285      <div class="left-icon">⏰</div>286      <span>Time</span>287    </div>288    <div class="detail-row">289      <div class="left-icon">🔁</div>290      <span>Does not repeat</span>291    </div>292    <div class="detail-row">293      <div class="left-icon">👥</div>294      <span>Add guests</span>295    </div>296    <div class="detail-row">297      <div class="left-icon">📍</div>298      <span>Add location</span>299    </div>300    <div class="detail-row">301      <div class="left-icon">🔔</div>302      <span>30 minutes before</span>303    </div>304  </div>305 306  <!-- Scrim and modal time picker -->307  <div class="scrim"></div>308 309  <div class="modal">310    <div class="modal-title">Select time</div>311 312    <div class="time-row">313      <div class="time-box hour-box">02</div>314      <div class="time-colon">:</div>315      <div class="time-box minute-box">00</div>316      <div class="ampm">317        <div class="btn active">AM</div>318        <div class="btn inactive">PM</div>319      </div>320    </div>321 322    <div class="dial">323      <div class="bubble-00">00</div>324      <div class="pointer"></div>325      <div class="pointer-end"></div>326 327      <div class="number n05">05</div>328      <div class="number n10">10</div>329      <div class="number n15">15</div>330      <div class="number n20">20</div>331      <div class="number n25">25</div>332      <div class="number n30">30</div>333      <div class="number n35">35</div>334      <div class="number n40">40</div>335      <div class="number n45">45</div>336      <div class="number n50">50</div>337      <div class="number n55">55</div>338    </div>339 340    <div class="footer">341      <div class="kbd">⌨</div>342      <div class="actions">343        <div class="ghost">Cancel</div>344        <div>OK</div>345      </div>346    </div>347  </div>348 349</div>350</body>351</html>