GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Profile Settings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #ffffff;13    color: #222222;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 88px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    color: #333;28    font-size: 34px;29  }30  .status-left, .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #555; stroke-width: 4; }36 37  /* Page header */38  .page-title {39    position: absolute;40    top: 120px;41    width: 100%;42    text-align: center;43    font-weight: 700;44    font-size: 68px;45    letter-spacing: 0.5px;46  }47  .done-btn {48    position: absolute;49    right: 40px;50    top: 128px;51    font-size: 44px;52    color: #ff7a55;53    font-weight: 600;54  }55 56  /* Content area */57  .content {58    position: absolute;59    top: 240px;60    left: 0;61    width: 100%;62    padding: 0 56px;63  }64 65  /* Profile row */66  .profile-row {67    display: flex;68    align-items: center;69    gap: 48px;70  }71  .avatar {72    width: 220px;73    height: 220px;74    border-radius: 110px;75    background: #f4c24f;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #1f1f1f;80    font-weight: 800;81    font-size: 120px;82  }83  .profile-info {84    display: flex;85    flex-direction: column;86    justify-content: center;87    gap: 18px;88  }89  .name {90    font-size: 58px;91    font-weight: 700;92  }93  .edit-link {94    font-size: 42px;95    color: #ff7a55;96    font-weight: 600;97  }98 99  /* Upgrade card */100  .upgrade-card {101    margin-top: 60px;102    background: #fff4ea;103    border-radius: 36px;104    padding: 56px 48px;105    border: 1px solid #f0e2d5;106  }107  .upgrade-title {108    text-align: center;109    font-size: 56px;110    font-weight: 800;111    margin-bottom: 24px;112  }113  .upgrade-text {114    text-align: center;115    font-size: 40px;116    line-height: 1.4;117    color: #3b3b3b;118    max-width: 900px;119    margin: 0 auto 40px auto;120  }121  .upgrade-btn {122    width: 540px;123    margin: 0 auto;124    background: #2f5d4a;125    color: #ffffff;126    font-size: 44px;127    font-weight: 700;128    padding: 28px 20px;129    text-align: center;130    border-radius: 80px;131  }132 133  /* Section headers */134  .section-title {135    margin-top: 56px;136    font-size: 50px;137    font-weight: 800;138  }139 140  /* Rows */141  .row {142    display: flex;143    align-items: center;144    justify-content: space-between;145    padding: 34px 8px;146    font-size: 44px;147  }148  .row .left {149    display: flex;150    align-items: center;151    gap: 28px;152  }153  .divider {154    width: 100%;155    height: 2px;156    background: #e5e5e5;157    margin: 16px 0 26px 0;158  }159 160  /* Icons */161  .list-icon svg { width: 72px; height: 72px; stroke: #1d1d1d; stroke-width: 8; fill: none; }162 163  /* Home indicator */164  .home-indicator {165    position: absolute;166    bottom: 36px;167    left: 50%;168    transform: translateX(-50%);169    width: 520px;170    height: 16px;171    background: #c9c9c9;172    border-radius: 16px;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status Bar -->180  <div class="status-bar">181    <div class="status-left">182      <div>6:01</div>183      <div class="status-icon">184        <!-- Mail icon -->185        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 5l9 7 9-7"/></svg>186      </div>187      <div class="status-icon">188        <!-- Gear icon (simple) -->189        <svg viewBox="0 0 24 24">190          <circle cx="12" cy="12" r="4"/>191          <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.6 4.6l2.8 2.8M16.6 16.6l2.8 2.8M19.4 4.6l-2.8 2.8M4.6 19.4l2.8-2.8"/>192        </svg>193      </div>194    </div>195    <div class="status-right">196      <div class="status-icon">197        <!-- WiFi -->198        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5"/></svg>199      </div>200      <div class="status-icon">201        <!-- Battery -->202        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2"/>203          <rect x="24" y="9" width="3" height="6" rx="1" fill="#555" stroke="none"/>204          <rect x="4" y="8" width="16" height="8" fill="#555" stroke="none"/>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- Page Title -->211  <div class="page-title">Profile settings</div>212  <div class="done-btn">Done</div>213 214  <!-- Content -->215  <div class="content">216 217    <!-- Profile row -->218    <div class="profile-row">219      <div class="avatar">N</div>220      <div class="profile-info">221        <div class="name">Natalie Larson</div>222        <div class="edit-link">Edit profile</div>223      </div>224    </div>225 226    <!-- Upgrade card -->227    <div class="upgrade-card">228      <div class="upgrade-title">Upgrade to cookbook+</div>229      <div class="upgrade-text">230        Search, collect, and save unlimited recipes from all around the web to your Kitchen Stories cookbooks.231      </div>232      <div class="upgrade-btn">Unlock cookbook+</div>233    </div>234 235    <!-- Account section -->236    <div class="section-title">Account</div>237    <div class="row">238      <div class="left">Current Plan</div>239      <div class="right">Free</div>240    </div>241    <div class="divider"></div>242 243    <!-- System section -->244    <div class="section-title">System</div>245 246    <div class="row">247      <div class="left">248        <div class="list-icon">249          <!-- Globe icon -->250          <svg viewBox="0 0 24 24">251            <circle cx="12" cy="12" r="9"/>252            <path d="M3 12h18M12 3a16 16 0 0 0 0 18M12 3a16 16 0 0 1 0 18"/>253          </svg>254        </div>255        <div>Languages</div>256      </div>257    </div>258 259    <div class="row">260      <div class="left">261        <div class="list-icon">262          <!-- Measuring cup icon -->263          <svg viewBox="0 0 24 24">264            <path d="M5 5h9v14H7a2 2 0 0 1-2-2V5z"/>265            <path d="M14 7h4l1 3-5 0V7z"/>266            <path d="M8 9h5M8 12h5M8 15h5"/>267          </svg>268        </div>269        <div>Measurement System</div>270      </div>271    </div>272 273    <div class="row">274      <div class="left">275        <div class="list-icon">276          <!-- Video autoplay icon -->277          <svg viewBox="0 0 24 24">278            <circle cx="9" cy="12" r="6"/>279            <path d="M7 9v6l5-3z"/>280            <path d="M16 7c2 1 3 3 3 5s-1 4-3 5"/>281          </svg>282        </div>283        <div>Video autoplay</div>284      </div>285    </div>286 287    <div class="row">288      <div class="left">289        <div class="list-icon">290          <!-- Bell icon -->291          <svg viewBox="0 0 24 24">292            <path d="M12 3c-3 0-5 2-5 5v3c0 1-1 2-2 3l-1 1h16l-1-1c-1-1-2-2-2-3V8c0-3-2-5-5-5z"/>293            <path d="M9 19c1.5 2 4.5 2 6 0"/>294          </svg>295        </div>296        <div>Notifications</div>297      </div>298    </div>299 300  </div>301 302  <!-- Home indicator -->303  <div class="home-indicator"></div>304 305</div>306</body>307</html>