GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Files UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#e8efe3; /* mint / pale green */10    border-radius:24px;11    box-shadow:0 10px 30px rgba(0,0,0,0.15);12  }13 14  /* Status bar */15  .statusbar {16    position:absolute; top:0; left:0; width:100%; height:90px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; color:#222;19    font-size:34px; letter-spacing:0.5px;20  }21  .status-icons { display:flex; align-items:center; gap:26px; }22  .icon { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; }23  .icon svg { width:40px; height:40px; }24 25  /* Toolbar */26  .toolbar {27    position:absolute; top:90px; left:0; width:100%; height:120px;28    display:flex; align-items:center;29    padding:0 28px;30  }31  .back-btn { width:100px; height:100%; display:flex; align-items:center; justify-content:center; }32  .title { font-size:54px; color:#222; font-weight:500; margin-left:8px; }33  .toolbar-right { margin-left:auto; display:flex; align-items:center; gap:40px; padding-right:20px; }34  .toolbar-right .icon svg { width:44px; height:44px; }35 36  /* Chips row */37  .chips {38    position:absolute; top:210px; left:24px; right:24px; height:110px;39    display:flex; align-items:center; gap:24px;40  }41  .chip {42    display:flex; align-items:center; gap:16px;43    background:#f5f8f2; color:#1f1f1f; border:2px solid #d7dfd0;44    padding:20px 28px; border-radius:18px; font-size:36px;45  }46  .chip .icon { width:42px; height:42px; }47  .chip .icon svg { width:38px; height:38px; }48 49  /* File list item */50  .file-item {51    position:absolute; top:360px; left:24px; right:24px; height:170px;52    display:flex; align-items:center;53    border-radius:18px;54  }55  .thumb {56    width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;57    display:flex; align-items:center; justify-content:center; color:#757575;58    border-radius:8px; margin-left:8px;59  }60  .file-info { margin-left:28px; }61  .file-title { font-size:44px; color:#222; }62  .file-meta { font-size:32px; color:#6b6b6b; margin-top:8px; }63  .kebab {64    margin-left:auto; margin-right:18px;65    width:64px; height:64px; display:flex; align-items:center; justify-content:center;66  }67 68  /* Context menu */69  .context-menu {70    position:absolute; top:430px; right:36px;71    width:620px; background:#eaf1e6; border-radius:18px;72    box-shadow:0 16px 30px rgba(0,0,0,0.18);73    padding:18px 0;74  }75  .menu-item {76    padding:26px 34px;77    font-size:44px; color:#1f1f1f;78  }79  .menu-item + .menu-item { border-top:1px solid rgba(0,0,0,0.06); }80 81  /* Bottom gesture bar */82  .gesture {83    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);84    width:540px; height:20px; background:#b7bcb3; border-radius:10px;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="statusbar">93    <div>11:23</div>94    <div class="status-icons">95      <!-- Location dot -->96      <div class="icon">97        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#4b4b4b"/></svg>98      </div>99      <!-- WiFi -->100      <div class="icon">101        <svg viewBox="0 0 24 24">102          <path d="M2 8c5-4 15-4 20 0" stroke="#4b4b4b" stroke-width="2" fill="none"/>103          <path d="M5 11c4-3 10-3 14 0" stroke="#4b4b4b" stroke-width="2" fill="none"/>104          <path d="M8 14c3-2 5-2 8 0" stroke="#4b4b4b" stroke-width="2" fill="none"/>105          <circle cx="12" cy="18" r="2" fill="#4b4b4b"/>106        </svg>107      </div>108      <!-- Battery -->109      <div class="icon">110        <svg viewBox="0 0 32 24">111          <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#4b4b4b" stroke-width="2" fill="none"/>112          <rect x="4" y="6" width="18" height="12" fill="#4b4b4b"/>113          <rect x="26" y="9" width="4" height="6" rx="1" fill="#4b4b4b"/>114        </svg>115      </div>116    </div>117  </div>118 119  <!-- Toolbar -->120  <div class="toolbar">121    <div class="back-btn icon">122      <svg viewBox="0 0 24 24">123        <path d="M15 5L8 12l7 7" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>124      </svg>125    </div>126    <div class="title">esic-covid-19</div>127    <div class="toolbar-right">128      <!-- Close X -->129      <div class="icon">130        <svg viewBox="0 0 24 24">131          <path d="M5 5L19 19M19 5L5 19" stroke="#222" stroke-width="3" stroke-linecap="round"/>132        </svg>133      </div>134      <!-- Grid icon -->135      <div class="icon">136        <svg viewBox="0 0 24 24">137          <rect x="3" y="3" width="7" height="7" fill="#222"/>138          <rect x="14" y="3" width="7" height="7" fill="#222"/>139          <rect x="3" y="14" width="7" height="7" fill="#222"/>140          <rect x="14" y="14" width="7" height="7" fill="#222"/>141        </svg>142      </div>143      <!-- Kebab -->144      <div class="icon">145        <svg viewBox="0 0 24 24">146          <circle cx="12" cy="5" r="2.2" fill="#222"/>147          <circle cx="12" cy="12" r="2.2" fill="#222"/>148          <circle cx="12" cy="19" r="2.2" fill="#222"/>149        </svg>150      </div>151    </div>152  </div>153 154  <!-- Filter chips -->155  <div class="chips">156    <div class="chip">157      <div class="icon">158        <!-- Headphone -->159        <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0116 0" stroke="#222" stroke-width="2" fill="none"/><rect x="3" y="12" width="4" height="7" rx="2" fill="#222"/><rect x="17" y="12" width="4" height="7" rx="2" fill="#222"/></svg>160      </div>161      <span>Audio</span>162    </div>163    <div class="chip">164      <div class="icon">165        <!-- Folder/document -->166        <svg viewBox="0 0 24 24"><path d="M3 6h7l2 3h9v9a2 2 0 01-2 2H5a2 2 0 01-2-2V6z" stroke="#222" stroke-width="2" fill="none"/></svg>167      </div>168      <span>Documents & other</span>169    </div>170    <div class="chip">171      <div class="icon">172        <!-- Image -->173        <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" stroke="#222" stroke-width="2" fill="none"/><circle cx="9" cy="11" r="2.5" fill="#222"/><path d="M6 17l4-4 4 3 3-2 3 3" stroke="#222" stroke-width="2" fill="none"/></svg>174      </div>175      <span>Images</span>176    </div>177  </div>178 179  <!-- File list item -->180  <div class="file-item">181    <div class="thumb">[IMG: PDF thumbnail]</div>182    <div class="file-info">183      <div class="file-title">ESIC -COVID-19.pdf</div>184      <div class="file-meta">9.43 MB, Jul 18</div>185    </div>186    <div class="kebab">187      <svg viewBox="0 0 24 24">188        <circle cx="12" cy="5" r="2.2" fill="#222"/>189        <circle cx="12" cy="12" r="2.2" fill="#222"/>190        <circle cx="12" cy="19" r="2.2" fill="#222"/>191      </svg>192    </div>193  </div>194 195  <!-- Context menu panel -->196  <div class="context-menu">197    <div class="menu-item">Select</div>198    <div class="menu-item">Share</div>199    <div class="menu-item">Open with</div>200    <div class="menu-item">Rename</div>201    <div class="menu-item">Add to Favorites</div>202    <div class="menu-item">Move to Trash</div>203    <div class="menu-item">Move to</div>204    <div class="menu-item">Move to Safe folder</div>205    <div class="menu-item">Copy to</div>206    <div class="menu-item">Back up to Google Drive</div>207    <div class="menu-item">File info</div>208  </div>209 210  <!-- Bottom gesture bar -->211  <div class="gesture"></div>212 213</div>214</body>215</html>