GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Files - Selection UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f0f10; color:#eaeaea;11 }12 /* Status bar */13 .status-bar{14 position:absolute; top:0; left:0; right:0; height:96px;15 padding:0 32px; box-sizing:border-box; color:#ffffffcc;16 display:flex; align-items:center; justify-content:space-between;17 font-size:40px; letter-spacing:1px;18 }19 .status-icons{ display:flex; gap:28px; align-items:center; }20 .sig{ width:32px; height:22px; border:2px solid #ccc; border-radius:4px; }21 .dot{ width:12px; height:12px; background:#ccc; border-radius:50%; }22 .battery{23 width:56px; height:28px; border:3px solid #ccc; border-radius:6px; position:relative;24 }25 .battery::after{26 content:""; position:absolute; right:-10px; top:8px; width:6px; height:12px; background:#ccc; border-radius:2px;27 }28 .battery .level{ position:absolute; left:3px; top:3px; bottom:3px; right:12px; background:#ccc; }29 /* Header */30 .header{31 position:absolute; top:96px; left:0; right:0; height:180px; padding:20px 32px 0 32px; box-sizing:border-box;32 display:flex; align-items:flex-start; gap:24px; border-bottom:1px solid #1f1f1f;33 }34 .close-btn{35 width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-top:8px;36 }37 .title-wrap{ flex:1; }38 .title{ font-size:56px; font-weight:600; color:#ffffff; }39 .subtitle{ font-size:30px; color:#9ca3af; margin-top:6px; }40 .header-actions{ display:flex; gap:28px; align-items:center; margin-top:8px; }41 .icon-btn{42 width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:36px;43 }44 /* "Download" row */45 .section-top{46 position:absolute; top:276px; left:0; right:0; padding:24px 32px; box-sizing:border-box;47 display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #1f1f1f;48 }49 .section-top .label{ font-size:44px; color:#cfd6dd; }50 .circle-outline{51 width:60px; height:60px; border:3px solid #7b7f86; border-radius:50%;52 }53 /* List area */54 .content{55 position:absolute; top:360px; left:0; right:0; bottom:340px; overflow:hidden;56 padding:12px 0 0 0;57 }58 .subhead{ color:#9aa0a6; font-size:34px; padding:18px 32px; }59 .file{ display:flex; align-items:center; gap:28px; padding:22px 32px; height:170px; box-sizing:border-box; border-bottom:1px solid #1b1b1b; }60 .thumb{61 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;62 color:#757575; display:flex; align-items:center; justify-content:center; font-size:22px; text-align:center; border-radius:8px;63 }64 .meta{ flex:1; }65 .name{ font-size:40px; color:#dfe4ea; line-height:1.2; max-height:96px; overflow:hidden; }66 .details{ font-size:30px; color:#8b9097; margin-top:8px; }67 .sel{ width:68px; height:68px; border:4px solid #7b7f86; border-radius:50%; }68 .selected{ background:#1a1a1a; }69 .sel.checked{ border-color:#2f6bed; background:#2f6bed; position:relative; }70 .sel.checked:after{71 content:""; position:absolute; left:18px; top:18px; width:20px; height:36px; border-right:6px solid #fff; border-bottom:6px solid #fff; transform:rotate(45deg);72 }73 /* Bottom sheet */74 .bottom-sheet{75 position:absolute; left:0; right:0; bottom:0; height:340px; background:#141416; border-top:1px solid #1e1e1f;76 box-shadow:0 -6px 18px rgba(0,0,0,0.6); padding:24px 32px; box-sizing:border-box;77 }78 .sheet-bar{ width:120px; height:8px; background:#2a2a2c; border-radius:6px; margin:8px auto 18px; opacity:0.8; }79 .move-to{ color:#c5c9cf; font-size:34px; margin:6px 0 18px; }80 .storage-row{81 display:flex; align-items:center; gap:22px; padding:18px 12px; border-radius:12px;82 }83 .phone-ic{84 width:72px; height:72px; border-radius:12px; background:#1f2630; display:flex; align-items:center; justify-content:center;85 }86 .storage-text{ font-size:42px; color:#e6eaef; }87 /* Simple SVG styling */88 svg{ fill:#e6e6e6; }89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status Bar -->95 <div class="status-bar">96 <div>11:41</div>97 <div class="status-icons">98 <div class="sig"></div>99 <div class="dot"></div>100 <div class="battery"><div class="level"></div></div>101 </div>102 </div>103 104 <!-- Header -->105 <div class="header">106 <div class="close-btn" title="Close">107 <svg width="40" height="40" viewBox="0 0 24 24">108 <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>109 </svg>110 </div>111 <div class="title-wrap">112 <div class="title">1 selected</div>113 <div class="subtitle">2.72 MB</div>114 </div>115 <div class="header-actions">116 <div class="icon-btn" title="Share">117 <svg width="44" height="44" viewBox="0 0 24 24">118 <path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 13a3.2 3.2 0 0 0 0-2l6.5-4.5A3 3 0 1 0 15 5a3 3 0 0 0 .1.7L8.7 10A3 3 0 1 0 9 14l6.2 4.2A3 3 0 1 0 18 16z"/>119 </svg>120 </div>121 <div class="icon-btn" title="Delete">122 <svg width="44" height="44" viewBox="0 0 24 24">123 <path d="M8 7V5h8v2h5v2H3V7h5zm1 4h2v7H9v-7zm4 0h2v7h-2v-7zM6 9h12v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9z"/>124 </svg>125 </div>126 <div class="icon-btn" title="More">127 <svg width="44" height="44" viewBox="0 0 24 24">128 <circle cx="12" cy="5" r="2.2"></circle>129 <circle cx="12" cy="12" r="2.2"></circle>130 <circle cx="12" cy="19" r="2.2"></circle>131 </svg>132 </div>133 </div>134 </div>135 136 <!-- "Download" row -->137 <div class="section-top">138 <div class="label">Download</div>139 <div class="circle-outline"></div>140 </div>141 142 <!-- Content list -->143 <div class="content">144 <div class="subhead">Today</div>145 146 <!-- Selected file -->147 <div class="file selected">148 <div class="thumb">[IMG: PDF thumbnail]</div>149 <div class="meta">150 <div class="name">WHO-2019-nCoV-clinical-2023.2-eng (1).pdf</div>151 <div class="details">2.72 MB, 26 minutes ago</div>152 </div>153 <div class="sel checked"></div>154 </div>155 156 <div class="file">157 <div class="thumb">[IMG: PDF thumbnail]</div>158 <div class="meta">159 <div class="name">WHO-2019-nCoV-clinical-2023.2-eng.pdf</div>160 <div class="details">2.72 MB, 26 minutes ago</div>161 </div>162 <div class="sel"></div>163 </div>164 165 <div class="file">166 <div class="thumb">[IMG: Doc preview]</div>167 <div class="meta">168 <div class="name">20121106214533yermapdf_pdf(1).pdf</div>169 <div class="details">235 kB, 28 minutes ago</div>170 </div>171 <div class="sel"></div>172 </div>173 174 <div class="file">175 <div class="thumb">[IMG: Doc preview]</div>176 <div class="meta">177 <div class="name">20121106214533yermapdf_pdf.pdf</div>178 <div class="details">235 kB, 29 minutes ago</div>179 </div>180 <div class="sel"></div>181 </div>182 183 <div class="file">184 <div class="thumb">[IMG: Book cover]</div>185 <div class="meta">186 <div class="name">The Red and the Black_ A Chronicle of 1830 by Stendhal _ Project Guten...</div>187 <div class="details">193 kB, 29 minutes ago</div>188 </div>189 <div class="sel"></div>190 </div>191 </div>192 193 <!-- Bottom sheet -->194 <div class="bottom-sheet">195 <div class="sheet-bar"></div>196 <div class="move-to">Move to</div>197 <div class="storage-row">198 <div class="phone-ic">199 <svg width="40" height="40" viewBox="0 0 24 24">200 <path d="M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 3v14h10V5H7zm4 13h2v2h-2v-2z"/>201 </svg>202 </div>203 <div class="storage-text">Internal storage</div>204 </div>205 </div>206 207</div>208</body>209</html>