GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>File Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0f1210;12  }13 14  /* Top area */15  .top-area {16    position: absolute; top: 0; left: 0; width: 100%; height: 260px;17    background: #29311f;18  }19  .status-bar {20    height: 80px; display: flex; align-items: center; justify-content: space-between;21    padding: 0 40px; color: #FFFFFF; font-size: 28px; letter-spacing: 0.5px;22  }23  .status-right { display: flex; gap: 26px; align-items: center; }24  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.2; }25 26  .search-row {27    height: 86px; display: flex; align-items: center;28    padding: 0 28px; color: #e7e7e7;29  }30  .search-row .icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; margin-right: 18px; }31  .search-text { font-size: 40px; color: #e8e6e6; flex: 1; }32  .search-actions { display: flex; gap: 26px; align-items: center; }33  .search-actions svg { width: 44px; height: 44px; stroke: #e8e6e6; stroke-width: 2.4; fill: none; }34 35  .chips {36    display: flex; gap: 20px; padding: 10px 28px 0 28px;37  }38  .chip {39    display: inline-flex; align-items: center; gap: 12px;40    padding: 16px 22px; border: 1.5px solid #8b8f82; border-radius: 28px;41    color: #d9d9d9; font-size: 28px;42    background: transparent;43  }44  .chip svg { width: 32px; height: 32px; stroke: #d9d9d9; stroke-width: 2; fill: none; }45 46  /* List area */47  .results-area {48    position: absolute; top: 260px; left: 0; right: 0; bottom: 0;49    padding: 22px 24px;50    color: #fff;51  }52  .result-card {53    display: flex; align-items: center;54    background: #151715; border: 1px solid #20231d; border-radius: 18px;55    padding: 30px; width: calc(100% - 48px); margin: 6px 24px;56  }57  .file-icon {58    width: 110px; height: 110px; border-radius: 16px; background: #2da7ff1a;59    display: flex; align-items: center; justify-content: center; border: 1px solid #334a56;60    margin-right: 28px;61  }62  .file-icon svg { width: 70px; height: 70px; }63  .file-info { flex: 1; }64  .file-title { font-size: 38px; color: #fafafa; margin-bottom: 10px; }65  .file-meta { font-size: 28px; color: #b6b6b6; }66  .kebab { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }67  .kebab svg { width: 30px; height: 30px; fill: #bfbfbf; }68 69  /* Bottom gesture bar */70  .gesture {71    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);72    width: 360px; height: 12px; background: #ffffff; border-radius: 8px; opacity: 0.85;73  }74</style>75</head>76<body>77<div id="render-target">78 79  <div class="top-area">80    <!-- Status bar -->81    <div class="status-bar">82      <div class="status-left">10:13</div>83      <div class="status-right">84        <span class="status-icon">85          <!-- Dot (notification) -->86          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.5" fill="#fff"/></svg>87        </span>88        <span class="status-icon">89          <!-- Cloud -->90          <svg viewBox="0 0 24 24"><path d="M7 15h8a4 4 0 0 0 0-8c-1.2 0-2.3.5-3.1 1.3A5 5 0 0 0 7 9a3 3 0 0 0 0 6z"/></svg>91        </span>92        <span class="status-icon">93          <!-- WiFi -->94          <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.6" fill="#fff"/></svg>95        </span>96        <span class="status-icon">97          <!-- Signal -->98          <svg viewBox="0 0 24 24"><rect x="3" y="13" width="3" height="8" fill="none" stroke="#fff"/><rect x="9" y="10" width="3" height="11" fill="none" stroke="#fff"/><rect x="15" y="7" width="3" height="14" fill="none" stroke="#fff"/></svg>99        </span>100        <span class="status-icon">101          <!-- Battery -->102          <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" ry="2"/><rect x="20" y="10" width="2" height="4" fill="none" stroke="#fff"/></svg>103        </span>104      </div>105    </div>106 107    <!-- Search row -->108    <div class="search-row">109      <div class="icon">110        <!-- Back arrow -->111        <svg viewBox="0 0 24 24"><path d="M15 5L7 12l8 7" stroke="#e8e6e6" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>112      </div>113      <div class="search-text">month finance</div>114      <div class="search-actions">115        <!-- Close (X) -->116        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke-linecap="round"/></svg>117        <!-- Grid/List toggle -->118        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>119        <!-- Kebab menu -->120        <svg viewBox="0 0 24 24" fill="#e8e6e6"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>121      </div>122    </div>123 124    <!-- Chips -->125    <div class="chips">126      <div class="chip">127        <svg viewBox="0 0 24 24"><path d="M5 14a7 7 0 0 1 14 0v5H17v-5a5 5 0 0 0-10 0v5H5v-5z"/></svg>128        <span>Audio</span>129      </div>130      <div class="chip">131        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="14" height="16" rx="2"/><path d="M17 4l4 4v12a2 2 0 0 1-2 2h-2"/></svg>132        <span>Documents & other</span>133      </div>134      <div class="chip">135        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M14 12l3-3 4 5"/></svg>136        <span>Images</span>137      </div>138    </div>139  </div>140 141  <!-- Results -->142  <div class="results-area">143    <div class="result-card">144      <div class="file-icon">145        <!-- Blue document icon -->146        <svg viewBox="0 0 24 24">147          <path d="M6 3h9l5 5v13H6z" fill="#2DA7FF" opacity="0.25"/>148          <path d="M15 3H6v18h14V8z" fill="none" stroke="#2DA7FF" stroke-width="2"/>149          <path d="M15 3v5h5" fill="none" stroke="#2DA7FF" stroke-width="2"/>150          <rect x="8" y="11" width="8" height="2" fill="#2DA7FF"/>151          <rect x="8" y="15" width="8" height="2" fill="#2DA7FF"/>152        </svg>153      </div>154      <div class="file-info">155        <div class="file-title">Month finance .docx</div>156        <div class="file-meta">6.27 kB, 1 hour ago</div>157      </div>158      <div class="kebab">159        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>160      </div>161    </div>162  </div>163 164  <div class="gesture"></div>165</div>166</body>167</html>