GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Office - Files</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#121410; color:#e6e7dc;11  }12 13  /* Status bar */14  .status-bar {15    height:110px; background:#1a1c16; color:#dfe2d0;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 36px; font-weight:600; font-size:42px;18  }19  .status-right { display:flex; align-items:center; gap:22px; }20  .icon-dot { width:12px; height:12px; background:#dfe2d0; border-radius:50%; opacity:.7; }21 22  /* App bar */23  .app-bar {24    height:160px; background:#25281f;25    display:flex; align-items:center; gap:28px; padding:0 36px;26  }27  .app-bar h1 { margin:0; font-size:64px; font-weight:600; letter-spacing:.5px; }28  .flex-spacer { flex:1; }29  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:50%; }30  .icon { width:48px; height:48px; }31  .search-kebab { display:flex; gap:24px; }32 33  /* Sort row */34  .sort-row {35    height:110px; display:flex; align-items:center; justify-content:space-between;36    padding:0 48px; font-size:42px; color:#cfd2be;37  }38 39  /* Content grid */40  .content-grid { display:flex; gap:48px; padding:30px 48px 0; }41  .card { width:440px; }42  .thumb {43    height:270px; background:#2b2f24; border-radius:32px; position:relative; padding:24px;44  }45  .thumb .page {46    width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD;47    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px; border-radius:20px;48  }49  .share-badge {50    position:absolute; right:22px; bottom:22px; width:70px; height:70px;51    border-radius:50%; background:#3c412f; display:flex; align-items:center; justify-content:center;52    border:2px solid #566046;53  }54  .card-meta { display:flex; align-items:flex-start; gap:18px; margin-top:18px; }55  .type-icon {56    width:70px; height:70px; border-radius:14px; background:#3a78f2;57    display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;58  }59  .file-name { flex:1; font-size:40px; line-height:1.2; color:#e6e7dc; word-break:break-word; }60  .kebab { width:18px; height:18px; position:relative; margin-top:8px; }61  .kebab:before, .kebab:after, .kebab div {62    content:""; display:block; width:8px; height:8px; background:#cfcfbf; border-radius:50%; margin:6px auto;63  }64 65  /* FAB */66  .fab {67    position:absolute; right:44px; bottom:340px; width:150px; height:150px;68    background:#4c5636; border-radius:36px; display:flex; align-items:center; justify-content:center;69    box-shadow:0 10px 20px rgba(0,0,0,.4);70  }71 72  /* Bottom navigation */73  .nav {74    position:absolute; left:0; bottom:0; width:100%; height:220px;75    background:#262a1f; display:flex; justify-content:space-around; align-items:center;76  }77  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#cfd2be; font-size:32px; }78  .nav-item .icon { width:60px; height:60px; }79  .nav-item.active { color:#e6e7dc; }80 81  /* Gesture bar */82  .gesture {83    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);84    width:260px; height:12px; background:#f3f3f3; border-radius:6px; opacity:.9;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="status-bar">93    <div>5:27</div>94    <div class="status-right">95      <!-- Battery -->96      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="16" height="10" rx="2" fill="#dfe2d0"/><rect x="20" y="9" width="2" height="6" fill="#dfe2d0"/></svg>97      <!-- Check (placeholder icon) -->98      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l4 4 5-5 6 6" stroke="#dfe2d0" stroke-width="2" fill="none"/></svg>99      <!-- Clock -->100      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#dfe2d0" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#dfe2d0" stroke-width="2" fill="none"/></svg>101      <div class="icon-dot"></div>102      <!-- Wi-Fi -->103      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18M3 12h18M3 6h18" stroke="#dfe2d0" stroke-width="2"/></svg>104      <!-- Signal -->105      <svg class="icon" viewBox="0 0 24 24"><path d="M6 21V10c0-3 2-5 6-5s6 2 6 5v11" stroke="#dfe2d0" stroke-width="2" fill="none"/><rect x="9" y="3" width="6" height="3" fill="#dfe2d0"/></svg>106    </div>107  </div>108 109  <!-- App bar -->110  <div class="app-bar">111    <!-- Back -->112    <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#cfd2be" stroke-width="2" fill="none"/></svg>113    <h1>Office</h1>114    <div class="flex-spacer"></div>115    <div class="search-kebab">116      <!-- Search -->117      <div class="icon-btn">118        <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#cfd2be" stroke-width="2" fill="none"/><path d="M16 16l5 5" stroke="#cfd2be" stroke-width="2"/></svg>119      </div>120      <!-- Kebab -->121      <div class="icon-btn">122        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#cfd2be"/><circle cx="12" cy="12" r="2" fill="#cfd2be"/><circle cx="12" cy="19" r="2" fill="#cfd2be"/></svg>123      </div>124    </div>125  </div>126 127  <!-- Sort row -->128  <div class="sort-row">129    <div>Name ↑</div>130    <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#cfd2be" stroke-width="2"/></svg>131  </div>132 133  <!-- File grid -->134  <div class="content-grid">135 136    <!-- Card 1 -->137    <div class="card">138      <div class="thumb">139        <div class="page">[IMG: Document thumbnail]</div>140        <div class="share-badge">141          <svg viewBox="0 0 24 24" width="42" height="42">142            <circle cx="12" cy="8" r="4" fill="#cfd2be"/>143            <path d="M4 20c1-4 6-5 8-5s7 1 8 5" fill="none" stroke="#cfd2be" stroke-width="2"/>144          </svg>145        </div>146      </div>147      <div class="card-meta">148        <div class="type-icon">W</div>149        <div class="file-name">Month finance.docx</div>150        <div class="kebab"><div></div></div>151      </div>152    </div>153 154    <!-- Card 2 -->155    <div class="card">156      <div class="thumb">157        <div class="page">[IMG: Document thumbnail]</div>158      </div>159      <div class="card-meta">160        <div class="type-icon">161          <svg viewBox="0 0 24 24" width="46" height="46">162            <rect x="6" y="6" width="12" height="12" fill="#e6e7dc"/>163            <path d="M8 9h8M8 12h8M8 15h8" stroke="#3a78f2" stroke-width="2"/>164          </svg>165        </div>166        <div class="file-name">Report</div>167        <div class="kebab"><div></div></div>168      </div>169    </div>170 171  </div>172 173  <!-- Floating action button -->174  <div class="fab">175    <svg viewBox="0 0 24 24" width="80" height="80"><path d="M12 5v14M5 12h14" stroke="#e6e7dc" stroke-width="3"/></svg>176  </div>177 178  <!-- Bottom navigation -->179  <div class="nav">180    <div class="nav-item">181      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l9-7 9 7v9h-6v-5H9v5H3z" stroke="#cfd2be" stroke-width="2" fill="none"/></svg>182      <div>Home</div>183    </div>184    <div class="nav-item">185      <svg class="icon" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-7 5.4-4.7-7-.6L12 2 9 8.7l-7 .6 5.4 4.7-1.6 7z" stroke="#cfd2be" stroke-width="2" fill="none"/></svg>186      <div>Starred</div>187    </div>188    <div class="nav-item">189      <svg class="icon" viewBox="0 0 24 24"><circle cx="8" cy="8" r="4" stroke="#cfd2be" stroke-width="2" fill="none"/><circle cx="16" cy="8" r="4" stroke="#cfd2be" stroke-width="2" fill="none"/><path d="M2 22c2-5 6-6 10-6s8 1 10 6" stroke="#cfd2be" stroke-width="2" fill="none"/></svg>190      <div>Shared</div>191    </div>192    <div class="nav-item active">193      <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h8v6H3zM13 6h8v12h-8zM3 14h8v4H3z" stroke="#e6e7dc" stroke-width="2" fill="none"/></svg>194      <div>Files</div>195    </div>196  </div>197 198  <!-- Gesture bar -->199  <div class="gesture"></div>200 201</div>202</body>203</html>