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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #111111;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #eaeaea;26    font-size: 38px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .icon {34    width: 48px;35    height: 48px;36  }37 38  /* Top app bar */39  .app-bar {40    height: 150px;41    padding: 0 28px;42    display: flex;43    align-items: center;44    gap: 22px;45  }46  .app-bar .title {47    font-size: 40px;48    color: #e6e6e6;49  }50  .app-bar .spacer { flex: 1; }51  .muted {52    color: #9da3a6;53    font-size: 28px;54  }55  .tool-icons {56    display: flex;57    align-items: center;58    gap: 28px;59    margin-left: 20px;60  }61  .tool-icon { width: 54px; height: 54px; opacity: 0.55; }62 63  /* Main content area above bottom sheet */64  .content-area {65    padding: 24px 28px 0 28px;66    height: 1280px; /* space left above bottom sheet */67    box-sizing: border-box;68  }69 70  /* Slide preview */71  .slide-wrap {72    margin-top: 160px;73    display: flex;74    justify-content: center;75  }76  .slide {77    width: 970px;78    height: 540px; /* 16:9 */79    background: #ffffff;80    color: #222;81    border-radius: 4px;82    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);83    position: relative;84    overflow: hidden;85  }86  .slide-inner {87    position: absolute;88    inset: 0;89    display: flex;90    flex-direction: column;91    align-items: center;92    justify-content: center;93    gap: 16px;94  }95  .slide h1 {96    margin: 0;97    color: #2c2c2c;98    font-weight: 800;99    letter-spacing: 2px;100    font-size: 46px;101    text-transform: uppercase;102  }103  .slide .subtitle {104    font-size: 28px;105    color: #eb8076;106  }107  .img-placeholder {108    position: absolute;109    background: #E0E0E0;110    color: #757575;111    border: 1px solid #BDBDBD;112    display: flex;113    justify-content: center;114    align-items: center;115    font-size: 20px;116    padding: 6px;117    text-align: center;118  }119  .img-bulbs { left: 18px; top: 12px; width: 110px; height: 120px; }120  .img-clock { right: 18px; top: 18px; width: 110px; height: 110px; border-radius: 55px; }121  .img-plant { right: 28px; bottom: 18px; width: 130px; height: 160px; }122 123  /* Bottom sheet */124  .bottom-sheet {125    position: absolute;126    left: 0;127    right: 0;128    bottom: 60px; /* leave space for gesture pill */129    height: 980px;130    background: #0f0f0f;131    border-top: 1px solid #202020;132    padding: 30px 40px;133    box-sizing: border-box;134  }135  .sheet-header {136    display: flex;137    align-items: center;138    justify-content: space-between;139    margin-bottom: 24px;140  }141  .sheet-title {142    display: flex;143    align-items: center;144    gap: 22px;145  }146  .sheet-title .text {147    font-size: 56px;148    font-weight: 700;149  }150  .play-circle {151    width: 82px;152    height: 82px;153  }154  .list {155    margin-top: 30px;156  }157  .row {158    display: flex;159    align-items: center;160    justify-content: space-between;161    padding: 26px 6px;162    border-bottom: 1px solid #1f1f1f;163    font-size: 46px;164    color: #f1f1f1;165  }166  .row:last-child { border-bottom: none; }167  .check {168    color: #eaeaea;169    font-size: 50px;170  }171 172  /* Gesture bar */173  .gesture {174    position: absolute;175    left: 50%;176    transform: translateX(-50%);177    bottom: 16px;178    width: 320px;179    height: 12px;180    background: #cfcfcf;181    border-radius: 8px;182    opacity: 0.85;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div>5:49</div>192    <div class="status-right">193      <!-- simple status icons -->194      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">195        <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/>196        <path d="M9 22V12h6v10"/>197      </svg>198      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">199        <path d="M2 10a10 10 0 0 1 20 0"/>200        <path d="M5 13a7 7 0 0 1 14 0"/>201        <circle cx="12" cy="17" r="1.5" fill="#eaeaea"/>202      </svg>203      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">204        <rect x="3" y="7" width="14" height="10" rx="2"/>205        <path d="M21 10v4"/>206      </svg>207    </div>208  </div>209 210  <!-- App bar -->211  <div class="app-bar">212    <!-- back arrow -->213    <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">214      <path d="M15 18l-6-6 6-6"/>215    </svg>216 217    <div class="title">Untitled Presentation</div>218    <div class="spacer"></div>219    <div class="muted">Last modified on 5:49:55 PM</div>220    <div class="tool-icons">221      <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">222        <path d="M12 5v14M5 12h14" opacity="0.7"/>223      </svg>224      <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">225        <path d="M10 8l-4 4 4 4"/>226      </svg>227      <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">228        <path d="M14 8l4 4-4 4"/>229      </svg>230      <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">231        <circle cx="12" cy="12" r="10"/>232        <path d="M10 8l6 4-6 4z"/>233      </svg>234      <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">235        <path d="M18 8a6 6 0 1 1-12 0 6 6 0 0 1 12 0z"/>236        <path d="M22 22l-5.2-5.2"/>237      </svg>238    </div>239  </div>240 241  <!-- Content area with slide preview -->242  <div class="content-area">243    <div class="slide-wrap">244      <div class="slide">245        <div class="img-placeholder img-bulbs">[IMG: hanging bulbs sketch]</div>246        <div class="img-placeholder img-clock">[IMG: clock sketch]</div>247        <div class="img-placeholder img-plant">[IMG: plant pot sketch]</div>248 249        <div class="slide-inner">250          <h1>Tomorrowland Festive</h1>251          <div class="subtitle">My favorite event is the Tomorrowland Festival</div>252        </div>253      </div>254    </div>255  </div>256 257  <!-- Bottom sheet: Add Transition -->258  <div class="bottom-sheet">259    <div class="sheet-header">260      <div class="sheet-title">261        <svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">262          <path d="M15 18l-6-6 6-6"/>263        </svg>264        <div class="text">Add Transition</div>265      </div>266      <svg class="play-circle" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">267        <circle cx="12" cy="12" r="10"/>268        <path d="M10 8l6 4-6 4z" fill="#ffffff"/>269      </svg>270    </div>271 272    <div class="list">273      <div class="row">Split</div>274      <div class="row">Wedge</div>275      <div class="row">Wheel</div>276      <div class="row">Whip</div>277      <div class="row">Wipe <span class="check">✓</span></div>278    </div>279  </div>280 281  <!-- Gesture bar -->282  <div class="gesture"></div>283</div>284</body>285</html>