GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Loading Screen</title>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: Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  /* Top system status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000;27    color: #fff;28  }29  .status-content {30    height: 100%;31    display: flex;32    align-items: center;33    justify-content: space-between;34    padding: 0 36px;35    font-size: 40px;36    letter-spacing: 1px;37  }38  .status-center {39    opacity: 0.9;40    font-size: 38px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 26px;46    font-size: 34px;47    opacity: 0.95;48  }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 120px;54    left: 0;55    width: 1080px;56    height: 160px;57    background: #FFFFFF;58    display: flex;59    align-items: center;60    justify-content: space-between;61    padding: 0 40px;62  }63  .app-actions {64    display: flex;65    align-items: center;66    gap: 46px;67  }68  .icon {69    width: 72px;70    height: 72px;71  }72  .icon svg {73    width: 100%;74    height: 100%;75    display: block;76  }77  .icon-stroke svg path,78  .icon-stroke svg line,79  .icon-stroke svg circle {80    stroke: #111;81    stroke-width: 4;82    fill: none;83    stroke-linecap: round;84    stroke-linejoin: round;85  }86 87  /* Center spinner */88  .spinner {89    position: absolute;90    top: 1180px; /* slightly below vertical center, similar to screenshot */91    left: 480px; /* horizontally centered for 120px spinner */92    width: 120px;93    height: 120px;94    border: 14px solid #BDBDBD;95    border-right-color: transparent;96    border-radius: 50%;97    animation: spin 1.1s linear infinite;98    opacity: 0.9;99  }100  @keyframes spin {101    to { transform: rotate(360deg); }102  }103 104  /* Bottom gesture/navigation bar */105  .nav-bar {106    position: absolute;107    bottom: 0;108    left: 0;109    width: 1080px;110    height: 120px;111    background: #000;112  }113  .home-indicator {114    position: absolute;115    bottom: 32px;116    left: 50%;117    transform: translateX(-50%);118    width: 260px;119    height: 14px;120    border-radius: 8px;121    background: #E5E5E5;122    opacity: 0.95;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Top system status bar -->130  <div class="status-bar">131    <div class="status-content">132      <div>2:57</div>133      <div class="status-center">• • • • •</div>134      <div class="status-right">135        <span>◈</span>136        <span>🔋</span>137      </div>138    </div>139  </div>140 141  <!-- App bar with back, search, cart -->142  <div class="app-bar">143    <div class="icon icon-stroke" aria-label="Back">144      <svg viewBox="0 0 24 24">145        <path d="M14.5 5.5L8 12l6.5 6.5"></path>146        <line x1="8" y1="12" x2="21" y2="12"></line>147      </svg>148    </div>149    <div class="app-actions">150      <div class="icon icon-stroke" aria-label="Search">151        <svg viewBox="0 0 24 24">152          <circle cx="11" cy="11" r="6.5"></circle>153          <line x1="16.2" y1="16.2" x2="21" y2="21"></line>154        </svg>155      </div>156      <div class="icon icon-stroke" aria-label="Bag">157        <svg viewBox="0 0 24 24">158          <path d="M5.5 9h13l-1.2 11H6.7L5.5 9z"></path>159          <path d="M8.5 9a3.5 3.5 0 0 1 7 0"></path>160        </svg>161      </div>162    </div>163  </div>164 165  <!-- Center loading spinner -->166  <div class="spinner" aria-label="Loading"></div>167 168  <!-- Bottom navigation/gesture area -->169  <div class="nav-bar">170    <div class="home-indicator"></div>171  </div>172 173</div>174</body>175</html>