GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Loading Dialog UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #606060; /* medium gray backdrop */19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    color: #ffffff;29    font-size: 36px;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34  }35  .status-left {36    flex: 1;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icon svg {44    width: 38px;45    height: 38px;46    fill: none;47    stroke: #ffffff;48    stroke-width: 48;49  }50  .dot {51    width: 10px;52    height: 10px;53    background: #ffffff;54    border-radius: 50%;55    opacity: 0.7;56  }57 58  /* App bar */59  .app-bar {60    position: absolute;61    top: 110px;62    left: 0;63    width: 1080px;64    height: 120px;65    display: flex;66    align-items: center;67    justify-content: space-between;68    padding: 0 36px;69    box-sizing: border-box;70  }71  .app-icon {72    width: 64px;73    height: 64px;74  }75  .app-icon svg {76    width: 64px;77    height: 64px;78    fill: none;79    stroke: #1f1f1f;80    stroke-width: 60;81    stroke-linecap: round;82    stroke-linejoin: round;83    opacity: 0.9;84  }85 86  /* Loading card */87  .loading-card {88    position: absolute;89    left: 60px;90    top: 1600px;91    width: 960px;92    height: 220px;93    background: #ffffff;94    border-radius: 16px;95    box-shadow: 0 24px 60px rgba(0,0,0,0.35);96    display: flex;97    align-items: center;98    padding: 0 48px;99    box-sizing: border-box;100    gap: 40px;101  }102  .spinner {103    width: 84px;104    height: 84px;105    border-radius: 50%;106    border: 10px solid #93d253;           /* green */107    border-top-color: transparent;108    border-right-color: #93d253;109    border-bottom-color: #93d253;110    animation: spin 1.1s linear infinite;111  }112  @keyframes spin {113    to { transform: rotate(360deg); }114  }115  .loading-text {116    font-size: 48px;117    color: #555555;118  }119 120  /* Bottom gesture bar area */121  .bottom-area {122    position: absolute;123    bottom: 0;124    left: 0;125    width: 1080px;126    height: 140px;127    background: #000000;128  }129  .gesture-pill {130    position: absolute;131    bottom: 46px;132    left: 50%;133    transform: translateX(-50%);134    width: 300px;135    height: 16px;136    background: #e6e6e6;137    border-radius: 16px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status bar -->146  <div class="status-bar">147    <div class="status-left">11:47</div>148    <div class="status-right">149      <!-- Simple icons to suggest status items -->150      <div class="status-icon" title="Notifications">151        <svg viewBox="0 0 1000 1000">152          <path d="M250 820h500M500 120c-150 0-270 120-270 270v240l-80 120h700l-80-120V390c0-150-120-270-270-270z"/>153        </svg>154      </div>155      <div class="status-icon" title="Do Not Disturb">156        <svg viewBox="0 0 1000 1000">157          <circle cx="500" cy="500" r="380"></circle>158          <path d="M220 500h560"></path>159        </svg>160      </div>161      <div class="dot"></div>162      <div class="status-icon" title="Wi-Fi">163        <svg viewBox="0 0 1000 1000">164          <path d="M120 360c210-180 550-180 760 0M240 500c150-130 370-130 520 0M380 640c90-80 230-80 320 0M500 800l80 80-80 80-80-80z"/>165        </svg>166      </div>167      <div class="status-icon" title="Battery">168        <svg viewBox="0 0 1000 1000">169          <rect x="120" y="300" width="680" height="420" rx="60"></rect>170          <rect x="820" y="420" width="60" height="180" rx="26"></rect>171          <rect x="180" y="360" width="560" height="300" rx="30" fill="#ffffff"></rect>172        </svg>173      </div>174    </div>175  </div>176 177  <!-- App bar -->178  <div class="app-bar">179    <div class="app-icon" title="Back">180      <svg viewBox="0 0 1000 1000">181        <path d="M640 820L320 500l320-320"/>182      </svg>183    </div>184    <div class="app-icon" title="Search">185      <svg viewBox="0 0 1000 1000">186        <circle cx="420" cy="420" r="260"></circle>187        <path d="M660 660l240 240"></path>188      </svg>189    </div>190  </div>191 192  <!-- Loading card -->193  <div class="loading-card">194    <div class="spinner"></div>195    <div class="loading-text">Please wait...</div>196  </div>197 198  <!-- Bottom gesture navigation bar -->199  <div class="bottom-area">200    <div class="gesture-pill"></div>201  </div>202</div>203</body>204</html>