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>Preferences UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #E0E0E0;13    font-family: Arial, Helvetica, sans-serif;14  }15  .statusbar {16    height: 110px;17    background: #000000;18    color: #ffffff;19    display: flex;20    align-items: center;21    padding: 0 36px;22    box-sizing: border-box;23    font-size: 40px;24    letter-spacing: 0.5px;25  }26  .statusbar .right {27    margin-left: auto;28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .toolbar {33    height: 150px;34    background: #1F1F1F;35    display: flex;36    align-items: center;37    padding: 0 32px;38    box-sizing: border-box;39    border-bottom: 1px solid #2c2c2c;40  }41  .toolbar .title {42    font-size: 54px;43    font-weight: 600;44    color: #EDEDED;45    margin-left: 24px;46  }47  .content {48    position: absolute;49    top: 260px; left: 0; right: 0; bottom: 0;50    overflow: hidden;51  }52  .scroll {53    height: 100%;54    overflow-y: auto;55    padding: 24px 0 120px;56    box-sizing: border-box;57  }58  .section {59    padding: 40px 40px 10px 40px;60  }61  .section-title {62    font-size: 52px; font-weight: 700; color: #E0E0E0;63    margin-bottom: 12px;64  }65  .section-sub {66    font-size: 32px; color: #9E9E9E;67    margin-top: 6px;68  }69  .row {70    display: flex; align-items: center;71    height: 140px;72    border-top: 1px solid #2c2c2c;73    border-bottom: 1px solid #2c2c2c;74    padding: 0 40px;75    box-sizing: border-box;76  }77  .row .icon {78    width: 72px; height: 72px; margin-right: 24px;79  }80  .row .label {81    font-size: 42px; color: #E0E0E0; flex: 1;82  }83  .row .sublabel {84    font-size: 32px; color: #A7A7A7; margin-top: 8px;85  }86  .radio {87    width: 54px; height: 54px; border-radius: 50%;88    border: 4px solid #777; box-sizing: border-box;89  }90  .radio.selected {91    border-color: #3B82F6; position: relative;92  }93  .radio.selected::after {94    content: ""; position: absolute; width: 26px; height: 26px;95    background: #3B82F6; border-radius: 50%;96    top: 50%; left: 50%; transform: translate(-50%, -50%);97  }98  .toggle {99    width: 138px; height: 72px; border-radius: 36px;100    background: #3d3d3d; position: relative;101  }102  .toggle .knob {103    position: absolute; top: 6px; left: 8px;104    width: 60px; height: 60px; border-radius: 30px;105    background: #9E9E9E;106  }107  .toggle.on { background: #2F74E9; }108  .toggle.on .knob { left: 70px; background: #FFFFFF; }109  .chevron {110    width: 44px; height: 44px;111  }112  .divider {113    height: 16px; background: #1A1A1A; border-top: 1px solid #2c2c2c; border-bottom: 1px solid #2c2c2c;114    margin: 24px 0;115  }116  /* bottom gesture bar */117  .gesture {118    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);119    width: 260px; height: 16px; background: #DADADA; opacity: 0.8; border-radius: 8px;120  }121  /* helper */122  .stack {123    display: flex; flex-direction: column;124  }125</style>126</head>127<body>128<div id="render-target">129  <!-- Status bar -->130  <div class="statusbar">131    <div>4:19</div>132    <div class="right">133      <!-- simple status icons -->134      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#ffffff" opacity="0.2"/></svg>135      <svg width="36" height="36" viewBox="0 0 36 36"><rect x="6" y="8" width="24" height="20" rx="3" fill="#ffffff" opacity="0.2"/></svg>136      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="4" fill="#ffffff"/></svg>137      <svg width="36" height="36" viewBox="0 0 36 36"><path d="M6 20h20v10H6z" fill="#fff" opacity="0.15"/><rect x="27" y="22" width="4" height="6" fill="#fff"/></svg>138    </div>139  </div>140 141  <!-- Toolbar -->142  <div class="toolbar">143    <svg class="icon" viewBox="0 0 100 100">144      <path d="M60 25 L35 50 L60 75" stroke="#E0E0E0" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145    </svg>146    <div class="title">Preferences</div>147  </div>148 149  <div class="content">150    <div class="scroll">151      <!-- Route Preference -->152      <div class="section">153        <div class="section-title">Route Preference</div>154 155        <div class="row" style="border-top:none;">156          <svg class="icon" viewBox="0 0 100 100">157            <path d="M25 25 h50 v20 h-8 v18 H33 V45 h-8 z" fill="none" stroke="#BDBDBD" stroke-width="6"/>158            <rect x="40" y="63" width="20" height="10" fill="#BDBDBD"/>159            <rect x="35" y="73" width="30" height="6" fill="#BDBDBD"/>160          </svg>161          <div class="label">Best route</div>162          <div class="radio selected"></div>163        </div>164 165        <div class="row">166          <svg class="icon" viewBox="0 0 100 100">167            <circle cx="50" cy="26" r="10" fill="#BDBDBD"/>168            <path d="M50 38 L40 55 L30 70" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round"/>169            <path d="M50 40 L60 55 L70 70" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round"/>170          </svg>171          <div class="label">Least walking</div>172          <div class="radio"></div>173        </div>174 175        <div class="row">176          <svg class="icon" viewBox="0 0 100 100">177            <path d="M70 30 H30" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>178            <path d="M30 30 L40 22" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>179            <path d="M30 30 L40 38" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>180            <path d="M30 70 H70" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>181            <path d="M70 70 L60 62" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>182            <path d="M70 70 L60 78" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>183          </svg>184          <div class="label">Fewest transfers</div>185          <div class="radio"></div>186        </div>187      </div>188 189      <div class="divider"></div>190 191      <!-- Transport Type Preferences -->192      <div class="section">193        <div class="section-title">Transport Type Preferences</div>194        <div class="section-sub">The selected transport types will get higher priority in your suggested routes</div>195 196        <div class="row" style="border-top:none;">197          <svg class="icon" viewBox="0 0 100 100">198            <rect x="20" y="30" width="60" height="40" rx="8" fill="none" stroke="#BDBDBD" stroke-width="6"/>199            <circle cx="32" cy="76" r="6" fill="#BDBDBD"/>200            <circle cx="68" cy="76" r="6" fill="#BDBDBD"/>201          </svg>202          <div class="label">Bus</div>203          <div class="toggle on">204            <div class="knob"></div>205          </div>206        </div>207 208        <div class="row">209          <svg class="icon" viewBox="0 0 100 100">210            <rect x="22" y="28" width="56" height="40" rx="6" fill="none" stroke="#BDBDBD" stroke-width="6"/>211            <path d="M30 68 H70" stroke="#BDBDBD" stroke-width="6"/>212            <circle cx="34" cy="76" r="6" fill="#BDBDBD"/>213            <circle cx="66" cy="76" r="6" fill="#BDBDBD"/>214          </svg>215          <div class="label">Train</div>216          <div class="toggle">217            <div class="knob"></div>218          </div>219        </div>220 221        <div class="row">222          <svg class="icon" viewBox="0 0 100 100">223            <circle cx="50" cy="48" r="20" fill="none" stroke="#BDBDBD" stroke-width="6"/>224            <path d="M35 72 H65" stroke="#BDBDBD" stroke-width="6"/>225          </svg>226          <div class="label">Metro</div>227          <div class="toggle">228            <div class="knob"></div>229          </div>230        </div>231 232        <div class="row">233          <svg class="icon" viewBox="0 0 100 100">234            <circle cx="30" cy="70" r="12" fill="none" stroke="#BDBDBD" stroke-width="6"/>235            <circle cx="70" cy="70" r="12" fill="none" stroke="#BDBDBD" stroke-width="6"/>236            <path d="M30 70 L50 50 L70 70" stroke="#BDBDBD" stroke-width="6" fill="none"/>237            <path d="M50 50 L50 35" stroke="#BDBDBD" stroke-width="6" fill="none"/>238          </svg>239          <div class="label">Bike</div>240          <div class="toggle">241            <div class="knob"></div>242          </div>243        </div>244      </div>245 246      <div class="divider"></div>247 248      <!-- Personal Preferences -->249      <div class="section">250        <div class="section-title">Personal Preferences</div>251        <div class="section-sub">Adjust the routes according to your preferences</div>252 253        <div class="row" style="border-top:none;">254          <div class="stack" style="flex-direction:row; align-items:center; flex:1;">255            <svg class="icon" viewBox="0 0 100 100">256              <circle cx="50" cy="26" r="10" fill="#BDBDBD"/>257              <path d="M50 38 L40 55 L30 70" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round"/>258              <path d="M50 40 L60 55 L70 70" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round"/>259            </svg>260            <div class="stack" style="flex:1;">261              <div class="label">Walk Options</div>262              <div class="sublabel">Maximum walking duration, walking pace</div>263            </div>264          </div>265          <svg class="chevron" viewBox="0 0 44 44">266            <path d="M14 10 L28 22 L14 34" stroke="#9E9E9E" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>267          </svg>268        </div>269      </div>270    </div>271  </div>272 273  <div class="gesture"></div>274</div>275</body>276</html>