GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>My Presentations - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #1a1a1a;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    color: #ffffff;29    font-size: 36px;30    letter-spacing: 1px;31  }32  .status-bar .spacer { flex: 1; }33  .status-icon { margin-left: 22px; opacity: 0.95; }34 35  /* Header */36  .page-title {37    position: absolute;38    top: 150px;39    left: 40px;40    font-size: 72px;41    font-weight: 700;42  }43  .profile {44    position: absolute;45    top: 140px;46    right: 40px;47    width: 96px;48    height: 96px;49    border-radius: 50%;50    border: 4px solid #9e9e9e;51    color: #9e9e9e;52    display: flex;53    align-items: center;54    justify-content: center;55    box-sizing: border-box;56  }57  .profile svg { width: 56px; height: 56px; }58 59  /* Card */60  .card {61    position: absolute;62    top: 340px;63    left: 48px;64    width: 560px;65  }66  .preview {67    width: 560px;68    height: 320px;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    border-radius: 20px;72    color: #757575;73    display: flex;74    align-items: center;75    justify-content: center;76    font-size: 30px;77  }78  .card-meta {79    margin-top: 26px;80    display: flex;81    align-items: center;82    justify-content: space-between;83    width: 560px;84  }85  .card-title {86    font-size: 46px;87    color: #f2f2f2;88    overflow: hidden;89    white-space: nowrap;90    text-overflow: ellipsis;91    max-width: 470px;92  }93  .kebab {94    width: 40px;95    height: 70px;96    position: relative;97  }98  .kebab span {99    position: absolute;100    left: 50%;101    transform: translateX(-50%);102    width: 10px; height: 10px; border-radius: 50%;103    background: #d9d9d9;104  }105  .kebab span:nth-child(1) { top: 8px; }106  .kebab span:nth-child(2) { top: 26px; }107  .kebab span:nth-child(3) { top: 44px; }108 109  /* Floating action button */110  .fab {111    position: absolute;112    bottom: 220px;113    left: 50%;114    transform: translateX(-50%);115    width: 160px;116    height: 160px;117    background: #e25a55;118    border-radius: 50%;119    box-shadow: 0 18px 30px rgba(0,0,0,0.5), 0 8px 10px rgba(0,0,0,0.35);120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .fab .plus {125    width: 86px; height: 86px; position: relative;126  }127  .fab .plus:before, .fab .plus:after {128    content: "";129    position: absolute;130    background: #ffffff;131    border-radius: 6px;132  }133  .fab .plus:before { width: 86px; height: 14px; top: 36px; left: 0; }134  .fab .plus:after  { width: 14px; height: 86px; left: 36px; top: 0; }135 136  /* Bottom bar */137  .bottom-bar {138    position: absolute;139    bottom: 0;140    left: 0;141    width: 1080px;142    height: 180px;143    background: #181818;144    display: flex;145    align-items: center;146    justify-content: space-between;147    padding: 0 40px;148    box-sizing: border-box;149  }150  .nav-icon { width: 84px; height: 84px; color: #cfcfcf; opacity: 0.9; }151 152  /* Gesture pill */153  .gesture {154    position: absolute;155    bottom: 34px;156    left: 50%;157    transform: translateX(-50%);158    width: 420px;159    height: 12px;160    background: #e6e6e6;161    border-radius: 12px;162    opacity: 0.85;163  }164</style>165</head>166<body>167<div id="render-target">168  <!-- Status Bar -->169  <div class="status-bar">170    <div>8:08</div>171    <div class="spacer"></div>172    <!-- Simple DND icon -->173    <svg class="status-icon" width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">174      <circle cx="12" cy="12" r="9" stroke="none" opacity="0.85"></circle>175      <rect x="6.5" y="11" width="11" height="2" fill="#121212"></rect>176    </svg>177    <!-- Wi‑Fi -->178    <svg class="status-icon" width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">179      <path d="M12 18.5l2.5-2.5a3.5 3.5 0 0 0-5 0L12 18.5zM4 10a12 12 0 0 1 16 0l-1.7 1.7a9.7 9.7 0 0 0-12.6 0L4 10zm4 4a7 7 0 0 1 8 0l-1.7 1.7a4.7 4.7 0 0 0-4.6 0L8 14z"></path>180    </svg>181    <!-- Battery -->182    <svg class="status-icon" width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">183      <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>184      <rect x="20" y="10" width="2" height="4"></rect>185    </svg>186  </div>187 188  <!-- Header -->189  <div class="page-title">My Presentations</div>190  <div class="profile" title="Account">191    <svg viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="1.6">192      <circle cx="12" cy="8" r="3.7"></circle>193      <path d="M4.5 19c2.2-3.7 12.8-3.7 15 0" stroke-linecap="round"></path>194    </svg>195  </div>196 197  <!-- Single Card -->198  <div class="card">199    <div class="preview">[IMG: Presentation cover]</div>200    <div class="card-meta">201      <div class="card-title">Untitled Present...</div>202      <div class="kebab">203        <span></span><span></span><span></span>204      </div>205    </div>206  </div>207 208  <!-- Floating Action Button -->209  <div class="fab"><div class="plus"></div></div>210 211  <!-- Bottom Bar -->212  <div class="bottom-bar">213    <!-- Hamburger -->214    <svg class="nav-icon" viewBox="0 0 24 24" fill="#cfcfcf">215      <rect x="3" y="6" width="18" height="2"></rect>216      <rect x="3" y="11" width="18" height="2"></rect>217      <rect x="3" y="16" width="18" height="2"></rect>218    </svg>219    <!-- Upload Arrow -->220    <svg class="nav-icon" viewBox="0 0 24 24" fill="#cfcfcf">221      <path d="M12 3l4 4h-3v6h-2V7H8l4-4z"></path>222      <rect x="4" y="18" width="16" height="2"></rect>223    </svg>224  </div>225 226  <!-- Gesture bar -->227  <div class="gesture"></div>228</div>229</body>230</html>