GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Trulia Loading Screen</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-size: 44px;30    letter-spacing: 0.3px;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .dots { font-size: 34px; opacity: 0.7; }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon-wifi, .icon-battery {44    width: 54px;45    height: 54px;46    display: inline-block;47  }48  .icon-wifi svg path,49  .icon-battery svg rect { fill: #EDEDED; }50 51  /* Header logo */52  .header {53    position: absolute;54    top: 100px;55    left: 0;56    width: 1080px;57    height: 130px;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62    border-bottom: 1px solid rgba(255,255,255,0.06);63  }64  .brand {65    font-weight: 800;66    font-size: 96px;67    letter-spacing: 1px;68    color: #FFFFFF;69  }70 71  /* Center loader */72  .loader {73    position: absolute;74    top: 1180px;75    left: 50%;76    transform: translateX(-50%);77    width: 160px;78    height: 160px;79    border-radius: 50%;80    border: 16px solid #36B5C5;81    border-top-color: transparent;82    border-right-color: #36B5C5;83    border-bottom-color: #36B5C5;84    border-left-color: #36B5C5;85    animation: spin 1.4s linear infinite;86    opacity: 0.95;87  }88  @keyframes spin {89    from { transform: translateX(-50%) rotate(0deg); }90    to   { transform: translateX(-50%) rotate(360deg); }91  }92 93  /* Bottom navigation */94  .bottom-nav {95    position: absolute;96    bottom: 90px;97    left: 0;98    width: 1080px;99    height: 210px;100    background: #1C1C1C;101    border-top: 1px solid rgba(255,255,255,0.06);102    display: grid;103    grid-template-columns: repeat(5, 1fr);104    align-items: center;105    text-align: center;106    padding-top: 26px;107    box-sizing: border-box;108  }109  .nav-item {110    color: #BDBDBD;111    font-size: 38px;112  }113  .nav-item .icon {114    margin: 0 auto 16px auto;115    width: 90px;116    height: 90px;117  }118  .nav-item.active { color: #FFFFFF; }119  .nav-item.active .icon { filter: none; }120  .nav-item svg path, .nav-item svg circle, .nav-item svg rect {121    fill: #BDBDBD;122    stroke: none;123  }124  .nav-item.active svg path,125  .nav-item.active svg circle {126    fill: #FFFFFF;127  }128 129  /* Special colorful Feed icon */130  .icon-feed svg .leaf { fill: #5EC96F; }131  .icon-feed svg .petal { fill: #A88AF5; }132  .icon-feed svg .stem { fill: #4CAF50; }133  .nav-item.active .icon-feed svg .leaf,134  .nav-item.active .icon-feed svg .petal,135  .nav-item.active .icon-feed svg .stem { fill: currentColor; }136 137  /* Gesture home indicator */138  .home-indicator {139    position: absolute;140    bottom: 24px;141    left: 50%;142    transform: translateX(-50%);143    width: 420px;144    height: 16px;145    background: #E5E5E5;146    border-radius: 10px;147    opacity: 0.9;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status Bar -->155  <div class="status-bar">156    <div class="status-left">157      <div>7:00</div>158      <div class="dots">• • • • •</div>159    </div>160    <div class="status-right">161      <div class="icon-wifi">162        <svg viewBox="0 0 64 64" width="54" height="54">163          <path d="M32 50c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5z"></path>164          <path d="M12 32c11-11 29-11 40 0l-6 6c-8-8-20-8-28 0l-6-6z" opacity="0.9"></path>165          <path d="M4 22c15-15 41-15 56 0l-6 6c-12-12-32-12-44 0l-6-6z" opacity="0.6"></path>166        </svg>167      </div>168      <div class="icon-battery">169        <svg viewBox="0 0 80 40" width="54" height="54">170          <rect x="2" y="6" width="64" height="28" rx="6" fill="#EDEDED"></rect>171          <rect x="8" y="12" width="52" height="16" rx="4" fill="#121212"></rect>172          <rect x="70" y="12" width="8" height="16" rx="2" fill="#EDEDED"></rect>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- Header -->179  <div class="header">180    <div class="brand">trulia</div>181  </div>182 183  <!-- Center Spinner -->184  <div class="loader"></div>185 186  <!-- Bottom Navigation -->187  <div class="bottom-nav">188    <div class="nav-item active">189      <div class="icon icon-feed">190        <svg viewBox="0 0 100 100" width="90" height="90">191          <path class="stem" d="M48 70h4v22h-4z"></path>192          <circle class="leaf" cx="50" cy="60" r="16"></circle>193          <path class="petal" d="M80 44c-12 0-16-6-20-12 0 12 6 20 20 20 4 0 8-2 8-4s-3-4-8-4z"></path>194        </svg>195      </div>196      <div>Feed</div>197    </div>198    <div class="nav-item">199      <div class="icon">200        <svg viewBox="0 0 100 100" width="90" height="90">201          <circle cx="44" cy="44" r="26"></circle>202          <rect x="62" y="62" width="28" height="12" transform="rotate(45 76 68)"></rect>203        </svg>204      </div>205      <div>Search</div>206    </div>207    <div class="nav-item">208      <div class="icon">209        <svg viewBox="0 0 100 100" width="90" height="90">210          <path d="M50 78l-5-4C30 63 22 55 22 44c0-10 8-18 18-18 7 0 12 4 15 8 3-4 8-8 15-8 10 0 18 8 18 18 0 11-8 19-23 30l-5 4z"></path>211        </svg>212      </div>213      <div>Saves</div>214    </div>215    <div class="nav-item">216      <div class="icon">217        <svg viewBox="0 0 100 100" width="90" height="90">218          <path d="M50 12c16 0 28 12 28 28v18l6 10H16l6-10V40c0-16 12-28 28-28z"></path>219        </svg>220      </div>221      <div>Alerts</div>222    </div>223    <div class="nav-item">224      <div class="icon">225        <svg viewBox="0 0 100 100" width="90" height="90">226          <circle cx="20" cy="50" r="8"></circle>227          <circle cx="50" cy="50" r="8"></circle>228          <circle cx="80" cy="50" r="8"></circle>229        </svg>230      </div>231      <div>More</div>232    </div>233  </div>234 235  <!-- Home indicator -->236  <div class="home-indicator"></div>237 238</div>239</body>240</html>