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>Mobile UI - Home</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000; color: #fff; font-family: "Segoe UI", Roboto, Arial, sans-serif;13  }14  .status-bar {15    height: 110px; background: #1f1f1f; display: flex; align-items: center;16    padding: 0 36px; font-size: 34px; letter-spacing: 0.5px;17  }18  .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }19  .toolbar {20    height: 160px; border-bottom: 1px solid #2a2a2a;21    display: flex; align-items: center; padding: 0 36px; gap: 24px;22    background: #121212;23  }24  .avatar {25    width: 72px; height: 72px; border-radius: 50%;26    background: #2c2c2c; display: flex; align-items: center; justify-content: center;27  }28  .avatar::after {29    content: "👤"; font-size: 36px; opacity: 0.8;30  }31  .title { font-size: 60px; font-weight: 600; margin-right: auto; }32  .tool-icons { display: flex; gap: 36px; }33  .section {34    padding: 36px; padding-top: 48px; color: #ddd; font-size: 36px;35  }36  .list { padding: 0 36px; }37  .item {38    display: flex; align-items: center; gap: 36px;39    padding: 34px 0; border-bottom: 1px solid #1e1e1e;40  }41  .thumb {42    width: 130px; height: 130px; background: #E0E0E0; border: 1px solid #BDBDBD;43    color: #757575; display: flex; align-items: center; justify-content: center; font-size: 26px;44  }45  .meta { flex: 1; }46  .name { font-size: 44px; color: #fff; margin-bottom: 12px; }47  .sub { font-size: 32px; color: #9e9e9e; }48  .kebab { width: 20px; height: 80px; display: flex; align-items: center; justify-content: center; }49  .kebab span { display: block; width: 8px; height: 8px; background: #9e9e9e; border-radius: 50%; margin: 6px 0; }50  .offline-section { padding: 36px; }51  .card {52    margin-top: 12px; background: #1a1a1a; color: #cfcfcf;53    border-radius: 22px; border: 1px solid #2a2a2a;54    padding: 36px; font-size: 34px; line-height: 1.4; max-width: 1000px;55  }56  .fab {57    position: absolute; right: 60px; bottom: 260px;58    width: 140px; height: 140px; border-radius: 50%;59    background: #0a84ff; box-shadow: 0 6px 16px rgba(0,0,0,0.5);60    display: flex; align-items: center; justify-content: center;61  }62  .bottom-nav {63    position: absolute; left: 0; right: 0; bottom: 0;64    height: 180px; background: #0d0d0d; border-top: 1px solid #262626;65    display: flex; align-items: center; justify-content: space-around;66    padding-bottom: 20px;67  }68  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #bdbdbd; font-size: 30px; }69  .nav-item.active { color: #0a84ff; }70  .home-indicator {71    position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);72    width: 360px; height: 12px; background: #e6e6e6; border-radius: 12px; opacity: 0.8;73  }74  /* simple reset for SVG icons */75  svg { display: block; }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status bar -->82  <div class="status-bar">83    <div>7:42</div>84    <div class="status-right">85      <!-- Minimal status icons -->86      <svg width="46" height="32">87        <rect x="2" y="8" width="32" height="20" rx="4" fill="#e0e0e0"></rect>88        <circle cx="38" cy="18" r="3" fill="#e0e0e0"></circle>89      </svg>90      <svg width="40" height="32">91        <rect x="4" y="20" width="28" height="8" fill="#e0e0e0"></rect>92        <rect x="4" y="14" width="22" height="8" fill="#e0e0e0"></rect>93        <rect x="4" y="8" width="14" height="8" fill="#e0e0e0"></rect>94      </svg>95      <svg width="44" height="32">96        <path d="M4 22h36" stroke="#e0e0e0" stroke-width="3"></path>97        <circle cx="12" cy="12" r="5" fill="#e0e0e0"></circle>98        <circle cx="24" cy="12" r="5" fill="#cfcfcf"></circle>99        <circle cx="36" cy="12" r="5" fill="#bdbdbd"></circle>100      </svg>101      <svg width="40" height="32" viewBox="0 0 24 24">102        <path d="M2 10c5-5 15-5 20 0" stroke="#e0e0e0" stroke-width="2" fill="none"></path>103        <path d="M6 14c3-3 9-3 12 0" stroke="#e0e0e0" stroke-width="2" fill="none"></path>104        <circle cx="12" cy="18" r="2" fill="#e0e0e0"></circle>105      </svg>106      <svg width="46" height="32">107        <rect x="2" y="6" width="30" height="20" rx="4" stroke="#e0e0e0" fill="none" stroke-width="3"></rect>108        <rect x="6" y="10" width="22" height="12" fill="#e0e0e0"></rect>109      </svg>110    </div>111  </div>112 113  <!-- Toolbar -->114  <div class="toolbar">115    <div class="avatar"></div>116    <div class="title">Home</div>117    <div class="tool-icons">118      <!-- diamond -->119      <svg width="56" height="56" viewBox="0 0 24 24">120        <path d="M12 2l9 7-9 13-9-13 9-7z" fill="none" stroke="#fff" stroke-width="2"></path>121      </svg>122      <!-- plus -->123      <svg width="56" height="56" viewBox="0 0 24 24">124        <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>125      </svg>126      <!-- cast -->127      <svg width="56" height="56" viewBox="0 0 24 24">128        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>129        <path d="M3 19c4 0 7 3 7 3" stroke="#fff" stroke-width="2" fill="none"></path>130        <path d="M3 15c3 0 6 3 6 3" stroke="#fff" stroke-width="2" fill="none"></path>131      </svg>132      <!-- search -->133      <svg width="56" height="56" viewBox="0 0 24 24">134        <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>135        <path d="M16 16l5 5" stroke="#fff" stroke-width="2"></path>136      </svg>137    </div>138  </div>139 140  <!-- Recent files -->141  <div class="section">Recent files</div>142  <div class="list">143    <div class="item">144      <div class="thumb">[IMG: Document thumbnail]</div>145      <div class="meta">146        <div class="name">Tomorrowland</div>147        <div class="sub">👥 2.3 MB · Yesterday at 2:41 PM</div>148      </div>149      <div class="kebab">150        <span></span><span></span><span></span>151      </div>152    </div>153 154    <div class="item">155      <div class="thumb">[IMG: Document thumbnail]</div>156      <div class="meta">157        <div class="name">Italy file</div>158        <div class="sub">24.7 MB · Yesterday at 2:07 PM</div>159      </div>160      <div class="kebab">161        <span></span><span></span><span></span>162      </div>163    </div>164 165    <div class="item" style="border-bottom:none;">166      <div class="thumb">[IMG: Document thumbnail]</div>167      <div class="meta">168        <div class="name">Amsterdam (1)</div>169        <div class="sub">8.1 MB · Yesterday at 2:06 PM</div>170      </div>171      <div class="kebab">172        <span></span><span></span><span></span>173      </div>174    </div>175  </div>176 177  <!-- Offline files -->178  <div class="offline-section">179    <div class="section" style="padding:0; color:#ddd; font-size:36px;">Offline files</div>180    <div class="card">181      Tap the ⋮ icon next to a file, and select "Make available offline" to view it wherever you go.182    </div>183  </div>184 185  <!-- Floating Action Button -->186  <div class="fab">187    <svg width="64" height="64" viewBox="0 0 24 24">188      <rect x="6" y="7" width="12" height="10" rx="2" fill="#000" opacity="0.25"></rect>189      <path d="M8 7l1.5-2h5L16 7h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2z" fill="#000" opacity="0.3"></path>190      <circle cx="12" cy="12" r="4" fill="#000"></circle>191    </svg>192  </div>193 194  <!-- Home indicator -->195  <div class="home-indicator"></div>196 197  <!-- Bottom navigation -->198  <div class="bottom-nav">199    <div class="nav-item active">200      <svg width="52" height="52" viewBox="0 0 24 24">201        <path d="M3 11l9-7 9 7v10a1 1 0 0 1-1 1h-6v-7H10v7H4a1 1 0 0 1-1-1V11z" fill="#0a84ff"></path>202      </svg>203      <div>Home</div>204    </div>205    <div class="nav-item">206      <svg width="52" height="52" viewBox="0 0 24 24">207        <path d="M3 7h18v12H3z" stroke="#bdbdbd" stroke-width="2" fill="none"></path>208        <path d="M8 3h8v4H8z" fill="#bdbdbd"></path>209      </svg>210      <div>Files</div>211    </div>212    <div class="nav-item">213      <svg width="52" height="52" viewBox="0 0 24 24">214        <circle cx="7" cy="10" r="3" stroke="#bdbdbd" stroke-width="2" fill="none"></circle>215        <circle cx="17" cy="10" r="3" stroke="#bdbdbd" stroke-width="2" fill="none"></circle>216        <path d="M3 20c0-3 4-5 7-5s7 2 7 5" stroke="#bdbdbd" stroke-width="2" fill="none"></path>217      </svg>218      <div>Shared</div>219    </div>220    <div class="nav-item">221      <svg width="52" height="52" viewBox="0 0 24 24">222        <rect x="4" y="5" width="16" height="14" rx="2" stroke="#bdbdbd" stroke-width="2" fill="none"></rect>223        <rect x="7" y="8" width="10" height="8" fill="#bdbdbd"></rect>224      </svg>225      <div>Photos</div>226    </div>227    <div class="nav-item">228      <svg width="52" height="52" viewBox="0 0 24 24">229        <circle cx="12" cy="8" r="4" stroke="#bdbdbd" stroke-width="2" fill="none"></circle>230        <path d="M4 21c0-4 4-6 8-6s8 2 8 6" stroke="#bdbdbd" stroke-width="2" fill="none"></path>231      </svg>232      <div>Me</div>233    </div>234  </div>235 236</div>237</body>238</html>