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>File App - Dark</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:#1E2228;color:#EAECEF;12  }13  /* Status bar */14  .status-bar{15    position:absolute;top:0;left:0;width:100%;height:80px;16    background:#0f141a;display:flex;align-items:center;justify-content:space-between;17    padding:0 32px;box-sizing:border-box;color:#e8ebee;font-size:36px;letter-spacing:0.5px;18  }19  .status-right{display:flex;align-items:center;gap:22px;}20  .icon{display:inline-flex;align-items:center;justify-content:center}21  /* App bar */22  .app-bar{23    position:absolute;top:80px;left:0;width:100%;height:120px;24    background:#161C24;display:flex;align-items:center;box-sizing:border-box;25    padding:0 24px 0 16px;color:#ECEFF1;border-bottom:1px solid rgba(255,255,255,0.06);26  }27  .app-title{font-size:44px;font-weight:600;margin-left:16px;flex:1;white-space:nowrap;}28  .app-actions{display:flex;align-items:center;gap:24px;}29  /* Chips */30  .chips{31    position:absolute;top:200px;left:0;width:100%;height:88px;32    display:flex;align-items:center;gap:18px;padding:0 24px;box-sizing:border-box;background:#1E2228;33  }34  .chip{35    display:flex;align-items:center;gap:14px;padding:14px 22px;border-radius:28px;36    border:1px solid #3A4048;color:#D7DBDE;background:transparent;font-size:34px;37  }38  /* File list item container */39  .list{40    position:absolute;top:300px;left:24px;right:24px;41  }42  .file-row{43    background:#242A31;border-radius:18px;padding:22px 20px;display:flex;align-items:center;44    gap:24px;border:1px solid rgba(255,255,255,0.06);45  }46  .thumb{47    width:120px;height:120px;background:#E0E0E0;border:1px solid #BDBDBD;48    display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;border-radius:12px;49  }50  .file-meta{flex:1;}51  .file-title{font-size:40px;margin-bottom:8px;}52  .file-sub{font-size:30px;color:#A7AFB7;}53  .kebab{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;}54  /* Snackbar */55  .snackbar{56    position:absolute;left:0;right:0;bottom:120px;height:120px;background:#F3C427;57    display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 28px;color:#111;font-weight:600;58    box-shadow:0 -2px 0 rgba(0,0,0,0.15);59  }60  .snack-text{font-size:34px;line-height:1.2;}61  .snack-sub{font-weight:500;font-size:28px;opacity:0.85;}62  .snack-action{63    height:76px;padding:0 40px;border-radius:40px;border:2px solid rgba(0,0,0,0.5);64    display:flex;align-items:center;justify-content:center;font-size:34px;background:transparent;color:#111;65  }66  /* Gesture pill */67  .gesture{68    position:absolute;left:50%;transform:translateX(-50%);bottom:28px;69    width:260px;height:14px;background:#E8E8E8;border-radius:10px;opacity:0.95;70  }71</style>72</head>73<body>74<div id="render-target">75  <!-- Status Bar -->76  <div class="status-bar">77    <div>10:48</div>78    <div class="status-right">79      <!-- simple cloud icon -->80      <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfd8dc" class="icon"><path d="M6 19h10a4 4 0 0 0 0-8 6 6 0 0 0-11.7 1A3.5 3.5 0 0 0 6 19z"/></svg>81      <!-- wifi -->82      <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfd8dc" class="icon"><path d="M12 20.5l-2-2a3 3 0 0 1 4 0l-2 2zm6-6a8 8 0 0 0-12 0l-1.5-1.5a10 10 0 0 1 15 0L18 14.5zM3 9l1.7 1.7a13 13 0 0 1 14.6 0L21 9A16 16 0 0 0 3 9z"/></svg>83      <!-- battery -->84      <svg width="48" height="48" viewBox="0 0 24 24" class="icon"><rect x="2" y="7" width="18" height="10" rx="2" fill="#cfd8dc"/><rect x="20" y="10" width="2" height="4" fill="#cfd8dc"/></svg>85    </div>86  </div>87 88  <!-- App Bar -->89  <div class="app-bar">90    <!-- back arrow -->91    <svg width="56" height="56" viewBox="0 0 24 24" fill="#e5eaee" class="icon">92      <path d="M15.5 19l-7-7 7-7v14z"/>93    </svg>94    <div class="app-title">doc x (1)</div>95    <div class="app-actions">96      <!-- close X -->97      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc" class="icon"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>98      <!-- grid/list toggle -->99      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc" class="icon"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>100      <!-- more/kebab -->101      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc" class="icon"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>102    </div>103  </div>104 105  <!-- Filter Chips -->106  <div class="chips">107    <div class="chip">108      <svg width="34" height="34" viewBox="0 0 24 24" fill="#D7DBDE"><path d="M12 3a4 4 0 0 1 4 4v8a4 4 0 1 1-2-3.465V7a2 2 0 1 0-4 0v6a4 4 0 1 1-2 3.465V7a4 4 0 0 1 4-4z"/></svg>109      <span>Audio</span>110    </div>111    <div class="chip">112      <svg width="34" height="34" viewBox="0 0 24 24" fill="#D7DBDE"><path d="M6 2h9l3 3v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V7h3.5L14 3.5z"/></svg>113      <span>Documents &amp; other</span>114    </div>115    <div class="chip">116      <svg width="34" height="34" viewBox="0 0 24 24" fill="#D7DBDE"><path d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm4 2l3 4 2-2 5 6H5l3-8z"/></svg>117      <span>Images</span>118    </div>119  </div>120 121  <!-- File item -->122  <div class="list">123    <div class="file-row">124      <div class="thumb">[IMG: Thumbnail]</div>125      <div class="file-meta">126        <div class="file-title">Doc X.jpg</div>127        <div class="file-sub">12.77 kB, Jul 7</div>128      </div>129      <div class="kebab">130        <svg width="40" height="40" viewBox="0 0 24 24" fill="#C7CDD3"><circle cx="12" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="18" r="2"/></svg>131      </div>132    </div>133  </div>134 135  <!-- Snackbar -->136  <div class="snackbar">137    <div>138      <div class="snack-text">1 file moved to Trash</div>139      <div class="snack-sub">12.77 kB added to Trash total</div>140    </div>141    <div class="snack-action">View</div>142  </div>143 144  <!-- Gesture bar -->145  <div class="gesture"></div>146</div>147</body>148</html>