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 UI Mock</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: #121212; color: #EAEAEA;13  }14 15  /* Status bar */16  .status-bar {17    height: 86px; padding: 0 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #BDBDBD; font-size: 34px;20  }21  .status-right { display: flex; align-items: center; gap: 28px; }22 23  /* App bar */24  .app-bar {25    height: 150px; padding: 0 28px;26    display: flex; align-items: center; gap: 24px;27  }28  .icon-btn {29    width: 72px; height: 72px;30    display: flex; align-items: center; justify-content: center;31    border-radius: 36px;32  }33  .search-pill {34    flex: 1;35    height: 96px; border-radius: 48px;36    background: #2B2E33;37    display: flex; align-items: center;38    padding: 0 26px; color: #9FA4AA; font-size: 36px;39  }40  .search-pill svg { margin-right: 18px; }41  .avatar {42    width: 88px; height: 88px; border-radius: 44px;43    background: #C2185B; color: #fff; font-weight: 700;44    display: flex; align-items: center; justify-content: center;45    font-size: 40px;46  }47 48  /* Tabs */49  .tabs {50    height: 88px; padding: 0 32px;51    display: flex; align-items: end; gap: 40px;52    border-bottom: 1px solid #252525;53    font-size: 34px;54  }55  .tab {56    height: 88px; display: flex; align-items: center;57    color: #9FA4AA;58  }59  .tab.active {60    color: #FFFFFF; border-bottom: 4px solid #6EA8FF;61  }62 63  /* List items */64  .content { padding-bottom: 260px; }65  .item { padding: 24px 32px 0 32px; }66  .title-row {67    display: flex; align-items: center; justify-content: space-between; 68    margin-bottom: 16px;69  }70  .title-left { display: flex; align-items: center; gap: 22px; }71  .pdf-badge {72    background: #EF5350; color: #fff; font-weight: 700;73    border-radius: 10px; font-size: 30px;74    padding: 8px 14px;75  }76  .item-title { font-size: 44px; font-weight: 700; color: #FFFFFF; }77  .kebab { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }78 79  .card {80    background: #1C1C1C; border-radius: 26px;81    padding: 24px; margin-bottom: 20px;82  }83  .preview {84    width: 100%; height: 500px;85    background: #E0E0E0; border: 1px solid #BDBDBD;86    border-radius: 16px;87    display: flex; align-items: center; justify-content: center;88    color: #757575; font-size: 36px;89  }90 91  .info-row {92    display: flex; align-items: center; gap: 20px;93    color: #C7C7C7; font-size: 34px; margin-bottom: 22px;94  }95  .small-avatar {96    width: 66px; height: 66px; border-radius: 33px;97    background: #C2185B; color: #fff; font-weight: 700;98    display: flex; align-items: center; justify-content: center;99    font-size: 34px;100  }101  .divider { height: 1px; margin: 18px 0; background: #252525; }102 103  /* Floating action button */104  .fab {105    position: absolute; right: 36px; bottom: 330px;106    width: 112px; height: 112px; border-radius: 56px;107    background: #3D74F6; box-shadow: 0 6px 12px rgba(0,0,0,0.4);108    display: flex; align-items: center; justify-content: center;109  }110  .fab svg { fill: #fff; }111 112  /* Bottom navigation */113  .bottom-nav {114    position: absolute; left: 0; bottom: 0;115    width: 100%; height: 180px;116    background: #1A1A1A; border-top: 1px solid #252525;117    display: flex; align-items: center; justify-content: space-around;118    padding-bottom: 10px;119  }120  .nav-item {121    width: 25%; text-align: center; color: #A1A1A1; font-size: 28px;122  }123  .nav-item .icon { width: 56px; height: 56px; margin: 0 auto 10px; display: block; }124  .nav-item.active { color: #6EA8FF; }125  /* Gesture bar */126  .gesture {127    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);128    width: 220px; height: 8px; background: #BDBDBD; border-radius: 4px; opacity: 0.5;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div>8:26</div>138    <div class="status-right">139      <!-- WiFi -->140      <svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD">141        <path d="M12 20l2-2-2-2-2 2 2 2zm-5-5l2-2 3 3 3-3 2 2-5 5-5-5zm-5-5l2-2 8 8 8-8 2 2-10 10L2 10z"/>142      </svg>143      <!-- Battery -->144      <svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD">145        <path d="M17 6h2v2h1v8h-1v2h-2V6zM3 7h13v10H3V7z"/>146      </svg>147    </div>148  </div>149 150  <!-- App Bar -->151  <div class="app-bar">152    <div class="icon-btn">153      <!-- Hamburger -->154      <svg width="44" height="44" viewBox="0 0 24 24" fill="#EAEAEA">155        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>156      </svg>157    </div>158    <div class="search-pill">159      <svg width="40" height="40" viewBox="0 0 24 24" fill="#9FA4AA">160        <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L15.5 14zM6.5 11a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z"/>161      </svg>162      <span>Search in Drive</span>163    </div>164    <div class="avatar">C</div>165  </div>166 167  <!-- Tabs -->168  <div class="tabs">169    <div class="tab active">Suggested</div>170    <div class="tab">Notifications</div>171  </div>172 173  <!-- Content -->174  <div class="content">175    <!-- Item 1 -->176    <div class="item">177      <div class="title-row">178        <div class="title-left">179          <div class="pdf-badge">PDF</div>180          <div class="item-title">Amsterdam.pdf</div>181        </div>182        <div class="kebab">183          <svg width="28" height="28" viewBox="0 0 24 24" fill="#9FA4AA">184            <circle cx="12" cy="5" r="2"></circle>185            <circle cx="12" cy="12" r="2"></circle>186            <circle cx="12" cy="19" r="2"></circle>187          </svg>188        </div>189      </div>190      <div class="card">191        <div class="preview">[IMG: Document Preview - Amsterdam]</div>192      </div>193      <div class="info-row">194        <div class="small-avatar">C</div>195        <div>You opened today</div>196      </div>197      <div class="divider"></div>198    </div>199 200    <!-- Item 2 -->201    <div class="item">202      <div class="title-row">203        <div class="title-left">204          <div class="pdf-badge">PDF</div>205          <div class="item-title">Venice tour.pdf</div>206        </div>207        <div class="kebab">208          <svg width="28" height="28" viewBox="0 0 24 24" fill="#9FA4AA">209            <circle cx="12" cy="5" r="2"></circle>210            <circle cx="12" cy="12" r="2"></circle>211            <circle cx="12" cy="19" r="2"></circle>212          </svg>213        </div>214      </div>215      <div class="card">216        <div class="preview">[IMG: Document Preview - Venice]</div>217      </div>218      <div class="info-row">219        <div class="small-avatar">C</div>220        <div>You edited today</div>221      </div>222      <div class="divider"></div>223    </div>224  </div>225 226  <!-- Floating Action Button -->227  <div class="fab">228    <svg width="44" height="44" viewBox="0 0 24 24">229      <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>230    </svg>231  </div>232 233  <!-- Bottom Navigation -->234  <div class="bottom-nav">235    <div class="nav-item active">236      <svg class="icon" viewBox="0 0 24 24" fill="#6EA8FF">237        <path d="M12 3l9 8h-3v9h-12v-9H3l9-8z"/>238      </svg>239      Home240    </div>241    <div class="nav-item">242      <svg class="icon" viewBox="0 0 24 24" fill="#A1A1A1">243        <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"/>244      </svg>245      Starred246    </div>247    <div class="nav-item">248      <svg class="icon" viewBox="0 0 24 24" fill="#A1A1A1">249        <path d="M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm-7 8c0-3.3 3.1-6 7-6s7 2.7 7 6v1H5v-1z"/>250      </svg>251      Shared252    </div>253    <div class="nav-item">254      <svg class="icon" viewBox="0 0 24 24" fill="#A1A1A1">255        <path d="M6 2h9l5 5v15H6V2zm9 1.5V8h5.5L15 3.5z"/>256      </svg>257      Files258    </div>259  </div>260  <div class="gesture"></div>261</div>262</body>263</html>