GD-ML/AndroidCode

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>Form with Date Picker Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }10 11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #5b1a12;23    color: #fff;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28  }29  .status-time { font-size: 44px; letter-spacing: 0.5px; }30  .status-icons { display: flex; align-items: center; gap: 26px; }31  .icon {32    width: 44px; height: 44px;33    display: inline-flex; align-items: center; justify-content: center;34    color: #fff;35  }36 37  /* Content */38  .content {39    padding: 40px 60px 120px;40  }41  .title {42    font-size: 92px;43    font-weight: 800;44    color: #222;45    line-height: 1.1;46    margin: 34px 0 36px;47  }48 49  .field {50    position: relative;51    background: #fff;52    border: 2px solid #BDBDBD;53    border-radius: 18px;54    height: 160px;55    margin: 34px 0;56    padding: 46px 28px 26px;57    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);58  }59  .field.focused {60    border-color: #222;61    box-shadow: 0 2px 0 rgba(0,0,0,0.08);62  }63  .field-label {64    position: absolute;65    left: 26px;66    top: -18px;67    background: #fff;68    padding: 0 10px;69    color: #757575;70    font-size: 36px;71  }72  .field-value {73    font-size: 54px;74    color: #222;75  }76  .suffix-icon {77    position: absolute;78    right: 20px;79    top: 50%;80    transform: translateY(-50%);81    width: 88px; height: 88px;82    border-radius: 50%;83    border: 2px solid #BDBDBD;84    display: flex; align-items: center; justify-content: center;85  }86  .suffix-icon svg { width: 44px; height: 44px; stroke: #555; }87 88  /* Dim overlay and modal */89  .overlay {90    position: absolute;91    inset: 0;92    background: rgba(0,0,0,0.55);93  }94  .dialog {95    position: absolute;96    left: 50%;97    top: 50%;98    transform: translate(-50%, -50%);99    width: 980px;100    background: #fff;101    border-radius: 10px;102    box-shadow: 0 18px 60px rgba(0,0,0,0.3);103    padding: 40px 48px 34px;104  }105  .wheel-header, .wheel-footer {106    display: grid;107    grid-template-columns: 1fr 1fr 1fr;108    text-align: center;109  }110  .wheel-header {111    color: #B0B0B0;112    font-size: 42px;113    margin-bottom: 30px;114  }115  .wheel {116    display: grid;117    grid-template-columns: 1fr 1fr 1fr;118    align-items: center;119    text-align: center;120    gap: 24px;121    margin: 0 20px 20px;122  }123  .col {124    padding: 24px 0;125  }126  .selected {127    font-size: 56px;128    color: #222;129    font-weight: 600;130    position: relative;131    padding: 16px 0 18px;132  }133  .selected:before, .selected:after {134    content: "";135    position: absolute; left: 10%; right: 10%;136    height: 4px; background: #BDBDBD;137  }138  .selected:before { top: 0; }139  .selected:after { bottom: 0; }140 141  .wheel-footer {142    color: #C7C7C7;143    font-size: 42px;144    margin-top: 8px;145  }146  .dialog-actions {147    display: flex;148    justify-content: flex-end;149    gap: 60px;150    margin-top: 36px;151    padding-right: 8px;152  }153  .action-btn {154    font-size: 44px;155    letter-spacing: 1px;156    color: #222;157  }158 159  /* Bottom navigation pill */160  .nav-bar {161    position: absolute;162    left: 0; right: 0; bottom: 0;163    height: 140px;164    background: #000;165    display: flex;166    align-items: center;167    justify-content: center;168  }169  .nav-handle {170    width: 220px; height:  skeleton-;171  }172  .nav-h sop? 173</style>174</ Compr pipeline?