GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Drive - Suggested</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#2b2325; color:#eee;13 }14 15 /* Status bar */16 .status-bar {17 height:100px;18 padding:0 40px;19 display:flex; align-items:center; justify-content:space-between;20 font-size:34px; color:#fff;21 }22 .status-icons { display:flex; gap:22px; align-items:center; }23 .dot { width:10px; height:10px; background:#cfcfcf; border-radius:50%; opacity:0.9; }24 .tiny-circle { width:26px; height:26px; background:#cfcfcf; border-radius:50%; opacity:0.85; }25 26 /* Search bar area */27 .search-row {28 padding:0 36px;29 }30 .search-pill {31 height:112px; border-radius:56px;32 background:#3a2f33; color:#cfc3c6;33 display:flex; align-items:center; justify-content:flex-start;34 padding:0 40px; gap:28px;35 }36 .avatar {37 margin-left:auto;38 width:92px; height:92px; border-radius:50%;39 background:#1e88e5; color:#fff; display:flex; align-items:center; justify-content:center;40 font-weight:bold; font-size:44px;41 }42 .ham {43 width:56px; height:56px;44 }45 .ham svg rect { fill:#e6dfe1; }46 47 /* Tabs */48 .tabs {49 margin-top:26px;50 padding:0 36px;51 display:flex; gap:60px; align-items:flex-end;52 height:120px; border-bottom:1px solid #4a3c41;53 }54 .tab {55 font-size:40px; color:#cfc3c6;56 }57 .tab.active { color:#f48fb1; position:relative; }58 .tab.active::after {59 content:''; position:absolute; left:0; bottom:-22px;60 width:180px; height:16px; border-radius:8px; background:#f48fb1;61 }62 63 /* File cards */64 .list { padding:10px 36px 0 36px; }65 .card {66 padding:34px 24px 30px 24px;67 border-bottom:1px solid #4a3c41;68 }69 .card-header {70 display:flex; align-items:center;71 gap:22px; margin-bottom:26px;72 }73 .file-title {74 font-size:44px; font-weight:600; color:#f0e8ea;75 }76 .spacer { flex:1; }77 .three-dots {78 width:56px; height:56px;79 }80 .badge {81 width:66px; height:66px; border-radius:14px;82 background:#d87986; display:flex; align-items:center; justify-content:center;83 }84 .badge.image { background:#d87986; }85 .badge svg { width:40px; height:40px; fill:#2b2325; }86 87 .preview {88 width:100%; height:480px; border-radius:30px;89 background:#E0E0E0; border:1px solid #BDBDBD;90 display:flex; align-items:center; justify-content:center;91 color:#757575; font-size:36px; text-align:center;92 }93 .activity {94 display:flex; align-items:center; gap:26px;95 margin-top:30px;96 }97 .activity .avatar-small {98 width:90px; height:90px; border-radius:50%;99 background:#1e88e5; color:#fff; display:flex; align-items:center; justify-content:center;100 font-weight:bold; font-size:42px;101 }102 .activity-text { font-size:36px; color:#cfc3c6; }103 104 /* Bottom nav */105 .bottom-nav {106 position:absolute; left:0; right:0; bottom:0;107 height:220px; border-top:1px solid #4a3c41;108 background:#2b2325;109 padding:18px 40px 30px 40px;110 }111 .nav-items {112 display:flex; justify-content:space-between; align-items:center; margin-top:12px;113 }114 .nav-item {115 width:210px; height:140px; color:#cfc3c6;116 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;117 border-radius:28px;118 }119 .nav-item.active {120 background:#4a3b40; color:#fff;121 }122 .nav-label { font-size:34px; }123 .nav-icon svg { width:48px; height:48px; fill:#cfc3c6; }124 .nav-item.active .nav-icon svg { fill:#ffffff; }125 .gesture {126 position:absolute; bottom:14px; left:50%; transform:translateX(-50%);127 width:240px; height:12px; border-radius:6px; background:#bdb5b8; opacity:0.8;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status bar -->135 <div class="status-bar">136 <div>5:16</div>137 <div class="status-icons">138 <div class="tiny-circle"></div>139 <div class="tiny-circle"></div>140 <div class="tiny-circle"></div>141 <div class="dot"></div>142 <div class="tiny-circle"></div>143 <div class="tiny-circle"></div>144 </div>145 </div>146 147 <!-- Search -->148 <div class="search-row">149 <div class="search-pill">150 <div class="ham">151 <svg viewBox="0 0 24 24">152 <rect x="3" y="5" width="18" height="2"></rect>153 <rect x="3" y="11" width="18" height="2"></rect>154 <rect x="3" y="17" width="18" height="2"></rect>155 </svg>156 </div>157 <div style="font-size:40px;">Search in Drive</div>158 <div class="avatar">K</div>159 </div>160 </div>161 162 <!-- Tabs -->163 <div class="tabs">164 <div class="tab active">Suggested</div>165 <div class="tab">Notifications</div>166 </div>167 168 <!-- List cards -->169 <div class="list">170 171 <!-- Card 1 -->172 <div class="card">173 <div class="card-header">174 <div class="badge">175 <svg viewBox="0 0 24 24">176 <rect x="3" y="4" width="18" height="14" rx="2"></rect>177 <rect x="6" y="8" width="3" height="6"></rect>178 <rect x="11" y="8" width="3" height="6"></rect>179 <rect x="16" y="8" width="3" height="6"></rect>180 </svg>181 </div>182 <div class="file-title">Outdoor yoga.mp4</div>183 <div class="spacer"></div>184 <div class="three-dots">185 <svg viewBox="0 0 24 24" fill="#cfc3c6">186 <circle cx="12" cy="5" r="2.2"></circle>187 <circle cx="12" cy="12" r="2.2"></circle>188 <circle cx="12" cy="19" r="2.2"></circle>189 </svg>190 </div>191 </div>192 193 <div class="preview">[IMG: Outdoor yoga video frame]</div>194 195 <div class="activity">196 <div class="avatar-small">K</div>197 <div class="activity-text">You edited just now</div>198 </div>199 </div>200 201 <!-- Card 2 -->202 <div class="card">203 <div class="card-header">204 <div class="badge image">205 <svg viewBox="0 0 24 24">206 <rect x="3" y="4" width="18" height="14" rx="2"></rect>207 <circle cx="9" cy="10" r="2.5"></circle>208 <path d="M5 15 L10 11 L14 14 L19 12 L21 15 L5 15 Z"></path>209 </svg>210 </div>211 <div class="file-title">Pizza.jpeg</div>212 <div class="spacer"></div>213 <div class="three-dots">214 <svg viewBox="0 0 24 24" fill="#cfc3c6">215 <circle cx="12" cy="5" r="2.2"></circle>216 <circle cx="12" cy="12" r="2.2"></circle>217 <circle cx="12" cy="19" r="2.2"></circle>218 </svg>219 </div>220 </div>221 222 <div class="preview">[IMG: Cheese pizza close-up]</div>223 224 <div class="activity">225 <div class="avatar-small">K</div>226 <div class="activity-text">You modified today</div>227 </div>228 </div>229 230 </div>231 232 <!-- Bottom navigation -->233 <div class="bottom-nav">234 <div class="nav-items">235 <div class="nav-item active">236 <div class="nav-icon">237 <svg viewBox="0 0 24 24">238 <path d="M12 3 L3 10 L5 10 L5 20 L10 20 L10 14 L14 14 L14 20 L19 20 L19 10 L21 10 Z"></path>239 </svg>240 </div>241 <div class="nav-label">Home</div>242 </div>243 <div class="nav-item">244 <div class="nav-icon">245 <svg viewBox="0 0 24 24">246 <path d="M12 17.3L5 21l2-7-5-4.9 7-.6L12 2l3 6.5 7 .6-5 4.9 2 7z"></path>247 </svg>248 </div>249 <div class="nav-label">Starred</div>250 </div>251 <div class="nav-item">252 <div class="nav-icon">253 <svg viewBox="0 0 24 24">254 <circle cx="8" cy="9" r="3"></circle>255 <circle cx="16" cy="9" r="3"></circle>256 <path d="M3 20c0-3.5 4-5 5-5s5 1.5 5 5H3z"></path>257 <path d="M13 20c0-2.5 3-4 4-4s4 1.5 4 4h-8z"></path>258 </svg>259 </div>260 <div class="nav-label">Shared</div>261 </div>262 <div class="nav-item">263 <div class="nav-icon">264 <svg viewBox="0 0 24 24">265 <rect x="4" y="5" width="16" height="12" rx="2"></rect>266 <path d="M14 5v3h6"></path>267 </svg>268 </div>269 <div class="nav-label">Files</div>270 </div>271 </div>272 <div class="gesture"></div>273 </div>274 275</div>276</body>277</html>