GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111316;14    font-family: Arial, Helvetica, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #1a1a1a;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-time {32    font-size: 44px;33    font-weight: 600;34    margin-right: 20px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    margin-left: auto;40    gap: 26px;41  }42  .status-icons svg {43    opacity: 0.9;44  }45 46  /* Top toolbar */47  .toolbar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 180px;53    background: #121212;54    box-sizing: border-box;55    padding: 24px 32px 16px;56    color: #eaeaea;57  }58  .toolbar-top {59    display: flex;60    align-items: center;61    gap: 26px;62  }63  .toolbar-top .spacer { flex: 1; }64  .toolbar-top svg { fill: none; stroke: #eaeaea; stroke-width: 3.5; }65  .toolbar-title {66    margin-top: 22px;67    display: flex;68    align-items: center;69    justify-content: space-between;70    color: #dcdcdc;71  }72  .toolbar-title .left {73    display: flex;74    align-items: center;75    gap: 12px;76    font-size: 34px;77    font-weight: 600;78  }79  .toolbar-title .right {80    font-size: 28px;81    color: #9aa0a6;82  }83 84  /* Slide area */85  .slide-area {86    position: absolute;87    top: 300px;88    left: 0;89    width: 1080px;90    height: 1120px;91    background: #0f0f0f;92    padding-top: 120px;93    box-sizing: border-box;94  }95  .slide-preview {96    width: 1000px;97    height: 580px;98    margin: 0 auto;99    background: #ffffff;100    border-radius: 4px;101    box-shadow: 0 8px 24px rgba(0,0,0,0.55);102    position: relative;103  }104  .slide-img {105    position: absolute;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    color: #757575;109    display: flex;110    justify-content: center;111    align-items: center;112    font-size: 22px;113    padding: 6px;114    box-sizing: border-box;115  }116  .img-bulbs { top: 18px; left: 22px; width: 160px; height: 140px; }117  .img-clock { top: 22px; right: 26px; width: 110px; height: 110px; border-radius: 55px; }118  .img-plant { bottom: 22px; right: 26px; width: 140px; height: 180px; }119 120  .slide-title {121    position: absolute;122    top: 230px;123    left: 50%;124    transform: translateX(-50%);125    width: 860px;126    text-align: center;127    color: #222;128    font-size: 56px;129    font-weight: 800;130    letter-spacing: 2px;131  }132  .slide-subtitle {133    position: absolute;134    top: 300px;135    left: 50%;136    transform: translateX(-50%);137    width: 860px;138    text-align: center;139    color: #e88982;140    font-size: 32px;141    font-weight: 600;142  }143 144  /* Bottom panel */145  .bottom-panel {146    position: absolute;147    bottom: 0;148    left: 0;149    width: 1080px;150    height: 900px;151    background: #0b0b0b;152    box-sizing: border-box;153    padding: 34px 32px;154    border-top: 1px solid #1f1f1f;155  }156  .panel-header {157    display: flex;158    align-items: center;159    justify-content: space-between;160    margin-bottom: 36px;161  }162  .panel-header .title {163    display: flex;164    align-items: center;165    gap: 24px;166    font-size: 52px;167    font-weight: 700;168  }169  .panel-header svg { stroke: #ffffff; fill: none; stroke-width: 3.5; }170  .transition-list {171    margin-top: 20px;172  }173  .transition-item {174    font-size: 44px;175    color: #eaeaea;176    padding: 28px 0;177    border-bottom: 1px solid #1e1e1e;178  }179  .transition-item.muted { color: #6f6f6f; }180  .check-wrap {181    position: absolute;182    right: 42px;183    bottom: 110px;184  }185  .gesture-bar {186    position: absolute;187    bottom: 22px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 14px;192    background: #d9d9d9;193    border-radius: 8px;194    opacity: 0.65;195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status Bar -->202  <div class="status-bar">203    <div class="status-time">5:49</div>204    <div class="status-icons">205      <!-- small icons centered-left (placeholders) -->206      <svg width="36" height="36" viewBox="0 0 36 36">207        <circle cx="18" cy="18" r="7" stroke="#eaeaea" fill="none"></circle>208      </svg>209      <!-- Wi-Fi -->210      <svg width="36" height="36" viewBox="0 0 36 36">211        <path d="M4 14c4-4 24-4 28 0M9 19c3-3 15-3 18 0M14 24c2-2 8-2 10 0M18 28l3 3-3 3-3-3 3-3z" stroke="#eaeaea" fill="none" stroke-linecap="round"></path>212      </svg>213      <!-- Battery -->214      <svg width="48" height="36" viewBox="0 0 48 36">215        <rect x="3" y="8" width="36" height="20" rx="3" ry="3" stroke="#eaeaea" fill="none"></rect>216        <rect x="7" y="12" width="26" height="12" fill="#eaeaea"></rect>217        <rect x="41" y="13" width="4" height="10" fill="#eaeaea"></rect>218      </svg>219    </div>220  </div>221 222  <!-- Toolbar -->223  <div class="toolbar">224    <div class="toolbar-top">225      <!-- Back arrow -->226      <svg width="54" height="54" viewBox="0 0 32 32">227        <path d="M20 6 L8 16 L20 26" stroke-linecap="round" stroke-linejoin="round"></path>228      </svg>229      <!-- Undo -->230      <svg width="54" height="54" viewBox="0 0 32 32" style="opacity:0.4">231        <path d="M12 7 L7 12 L12 17 M12 7c9 0 13 4 13 9" stroke-linecap="round"></path>232      </svg>233      <!-- Redo -->234      <svg width="54" height="54" viewBox="0 0 32 32" style="opacity:0.4">235        <path d="M20 7 L25 12 L20 17 M20 7c-9 0-13 4-13 9" stroke-linecap="round"></path>236      </svg>237      <!-- Plus -->238      <svg width="54" height="54" viewBox="0 0 32 32">239        <path d="M16 6v20M6 16h20" stroke-linecap="round"></path>240      </svg>241      <!-- Play -->242      <svg width="54" height="54" viewBox="0 0 32 32">243        <polygon points="10,8 26,16 10,24" fill="#eaeaea" stroke="#eaeaea"></polygon>244      </svg>245      <!-- Share -->246      <svg width="54" height="54" viewBox="0 0 32 32">247        <circle cx="8" cy="16" r="3" stroke="#eaeaea"></circle>248        <circle cx="24" cy="8" r="3" stroke="#eaeaea"></circle>249        <circle cx="24" cy="24" r="3" stroke="#eaeaea"></circle>250        <path d="M11 15 L21 10 M11 17 L21 22" stroke="#eaeaea"></path>251      </svg>252      <div class="spacer"></div>253    </div>254 255    <div class="toolbar-title">256      <div class="left">257        <!-- pencil icon -->258        <svg width="32" height="32" viewBox="0 0 32 32">259          <path d="M6 24l2-6 12-12 4 4-12 12-6 2z" stroke="#dcdcdc" fill="none"></path>260        </svg>261        <span>Untitled Presentation</span>262      </div>263      <div class="right">Last modified on 5:45:44 PM</div>264    </div>265  </div>266 267  <!-- Slide Area -->268  <div class="slide-area">269    <div class="slide-preview">270      <div class="slide-img img-bulbs">[IMG: Hanging bulbs doodle]</div>271      <div class="slide-img img-clock">[IMG: Clock]</div>272      <div class="slide-img img-plant">[IMG: Potted plant]</div>273 274      <div class="slide-title">TOMORROWLAND FESTIVE</div>275      <div class="slide-subtitle">My favorite event is the Tomorrowland Festival</div>276    </div>277  </div>278 279  <!-- Bottom Panel -->280  <div class="bottom-panel">281    <div class="panel-header">282      <div class="title">283        <!-- back arrow -->284        <svg width="52" height="52" viewBox="0 0 32 32">285          <path d="M20 6 L8 16 L20 26" stroke-linecap="round" stroke-linejoin="round"></path>286        </svg>287        <span>Add Transition</span>288      </div>289      <!-- play icon circle -->290      <svg width="62" height="62" viewBox="0 0 32 32">291        <circle cx="16" cy="16" r="14" stroke="#ffffff"></circle>292        <polygon points="12,9 24,16 12,23" fill="#ffffff"></polygon>293      </svg>294    </div>295 296    <div class="transition-list">297      <div class="transition-item muted">Draw</div>298      <div class="transition-item">Fade</div>299      <div class="transition-item">Geometric</div>300      <div class="transition-item">Split</div>301      <div class="transition-item">Wedge</div>302    </div>303 304    <div class="check-wrap">305      <!-- check icon -->306      <svg width="54" height="54" viewBox="0 0 32 32">307        <path d="M6 18l6 6 14-14" stroke="#ffffff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>308      </svg>309    </div>310 311    <div class="gesture-bar"></div>312  </div>313 314</div>315</body>316</html>