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 - Saved</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #111213;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 120px;25    background: #0E0E0F;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 42px;31    color: #F5F5F5;32  }33  .status-left { display: flex; align-items: center; gap: 22px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }35 36  /* App bar */37  .app-bar {38    position: absolute;39    top: 120px;40    left: 0;41    right: 0;42    height: 140px;43    background: #1A1A1B;44    display: flex;45    align-items: center;46    padding: 0 28px;47    box-sizing: border-box;48  }49  .app-title {50    font-size: 48px;51    color: #EAEAEA;52    opacity: 0.9;53    margin-left: 18px;54  }55 56  /* Content area behind the bottom sheet */57  .content {58    position: absolute;59    top: 260px; /* status + app bars */60    left: 0;61    right: 0;62    bottom: 0;63    overflow: hidden;64    background: #0F0F0F;65  }66 67  .slides-area {68    position: absolute;69    top: 0;70    left: 0;71    right: 0;72    padding: 0;73  }74 75  .slide {76    width: 1040px;77    height: 600px;78    margin: 16px 20px 32px 20px;79    background: #2B221B;80    border: 6px solid #1B1410;81    box-sizing: border-box;82    position: relative;83  }84  .slide .ribbon {85    position: absolute;86    right: 0;87    top: 0;88    width: 340px;89    height: 100%;90    background: #4D3733;91    opacity: 0.6;92  }93  .slide-title {94    position: absolute;95    left: 60px;96    bottom: 60px;97    font-size: 78px;98    color: #CFCFCF;99    opacity: 0.9;100  }101 102  .slide-large-text {103    position: absolute;104    left: 60px;105    top: 90px;106    width: 720px;107    font-size: 54px;108    line-height: 1.3;109    color: #CFCFCF;110    opacity: 0.9;111  }112 113  .img-ph {114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    color: #757575;117    display: flex;118    justify-content: center;119    align-items: center;120    text-align: center;121  }122 123  .small-thumb {124    position: absolute;125    left: 300px;126    bottom: 60px;127    width: 220px;128    height: 280px;129  }130 131  /* Bottom sheet */132  .bottom-sheet {133    position: absolute;134    left: 0;135    right: 0;136    bottom: 28px;137    background: #202124;138    border-top-left-radius: 28px;139    border-top-right-radius: 28px;140    box-shadow: 0 -10px 24px rgba(0,0,0,0.6);141    padding-bottom: 24px;142    z-index: 5;143  }144  .sheet-handle {145    width: 160px;146    height: 10px;147    background: #6F6F6F;148    border-radius: 6px;149    margin: 16px auto 8px;150    opacity: 0.8;151  }152  .sheet-list {153    padding: 8px 32px 0 32px;154  }155  .sheet-item {156    display: flex;157    align-items: center;158    gap: 28px;159    padding: 34px 8px;160    border-bottom: 1px solid rgba(255,255,255,0.06);161  }162  .sheet-item:last-child { border-bottom: none; }163  .sheet-icon {164    width: 70px;165    height: 70px;166    border-radius: 16px;167    display: grid;168    place-items: center;169    background: #2B2C30;170  }171  .sheet-text {172    font-size: 44px;173    color: #EDEDED;174  }175  .sheet-subtle-divider {176    height: 1px;177    background: rgba(255,255,255,0.12);178    margin: 6px 0 4px;179  }180 181  /* Gesture bar */182  .gesture-bar {183    position: absolute;184    bottom: 6px;185    left: 50%;186    transform: translateX(-50%);187    width: 360px;188    height: 12px;189    background: #FFFFFF;190    border-radius: 8px;191    opacity: 0.9;192  }193 194  /* Utility */195  .muted { opacity: 0.78; }196 197  /* Simple icon colors */198  .acc-purple { color: #B36AE2; }199  .acc-blue { color: #7CB6FF; }200  .acc-green { color: #7AD97A; }201  .acc-yellow { color: #EFCB68; }202  .acc-teal { color: #58D6C4; }203  .acc-gray { color: #C6C6C6; }204 205  svg { display: block; }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar -->212  <div class="status-bar">213    <div class="status-left">214      <div style="font-weight:600;">1:04</div>215      <!-- moon -->216      <svg width="44" height="44" viewBox="0 0 24 24" class="muted">217        <path fill="#EDEDED" d="M12 2a8 8 0 1 0 8 10A7 7 0 0 1 12 2z"/>218      </svg>219      <!-- dot -->220      <svg width="14" height="14" viewBox="0 0 10 10" class="muted">221        <circle cx="5" cy="5" r="5" fill="#EDEDED"/>222      </svg>223      <!-- search -->224      <svg width="44" height="44" viewBox="0 0 24 24" class="muted">225        <path fill="#EDEDED" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>226      </svg>227      <!-- video -->228      <svg width="44" height="44" viewBox="0 0 24 24" class="muted">229        <path fill="#EDEDED" d="M3 5h14a2 2 0 0 1 2 2v3l3-2v10l-3-2v3a2 2 0 0 1-2 2H3z"/>230      </svg>231    </div>232    <div class="status-right">233      <!-- Wi-Fi -->234      <svg width="44" height="44" viewBox="0 0 24 24">235        <path fill="#FFFFFF" d="M12 20l-2-2a2.8 2.8 0 0 1 4 0zM5 13a9 9 0 0 1 14 0l-2 2a6 6 0 0 0-10 0zM2 9a13 13 0 0 1 20 0l-2 2a10 10 0 0 0-16 0z"/>236      </svg>237      <!-- Battery -->238      <svg width="58" height="44" viewBox="0 0 28 14">239        <rect x="1" y="2" width="22" height="10" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>240        <rect x="3" y="4" width="14" height="6" fill="#FFFFFF"/>241        <rect x="23" y="5" width="3" height="4" rx="1" fill="#FFFFFF"/>242      </svg>243    </div>244  </div>245 246  <!-- App bar -->247  <div class="app-bar">248    <!-- Back arrow -->249    <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">250      <path d="M15 18l-6-6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>251    </svg>252    <div class="app-title">Presentation - Saved</div>253  </div>254 255  <!-- Content with slide previews -->256  <div class="content">257    <div class="slides-area">258      <!-- Slide 1 -->259      <div class="slide">260        <div class="img-ph" style="position:absolute; top:0; left:0; width:360px; height:100%;">[IMG: Hiking gear collage]</div>261        <div class="ribbon"></div>262        <div class="slide-title">Importance of Hiking</div>263      </div>264 265      <!-- Slide 2 -->266      <div class="slide" style="height: 740px;">267        <div class="ribbon"></div>268        <div class="slide-large-text">269          Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind270        </div>271        <div class="img-ph small-thumb">[IMG: Hiking infographic]</div>272      </div>273    </div>274  </div>275 276  <!-- Bottom sheet actions -->277  <div class="bottom-sheet">278    <div class="sheet-handle"></div>279 280    <div class="sheet-list">281      <div class="sheet-item">282        <div class="sheet-icon">283          <!-- Microphone -->284          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-purple">285            <path fill="currentColor" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-5-3a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6h2z"/>286          </svg>287        </div>288        <div class="sheet-text">Rehearse with Coach (Preview)</div>289      </div>290 291      <div class="sheet-item">292        <div class="sheet-icon">293          <!-- Floppy disk -->294          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-purple">295            <path fill="currentColor" d="M4 4h12l4 4v12H4zM7 5h8v5H7zM7 12h10v6H7z"/>296          </svg>297        </div>298        <div class="sheet-text">Save</div>299      </div>300 301      <div class="sheet-item">302        <div class="sheet-icon">303          <!-- Page with pencil -->304          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-blue">305            <path fill="currentColor" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6"/>306            <path fill="currentColor" d="M9 17l5-5 3 3-5 5H9z"/>307          </svg>308        </div>309        <div class="sheet-text">Save As</div>310      </div>311 312      <div class="sheet-item">313        <div class="sheet-icon">314          <!-- History / clock -->315          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-yellow">316            <path fill="currentColor" d="M12 2a10 10 0 1 0 10 10h-2A8 8 0 1 1 12 4v2l4-3-4-3z"/>317            <path fill="currentColor" d="M13 7h-2v6l5 3 1-1-4-2z"/>318          </svg>319        </div>320        <div class="sheet-text">History</div>321      </div>322 323      <div class="sheet-item">324        <div class="sheet-icon">325          <!-- Printer -->326          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-teal">327            <path fill="currentColor" d="M6 2h12v6H6zM4 8h16a2 2 0 0 1 2 2v6h-4v4H6v-4H2v-6a2 2 0 0 1 2-2zm4 10h8v2H8z"/>328          </svg>329        </div>330        <div class="sheet-text">Print</div>331      </div>332 333      <div class="sheet-subtle-divider"></div>334 335      <div class="sheet-item" style="border-bottom:none;">336        <div class="sheet-icon">337          <!-- Gear -->338          <svg width="44" height="44" viewBox="0 0 24 24" class="acc-gray">339            <path fill="currentColor" d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 4l-2.1.7.3 2.2-2 1.2-1.6-1.6L13 17l-.7 2.1H11L10.3 17l-2.6-2.6-1.6 1.6-2-1.2.3-2.2L2 12l2.1-.7-.3-2.2 2-1.2 1.6 1.6L13 7l.7-2.1h2.3L17.7 7l2.6 2.6 1.6-1.6 2 1.2-.3 2.2z"/>340          </svg>341        </div>342        <div class="sheet-text">Settings</div>343      </div>344    </div>345  </div>346 347  <!-- Gesture/Home bar -->348  <div class="gesture-bar"></div>349</div>350</body>351</html>