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>Office Meeting .pptx</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #fafafa;15    border-radius: 0;16    box-shadow: none;17  }18  /* Top bars */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    background: #e97b2e;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 30px;30    box-sizing: border-box;31    font-size: 34px;32  }33  .status-left { display: flex; align-items: center; gap: 18px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35  .header {36    position: absolute;37    top: 100px;38    left: 0;39    width: 1080px;40    height: 150px;41    background: #e97b2e;42    color: #fff;43    display: flex;44    align-items: center;45    box-sizing: border-box;46    padding: 0 28px;47  }48  .hamburger { width: 60px; height: 60px; margin-right: 20px; }49  .title {50    font-size: 44px;51    font-weight: 600;52    flex: 1;53    text-align: center;54  }55  .header-actions {56    display: flex; align-items: center; gap: 28px;57  }58  .header-actions .icon { width: 54px; height: 54px; }59  .edit-text { font-size: 36px; margin-left: 10px; }60  /* Ad banner */61  .ad-banner {62    position: absolute;63    top: 250px;64    left: 0;65    width: 1080px;66    padding: 18px 22px;67    box-sizing: border-box;68    background: #fff;69    border-top: 1px solid #e0e0e0;70    border-bottom: 1px solid #e0e0e0;71  }72  .ad-row { display: grid; grid-template-columns: 1fr 210px; column-gap: 20px; align-items: center; }73  .ad-left { display: flex; flex-direction: column; gap: 10px; }74  .ad-label { font-size: 24px; color: #9e9e9e; margin-bottom: 6px; }75  .ad-title { font-size: 32px; font-weight: 600; color: #333; line-height: 1.2; }76  .ad-sub { font-size: 26px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }77  .ad-btn {78    margin-top: 16px;79    width: 300px; height: 60px;80    background: #db6b6b; color: #fff; border-radius: 8px;81    display: flex; align-items: center; justify-content: center;82    font-size: 30px; font-weight: 600;83  }84  .ad-image {85    width: 210px; height: 150px;86    background: #E0E0E0; border: 1px solid #BDBDBD;87    display: flex; align-items: center; justify-content: center;88    color: #757575; font-size: 22px; text-align: center;89  }90  .ad-info {91    position: absolute; right: 20px; top: 260px;92    width: 28px; height: 28px; border-radius: 50%;93    border: 1px solid #bdbdbd; color: #757575;94    display: flex; align-items: center; justify-content: center;95    font-size: 20px; background: #fff;96  }97  /* Document area */98  .doc-area {99    position: absolute;100    top: 420px;101    left: 0;102    width: 1080px;103    height: 1680px;104    background: #f3f3f3;105    padding: 24px;106    box-sizing: border-box;107  }108  .slide {109    width: 100%;110    height: 100%;111    background: #fff;112    border: 1px solid #e0e0e0;113    box-sizing: border-box;114    position: relative;115    padding: 30px;116  }117  .close-btn {118    position: absolute;119    top: 16px; right: 16px;120    width: 60px; height: 60px;121    border-radius: 50%;122    border: 1px solid #d0d0d0;123    background: #f7f7f7;124    color: #666;125    display: flex; align-items: center; justify-content: center;126    font-size: 36px;127  }128  .slide-title {129    width: 100%;130    text-align: center;131    font-size: 76px;132    font-weight: 600;133    color: #111;134    margin: 40px 0 30px;135  }136  .image-row {137    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;138    margin-top: 10px;139  }140  .img-ph {141    height: 480px;142    background: #E0E0E0;143    border: 1px solid #BDBDBD;144    color: #757575;145    display: flex; align-items: center; justify-content: center;146    font-size: 28px; text-align: center;147  }148  .illustration {149    margin: 80px auto 0;150    width: 760px; height: 520px;151    background: #E0E0E0; border: 1px solid #BDBDBD;152    display: flex; align-items: center; justify-content: center;153    color: #757575; font-size: 28px; text-align: center;154  }155  /* Bottom toolbar */156  .bottom-bar {157    position: absolute;158    left: 0; bottom: 80px;159    width: 1080px; height: 130px;160    background: #f1f1f1; border-top: 1px solid #dcdcdc;161    display: flex; align-items: center; justify-content: space-around;162    box-sizing: border-box; padding: 0 24px;163  }164  .tool {165    display: flex; flex-direction: column; align-items: center; gap: 8px;166    color: #777; font-size: 18px;167  }168  .tool svg { width: 60px; height: 60px; }169  .chevron-up {170    position: absolute; right: 18px; bottom: 16px;171    width: 60px; height: 60px; border-radius: 30px;172    border: 1px solid #cfcfcf; background: #fff;173    display: flex; align-items: center; justify-content: center;174  }175  .home-indicator {176    position: absolute;177    left: 370px; bottom: 20px;178    width: 340px; height: 10px;179    background: #000; border-radius: 5px;180    opacity: 0.85;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="statusbar">189    <div class="status-left">190      <span>9:17</span>191      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">192        <path d="M6 14c0-3 2.5-5.5 5.5-5.5C13 8.5 14.8 9.4 16 11c.9-.6 2-.9 3-.9 2.2 0 4 1.8 4 4.1C23 16.7 21.2 18 19 18H7.5C6 18 5 16.9 5 15.5 5 15 5.2 14.5 6 14z" fill="#fff"/>193      </svg>194    </div>195    <div class="status-right">196      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">197        <path d="M2 12l4-4 4 4M6 16l4-4 4 4" stroke="#fff" stroke-width="2" fill="none"/>198      </svg>199      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">200        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>201        <rect x="4" y="8" width="10" height="8" fill="#fff"/>202        <rect x="20" y="9" width="2" height="6" fill="#fff"/>203      </svg>204    </div>205  </div>206 207  <!-- Header -->208  <div class="header">209    <svg class="hamburger" viewBox="0 0 24 24">210      <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>211    </svg>212    <div class="title">Office Meeting .pptx</div>213    <div class="header-actions">214      <svg class="icon" viewBox="0 0 24 24">215        <path d="M12 3l2.5 5H20l-4 3 1.5 5L12 14l-5.5 2 1.5-5-4-3h5.5L12 3z" fill="#fff"/>216      </svg>217      <svg class="icon" viewBox="0 0 24 24">218        <path d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7l3-7z" fill="#fff"/>219      </svg>220      <svg class="icon" viewBox="0 0 24 24">221        <path d="M12 2a6 6 0 016 6c0 3.3-2.7 6-6 6s-6-2.7-6-6a6 6 0 016-6z" fill="#fff"/>222        <rect x="10" y="16" width="4" height="5" rx="1" fill="#fff"/>223      </svg>224      <svg class="icon" viewBox="0 0 24 24">225        <circle cx="12" cy="8" r="4" fill="#fff"/>226        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#fff"/>227      </svg>228      <div class="edit-text">Edit</div>229    </div>230  </div>231 232  <!-- Ad banner -->233  <div class="ad-banner">234    <div class="ad-label">Ad</div>235    <div class="ad-row">236      <div class="ad-left">237        <div class="ad-title">Corsica Mystic India Set of 3 Wrought...</div>238        <div class="ad-sub">₹1,299 Title:Corsica Mystic India Set of 3 Wrought Iron Kalbeliya Dolls, Color: Multicol...</div>239        <div class="ad-btn">Open</div>240      </div>241      <div class="ad-image">[IMG: Dolls product]</div>242    </div>243  </div>244  <div class="ad-info">i</div>245 246  <!-- Document area -->247  <div class="doc-area">248    <div class="slide">249      <div class="close-btn">×</div>250      <div class="slide-title">A Book club Meeting</div>251      <div class="image-row">252        <div class="img-ph">[IMG: Book club in library]</div>253        <div class="img-ph">[IMG: Team meeting with laptops]</div>254      </div>255      <div class="illustration">[IMG: Illustration - presenter with chart]</div>256    </div>257  </div>258 259  <!-- Bottom toolbar -->260  <div class="bottom-bar">261    <div class="tool">262      <svg viewBox="0 0 24 24">263        <rect x="3" y="4" width="18" height="14" stroke="#9c6c3c" stroke-width="2" fill="none"/>264        <path d="M6 8h8M6 11h10M6 14h6" stroke="#9c6c3c" stroke-width="2"/>265      </svg>266    </div>267    <div class="tool">268      <svg viewBox="0 0 24 24">269        <path d="M4 4h14v16H4z" stroke="#f4a65f" stroke-width="2" fill="none"/>270        <rect x="6" y="6" width="8" height="6" fill="#f4a65f"/>271      </svg>272    </div>273    <div class="tool">274      <svg viewBox="0 0 24 24">275        <rect x="3" y="4" width="8" height="6" fill="#6f89d8"/>276        <rect x="13" y="4" width="8" height="6" fill="#6f89d8"/>277        <rect x="3" y="12" width="18" height="8" fill="#6f89d8"/>278      </svg>279    </div>280    <div class="tool">281      <svg viewBox="0 0 24 24">282        <rect x="5" y="5" width="14" height="14" stroke="#4A8BD8" stroke-width="2" fill="none"/>283        <path d="M5 9h4M15 9h4M5 15h4M15 15h4" stroke="#4A8BD8" stroke-width="2"/>284      </svg>285    </div>286    <div class="tool">287      <svg viewBox="0 0 24 24">288        <circle cx="10" cy="10" r="6" stroke="#4a4a4a" stroke-width="2" fill="none"/>289        <path d="M15.5 15.5L21 21" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>290      </svg>291    </div>292    <div class="tool">293      <svg viewBox="0 0 24 24">294        <path d="M4 4h10v14H4z" stroke="#4a88db" stroke-width="2" fill="none"/>295        <path d="M14 12h6l-3-3m3 3l-3 3" stroke="#4a88db" stroke-width="2" fill="none" stroke-linecap="round"/>296      </svg>297    </div>298  </div>299  <div class="chevron-up">300    <svg width="30" height="30" viewBox="0 0 24 24">301      <path d="M6 14l6-6 6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>302    </svg>303  </div>304 305  <!-- Home indicator -->306  <div class="home-indicator"></div>307</div>308</body>309</html>