GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Drive UI Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#121212;color:#ECECEC;11  }12  .status-bar{13    height:80px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;color:#CFCFCF;font-size:34px;14  }15  .status-right{display:flex;gap:22px;align-items:center;}16  .top-search{17    margin:16px 28px 18px 28px;display:flex;align-items:center;gap:22px;18    background:#2B3136;border-radius:60px;padding:26px 30px;color:#9EA6AD;19  }20  .top-search .spacer{flex:1;}21  .avatar{22    width:76px;height:76px;border-radius:50%;background:#7A665C;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:36px;23  }24  .tabs{25    display:flex;justify-content:space-between;align-items:flex-end;color:#BFC6CE;26    padding:0 40px 22px 40px;font-size:40px;27  }28  .tab-active{color:#E7F0FF;position:relative;}29  .tab-active::after{30    content:"";position:absolute;left:0;bottom:-20px;width:180px;height:10px;background:#5AA9FF;border-radius:8px;31  }32  .divider{height:2px;background:#222;margin:0;}33  .card{34    padding:34px 40px 30px 40px;35  }36  .file-header{37    display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;38  }39  .file-title{40    display:flex;align-items:center;gap:20px;font-size:44px;color:#F5F5F5;41  }42  .file-meta{43    display:flex;align-items:center;gap:20px;color:#B6BDC4;font-size:36px;margin-top:26px;44  }45  .chip-avatar{46    width:70px;height:70px;border-radius:50%;background:#7A665C;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:34px;47  }48  .image-placeholder{49    width:920px;height:500px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:28px;50    display:flex;align-items:center;justify-content:center;color:#757575;font-size:40px;margin-left:30px;51  }52  .image-placeholder.wide{width:920px;height:520px;}53  .fab{54    position:absolute;right:60px;bottom:160px;width:120px;height:120px;border-radius:30px;background:#2F3A42;display:flex;align-items:center;justify-content:center;55    box-shadow:0 6px 12px rgba(0,0,0,0.4);56  }57  .snackbar{58    position:absolute;left:28px;bottom:270px;width:1024px;background:#EDEDED;color:#333;border-radius:24px;padding:34px;font-size:38px;59    box-shadow:0 2px 6px rgba(0,0,0,0.25);60  }61  .bottom-nav{62    position:absolute;bottom:90px;left:0;width:100%;height:180px;background:#1F2428;border-top:2px solid #2A2A2A;display:flex;align-items:center;justify-content:space-around;63  }64  .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px;color:#B9C0C8;font-size:34px;}65  .nav-item.active{color:#FFFFFF;}66  .nav-pill{67    position:absolute;left:40px;bottom:124px;width:140px;height:90px;background:#2D3A44;border-radius:26px;68  }69  .gesture-bar{70    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);71    width:260px;height:18px;background:#E6E6E6;border-radius:10px;72  }73  /* utility */74  .mt-30{margin-top:30px;}75  .rel{position:relative;}76  svg{display:block}77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="status-bar">84    <div>6:10</div>85    <div class="status-right">86      <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#CFCFCF"/></svg>87      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 9l9-6 9 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z" fill="#CFCFCF"/></svg>88      <svg width="40" height="40" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"/><rect x="6" y="8" width="6" height="8" fill="#CFCFCF"/></svg>89    </div>90  </div>91 92  <!-- Search bar -->93  <div class="top-search">94    <svg width="52" height="52" viewBox="0 0 24 24">95      <path d="M3 6h18M3 12h18M3 18h18" stroke="#B7BEC5" stroke-width="2" stroke-linecap="round"/>96    </svg>97    <div style="font-size:42px;">Search in Drive</div>98    <div class="spacer"></div>99    <div class="avatar">C</div>100  </div>101 102  <!-- Tabs -->103  <div class="tabs">104    <div class="tab-active">Suggested</div>105    <div>Notifications</div>106  </div>107  <div class="divider"></div>108 109  <!-- First file card -->110  <div class="card">111    <div class="file-header">112      <div class="file-title">113        <!-- small image type icon -->114        <div style="width:54px;height:54px;background:#D65A5A;border-radius:8px;display:flex;align-items:center;justify-content:center;">115          <svg width="34" height="34" viewBox="0 0 24 24">116            <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>117            <path d="M5 15l4-4 3 3 4-5 3 6" stroke="#fff" stroke-width="2" fill="none"/>118          </svg>119        </div>120        <div>Riviera maya.jpg</div>121      </div>122      <svg width="40" height="40" viewBox="0 0 24 24">123        <circle cx="12" cy="5" r="2" fill="#B7BEC5"/><circle cx="12" cy="12" r="2" fill="#B7BEC5"/><circle cx="12" cy="19" r="2" fill="#B7BEC5"/>124      </svg>125    </div>126 127    <div class="image-placeholder">128      [IMG: Beach photo]129    </div>130 131    <div class="file-meta">132      <div class="chip-avatar">C</div>133      <div>You opened today</div>134    </div>135  </div>136 137  <div class="divider"></div>138 139  <!-- Second file card -->140  <div class="card rel">141    <div class="file-header">142      <div class="file-title">143        <div style="width:54px;height:54px;background:#D65A5A;border-radius:8px;display:flex;align-items:center;justify-content:center;">144          <svg width="34" height="34" viewBox="0 0 24 24">145            <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>146            <path d="M5 15l4-4 3 3 4-5 3 6" stroke="#fff" stroke-width="2" fill="none"/>147          </svg>148        </div>149        <div>images (1).jpeg</div>150      </div>151      <svg width="40" height="40" viewBox="0 0 24 24">152        <circle cx="12" cy="5" r="2" fill="#B7BEC5"/><circle cx="12" cy="12" r="2" fill="#B7BEC5"/><circle cx="12" cy="19" r="2" fill="#B7BEC5"/>153      </svg>154    </div>155 156    <div class="image-placeholder wide">157      [IMG: Snowy mountains]158    </div>159 160    <!-- floating add button -->161    <div class="fab">162      <svg width="56" height="56" viewBox="0 0 24 24">163        <path d="M12 5v14M5 12h14" stroke="#CFE6FF" stroke-width="3" stroke-linecap="round"/>164      </svg>165    </div>166  </div>167 168  <!-- Snackbar -->169  <div class="snackbar">1 item will be downloaded. See notification for details.</div>170 171  <!-- Bottom navigation -->172  <div class="bottom-nav">173    <div class="nav-pill"></div>174    <div class="nav-item active">175      <svg width="58" height="58" viewBox="0 0 24 24">176        <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" fill="#DDE8F5"/>177      </svg>178      <div>Home</div>179    </div>180    <div class="nav-item">181      <svg width="58" height="58" viewBox="0 0 24 24"><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="#B9C0C8"/></svg>182      <div>Starred</div>183    </div>184    <div class="nav-item">185      <svg width="58" height="58" viewBox="0 0 24 24">186        <circle cx="7.5" cy="8" r="3.5" fill="#B9C0C8"/>187        <circle cx="16.5" cy="8" r="3.5" fill="#B9C0C8"/>188        <path d="M3 20c0-3.5 3-6 6.5-6s6.5 2.5 6.5 6" stroke="#B9C0C8" stroke-width="2" fill="none"/>189      </svg>190      <div>Shared</div>191    </div>192    <div class="nav-item">193      <svg width="58" height="58" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" fill="#B9C0C8"/><rect x="6" y="7" width="10" height="2" fill="#1F2428"/></svg>194      <div>Files</div>195    </div>196  </div>197 198  <!-- Gesture bar -->199  <div class="gesture-bar"></div>200 201</div>202</body>203</html>