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>Revised letter - Mock</title>7<style>8  body{9    margin:0;10    padding:0;11    background:transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target{15    width:1080px;16    height:2400px;17    position:relative;18    overflow:hidden;19    background:#2b2322;20  }21  /* Status bar */22  .status-bar{23    height:90px;24    padding:0 36px;25    color:#ffffff;26    display:flex;27    align-items:center;28    justify-content:space-between;29    font-size:34px;30    letter-spacing:0.5px;31    background:#2b2322;32  }33  .status-icons{34    display:flex;35    align-items:center;36    gap:26px;37  }38  .status-icons svg{39    width:36px;height:36px;40  }41  /* Header toolbar */42  .toolbar{43    height:150px;44    padding:0 28px;45    display:flex;46    align-items:center;47    justify-content:space-between;48    background:#2b2322;49  }50  .toolbar-left{51    display:flex;52    align-items:center;53    gap:24px;54  }55  .title{56    color:#d9c3c8;57    font-size:64px;58    font-weight:600;59  }60  .toolbar-right{61    display:flex;62    align-items:center;63    gap:30px;64  }65  .circle-icon{66    width:84px;67    height:84px;68    border-radius:50%;69    background:#6e4e4c;70    display:flex;71    align-items:center;72    justify-content:center;73  }74  .toolbar-right svg{75    width:56px;height:56px;76  }77 78  /* Content area */79  .content{80    position:absolute;81    left:0;82    right:0;83    top:240px; /* 90 + 150 */84    bottom:0;85    background:#000000;86    overflow:hidden;87  }88  .letter{89    padding:40px 64px 24px 64px;90    color:#ffffff;91    font-size:56px;92    line-height:74px;93    font-weight:500;94  }95  .img-block{96    width:960px;97    margin:20px auto;98    background:#E0E0E0;99    border:1px solid #BDBDBD;100    display:flex;101    align-items:center;102    justify-content:center;103    color:#757575;104    text-align:center;105  }106  .img-1{ height:720px; }107  .img-2{ height:880px; }108 109  /* Floating Action Button */110  .fab{111    position:absolute;112    right:90px;113    bottom:320px;114    width:150px;115    height:150px;116    border-radius:50%;117    background:#6b3a36;118    display:flex;119    align-items:center;120    justify-content:center;121    box-shadow:0 8px 18px rgba(0,0,0,0.4);122  }123  .fab svg{ width:80px;height:80px; }124 125  /* Home pill */126  .home-pill{127    position:absolute;128    left:50%;129    transform:translateX(-50%);130    bottom:34px;131    width:400px;132    height:14px;133    background:#ffffff;134    border-radius:14px;135    opacity:0.95;136  }137</style>138</head>139<body>140<div id="render-target">141  <!-- Simulated status bar -->142  <div class="status-bar">143    <div class="time">7:43</div>144    <div class="status-icons">145      <!-- Location icon -->146      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">147        <path d="M12 22s7-7.3 7-12a7 7 0 1 0-14 0c0 4.7 7 12 7 12z"/>148        <circle cx="12" cy="10" r="2.5" fill="#fff"/>149      </svg>150      <!-- WiFi icon -->151      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">152        <path d="M2 8c5.5-5 14.5-5 20 0"/>153        <path d="M5 11.5c4-3.6 10-3.6 14 0"/>154        <path d="M8.5 15c2.2-2 4.8-2 7 0"/>155        <circle cx="12" cy="18.5" r="1.5" fill="#fff" stroke="none"/>156      </svg>157      <!-- Battery icon -->158      <svg viewBox="0 0 26 16" fill="none" stroke="#fff" stroke-width="2">159        <rect x="1" y="3" width="20" height="10" rx="2" />160        <rect x="22" y="6" width="3" height="4" rx="1" fill="#fff" stroke="none"/>161        <rect x="3" y="5" width="16" height="6" rx="1" fill="#fff" stroke="none"/>162      </svg>163    </div>164  </div>165 166  <!-- Toolbar -->167  <div class="toolbar">168    <div class="toolbar-left">169      <!-- Back arrow -->170      <svg viewBox="0 0 24 24" fill="none" stroke="#d9c3c8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">171        <path d="M15 18l-6-6 6-6"/>172      </svg>173      <div class="title">Revised letter</div>174    </div>175    <div class="toolbar-right">176      <div class="circle-icon">177        <!-- person-add icon -->178        <svg viewBox="0 0 24 24" fill="none" stroke="#f1e7e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">179          <circle cx="11" cy="9" r="3"/>180          <path d="M4 20c0-3.3 3.6-6 7-6s7 2.7 7 6"/>181          <path d="M4 9h4"/>182          <path d="M6 7v4"/>183        </svg>184      </div>185      <!-- Chat/notes icon -->186      <svg viewBox="0 0 24 24" fill="none" stroke="#d9c3c8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">187        <rect x="4" y="4" width="16" height="14" rx="2"/>188        <path d="M8 8h8M8 12h8"/>189      </svg>190      <!-- Kebab menu -->191      <svg viewBox="0 0 24 24" fill="#d9c3c8">192        <circle cx="12" cy="5" r="2"/>193        <circle cx="12" cy="12" r="2"/>194        <circle cx="12" cy="19" r="2"/>195      </svg>196    </div>197  </div>198 199  <!-- Content -->200  <div class="content">201    <div class="letter">202      To,<br>203      The manager<br>204      Globalogic<br>205      Gawal pahari ,206    </div>207 208    <div class="img-block img-1">[IMG: Spreadsheet on laptop screen]</div>209    <div class="img-block img-2">[IMG: Laptop keyboard close-up]</div>210 211    <!-- Floating action button with pencil -->212    <div class="fab">213      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">214        <path d="M3 17.25V21h3.75L18.81 8.94l-3.75-3.75L3 17.25z"/>215        <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#fff" stroke="none"/>216      </svg>217    </div>218  </div>219 220  <div class="home-pill"></div>221</div>222</body>223</html>