GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - New Menu</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #FFFFFF;12 font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 height: 90px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #E0E0E0;23 font-size: 34px;24 opacity: 0.95;25 }26 .status-icons { display: flex; align-items: center; gap: 28px; }27 .status-icons svg { opacity: 0.9; }28 29 /* App header */30 .appbar {31 height: 140px;32 padding: 0 36px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 border-bottom: 1px solid #1f1f1f;37 }38 .appbar-left { display: flex; align-items: center; gap: 22px; }39 .avatar {40 width: 74px; height: 74px; border-radius: 50%;41 background: #E0E0E0; border: 1px solid #BDBDBD;42 display: flex; align-items: center; justify-content: center;43 color: #757575; font-size: 20px;44 }45 .title { font-size: 58px; font-weight: 600; color: #DADADA; letter-spacing: 0.5px; }46 .actions { display: flex; align-items: center; gap: 40px; }47 .actions svg { width: 48px; height: 48px; stroke: #B0B0B0; fill: none; }48 49 /* Content: Recent files */50 .content {51 padding: 24px 36px 0 36px;52 }53 .section-title {54 color: #9E9E9E; font-size: 36px; margin: 24px 0 12px 0;55 }56 .list {57 margin-top: 10px;58 }59 .item {60 display: flex; align-items: center;61 padding: 26px 12px;62 border-bottom: 1px solid #1d1d1d;63 }64 .thumb {65 width: 110px; height: 110px; border-radius: 12px;66 background: #E0E0E0; border: 1px solid #BDBDBD;67 display: flex; align-items: center; justify-content: center;68 color: #757575; font-size: 22px; text-align: center; line-height: 1.1;69 margin-right: 24px;70 }71 .item-info { flex: 1; }72 .item-title { font-size: 44px; color: #EAEAEA; margin-bottom: 10px; }73 .item-meta { font-size: 30px; color: #9E9E9E; }74 .item-actions { width: 72px; display: flex; justify-content: center; }75 .dots svg { width: 18px; height: 36px; fill: #9E9E9E; }76 77 /* Drag handle above sheet */78 .handle {79 position: absolute; left: 50%; transform: translateX(-50%);80 top: 1240px;81 width: 160px; height: 10px; border-radius: 6px;82 background: #6F6F6F; opacity: 0.7;83 }84 85 /* Bottom sheet */86 .sheet {87 position: absolute; left: 0; right: 0; bottom: 140px;88 height: 1100px; background: #1F1F1F; border-top-left-radius: 32px; border-top-right-radius: 32px;89 box-shadow: 0 -6px 20px rgba(0,0,0,0.5);90 padding: 30px 36px;91 }92 .sheet h2 {93 margin: 12px 0 28px 0; font-size: 40px; color: #EAEAEA; font-weight: 600;94 }95 .sheet-section-title {96 font-size: 34px; color: #BDBDBD; margin: 26px 0 10px 0; font-weight: 600;97 }98 .action-row {99 display: flex; align-items: center; gap: 26px;100 padding: 26px 0;101 border-bottom: 1px solid #262626;102 }103 .action-row:last-child { border-bottom: none; }104 .icon-box { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }105 .action-text { font-size: 38px; color: #EAEAEA; }106 107 /* Gesture bar */108 .gesture-pill {109 position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);110 width: 240px; height: 12px; border-radius: 8px; background: #CFCFCF; opacity: 0.7;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div>7:40</div>120 <div class="status-icons">121 <!-- simple status icons -->122 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 4h18" stroke="#CFCFCF" stroke-width="2"/></svg>123 <svg width="28" height="28" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" stroke="#CFCFCF" stroke-width="2" fill="none"/></svg>124 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#CFCFCF" stroke-width="2"/></svg>125 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3" fill="#CFCFCF"/></svg>126 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M19 3v18" stroke="#CFCFCF" stroke-width="2"/></svg>127 </div>128 </div>129 130 <!-- App header -->131 <div class="appbar">132 <div class="appbar-left">133 <div class="avatar">[IMG: User Avatar]</div>134 <div class="title">Home</div>135 </div>136 <div class="actions">137 <!-- Diamond -->138 <svg viewBox="0 0 24 24">139 <polygon points="12,3 21,12 12,21 3,12" stroke-width="2" />140 </svg>141 <!-- Plus -->142 <svg viewBox="0 0 24 24">143 <path d="M12 5v14M5 12h14" stroke-width="2"/>144 </svg>145 <!-- Cast -->146 <svg viewBox="0 0 24 24">147 <rect x="3" y="5" width="18" height="12" rx="2" stroke-width="2"/>148 <path d="M3 17c2 0 4 2 4 4" stroke="#B0B0B0" stroke-width="2" fill="none"/>149 <path d="M3 17c4 0 7 3 7 7" stroke="#B0B0B0" stroke-width="2" fill="none" />150 </svg>151 <!-- Search -->152 <svg viewBox="0 0 24 24">153 <circle cx="11" cy="11" r="7" stroke-width="2"/>154 <path d="M16 16l5 5" stroke-width="2"/>155 </svg>156 </div>157 </div>158 159 <!-- Recent files -->160 <div class="content">161 <div class="section-title">Recent files</div>162 <div class="list">163 <!-- Item 1 -->164 <div class="item">165 <div class="thumb">[IMG: Document thumbnail]</div>166 <div class="item-info">167 <div class="item-title">Tomorrowland</div>168 <div class="item-meta">馃懃 2.3 MB 路 Yesterday at 2:41 PM</div>169 </div>170 <div class="item-actions dots">171 <svg viewBox="0 0 6 18">172 <circle cx="3" cy="3" r="2"></circle>173 <circle cx="3" cy="9" r="2"></circle>174 <circle cx="3" cy="15" r="2"></circle>175 </svg>176 </div>177 </div>178 179 <!-- Item 2 -->180 <div class="item">181 <div class="thumb">[IMG: Document thumbnail]</div>182 <div class="item-info">183 <div class="item-title">Italy file</div>184 <div class="item-meta">24.7 MB 路 Yesterday at 2:07 PM</div>185 </div>186 <div class="item-actions dots">187 <svg viewBox="0 0 6 18">188 <circle cx="3" cy="3" r="2"></circle>189 <circle cx="3" cy="9" r="2"></circle>190 <circle cx="3" cy="15" r="2"></circle>191 </svg>192 </div>193 </div>194 195 <!-- Item 3 -->196 <div class="item">197 <div class="thumb">[IMG: Document thumbnail]</div>198 <div class="item-info">199 <div class="item-title">Amsterdam (1)</div>200 <div class="item-meta">8.1 MB 路 Yesterday at 2:06 PM</div>201 </div>202 <div class="item-actions dots">203 <svg viewBox="0 0 6 18">204 <circle cx="3" cy="3" r="2"></circle>205 <circle cx="3" cy="9" r="2"></circle>206 <circle cx="3" cy="15" r="2"></circle>207 </svg>208 </div>209 </div>210 </div>211 </div>212 213 <!-- Drag handle -->214 <div class="handle"></div>215 216 <!-- Bottom sheet -->217 <div class="sheet">218 <h2>New</h2>219 220 <div class="sheet-section-title">Folder actions</div>221 <div class="action-row">222 <div class="icon-box">223 <!-- Folder + -->224 <svg width="64" height="64" viewBox="0 0 24 24">225 <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="#E0E0E0" stroke-width="2" fill="none"/>226 <path d="M12 11v6M9 14h6" stroke="#E0E0E0" stroke-width="2"/>227 </svg>228 </div>229 <div class="action-text">Create folder</div>230 </div>231 232 <div class="action-row">233 <div class="icon-box">234 <!-- Upload -->235 <svg width="64" height="64" viewBox="0 0 24 24">236 <path d="M12 16V6" stroke="#E0E0E0" stroke-width="2"/>237 <path d="M8 10l4-4 4 4" stroke="#E0E0E0" stroke-width="2" fill="none"/>238 <path d="M4 18h16" stroke="#E0E0E0" stroke-width="2"/>239 </svg>240 </div>241 <div class="action-text">Upload</div>242 </div>243 244 <div class="sheet-section-title" style="margin-top:30px;">More</div>245 246 <div class="action-row">247 <div class="icon-box">248 <!-- Camera -->249 <svg width="64" height="64" viewBox="0 0 24 24">250 <rect x="3" y="7" width="18" height="12" rx="2" stroke="#E0E0E0" stroke-width="2" fill="none"/>251 <rect x="7" y="5" width="6" height="3" rx="1" stroke="#E0E0E0" stroke-width="2" fill="none"/>252 <circle cx="12" cy="13" r="3.5" stroke="#E0E0E0" stroke-width="2" fill="none"/>253 </svg>254 </div>255 <div class="action-text">Take a Photo</div>256 </div>257 258 <div class="action-row">259 <div class="icon-box">260 <!-- Scan (camera with doc) -->261 <svg width="64" height="64" viewBox="0 0 24 24">262 <rect x="3" y="7" width="18" height="12" rx="2" stroke="#E0E0E0" stroke-width="2" fill="none"/>263 <rect x="8" y="10" width="8" height="6" stroke="#E0E0E0" stroke-width="2" fill="none"/>264 </svg>265 </div>266 <div class="action-text">Scan</div>267 </div>268 269 <div class="action-row">270 <div class="icon-box">271 <!-- Word icon -->272 <svg width="64" height="64" viewBox="0 0 40 40">273 <rect x="2" y="2" width="36" height="36" rx="4" fill="#2B579A"></rect>274 <text x="20" y="26" text-anchor="middle" fill="#FFFFFF" font-size="20" font-family="Arial">W</text>275 </svg>276 </div>277 <div class="action-text">Create a Word Document</div>278 </div>279 280 <div class="action-row">281 <div class="icon-box">282 <!-- PowerPoint icon -->283 <svg width="64" height="64" viewBox="0 0 40 40">284 <rect x="2" y="2" width="36" height="36" rx="4" fill="#D24726"></rect>285 <text x="20" y="26" text-anchor="middle" fill="#FFFFFF" font-size="20" font-family="Arial">P</text>286 </svg>287 </div>288 <div class="action-text">Create a PowerPoint Presentation</div>289 </div>290 291 <div class="action-row">292 <div class="icon-box">293 <!-- Excel icon -->294 <svg width="64" height="64" viewBox="0 0 40 40">295 <rect x="2" y="2" width="36" height="36" rx="4" fill="#217346"></rect>296 <text x="20" y="26" text-anchor="middle" fill="#FFFFFF" font-size="20" font-family="Arial">X</text>297 </svg>298 </div>299 <div class="action-text">Create an Excel Spreadsheet</div>300 </div>301 </div>302 303 <!-- Bottom gesture bar -->304 <div class="gesture-pill"></div>305</div>306</body>307</html>