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>Preparing 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: #2f2f2f;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status Bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #0d0d0d;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .status-left,33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-left { flex: 1; }39  .time {40    font-size: 44px;41    font-weight: 600;42    letter-spacing: 1px;43  }44  .dot {45    width: 10px;46    height: 10px;47    background: #bdbdbd;48    border-radius: 50%;49  }50  .status-right { justify-content: flex-end; }51 52  /* Simple icons */53  .icon {54    width: 46px;55    height: 46px;56    display: inline-block;57  }58  .icon svg { width: 100%; height: 100%; }59 60  /* Content */61  .content {62    position: absolute;63    left: 0;64    width: 100%;65    top: 1180px;66    text-align: center;67  }68  .title {69    font-size: 48px;70    color: #eaeaea;71    margin-bottom: 60px;72  }73  .spinner {74    width: 140px;75    height: 140px;76    margin: 0 auto 90px auto;77    animation: spin 1.1s linear infinite;78  }79  @keyframes spin {80    to { transform: rotate(360deg); }81  }82 83  .btn {84    display: inline-flex;85    align-items: center;86    justify-content: center;87    width: 360px;88    height: 110px;89    border: 4px solid #ffffff;90    border-radius: 18px;91    color: #ffffff;92    font-size: 44px;93    text-transform: lowercase;94    background: rgba(255,255,255,0.06);95  }96 97  /* Bottom Nav Bar */98  .nav-bar {99    position: absolute;100    bottom: 0;101    left: 0;102    width: 1080px;103    height: 120px;104    background: #0d0d0d;105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .nav-handle {110    width: 300px;111    height: 12px;112    background: #e5e5e5;113    border-radius: 10px;114  }115</style>116</head>117<body>118<div id="render-target">119  <!-- Status Bar -->120  <div class="status-bar">121    <div class="status-left">122      <div class="time">2:17</div>123      <!-- simple alert icon -->124      <span class="icon">125        <svg viewBox="0 0 24 24" fill="#ffffff">126          <path d="M11 3l-7 17h16L13 3h-2zm1 6v5h-2V9h2zm0 7v2h-2v-2h2z"/>127        </svg>128      </span>129      <!-- square app icon -->130      <span class="icon">131        <svg viewBox="0 0 24 24" fill="#ffffff">132          <rect x="4" y="4" width="16" height="16" rx="3"></rect>133        </svg>134      </span>135      <!-- mail icon -->136      <span class="icon">137        <svg viewBox="0 0 24 24" fill="#ffffff">138          <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8v10h16V8z"/>139        </svg>140      </span>141      <div class="dot"></div>142    </div>143    <div class="status-right">144      <!-- do not disturb icon -->145      <span class="icon">146        <svg viewBox="0 0 24 24">147          <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"></circle>148          <rect x="7" y="11" width="10" height="2" fill="#ffffff"></rect>149        </svg>150      </span>151      <!-- wifi -->152      <span class="icon">153        <svg viewBox="0 0 24 24" fill="#ffffff">154          <path d="M12 18l2-2-2-2-2 2 2 2zm-6.5-6.5l1.4 1.4C8.2 11.6 10 11 12 11s3.8.6 5.1 1.9l1.4-1.4C16.8 9.6 14.5 9 12 9s-4.8.6-6.5 2.5zm-3.2-3.2l1.4 1.4C6.7 8.1 9.2 7.3 12 7.3s5.3.8 8.3 2.4l1.4-1.4C18.9 6 15.6 5 12 5S5.1 6 2.3 8.3z"/>155        </svg>156      </span>157      <!-- battery -->158      <span class="icon">159        <svg viewBox="0 0 24 24" fill="#ffffff">160          <rect x="3" y="7" width="16" height="10" rx="2"></rect>161          <rect x="20" y="10" width="2" height="4"></rect>162          <rect x="5" y="9" width="12" height="6" fill="#0d0d0d"></rect>163          <rect x="5" y="9" width="9" height="6" fill="#ffffff"></rect>164        </svg>165      </span>166    </div>167  </div>168 169  <!-- Center Content -->170  <div class="content">171    <div class="title">Preparing...</div>172 173    <!-- Spinner -->174    <div class="spinner">175      <svg viewBox="0 0 100 100">176        <circle cx="50" cy="50" r="34" fill="none" stroke="#00a8c0" stroke-width="12" stroke-linecap="round" stroke-dasharray="140 70"></circle>177      </svg>178    </div>179 180    <!-- Cancel Button -->181    <div class="btn">cancel</div>182  </div>183 184  <!-- Bottom Navigation Handle -->185  <div class="nav-bar">186    <div class="nav-handle"></div>187  </div>188</div>189</body>190</html>