GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</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: #101312;13    color: #e9ecef;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 24px 36px 0 36px;20    box-sizing: border-box;21    color: #eaeaea;22    display: flex;23    align-items: center;24    justify-content: space-between;25    opacity: 0.95;26  }27  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 1px; }28  .status-icons {29    display: flex; gap: 28px; align-items: center;30  }31  .status-dot {32    width: 14px; height: 14px; background: #eaeaea; border-radius: 50%;33  }34  .status-icon {35    width: 38px; height: 28px; border: 3px solid #eaeaea; border-radius: 6px;36  }37  .status-battery {38    display: inline-block;39    width: 54px; height: 28px; border: 4px solid #eaeaea; border-radius: 6px; position: relative;40  }41  .status-battery::after {42    content: ""; position: absolute; right: -10px; top: 8px; width: 10px; height: 12px; background: #eaeaea; border-radius: 2px;43  }44 45  /* Search/Header area */46  .top-controls {47    margin-top: 10px;48    padding: 24px 40px;49    display: flex;50    align-items: center;51    gap: 24px;52  }53  .hamburger {54    width: 100px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 16px;55  }56  .hamburger svg { width: 64px; height: 48px; }57  .search-bar {58    flex: 1;59    height: 90px;60    background: #1b211b;61    border-radius: 42px;62    display: flex;63    align-items: center;64    padding: 0 30px;65    box-sizing: border-box;66    color: #bfc5bf;67    font-size: 40px;68  }69  .search-placeholder { flex: 1; }70  .folder-icon {71    width: 64px; height: 64px; margin-left: 10px;72  }73  .avatar {74    width: 96px; height: 96px; background: #4b2bb4;75    border-radius: 50%; display: flex; align-items: center; justify-content: center;76    font-weight: 700; font-size: 44px;77  }78 79  /* Section title */80  .section-title {81    padding: 24px 50px 10px 50px;82    display: flex; align-items: center; justify-content: space-between;83  }84  .title-left {85    font-size: 46px; color: #cfd4cf; display: flex; align-items: center; gap: 14px;86  }87  .title-right { opacity: 0.9; }88  .title-right svg { width: 54px; height: 54px; }89 90  /* Grid of files */91  .grid {92    padding: 20px 40px 0 40px;93    display: grid;94    grid-template-columns: 1fr 1fr;95    gap: 40px 40px;96  }97  .card {98    background: transparent;99  }100  .thumb {101    height: 360px;102    border-radius: 26px;103    position: relative;104    box-shadow: 0 6px 18px rgba(0,0,0,0.35);105    overflow: hidden;106  }107  .thumb.blue { background: #0f3b63; }108  .thumb.gray { background: #c9ced7; }109  .overlay-badge {110    position: absolute; right: 26px; bottom: 26px;111    width: 74px; height: 74px; background: #1b211b; border-radius: 50%;112    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.4);113  }114  .overlay-badge svg { width: 40px; height: 40px; }115  .placeholder-text {116    position: absolute; left: 28px; top: 24px; color: #eaeaea; font-size: 38px; letter-spacing: 0.3px;117  }118  .file-meta {119    display: flex; align-items: center; gap: 20px;120    padding: 18px 8px 8px 8px; color: #cfd4cf;121  }122  .slide-icon {123    width: 54px; height: 42px; background: none; display: inline-flex; align-items: center; justify-content: center;124  }125  .file-name { font-size: 46px; flex: 1; }126  .dots {127    width: 14px; height: 14px; margin-right: 14px;128    display: inline-flex; flex-direction: column; gap: 10px;129  }130  .dots span { width: 12px; height: 12px; background: #909890; border-radius: 50%; display: block; }131 132  /* Saving snackbar */133  .saving {134    position: absolute;135    left: 90px; right: 90px;136    top: 900px;137    height: 220px;138    background: #1a211b;139    border-radius: 48px;140    display: flex; align-items: center; gap: 40px; padding: 0 60px;141    box-shadow: 0 12px 40px rgba(0,0,0,0.55);142  }143  .spinner {144    width: 120px; height: 120px;145    border: 14px solid rgba(167, 233, 167, 0.25);146    border-top-color: #b7e6b7;147    border-radius: 50%;148    animation: spin 2s linear infinite;149  }150  .saving-text { font-size: 56px; color: #dce7d9; }151  @keyframes spin { to { transform: rotate(360deg); } }152 153  /* FAB */154  .fab {155    position: absolute;156    right: 70px;157    bottom: 120px;158    width: 160px; height: 160px;159    background: #2b362c;160    border-radius: 40px;161    box-shadow: 0 18px 40px rgba(0,0,0,0.6);162    display: flex; align-items: center; justify-content: center;163  }164  .fab .plus {165    width: 80px; height: 80px; position: relative;166  }167  .fab .plus::before, .fab .plus::after {168    content: ""; position: absolute; background: #dbe5d7; border-radius: 12px;169  }170  .fab .plus::before { width: 12px; height: 80px; left: 34px; top: 0; }171  .fab .plus::after  { width: 80px; height: 12px; left: 0; top: 34px; }172 173  /* SVG helper colors */174  .icon-light { fill: none; stroke: #cfd4cf; stroke-width: 8; stroke-linecap: round; }175  .icon-orange { fill: none; stroke: #e29a1c; stroke-width: 8; stroke-linejoin: round; }176  .icon-green { fill: none; stroke: #a6e6a6; stroke-width: 8; }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="status-bar">184    <div class="status-left">12:41</div>185    <div class="status-icons">186      <div class="status-icon"></div>187      <div class="status-icon"></div>188      <div class="status-dot"></div>189      <div style="width:34px;height:34px;border-radius:50%;border:3px solid #eaeaea;"></div>190      <div class="status-battery"></div>191    </div>192  </div>193 194  <!-- Search and avatar row -->195  <div class="top-controls">196    <div class="hamburger">197      <svg viewBox="0 0 100 70">198        <path class="icon-light" d="M10 10 H90 M10 35 H90 M10 60 H90"></path>199      </svg>200    </div>201    <div class="search-bar">202      <div class="search-placeholder">Search Slides</div>203      <svg class="folder-icon" viewBox="0 0 100 80">204        <path class="icon-light" d="M10 30 H40 L50 45 H90 V70 H10 Z"></path>205      </svg>206    </div>207    <div class="avatar">C</div>208  </div>209 210  <!-- Section title -->211  <div class="section-title">212    <div class="title-left">213      <span>Last opened by me</span>214      <svg viewBox="0 0 60 60" width="42" height="42">215        <path class="icon-light" d="M20 24 L30 36 L40 24"></path>216      </svg>217    </div>218    <div class="title-right">219      <svg viewBox="0 0 80 80">220        <path class="icon-light" d="M10 20 H70 M10 40 H70 M10 60 H70"></path>221      </svg>222    </div>223  </div>224 225  <!-- Grid -->226  <div class="grid">227 228    <!-- Card 1 -->229    <div class="card">230      <div class="thumb blue">231        <div class="placeholder-text">Book Title</div>232        <div class="overlay-badge">233          <svg viewBox="0 0 48 48">234            <circle cx="24" cy="24" r="18" stroke="#a6e6a6" stroke-width="5" fill="none"></circle>235            <path d="M14 24 L22 30 L34 18" stroke="#a6e6a6" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>236          </svg>237        </div>238      </div>239      <div class="file-meta">240        <div class="slide-icon">241          <svg viewBox="0 0 60 50">242            <rect x="8" y="8" width="44" height="34" class="icon-orange"></rect>243            <rect x="18" y="18" width="24" height="14" stroke="#e29a1c" fill="none" stroke-width="6"></rect>244          </svg>245        </div>246        <div class="file-name">Book report</div>247        <div class="dots"><span></span><span></span><span></span></div>248      </div>249    </div>250 251    <!-- Card 2 -->252    <div class="card">253      <div class="thumb gray">254        <div class="placeholder-text" style="color:#333;">Flash cards</div>255        <div class="overlay-badge">256          <svg viewBox="0 0 48 48">257            <path d="M24 10 A14 14 0 1 0 38 24" class="icon-green"></path>258            <path d="M24 4 V18 H36" class="icon-green"></path>259          </svg>260        </div>261      </div>262      <div class="file-meta">263        <div class="slide-icon">264          <svg viewBox="0 0 60 50">265            <rect x="8" y="8" width="44" height="34" class="icon-orange"></rect>266            <rect x="18" y="18" width="24" height="14" stroke="#e29a1c" fill="none" stroke-width="6"></rect>267          </svg>268        </div>269        <div class="file-name">Flash cards</div>270        <div class="dots"><span></span><span></span><span></span></div>271      </div>272    </div>273 274  </div>275 276  <!-- Saving snackbar -->277  <div class="saving">278    <div class="spinner"></div>279    <div class="saving-text">Saving...</div>280  </div>281 282  <!-- Floating action button -->283  <div class="fab"><div class="plus"></div></div>284 285</div>286</body>287</html>