GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Room Selector Modal UI</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: #0b0b0b;13    border-radius: 40px;14    box-shadow: 0 30px 80px rgba(0,0,0,0.65);15  }16 17  /* Dimmed app behind the modal */18  .app-behind {19    position: absolute;20    left: 0;21    top: 0;22    width: 1080px;23    height: 2400px;24    background: linear-gradient(180deg, #0b0b0b 0%, #111 40%, #0b0b0b 100%);25    opacity: 0.7;26  }27 28  /* Modal panel */29  .modal {30    position: absolute;31    left: 60px;32    right: 60px;33    top: 180px;34    bottom: 160px;35    background: #1e1e1f;36    border-radius: 28px;37    box-shadow: 0 20px 60px rgba(0,0,0,0.6);38  }39 40  .modal-header {41    width: 100%;42    text-align: center;43    color: #fafafa;44    font-size: 48px;45    font-weight: 700;46    margin-top: 50px;47    margin-bottom: 20px;48    letter-spacing: 0.5px;49  }50 51  .content {52    position: absolute;53    left: 60px;54    right: 60px;55    top: 150px;56    bottom: 160px;57  }58 59  .room-card {60    background: #272729;61    border: 1px solid #3b3b3f;62    border-radius: 28px;63    padding: 36px 40px;64  }65 66  .room-title {67    color: #ffffff;68    font-size: 40px;69    font-weight: 700;70    margin-bottom: 24px;71  }72 73  .counter-row {74    display: flex;75    align-items: center;76    padding: 22px 0;77    border-top: 1px solid rgba(255,255,255,0.06);78  }79  .counter-row:first-of-type { border-top: none; }80 81  .label {82    color: #e9e9ea;83    font-size: 38px;84    letter-spacing: 0.2px;85    flex: 1;86  }87 88  .circle {89    width: 80px;90    height: 80px;91    border-radius: 50%;92    background: #d85a8a;93    display: inline-flex;94    justify-content: center;95    align-items: center;96    margin: 0 22px;97    box-shadow: 0 6px 14px rgba(216,90,138,0.45);98    border: none;99  }100 101  .value {102    color: #ffffff;103    font-size: 42px;104    width: 60px;105    text-align: center;106  }107 108  .add-room {109    margin-top: 34px;110    width: 300px;111    height: 100px;112    background: #d85a8a;113    color: #ffffff;114    font-size: 36px;115    font-weight: 700;116    border-radius: 18px;117    border: none;118    box-shadow: 0 8px 18px rgba(216,90,138,0.45);119  }120 121  .apply {122    position: absolute;123    left: 60px;124    right: 60px;125    bottom: 40px;126    height: 120px;127    background: #d85a8a;128    color: #ffffff;129    font-size: 44px;130    font-weight: 800;131    border-radius: 18px;132    border: none;133    box-shadow: 0 10px 24px rgba(216,90,138,0.45);134    letter-spacing: 0.5px;135  }136 137  /* Simple status bar hint (top safe area) */138  .status-bar {139    position: absolute;140    top: 0;141    left: 0;142    width: 1080px;143    height: 120px;144    background: transparent;145  }146</style>147</head>148<body>149<div id="render-target">150  <div class="app-behind"></div>151 152  <div class="status-bar"></div>153 154  <div class="modal">155    <div class="modal-header">Room selected</div>156 157    <div class="content">158      <div class="room-card">159        <div class="room-title">Room 1</div>160 161        <div class="counter-row">162          <div class="label">adults</div>163          <div class="circle" aria-label="decrease adults">164            <svg width="34" height="34" viewBox="0 0 24 24">165              <path d="M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>166            </svg>167          </div>168          <div class="value">1</div>169          <div class="circle" aria-label="increase adults">170            <svg width="34" height="34" viewBox="0 0 24 24">171              <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>172            </svg>173          </div>174        </div>175 176        <div class="counter-row">177          <div class="label">children</div>178          <div class="circle" aria-label="decrease children">179            <svg width="34" height="34" viewBox="0 0 24 24">180              <path d="M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>181            </svg>182          </div>183          <div class="value">0</div>184          <div class="circle" aria-label="increase children">185            <svg width="34" height="34" viewBox="0 0 24 24">186              <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>187            </svg>188          </div>189        </div>190      </div>191 192      <button class="add-room">Add room</button>193    </div>194 195    <button class="apply">Apply</button>196  </div>197</div>198</body>199</html>