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>Select passengers</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* App bar */18  .appbar {19    position: relative;20    width: 100%;21    height: 220px;22    background: #0b5963;23    box-shadow: 0 3px 6px rgba(0,0,0,0.2);24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28  }29  .appbar .title {30    font-size: 56px;31    font-weight: 600;32    margin-left: 24px;33  }34  .appbar .right {35    margin-left: auto;36  }37  .icon-btn {38    width: 72px;39    height: 72px;40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44  .icon {45    width: 48px;46    height: 48px;47  }48 49  /* List / rows */50  .list {51    padding-top: 12px;52  }53  .row {54    display: flex;55    align-items: center;56    padding: 40px 40px;57    border-bottom: 1px solid #eaeaea;58  }59  .row .labels {60    flex: 1;61  }62  .primary {63    font-size: 46px;64    color: #424242;65  }66  .secondary {67    margin-top: 16px;68    font-size: 36px;69    color: #7a7a7a;70  }71  .qty {72    display: inline-flex;73    align-items: center;74    gap: 40px;75  }76  .qty .num {77    font-size: 48px;78    color: #5e5e5e;79    width: 60px;80    text-align: center;81  }82  .svg-action {83    width: 64px;84    height: 64px;85  }86  .action-active svg path { stroke: #0b5963; fill: none; }87  .action-disabled svg path { stroke: #9e9e9e; fill: none; }88 89  /* Bottom gesture bar */90  .gesture {91    position: absolute;92    bottom: 36px;93    left: 50%;94    transform: translateX(-50%);95    width: 360px;96    height: 18px;97    background: #d9d9d9;98    border-radius: 12px;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- App Bar -->106  <div class="appbar">107    <div class="icon-btn">108      <svg class="icon" viewBox="0 0 24 24">109        <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>110      </svg>111    </div>112    <div class="title">Select passengers</div>113    <div class="right icon-btn">114      <svg class="icon" viewBox="0 0 24 24">115        <path d="M20 6l-11 11-5-5" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>116      </svg>117    </div>118  </div>119 120  <!-- List Content -->121  <div class="list">122 123    <!-- Adult -->124    <div class="row">125      <div class="labels">126        <div class="primary">Adult</div>127      </div>128      <div class="qty">129        <div class="action-active">130          <svg class="svg-action" viewBox="0 0 24 24">131            <path d="M5 12h14" stroke-width="2.2" stroke-linecap="round"/>132          </svg>133        </div>134        <div class="num">1</div>135        <div class="action-active">136          <svg class="svg-action" viewBox="0 0 24 24">137            <path d="M12 5v14M5 12h14" stroke-width="2.2" stroke-linecap="round"/>138          </svg>139        </div>140      </div>141    </div>142 143    <!-- Child -->144    <div class="row">145      <div class="labels">146        <div class="primary">Child (2-15)</div>147      </div>148      <div class="qty">149        <div class="action-disabled">150          <svg class="svg-action" viewBox="0 0 24 24">151            <path d="M5 12h14" stroke-width="2.2" stroke-linecap="round"/>152          </svg>153        </div>154        <div class="num" style="color:#9e9e9e;">0</div>155        <div class="action-active">156          <svg class="svg-action" viewBox="0 0 24 24">157            <path d="M12 5v14M5 12h14" stroke-width="2.2" stroke-linecap="round"/>158          </svg>159        </div>160      </div>161    </div>162 163    <!-- Bike -->164    <div class="row">165      <div class="labels">166        <div class="primary">Bike</div>167        <div class="secondary">E-bikes are not allowed on buses.</div>168      </div>169      <div class="qty">170        <div class="action-disabled">171          <svg class="svg-action" viewBox="0 0 24 24">172            <path d="M5 12h14" stroke-width="2.2" stroke-linecap="round"/>173          </svg>174        </div>175        <div class="num" style="color:#9e9e9e;">0</div>176        <div class="action-active">177          <svg class="svg-action" viewBox="0 0 24 24">178            <path d="M12 5v14M5 12h14" stroke-width="2.2" stroke-linecap="round"/>179          </svg>180        </div>181      </div>182    </div>183 184    <!-- Wheelchair -->185    <div class="row">186      <div class="labels">187        <div class="primary">Travel in your wheelchair</div>188        <div class="secondary">Please select passenger first</div>189      </div>190      <div class="qty">191        <div class="action-disabled">192          <svg class="svg-action" viewBox="0 0 24 24">193            <path d="M5 12h14" stroke-width="2.2" stroke-linecap="round"/>194          </svg>195        </div>196        <div class="num" style="color:#9e9e9e;">0</div>197        <div class="action-active">198          <svg class="svg-action" viewBox="0 0 24 24">199            <path d="M12 5v14M5 12h14" stroke-width="2.2" stroke-linecap="round"/>200          </svg>201        </div>202      </div>203    </div>204 205  </div>206 207  <!-- Bottom gesture bar -->208  <div class="gesture"></div>209 210</div>211</body>212</html>