GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #121a1e;14    border-radius: 28px;15    box-shadow: 0 10px 30px rgba(0,0,0,0.35);16    color: #e6e6e6;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 120px;23    background: #0f1618;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #cfd8dc;29    font-size: 36px;30  }31  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }32  .status-icon { width: 36px; height: 36px; opacity: 0.85; }33  .battery {34    display: flex; align-items: center; gap: 12px; font-size: 32px;35  }36  /* App bar / search */37  .app-bar {38    position: absolute;39    top: 120px; left: 0; right: 0;40    height: 140px;41    background: #1d272b;42    display: flex;43    align-items: center;44    padding: 0 24px 0 20px;45    box-sizing: border-box;46  }47  .back-btn {48    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;49    margin-right: 10px;50  }51  .search-title {52    font-size: 42px;53    color: #e2e6e8;54    letter-spacing: 0.3px;55    flex: 1;56    padding-left: 10px;57  }58  .close-btn {59    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;60  }61  /* Content grid */62  .content {63    position: absolute;64    top: 260px; left: 40px; right: 40px; bottom: 140px;65  }66  .grid {67    display: grid;68    grid-template-columns: 460px 460px;69    grid-auto-rows: min-content;70    justify-content: space-between;71    column-gap: 60px;72    row-gap: 90px;73  }74  .file-card { width: 460px; }75  .thumb {76    width: 460px; height: 270px;77    background: #2a3236;78    border: 1px solid #3a4448;79    border-radius: 26px;80    display: flex; align-items: center; justify-content: center;81    color: #9aa7ad; font-size: 30px;82    position: relative;83  }84  .collab-badge {85    position: absolute; right: 16px; top: 16px;86    width: 72px; height: 72px; border-radius: 36px;87    background: #3a454a; border: 2px solid #556066;88    display: flex; align-items: center; justify-content: center;89  }90  .file-row {91    display: grid;92    grid-template-columns: auto 1fr auto;93    align-items: center;94    column-gap: 16px;95    margin-top: 18px;96  }97  .chip {98    display: inline-flex; align-items: center; justify-content: center;99    padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 26px;100    color: #2b2b2b;101  }102  .chip.pdf { background: #e57373; color: #2b2b2b; }103  .file-name {104    font-size: 34px; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;105  }106  .menu-btn {107    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;108    opacity: 0.85;109  }110  /* Home indicator */111  .home-indicator {112    position: absolute; bottom: 46px; left: 50%;113    transform: translateX(-50%);114    width: 420px; height: 16px; background: #ffffff; border-radius: 8px; opacity: 0.9;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status Bar -->122  <div class="status-bar">123    <div class="status-left">124      <div style="font-weight:600;">4:13</div>125      <!-- simple status icons -->126      <svg class="status-icon" viewBox="0 0 24 24">127        <circle cx="12" cy="12" r="10" fill="#9fb3ba"/>128        <path d="M7 12l3 3 7-7" stroke="#0f1618" stroke-width="2" fill="none"/>129      </svg>130      <svg class="status-icon" viewBox="0 0 24 24">131        <rect x="3" y="5" width="18" height="14" rx="2" fill="#9fb3ba"/>132        <path d="M3 7l9 6 9-6" stroke="#0f1618" stroke-width="2" fill="none"/>133      </svg>134      <svg class="status-icon" viewBox="0 0 24 24">135        <path d="M12 2l10 18H2L12 2z" fill="#9fb3ba"/>136        <path d="M12 9v5" stroke="#0f1618" stroke-width="2"/>137      </svg>138    </div>139    <div class="status-right">140      <svg class="status-icon" viewBox="0 0 24 24">141        <path d="M3 18h18" stroke="#9fb3ba" stroke-width="2"/>142        <path d="M3 14h14" stroke="#9fb3ba" stroke-width="2"/>143        <path d="M3 10h10" stroke="#9fb3ba" stroke-width="2"/>144      </svg>145      <div class="battery">146        <svg class="status-icon" viewBox="0 0 24 24">147          <rect x="2" y="6" width="18" height="12" rx="2" fill="#9fb3ba"/>148          <rect x="20" y="10" width="2" height="4" fill="#9fb3ba"/>149          <rect x="4" y="8" width="14" height="8" fill="#0f1618"/>150        </svg>151        <span>100%</span>152      </div>153    </div>154  </div>155 156  <!-- App Bar -->157  <div class="app-bar">158    <div class="back-btn">159      <svg width="48" height="48" viewBox="0 0 24 24">160        <polyline points="15,4 7,12 15,20" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>161      </svg>162    </div>163    <div class="search-title">A_short_history_of_Germany</div>164    <div class="close-btn">165      <svg width="44" height="44" viewBox="0 0 24 24">166        <path d="M5 5l14 14M19 5L5 19" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>167      </svg>168    </div>169  </div>170 171  <!-- Content -->172  <div class="content">173    <div class="grid">174      <!-- Card 1 -->175      <div class="file-card">176        <div class="thumb">177          <div>[IMG: Book cover thumbnail]</div>178        </div>179        <div class="file-row">180          <span class="chip pdf">PDF</span>181          <div class="file-name">Copy of A_short_hi...</div>182          <div class="menu-btn">183            <svg width="28" height="28" viewBox="0 0 24 24">184              <circle cx="12" cy="5" r="2" fill="#c7c7c7"/>185              <circle cx="12" cy="12" r="2" fill="#c7c7c7"/>186              <circle cx="12" cy="19" r="2" fill="#c7c7c7"/>187            </svg>188          </div>189        </div>190      </div>191 192      <!-- Card 2 -->193      <div class="file-card">194        <div class="thumb">195          <div>[IMG: Book cover thumbnail]</div>196          <div class="collab-badge">197            <svg width="40" height="40" viewBox="0 0 24 24">198              <circle cx="12" cy="8" r="4" fill="#cfd8dc"/>199              <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#cfd8dc"/>200            </svg>201          </div>202        </div>203        <div class="file-row">204          <span class="chip pdf">PDF</span>205          <div class="file-name">A_short_history_of_Ger...</div>206          <div class="menu-btn">207            <svg width="28" height="28" viewBox="0 0 24 24">208              <circle cx="12" cy="5" r="2" fill="#c7c7c7"/>209              <circle cx="12" cy="12" r="2" fill="#c7c7c7"/>210              <circle cx="12" cy="19" r="2" fill="#c7c7c7"/>211            </svg>212          </div>213        </div>214      </div>215 216      <!-- Card 3 -->217      <div class="file-card">218        <div class="thumb">219          <div>[IMG: Book cover thumbnail]</div>220        </div>221        <div class="file-row">222          <span class="chip pdf">PDF</span>223          <div class="file-name">A_short_history_of_Ger...</div>224          <div class="menu-btn">225            <svg width="28" height="28" viewBox="0 0 24 24">226              <circle cx="12" cy="5" r="2" fill="#c7c7c7"/>227              <circle cx="12" cy="12" r="2" fill="#c7c7c7"/>228              <circle cx="12" cy="19" r="2" fill="#c7c7c7"/>229            </svg>230          </div>231        </div>232      </div>233    </div>234  </div>235 236  <!-- Home Indicator -->237  <div class="home-indicator"></div>238</div>239</body>240</html>