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">6<title>Office Meeting .pptx</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: #f8f8f8;15    border-radius: 24px;16    font-family: Arial, Helvetica, sans-serif;17    color: #222;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0; left: 0; right: 0;24    height: 90px;25    background: #DF7A24;26    display: flex;27    align-items: center;28    padding: 0 32px;29    color: #fff;30    font-size: 34px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 20px; }33  .status-right svg, .status-left svg { fill: none; stroke: #fff; stroke-width: 2; }34 35  /* App bar */36  .app-bar {37    position: absolute;38    top: 90px; left: 0; right: 0;39    height: 170px;40    background: #DF7A24;41    color: #fff;42  }43  .app-title {44    position: absolute;45    left: 0; right: 0;46    top: 50%;47    transform: translateY(-50%);48    text-align: center;49    font-size: 48px;50    font-weight: 600;51    letter-spacing: 0.5px;52  }53  .menu-btn {54    position: absolute; left: 28px; top: 50%;55    transform: translateY(-50%);56    width: 84px; height: 84px;57    display: flex; align-items: center; justify-content: center;58  }59  .bar-icons {60    position: absolute; right: 26px; top: 50%;61    transform: translateY(-50%);62    display: flex; align-items: center; gap: 30px;63    font-size: 38px;64  }65  .bar-icons svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 2.5; }66  .edit-text { font-size: 40px; font-weight: 600; }67 68  /* Ad card */69  .ad-card {70    position: absolute;71    top: 260px; left: 0; right: 0;72    height: 220px;73    background: #ffffff;74    border-top: 1px solid #e6e6e6;75    border-bottom: 1px solid #e6e6e6;76    display: flex;77    align-items: center;78    padding: 20px 26px;79    gap: 20px;80  }81  .ad-tag {82    position: absolute;83    left: 14px; top: 10px;84    background: #ededed;85    color: #777;86    font-size: 24px;87    padding: 4px 10px;88    border-radius: 10px;89  }90  .ad-content { flex: 1; }91  .ad-title { font-size: 32px; font-weight: 600; color: #333; margin-bottom: 8px; }92  .ad-desc { font-size: 26px; color: #777; line-height: 1.3; max-width: 720px; }93  .ad-image {94    width: 200px; height: 160px;95    background: #E0E0E0; border: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center;97    color: #757575; font-size: 24px; text-align: center; padding: 8px;98  }99  .ad-open {100    position: absolute; left: 26px; right: 26px; bottom: 18px;101    height: 64px; border-radius: 8px; background: #db6a68;102    display: flex; align-items: center; justify-content: center;103    color: #fff; font-size: 30px; font-weight: 600;104  }105 106  /* Slide canvas 1 */107  .slide {108    position: absolute;109    top: 480px; left: 0; right: 0;110    height: 850px;111    background: #ffffff;112    border-top: 1px solid #ececec;113    border-bottom: 1px solid #ececec;114    padding: 36px 28px 28px;115  }116  .slide-close {117    position: absolute; right: 24px; top: -22px;118    width: 64px; height: 64px; border-radius: 32px;119    background: #f1f1f1; border: 1px solid #d9d9d9;120    display: flex; align-items: center; justify-content: center;121    color: #666; font-size: 36px;122  }123  .slide-title {124    text-align: center;125    font-size: 72px;126    font-weight: 600;127    color: #111;128    margin: 18px 0 28px;129  }130  .slide-images {131    display: flex; gap: 24px; height: 620px;132  }133  .img-box {134    flex: 1;135    background: #E0E0E0; border: 1px solid #BDBDBD;136    display: flex; align-items: center; justify-content: center;137    color: #757575; font-size: 30px; text-align: center; padding: 18px;138  }139 140  /* Slide canvas 2 */141  .slide-illustration {142    position: absolute;143    top: 1330px; left: 0; right: 0;144    height: 560px; background: #ffffff;145    border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;146    display: flex; align-items: center; justify-content: center;147  }148  .big-img {149    width: 820px; height: 500px;150    background: #E0E0E0; border: 1px solid #BDBDBD;151    display: flex; align-items: center; justify-content: center;152    color: #757575; font-size: 32px; text-align: center; padding: 18px;153  }154 155  /* Bottom toolbar */156  .toolbar {157    position: absolute;158    top: 1890px; left: 0; right: 0;159    height: 220px; background: #ffffff;160    border-top: 1px solid #e6e6e6;161    display: flex; align-items: center; justify-content: center;162  }163  .tool-row {164    width: 100%; max-width: 980px; display: flex; justify-content: space-around; align-items: center;165  }166  .tool {167    width: 130px; height: 130px;168    display: flex; align-items: center; justify-content: center;169  }170  .tool svg { width: 74px; height: 74px; stroke: #6b6b6b; fill: none; stroke-width: 2.8; }171 172  /* Bottom system bar */173  .system-bar {174    position: absolute; left: 0; right: 0; bottom: 0;175    height: 290px; background: #000000;176    display: flex; align-items: center; justify-content: center;177  }178  .home-indicator {179    width: 280px; height: 10px; background: #ffffff;180    border-radius: 6px; opacity: 0.9;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div class="status-left">190      <div>9:19</div>191      <!-- Cloud icon -->192      <svg width="42" height="42" viewBox="0 0 24 24">193        <path d="M7 16h9a4 4 0 0 0 0-8 5 5 0 0 0-9.6-1.5A4 4 0 0 0 7 16z" />194      </svg>195    </div>196    <div class="status-right">197      <!-- Wi-Fi -->198      <svg width="42" height="42" viewBox="0 0 24 24">199        <path d="M2 8c5-4 15-4 20 0" />200        <path d="M5 12c3-3 11-3 14 0" />201        <path d="M8 16c2-2 6-2 8 0" />202        <circle cx="12" cy="19" r="1.6" />203      </svg>204      <!-- Battery -->205      <svg width="42" height="42" viewBox="0 0 24 24">206        <rect x="3" y="7" width="16" height="10" rx="2" />207        <rect x="20" y="10" width="2" height="4" />208        <rect x="5" y="9" width="12" height="6" fill="#fff" stroke="none" />209      </svg>210    </div>211  </div>212 213  <!-- App bar -->214  <div class="app-bar">215    <div class="menu-btn">216      <!-- Hamburger -->217      <svg width="64" height="64" viewBox="0 0 24 24">218        <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2.8" />219      </svg>220    </div>221    <div class="app-title">Office Meeting .pptx</div>222    <div class="bar-icons">223      <!-- Crown -->224      <svg viewBox="0 0 24 24">225        <path d="M3 17l2-8 5 5 4-5 5 5 2-8" />226        <path d="M3 17h18" />227      </svg>228      <!-- Star -->229      <svg viewBox="0 0 24 24">230        <path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" />231      </svg>232      <!-- Bulb -->233      <svg viewBox="0 0 24 24">234        <path d="M12 4a6 6 0 0 1 6 6c0 3-2 4-3 6H9c-1-2-3-3-3-6a6 6 0 0 1 6-6z" />235        <path d="M9 18h6M10 21h4" />236      </svg>237      <!-- Person -->238      <svg viewBox="0 0 24 24">239        <circle cx="12" cy="8" r="4" />240        <path d="M4 20c2-4 14-4 16 0" />241      </svg>242      <div class="edit-text">Edit</div>243    </div>244  </div>245 246  <!-- Ad card -->247  <div class="ad-card">248    <div class="ad-tag">Ad</div>249    <div class="ad-content">250      <div class="ad-title">Stellar Fantasy Set of 3 Stoneware...</div>251      <div class="ad-desc">₹3,999 Title: Stellar Fantasy Set of 3 Stoneware Vase with T-Light Holders, Color: Gold, ...</div>252    </div>253    <div class="ad-image">[IMG: Golden vases product photo]</div>254    <div class="ad-open">Open</div>255  </div>256 257  <!-- Slide 1 -->258  <div class="slide">259    <div class="slide-close">✕</div>260    <div class="slide-title">A Book club Meeting</div>261    <div class="slide-images">262      <div class="img-box">[IMG: Library book club meeting]</div>263      <div class="img-box">[IMG: Team discussing charts at laptops]</div>264    </div>265  </div>266 267  <!-- Slide 2 illustration -->268  <div class="slide-illustration">269    <div class="big-img">[IMG: Person presenting chart]</div>270  </div>271 272  <!-- Bottom toolbar -->273  <div class="toolbar">274    <div class="tool-row">275      <div class="tool">276        <!-- Present/Play -->277        <svg viewBox="0 0 24 24">278          <circle cx="12" cy="12" r="9" />279          <path d="M10 8l6 4-6 4z" />280        </svg>281      </div>282      <div class="tool">283        <!-- Save/Disk -->284        <svg viewBox="0 0 24 24">285          <rect x="4" y="4" width="16" height="16" rx="2" />286          <rect x="8" y="13" width="8" height="5" />287          <rect x="8" y="6" width="6" height="4" />288        </svg>289      </div>290      <div class="tool">291        <!-- Layout -->292        <svg viewBox="0 0 24 24">293          <rect x="3" y="3" width="8" height="8" />294          <rect x="13" y="3" width="8" height="8" />295          <rect x="3" y="13" width="8" height="8" />296          <rect x="13" y="13" width="8" height="8" />297        </svg>298      </div>299      <div class="tool">300        <!-- Select/Frame -->301        <svg viewBox="0 0 24 24">302          <path d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" />303          <rect x="8" y="8" width="8" height="8" />304        </svg>305      </div>306      <div class="tool">307        <!-- Search -->308        <svg viewBox="0 0 24 24">309          <circle cx="11" cy="11" r="6" />310          <path d="M16 16l5 5" />311        </svg>312      </div>313      <div class="tool">314        <!-- Share/Export -->315        <svg viewBox="0 0 24 24">316          <path d="M12 5l5 5H7l5-5z" />317          <path d="M12 10v9" />318        </svg>319      </div>320    </div>321  </div>322 323  <!-- System bottom bar -->324  <div class="system-bar">325    <div class="home-indicator"></div>326  </div>327 328</div>329</body>330</html>