GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Preferences - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #1f2125; color: #e9ecef;12  }13 14  /* Status bar */15  .statusbar { height: 90px; background:#000; opacity: 0.95; }16 17  /* Top app bar */18  .appbar {19    height: 140px; background: #2b2f34; display: flex; align-items: center;20    padding: 0 36px; box-sizing: border-box; border-bottom: 1px solid #2f3339;21  }22  .back {23    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; margin-right: 16px;24  }25  .title { font-size: 48px; font-weight: 600; color:#e6e9ed; }26 27  /* Content */28  .content { position:absolute; left:0; right:0; top:230px; bottom:0; overflow: hidden; }29  .scroll {30    height: 100%; overflow-y: auto; padding: 36px 36px 140px; box-sizing: border-box;31  }32 33  .section-title {34    font-size: 54px; font-weight: 700; color:#d5dde3; margin: 36px 0 10px;35  }36  .section-sub {37    font-size: 32px; color:#9aa3ab; margin-bottom: 24px;38  }39  .divider { height: 1px; background:#2f343a; margin: 0 -36px; }40 41  .item { display:flex; align-items: center; padding: 34px 0; }42  .item + .item { border-top: 1px solid #2f343a; }43  .icon {44    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;45    margin-right: 26px; color:#cfd6dc;46  }47  .label-wrap { flex:1; }48  .label { font-size: 42px; color:#e9ecef; }49  .sublabel { font-size: 30px; color:#9aa3ab; margin-top: 6px; }50 51  /* Radio */52  .radio {53    width: 54px; height: 54px; border-radius: 50%;54    border: 4px solid #6b737b; box-sizing: border-box; position: relative;55  }56  .radio.on { border-color: #3d7eff; }57  .radio.on:after {58    content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%;59    background: #3d7eff; top: 50%; left: 50%; transform: translate(-50%,-50%);60  }61 62  /* Toggle */63  .toggle {64    width: 132px; height: 68px; border-radius: 34px; background:#3b3f46; position: relative;65    box-shadow: inset 0 0 0 2px #2c3036; transition: all .2s;66  }67  .toggle:before {68    content:""; position:absolute; top: 6px; left: 6px; width: 56px; height: 56px; border-radius: 50%;69    background:#9aa3ab; transition: all .2s;70  }71  .toggle.on { background:#2f6af2; box-shadow: inset 0 0 0 2px #2b56c6; }72  .toggle.on:before { left: 70px; background:#ffffff; }73 74  /* Big separators between groups */75  .group-divider { height: 12px; background:#272a2f; margin: 30px -36px; border-top:1px solid #2e3238; border-bottom:1px solid #2e3238; }76 77  /* Bottom gesture bar */78  .gesture {79    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);80    width: 340px; height: 12px; background: #f1f1f1; border-radius: 8px; opacity: 0.9;81  }82 83  /* Simple SVG icon coloring */84  svg { width: 56px; height: 56px; fill: none; stroke: #cfd6dc; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }85  .icon-solid svg { fill: #cfd6dc; stroke: none; }86</style>87</head>88<body>89<div id="render-target">90  <div class="statusbar"></div>91 92  <div class="appbar">93    <div class="back">94      <!-- Back arrow -->95      <svg viewBox="0 0 24 24">96        <path d="M15 18l-6-6 6-6"/>97      </svg>98    </div>99    <div class="title">Preferences</div>100  </div>101 102  <div class="content">103    <div class="scroll">104      <!-- Route Preference -->105      <div class="section-title">Route Preference</div>106 107      <div class="item">108        <div class="icon icon-solid">109          <!-- Trophy simplified -->110          <svg viewBox="0 0 24 24">111            <path d="M8 4h8v2a3 3 0 0 0 3 3h1v2a5 5 0 0 1-4 5v2H8v-2a5 5 0 0 1-4-5V9h1a3 3 0 0 0 3-3z"/>112            <path d="M9 20h6v2H9z"/>113          </svg>114        </div>115        <div class="label-wrap">116          <div class="label">Best route</div>117        </div>118        <div class="radio on"></div>119      </div>120 121      <div class="item">122        <div class="icon">123          <!-- Walking person -->124          <svg viewBox="0 0 24 24">125            <circle cx="12" cy="4" r="2.3" />126            <path d="M8.5 22l2.2-5.2m1.5-6.8l-3 4.2m3-4.2l3.1 2m-3.1 2.2l3.8 7.8M6 12l3.2-1.4" />127          </svg>128        </div>129        <div class="label-wrap">130          <div class="label">Least walking</div>131        </div>132        <div class="radio"></div>133      </div>134 135      <div class="item">136        <div class="icon">137          <!-- Transfers arrows -->138          <svg viewBox="0 0 24 24">139            <path d="M5 7h10l-2-2m2 2l-2 2M19 17H9l2 2m-2-2l2-2"/>140          </svg>141        </div>142        <div class="label-wrap">143          <div class="label">Fewest transfers</div>144        </div>145        <div class="radio"></div>146      </div>147 148      <div class="group-divider"></div>149 150      <!-- Transport Type Preferences -->151      <div class="section-title">Transport Type Preferences</div>152      <div class="section-sub">The selected transport types will get higher priority in your suggested routes</div>153 154      <div class="item">155        <div class="icon icon-solid">156          <!-- Bus -->157          <svg viewBox="0 0 24 24">158            <rect x="4" y="4" width="16" height="12" rx="2" />159            <circle cx="8" cy="18" r="1.7"/>160            <circle cx="16" cy="18" r="1.7"/>161            <path d="M4 10h16"/>162          </svg>163        </div>164        <div class="label-wrap">165          <div class="label">Bus</div>166        </div>167        <div class="toggle on"></div>168      </div>169 170      <div class="item">171        <div class="icon icon-solid">172          <!-- Train -->173          <svg viewBox="0 0 24 24">174            <rect x="5" y="4" width="14" height="11" rx="2"/>175            <path d="M8 18l-2 2m10-2l2 2M6 11h12"/>176            <circle cx="10" cy="13.5" r="1.3"/>177            <circle cx="14" cy="13.5" r="1.3"/>178          </svg>179        </div>180        <div class="label-wrap">181          <div class="label">Train</div>182        </div>183        <div class="toggle"></div>184      </div>185 186      <div class="item">187        <div class="icon icon-solid">188          <!-- Metro (subway) -->189          <svg viewBox="0 0 24 24">190            <rect x="6" y="4" width="12" height="12" rx="4"/>191            <path d="M7 16l-2 3m12-3l2 3"/>192            <circle cx="10" cy="12" r="1.3"/>193            <circle cx="14" cy="12" r="1.3"/>194          </svg>195        </div>196        <div class="label-wrap">197          <div class="label">Metro</div>198        </div>199        <div class="toggle"></div>200      </div>201 202      <div class="item">203        <div class="icon">204          <!-- Bike -->205          <svg viewBox="0 0 24 24">206            <circle cx="6" cy="17" r="3.5"/>207            <circle cx="18" cy="17" r="3.5"/>208            <path d="M6 17l5-8h3l-2 4h4"/>209            <path d="M11 9l-2-3h3"/>210          </svg>211        </div>212        <div class="label-wrap">213          <div class="label">Bike</div>214        </div>215        <div class="toggle on"></div>216      </div>217 218      <div class="group-divider"></div>219 220      <!-- Personal Preferences -->221      <div class="section-title">Personal Preferences</div>222      <div class="section-sub">Adjust the routes according to your preferences</div>223 224      <div class="item">225        <div class="icon">226          <!-- Walk icon -->227          <svg viewBox="0 0 24 24">228            <circle cx="12" cy="4" r="2.3" />229            <path d="M8.5 22l2.2-5.2m1.5-6.8l-3 4.2m3-4.2l3.1 2m-3.1 2.2l3.8 7.8M6 12l3.2-1.4" />230          </svg>231        </div>232        <div class="label-wrap">233          <div class="label">Walk Options</div>234          <div class="sublabel">Maximum walking duration, walking pace</div>235        </div>236        <div class="icon">237          <!-- Chevron -->238          <svg viewBox="0 0 24 24">239            <path d="M9 6l6 6-6 6"/>240          </svg>241        </div>242      </div>243 244      <div style="height: 420px;"></div>245    </div>246  </div>247 248  <div class="gesture"></div>249</div>250</body>251</html>