GD-ML/AndroidCode

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>Drive Mobile UI</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; position:relative; overflow:hidden;11    background:#2A1E17; color:#EADFD5;12  }13  .status-bar {14    height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;15    color:#EADFD5; font-size:32px; opacity:0.9;16  }17  .status-icons { display:flex; gap:22px; align-items:center; }18  .pill-search {19    margin:16px 30px 0; height:120px; background:#4A3A30; border-radius:60px;20    display:flex; align-items:center; padding:0 34px; box-sizing:border-box;21  }22  .pill-search .left-icon { width:60px; height:60px; margin-right:24px; }23  .pill-search .search-text { font-size:42px; color:#EADFD5; opacity:0.9; }24  .avatar {25    position:absolute; right:30px; top:130px; width:96px; height:96px;26    background:#7E57C2; border-radius:50%; display:flex; align-items:center; justify-content:center;27    font-weight:bold; color:white;28    box-shadow:0 8px 16px rgba(0,0,0,0.35);29  }30  .tabs {31    margin-top:38px; padding:0 34px; display:flex; justify-content:space-between; align-items:flex-end;32    color:#DCC1A6;33  }34  .tab { font-size:40px; opacity:0.9; }35  .tab.active { color:#F0B37A; position:relative; }36  .tab.active::after {37    content:""; position:absolute; bottom:-12px; left:0; width:140px; height:10px; background:#F0B37A; border-radius:5px;38  }39  .divider { margin-top:24px; height:2px; background:#3A2A22; }40  .section-header {41    display:flex; justify-content:space-between; align-items:center;42    padding:30px 34px; font-size:34px; color:#CDB19B;43  }44  .grid-icon { width:54px; height:54px; opacity:0.8; }45  .list {46    padding:0 12px 0 24px;47  }48  .row {49    display:flex; align-items:center; justify-content:space-between;50    padding:28px 20px; border-bottom:1px solid rgba(255,255,255,0.06);51  }52  .left { display:flex; align-items:center; }53  .icon-wrap { width:92px; height:92px; margin-right:36px; display:flex; align-items:center; justify-content:center; }54  .file-info { display:flex; flex-direction:column; }55  .file-title { font-size:44px; color:#EADFD5; }56  .file-meta { margin-top:10px; font-size:30px; color:#CDB19B; display:flex; align-items:center; gap:14px; }57  .meta-icon { width:36px; height:36px; opacity:0.8; }58  .kebab { width:50px; height:50px; opacity:0.8; }59  /* Icon tones */60  .folder-ico svg path { fill:#D6B6A4; }61  .pdf-badge { background:#CC4B4B; color:#fff; font-weight:bold; border-radius:12px; padding:10px 16px; font-size:30px; }62  .doc-ico path { fill:#5A8AF0; }63  .image-thumb {64    width:92px; height:92px; background:#E0E0E0; border:1px solid #BDBDBD;65    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; margin-right:36px;66  }67  .fab {68    position:absolute; right:36px; bottom:360px; width:120px; height:120px; background:#8A6B56;69    border-radius:32px; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(0,0,0,0.45);70  }71  .fab svg { width:56px; height:56px; }72  .bottom-bar {73    position:absolute; bottom:0; left:0; right:0; height:200px; background:#3A2A22;74    display:flex; align-items:center; justify-content:space-around; color:#DCC1A6;75    border-top-left-radius:20px; border-top-right-radius:20px;76  }77  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; font-size:34px; }78  .nav-icon { width:52px; height:52px; }79  .nav-item.active { color:#F0B37A; }80  .home-indicator { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:280px; height:10px; background:#BDA896; border-radius:6px; opacity:0.5; }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Status bar -->87  <div class="status-bar">88    <div>8:41</div>89    <div class="status-icons">90      <span>20°</span>91      <span>⚠️</span>92      <span>18°</span>93      <span>✓</span>94      <span>•</span>95      <span>📶</span>96      <span>🔋</span>97    </div>98  </div>99 100  <!-- Search pill -->101  <div class="pill-search">102    <svg class="left-icon" viewBox="0 0 24 24">103      <rect x="2" y="5" width="20" height="2" fill="#EADFD5"></rect>104      <rect x="2" y="11" width="20" height="2" fill="#EADFD5"></rect>105      <rect x="2" y="17" width="20" height="2" fill="#EADFD5"></rect>106    </svg>107    <div class="search-text">Search in Drive</div>108  </div>109  <div class="avatar">M</div>110 111  <!-- Tabs -->112  <div class="tabs">113    <div class="tab active">My Drive</div>114    <div class="tab">Computers</div>115  </div>116  <div class="divider"></div>117 118  <!-- Section header -->119  <div class="section-header">120    <div>Last modified by me ↓</div>121    <svg class="grid-icon" viewBox="0 0 24 24">122      <rect x="3" y="3" width="7" height="7" fill="#CDB19B"></rect>123      <rect x="14" y="3" width="7" height="7" fill="#CDB19B"></rect>124      <rect x="3" y="14" width="7" height="7" fill="#CDB19B"></rect>125      <rect x="14" y="14" width="7" height="7" fill="#CDB19B"></rect>126    </svg>127  </div>128 129  <!-- File list -->130  <div class="list">131 132    <!-- Important Docs folder -->133    <div class="row">134      <div class="left">135        <div class="icon-wrap folder-ico">136          <svg viewBox="0 0 24 24">137            <path d="M4 6h6l2 2h8v10H4V6z"></path>138          </svg>139        </div>140        <div class="file-info">141          <div class="file-title">Important Docs</div>142          <div class="file-meta">Modified by me Oct 11</div>143        </div>144      </div>145      <svg class="kebab" viewBox="0 0 24 24">146        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>147        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>148        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>149      </svg>150    </div>151 152    <!-- Yoga Video folder -->153    <div class="row">154      <div class="left">155        <div class="icon-wrap folder-ico">156          <svg viewBox="0 0 24 24">157            <path d="M4 6h6l2 2h8v10H4V6z"></path>158          </svg>159        </div>160        <div class="file-info">161          <div class="file-title">Yoga Video</div>162          <div class="file-meta">Modified by me Oct 11</div>163        </div>164      </div>165      <svg class="kebab" viewBox="0 0 24 24">166        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>167        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>168        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>169      </svg>170    </div>171 172    <!-- Dance steps PDF -->173    <div class="row">174      <div class="left">175        <div class="pdf-badge">PDF</div>176        <div style="width:36px"></div>177        <div class="file-info">178          <div class="file-title">dance steps and positions.pdf</div>179          <div class="file-meta">180            <svg class="meta-icon" viewBox="0 0 24 24">181              <path d="M12 12c2.76 0 5-2.46 5-5s-2.24-5-5-5-5 2.46-5 5 2.24 5 5 5zm-9 9c0-3.31 4.03-6 9-6s9 2.69 9 6v1H3v-1z" fill="#CDB19B"></path>182            </svg>183            Modified by me Oct 11184          </div>185        </div>186      </div>187      <svg class="kebab" viewBox="0 0 24 24">188        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>189        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>190        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>191      </svg>192    </div>193 194    <!-- Complete guide PDF -->195    <div class="row">196      <div class="left">197        <div class="pdf-badge">PDF</div>198        <div style="width:36px"></div>199        <div class="file-info">200          <div class="file-title">completeguidetod.pdf</div>201          <div class="file-meta">Modified by me Oct 11</div>202        </div>203      </div>204      <svg class="kebab" viewBox="0 0 24 24">205        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>206        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>207        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>208      </svg>209    </div>210 211    <!-- ToDoReminder document -->212    <div class="row">213      <div class="left">214        <div class="icon-wrap">215          <svg class="doc-ico" viewBox="0 0 24 24">216            <path d="M6 2h9l5 5v15H6z"></path>217          </svg>218        </div>219        <div class="file-info">220          <div class="file-title">ToDoReminder_Backup</div>221          <div class="file-meta">Modified by me Oct 11</div>222        </div>223      </div>224      <svg class="kebab" viewBox="0 0 24 24">225        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>226        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>227        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>228      </svg>229    </div>230 231    <!-- Plantum image -->232    <div class="row">233      <div class="left">234        <div class="image-thumb">[IMG: Plant photo]</div>235        <div class="file-info">236          <div class="file-title">Plantum_1689052714923.jpg</div>237          <div class="file-meta">Modified by me Oct 11</div>238        </div>239      </div>240      <svg class="kebab" viewBox="0 0 24 24">241        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>242        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>243        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>244      </svg>245    </div>246 247    <!-- Bruschetta image -->248    <div class="row">249      <div class="left">250        <div class="image-thumb">[IMG: Bruschetta]</div>251        <div class="file-info">252          <div class="file-title">Bruschetta.jpg</div>253          <div class="file-meta">Modified by me Oct 11</div>254        </div>255      </div>256      <svg class="kebab" viewBox="0 0 24 24">257        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>258        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>259        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>260      </svg>261    </div>262 263    <!-- Abstract art image -->264    <div class="row">265      <div class="left">266        <div class="image-thumb">[IMG: Abstract art]</div>267        <div class="file-info">268          <div class="file-title">Abstract art.jpeg</div>269          <div class="file-meta">Modified by me Oct 11</div>270        </div>271      </div>272      <svg class="kebab" viewBox="0 0 24 24">273        <circle cx="12" cy="4" r="2" fill="#CDB19B"></circle>274        <circle cx="12" cy="12" r="2" fill="#CDB19B"></circle>275        <circle cx="12" cy="20" r="2" fill="#CDB19B"></circle>276      </svg>277    </div>278 279  </div>280 281  <!-- Floating Add Button -->282  <div class="fab">283    <svg viewBox="0 0 24 24">284      <rect x="10" y="4" width="4" height="16" fill="#F8EDE3"></rect>285      <rect x="4" y="10" width="16" height="4" fill="#F8EDE3"></rect>286    </svg>287  </div>288 289  <!-- Bottom navigation -->290  <div class="bottom-bar">291    <div class="nav-item">292      <svg class="nav-icon" viewBox="0 0 24 24">293        <path d="M3 10l9-7 9 7v10H3z" fill="#DCC1A6"></path>294      </svg>295      <div>Home</div>296    </div>297    <div class="nav-item">298      <svg class="nav-icon" viewBox="0 0 24 24">299        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#DCC1A6"></path>300      </svg>301      <div>Starred</div>302    </div>303    <div class="nav-item">304      <svg class="nav-icon" viewBox="0 0 24 24">305        <path d="M12 12c2.76 0 5-2.46 5-5s-2.24-5-5-5-5 2.46-5 5 2.24 5 5 5zm-9 9c0-3.31 4.03-6 9-6s9 2.69 9 6v1H3v-1z" fill="#DCC1A6"></path>306      </svg>307      <div>Shared</div>308    </div>309    <div class="nav-item active">310      <svg class="nav-icon" viewBox="0 0 24 24">311        <path d="M4 6h6l2 2h8v10H4V6z" fill="#F0B37A"></path>312      </svg>313      <div>Files</div>314    </div>315  </div>316  <div class="home-indicator"></div>317 318</div>319</body>320</html>