GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Loading Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    padding: 20px 28px;28    box-sizing: border-box;29  }30  .status-time {31    position: absolute;32    left: 28px;33    top: 24px;34    font-size: 54px;35    color: #6B6B6B;36    letter-spacing: -0.5px;37  }38  .status-carrier {39    position: absolute;40    left: 150px;41    top: 36px;42    font-size: 28px;43    color: #7A7A7A;44  }45  .status-icons {46    position: absolute;47    right: 24px;48    top: 28px;49    display: flex;50    gap: 24px;51    align-items: center;52  }53  .icon {54    width: 36px;55    height: 36px;56  }57  .icon svg {58    width: 100%;59    height: 100%;60  }61  .icon path, .icon rect, .icon line, .icon circle {62    stroke: #6B6B6B;63    fill: none;64    stroke-width: 3;65    stroke-linecap: round;66    stroke-linejoin: round;67  }68  .battery-fill {69    fill: #6B6B6B;70    stroke: none;71  }72 73  /* Spinner */74  .spinner {75    position: absolute;76    width: 96px;77    height: 96px;78    left: 492px; /* centered horizontally */79    top: 1340px; /* slightly below mid screen */80    border-radius: 50%;81    border: 12px solid #EEA39A;          /* soft coral/pink */82    border-top-color: transparent;        /* create the gap */83    box-sizing: border-box;84    animation: spin 1.1s linear infinite;85  }86  @keyframes spin {87    to { transform: rotate(360deg); }88  }89 90  /* Bottom gesture/navigation bar */91  .gesture-bar {92    position: absolute;93    bottom: 0;94    left: 0;95    width: 1080px;96    height: 140px;97    background: #000000;98  }99  .gesture-pill {100    position: absolute;101    top: 22px;102    left: 50%;103    transform: translateX(-50%);104    width: 420px;105    height: 12px;106    background: #EDEDED;107    border-radius: 8px;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status-bar">116    <div class="status-time">11:16</div>117    <div class="status-carrier">S3</div>118    <div class="status-icons">119      <!-- Wi-Fi icon -->120      <div class="icon">121        <svg viewBox="0 0 28 28">122          <path d="M2 12 C8 6 20 6 26 12" />123          <path d="M6 15 C11 10 17 10 22 15" />124          <path d="M10 18 C13 15 15 15 18 18" />125          <circle cx="14" cy="22" r="2.2" fill="#6B6B6B" stroke="none"/>126        </svg>127      </div>128      <!-- Battery icon -->129      <div class="icon">130        <svg viewBox="0 0 28 28">131          <rect x="3" y="8" width="18" height="12" rx="2" />132          <rect x="21" y="11" width="3.5" height="6" rx="1.2" class="battery-fill"/>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- Loading spinner -->139  <div class="spinner"></div>140 141  <!-- Bottom gesture navigation area -->142  <div class="gesture-bar">143    <div class="gesture-pill"></div>144  </div>145 146</div>147</body>148</html>