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>Files - Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #2B221C; /* dark brown app background */15    color: #F6EFE7;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #F8F2E8;26  }27  .status-left {28    display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 600;29  }30  .status-right {31    display: flex; align-items: center; gap: 28px;32  }33  .icon { width: 40px; height: 40px; }34  .icon svg { width: 100%; height: 100%; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    padding: 0 36px;40    display: flex;41    align-items: center;42    gap: 28px;43    background: #3A2A22; /* slightly lighter brown */44    border-bottom: 1px solid rgba(255,255,255,0.06);45  }46  .app-title {47    font-size: 46px;48    color: #F8F2E8;49    flex: 1;50  }51  .app-actions {52    display: flex; align-items: center; gap: 30px;53  }54 55  /* Filter chips */56  .chips {57    padding: 30px 36px 20px 36px;58    display: flex; gap: 20px;59  }60  .chip {61    display: inline-flex;62    align-items: center;63    gap: 16px;64    padding: 18px 26px;65    border: 2px solid #8D745F;66    border-radius: 999px;67    color: #EAD8C4;68    font-size: 34px;69    background: transparent;70  }71  .chip .icon { width: 42px; height: 42px; }72 73  /* Result item */74  .result-list { padding: 20px 36px; }75  .result-item {76    display: flex; align-items: center;77    padding: 24px 18px;78    border-radius: 18px;79    background: rgba(255,255,255,0.02);80  }81  .thumb {82    width: 140px; height: 140px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex; justify-content: center; align-items: center;86    color: #757575; font-size: 26px; text-align: center;87    border-radius: 12px;88    margin-right: 28px;89  }90  .file-info { flex: 1; }91  .file-title { font-size: 44px; margin-bottom: 10px; color: #F6EFE7; }92  .file-meta { font-size: 32px; color: #C8B8A7; }93  .kebab { width: 48px; height: 48px; }94 95  /* Bottom gesture bar */96  .gesture {97    position: absolute; left: 50%; transform: translateX(-50%);98    bottom: 36px;99    width: 260px; height: 14px; border-radius: 10px;100    background: #EDEAE6;101    opacity: 0.9;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div class="status-left">111      <span>6:15</span>112      <div class="icon">113        <!-- Sun icon -->114        <svg viewBox="0 0 24 24" fill="none">115          <circle cx="12" cy="12" r="4" fill="#F8F2E8"/>116          <g stroke="#F8F2E8" stroke-width="1.5" stroke-linecap="round">117            <line x1="12" y1="1.5" x2="12" y2="4.5"/>118            <line x1="12" y1="19.5" x2="12" y2="22.5"/>119            <line x1="1.5" y1="12" x2="4.5" y2="12"/>120            <line x1="19.5" y1="12" x2="22.5" y2="12"/>121            <line x1="4.2" y1="4.2" x2="6.1" y2="6.1"/>122            <line x1="17.9" y1="17.9" x2="19.8" y2="19.8"/>123            <line x1="17.9" y1="6.1" x2="19.8" y2="4.2"/>124            <line x1="4.2" y1="19.8" x2="6.1" y2="17.9"/>125          </g>126        </svg>127      </div>128    </div>129    <div class="status-right">130      <div class="icon">131        <!-- Wifi icon -->132        <svg viewBox="0 0 24 24" fill="none">133          <path d="M2.5 8.5c5.5-5.5 13.5-5.5 19 0" stroke="#F8F2E8" stroke-width="2" stroke-linecap="round"/>134          <path d="M5.5 11.5c3.9-3.9 9.1-3.9 13 0" stroke="#F8F2E8" stroke-width="2" stroke-linecap="round"/>135          <path d="M8.5 14.5c2.3-2.3 5.7-2.3 8 0" stroke="#F8F2E8" stroke-width="2" stroke-linecap="round"/>136          <circle cx="12" cy="18.5" r="1.5" fill="#F8F2E8"/>137        </svg>138      </div>139      <div class="icon">140        <!-- Battery icon -->141        <svg viewBox="0 0 24 24" fill="none">142          <rect x="2.5" y="6" width="17" height="12" rx="2" stroke="#F8F2E8" stroke-width="2"/>143          <rect x="4.5" y="8" width="13" height="8" fill="#F8F2E8"/>144          <rect x="20.2" y="9" width="2.3" height="6" rx="1" fill="#F8F2E8"/>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- App Bar -->151  <div class="app-bar">152    <div class="icon">153      <!-- Back arrow -->154      <svg viewBox="0 0 24 24" fill="none">155        <path d="M14 5L7 12l7 7" stroke="#F8F2E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>156      </svg>157    </div>158    <div class="app-title">venice tour.pdf</div>159    <div class="app-actions">160      <div class="icon">161        <!-- Close (X) -->162        <svg viewBox="0 0 24 24" fill="none">163          <path d="M6 6l12 12M18 6L6 18" stroke="#F8F2E8" stroke-width="2" stroke-linecap="round"/>164        </svg>165      </div>166      <div class="icon">167        <!-- Grid icon -->168        <svg viewBox="0 0 24 24" fill="none">169          <rect x="3" y="3" width="6" height="6" rx="1.2" stroke="#F8F2E8" stroke-width="2"/>170          <rect x="15" y="3" width="6" height="6" rx="1.2" stroke="#F8F2E8" stroke-width="2"/>171          <rect x="3" y="15" width="6" height="6" rx="1.2" stroke="#F8F2E8" stroke-width="2"/>172          <rect x="15" y="15" width="6" height="6" rx="1.2" stroke="#F8F2E8" stroke-width="2"/>173        </svg>174      </div>175      <div class="icon">176        <!-- Kebab (vertical dots) -->177        <svg viewBox="0 0 24 24" fill="#F8F2E8">178          <circle cx="12" cy="5" r="2"/>179          <circle cx="12" cy="12" r="2"/>180          <circle cx="12" cy="19" r="2"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Filter Chips -->187  <div class="chips">188    <div class="chip">189      <div class="icon">190        <!-- Headphones -->191        <svg viewBox="0 0 24 24" fill="none">192          <path d="M4 13a8 8 0 0116 0" stroke="#EAD8C4" stroke-width="2" stroke-linecap="round"/>193          <rect x="3" y="13" width="4" height="6" rx="2" stroke="#EAD8C4" stroke-width="2"/>194          <rect x="17" y="13" width="4" height="6" rx="2" stroke="#EAD8C4" stroke-width="2"/>195        </svg>196      </div>197      <span>Audio</span>198    </div>199    <div class="chip">200      <div class="icon">201        <!-- Document -->202        <svg viewBox="0 0 24 24" fill="none">203          <path d="M7 3h7l5 5v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="#EAD8C4" stroke-width="2"/>204          <path d="M14 3v6h6" stroke="#EAD8C4" stroke-width="2"/>205        </svg>206      </div>207      <span>Documents & other</span>208    </div>209    <div class="chip">210      <div class="icon">211        <!-- Image -->212        <svg viewBox="0 0 24 24" fill="none">213          <rect x="3" y="5" width="18" height="14" rx="2" stroke="#EAD8C4" stroke-width="2"/>214          <circle cx="9" cy="10" r="2" stroke="#EAD8C4" stroke-width="2"/>215          <path d="M5 17l5-4 3 3 4-3 4 4" stroke="#EAD8C4" stroke-width="2" stroke-linecap="round"/>216        </svg>217      </div>218      <span>Images</span>219    </div>220  </div>221 222  <!-- Results -->223  <div class="result-list">224    <div class="result-item">225      <div class="thumb">[IMG: PDF Thumbnail]</div>226      <div class="file-info">227        <div class="file-title">Venice tour.pdf</div>228        <div class="file-meta">5.99 MB, 12 minutes ago</div>229      </div>230      <div class="kebab">231        <svg viewBox="0 0 24 24" fill="#DCCBB7">232          <circle cx="12" cy="5" r="2"/>233          <circle cx="12" cy="12" r="2"/>234          <circle cx="12" cy="19" r="2"/>235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Bottom gesture handle -->241  <div class="gesture"></div>242</div>243</body>244</html>