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>Sizes Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000000;27    color: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 28px;31    box-sizing: border-box;32  }33  .status-left { font-size: 34px; font-weight: 600; width: 200px; }34  .status-center {35    flex: 1;36    display: flex;37    justify-content: center;38    gap: 18px;39    align-items: center;40  }41  .notif-dot {42    width: 22px; height: 22px; background: #fff; border-radius: 50%;43    opacity: 0.95;44  }45  .small-sep { width: 8px; height: 8px; border-radius: 50%; background: #bbb; opacity: 0.9; }46 47  .status-right {48    width: 260px;49    display: flex;50    justify-content: flex-end;51    align-items: center;52    gap: 22px;53  }54  .icon { width: 44px; height: 44px; }55 56  /* Bottom sheet */57  .sheet {58    position: absolute;59    top: 110px;60    left: 0;61    width: 1080px;62    height: 2060px;63    background: #ffffff;64    border-top-left-radius: 38px;65    border-top-right-radius: 38px;66    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);67    overflow: hidden;68  }69  .sheet-header {70    height: 160px;71    padding: 0 48px;72    display: flex;73    align-items: center;74    justify-content: space-between;75    box-sizing: border-box;76  }77  .sheet-title { font-size: 54px; font-weight: 700; color: #111; }78  .sheet-cancel { font-size: 44px; color: #9E9E9E; }79 80  .list {81    width: 100%;82  }83  .item {84    height: 160px;85    display: flex;86    align-items: center;87    padding: 0 48px;88    box-sizing: border-box;89    font-size: 44px;90    color: #9E9E9E;91    background: #F3F3F3;92    border-top: 2px solid #E3E3E3;93  }94  .item:nth-child(1) { border-top-color: #E6E6E6; }95  .item.bold { color: #111; font-weight: 700; }96  .item.white { background: #FFFFFF; }97 98  /* Bottom navigation bar */99  .nav-bar {100    position: absolute;101    bottom: 0;102    left: 0;103    width: 1080px;104    height: 160px;105    background: #000000;106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .home-pill {111    width: 320px;112    height: 12px;113    background: #E0E0E0;114    border-radius: 8px;115    opacity: 0.9;116  }117</style>118</head>119<body>120<div id="render-target">121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">3:00</div>124    <div class="status-center">125      <div class="notif-dot"></div>126      <div class="notif-dot"></div>127      <div class="notif-dot"></div>128      <div class="notif-dot"></div>129      <div class="small-sep"></div>130    </div>131    <div class="status-right">132      <!-- Simple signal icon -->133      <svg class="icon" viewBox="0 0 24 24">134        <path fill="#ffffff" d="M3 18h2v3H3zm4-4h2v7H7zm4-4h2v11h-2zm4-4h2v15h-2z"/>135      </svg>136      <!-- Wi-Fi icon -->137      <svg class="icon" viewBox="0 0 24 24">138        <path fill="#ffffff" d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-4.6-4.9 1.4 1.4A5 5 0 0 1 12 16a5 5 0 0 1 3.2 1.1l1.4-1.4A7 7 0 0 0 12 14a7 7 0 0 0-4.6 1.6zm-3.1-3.1 1.4 1.4A10 10 0 0 1 12 12a10 10 0 0 1 6.3 2.5l1.4-1.4A12 12 0 0 0 12 10a12 12 0 0 0-7.7 2.5z"/>139      </svg>140      <!-- Battery icon -->141      <svg class="icon" viewBox="0 0 24 24">142        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>143        <rect x="4" y="9" width="10" height="6" fill="#ffffff"/>144        <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>145      </svg>146    </div>147  </div>148 149  <!-- Bottom sheet -->150  <div class="sheet">151    <div class="sheet-header">152      <div class="sheet-title">Sizes</div>153      <div class="sheet-cancel">Cancel</div>154    </div>155 156    <div class="list">157      <div class="item">UK 6 (EU 39)</div>158      <div class="item">UK 6 (EU 40)</div>159      <div class="item">UK 6.5</div>160      <div class="item">UK 7</div>161      <div class="item">UK 7.5</div>162      <div class="item">UK 8</div>163      <div class="item">UK 8.5</div>164      <div class="item">UK 9</div>165      <div class="item">UK 9.5</div>166      <div class="item white bold">UK 10</div>167    </div>168  </div>169 170  <!-- Bottom navigation pill -->171  <div class="nav-bar">172    <div class="home-pill"></div>173  </div>174</div>175</body>176</html>