GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - 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  /* Top green status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 100%;26    height: 170px;27    background: #5fc17a;28    color: #ffffff;29  }30  .time {31    position: absolute;32    left: 40px;33    top: 32px;34    font-size: 48px;35    font-weight: 600;36    letter-spacing: 1px;37  }38  .status-icons {39    position: absolute;40    right: 40px;41    top: 28px;42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .icon {47    width: 48px;48    height: 48px;49  }50 51  /* Thin divider below the bar */52  .top-divider {53    position: absolute;54    top: 228px;55    left: 0;56    width: 100%;57    height: 2px;58    background: #D6D6D6;59  }60 61  /* Left vertical step indicator dots */62  .stepper {63    position: absolute;64    left: 24px;65    top: 650px;66    display: flex;67    flex-direction: column;68    gap: 34px;69  }70  .dot {71    width: 36px;72    height: 36px;73    border-radius: 50%;74    background: #ffffff;75    border: 3px solid #DADADA;76    box-shadow: 0 2px 6px rgba(0,0,0,0.25);77  }78 79  /* Center loading spinner */80  .loader {81    position: absolute;82    top: 1080px;83    left: 450px;84    width: 180px;85    height: 180px;86    border-radius: 50%;87    background: conic-gradient(#5fc17a 0deg, #5fc17a 300deg, rgba(0,0,0,0) 300deg 360deg);88    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 0);89    mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 0);90    animation: spin 1.2s linear infinite;91  }92  @keyframes spin {93    to { transform: rotate(360deg); }94  }95 96  /* Bottom navigation bar with gesture pill */97  .nav-bar {98    position: absolute;99    bottom: 0;100    left: 0;101    width: 100%;102    height: 118px;103    background: #000000;104  }105  .gesture-pill {106    position: absolute;107    left: 50%;108    top: 32px;109    transform: translateX(-50%);110    width: 300px;111    height: 12px;112    background: #E6E6E6;113    border-radius: 12px;114    opacity: 0.9;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Top Status Bar -->122  <div class="status-bar">123    <div class="time">3:50</div>124    <div class="status-icons">125      <!-- Simple wifi icon -->126      <svg class="icon" viewBox="0 0 24 24">127        <path fill="#ffffff" d="M12 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20zm6-6.5a9 9 0 0 0-12 0l1.6 1.6a6.8 6.8 0 0 1 8.8 0L18 13.5zm3.5-3.8a13.5 13.5 0 0 0-19 0l1.7 1.7a11.2 11.2 0 0 1 15.6 0l1.7-1.7z"/>128      </svg>129      <!-- Battery icon -->130      <svg class="icon" viewBox="0 0 24 24">131        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>132        <rect x="5" y="8" width="12" height="8" rx="1" fill="#ffffff"/>133        <rect x="19.5" y="9" width="2" height="6" rx="1" fill="#ffffff"/>134      </svg>135    </div>136  </div>137 138  <!-- Divider line under header -->139  <div class="top-divider"></div>140 141  <!-- Left vertical dots -->142  <div class="stepper">143    <div class="dot"></div>144    <div class="dot"></div>145    <div class="dot"></div>146    <div class="dot"></div>147  </div>148 149  <!-- Central loading spinner -->150  <div class="loader"></div>151 152  <!-- Bottom navigation bar -->153  <div class="nav-bar">154    <div class="gesture-pill"></div>155  </div>156 157</div>158</body>159</html>