GD-ML/AndroidCode
13.4k
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>File Search - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 color: #EDEDED;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0; left: 0;22 width: 100%;23 height: 96px;24 background: #1A1A1A;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 36px;30 color: #DADADA;31 }32 .statusbar .time { font-weight: 600; }33 .statusbar .right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .statusbar .pct { font-size: 30px; color: #FFFFFF; margin-left: 6px; }40 41 /* Top app/search bar */42 .appbar {43 position: absolute;44 top: 96px;45 left: 0;46 width: 100%;47 height: 144px;48 background: #222222;49 display: flex;50 align-items: center;51 padding: 0 24px;52 box-sizing: border-box;53 gap: 20px;54 }55 .back-btn {56 width: 72px; height: 72px;57 display: flex; align-items: center; justify-content: center;58 }59 .search-field {60 flex: 1;61 height: 92px;62 background: #333333;63 border-radius: 16px;64 display: flex;65 align-items: center;66 padding: 0 24px;67 box-sizing: border-box;68 color: #EAEAEA;69 font-size: 36px;70 }71 .search-field .placeholder {72 white-space: nowrap;73 overflow: hidden;74 text-overflow: ellipsis;75 }76 .search-field .close {77 margin-left: auto;78 width: 64px; height: 64px;79 display: flex; align-items: center; justify-content: center;80 }81 82 /* Content area */83 .content {84 position: absolute;85 top: 240px;86 left: 0;87 right: 0;88 bottom: 120px;89 padding: 20px 16px;90 box-sizing: border-box;91 background: #000000;92 }93 .actions {94 display: flex;95 justify-content: flex-end;96 padding: 12px 12px 0 12px;97 }98 .list {99 margin-top: 8px;100 }101 .item {102 display: flex;103 align-items: center;104 padding: 28px 16px;105 gap: 24px;106 border-bottom: 1px solid #222;107 }108 .thumb {109 width: 120px; height: 120px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 border-radius: 12px;113 color: #757575;114 font-size: 24px;115 display: flex; align-items: center; justify-content: center;116 text-align: center;117 }118 .meta {119 flex: 1;120 min-width: 0;121 }122 .title {123 font-size: 34px;124 color: #EDEDED;125 white-space: nowrap;126 overflow: hidden;127 text-overflow: ellipsis;128 margin-bottom: 8px;129 }130 .sub {131 font-size: 28px;132 color: #9E9E9E;133 }134 .more {135 width: 64px; height: 64px;136 display: flex; align-items: center; justify-content: center;137 }138 139 /* Home indicator pill */140 .home-pill {141 position: absolute;142 bottom: 28px;143 left: 50%;144 transform: translateX(-50%);145 width: 320px;146 height: 12px;147 background: #E6E6E6;148 border-radius: 8px;149 opacity: 0.9;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status bar -->157 <div class="statusbar">158 <div class="time">1:32</div>159 <div class="right">160 <!-- Wifi icon -->161 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">162 <path d="M2 8c5.5-5 14.5-5 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>163 <path d="M5 11.5c3.7-3.3 10.3-3.3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>164 <path d="M8.5 15c2-1.8 5-1.8 7 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>165 <circle cx="12" cy="18.5" r="1.8" fill="#FFFFFF"/>166 </svg>167 <!-- Cellular bars -->168 <svg width="42" height="42" viewBox="0 0 24 24" fill="#FFFFFF">169 <rect x="3" y="14" width="3" height="7" opacity="0.4"></rect>170 <rect x="8" y="11" width="3" height="10" opacity="0.6"></rect>171 <rect x="13" y="8" width="3" height="13" opacity="0.8"></rect>172 <rect x="18" y="5" width="3" height="16"></rect>173 </svg>174 <!-- Battery -->175 <svg width="54" height="42" viewBox="0 0 28 16" fill="none">176 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#FFFFFF" stroke-width="2"></rect>177 <rect x="24" y="6" width="3" height="4" rx="1" fill="#FFFFFF"></rect>178 <rect x="3" y="5" width="18" height="6" rx="1" fill="#FFFFFF"></rect>179 </svg>180 <div class="pct">100%</div>181 </div>182 </div>183 184 <!-- App bar with search -->185 <div class="appbar">186 <div class="back-btn">187 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">188 <path d="M15 19L8 12l7-7" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>189 </svg>190 </div>191 <div class="search-field">192 <div class="placeholder">A_short_history_of_Germany</div>193 <div class="close">194 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">195 <circle cx="12" cy="12" r="10" fill="none" stroke="#BDBDBD" stroke-width="1.8"/>196 <path d="M8 8l8 8M16 8l-8 8" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"/>197 </svg>198 </div>199 </div>200 </div>201 202 <!-- Content -->203 <div class="content">204 <div class="actions">205 <!-- Grid view icon -->206 <svg width="56" height="56" viewBox="0 0 24 24" fill="#CFCFCF">207 <rect x="3" y="3" width="7" height="7" rx="1"></rect>208 <rect x="14" y="3" width="7" height="7" rx="1"></rect>209 <rect x="3" y="14" width="7" height="7" rx="1"></rect>210 <rect x="14" y="14" width="7" height="7" rx="1"></rect>211 </svg>212 </div>213 <div class="list">214 <div class="item">215 <div class="thumb">[IMG: File thumbnail]</div>216 <div class="meta">217 <div class="title">A_short_history_...toryofge00hawt)</div>218 <div class="sub">15.6 MB · 29 minutes ago</div>219 </div>220 <div class="more">221 <!-- More vertical dots -->222 <svg width="32" height="32" viewBox="0 0 24 24" fill="#D0D0D0">223 <circle cx="12" cy="5" r="2"></circle>224 <circle cx="12" cy="12" r="2"></circle>225 <circle cx="12" cy="19" r="2"></circle>226 </svg>227 </div>228 </div>229 </div>230 </div>231 232 <!-- Home indicator -->233 <div class="home-pill"></div>234</div>235</body>236</html>