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  /* Reset and environment */9  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color: #EDEDED; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #111213;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    background: #1a1b1c;22    color: #e9e9e9;23    display: flex;24    align-items: center;25    padding: 0 28px;26    box-sizing: border-box;27    font-size: 36px;28    letter-spacing: 1px;29  }30  .sb-left { display: flex; align-items: center; gap: 16px; }31  .sb-center { flex: 1; display: flex; justify-content: center; gap: 18px; opacity: 0.85; }32  .sb-center .pill {33    width: 46px; height: 28px; border-radius: 6px; background: #2b2c2d;34    display: inline-block;35  }36  .sb-right { display: flex; align-items: center; gap: 18px; }37  .dot { width: 10px; height: 10px; border-radius: 50%; background: #bdbdbd; display: inline-block; }38 39  /* App bar */40  .app-bar {41    height: 120px;42    background: #1f2021;43    display: flex;44    align-items: center;45    padding: 0 24px;46    box-sizing: border-box;47    border-bottom: 1px solid #0d0d0d;48  }49  .app-left { display: flex; align-items: center; gap: 18px; }50  .app-title { font-size: 44px; font-weight: 500; color: #f4f4f4; }51  .app-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }52 53  /* Slides area */54  .slides-area {55    background: #000;56    padding-top: 6px;57    box-sizing: border-box;58    height: 1730px; /* space before bottom bar and home pill */59    overflow: hidden;60  }61  .slide-wrap { padding: 10px 0; }62  .divider { height: 16px; background: #0a0a0a; }63 64  .slide {65    position: relative;66    width: 1040px;67    height: 540px;68    margin: 0 auto;69    background: #23302c;70    border: 2px solid #0c0c0c;71    overflow: hidden;72  }73 74  /* Right green panel */75  .slide .right-panel {76    position: absolute;77    top: 0; right: 0;78    width: 170px;79    height: 100%;80    background: linear-gradient(180deg, #c9e9a5 0%, #a8db83 100%);81    border-left: 2px solid rgba(0,0,0,0.5);82    opacity: 0.95;83  }84 85  /* Subtle dark diagonals to mimic theme */86  .slide::before {87    content: "";88    position: absolute;89    inset: 0;90    background: radial-gradient(150% 100% at 0% 0%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 60%),91                linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%);92    pointer-events: none;93  }94 95  /* Left cyan accent strip */96  .accent-strip {97    position: absolute;98    top: 14px;99    bottom: 14px;100    left: 26px;101    width: 6px;102    background: #8fd7d9;103    box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;104  }105 106  /* Small corner triangle accent */107  .tri {108    position: absolute;109    width: 0; height: 0;110    border-left: 16px solid transparent;111    border-top: 16px solid #7ecbd1;112    left: 160px; top: 120px;113    opacity: 0.9;114  }115 116  .slide-title {117    position: absolute;118    left: 230px;119    top: 210px;120    font-size: 68px;121    letter-spacing: 0.5px;122    color: #f2f6f3;123    font-weight: 400;124  }125 126  /* Spacer to emulate empty area */127  .big-spacer {128    height: 680px;129    background: #000;130  }131 132  /* Bottom toolbar */133  .bottom-bar {134    position: absolute;135    left: 0; right: 0;136    bottom: 80px; /* leave space for home pill */137    height: 160px;138    background: #232425;139    border-top: 1px solid #141414;140    display: flex;141    align-items: center;142    justify-content: space-around;143    box-sizing: border-box;144  }145  .tool {146    display: flex;147    flex-direction: column;148    align-items: center;149    gap: 14px;150    color: #cfcfcf;151    font-size: 30px;152  }153  .tool svg { width: 56px; height: 56px; stroke: #c9c9c9; fill: none; stroke-width: 2.5; }154 155  /* Home gesture pill */156  .home-pill {157    position: absolute;158    bottom: 22px;159    left: 50%;160    transform: translateX(-50%);161    width: 220px;162    height: 10px;163    border-radius: 6px;164    background: #e8e8e8;165    opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="sb-left">8:54</div>175    <div class="sb-center" aria-label="status icons">176      <span class="pill"></span>177      <span class="pill"></span>178      <span class="pill"></span>179      <span class="pill"></span>180      <span class="dot"></span>181    </div>182    <div class="sb-right">183      <!-- simple signal and battery shapes -->184      <svg width="40" height="32" viewBox="0 0 24 24" aria-label="signal">185        <path d="M3 20h2v-4H3v4zm4 0h2v-7H7v7zm4 0h2v-10h-2V20zm4 0h2v-13h-2V20z" fill="#e0e0e0"></path>186      </svg>187      <svg width="44" height="32" viewBox="0 0 24 24" aria-label="battery">188        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#e0e0e0" fill="none"></rect>189        <rect x="3.8" y="8.8" width="12" height="6.4" fill="#e0e0e0"></rect>190        <rect x="20" y="10" width="2" height="4" fill="#e0e0e0"></rect>191      </svg>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="app-left">198      <svg width="48" height="48" viewBox="0 0 24 24" aria-label="back">199        <path d="M15 19L8 12l7-7" stroke="#e8e8e8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>200      </svg>201      <div class="app-title">Presentation</div>202    </div>203    <div class="app-right">204      <svg width="48" height="48" viewBox="0 0 24 24" aria-label="cloud upload">205        <path d="M5 16h14a4 4 0 0 0-1.1-7.9A6 6 0 0 0 7.2 6a5 5 0 0 0-2.2 10" stroke="#e8e8e8" fill="none" stroke-width="2"></path>206        <path d="M12 14V9m0 0l-3 3m3-3l3 3" stroke="#e8e8e8" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>207      </svg>208      <svg width="42" height="42" viewBox="0 0 24 24" aria-label="menu">209        <circle cx="12" cy="5" r="2" fill="#e8e8e8"></circle>210        <circle cx="12" cy="12" r="2" fill="#e8e8e8"></circle>211        <circle cx="12" cy="19" r="2" fill="#e8e8e8"></circle>212      </svg>213    </div>214  </div>215 216  <!-- Slides / content preview -->217  <div class="slides-area">218    <div class="slide-wrap">219      <div class="slide">220        <div class="accent-strip"></div>221        <div class="tri"></div>222        <div class="right-panel"></div>223        <div class="slide-title">The Hunter</div>224      </div>225    </div>226 227    <div class="divider"></div>228 229    <div class="slide-wrap">230      <div class="slide">231        <div class="accent-strip"></div>232        <div class="tri" style="top: 90px;"></div>233        <div class="right-panel"></div>234        <!-- No title on second preview -->235      </div>236    </div>237 238    <div class="big-spacer"></div>239  </div>240 241  <!-- Bottom toolbar -->242  <div class="bottom-bar">243    <div class="tool">244      <svg viewBox="0 0 24 24" aria-label="present">245        <rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect>246        <path d="M12 16v4m-3 0h6" stroke="#c9c9c9"></path>247      </svg>248      <div>Present</div>249    </div>250    <div class="tool">251      <svg viewBox="0 0 24 24" aria-label="notes">252        <rect x="4" y="3" width="14" height="18" rx="2" ry="2"></rect>253        <path d="M7 8h8M7 12h8M7 16h6"></path>254      </svg>255      <div>Notes</div>256    </div>257    <div class="tool">258      <svg viewBox="0 0 24 24" aria-label="edit">259        <path d="M4 20h16"></path>260        <path d="M14.5 4.5l5 5L9 20H4v-5z"></path>261      </svg>262      <div>Edit</div>263    </div>264    <div class="tool">265      <svg viewBox="0 0 24 24" aria-label="find">266        <circle cx="11" cy="11" r="6"></circle>267        <path d="M20 20l-3.5-3.5"></path>268      </svg>269      <div>Find</div>270    </div>271    <div class="tool">272      <svg viewBox="0 0 24 24" aria-label="share">273        <circle cx="6" cy="12" r="2"></circle>274        <circle cx="18" cy="6" r="2"></circle>275        <circle cx="18" cy="18" r="2"></circle>276        <path d="M8 12l8-6M8 12l8 6"></path>277      </svg>278      <div>Share</div>279    </div>280  </div>281 282  <!-- Home indicator -->283  <div class="home-pill"></div>284</div>285</body>286</html>