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>Revised letter UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2b2221; /* app dark brown backdrop */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    height: 100px;22    background: #3a2f2e;23    color: #d9d1cf;24    display: flex;25    align-items: center;26    padding: 0 36px;27    font-size: 36px;28  }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .status-icon svg { display: block; }36 37  /* App bar */38  .app-bar {39    height: 180px;40    background: #3a2f2e;41    display: flex;42    align-items: center;43    padding: 0 32px;44    box-sizing: border-box;45  }46  .back-btn {47    width: 80px;48    height: 80px;49    display: flex;50    align-items: center;51    justify-content: center;52    margin-right: 24px;53  }54  .title-wrap {55    display: flex;56    flex-direction: column;57    justify-content: center;58  }59  .note-title {60    font-size: 68px;61    font-weight: 600;62    line-height: 1.1;63    color: #f0eae7;64  }65  .note-subtitle {66    font-size: 32px;67    color: #b9aea9;68    margin-top: 8px;69  }70  .app-actions {71    margin-left: auto;72    display: flex;73    align-items: center;74    gap: 32px;75  }76  .circle-btn {77    width: 96px;78    height: 96px;79    background: #7e524c;80    border-radius: 50%;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .square-btn {86    width: 96px;87    height: 96px;88    border-radius: 18px;89    background: #6a4641;90    display: flex;91    align-items: center;92    justify-content: center;93  }94  .kebab {95    width: 60px;96    height: 96px;97    display: flex;98    align-items: center;99    justify-content: center;100  }101 102  /* Content area (note) */103  .content {104    position: absolute;105    left: 0;106    top: 280px; /* 100 + 180 */107    width: 100%;108    height: calc(100% - 280px);109    background: #000;110    overflow: hidden;111  }112  .note-body {113    padding: 60px 60px 160px 60px;114    box-sizing: border-box;115  }116 117  .line { font-size: 44px; color: #ffffff; margin: 18px 0; }118  .line.grey { color: #c8c8c8; }119  .big-line { font-size: 82px; color: #bdbdbd; margin: 20px 0 40px 0; }120  .underline-red {121    text-decoration: underline;122    text-decoration-color: #c85c5c;123  }124  .paragraph {125    font-size: 40px;126    line-height: 1.5;127    color: #f6f6f6;128    margin: 24px 0 36px 0;129    max-width: 920px;130  }131 132  /* Image placeholders */133  .img-placeholder {134    width: 960px;135    height: 560px;136    background: #E0E0E0;137    border: 1px solid #BDBDBD;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #757575;142    font-size: 32px;143    margin: 40px 0;144  }145  .img-small {146    width: 920px;147    height: 480px;148  }149 150  /* Floating edit button */151  .fab {152    position: absolute;153    right: 44px;154    bottom: 220px;155    width: 132px;156    height: 132px;157    border-radius: 50%;158    background: #7e524c;159    box-shadow: 0 10px 20px rgba(0,0,0,0.4);160    display: flex;161    align-items: center;162    justify-content: center;163  }164 165  /* Bottom pill (gesture bar) */166  .home-pill {167    position: absolute;168    bottom: 48px;169    left: 50%;170    transform: translateX(-50%);171    width: 300px;172    height: 18px;173    background: #ffffff;174    border-radius: 10px;175    opacity: 0.85;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- Status Bar -->182  <div class="status-bar">183    <div class="time">7:58</div>184    <div class="status-right">185      <div class="status-icon">186        <!-- Location pin -->187        <svg width="36" height="36" viewBox="0 0 24 24">188          <path fill="#e8dfdc" d="M12 3c-3.3 0-6 2.6-6 5.8 0 4.6 6 11.2 6 11.2s6-6.6 6-11.2C18 5.6 15.3 3 12 3zm0 8.2c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/>189        </svg>190      </div>191      <div class="status-icon">192        <!-- WiFi -->193        <svg width="36" height="36" viewBox="0 0 24 24">194          <path fill="#e8dfdc" d="M12 18.5l1.8-1.8c-1-1-2.6-1-3.6 0L12 18.5z"/>195          <path fill="#e8dfdc" d="M4.5 11.7l1.7 1.7c3.1-3.1 8.1-3.1 11.2 0l1.7-1.7c-4.1-4.1-10.5-4.1-14.6 0z"/>196          <path fill="#e8dfdc" d="M1.8 8.9l1.7 1.7c4.6-4.6 12.1-4.6 16.7 0l1.7-1.7C16.2 3.5 7.8 3.5 1.8 8.9z"/>197        </svg>198      </div>199      <div class="status-icon">200        <!-- Battery -->201        <svg width="50" height="36" viewBox="0 0 28 16">202          <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#e8dfdc" stroke-width="2"/>203          <rect x="3" y="5" width="16" height="6" fill="#e8dfdc"/>204          <rect x="24" y="6" width="3" height="4" rx="1" fill="#e8dfdc"/>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- App Bar -->211  <div class="app-bar">212    <div class="back-btn">213      <svg width="56" height="56" viewBox="0 0 24 24">214        <path fill="#f4ece9" d="M15.5 19l-7-7 7-7v14z"/>215      </svg>216    </div>217    <div class="title-wrap">218      <div class="note-title">Revised letter</div>219      <div class="note-subtitle">All changes saved</div>220    </div>221    <div class="app-actions">222      <div class="circle-btn">223        <!-- person add -->224        <svg width="52" height="52" viewBox="0 0 24 24">225          <path fill="#f4ece9" d="M15 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-7.5 7c0-2.8 3-4.5 7.5-4.5.8 0 1.6.1 2.4.2-.7.5-1.4 1.2-2 2-2.7.1-4.9.7-6.1 1.6-.5.4-.8.9-.8 1.2H7.5zM6 9.5V7H4v2.5H1.5v2H4V14h2v-2.5h2.5v-2H6z"/>226        </svg>227      </div>228      <div class="square-btn">229        <!-- comment bubble -->230        <svg width="54" height="54" viewBox="0 0 24 24">231          <path fill="#f4ece9" d="M4 5h16v10H8l-4 4V5z"/>232        </svg>233      </div>234      <div class="kebab">235        <!-- vertical dots -->236        <svg width="20" height="60" viewBox="0 0 6 18">237          <circle cx="3" cy="3" r="2" fill="#e8dfdc"/>238          <circle cx="3" cy="9" r="2" fill="#e8dfdc"/>239          <circle cx="3" cy="15" r="2" fill="#e8dfdc"/>240        </svg>241      </div>242    </div>243  </div>244 245  <!-- Content -->246  <div class="content">247    <div class="note-body">248      <div class="line">To ,</div>249      <div class="line">The manager</div>250      <div class="line underline-red">Globalogic</div>251      <div class="big-line">Noida sector 89</div>252 253      <div class="line">Gurgaon</div>254 255      <div class="line" style="margin-top: 56px;">Dear sir,</div>256      <div class="paragraph">257        I request you to give me a minimum of 22% increment I would be much obliged to if the company provides me with an increment I would also like to let you know that I am available for further decision regarding this, thanks you in advance for your time and consideration258      </div>259 260      <div class="img-placeholder">[IMG: Spreadsheet on laptop screen]</div>261      <div class="img-placeholder img-small">[IMG: Close-up of laptop keyboard and screen]</div>262    </div>263  </div>264 265  <!-- Floating Edit Button -->266  <div class="fab">267    <!-- pencil icon -->268    <svg width="60" height="60" viewBox="0 0 24 24">269      <path fill="#ffffff" d="M3 17.3V21h3.7l10-10-3.7-3.7-10 10zM18.3 8.7l2-2c.5-.5.5-1.3 0-1.8l-1.2-1.2c-.5-.5-1.3-.5-1.8 0l-2 2 3 3z"/>270    </svg>271  </div>272 273  <!-- Bottom gesture pill -->274  <div class="home-pill"></div>275</div>276</body>277</html>