GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111111;14    font-family: Arial, Helvetica, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #111111;26    color: #eaeaea;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-left { display: flex; align-items: center; gap: 22px; }35  .status-right {36    margin-left: auto;37    display: flex; align-items: center; gap: 18px;38    font-size: 36px;39    color: #d9d9d9;40  }41  .mini-icon {42    width: 44px; height: 44px; border-radius: 8px;43    background: #2a2a2a;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 170px;53    background: #1a1a1a;54    display: flex;55    align-items: center;56    box-sizing: border-box;57    padding: 0 32px;58    border-bottom: 1px solid #232323;59  }60  .app-title {61    font-size: 64px;62    font-weight: 600;63    margin-left: 22px;64  }65  .app-actions {66    margin-left: auto;67    display: flex;68    align-items: center;69    gap: 36px;70  }71  .icon-btn {72    width: 86px; height: 86px;73    display: flex; align-items: center; justify-content: center;74    border-radius: 18px;75  }76  .accent { color: #3b6eff; }77  .icon-square {78    width: 86px; height: 86px; border-radius: 18px;79    background: #2c4dbf;80    display: flex; align-items: center; justify-content: center;81  }82 83  /* List */84  .content {85    position: absolute;86    top: 290px;87    left: 0;88    width: 1080px;89    bottom: 120px;90    overflow: hidden;91    background: #111111;92  }93  .list {94    padding: 24px 24px 0 24px;95    box-sizing: border-box;96  }97  .item {98    display: flex;99    align-items: center;100    height: 170px;101    border-bottom: 1px solid #1f1f1f;102    padding: 0 16px;103    box-sizing: border-box;104  }105  .item .thumb {106    width: 90px; height: 90px;107    margin-right: 30px;108    display: flex; align-items: center; justify-content: center;109    border-radius: 8px;110    background: #2a2a2a;111    border: 1px solid #3a3a3a;112    color: #bdbdbd;113    font-size: 24px;114    text-align: center;115    padding: 4px;116  }117  .item .info {118    flex: 1;119    min-width: 0;120  }121  .item .title {122    font-size: 48px;123    color: #f3f3f3;124    white-space: nowrap;125    overflow: hidden;126    text-overflow: ellipsis;127  }128  .item .sub {129    margin-top: 10px;130    font-size: 34px;131    color: #9e9e9e;132  }133  .checkbox {134    width: 86px; height: 86px; border-radius: 10px;135    border: 3px solid #6f6f6f;136    display: flex; align-items: center; justify-content: center;137    margin-left: 18px;138  }139  .checkbox.selected {140    background: #2c4dbf;141    border-color: #2c4dbf;142  }143 144  /* Bottom gesture bar */145  .home-indicator {146    position: absolute;147    bottom: 32px;148    left: 50%;149    transform: translateX(-50%);150    width: 380px;151    height: 16px;152    background: #ffffff;153    border-radius: 8px;154    opacity: 0.9;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-left">164      <div>8:50</div>165      <div class="mini-icon"></div>166      <div class="mini-icon"></div>167      <div class="mini-icon"></div>168    </div>169    <div class="status-right">170      <!-- Simple signal icon -->171      <svg width="44" height="44" viewBox="0 0 24 24" fill="#d9d9d9">172        <rect x="2" y="15" width="3" height="7"></rect>173        <rect x="7" y="12" width="3" height="10"></rect>174        <rect x="12" y="9" width="3" height="13"></rect>175        <rect x="17" y="6" width="3" height="16"></rect>176      </svg>177      <!-- Battery icon -->178      <svg width="60" height="44" viewBox="0 0 30 18">179        <rect x="1" y="2" width="24" height="14" rx="3" ry="3" fill="none" stroke="#d9d9d9" stroke-width="2"/>180        <rect x="26" y="6" width="3" height="6" fill="#d9d9d9"/>181        <rect x="3" y="4" width="18" height="10" fill="#d9d9d9"/>182      </svg>183      <div>75%</div>184    </div>185  </div>186 187  <!-- App Bar -->188  <div class="app-bar">189    <!-- Back Arrow -->190    <div class="icon-btn">191      <svg width="72" height="72" viewBox="0 0 24 24" class="accent">192        <path d="M15 19l-7-7 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195    <div class="app-title">1 selected</div>196    <div class="app-actions">197      <!-- Blue square with minus -->198      <div class="icon-square">199        <svg width="46" height="46" viewBox="0 0 24 24">200          <rect x="4" y="11" width="16" height="2" fill="#ffffff"/>201        </svg>202      </div>203      <!-- Cloud upload -->204      <div class="icon-btn">205        <svg width="72" height="72" viewBox="0 0 24 24" class="accent">206          <path d="M6 16a4 4 0 1 1 1.1-7.9A6 6 0 0 1 19 9a4 4 0 0 1 1 7.9H6z" fill="none" stroke="currentColor" stroke-width="2"/>207          <path d="M12 14V7M9.5 9.5 12 7l2.5 2.5" fill="none" stroke="#3b6eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208        </svg>209      </div>210      <!-- More (kebab) -->211      <div class="icon-btn">212        <svg width="72" height="72" viewBox="0 0 24 24" class="accent">213          <circle cx="12" cy="5" r="2" fill="currentColor"/>214          <circle cx="12" cy="12" r="2" fill="currentColor"/>215          <circle cx="12" cy="19" r="2" fill="currentColor"/>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Content List -->222  <div class="content">223    <div class="list">224      <!-- Folder item -->225      <div class="item">226        <div class="thumb">227          [IMG: Folder]228        </div>229        <div class="info">230          <div class="title">Favourite Book</div>231        </div>232        <div class="checkbox"></div>233      </div>234 235      <!-- PDF item -->236      <div class="item">237        <div class="thumb">238          [IMG: PDF Page Thumbnail]239        </div>240        <div class="info">241          <div class="title">the-diary-of-anne-frank-1.pdf</div>242          <div class="sub">702 KB, modified 1 hour ago</div>243        </div>244        <div class="checkbox selected">245          <svg width="48" height="48" viewBox="0 0 24 24">246            <path d="M5 12l4 4 10-10" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>247          </svg>248        </div>249      </div>250    </div>251  </div>252 253  <!-- Bottom home indicator -->254  <div class="home-indicator"></div>255 256</div>257</body>258</html>