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>Rashtrapati Bhavan - Files</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2160px; position: relative; overflow: hidden;11    background: #F6F7FB;12  }13 14  /* Top status bar */15  .status-bar {16    height: 90px;17    background: #E9EEF7;18    color: #333;19    display: flex;20    align-items: center;21    padding: 0 36px;22    font-size: 34px;23    letter-spacing: 0.2px;24  }25  .status-spacer { flex: 1; }26  .status-icons { display: flex; align-items: center; gap: 28px; }27  .icon { width: 42px; height: 42px; }28 29  /* App bar */30  .app-bar {31    height: 128px;32    background: #E9EEF7;33    display: flex;34    align-items: center;35    padding: 0 24px;36    border-bottom: 1px solid #DDE3EE;37  }38  .app-left, .app-right { display: flex; align-items: center; }39  .app-left { gap: 24px; }40  .app-title {41    font-size: 44px;42    color: #222;43  }44  .app-right { margin-left: auto; gap: 32px; }45  .app-icon { width: 56px; height: 56px; }46 47  /* Filter chips row */48  .filters {49    background: #FFFFFF;50    padding: 24px 24px;51    display: flex;52    gap: 20px;53    border-bottom: 1px solid #E6E6E9;54  }55  .chip {56    display: inline-flex;57    align-items: center;58    gap: 18px;59    padding: 22px 28px;60    border-radius: 28px;61    font-size: 36px;62    color: #333;63    background: #fff;64    border: 2px solid #D6DAE0;65  }66  .chip.audio      { border-color: #7E57C2; }67  .chip.docs       { border-color: #26A69A; }68  .chip.images     { border-color: #E53935; }69  .chip svg { width: 44px; height: 44px; }70 71  /* Result list */72  .results {73    padding: 24px;74  }75  .result-item {76    display: flex;77    align-items: center;78    background: #fff;79    border-radius: 18px;80    padding: 22px;81    box-shadow: 0 1px 0 #E6E6E9 inset;82  }83  .thumb {84    width: 132px; height: 132px;85    background: #E0E0E0; border: 1px solid #BDBDBD;86    display: flex; align-items: center; justify-content: center;87    color: #757575; font-size: 28px; text-align: center;88    border-radius: 16px;89    margin-right: 28px;90    line-height: 1.2;91  }92  .file-info { flex: 1; }93  .file-title { font-size: 40px; color: #1F1F1F; margin-bottom: 10px; }94  .file-meta { font-size: 32px; color: #757575; }95  .kebab { width: 48px; height: 48px; margin-left: 12px; }96 97  .divider { height: 1px; background: #E6E6E9; margin: 18px 24px 0 24px; }98 99  /* Bottom navigation bar (system) */100  .bottom-bar {101    position: absolute;102    bottom: 0; left: 0; right: 0;103    height: 120px;104    background: #E9EEF7;105    display: flex; align-items: center; justify-content: center;106  }107  .bottom-content {108    width: 960px; display: flex; align-items: center; justify-content: space-between;109  }110  .sys-back { width: 44px; height: 44px; margin-left: 40px; }111  .home-pill {112    width: 160px; height: 24px; background: #93979F; border-radius: 12px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="status-bar">121    <div>10:14</div>122    <div class="status-spacer"></div>123    <div class="status-icons">124      <!-- small mail icon -->125      <svg class="icon" viewBox="0 0 24 24">126        <path d="M3 6h18v12H3z" fill="#9AA0A6"/>127        <path d="M3 6l9 6 9-6" fill="none" stroke="#fff" stroke-width="2"/>128      </svg>129      <!-- wifi -->130      <svg class="icon" viewBox="0 0 24 24">131        <path d="M2 8c10-6 10-6 20 0" fill="none" stroke="#61656B" stroke-width="2"/>132        <path d="M5 12c7-4 7-4 14 0" fill="none" stroke="#61656B" stroke-width="2"/>133        <path d="M8 16c4-2 4-2 8 0" fill="none" stroke="#61656B" stroke-width="2"/>134        <circle cx="12" cy="19" r="1.8" fill="#61656B"/>135      </svg>136      <!-- battery -->137      <svg class="icon" viewBox="0 0 24 24">138        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#61656B" stroke-width="2"/>139        <rect x="4" y="8" width="12" height="8" fill="#61656B"/>140        <rect x="20" y="10" width="2" height="6" fill="#61656B"/>141      </svg>142    </div>143  </div>144 145  <!-- App bar -->146  <div class="app-bar">147    <div class="app-left">148      <!-- back arrow -->149      <svg class="app-icon" viewBox="0 0 24 24">150        <path d="M15 6l-6 6 6 6" fill="none" stroke="#3C4043" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>151      </svg>152      <div class="app-title">Rashtrapati bhavan</div>153    </div>154    <div class="app-right">155      <!-- close X -->156      <svg class="app-icon" viewBox="0 0 24 24">157        <path d="M6 6l12 12M18 6l-12 12" stroke="#3C4043" stroke-width="2" stroke-linecap="round"/>158      </svg>159      <!-- grid icon -->160      <svg class="app-icon" viewBox="0 0 24 24">161        <rect x="3" y="3" width="7" height="7" fill="#3C4043"/>162        <rect x="14" y="3" width="7" height="7" fill="#3C4043"/>163        <rect x="3" y="14" width="7" height="7" fill="#3C4043"/>164        <rect x="14" y="14" width="7" height="7" fill="#3C4043"/>165      </svg>166      <!-- more/kebab -->167      <svg class="app-icon" viewBox="0 0 24 24">168        <circle cx="12" cy="5" r="2" fill="#3C4043"/>169        <circle cx="12" cy="12" r="2" fill="#3C4043"/>170        <circle cx="12" cy="19" r="2" fill="#3C4043"/>171      </svg>172    </div>173  </div>174 175  <!-- Filter chips -->176  <div class="filters">177    <div class="chip audio">178      <svg viewBox="0 0 24 24">179        <path d="M6 14a4 4 0 1 1 0-8h2v8H6zm10 0h-2V6h2a4 4 0 1 1 0 8z" fill="#7E57C2"/>180      </svg>181      <span>Audio</span>182    </div>183    <div class="chip docs">184      <svg viewBox="0 0 24 24">185        <path d="M4 6h10l4 4v8H4z" fill="none" stroke="#26A69A" stroke-width="2"/>186        <path d="M14 6v4h4" fill="none" stroke="#26A69A" stroke-width="2"/>187      </svg>188      <span>Documents & other</span>189    </div>190    <div class="chip images">191      <svg viewBox="0 0 24 24">192        <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#E53935" stroke-width="2"/>193        <circle cx="9" cy="10" r="2" fill="#E53935"/>194        <path d="M4 17l6-5 4 3 5-4 2 6" fill="none" stroke="#E53935" stroke-width="2"/>195      </svg>196      <span>Images</span>197    </div>198  </div>199 200  <!-- Results -->201  <div class="results">202    <div class="result-item">203      <div class="thumb">[IMG: Rashtrapati Bhavan photo]</div>204      <div class="file-info">205        <div class="file-title">Rashtrapati Bhavan .pdf</div>206        <div class="file-meta">16.13 MB, 1 hour ago</div>207      </div>208      <svg class="kebab" viewBox="0 0 24 24">209        <circle cx="12" cy="5" r="2" fill="#61656B"/>210        <circle cx="12" cy="12" r="2" fill="#61656B"/>211        <circle cx="12" cy="19" r="2" fill="#61656B"/>212      </svg>213    </div>214    <div class="divider"></div>215  </div>216 217  <!-- Bottom system bar -->218  <div class="bottom-bar">219    <div class="bottom-content">220      <svg class="sys-back" viewBox="0 0 24 24">221        <path d="M15 6l-6 6 6 6" fill="none" stroke="#7A7F87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222      </svg>223      <div class="home-pill"></div>224      <div style="width:44px;height:44px;margin-right:40px;"></div>225    </div>226  </div>227 228</div>229</body>230</html>