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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f0f;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #eaeaea;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .sb-icons { display: flex; align-items: center; gap: 24px; opacity: 0.9; }30  .icon {31    width: 42px; height: 42px;32    display: inline-flex; align-items: center; justify-content: center;33  }34  .icon svg { width: 100%; height: 100%; fill: none; stroke: #eaeaea; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }35 36  /* Top app bar with actions */37  .appbar {38    height: 120px;39    padding: 0 24px 0 20px;40    display: flex;41    align-items: center;42    gap: 30px;43    border-bottom: 1px solid #1b1b1b;44  }45  .appbar .actions { display: flex; gap: 34px; align-items: center; }46  .appbar .icon svg { stroke: #ffffff; opacity: 0.92; }47 48  /* Title row */49  .title-row {50    height: 80px;51    padding: 0 28px;52    display: flex; align-items: center; justify-content: space-between;53    color: #bdbdbd;54    font-size: 32px;55  }56  .title-left { display: flex; align-items: center; gap: 14px; }57  .title-right { font-size: 28px; color: #8f8f8f; }58 59  /* Canvas area */60  .canvas {61    position: relative;62    height: 1000px;63    padding-top: 40px;64    background: #111111;65  }66 67  .slide-wrapper {68    width: 1000px;69    height: 560px;70    margin: 40px auto 0 auto;71    border: 1px solid #2a2a2a;72    background: #141414;73    box-shadow: inset 0 0 0 1px #202020;74    position: relative;75  }76  .slide-bg {77    position: absolute; inset: 18px;78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    display: flex; align-items: center; justify-content: center;81    color: #757575;82    font-size: 30px;83    text-align: center;84  }85  .slide-inner {86    position: absolute; inset: 18px;87    pointer-events: none;88  }89  .dashed-box {90    border: 2px dashed rgba(255,255,255,0.25);91    border-radius: 4px;92    padding: 14px 18px;93    display: inline-block;94  }95  .title-text {96    font-size: 72px;97    font-weight: 800;98    color: #ffc107;99    line-height: 1;100    margin-top: 140px;101    margin-left: 40px;102  }103  .subtitle {104    font-size: 34px;105    color: #d6d6d6;106    margin-top: 14px;107    margin-left: 40px;108  }109  .overlay-img {110    position: absolute;111    top: 70px;112    right: 160px;113    width: 260px;114    height: 420px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex; align-items: center; justify-content: center;118    color: #757575;119    font-size: 26px;120  }121 122  /* Bottom sheet: Add Transition */123  .bottom-sheet {124    position: absolute; left: 0; right: 0; bottom: 0;125    height: 900px;126    background: #0b0b0b;127    border-top: 1px solid #1d1d1d;128    padding: 24px 28px;129    box-sizing: border-box;130  }131  .sheet-header {132    height: 92px;133    display: flex; align-items: center; justify-content: space-between;134    margin-bottom: 12px;135  }136  .sheet-title {137    display: flex; align-items: center; gap: 18px;138    font-size: 48px; font-weight: 700; color: #ffffff;139  }140  .play-circle {141    width: 64px; height: 64px; border: 2px solid #999; border-radius: 50%;142    display: flex; align-items: center; justify-content: center;143  }144  .play-circle svg { width: 32px; height: 32px; stroke: #bbb; }145 146  .options { margin-top: 12px; padding-left: 10px; }147  .opt {148    height: 92px; display: flex; align-items: center;149    font-size: 40px; color: #eaeaea;150    border-bottom: 1px solid #161616;151  }152  .opt.selected { color: #86b5ff; font-weight: 600; }153  .opt.disabled { color: #5f5f5f; }154  .checkmark {155    position: absolute; right: 36px; bottom: 110px;156    width: 56px; height: 56px;157  }158  .checkmark svg { width: 100%; height: 100%; stroke: #ffffff; }159 160  /* Gesture bar */161  .gesture-bar {162    position: absolute; bottom: 22px; left: 50%;163    transform: translateX(-50%);164    width: 300px; height: 10px; border-radius: 10px;165    background: #7a7a7a;166    opacity: 0.85;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status bar -->174  <div class="status-bar">175    <div>7:56</div>176    <div class="sb-icons">177      <div class="icon" title="cloud">178        <svg viewBox="0 0 24 24">179          <path d="M6 18h10a4 4 0 000-8 6 6 0 10-11 3 3 3 0 001 5z"></path>180        </svg>181      </div>182      <div class="icon" title="wifi">183        <svg viewBox="0 0 24 24">184          <path d="M2 9c5-4 15-4 20 0"></path>185          <path d="M5 12c3-3 11-3 14 0"></path>186          <path d="M8 15c2-2 6-2 8 0"></path>187          <path d="M12 18l2 2-2 2-2-2z"></path>188        </svg>189      </div>190      <div class="icon" title="battery">191        <svg viewBox="0 0 24 24">192          <rect x="2" y="6" width="18" height="12" rx="2"></rect>193          <rect x="20" y="10" width="2" height="4"></rect>194          <rect x="4" y="8" width="10" height="8" fill="#eaeaea" stroke="none"></rect>195        </svg>196      </div>197    </div>198  </div>199 200  <!-- App bar with actions -->201  <div class="appbar">202    <div class="icon" title="Back">203      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>204    </div>205    <div class="actions">206      <div class="icon" title="Undo">207        <svg viewBox="0 0 24 24"><path d="M8 8H4l4-4v3h5a6 6 0 110 12h-1v-2h1a4 4 0 000-8H8z"></path></svg>208      </div>209      <div class="icon" title="Redo">210        <svg viewBox="0 0 24 24"><path d="M16 8h4l-4-4v3h-5a6 6 0 100 12h1v-2h-1a4 4 0 110-8h5z"></path></svg>211      </div>212      <div class="icon" title="Add">213        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>214      </div>215      <div class="icon" title="Present">216        <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7V5z"></path></svg>217      </div>218      <div class="icon" title="Share">219        <svg viewBox="0 0 24 24">220          <circle cx="6" cy="12" r="2"></circle>221          <circle cx="18" cy="6" r="2"></circle>222          <circle cx="18" cy="18" r="2"></circle>223          <path d="M8 12l8-6M8 12l8 6"></path>224        </svg>225      </div>226    </div>227  </div>228 229  <!-- Title row -->230  <div class="title-row">231    <div class="title-left">232      <div class="icon" title="Edit title">233        <svg viewBox="0 0 24 24"><path d="M4 17l5-1 9-9-4-4-9 9-1 5zM14 5l4 4"></path></svg>234      </div>235      <div>Untitled Presentation</div>236    </div>237    <div class="title-right">Last modified on 7:53:20 AM</div>238  </div>239 240  <!-- Canvas with slide preview -->241  <div class="canvas">242    <div class="slide-wrapper">243      <div class="slide-bg">[IMG: Space slide background]</div>244 245      <div class="slide-inner">246        <div class="dashed-box" style="width: 760px; margin-left: 20px; margin-top: 140px;">247          <div class="title-text">Double tap to a</div>248        </div>249        <div class="dashed-box" style="width: 520px; margin-left: 20px; margin-top: 16px;">250          <div class="subtitle">Double tap to add text</div>251        </div>252        <div class="overlay-img">[IMG: Keyboard close‑up]</div>253      </div>254    </div>255  </div>256 257  <!-- Bottom sheet -->258  <div class="bottom-sheet">259    <div class="sheet-header">260      <div class="sheet-title">261        <span class="icon">262          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>263        </span>264        <span>Add Transition</span>265      </div>266      <div class="play-circle">267        <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7V5z"></path></svg>268      </div>269    </div>270    <div class="options">271      <div class="opt">None</div>272      <div class="opt selected">SERENE</div>273      <div class="opt">Blinds</div>274      <div class="opt">Checkers</div>275      <div class="opt disabled">Draw</div>276      <div class="opt">Fade</div>277    </div>278 279    <div class="checkmark">280      <svg viewBox="0 0 24 24">281        <path d="M20 6l-11 11-5-5"></path>282      </svg>283    </div>284  </div>285 286  <!-- Gesture bar -->287  <div class="gesture-bar"></div>288</div>289</body>290</html>