GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive Home</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #111313; /* very dark (app background) */13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1440px;22    height: 120px;23    padding: 0 48px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-weight: 600;30    font-size: 54px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon-badge {38    width: 54px; height: 54px;39  }40 41  /* Header search row */42  .header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1440px;47    padding: 24px 36px 12px 36px;48    box-sizing: border-box;49  }50  .search-row {51    display: flex;52    align-items: center;53    gap: 28px;54    padding: 24px 12px;55  }56  .hamburger {57    width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;58  }59  .search-pill {60    flex: 1;61    height: 112px;62    border-radius: 64px;63    background: #202423;64    display: flex;65    align-items: center;66    padding: 0 40px;67    box-sizing: border-box;68    color: #9FA7A3;69    font-size: 46px;70  }71  .avatar {72    width: 120px; height: 120px; border-radius: 60px; background: #1E2A24; color: #C7EBD2;73    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 54px;74    border: 2px solid #2F3A35;75  }76 77  /* Tabs */78  .tabs {79    margin-top: 8px;80    display: flex;81    gap: 80px;82    padding: 0 48px;83    font-size: 48px;84    font-weight: 600;85  }86  .tab {87    padding: 22px 8px;88    color: #BDC5C0;89    position: relative;90  }91  .tab.active { color: #9FE6B7; }92  .tab.active::after {93    content: '';94    position: absolute;95    left: 0; bottom: -4px;96    width: 100%; height: 8px; background: #93D6A7; border-radius: 4px;97  }98 99  /* File list */100  .list {101    position: absolute;102    top: 420px;103    left: 0;104    width: 1440px;105    padding: 24px 36px 280px 36px;106    box-sizing: border-box;107  }108  .card {109    background: #171A19;110    border-radius: 24px;111    padding: 36px;112    margin-bottom: 60px;113    box-sizing: border-box;114    box-shadow: 0 6px 0 rgba(0,0,0,0.35) inset;115  }116  .card-header {117    display: flex;118    align-items: center;119    gap: 24px;120    margin-bottom: 28px;121  }122  .file-icon {123    width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center;124    font-size: 26px; font-weight: 800; color: white;125  }126  .file-icon.pdf { background: #C84A4A; }127  .file-icon.doc { background: #5E8DE6; }128  .title {129    font-size: 52px;130    flex: 1;131  }132  .kebab {133    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;134  }135 136  .thumb {137    width: 100%;138    height: 540px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    border-radius: 20px;142    display: flex; align-items: center; justify-content: center;143    color: #757575; font-size: 44px;144    overflow: hidden;145  }146 147  .meta {148    display: flex; align-items: center; gap: 24px; margin-top: 28px; color: #C6CDC8; font-size: 44px;149  }150  .meta .avatar {151    width: 96px; height: 96px; font-size: 46px;152  }153 154  /* Floating Add Button */155  .fab {156    position: absolute;157    right: 48px;158    bottom: 360px;159    width: 180px; height: 180px;160    border-radius: 90px;161    background: #2C4A34;162    display: flex; align-items: center; justify-content: center;163    box-shadow: 0 12px 24px rgba(0,0,0,0.5);164    border: 2px solid #3A5A43;165  }166 167  /* Bottom nav */168  .bottom-nav {169    position: absolute;170    left: 0; bottom: 0;171    width: 1440px; height: 240px;172    background: #131615;173    border-top: 1px solid #212624;174    display: flex; align-items: center; justify-content: space-around;175    padding-bottom: 40px;176    box-sizing: border-box;177  }178  .nav-item {179    display: flex; flex-direction: column; align-items: center; gap: 16px; color: #C7CEC9; font-size: 44px;180  }181  .nav-icon { width: 88px; height: 88px; }182  .nav-item.active {183    color: #A3E0B8;184  }185  .home-highlight {186    width: 160px; height: 120px; background: #2A3B31; border-radius: 60px;187    display: flex; align-items: center; justify-content: center;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status bar -->195  <div class="status-bar">196    <div>5:41</div>197    <div class="status-right">198      <!-- simple "96°" temperature as text -->199      <div style="font-size:42px; color:#C7CEC9;">96°</div>200      <!-- Wi-Fi icon -->201      <svg class="icon-badge" viewBox="0 0 24 24" fill="none">202        <path d="M2 8c5-4 15-4 20 0" stroke="#C7CEC9" stroke-width="2" stroke-linecap="round"/>203        <path d="M5 12c4-3 10-3 14 0" stroke="#C7CEC9" stroke-width="2" stroke-linecap="round"/>204        <path d="M9 16c2-2 4-2 6 0" stroke="#C7CEC9" stroke-width="2" stroke-linecap="round"/>205        <circle cx="12" cy="19" r="2" fill="#C7CEC9"/>206      </svg>207      <!-- Sound icon -->208      <svg class="icon-badge" viewBox="0 0 24 24" fill="none">209        <path d="M4 10h4l6-4v16l-6-4H4z" stroke="#C7CEC9" stroke-width="2"/>210        <path d="M16 8c2 2 2 6 0 8" stroke="#C7CEC9" stroke-width="2" stroke-linecap="round"/>211      </svg>212      <!-- Do Not Disturb dot -->213      <svg class="icon-badge" viewBox="0 0 24 24">214        <circle cx="12" cy="12" r="8" fill="#C7CEC9"/>215      </svg>216      <!-- Battery icon -->217      <svg class="icon-badge" viewBox="0 0 30 24" fill="none">218        <rect x="1" y="4" width="24" height="16" rx="3" stroke="#C7CEC9" stroke-width="2"/>219        <rect x="3" y="6" width="18" height="12" rx="2" fill="#C7CEC9"/>220        <rect x="25" y="9" width="4" height="6" rx="1" fill="#C7CEC9"/>221      </svg>222    </div>223  </div>224 225  <!-- Header with search -->226  <div class="header">227    <div class="search-row">228      <div class="hamburger">229        <svg viewBox="0 0 24 24" width="84" height="84">230          <path d="M3 6h18M3 12h18M3 18h18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>231        </svg>232      </div>233      <div class="search-pill">234        Search in Drive235      </div>236      <div class="avatar">C</div>237    </div>238 239    <div class="tabs">240      <div class="tab active">Suggested</div>241      <div class="tab">Notifications</div>242    </div>243  </div>244 245  <!-- List of files -->246  <div class="list">247 248    <!-- Card 1 -->249    <div class="card">250      <div class="card-header">251        <div class="file-icon pdf">PDF</div>252        <div class="title">08.24_dinner-veg (3).pdf</div>253        <div class="kebab">254          <svg viewBox="0 0 24 24" width="72" height="72">255            <circle cx="12" cy="4" r="2" fill="#C7CEC9"/>256            <circle cx="12" cy="12" r="2" fill="#C7CEC9"/>257            <circle cx="12" cy="20" r="2" fill="#C7CEC9"/>258          </svg>259        </div>260      </div>261      <div class="thumb">[IMG: Menu PDF preview]</div>262      <div class="meta">263        <div class="avatar">C</div>264        <div>You edited today</div>265      </div>266    </div>267 268    <!-- Card 2 -->269    <div class="card">270      <div class="card-header">271        <div class="file-icon doc">TXT</div>272        <div class="title">agents.txt</div>273        <div class="kebab">274          <svg viewBox="0 0 24 24" width="72" height="72">275            <circle cx="12" cy="4" r="2" fill="#C7CEC9"/>276            <circle cx="12" cy="12" r="2" fill="#C7CEC9"/>277            <circle cx="12" cy="20" r="2" fill="#C7CEC9"/>278          </svg>279        </div>280      </div>281      <div class="thumb">[IMG: Text file preview]</div>282      <div class="meta">283        <div class="avatar">C</div>284        <div>You edited today</div>285      </div>286    </div>287 288  </div>289 290  <!-- Floating Add Button -->291  <div class="fab">292    <svg viewBox="0 0 24 24" width="120" height="120">293      <path d="M12 5v14M5 12h14" stroke="#D7F5E5" stroke-width="2" stroke-linecap="round"/>294    </svg>295  </div>296 297  <!-- Bottom Navigation -->298  <div class="bottom-nav">299    <div class="nav-item active">300      <div class="home-highlight">301        <svg class="nav-icon" viewBox="0 0 24 24" fill="none">302          <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#A3E0B8" stroke-width="2"/>303          <path d="M9 21v-6h6v6" stroke="#A3E0B8" stroke-width="2"/>304        </svg>305      </div>306      <div>Home</div>307    </div>308    <div class="nav-item">309      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">310        <path d="M12 2l3 7h7l-5.5 4 2.5 7-7-4.5-7 4.5 2.5-7L2 9h7z" stroke="#C7CEC9" stroke-width="2" stroke-linejoin="round"/>311      </svg>312      <div>Starred</div>313    </div>314    <div class="nav-item">315      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">316        <circle cx="8" cy="9" r="3" stroke="#C7CEC9" stroke-width="2"/>317        <circle cx="16" cy="9" r="3" stroke="#C7CEC9" stroke-width="2"/>318        <path d="M4 20c0-3 3-5 6-5s6 2 6 5" stroke="#C7CEC9" stroke-width="2" stroke-linecap="round"/>319      </svg>320      <div>Shared</div>321    </div>322    <div class="nav-item">323      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">324        <path d="M3 6h10l2 2h6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" stroke="#C7CEC9" stroke-width="2"/>325      </svg>326      <div>Files</div>327    </div>328  </div>329 330</div>331</body>332</html>