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>Profile Settings UI</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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top status bar */18  .status-bar {19    height: 140px;20    background: #0E3A57;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    box-sizing: border-box;26  }27  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }28  .status-dot { width: 12px; height: 12px; background: #d7e6f3; border-radius: 50%; opacity: 0.9; }29 30  /* Sections & list */31  .content { padding-bottom: 220px; } /* room for bottom nav */32  .list {33    background: #fff;34  }35  .list-item {36    display: flex;37    align-items: center;38    padding: 34px 42px;39    gap: 36px;40    border-bottom: 1px solid #E5E6E8;41  }42  .list-item .text {43    font-size: 40px;44    color: #212121;45    flex: 1;46  }47  .chevron {48    width: 40px;49    height: 40px;50  }51  .icon {52    width: 64px;53    height: 64px;54    color: #0B5CAD; /* blue icons */55    flex-shrink: 0;56  }57 58  .section-sep {59    height: 10px;60    background: #F0C419;61    border-top: 1px solid #E9B90A;62    border-bottom: 1px solid #F5D34F;63  }64  .section {65    padding: 36px 42px 8px 42px;66  }67  .section h2 {68    margin: 0 0 12px 0;69    font-size: 52px;70    color: #222;71    font-weight: 700;72  }73 74  /* Bottom navigation */75  .bottom-nav {76    position: absolute;77    bottom: 0;78    left: 0;79    width: 1080px;80    height: 190px;81    background: #FFFFFF;82    border-top: 1px solid #E2E3E5;83    display: flex;84    justify-content: space-around;85    align-items: center;86  }87  .nav-item {88    width: 20%;89    text-align: center;90    color: #7A828A;91  }92  .nav-item .label {93    margin-top: 12px;94    font-size: 32px;95  }96  .nav-item .nav-icon {97    width: 56px;98    height: 56px;99    color: #7A828A;100  }101  .nav-item.active .nav-icon,102  .nav-item.active .label {103    color: #0B5CAD;104    font-weight: 600;105  }106</style>107</head>108<body>109<div id="render-target">110  <!-- Status bar -->111  <div class="status-bar">112    <div style="font-size:36px; opacity:0.9;">1:51</div>113    <div class="status-icons">114      <!-- simple status-like shapes -->115      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">116        <rect x="3" y="7" width="18" height="10" rx="2" stroke="#D7E6F3" stroke-width="2"></rect>117        <rect x="6" y="10" width="8" height="4" fill="#D7E6F3"></rect>118      </svg>119      <div style="font-size:32px; opacity:0.8;">83°</div>120      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">121        <path d="M3 5h18v14H3z" stroke="#D7E6F3" stroke-width="2"></path>122        <path d="M3 9h18" stroke="#D7E6F3" stroke-width="2"></path>123      </svg>124      <div class="status-dot"></div>125      <svg width="36" height="36" viewBox="0 0 24 24" fill="#D7E6F3">126        <path d="M18 6v12l-6-4-6 4V6h12z"></path>127      </svg>128      <svg width="36" height="36" viewBox="0 0 24 24" fill="#D7E6F3">129        <path d="M16 3H8l-2 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7l-2-4zM9 3h6v2H9V3z"></path>130      </svg>131    </div>132  </div>133 134  <div class="content">135    <div class="list">136      <!-- Stored travelers -->137      <div class="list-item">138        <svg class="icon" viewBox="0 0 24 24">139          <circle cx="8" cy="7" r="3" fill="currentColor"></circle>140          <circle cx="15.5" cy="9.5" r="2.5" fill="currentColor"></circle>141          <rect x="5" y="12" width="8" height="6" rx="3" fill="currentColor"></rect>142          <rect x="13" y="13" width="6" height="4" rx="2" fill="currentColor"></rect>143        </svg>144        <div class="text">Stored travelers</div>145        <svg class="chevron" viewBox="0 0 24 24">146          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>147        </svg>148      </div>149 150      <!-- Account and settings -->151      <div class="list-item">152        <svg class="icon" viewBox="0 0 24 24">153          <circle cx="12" cy="12" r="4" fill="currentColor"></circle>154          <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8" stroke="currentColor" stroke-width="2"></path>155        </svg>156        <div class="text">Account and settings</div>157        <svg class="chevron" viewBox="0 0 24 24">158          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>159        </svg>160      </div>161 162      <!-- Payment methods -->163      <div class="list-item">164        <svg class="icon" viewBox="0 0 24 24">165          <rect x="3" y="5" width="18" height="14" rx="2" fill="currentColor"></rect>166          <rect x="6" y="9" width="8" height="2" fill="#ffffff" opacity="0.9"></rect>167        </svg>168        <div class="text">Payment methods</div>169        <svg class="chevron" viewBox="0 0 24 24">170          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171        </svg>172      </div>173 174      <!-- Manage your bookings -->175      <div class="list-item">176        <svg class="icon" viewBox="0 0 24 24">177          <rect x="4" y="8" width="16" height="10" rx="2" fill="currentColor"></rect>178          <rect x="9" y="5" width="6" height="3" rx="1.5" fill="currentColor"></rect>179        </svg>180        <div class="text">Manage your bookings</div>181        <svg class="chevron" viewBox="0 0 24 24">182          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183        </svg>184      </div>185    </div>186 187    <div class="section-sep"></div>188 189    <!-- Questions section -->190    <div class="section">191      <h2>Questions?</h2>192    </div>193    <div class="list">194      <div class="list-item">195        <svg class="icon" viewBox="0 0 24 24">196          <circle cx="12" cy="12" r="10" fill="currentColor"></circle>197          <path d="M11 16h2M9.5 9.5a3.5 3.5 0 0 1 5 0c0 1.5-1.5 2-2.5 2.8-.7.6-1 1.2-1 1.7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>198        </svg>199        <div class="text">Help center</div>200        <svg class="chevron" viewBox="0 0 24 24">201          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>202        </svg>203      </div>204 205      <div class="list-item">206        <svg class="icon" viewBox="0 0 24 24">207          <path d="M12 3l10 18H2L12 3z" fill="currentColor"></path>208          <rect x="11" y="10" width="2" height="6" fill="#ffffff"></rect>209          <rect x="11" y="17.5" width="2" height="2" fill="#ffffff"></rect>210        </svg>211        <div class="text">COVID-19 travel info</div>212        <svg class="chevron" viewBox="0 0 24 24">213          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>214        </svg>215      </div>216 217      <div class="list-item">218        <svg class="icon" viewBox="0 0 24 24">219          <path d="M4 5h16v10H8l-4 4V5z" fill="currentColor"></path>220        </svg>221        <div class="text">Let's chat</div>222        <svg class="chevron" viewBox="0 0 24 24">223          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>224        </svg>225      </div>226 227      <div class="list-item">228        <svg class="icon" viewBox="0 0 24 24">229          <rect x="3" y="6" width="18" height="12" rx="2" fill="currentColor"></rect>230          <path d="M3 8l9 5 9-5" stroke="#ffffff" stroke-width="2" fill="none"></path>231        </svg>232        <div class="text">Messages</div>233        <svg class="chevron" viewBox="0 0 24 24">234          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>235        </svg>236      </div>237    </div>238 239    <div class="section-sep" style="margin-top:6px;"></div>240 241    <!-- About the app -->242    <div class="section">243      <h2>About the app</h2>244    </div>245    <div class="list">246      <div class="list-item">247        <svg class="icon" viewBox="0 0 24 24">248          <path d="M6 3h9l3 3v15H6z" fill="currentColor"></path>249          <path d="M13 3v4h5" stroke="#ffffff" stroke-width="2"></path>250        </svg>251        <div class="text">Terms and Conditions</div>252        <svg class="chevron" viewBox="0 0 24 24">253          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>254        </svg>255      </div>256 257      <div class="list-item">258        <svg class="icon" viewBox="0 0 24 24">259          <circle cx="6" cy="12" r="3" fill="currentColor"></circle>260          <circle cx="18" cy="6" r="3" fill="currentColor"></circle>261          <circle cx="18" cy="18" r="3" fill="currentColor"></circle>262          <path d="M8.6 11.2l7-4.2M8.6 12.8l7 4.2" stroke="currentColor" stroke-width="2"></path>263        </svg>264        <div class="text">Share the app</div>265        <svg class="chevron" viewBox="0 0 24 24">266          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>267        </svg>268      </div>269 270      <div class="list-item">271        <svg class="icon" viewBox="0 0 24 24">272          <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="currentColor"></path>273        </svg>274        <div class="text">Enjoying the eDreams app?</div>275        <svg class="chevron" viewBox="0 0 24 24">276          <path d="M8 4l8 8-8 8" stroke="#9CA3AF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>277        </svg>278      </div>279    </div>280  </div>281 282  <!-- Bottom navigation -->283  <div class="bottom-nav">284    <div class="nav-item">285      <svg class="nav-icon" viewBox="0 0 24 24">286        <circle cx="11" cy="11" r="7" fill="currentColor"></circle>287        <path d="M16.5 16.5l5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>288      </svg>289      <div class="label">Search</div>290    </div>291    <div class="nav-item">292      <svg class="nav-icon" viewBox="0 0 24 24">293        <path d="M4 12l8-8 8 8-8 8-8-8z" fill="currentColor"></path>294        <rect x="9" y="9" width="6" height="6" fill="#fff" opacity="0.8"></rect>295      </svg>296      <div class="label">Deals</div>297    </div>298    <div class="nav-item">299      <svg class="nav-icon" viewBox="0 0 24 24">300        <rect x="5" y="8" width="14" height="10" rx="2" fill="currentColor"></rect>301        <rect x="9" y="5" width="6" height="3" rx="1.5" fill="currentColor"></rect>302      </svg>303      <div class="label">My trips</div>304    </div>305    <div class="nav-item">306      <svg class="nav-icon" viewBox="0 0 24 24">307        <rect x="5" y="7" width="14" height="11" rx="2" fill="currentColor"></rect>308        <path d="M15 7v-2H9v2" stroke="currentColor" stroke-width="2"></path>309      </svg>310      <div class="label">Wallet</div>311    </div>312    <div class="nav-item active">313      <svg class="nav-icon" viewBox="0 0 24 24">314        <circle cx="12" cy="8" r="4" fill="currentColor"></circle>315        <rect x="6" y="13" width="12" height="7" rx="3.5" fill="currentColor"></rect>316      </svg>317      <div class="label">Profile</div>318    </div>319  </div>320</div>321</body>322</html>