GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Enroll Loader Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Roboto, Arial, sans-serif;12    color: #222;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #fafafa;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 120px;29    display: flex;30    align-items: center;31    padding: 0 40px;32    box-sizing: border-box;33    color: #6b6b6b;34    font-size: 42px;35    letter-spacing: 0.5px;36  }37  .sb-left {38    flex: 1;39  }40  .sb-right {41    display: flex;42    gap: 26px;43    align-items: center;44  }45  .sb-icon {46    width: 48px;47    height: 48px;48  }49 50  /* Header */51  .header {52    position: absolute;53    top: 120px;54    left: 0;55    width: 100%;56    height: 140px;57    display: flex;58    align-items: center;59    justify-content: center;60  }61  .close-btn {62    position: absolute;63    left: 36px;64    top: 50%;65    transform: translateY(-50%);66    width: 72px;67    height: 72px;68    display: flex;69    align-items: center;70    justify-content: center;71    cursor: default;72  }73  .header-title {74    font-size: 56px;75    font-weight: 700;76    color: #1f1f1f;77  }78 79  /* Loader */80  .loader-wrap {81    position: absolute;82    top: 50%;83    left: 50%;84    transform: translate(-50%, -35%);85  }86  .loader {87    width: 170px;88    height: 170px;89    border-radius: 50%;90    border: 22px solid #2856e3;91    border-left-color: transparent;92    border-bottom-color: #2856e3;93    animation: spin 1.2s linear infinite;94  }95  @keyframes spin {96    to { transform: rotate(360deg); }97  }98 99  /* Gesture bar */100  .gesture-bar {101    position: absolute;102    bottom: 48px;103    left: 50%;104    transform: translateX(-50%);105    width: 520px;106    height: 20px;107    background: #7b7b7b;108    border-radius: 12px;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status Bar -->116  <div class="status-bar">117    <div class="sb-left">8:14</div>118    <div class="sb-right">119      <!-- Wi-Fi Icon -->120      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">121        <path d="M2 8c5-4 15-4 20 0" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>122        <path d="M5 11c4-3 10-3 14 0" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>123        <path d="M8 14c2-2 6-2 8 0" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>124        <circle cx="12" cy="18" r="2" fill="#6b6b6b"/>125      </svg>126      <!-- Battery Icon -->127      <svg class="sb-icon" viewBox="0 0 28 24" fill="none">128        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#6b6b6b" stroke-width="2"/>129        <rect x="4" y="8" width="14" height="8" rx="1" fill="#6b6b6b"/>130        <rect x="22" y="9" width="4" height="6" rx="1" fill="#6b6b6b"/>131      </svg>132    </div>133  </div>134 135  <!-- Header with Close -->136  <div class="header">137    <div class="close-btn">138      <svg viewBox="0 0 24 24" width="56" height="56">139        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round"/>140      </svg>141    </div>142    <div class="header-title">Enroll</div>143  </div>144 145  <!-- Loader -->146  <div class="loader-wrap">147    <div class="loader"></div>148  </div>149 150  <!-- Gesture bar -->151  <div class="gesture-bar"></div>152</div>153</body>154</html>