GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home - USB Debug Prompt</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13    color: #FFFFFF;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background:21      radial-gradient(1400px 900px at 30% 20%, rgba(30,31,36,0.9), rgba(18,18,22,1)),22      repeating-linear-gradient(135deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 8px, rgba(255,255,255,0.02) 9px, rgba(255,255,255,0.02) 10px);23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 16px;29    left: 24px;30    right: 24px;31    height: 48px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #EAEAEA;36    font-size: 28px;37    letter-spacing: 0.2px;38  }39  .status-icons {40    display: inline-flex;41    align-items: center;42    gap: 22px;43  }44  .status-icons svg {45    width: 32px;46    height: 32px;47    opacity: 0.9;48  }49 50  /* Date and weather */51  .date-block {52    position: absolute;53    top: 200px;54    left: 64px;55  }56  .date-text {57    font-size: 64px;58    font-weight: 500;59    color: #E6E6E6;60  }61  .weather-row {62    margin-top: 18px;63    display: inline-flex;64    align-items: center;65    gap: 16px;66    color: #C8C8C8;67    font-size: 30px;68  }69  .weather-row svg {70    width: 44px;71    height: 44px;72    opacity: 0.9;73  }74 75  /* App dock icons */76  .app-dock {77    position: absolute;78    top: 1500px;79    left: 64px;80    width: 952px;81    display: flex;82    justify-content: space-between;83    align-items: flex-start;84  }85  .app {86    width: 180px;87    text-align: center;88    color: #D8D8D8;89  }90  .app .icon {91    width: 120px;92    height: 120px;93    margin: 0 auto 16px;94    border-radius: 60px;95    background: linear-gradient(180deg, #4A4A4A, #2D2D2D);96    box-shadow: 0 6px 12px rgba(0,0,0,0.4);97    border: 1px solid rgba(255,255,255,0.08);98    display: flex;99    align-items: center;100    justify-content: center;101  }102  .app .icon span {103    font-size: 42px;104    font-weight: 700;105    color: #FFFFFF;106    opacity: 0.95;107  }108  .app .label {109    font-size: 24px;110    opacity: 0.85;111  }112 113  /* USB debugging overlay */114  .usb-overlay {115    position: absolute;116    left: 64px;117    top: 1680px;118    width: 952px;119    border-radius: 28px;120    background: rgba(28, 29, 33, 0.65);121    border: 1px solid rgba(255,255,255,0.12);122    box-shadow: 0 20px 60px rgba(0,0,0,0.5);123    backdrop-filter: blur(2px);124    padding: 28px 32px 30px;125  }126  .usb-title {127    font-size: 48px;128    font-weight: 600;129    color: #FFFFFF;130    margin-bottom: 18px;131  }132  .usb-text {133    font-size: 26px;134    line-height: 1.5;135    color: #D0D0D0;136    opacity: 0.95;137  }138  .fingerprint {139    margin-top: 10px;140    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;141    letter-spacing: 0.5px;142    color: #CFCFCF;143    font-size: 24px;144  }145  .usb-check {146    margin-top: 24px;147    display: flex;148    align-items: center;149    gap: 16px;150    color: #E0E0E0;151    font-size: 26px;152  }153  .check-icon {154    width: 40px;155    height: 40px;156    border-radius: 8px;157    background: #2F6FED;158    border: 1px solid rgba(255,255,255,0.2);159    display: flex;160    align-items: center;161    justify-content: center;162    box-shadow: 0 4px 8px rgba(0,0,0,0.35);163  }164  .usb-actions {165    margin-top: 26px;166    display: flex;167    justify-content: flex-end;168    gap: 28px;169  }170  .btn {171    padding: 10px 18px;172    border-radius: 12px;173    font-size: 28px;174    cursor: default;175  }176  .btn.cancel {177    color: #BFC7D5;178  }179  .btn.allow {180    background: #2F6FED;181    color: white;182    box-shadow: 0 8px 18px rgba(47,111,237,0.35);183  }184 185  /* Search bar */186  .search-bar {187    position: absolute;188    left: 64px;189    bottom: 160px;190    width: 952px;191    height: 112px;192    background: #2B2D32;193    border-radius: 56px;194    border: 1px solid rgba(255,255,255,0.08);195    box-shadow: 0 8px 20px rgba(0,0,0,0.45);196    display: flex;197    align-items: center;198    justify-content: space-between;199    padding: 0 24px;200  }201  .search-left, .search-right {202    display: flex;203    align-items: center;204    gap: 18px;205  }206  .g-logo {207    width: 64px;208    height: 64px;209    border-radius: 32px;210    background: #E0E0E0;211    border: 1px solid #BDBDBD;212    display: flex;213    align-items: center;214    justify-content: center;215    color: #757575;216    font-weight: 700;217  }218  .search-placeholder {219    color: #BFC1C6;220    font-size: 28px;221    opacity: 0.85;222    margin-left: 6px;223  }224  .tool {225    width: 56px;226    height: 56px;227    border-radius: 28px;228    background: #3A3C42;229    display: flex;230    align-items: center;231    justify-content: center;232    border: 1px solid rgba(255,255,255,0.12);233  }234  .tool svg { width: 28px; height: 28px; fill: #DADDE6; }235 236  /* Gesture bar */237  .gesture {238    position: absolute;239    bottom: 48px;240    left: 50%;241    transform: translateX(-50%);242    width: 200px;243    height: 10px;244    background: rgba(235,235,235,0.85);245    border-radius: 6px;246  }247</style>248</head>249<body>250<div id="render-target">251 252  <!-- Status Bar -->253  <div class="status-bar">254    <div class="time">10:19</div>255    <div class="status-icons">256      <!-- Wi-Fi -->257      <svg viewBox="0 0 24 24">258        <path d="M12 20c1 0 1.8-.8 1.8-1.8S13 16.5 12 16.5s-1.8.8-1.8 1.8S11 20 12 20z" fill="#FFFFFF"/>259        <path d="M3 9.5c5.5-4.7 12.5-4.7 18 0l-1.6 1.6c-4.9-4-9.9-4-14.8 0L3 9.5z" fill="#FFFFFF" opacity="0.65"/>260        <path d="M6.5 12.5c3.8-3.1 7.2-3.1 11 0l-1.5 1.5c-2.6-2.1-5.4-2.1-8 0l-1.5-1.5z" fill="#FFFFFF" opacity="0.75"/>261      </svg>262      <!-- Cast -->263      <svg viewBox="0 0 24 24">264        <path d="M3 6h18v12H3z" fill="none" stroke="#FFFFFF" stroke-width="1.6"/>265        <path d="M3 18c2.5 0 4.5 2 4.5 4.5h-2A2.5 2.5 0 0 0 3 20z" fill="#FFFFFF"/>266        <path d="M3 14c4.5 0 8.5 4 8.5 8.5h-2C9.5 18.6 6.4 15.5 3 15.5z" fill="#FFFFFF" opacity="0.8"/>267      </svg>268      <!-- Battery -->269      <svg viewBox="0 0 24 24">270        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>271        <rect x="4" y="9" width="14" height="6" rx="1" ry="1" fill="#FFFFFF"/>272        <rect x="20.5" y="10" width="2" height="4" rx="1" ry="1" fill="#FFFFFF"/>273      </svg>274    </div>275  </div>276 277  <!-- Date & Weather -->278  <div class="date-block">279    <div class="date-text">Wed, Sep 27</div>280    <div class="weather-row">281      <svg viewBox="0 0 24 24">282        <path d="M3 9c3 2 6 2 9 0s6-2 9 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>283        <path d="M3 13c3 2 6 2 9 0s6-2 9 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>284        <path d="M3 17c3 2 6 2 9 0s6-2 9 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>285      </svg>286      <span>30°C</span>287    </div>288  </div>289 290  <!-- App Dock -->291  <div class="app-dock">292    <div class="app">293      <div class="icon"><span>▶</span></div>294      <div class="label">Play Store</div>295    </div>296    <div class="app">297      <div class="icon"><span>M</span></div>298      <div class="label">Gmail</div>299    </div>300    <div class="app">301      <div class="icon"><span>▢</span></div>302      <div class="label">Photos</div>303    </div>304    <div class="app">305      <div class="icon"><span>▶</span></div>306      <div class="label">YouTube</div>307    </div>308  </div>309 310  <!-- USB Debugging Overlay -->311  <div class="usb-overlay">312    <div class="usb-title">Allow USB debugging?</div>313    <div class="usb-text">The computer's RSA key fingerprint is:</div>314    <div class="fingerprint">EF:2B:55:0A:E3:B9:62:22:0D:4A:54:8E:D8:12:7A:46</div>315 316    <div class="usb-check">317      <div class="check-icon">318        <svg viewBox="0 0 24 24">319          <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>320        </svg>321      </div>322      <div>Always allow from this computer</div>323    </div>324 325    <div class="usb-actions">326      <div class="btn cancel">Cancel</div>327      <div class="btn allow">Allow</div>328    </div>329  </div>330 331  <!-- Bottom Search Bar -->332  <div class="search-bar">333    <div class="search-left">334      <div class="g-logo">G</div>335      <div class="search-placeholder">Search</div>336    </div>337    <div class="search-right">338      <div class="tool">339        <svg viewBox="0 0 24 24">340          <circle cx="10" cy="10" r="6" fill="#DADDE6"/>341          <rect x="14" y="14" width="8" height="2" transform="rotate(45 14 14)" />342        </svg>343      </div>344      <div class="tool">345        <svg viewBox="0 0 24 24">346          <path d="M4 8h16v9H4z" fill="none" stroke="#DADDE6" stroke-width="2"/>347          <circle cx="12" cy="12" r="3" fill="#DADDE6"/>348          <rect x="9" y="5" width="6" height="3" rx="1" ry="1" fill="#DADDE6"/>349        </svg>350      </div>351      <div class="tool">352        <svg viewBox="0 0 24 24">353          <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#DADDE6" stroke-width="2"/>354          <path d="M8 10h8v4H8z" fill="#DADDE6"/>355        </svg>356      </div>357    </div>358  </div>359 360  <!-- Gesture bar -->361  <div class="gesture"></div>362 363</div>364</body>365</html>