GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F4F4F4;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 130px;18    background: #611c14;19    color: #ffffff;20    padding: 0 40px;21    display: flex; align-items: center; justify-content: space-between;22    box-sizing: border-box;23  }24  .status-left { font-size: 44px; font-weight: 600; }25  .status-right { display: flex; align-items: center; gap: 28px; }26  .icon { width: 44px; height: 44px; }27 28  /* Content */29  .content {30    position: absolute;31    top: 130px; left: 0; right: 0; bottom: 0;32    padding: 80px 60px 0 60px;33    box-sizing: border-box;34  }35  .title {36    font-size: 88px; font-weight: 800; color: #2b2b2b;37    margin-bottom: 60px;38  }39 40  .form-field {41    width: 960px; background: #fff;42    border: 2px solid #C7C7C7; border-radius: 18px;43    margin: 36px 0; padding: 26px 34px 32px 34px;44    box-sizing: border-box;45    box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;46    position: relative;47  }48  .form-field .label {49    font-size: 32px; color: #7A7A7A; margin-bottom: 18px;50  }51  .form-field .value {52    font-size: 52px; color: #1e1e1e;53  }54  .form-field.selected {55    border-color: #000000;56    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);57  }58  .field-icon {59    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);60    width: 72px; height: 72px; border: 2px solid #BDBDBD; border-radius: 36px;61    display: flex; align-items: center; justify-content: center;62  }63  .field-icon svg { width: 38px; height: 38px; }64 65  /* Modal overlay */66  .overlay {67    position: absolute; left: 0; top: 0; width: 100%; height: 100%;68    background: rgba(0,0,0,0.55);69  }70  .date-modal {71    position: absolute;72    left: 50%; top: 610px; transform: translateX(-50%);73    width: 980px; height: 760px;74    background: #FFFFFF; border-radius: 12px;75    box-shadow: 0 28px 80px rgba(0,0,0,0.35);76    padding: 60px;77    box-sizing: border-box;78  }79  .picker {80    display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 60px;81    margin-top: 20px;82  }83  .picker-col {84    text-align: center;85  }86  .picker-col .above { color: #B0B0B0; font-size: 40px; margin-bottom: 40px; }87  .picker-col .current {88    font-size: 56px; font-weight: 700; color: #222;89    padding: 24px 0;90    border-top: 4px solid #BDBDBD; border-bottom: 4px solid #BDBDBD;91    margin-bottom: 40px;92  }93  .picker-col .below { color: #B0B0B0; font-size: 40px; }94  .modal-actions {95    position: absolute; right: 60px; bottom: 40px;96    display: flex; gap: 60px;97  }98  .action-btn {99    font-size: 44px; letter-spacing: 1px; color: #2b2b2b;100  }101 102  /* Bottom navigation bar */103  .nav-bar {104    position: absolute; left: 0; bottom: 0; width: 100%; height: 160px;105    background: #000000;106    display: flex; align-items: center; justify-content: center;107  }108  .home-indicator {109    width: 240px; height: 12px; border-radius: 6px; background: #EDEDED;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Top status bar -->117  <div class="status-bar">118    <div class="status-left">8:23</div>119    <div class="status-right">120      <!-- Wifi icon -->121      <svg class="icon" viewBox="0 0 24 24">122        <path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5z" fill="#fff"/>123        <path d="M4.2 12.8c2.1-2 5-3.3 7.8-3.3s5.7 1.2 7.8 3.3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>124        <path d="M7.2 15.3c1.4-1.3 3.3-2.1 4.8-2.1s3.4.8 4.8 2.1" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>125      </svg>126      <!-- Battery icon -->127      <svg class="icon" viewBox="0 0 26 24">128        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>129        <rect x="3" y="8" width="16" height="8" fill="#fff"/>130        <rect x="22" y="9" width="3" height="6" rx="1" fill="#fff"/>131      </svg>132    </div>133  </div>134 135  <!-- Main content -->136  <div class="content">137    <div class="title">Tell us who you are</div>138 139    <div class="form-field">140      <div class="label">First Name</div>141      <div class="value">ABC</div>142    </div>143 144    <div class="form-field">145      <div class="label">Last Name</div>146      <div class="value">XYZ</div>147    </div>148 149    <div class="form-field selected">150      <div class="label">Birthdate</div>151      <div class="value">Jan 01, 1990</div>152      <div class="field-icon">153        <!-- simple chevron icon -->154        <svg viewBox="0 0 24 24">155          <path d="M6 9l6 6 6-6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Dim overlay and date picker modal -->162  <div class="overlay"></div>163  <div class="date-modal">164    <div class="picker">165      <div class="picker-col">166        <div class="above">Dec</div>167        <div class="current">Jan</div>168        <div class="below">Feb</div>169      </div>170      <div class="picker-col">171        <div class="above">31</div>172        <div class="current">01</div>173        <div class="below">02</div>174      </div>175      <div class="picker-col">176        <div class="above">1989</div>177        <div class="current">1990</div>178        <div class="below">1991</div>179      </div>180    </div>181    <div class="modal-actions">182      <div class="action-btn">CANCEL</div>183      <div class="action-btn">OK</div>184    </div>185  </div>186 187  <!-- Bottom navigation bar -->188  <div class="nav-bar">189    <div class="home-indicator"></div>190  </div>191 192</div>193</body>194</html>