GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Form with Date Picker Modal</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#212121;}8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden; background:#FFFFFF;10  }11  /* Status bar */12  .status-bar{13    position:absolute; left:0; top:0; width:100%; height:110px; background:#6b1b13; color:#fff;14    display:flex; align-items:center; padding:0 32px; box-sizing:border-box;15  }16  .status-time{ font-size:42px; font-weight:600; }17  .status-icons{ margin-left:auto; display:flex; align-items:center; gap:28px; }18  .icon-wifi svg, .icon-battery svg, .icon-signal svg{ display:block; }19  /* Content */20  .content{21    position:absolute; left:0; top:110px; right:0; bottom:0; padding:60px 54px 120px; box-sizing:border-box;22    background:#fafafa;23  }24  h1{25    font-size:96px; line-height:1.06; margin:16px 0 48px; font-weight:800; color:#212121;26  }27  .form{28    display:flex; flex-direction:column; gap:46px; margin-top:10px;29  }30  .field{31    position:relative; width:972px;32  }33  .field .floating-label{34    position:absolute; top:-18px; left:24px; padding:0 8px; background:#fafafa; color:#8a8a8a; font-size:34px;35  }36  .input{37    height:140px; border:2px solid #C9C9C9; border-radius:18px; padding:28px 28px; box-sizing:border-box;38    display:flex; align-items:flex-end; font-size:48px; color:#212121; background:#fff; letter-spacing:0.3px;39  }40  .input .right-icon{ margin-left:auto; display:flex; align-items:center; }41  .calendar-ico{ width:54px; height:54px; }42  /* Scrim and modal */43  .scrim{44    position:absolute; inset:0; background:rgba(0,0,0,0.55);45  }46  .modal{47    position:absolute; left:50px; top:620px; width:980px; height:750px; background:#fff; border-radius:10px;48    box-shadow:0 24px 64px rgba(0,0,0,0.35);49    display:flex; flex-direction:column; padding:32px 0 24px; box-sizing:border-box;50  }51  .wheel{52    flex:1; display:flex; align-items:center; justify-content:center; gap:36px;53    padding:0 52px; box-sizing:border-box;54  }55  .col{ width:28%; text-align:center; }56  .opt{ font-size:44px; color:#BDBDBD; line-height:72px; }57  .selected{58    font-size:52px; color:#212121; font-weight:600; line-height:76px; margin:16px 0;59    position:relative; padding-bottom:18px;60  }61  .selected::after{62    content:""; position:absolute; left:10%; right:10%; bottom:0; height:4px; background:#9E9E9E;63  }64  .actions{65    display:flex; justify-content:flex-end; gap:52px; padding:0 48px; height:120px; align-items:center;66  }67  .actions .btn{68    font-size:40px; font-weight:600; color:#424242; letter-spacing:1.5px;69  }70  /* Underlying controls (behind scrim) for realism */71  .spacer{ height:28px; }72  /* Bottom gesture bar */73  .nav-bar{74    position:absolute; left:0; right:0; bottom:0; height:120px; background:#000;75    display:flex; align-items:center; justify-content:center;76  }77  .gesture{78    width:220px; height:10px; border-radius:10px; background:#E0E0E0;79  }80</style>81</head>82<body>83<div id="render-target">84  <!-- Status Bar -->85  <div class="status-bar">86    <div class="status-time">8:27</div>87    <div class="status-icons">88      <div class="icon-signal">89        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">90          <path d="M2 18h2v3H2zm4-4h2v7H6zm4-4h2v11h-2zm4-4h2v15h-2z"/>91        </svg>92      </div>93      <div class="icon-wifi">94        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">95          <path d="M12 20.5l-1.5-1.5a2.1 2.1 0 0 1 3 0L12 20.5zM2 9.5C6.4 6 17.6 6 22 9.5l-1.4 1.4C16.9 8.9 7.1 8.9 3.4 10.9L2 9.5zM5.8 13.2c4-2.6 8.4-2.6 12.4 0l-1.4 1.4c-3.4-2-6.2-2-9.6 0l-1.4-1.4z"/>96        </svg>97      </div>98      <div class="icon-battery">99        <svg width="44" height="44" viewBox="0 0 28 28" fill="#fff" aria-hidden="true">100          <rect x="2" y="7" width="22" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>101          <rect x="4" y="9" width="14" height="8" fill="#fff"/>102          <rect x="24" y="11" width="2" height="6" fill="#fff"/>103        </svg>104      </div>105    </div>106  </div>107 108  <!-- Underlying content -->109  <div class="content">110    <h1>Tell us who you are</h1>111 112    <div class="form">113      <div class="field">114        <div class="floating-label">First Name</div>115        <div class="input">ABC</div>116      </div>117 118      <div class="field">119        <div class="floating-label">Last Name</div>120        <div class="input">XYZ</div>121      </div>122 123      <div class="field">124        <div class="floating-label">Birthdate</div>125        <div class="input">126          <span style="color:#9E9E9E">Select date</span>127          <div class="right-icon">128            <svg class="calendar-ico" viewBox="0 0 24 24" fill="#616161" aria-hidden="true">129              <path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm12 6H5v10h14V8z"/>130            </svg>131          </div>132        </div>133      </div>134 135      <div class="spacer"></div>136      <div class="field">137        <div class="floating-label">Your email</div>138        <div class="input" style="color:#BDBDBD;">example@email.com</div>139      </div>140    </div>141  </div>142 143  <!-- Scrim -->144  <div class="scrim"></div>145 146  <!-- Modal Date Picker -->147  <div class="modal">148    <div class="wheel">149      <div class="col">150        <div class="opt">Feb</div>151        <div class="selected">Mar</div>152        <div class="opt">Apr</div>153      </div>154      <div class="col">155        <div class="opt">31</div>156        <div class="selected">01</div>157        <div class="opt">02</div>158      </div>159      <div class="col">160        <div class="opt">1998</div>161        <div class="selected">1999</div>162        <div class="opt">2000</div>163      </div>164    </div>165    <div class="actions">166      <div class="btn">CANCEL</div>167      <div class="btn">OK</div>168    </div>169  </div>170 171  <!-- Bottom gesture bar -->172  <div class="nav-bar">173    <div class="gesture"></div>174  </div>175</div>176</body>177</html>