GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Drive UI Mock</title>6<style>7 :root{8 --bg:#F5F7EF;9 --pill:#E6ECE3;10 --text:#3B3E3A;11 --muted:#7A7D74;12 --green:#46A36B;13 --tile:#404742;14 --divider:#D7DCCF;15 --shadow:0 8px 20px rgba(0,0,0,0.08);16 }17 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:var(--text); }18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:var(--bg);21 }22 23 /* Status bar */24 .status-bar{25 height:84px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#3f403c;26 font-weight:600; font-size:36px;27 }28 .status-icons{ display:flex; gap:26px; align-items:center; }29 .status-dot{ width:10px; height:10px; background:#5a5a5a; border-radius:50%; }30 31 /* App bar with search */32 .app-bar{ padding:14px 36px 0; }33 .search-row{ display:flex; align-items:center; gap:26px; }34 .hamburger{35 width:68px; height:68px; border-radius:18px; display:flex; align-items:center; justify-content:center;36 }37 .hamburger svg{ width:40px; height:40px; fill:#37413a; }38 .search-pill{39 flex:1; height:110px; background:var(--pill); border-radius:56px; display:flex; align-items:center; padding:0 34px; gap:24px;40 }41 .search-pill .icon{ width:44px; height:44px; }42 .search-pill input{43 flex:1; border:none; background:transparent; font-size:38px; color:var(--text);44 outline:none;45 }46 .avatar{47 width:96px; height:96px; border-radius:48px; background:#9C7D6F; color:#fff;48 display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:bold;49 }50 51 /* Tabs */52 .tabs{ margin-top:26px; padding:0 36px; display:flex; gap:60px; font-size:40px; }53 .tab{ padding:16px 0; color:var(--muted); }54 .tab.active{ color:#295E3E; font-weight:700; position:relative; }55 .tab.active::after{56 content:""; position:absolute; left:0; right:0; bottom:-14px; height:8px; background:#2b7a55; border-radius:4px;57 }58 .list-toggle{ position:absolute; right:36px; top:330px; }59 .list-toggle svg{ width:44px; height:44px; fill:#4a5249; }60 61 /* Content grid */62 .content{ padding:34px 36px 260px; }63 .grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:48px; }64 .tile{ background:transparent; border-radius:28px; }65 .folder-icon{66 width:100%; height:240px; background:#e9ece6; border-radius:28px; position:relative; box-shadow:var(--shadow);67 display:flex; align-items:center; justify-content:center;68 }69 .folder-icon svg{ width:280px; height:180px; }70 .folder-green{ background:#E1F1E4; }71 .folder-grey{ background:#E4E7E2; }72 .tile-label{ display:flex; align-items:center; justify-content:space-between; padding:18px 10px 0; }73 .tile-label .name{ font-size:44px; font-weight:600; color:#2F3430; }74 .tile-label .sub{ font-size:36px; color:var(--muted); }75 .kebab{ width:20px; height:20px; padding:10px; }76 .kebab svg{ width:20px; height:20px; fill:#60655d; }77 78 /* Overlay small group icon on folder */79 .group-badge{80 position:absolute; right:20px; bottom:20px; width:72px; height:54px; background:#3e463f; border-radius:16px;81 display:flex; align-items:center; justify-content:center;82 }83 .group-badge svg{ width:44px; height:44px; fill:#ffffff; }84 85 /* Image preview tile */86 .img-preview{87 width:100%; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:24px;88 display:flex; align-items:center; justify-content:center; color:#757575; box-shadow:var(--shadow);89 }90 .file-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 8px 0; }91 .file-name{ max-width:75%; font-size:40px; color:#2F3430; font-weight:600; line-height:1.15; }92 .file-type{ width:56px; height:56px; background:#DB5C51; border-radius:10px; margin-right:16px; display:flex; align-items:center; justify-content:center; }93 .file-type svg{ width:38px; height:38px; fill:#fff; }94 95 /* Floating action button */96 .fab{97 position:absolute; right:44px; bottom:310px; width:150px; height:150px; background:#CFE2CE; border-radius:36px;98 display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px rgba(0,0,0,0.15);99 }100 .fab svg{ width:72px; height:72px; stroke:#1F4D32; stroke-width:12; }101 102 /* Snackbar */103 .snackbar{104 position:absolute; left:16px; right:16px; bottom:210px; background:#212121; color:#EDEDED; border-radius:18px;105 height:120px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:42px;106 box-shadow:var(--shadow);107 }108 .snackbar .action{ color:#84C895; font-weight:700; }109 110 /* Bottom nav bar */111 .bottom-nav{112 position:absolute; left:0; right:0; bottom:0; height:180px; background:#E7EDDF; display:flex; align-items:center; justify-content:space-around;113 border-top:1px solid var(--divider);114 }115 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:16px; color:#5F665D; font-size:36px; }116 .nav-item svg{ width:54px; height:54px; fill:#5F665D; }117 .nav-item.active{118 background:#DDE9D7; padding:24px 34px; border-radius:40px; color:#1F4D32;119 }120 .nav-item.active svg{ fill:#1F4D32; }121</style>122</head>123<body>124<div id="render-target">125 126 <!-- Status bar -->127 <div class="status-bar">128 <div>10:19</div>129 <div class="status-icons">130 <!-- simple icons placeholders -->131 <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="12" cy="12" r="10" fill="#6d6d6d"/></svg>132 <svg viewBox="0 0 24 24" width="34" height="34"><rect x="4" y="6" width="16" height="12" rx="2" fill="#6d6d6d"/></svg>133 <div class="status-dot"></div>134 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M5 4h14v16H5z" fill="#6d6d6d"/></svg>135 </div>136 </div>137 138 <!-- App bar -->139 <div class="app-bar">140 <div class="search-row">141 <div class="hamburger">142 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>143 </div>144 <div class="search-pill">145 <svg class="icon" viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l5.2 5.2 1.4-1.4-5.2-5.2A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z" fill="#536156"/></svg>146 <input type="text" value="Search in Drive"/>147 </div>148 <div class="avatar">C</div>149 </div>150 151 <div class="tabs">152 <div class="tab active">My Drive</div>153 <div class="tab">Computers</div>154 </div>155 <div class="list-toggle">156 <svg viewBox="0 0 24 24"><path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h16v2H4"/></svg>157 </div>158 </div>159 160 <!-- Content grid -->161 <div class="content">162 <div class="grid">163 164 <!-- Tile 1: Green folder -->165 <div class="tile">166 <div class="folder-icon folder-green">167 <svg viewBox="0 0 100 70">168 <path d="M10 20h20l8-8h52a8 8 0 018 8v34a8 8 0 01-8 8H10a8 8 0 01-8-8V28a8 8 0 018-8z" fill="#4AA56D"/>169 </svg>170 </div>171 <div class="tile-label">172 <div class="name">Green</div>173 <div class="kebab">174 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>175 </div>176 </div>177 </div>178 179 <!-- Tile 2: Memories shared folder -->180 <div class="tile">181 <div class="folder-icon folder-grey">182 <svg viewBox="0 0 100 70">183 <path d="M10 20h20l8-8h52a8 8 0 018 8v34a8 8 0 01-8 8H10a8 8 0 01-8-8V28a8 8 0 018-8z" fill="#464D47"/>184 </svg>185 <div class="group-badge">186 <svg viewBox="0 0 24 24"><path d="M7 12a3 3 0 100-6 3 3 0 000 6zm10 0a3 3 0 100-6 3 3 0 000 6zm-14 8c0-3 3-5 7-5s7 2 7 5H3z" /></svg>187 </div>188 </div>189 <div class="tile-label">190 <div class="name">Memories</div>191 <div class="kebab">192 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>193 </div>194 </div>195 </div>196 197 <!-- Tile 3: Untitled folder -->198 <div class="tile">199 <div class="folder-icon folder-grey">200 <svg viewBox="0 0 100 70">201 <path d="M10 20h20l8-8h52a8 8 0 018 8v34a8 8 0 01-8 8H10a8 8 0 01-8-8V28a8 8 0 018-8z" fill="#464D47"/>202 </svg>203 </div>204 <div class="tile-label">205 <div class="name">206 <div>Untitled</div>207 <div class="sub">folder</div>208 </div>209 <div class="kebab">210 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>211 </div>212 </div>213 </div>214 215 <!-- Tile 4: Image file preview -->216 <div class="tile">217 <div class="img-preview">[IMG: Plant photo preview]</div>218 <div class="file-row">219 <div style="display:flex; align-items:center; gap:18px;">220 <div class="file-type">221 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM6 16l3-4 3 3 3-5 3 6H6z"/></svg>222 </div>223 <div class="file-name">behance_download_16...</div>224 </div>225 <div class="kebab">226 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>227 </div>228 </div>229 </div>230 231 </div>232 </div>233 234 <!-- Floating action button -->235 <div class="fab">236 <svg viewBox="0 0 48 48">237 <path d="M24 8v32M8 24h32" fill="none"/>238 </svg>239 </div>240 241 <!-- Snackbar -->242 <div class="snackbar">243 <div>1 item moved to "Green".</div>244 <div class="action">Undo</div>245 </div>246 247 <!-- Bottom navigation -->248 <div class="bottom-nav">249 <div class="nav-item">250 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9h-6v-6H9v6H3z"/></svg>251 <div>Home</div>252 </div>253 <div class="nav-item">254 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.5l7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>255 <div>Starred</div>256 </div>257 <div class="nav-item">258 <svg viewBox="0 0 24 24"><path d="M7 12a3 3 0 100-6 3 3 0 000 6zm10 0a3 3 0 100-6 3 3 0 000 6zm-14 8c0-3 3-5 7-5s7 2 7 5H3z"/></svg>259 <div>Shared</div>260 </div>261 <div class="nav-item active">262 <svg viewBox="0 0 24 24"><path d="M3 7h7l2-2h9a2 2 0 012 2v11a2 2 0 01-2 2H3a2 2 0 01-2-2V9a2 2 0 012-2z"/></svg>263 <div>Files</div>264 </div>265 </div>266 267</div>268</body>269</html>