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>Presentation Viewer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0e0e0f;15    color: #eaeaea;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #121212;22    display: flex;23    align-items: center;24    padding: 0 32px;25    box-sizing: border-box;26    font-size: 40px;27    color: #d7d7d7;28    letter-spacing: 0.5px;29  }30  .status-left { display: flex; align-items: center; gap: 22px; }31  .status-icons { display: flex; align-items: center; gap: 18px; margin-left: 20px; }32  .dot {33    width: 12px; height: 12px; background: #bdbdbd; border-radius: 50%;34    display: inline-block;35  }36  .status-right {37    margin-left: auto;38    display: flex; align-items: center; gap: 24px;39    font-size: 34px; color: #d7d7d7;40  }41  .tiny-bar {42    width: 46px; height: 18px; border-radius: 4px; border: 2px solid #d7d7d7; position: relative;43  }44  .tiny-bar::after { content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 10px; background: #d7d7d7; border-radius: 2px; }45  .tiny-fill { width: 70%; height: 100%; background: #d7d7d7; }46 47  /* App bar */48  .app-bar {49    height: 140px;50    background: #1b1b1c;51    display: flex;52    align-items: center;53    padding: 0 24px;54    box-sizing: border-box;55    border-bottom: 2px solid #2a2a2a;56  }57  .app-title {58    font-size: 52px; font-weight: 600; color: #eaeaea; margin-left: 16px;59  }60  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }61  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }62  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #eaeaea; stroke-width: 3; }63 64  /* Content area */65  .content {66    position: absolute;67    top: 260px; /* 120 + 140 */68    bottom: 230px; /* leave space for bottom toolbar */69    left: 0; right: 0;70    overflow: hidden;71    background: #000;72  }73  .slides-wrap {74    padding: 20px 16px 0 16px;75    box-sizing: border-box;76  }77  .slide-box {78    position: relative;79    width: 1048px;80    height: 640px;81    margin: 0 auto 18px auto;82    background: #E0E0E0;83    border: 2px solid #BDBDBD;84    box-sizing: border-box;85    display: flex; align-items: center; justify-content: center;86    color: #555;87    font-size: 40px;88  }89  .slide-box.selected {90    border: 6px solid #d35400;91    box-shadow: inset 0 0 0 4px #6bbec5;92  }93  .slide-label {94    position: absolute; top: 22px; right: 22px;95    background: rgba(0,0,0,0.75);96    color: #fff; font-size: 36px; padding: 10px 22px; border-radius: 16px;97  }98  .action-chip-row {99    position: absolute; bottom: 24px; left: 24px;100    display: flex; gap: 12px;101  }102  .chip {103    background: #2b2b2d;104    color: #e9e9e9;105    font-size: 36px;106    padding: 16px 22px;107    border-radius: 6px;108    border: 1px solid #3c3c3e;109  }110 111  /* Separator line */112  .separator {113    width: 100%;114    height: 6px;115    background: #b04115;116    margin: 4px 0 18px 0;117  }118 119  /* Bottom toolbar */120  .bottom-bar {121    position: absolute; left: 0; right: 0; bottom: 0;122    height: 230px;123    background: #1b1b1c;124    border-top: 2px solid #2b2b2b;125    display: flex; align-items: center; justify-content: space-around;126    box-sizing: border-box;127    padding-bottom: 36px;128  }129  .tool {130    display: flex; flex-direction: column; align-items: center; gap: 10px;131    color: #e0e0e0; font-size: 30px;132  }133  .tool svg { width: 66px; height: 66px; stroke: #e0e0e0; stroke-width: 3; fill: none; }134  .home-indicator {135    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);136    width: 260px; height: 12px; background: #eaeaea; border-radius: 8px; opacity: 0.85;137  }138 139  /* Back arrow icon */140  .back { display: flex; align-items: center; gap: 12px; color: #eaeaea; }141  .back svg { width: 60px; height: 60px; stroke: #eaeaea; stroke-width: 4; }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    <div class="status-left">150      <div>8:55</div>151      <div class="status-icons">152        <div class="dot"></div>153        <div class="dot"></div>154        <div class="dot"></div>155        <div class="dot"></div>156      </div>157    </div>158    <div class="status-right">159      <!-- WiFi -->160      <svg viewBox="0 0 24 24">161        <path d="M2 8c5-4 15-4 20 0M5 11c4-3 10-3 14 0M8 14c3-2 7-2 10 0"/>162        <circle cx="12" cy="18" r="2" fill="#d7d7d7" stroke="none"></circle>163      </svg>164      <!-- Battery -->165      <div class="tiny-bar"><div class="tiny-fill"></div></div>166    </div>167  </div>168 169  <!-- App bar -->170  <div class="app-bar">171    <div class="back">172      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" /></svg>173    </div>174    <div class="app-title">Presentation</div>175    <div class="app-actions">176      <div class="icon-btn" title="Cloud">177        <svg viewBox="0 0 24 24">178          <path d="M6 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11.5 2.5A3.5 3.5 0 0 0 6 18z"></path>179        </svg>180      </div>181      <div class="icon-btn" title="More">182        <svg viewBox="0 0 24 24">183          <circle cx="12" cy="5" r="2" fill="#eaeaea" stroke="none"></circle>184          <circle cx="12" cy="12" r="2" fill="#eaeaea" stroke="none"></circle>185          <circle cx="12" cy="19" r="2" fill="#eaeaea" stroke="none"></circle>186        </svg>187      </div>188    </div>189  </div>190 191  <!-- Content area with slide previews -->192  <div class="content">193    <div class="slides-wrap">194      <div class="slide-box">195        <div class="slide-label">Slide 1 of 2</div>196        <div>[IMG: Slide 1 Preview - "The Hunter"]</div>197        <div class="action-chip-row">198          <div class="chip">Edit</div>199          <div class="chip">Copy</div>200          <div class="chip">New Comment</div>201          <div class="chip">Share</div>202        </div>203      </div>204 205      <div class="separator"></div>206 207      <div class="slide-box selected">208        <div>[IMG: Slide 2 Preview - Empty template]</div>209      </div>210    </div>211  </div>212 213  <!-- Bottom action bar -->214  <div class="bottom-bar">215    <div class="tool">216      <svg viewBox="0 0 24 24">217        <rect x="3" y="4" width="18" height="12" rx="1.5"></rect>218        <line x1="8" y1="20" x2="16" y2="20"></line>219        <line x1="12" y1="16" x2="12" y2="20"></line>220      </svg>221      <div>Present</div>222    </div>223    <div class="tool">224      <svg viewBox="0 0 24 24">225        <rect x="4" y="3" width="16" height="18" rx="1.5"></rect>226        <line x1="7" y1="8" x2="17" y2="8"></line>227        <line x1="7" y1="12" x2="17" y2="12"></line>228        <line x1="7" y1="16" x2="14" y2="16"></line>229      </svg>230      <div>Notes</div>231    </div>232    <div class="tool">233      <svg viewBox="0 0 24 24">234        <path d="M12 20l8-8"></path>235        <path d="M15 7l2 2"></path>236        <rect x="4" y="4" width="10" height="14" rx="1.5"></rect>237      </svg>238      <div>Edit</div>239    </div>240    <div class="tool">241      <svg viewBox="0 0 24 24">242        <circle cx="11" cy="11" r="6"></circle>243        <line x1="16.5" y1="16.5" x2="21" y2="21"></line>244      </svg>245      <div>Find</div>246    </div>247    <div class="tool">248      <svg viewBox="0 0 24 24">249        <circle cx="6" cy="12" r="2"></circle>250        <circle cx="18" cy="6" r="2"></circle>251        <circle cx="18" cy="18" r="2"></circle>252        <line x1="7.6" y1="11" x2="16.2" y2="7"></line>253        <line x1="7.6" y1="13" x2="16.2" y2="17"></line>254      </svg>255      <div>Share</div>256    </div>257  </div>258 259  <div class="home-indicator"></div>260</div>261</body>262</html>