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>Pixel Home Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Roboto, Arial, Helvetica, sans-serif;12    color: #eaeaea;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    border-radius: 28px;20    background:21      radial-gradient(1200px 1000px at 20% 10%, #0e0e0f 40%, #101114 60%, #0b0c0e 100%),22      repeating-linear-gradient(160deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 16px),23      repeating-linear-gradient(25deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, rgba(0,0,0,0) 7px, rgba(0,0,0,0) 20px);24  }25 26  /* Status bar */27  .status-bar {28    position: absolute;29    top: 0;30    left: 0;31    width: 1080px;32    height: 90px;33    padding: 0 28px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #ffffff;38    font-weight: 500;39    font-size: 38px;40    letter-spacing: 0.5px;41  }42  .sb-left {43    display: flex;44    align-items: center;45    gap: 16px;46  }47  .sb-right {48    display: flex;49    align-items: center;50    gap: 26px;51    font-size: 26px;52  }53  .icon-24, .icon-28, .icon-32 {54    display: inline-flex;55    align-items: center;56    justify-content: center;57  }58  .icon-24 { width: 24px; height: 24px; }59  .icon-28 { width: 28px; height: 28px; }60  .icon-32 { width: 32px; height: 32px; }61 62  /* Welcome text */63  .welcome {64    position: absolute;65    top: 150px;66    left: 72px;67  }68  .welcome h1 {69    margin: 0 0 24px 0;70    font-size: 64px;71    font-weight: 600;72    color: #e7e7e7;73  }74  .tips-row {75    display: flex;76    align-items: center;77    gap: 18px;78    font-size: 44px;79    color: #cfcfcf;80  }81  .play-tip {82    width: 48px;83    height: 48px;84    border-radius: 50%;85    background: rgba(255,255,255,0.08);86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .play-tip svg { width: 28px; height: 28px; }91 92  /* App dock */93  .dock {94    position: absolute;95    left: 0;96    right: 0;97    top: 1620px;98    height: 360px;99    display: flex;100    justify-content: space-around;101    align-items: flex-start;102    padding: 0 70px;103  }104  .app {105    width: 190px;106    text-align: center;107    color: #cfd3d7;108    font-size: 40px;109  }110  .app-icon {111    width: 170px;112    height: 170px;113    border-radius: 34px;114    background: #14161a;115    box-shadow: 0 6px 20px rgba(0,0,0,0.35) inset, 0 8px 24px rgba(0,0,0,0.45);116    margin: 0 auto 18px auto;117    position: relative;118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .badge-dot {123    position: absolute;124    right: 10px;125    top: 10px;126    width: 26px;127    height: 26px;128    background: #8c6bff;129    border-radius: 50%;130    border: 4px solid #14161a;131  }132 133  /* Modal */134  .usb-modal {135    position: absolute;136    left: 40px;137    right: 40px;138    bottom: 260px;139    background: rgba(24,28,33,0.85);140    border-radius: 30px;141    padding: 34px 36px 28px 36px;142    color: #ffffff;143    backdrop-filter: blur(6px);144    box-shadow: 0 18px 40px rgba(0,0,0,0.55);145  }146  .usb-title {147    font-size: 58px;148    font-weight: 700;149    margin-bottom: 18px;150  }151  .usb-text {152    font-size: 36px;153    line-height: 1.35;154    color: #d7d7d7;155  }156  .fingerprint {157    margin-top: 14px;158    font-family: monospace;159    font-size: 32px;160    color: #c5c5c5;161    letter-spacing: 1px;162  }163  .usb-actions {164    margin-top: 26px;165    display: flex;166    align-items: center;167    justify-content: space-between;168  }169  .usb-checkbox {170    display: flex;171    align-items: center;172    gap: 16px;173    font-size: 36px;174    color: #dcdcdc;175  }176  .cb-box {177    width: 48px;178    height: 48px;179    border-radius: 12px;180    border: 3px solid #bfc7d1;181    background: rgba(255,255,255,0.06);182  }183  .usb-buttons {184    display: flex;185    align-items: center;186    gap: 28px;187  }188  .btn {189    padding: 18px 30px;190    border-radius: 16px;191    font-size: 40px;192    font-weight: 600;193    cursor: default;194  }195  .btn.secondary { color: #9fb2ff; }196  .btn.primary {197    color: #ffffff;198    background: #2b66f6;199    box-shadow: 0 8px 18px rgba(43,102,246,0.45);200  }201 202  /* Search pill */203  .search-pill {204    position: absolute;205    left: 54px;206    right: 54px;207    bottom: 80px;208    height: 120px;209    border-radius: 60px;210    background: rgba(22,24,28,0.9);211    display: flex;212    align-items: center;213    justify-content: space-between;214    padding: 0 32px;215    box-shadow: 0 10px 30px rgba(0,0,0,0.5);216  }217  .g-logo {218    width: 72px; height: 72px; border-radius: 50%;219    display: flex; align-items: center; justify-content: center;220    background: #ffffff;221  }222  .pill-right {223    display: flex; align-items: center; gap: 18px;224  }225  .circle-btn {226    width: 72px; height: 72px; border-radius: 50%;227    background: #2c2f35;228    display: flex; align-items: center; justify-content: center;229  }230  .nav-handle {231    position: absolute;232    bottom: 20px;233    left: 50%;234    transform: translateX(-50%);235    width: 260px; height: 10px; border-radius: 10px;236    background: #bfc2c8;237    opacity: 0.25;238  }239 240  /* Simple SVG styles */241  svg { display: block; }242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Status bar -->248  <div class="status-bar">249    <div class="sb-left">250      <div>12:51</div>251      <div class="icon-28">252        <!-- small play-triangle icon -->253        <svg viewBox="0 0 24 24">254          <polygon points="6,4 20,12 6,20" fill="#c7c7c7"></polygon>255        </svg>256      </div>257    </div>258    <div class="sb-right">259      <!-- Do not disturb (circle minus) -->260      <svg class="icon-32" viewBox="0 0 24 24">261        <circle cx="12" cy="12" r="10" fill="none" stroke="#d9d9d9" stroke-width="2"></circle>262        <rect x="6" y="11" width="12" height="2" fill="#d9d9d9"></rect>263      </svg>264      <!-- Wi-Fi -->265      <svg class="icon-32" viewBox="0 0 24 24">266        <path d="M2 8c5-4 15-4 20 0" stroke="#d9d9d9" stroke-width="2" fill="none"/>267        <path d="M5 12c4-3 10-3 14 0" stroke="#d9d9d9" stroke-width="2" fill="none"/>268        <path d="M8 16c3-2 5-2 8 0" stroke="#d9d9d9" stroke-width="2" fill="none"/>269        <circle cx="12" cy="19" r="2" fill="#d9d9d9"></circle>270      </svg>271      <!-- Ring/notification -->272      <svg class="icon-32" viewBox="0 0 24 24">273        <path d="M12 3c-4 0-7 3-7 7v4l-2 2h18l-2-2v-4c0-4-3-7-7-7z" fill="none" stroke="#d9d9d9" stroke-width="2"/>274        <circle cx="12" cy="21" r="2" fill="#d9d9d9"></circle>275      </svg>276      <!-- Battery -->277      <svg class="icon-32" viewBox="0 0 28 24">278        <rect x="1" y="6" width="22" height="12" rx="2" ry="2" stroke="#d9d9d9" stroke-width="2" fill="none"></rect>279        <rect x="3" y="8" width="15" height="8" fill="#d9d9d9"></rect>280        <rect x="23" y="9" width="4" height="6" rx="1" fill="#d9d9d9"></rect>281      </svg>282    </div>283  </div>284 285  <!-- Welcome message -->286  <div class="welcome">287    <h1>Welcome to your new Pixel</h1>288    <div class="tips-row">289      <div class="play-tip">290        <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19" fill="#e0e0e0"/></svg>291      </div>292      <div>Tap for tips</div>293    </div>294  </div>295 296  <!-- App dock -->297  <div class="dock">298    <!-- Play Store -->299    <div class="app">300      <div class="app-icon">301        <div class="badge-dot"></div>302        <svg viewBox="0 0 100 100" width="110" height="110">303          <polygon points="20,20 80,50 20,80" fill="#35c759"></polygon>304          <polygon points="20,20 37,35 30,43 13,28" fill="#00a0ff"></polygon>305          <polygon points="13,72 30,57 37,65 20,80" fill="#ff3b30"></polygon>306          <polygon points="37,35 60,50 37,65 30,57 30,43" fill="#ffd60a"></polygon>307        </svg>308      </div>309      <div>Play Store</div>310    </div>311    <!-- Gmail -->312    <div class="app">313      <div class="app-icon">314        <svg viewBox="0 0 120 100" width="110" height="110">315          <rect x="18" y="24" width="84" height="54" rx="10" fill="#ffffff"></rect>316          <path d="M18 35 L60 63 L102 35" stroke="#ea4335" stroke-width="12" fill="none" />317          <path d="M30 78 V36 L60 58 L90 36 V78" stroke="#34a853" stroke-width="8" fill="none"/>318        </svg>319      </div>320      <div>Gmail</div>321    </div>322    <!-- Photos -->323    <div class="app">324      <div class="app-icon">325        <svg viewBox="0 0 120 120" width="110" height="110">326          <path d="M60 12 A28 28 0 0 1 88 40 H60 Z" fill="#ea4335"/>327          <path d="M108 60 A28 28 0 0 1 80 88 V60 Z" fill="#34a853"/>328          <path d="M60 108 A28 28 0 0 1 32 80 H60 Z" fill="#4285f4"/>329          <path d="M12 60 A28 28 0 0 1 40 32 V60 Z" fill="#fbbc05"/>330          <circle cx="60" cy="60" r="14" fill="#ffffff"></circle>331        </svg>332      </div>333      <div>Photos</div>334    </div>335    <!-- YouTube -->336    <div class="app">337      <div class="app-icon">338        <svg viewBox="0 0 120 90" width="110" height="110">339          <rect x="10" y="20" width="100" height="60" rx="18" fill="#ff3b30"></rect>340          <polygon points="52,35 82,50 52,65" fill="#ffffff"></polygon>341        </svg>342      </div>343      <div>YouTube</div>344    </div>345  </div>346 347  <!-- USB debugging modal -->348  <div class="usb-modal">349    <div class="usb-title">Allow USB debugging?</div>350    <div class="usb-text">The computer's RSA key fingerprint is:</div>351    <div class="fingerprint">EF:5A:08:11:2F:A3:B0:07:AD:77:7A:EB:CA:14:32:0C</div>352 353    <div class="usb-actions">354      <div class="usb-checkbox">355        <div class="cb-box"></div>356        <div>Always allow from this computer</div>357      </div>358      <div class="usb-buttons">359        <div class="btn secondary">Cancel</div>360        <div class="btn primary">Allow</div>361      </div>362    </div>363  </div>364 365  <!-- Search pill -->366  <div class="search-pill">367    <div class="g-logo">368      <!-- Google G simplified -->369      <svg viewBox="0 0 24 24" width="36" height="36">370        <path d="M12 4a8 8 0 108 8h-8v3h13A12 12 0 1112 4z" fill="#4285f4"></path>371      </svg>372    </div>373    <div class="pill-right">374      <div class="circle-btn">375        <!-- Mic icon -->376        <svg viewBox="0 0 24 24" width="26" height="26">377          <rect x="9" y="4" width="6" height="10" rx="3" fill="#ff5252"></rect>378          <path d="M5 12c0 4 3 7 7 7s7-3 7-7" stroke="#e0e0e0" stroke-width="2" fill="none"></path>379          <rect x="11" y="19" width="2" height="3" fill="#e0e0e0"></rect>380        </svg>381      </div>382      <div class="circle-btn">383        <!-- Camera/Lens icon -->384        <svg viewBox="0 0 24 24" width="26" height="26">385          <rect x="3" y="6" width="18" height="12" rx="3" fill="#53d769"></rect>386          <circle cx="12" cy="12" r="4" fill="#ffffff"></circle>387        </svg>388      </div>389    </div>390  </div>391 392  <div class="nav-handle"></div>393 394</div>395</body>396</html>