GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Profile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #1a1a1a;24    color: #eaeaea;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 26px;36    align-items: center;37  }38  .status-dot {39    width: 12px;40    height: 12px;41    background: #cfcfcf;42    border-radius: 50%;43  }44  .status-rect {45    width: 36px;46    height: 28px;47    border: 2px solid #cfcfcf;48    border-radius: 4px;49    position: relative;50  }51  .wifi {52    width: 40px;53    height: 40px;54  }55  .wifi path { fill: none; stroke: #cfcfcf; stroke-width: 6; }56  .battery {57    width: 52px; height: 26px; border: 2px solid #cfcfcf; border-radius: 4px; position: relative;58  }59  .battery::after {60    content: "";61    position: absolute; right: -10px; top: 6px;62    width: 8px; height: 12px; background: #cfcfcf; border-radius: 2px;63  }64 65  /* Header title */66  .page-title {67    position: absolute;68    top: 150px;69    left: 40px;70    font-size: 72px;71    font-weight: 700;72  }73  .settings-btn {74    position: absolute;75    top: 150px;76    right: 40px;77    width: 70px;78    height: 70px;79  }80  .settings-btn svg { width: 70px; height: 70px; }81  .settings-btn circle { fill: none; stroke: #cfcfcf; stroke-width: 5; }82  .settings-btn .spoke { stroke: #cfcfcf; stroke-width: 5; }83 84  /* User info row */85  .user-row {86    position: absolute;87    top: 250px;88    left: 40px;89    right: 40px;90    display: flex;91    align-items: center;92  }93  .avatar {94    width: 230px;95    height: 230px;96    background: #ffd84d;97    border-radius: 12px;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #111;102    font-weight: 800;103    font-size: 140px;104  }105  .user-info {106    margin-left: 40px;107    display: flex;108    flex-direction: column;109    gap: 18px;110  }111  .user-name { font-size: 60px; font-weight: 700; }112  .user-role { font-size: 38px; color: #b7b7b7; }113  .edit-btn {114    width: 300px;115    padding: 18px 28px;116    border: 2px solid #2e7d32;117    color: #91d39b;118    border-radius: 40px;119    font-size: 42px;120    text-align: center;121  }122 123  /* Tabs */124  .tabs {125    position: absolute;126    top: 520px;127    left: 40px;128    right: 40px;129    display: flex;130    gap: 60px;131    align-items: center;132    font-size: 48px;133  }134  .tab { color: #cfcfcf; padding-bottom: 16px; }135  .tab.active { color: #ff8a56; position: relative; }136  .tab.active::after {137    content: "";138    position: absolute;139    left: 0; bottom: -6px;140    width: 160px; height: 6px; background: #ff8a56; border-radius: 3px;141  }142 143  /* Cookbook card */144  .cookbook-card {145    position: absolute;146    top: 640px;147    left: 40px;148    width: 680px;149    border-radius: 28px;150    overflow: hidden;151    background: #1c1c1c;152    box-shadow: 0 10px 30px rgba(0,0,0,0.35);153  }154  .card-grid {155    display: grid;156    grid-template-columns: 360px 320px;157    grid-template-rows: 360px 220px;158    gap: 0;159    height: 580px;160  }161  .img-ph {162    background: #E0E0E0;163    border: 1px solid #BDBDBD;164    display: flex;165    align-items: center;166    justify-content: center;167    color: #757575;168    font-size: 34px;169    text-align: center;170    padding: 10px;171    box-sizing: border-box;172  }173  .img-top-left { grid-column: 1; grid-row: 1; }174  .img-bottom-left { grid-column: 1; grid-row: 2; }175  .img-right { grid-column: 2 / span 1; grid-row: 1 / span 2; background: #232323; border: none; color: #bdbdbd; }176 177  .card-body {178    padding: 24px 28px 30px;179  }180  .card-title { font-size: 48px; font-weight: 700; margin-bottom: 10px; }181  .card-sub { font-size: 36px; color: #b7b7b7; }182 183  /* Floating action button */184  .fab {185    position: absolute;186    right: 70px;187    bottom: 330px;188    width: 150px;189    height: 150px;190    background: #f28a64;191    border-radius: 50%;192    display: flex;193    align-items: center;194    justify-content: center;195    box-shadow: 0 14px 24px rgba(0,0,0,0.45);196  }197  .fab svg { width: 72px; height: 72px; }198  .fab line { stroke: #fff; stroke-width: 12; stroke-linecap: round; }199 200  /* Bottom navigation */201  .bottom-nav {202    position: absolute;203    bottom: 0;204    left: 0;205    width: 1080px;206    height: 200px;207    background: #161616;208    border-top: 1px solid #232323;209    display: flex;210    align-items: center;211    justify-content: space-around;212    color: #cfcfcf;213  }214  .nav-item {215    display: flex;216    flex-direction: column;217    align-items: center;218    gap: 16px;219    font-size: 32px;220    color: #cfcfcf;221  }222  .nav-item .label { color: #b7b7b7; }223  .nav-item.active .label { color: #f28a64; }224  .nav-icon { width: 60px; height: 60px; }225  .nav-icon path, .nav-icon rect, .nav-icon circle { stroke: #cfcfcf; fill: none; stroke-width: 6; }226  .nav-item.active .nav-icon path, .nav-item.active .nav-icon rect, .nav-item.active .nav-icon circle { stroke: #f28a64; }227  .nav-plus {228    width: 78px; height: 78px; background: #2a2a2a; border-radius: 50%;229    display: flex; align-items: center; justify-content: center;230  }231  .nav-plus svg { width: 40px; height: 40px; }232  .nav-plus line { stroke: #cfcfcf; stroke-width: 8; stroke-linecap: round; }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- Status Bar -->239  <div class="status-bar">240    <div>7:40</div>241    <div class="status-icons">242      <div class="status-rect"></div>243      <svg class="wifi" viewBox="0 0 50 50">244        <path d="M5 20 C20 5, 30 5, 45 20"></path>245        <path d="M12 27 C20 19, 30 19, 38 27"></path>246        <path d="M20 34 C24 30, 26 30, 30 34"></path>247        <circle cx="25" cy="40" r="3" fill="#cfcfcf"></circle>248      </svg>249      <div class="battery"></div>250    </div>251  </div>252 253  <!-- Header -->254  <div class="page-title">Profile</div>255  <div class="settings-btn">256    <svg viewBox="0 0 100 100">257      <circle cx="50" cy="50" r="26"></circle>258      <line class="spoke" x1="50" y1="12" x2="50" y2="0"></line>259      <line class="spoke" x1="50" y1="100" x2="50" y2="88"></line>260      <line class="spoke" x1="12" y1="50" x2="0" y2="50"></line>261      <line class="spoke" x1="100" y1="50" x2="88" y2="50"></line>262      <line class="spoke" x1="78" y1="22" x2="88" y2="12"></line>263      <line class="spoke" x1="22" y1="78" x2="12" y2="88"></line>264      <line class="spoke" x1="22" y1="22" x2="12" y2="12"></line>265      <line class="spoke" x1="78" y1="78" x2="88" y2="88"></line>266    </svg>267  </div>268 269  <!-- User info -->270  <div class="user-row">271    <div class="avatar">J</div>272    <div class="user-info">273      <div class="user-name">Jane</div>274      <div class="user-role">Community</div>275      <div class="edit-btn">Edit Profile</div>276    </div>277  </div>278 279  <!-- Tabs -->280  <div class="tabs">281    <div class="tab active">Cookbooks</div>282    <div class="tab">Recipes</div>283    <div class="tab">Likes</div>284  </div>285 286  <!-- Cookbook Card -->287  <div class="cookbook-card">288    <div class="card-grid">289      <div class="img-ph img-top-left">[IMG: Pasta with Greens in Pan]</div>290      <div class="img-ph img-bottom-left">[IMG: Spaghetti Plate]</div>291      <div class="img-ph img-right">[IMG Placeholder]</div>292    </div>293    <div class="card-body">294      <div class="card-title">My first cookbook</div>295      <div class="card-sub">2 entries</div>296    </div>297  </div>298 299  <!-- Floating Action Button -->300  <div class="fab">301    <svg viewBox="0 0 100 100">302      <line x1="50" y1="22" x2="50" y2="78"></line>303      <line x1="22" y1="50" x2="78" y2="50"></line>304    </svg>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="nav-item">310      <svg class="nav-icon" viewBox="0 0 64 64">311        <path d="M6 28 L32 8 L58 28"></path>312        <rect x="16" y="28" width="32" height="28" rx="4"></rect>313      </svg>314      <div class="label">Home</div>315    </div>316 317    <div class="nav-item">318      <svg class="nav-icon" viewBox="0 0 64 64">319        <circle cx="28" cy="28" r="16"></circle>320        <line x1="42" y1="42" x2="58" y2="58"></line>321      </svg>322      <div class="label">Search</div>323    </div>324 325    <div class="nav-item">326      <div class="nav-plus">327        <svg viewBox="0 0 64 64">328          <line x1="32" y1="16" x2="32" y2="48"></line>329          <line x1="16" y1="32" x2="48" y2="32"></line>330        </svg>331      </div>332      <div class="label">Create</div>333    </div>334 335    <div class="nav-item">336      <svg class="nav-icon" viewBox="0 0 64 64">337        <rect x="16" y="10" width="32" height="44" rx="6"></rect>338        <line x1="24" y1="20" x2="40" y2="20"></line>339        <line x1="24" y1="30" x2="40" y2="30"></line>340        <line x1="24" y1="40" x2="40" y2="40"></line>341      </svg>342      <div class="label">Shopping List</div>343    </div>344 345    <div class="nav-item active">346      <svg class="nav-icon" viewBox="0 0 64 64">347        <circle cx="32" cy="20" r="10"></circle>348        <path d="M14 54 C14 40, 50 40, 50 54"></path>349      </svg>350      <div class="label">Profile</div>351    </div>352  </div>353 354</div>355</body>356</html>