GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:90px; padding:0 32px;17    display:flex; align-items:center; justify-content:space-between;18    color:#111; font-size:36px; letter-spacing:0.5px;19    background:rgba(255,255,255,0.97);20  }21  .status-right { display:flex; align-items:center; gap:28px; color:#666; }22  .icon-small svg { width:42px; height:42px; fill:#666; }23 24  /* App bar */25  .app-bar {26    position:absolute; top:90px; left:0; right:0;27    height:140px; padding:0 28px;28    display:flex; align-items:center; justify-content:space-between;29    border-bottom:1px solid #eee;30  }31  .app-left { display:flex; align-items:center; gap:28px; }32  .app-title { font-size:54px; font-weight:700; color:#111; }33  .app-actions { display:flex; align-items:center; gap:44px; }34  .app-actions .action { width:66px; height:66px; display:flex; align-items:center; justify-content:center; }35 36  .action svg { width:60px; height:60px; fill:#444; }37 38  /* List area */39  .list-area {40    position:absolute; top:230px; left:0; right:0; bottom:0;41    padding:20px 28px 900px 28px; /* leave space for sheet */42    overflow:hidden;43  }44  .file-item {45    display:flex; align-items:center; justify-content:space-between;46    padding:28px; border-radius:24px; margin-bottom:26px;47    background:#fafafa;48  }49  .file-item.selected { background:#eef3ff; }50  .file-left { display:flex; align-items:center; gap:26px; }51  .file-icon {52    width:70px; height:70px; border-radius:16px; background:#e84d4d;53    display:flex; align-items:center; justify-content:center;54    color:white; font-weight:700; font-size:34px;55  }56  .file-text { display:flex; flex-direction:column; }57  .file-title { font-size:44px; color:#111; line-height:1.2; }58  .file-meta { font-size:32px; color:#777; margin-top:6px; }59  .circle { width:64px; height:64px; border-radius:50%; border:4px solid #bfc6d9; display:flex; align-items:center; justify-content:center; }60  .circle.blue { border-color:#4E78F8; background:#4E78F8; }61  .circle svg { width:40px; height:40px; fill:white; }62 63  /* Bottom sheet */64  .sheet-overlay {65    position:absolute; left:0; right:0; bottom:0;66    height:980px;67    background:#fff;68    border-top-left-radius:48px; border-top-right-radius:48px;69    box-shadow:0 -18px 40px rgba(0,0,0,0.18);70    padding:40px 40px 48px;71  }72  .sheet-top {73    display:flex; align-items:center; gap:26px;74  }75  .sheet-title {76    font-size:56px; font-weight:800; color:#222;77    margin-left:16px;78  }79  .sheet-illustration {80    margin:40px auto 24px; width:860px; height:380px;81    background:#E0E0E0; border:1px solid #BDBDBD;82    border-radius:24px;83    display:flex; align-items:center; justify-content:center;84    color:#757575; font-size:36px;85  }86  .sheet-msg {87    text-align:center; font-size:40px; color:#6f6f6f;88    margin:16px 40px 34px;89  }90  .primary-btn {91    width:980px; height:120px; margin:0 auto;92    background:#4E78F8; color:#fff; font-size:46px; font-weight:700;93    border-radius:22px; display:flex; align-items:center; justify-content:center;94  }95  .link-btn {96    text-align:center; margin-top:36px; font-size:46px; color:#4E78F8; font-weight:700;97  }98 99  /* Gesture bar */100  .gesture {101    position:absolute; bottom:32px; left:50%;102    transform:translateX(-50%);103    width:480px; height:16px; border-radius:12px; background:#aaa;104    opacity:0.6;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div>12:04</div>114    <div class="status-right">115      <div class="icon-small">116        <!-- WiFi icon -->117        <svg viewBox="0 0 24 24"><path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.6-6.2c4.4-4 10.8-4 15.2 0l-1.8 1.8c-3.2-3-8.4-3-11.6 0l-1.8-1.8zm3.7 3.7c2.7-2.4 6.9-2.4 9.6 0l-1.8 1.8c-1.7-1.5-4.3-1.5-6 0l-1.8-1.8z"/></svg>118      </div>119      <div class="icon-small">120        <!-- Battery -->121        <svg viewBox="0 0 24 24"><path d="M18 6h2v3h1c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2h-1v3h-2V6zM2 8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8zm2 0v8h10V8H4z"/></svg>122      </div>123    </div>124  </div>125 126  <!-- App bar -->127  <div class="app-bar">128    <div class="app-left">129      <!-- Close icon -->130      <div class="action">131        <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/></svg>132      </div>133      <div class="app-title">1 selected</div>134    </div>135    <div class="app-actions">136      <!-- Export/Move icon -->137      <div class="action">138        <svg viewBox="0 0 24 24"><path d="M4 4h10v6h-2V6H6v12h6v-4h2v6H4V4zm12.5 4.5L19 5l3.5 3.5-1.4 1.4L20 9.8V14h-2V9.8l-1.1.1 1.6-1.4z"/></svg>139      </div>140      <!-- Trash -->141      <div class="action">142        <svg viewBox="0 0 24 24"><path d="M8 4h8l-1 2H6l2-2zm-2 4h12l-1 12H7L6 8zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z"/></svg>143      </div>144      <!-- Share -->145      <div class="action">146        <svg viewBox="0 0 24 24"><path d="M18 16c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3c0-.2 0-.5.1-.7L9.6 15c-.5.6-1.3 1-2.1 1-1.7 0-3-1.3-3-3s1.3-3 3-3c.8 0 1.6.4 2.1 1l5.5-3.3c-.1-.2-.1-.5-.1-.7 0-1.7 1.3-3 3-3s3 1.3 3 3-1.3 3-3 3c-.8 0-1.6-.4-2.1-1l-5.5 3.3c.1.2.1.5.1.7 0 .2 0 .5-.1.7l5.5 3.3c.5-.6 1.3-1 2.1-1z"/></svg>147      </div>148      <!-- More (kebab) -->149      <div class="action">150        <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>151      </div>152    </div>153  </div>154 155  <!-- Files list -->156  <div class="list-area">157    <div class="file-item">158      <div class="file-left">159        <div class="file-icon">≡</div>160        <div class="file-text">161          <div class="file-title">Weekday schedule</div>162          <div class="file-meta">11:59 · 4.1 MB · My Cloud</div>163        </div>164      </div>165      <div class="circle"></div>166    </div>167 168    <div class="file-item">169      <div class="file-left">170        <div class="file-icon" style="background:#49a7ff;">F</div>171        <div class="file-text">172          <div class="file-title">Furlenco</div>173          <div class="file-meta">Your favourite online furniture app…</div>174        </div>175      </div>176      <div class="circle"></div>177    </div>178 179    <div class="file-item">180      <div class="file-left">181        <div class="file-icon">≡</div>182        <div class="file-text">183          <div class="file-title">Typical Weekend Schedule</div>184          <div class="file-meta">11:30 · 7 KB · My Cloud</div>185        </div>186      </div>187      <div class="circle"></div>188    </div>189 190    <div class="file-item selected">191      <div class="file-left">192        <div class="file-icon">P</div>193        <div class="file-text">194          <div class="file-title">Into-the-Wild-Jon-Krakauer</div>195          <div class="file-meta">09:38 · 1.8 MB · Download</div>196        </div>197      </div>198      <div class="circle blue">199        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/></svg>200      </div>201    </div>202 203    <div class="file-item">204      <div class="file-left">205        <div class="file-icon">P</div>206        <div class="file-text">207          <div class="file-title">Ralph-Ellison-Invisible-Man-Text</div>208          <div class="file-meta">09:05 · 2.3 MB · Download</div>209        </div>210      </div>211      <div class="circle"></div>212    </div>213  </div>214 215  <!-- Bottom sheet -->216  <div class="sheet-overlay">217    <div class="sheet-top">218      <!-- back arrow -->219      <div class="action">220        <svg viewBox="0 0 24 24"><path d="M20 11H7.8l5-5L12.2 4 4 12l8.2 8 1.6-2-5-5H20v-2z"/></svg>221      </div>222      <div class="sheet-title">Share as Link</div>223    </div>224 225    <div class="sheet-illustration">[IMG: Sharing illustration / person with files and link icons]</div>226 227    <div class="sheet-msg">The file size exceeds the limit. Please upload to WPS Cloud first.</div>228 229    <div class="primary-btn">Share as File</div>230    <div class="link-btn">Upload to Cloud</div>231  </div>232 233  <!-- Gesture bar -->234  <div class="gesture"></div>235</div>236</body>237</html>