GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Room Selector UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d0d0f;14    border-radius: 28px;15    box-shadow: 0 30px 80px rgba(0,0,0,0.6) inset;16    color: #fff;17  }18 19  /* Dimmed app background elements (subtle) */20  .overlay {21    position: absolute;22    inset: 0;23    background: rgba(0,0,0,0.65);24  }25 26  /* Modal */27  .modal {28    position: absolute;29    left: 45px;30    top: 150px;31    width: 990px;32    height: 1950px;33    background: #232326;34    border-radius: 26px;35    box-shadow: 0 10px 30px rgba(0,0,0,0.55);36    border: 1px solid rgba(255,255,255,0.08);37  }38 39  .modal-header {40    text-align: center;41    padding: 50px 40px 30px 40px;42    font-size: 48px;43    font-weight: 700;44    letter-spacing: 0.5px;45    color: #f2f2f2;46  }47 48  /* Room card */49  .room-card {50    margin: 0 50px;51    padding: 40px 40px 50px 40px;52    background: #2b2b2f;53    border: 1px solid rgba(255,255,255,0.12);54    border-radius: 30px;55  }56  .room-title {57    font-size: 38px;58    font-weight: 700;59    margin-bottom: 35px;60    color: #ffffff;61  }62 63  .row {64    display: flex;65    align-items: center;66    justify-content: space-between;67    padding: 22px 0;68    border-radius: 14px;69  }70  .label {71    font-size: 36px;72    color: #e6e6e6;73    flex: 1;74  }75  .controls {76    display: flex;77    align-items: center;78    gap: 28px;79  }80  .count {81    width: 60px;82    text-align: center;83    font-size: 42px;84    font-weight: 600;85    color: #ffffff;86  }87 88  /* Icon buttons */89  .icon-btn {90    width: 70px;91    height: 70px;92    display: inline-flex;93    align-items: center;94    justify-content: center;95  }96  .icon-btn svg {97    width: 70px;98    height: 70px;99  }100  .pink { stroke: #d75a8e; }101  .white { stroke: #ffffff; }102 103  /* Add room button */104  .add-room {105    margin: 36px 50px;106    width: 300px;107    background: #d75a8e;108    color: #fff;109    border: none;110    border-radius: 16px;111    padding: 26px 26px;112    font-size: 38px;113    font-weight: 700;114    box-shadow: 0 8px 20px rgba(215,90,142,0.35);115  }116 117  /* Apply bar at bottom */118  .apply-wrap {119    position: absolute;120    left: 0;121    right: 0;122    bottom: 40px;123    padding: 0 45px;124  }125  .apply-btn {126    width: 100%;127    height: 140px;128    background: #d75a8e;129    color: #ffffff;130    border: none;131    border-radius: 18px;132    font-size: 46px;133    font-weight: 800;134    letter-spacing: 0.5px;135    box-shadow: 0 12px 24px rgba(215,90,142,0.4);136  }137</style>138</head>139<body>140<div id="render-target">141  <div class="overlay"></div>142 143  <div class="modal">144    <div class="modal-header">Room selected</div>145 146    <div class="room-card">147      <div class="room-title">Room 1</div>148 149      <div class="row">150        <div class="label">adults</div>151        <div class="controls">152          <div class="icon-btn" aria-label="decrease adults">153            <svg viewBox="0 0 100 100">154              <circle cx="50" cy="50" r="38" fill="none" class="pink" stroke-width="6"></circle>155              <line x1="32" y1="50" x2="68" y2="50" class="white" stroke-width="8" stroke-linecap="round"></line>156            </svg>157          </div>158          <div class="count">2</div>159          <div class="icon-btn" aria-label="increase adults">160            <svg viewBox="0 0 100 100">161              <circle cx="50" cy="50" r="38" fill="none" class="pink" stroke-width="6"></circle>162              <line x1="50" y1="32" x2="50" y2="68" class="white" stroke-width="8" stroke-linecap="round"></line>163              <line x1="32" y1="50" x2="68" y2="50" class="white" stroke-width="8" stroke-linecap="round"></line>164            </svg>165          </div>166        </div>167      </div>168 169      <div class="row">170        <div class="label">children</div>171        <div class="controls">172          <div class="icon-btn" aria-label="decrease children">173            <svg viewBox="0 0 100 100">174              <circle cx="50" cy="50" r="38" fill="none" class="pink" stroke-width="6"></circle>175              <line x1="32" y1="50" x2="68" y2="50" class="white" stroke-width="8" stroke-linecap="round"></line>176            </svg>177          </div>178          <div class="count">0</div>179          <div class="icon-btn" aria-label="increase children">180            <svg viewBox="0 0 100 100">181              <circle cx="50" cy="50" r="38" fill="none" class="pink" stroke-width="6"></circle>182              <line x1="50" y1="32" x2="50" y2="68" class="white" stroke-width="8" stroke-linecap="round"></line>183              <line x1="32" y1="50" x2="68" y2="50" class="white" stroke-width="8" stroke-linecap="round"></line>184            </svg>185          </div>186        </div>187      </div>188    </div>189 190    <button class="add-room">Add room</button>191 192    <div class="apply-wrap">193      <button class="apply-btn">Apply</button>194    </div>195  </div>196</div>197</body>198</html>