GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Loading Search</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    color: #2c2c2c;27    font-size: 44px;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .yt-chip {35    width: 42px;36    height: 28px;37    border-radius: 6px;38    background: #9e9e9e;39    position: relative;40  }41  .yt-chip::after {42    content: "";43    position: absolute;44    left: 12px;45    top: 7px;46    width: 18px;47    height: 14px;48    border-left: 10px solid #ffffff;49    border-top: 7px solid transparent;50    border-bottom: 7px solid transparent;51  }52 53  /* Search header */54  .header-row {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 130px;60    display: flex;61    align-items: center;62    padding: 0 24px;63    box-sizing: border-box;64  }65  .back-btn {66    width: 72px;67    height: 72px;68    display: flex;69    align-items: center;70    justify-content: center;71    margin-right: 18px;72  }73  .search-pill {74    flex: 1;75    height: 110px;76    background: #f2f3f5;77    border-radius: 60px;78    display: flex;79    align-items: center;80    padding: 0 26px;81    box-sizing: border-box;82    gap: 22px;83  }84  .search-text {85    font-size: 40px;86    color: #1f1f1f;87  }88  .divider {89    height: 60px;90    width: 2px;91    background: #d7d7d7;92    margin: 0 6px 0 10px;93  }94  .location-text {95    font-size: 40px;96    color: #1f1f1f;97  }98 99  /* Spinner */100  .spinner {101    position: absolute;102    top: 700px;103    left: 488px;104    width: 120px;105    height: 120px;106    border: 12px solid #cfd8ff;107    border-top-color: #4285f4;108    border-radius: 50%;109    animation: spin 1s linear infinite;110  }111  @keyframes spin { 100% { transform: rotate(360deg); } }112 113  /* Gesture bar */114  .gesture-bar {115    position: absolute;116    bottom: 240px;117    left: 50%;118    transform: translateX(-50%);119    width: 440px;120    height: 14px;121    background: #c9c9c9;122    border-radius: 8px;123  }124 125  /* Bottom navigation */126  .bottom-nav {127    position: absolute;128    bottom: 0;129    left: 0;130    width: 1080px;131    height: 220px;132    border-top: 2px solid #e5e5e5;133    background: #ffffff;134    display: flex;135    align-items: center;136    justify-content: space-around;137  }138  .nav-item {139    width: 200px;140    height: 160px;141    display: flex;142    flex-direction: column;143    align-items: center;144    justify-content: center;145    color: #8a8a8a;146    font-size: 34px;147    position: relative;148  }149  .nav-item.active { color: #2e7d32; }150  .icon {151    width: 84px;152    height: 84px;153    margin-bottom: 18px;154  }155  .badge {156    position: absolute;157    top: 12px;158    right: 62px;159    background: #e53935;160    color: #fff;161    font-size: 32px;162    width: 54px;163    height: 54px;164    border-radius: 50%;165    display: flex;166    align-items: center;167    justify-content: center;168    font-weight: bold;169    box-shadow: 0 2px 0 rgba(0,0,0,0.1);170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div class="status-left">179      <div>5:47</div>180      <div class="yt-chip"></div>181    </div>182    <div class="status-right">183      <!-- WiFi icon -->184      <svg class="icon" viewBox="0 0 24 24" width="56" height="56">185        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" fill="#777" opacity="0"></path>186        <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#4b4b4b" stroke-width="2.2" fill="none" stroke-linecap="round"/>187        <path d="M5 11c4-3 10-3 14 0" stroke="#4b4b4b" stroke-width="2.2" fill="none" stroke-linecap="round"/>188        <path d="M8.5 14.5c2.2-1.6 5-1.6 7.1 0" stroke="#4b4b4b" stroke-width="2.2" fill="none" stroke-linecap="round"/>189        <circle cx="12" cy="19.5" r="2.2" fill="#4b4b4b"/>190      </svg>191      <!-- Battery icon -->192      <svg class="icon" viewBox="0 0 32 24" width="64" height="52">193        <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#4b4b4b" stroke-width="2.2" fill="none"/>194        <rect x="4.5" y="6.5" width="18" height="11" fill="#4b4b4b"/>195        <rect x="26.5" y="8" width="4.5" height="8" rx="1" fill="#4b4b4b"/>196      </svg>197    </div>198  </div>199 200  <!-- Search header -->201  <div class="header-row">202    <div class="back-btn">203      <svg viewBox="0 0 24 24" width="72" height="72">204        <path d="M15.5 4l-9 8 9 8" fill="none" stroke="#333" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>205      </svg>206    </div>207    <div class="search-pill">208      <svg viewBox="0 0 24 24" width="56" height="56">209        <circle cx="10" cy="10" r="6.5" stroke="#555" stroke-width="2.2" fill="none"/>210        <path d="M15.5 15.5L22 22" stroke="#555" stroke-width="2.2" stroke-linecap="round"/>211      </svg>212      <div class="search-text">Running shoes</div>213      <div class="divider"></div>214      <svg viewBox="0 0 24 24" width="56" height="56">215        <path d="M12 2c-4.1 0-7.5 3.2-7.5 7.1 0 5.1 7.5 12.9 7.5 12.9s7.5-7.8 7.5-12.9C19.5 5.2 16.1 2 12 2z" fill="none" stroke="#111" stroke-width="2"/>216        <circle cx="12" cy="9" r="2.8" fill="#111"/>217      </svg>218      <div class="location-text">Michigan, USA</div>219    </div>220  </div>221 222  <!-- Loading Spinner -->223  <div class="spinner"></div>224 225  <!-- Gesture bar placeholder -->226  <div class="gesture-bar"></div>227 228  <!-- Bottom Navigation -->229  <div class="bottom-nav">230    <div class="nav-item active">231      <!-- Featured icon (green G) -->232      <svg class="icon" viewBox="0 0 100 100">233        <circle cx="50" cy="50" r="46" fill="#2e7d32"/>234        <text x="50" y="66" font-size="64" font-family="Arial, Helvetica, sans-serif" text-anchor="middle" fill="#ffffff">G</text>235      </svg>236      <div>Featured</div>237    </div>238 239    <div class="nav-item">240      <!-- Categories grid icon -->241      <svg class="icon" viewBox="0 0 24 24">242        <rect x="2" y="2" width="7" height="7" rx="1.5" fill="#909090"/>243        <rect x="15" y="2" width="7" height="7" rx="1.5" fill="#909090"/>244        <rect x="2" y="15" width="7" height="7" rx="1.5" fill="#909090"/>245        <rect x="15" y="15" width="7" height="7" rx="1.5" fill="#909090"/>246        <rect x="8.5" y="8.5" width="7" height="7" rx="1.5" fill="#909090"/>247      </svg>248      <div>Categories</div>249    </div>250 251    <div class="nav-item">252      <!-- Bell icon -->253      <svg class="icon" viewBox="0 0 24 24">254        <path d="M6 9a6 6 0 0112 0c0 6 2 7 2 7H4s2-1 2-7z" fill="#909090"/>255        <circle cx="12" cy="21" r="2.4" fill="#909090"/>256      </svg>257      <div class="badge">7</div>258      <div>Notifications</div>259    </div>260 261    <div class="nav-item">262      <!-- Heart icon -->263      <svg class="icon" viewBox="0 0 24 24">264        <path d="M12 21s-7-4.8-9.5-8.3A5.7 5.7 0 016.2 3.5c2 0 3.6 1.2 4.3 2.6.7-1.4 2.3-2.6 4.3-2.6a5.7 5.7 0 013.7 9.2C19 16.2 12 21 12 21z" fill="#909090"/>265      </svg>266      <div>Saved</div>267    </div>268 269    <div class="nav-item">270      <!-- Person icon -->271      <svg class="icon" viewBox="0 0 24 24">272        <circle cx="12" cy="8" r="4.2" fill="#909090"/>273        <path d="M4 21c0-4.2 3.8-7 8-7s8 2.8 8 7" fill="#909090"/>274      </svg>275      <div>My Stuff</div>276    </div>277  </div>278 279</div>280</body>281</html>