GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ASOS - Loading</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar (mock) */20  .statusbar {21    height: 80px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #666;27    font-size: 30px;28    letter-spacing: 0.5px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .icon {36    width: 44px;37    height: 44px;38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42  .icon svg { width: 100%; height: 100%; }43 44  /* App header */45  .appbar {46    height: 120px;47    border-bottom: 1px solid #eee;48    display: flex;49    align-items: center;50    padding: 0 28px;51  }52  .appbar .left,53  .appbar .right {54    display: flex;55    align-items: center;56    gap: 34px;57  }58  .appbar .title {59    font-weight: 800;60    font-size: 56px;61    letter-spacing: 1px;62    margin-left: 18px;63  }64 65  /* Sorting / Filter bar */66  .filter-bar {67    height: 110px;68    border-bottom: 1px solid #eee;69    padding: 0 34px;70    display: flex;71    align-items: center;72    justify-content: space-between;73  }74  .filter-bar .option {75    display: flex;76    align-items: center;77    gap: 16px;78    font-weight: 800;79    letter-spacing: 2px;80    font-size: 34px;81  }82  .filter-bar .filter {83    font-weight: 800;84    letter-spacing: 2px;85    font-size: 34px;86  }87 88  /* Content */89  .content {90    position: absolute;91    left: 0; right: 0;92    top: 310px; /* status + appbar + filter */93    bottom: 110px;94    display: flex;95    align-items: center;96    justify-content: center;97  }98 99  /* Center loader */100  .loader {101    width: 190px;102    height: 190px;103    position: relative;104  }105  .loader .ring {106    width: 190px;107    height: 190px;108    border-radius: 50%;109    /* outer gradient ring with a small break */110    background: conic-gradient(#111 0 40deg, #666 40deg 180deg, #bdbdbd 180deg 335deg, #ffffff 335deg 360deg);111    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 18px));112            mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 18px));113    display: grid;114    place-items: center;115  }116  .loader .inner {117    position: absolute;118    inset: 26px;119    border-radius: 50%;120    background: #fff;121    border: 1px solid #d9d9d9;122    display: flex;123    align-items: center;124    justify-content: center;125    font-weight: 900;126    font-size: 84px;127  }128 129  /* Bottom home indicator */130  .home-indicator {131    position: absolute;132    left: 50%;133    transform: translateX(-50%);134    bottom: 34px;135    width: 420px;136    height: 12px;137    background: #7f7f7f;138    border-radius: 8px;139    opacity: 0.7;140  }141 142  /* Utility */143  .muted { color: #444; }144  .heart-stroke, .search-stroke, .back-stroke { stroke: #111; stroke-width: 3; fill: none; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Mock status bar -->151  <div class="statusbar">152    <div class="status-left">8:56</div>153    <div class="status-right">154      <span class="icon" title="Wi-Fi">155        <svg viewBox="0 0 24 24"><path fill="#666" d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path fill="#666" d="M2 9.5a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0l-2-2zm4 4a9 9 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2z"/></svg>156      </span>157      <span class="icon" title="Battery">158        <svg viewBox="0 0 28 24">159          <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="#666"/>160          <rect x="22" y="9" width="4" height="6" rx="1" fill="#666"/>161          <rect x="4" y="7" width="12" height="10" fill="#fff"/>162        </svg>163      </span>164    </div>165  </div>166 167  <!-- App header -->168  <div class="appbar">169    <div class="left">170      <span class="icon" aria-label="Back">171        <svg viewBox="0 0 24 24"><path class="back-stroke" d="M14 5l-7 7 7 7"/></svg>172      </span>173      <div class="title">asos</div>174    </div>175    <div class="right" style="margin-left:auto;">176      <span class="icon" aria-label="Favorites">177        <svg viewBox="0 0 24 24"><path class="heart-stroke" d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/></svg>178      </span>179      <span class="icon" aria-label="Search">180        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" class="search-stroke"/><path d="M20 20l-4.5-4.5" class="search-stroke"/></svg>181      </span>182    </div>183  </div>184 185  <!-- Sort/Filter bar -->186  <div class="filter-bar">187    <div class="option">RECOMMENDED188      <svg width="28" height="28" viewBox="0 0 24 24">189        <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>190      </svg>191    </div>192    <div class="filter">FILTER</div>193  </div>194 195  <!-- Content with centered loader -->196  <div class="content">197    <div class="loader">198      <div class="ring"></div>199      <div class="inner">a</div>200    </div>201  </div>202 203  <!-- Home indicator -->204  <div class="home-indicator"></div>205</div>206</body>207</html>