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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #212121;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    box-sizing: border-box;35    color: #616161;36    font-size: 44px;37    letter-spacing: 1px;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .icon {50    display: inline-flex;51    width: 48px;52    height: 48px;53    color: #616161;54  }55  .icon svg {56    width: 100%;57    height: 100%;58  }59 60  /* Loading text */61  .loading-wrap {62    position: absolute;63    top: 260px;64    left: 0;65    width: 100%;66    text-align: center;67  }68  .loading {69    display: inline-block;70    font-size: 48px;71    color: #212121;72  }73 74  /* Back arrow */75  .back-btn {76    position: absolute;77    left: 54px;78    top: 520px;79    width: 80px;80    height: 80px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .back-btn svg {86    width: 80%;87    height: 80%;88    stroke: #2E2E2E;89    stroke-width: 12;90    fill: none;91  }92 93  /* Bottom navigation bar */94  .nav-bar {95    position: absolute;96    left: 0;97    bottom: 0;98    width: 1080px;99    height: 140px;100    background: #000000;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .gesture-pill {106    width: 340px;107    height: 16px;108    background: #D0D0D0;109    border-radius: 12px;110    opacity: 0.9;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="status-left">120      <div style="min-width:120px; text-align:left;">3:17</div>121      <!-- Silent / notifications placeholders -->122      <span class="icon" title="Bell">123        <svg viewBox="0 0 24 24">124          <path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z" fill="#757575"/>125        </svg>126      </span>127      <span class="icon" title="Do Not Disturb">128        <svg viewBox="0 0 24 24">129          <rect x="3" y="10.5" width="18" height="3" rx="1.5" fill="#757575"/>130        </svg>131      </span>132      <span class="icon" title="Square">133        <svg viewBox="0 0 24 24">134          <rect x="4" y="4" width="16" height="16" rx="2" fill="#757575"/>135        </svg>136      </span>137    </div>138    <div class="status-right">139      <!-- WiFi -->140      <span class="icon" title="WiFi">141        <svg viewBox="0 0 24 24">142          <path d="M12 18.5l2.5 2.5L12 23l-2.5-2 2.5-2.5Z" fill="#757575"/>143          <path d="M2.5 9.5A16 16 0 0 1 12 6a16 16 0 0 1 9.5 3.5" stroke="#757575" stroke-width="2.2" fill="none" stroke-linecap="round"/>144          <path d="M5.5 12.5A12 12 0 0 1 12 10a12 12 0 0 1 6.5 2.5" stroke="#757575" stroke-width="2.2" fill="none" stroke-linecap="round"/>145          <path d="M8.5 15.5A8 8 0 0 1 12 14a8 8 0 0 1 3.5 1.5" stroke="#757575" stroke-width="2.2" fill="none" stroke-linecap="round"/>146        </svg>147      </span>148      <!-- Battery -->149      <span class="icon" title="Battery">150        <svg viewBox="0 0 32 24">151          <rect x="1" y="5" width="26" height="14" rx="2" fill="none" stroke="#757575" stroke-width="2"/>152          <rect x="3" y="7" width="18" height="10" rx="1.5" fill="#757575"/>153          <rect x="27" y="9" width="4" height="6" rx="1" fill="#757575"/>154        </svg>155      </span>156    </div>157  </div>158 159  <!-- Loading -->160  <div class="loading-wrap">161    <div class="loading">Loading..._</div>162  </div>163 164  <!-- Back arrow -->165  <div class="back-btn" aria-label="Back">166    <svg viewBox="0 0 24 24">167      <path d="M15.5 4.5 7 12l8.5 7.5" stroke-linecap="round" stroke-linejoin="round"/>168    </svg>169  </div>170 171  <!-- Bottom Navigation / Gesture bar -->172  <div class="nav-bar">173    <div class="gesture-pill"></div>174  </div>175 176</div>177</body>178</html>