GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Rendering</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #F6F4F9;19    border-radius: 32px;20    box-shadow: 0 6px 24px rgba(0,0,0,0.2);21  }22 23  /* Status bar */24  .status-bar {25    height: 120px;26    padding: 24px 36px;27    color: #3E3E3E;28    font-weight: 600;29    font-size: 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-dot {40    width: 28px; height: 28px; background: #807D85; border-radius: 50%;41  }42 43  /* Top search header */44  .top-header {45    position: relative;46    padding: 8px 36px 0 36px;47  }48  .hamburger {49    position: absolute;50    left: 36px;51    top: 22px;52    width: 64px; height: 64px;53    display: flex; align-items: center; justify-content: center;54  }55  .hamburger svg { width: 44px; height: 44px; fill: none; stroke: #444; stroke-width: 8; }56  .searchbar {57    margin-left: 112px;58    margin-right: 160px;59    height: 88px;60    border-radius: 44px;61    background: #ECEAF1;62    display: flex;63    align-items: center;64    padding: 0 32px;65    color: #666;66    font-size: 34px;67  }68  .avatar {69    position: absolute;70    right: 36px;71    top: 12px;72    width: 88px; height: 88px;73    border-radius: 44px;74    background: #2FA7A1;75    color: white;76    display: flex; align-items: center; justify-content: center;77    font-weight: 700; font-size: 40px;78  }79 80  /* Tabs */81  .tabs {82    margin-top: 24px;83    display: flex;84    justify-content: center;85    gap: 64px;86    font-size: 34px;87  }88  .tab {89    color: #7A7785;90  }91  .tab.active {92    color: #5E60D6;93    font-weight: 700;94    position: relative;95  }96  .tab.active:after {97    content: "";98    position: absolute;99    left: 0; right: 0; bottom: -18px;100    margin: auto;101    width: 140px; height: 8px; border-radius: 8px; background: #5E60D6;102  }103 104  /* Sort/Name row */105  .name-row {106    margin-top: 56px;107    padding: 0 48px;108    display: flex;109    align-items: center;110    justify-content: space-between;111    color: #333;112    font-size: 36px;113  }114  .name-left {115    display: flex; align-items: center; gap: 12px;116  }117  .sort-arrow {118    width: 30px; height: 30px;119  }120  .view-toggle svg { width: 48px; height: 48px; fill: #555; }121 122  /* Grid */123  .grid {124    margin-top: 20px;125    padding: 0 48px;126    display: flex;127    flex-wrap: wrap;128    gap: 48px;129  }130  .item {131    width: 468px;132  }133  .thumb {134    width: 100%;135    height: 300px;136    border-radius: 28px;137    background: #FFFFFF;138    border: 1px solid #E5E5EA;139    box-shadow: 0 8px 24px rgba(0,0,0,0.08);140    display: flex; align-items: center; justify-content: center;141    position: relative;142  }143  .thumb.placeholder {144    background: #E0E0E0;145    border: 1px solid #BDBDBD;146    color: #757575;147    font-size: 28px;148  }149  .folder-icon {150    width: 160px; height: 120px;151  }152  .file-gray {153    width: 120px; height: 160px; border-radius: 12px; background: #CFCFD6;154  }155  .label-row {156    margin-top: 18px;157    display: flex; align-items: center; justify-content: space-between;158  }159  .file-name {160    font-size: 34px; color: #222;161  }162  .badge {163    display: inline-flex; align-items: center; gap: 10px;164    font-size: 32px;165  }166  .badge .icon-box {167    width: 44px; height: 44px; border-radius: 8px; background: #C6C6C6;168  }169  .badge.pdf .icon-box { background: #E65B4F; }170  .badge.doc .icon-box { background: #3E7BFF; }171 172  .kebab {173    width: 42px; height: 42px;174  }175  .kebab svg { fill: #777; }176 177  /* Floating add button */178  .fab {179    position: absolute; right: 48px; bottom: 360px;180    width: 120px; height: 120px;181    border-radius: 36px;182    background: #E4E3F7;183    box-shadow: 0 14px 28px rgba(0,0,0,0.15);184    display: flex; align-items: center; justify-content: center;185  }186  .fab svg { width: 56px; height: 56px; fill: #3D3D80; }187 188  /* Snackbar */189  .snackbar {190    position: absolute;191    left: 36px; right: 36px;192    bottom: 250px;193    height: 120px;194    background: #2E2E32;195    color: #EDEDED;196    border-radius: 20px;197    display: flex; align-items: center; justify-content: space-between;198    padding: 0 36px;199    font-size: 34px;200  }201  .snackbar .undo {202    color: #8E8CF0;203    font-weight: 600;204  }205 206  /* Bottom navigation */207  .bottom-nav {208    position: absolute;209    left: 0; right: 0; bottom: 90px;210    height: 180px;211    background: #F3F1F7;212    border-top-left-radius: 24px;213    border-top-right-radius: 24px;214    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);215    display: flex; align-items: center; justify-content: space-around;216    padding: 12px 0;217  }218  .nav-item {219    width: 200px;220    display: flex; flex-direction: column; align-items: center; gap: 10px;221    color: #6A6A75; font-size: 28px;222  }223  .nav-item svg { width: 48px; height: 48px; fill: #6A6A75; }224  .nav-item.active {225    color: #2F2D61; font-weight: 700;226  }227  .nav-item.active .icon-wrap {228    background: #E5E4F9;229    width: 96px; height: 72px;230    border-radius: 24px;231    display: flex; align-items: center; justify-content: center;232  }233  .gesture-bar {234    position: absolute; left: 50%; transform: translateX(-50%);235    bottom: 24px;236    width: 300px; height: 16px; border-radius: 8px; background: #C9C7CF;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <!-- Status bar -->244  <div class="status-bar">245    <div>2:54</div>246    <div class="status-icons">247      <div class="status-dot"></div>248      <div class="status-dot"></div>249      <div class="status-dot" style="width:56px; border-radius: