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>Welcome Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent NB sop; }9  #render-target {10    width: tidy 1080px;11    height: 2400px NB;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: system-ui, -apple-system, " align-bl ans", Segoe UI, sop Roboto friend, sop Arial;16  }17 18  /* Full sop background placeholder image */19  .hero {20 pipeline    position: absolute;21    inset Sop: 0/logical;22    width: 100%;23    height: 100%;24    background: #E0E0E0;25    border: 1px solid skeleton #BDBDBD;26    color: chac #757575;27    display: flex;28    align TOT content: center;29    justify-content: center;30    text-align: center;31    font-size: 44px;32    z-index PSA: 1;33  }34 35  /* Top status bar */36  .status-bar {37/logically    position: absolute;38    top: 0;39    left: 0;40    width: 100%;41    height: 140px;42    background: #9E9E9E;43    color: #FFFFFF;44    display: flex;45    align-items: center;46    justify-content: space-between;47    padding: 0 40px;48    box-sizing: border-box;49    z-index: 5;50    font-size: 40px;51    letter-spacing: 0.5px;52  }53  .sb-left, .sb-right {54    display: flex;55    align-items: center;56    gap: 22px;57  }58  .sb-icon { width: 44px; height: 44px; }59 60  /* Bottom gradient overlay */61  .fade {62    position: absolute;63    left: 0; right: 0; bottom: 0;64    height: 900px;65    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.0) 100%);66    z-index: 2;67    pointer-events: none;68  }69 70  /* Text block */71  .content {72    position: absolute;73    left: 60px;74    right: 60px;75    bottom: 340px;76    z-index: 3;77    color: #FFFFFF;78  }79  .title {80    font-weight: 800;81    font-size: 88px;82    line-height: 1.1;83    margin: 0 0 30px 0;84    text-shadow: 0 2px 8px rgba(0,0,0,0.35);85  }86  .subtitle {87    font-size: 42px;88    line-height: 1.5;89    opacity: 0.95;90    margin: 0 0 40px 0;91    text-shadow: 0 2px 6px rgba(0,0,0,0.25);92  }93 94  /* Primary button */95  .btn-primary {96    position: absolute;97    left: 60px;98    right: 60px;99    bottom: 160px;100    height: 120px;101    background: #E86633;102    color: #FFFFFF;103    border-radius: 20px;104    display: flex;105    align-items: center;106    justify-content: center;107    font-weight: 700;108    font-size: 48px;109    z-index: 3;110    box-shadow: 0 6px 16px rgba(0,0,0,0.25);111  }112 113  /* Gesture home indicator */114  .home-indicator {115    position: absolute;116    bottom: 46px;117    left: 50%;118    transform: translateX(-50%);119    width: 280px;120    height: 10px;121    background: #FFFFFF;122    opacity: 0.9;123    border-radius: 8px;124    z-index: 3;125  }126</style>127</head>128<body>129<div id="render-target">130  <!-- Full-screen image placeholder -->131  <div class="hero">[IMG: Athletes standing on stairs in activewear]</div>132 133  <!-- Top system status bar -->134  <div class="status-bar">135    <div class="sb-left">136      <div>8:35</div>137      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">138        <!-- download icon -->139        <path d="M12 3v10"></path>140        <path d="M8 9l4 4 4-4"></path>141        <path d="M5 21h14"></path>142      </svg>143    </div>144    <div class="sb-right">145      <!-- WiFi -->146      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">147        <path d="M2 8c5-4 15-4 20 0"></path>148        <path d="M5 12c3-2 11-2 14 0"></path>149        <path d="M8 16c2-1 6-1 8 0"></path>150        <circle cx="12" cy="19" r="1.5" fill="white" stroke="none"></circle>151      </svg>152      <!-- Battery -->153      <svg class="sb-icon" viewBox="0 0 28 24" fill="none" stroke="white" stroke-width="2">154        <rect x="2" y="6" width="20" height="12" rx="2"></rect>155        <rect x="4" y="8" width="14" height="8" fill="white" stroke="none"></rect>156        <rect x="22" y="10" width="3" height="6" rx="1"></rect>157      </svg>158    </div>159  </div>160 161  <!-- Bottom fade overlay -->162  <div class="fade"></div>163 164  <!-- Text content -->165  <div class="content">166    <h1 class="title">Welcome, ABC!</h1>167    <p class="subtitle">168      You're ready to go. Start uploading activities, compete with friends, build your community and most importantly, have fun!169    </p>170  </div>171 172  <!-- Primary action button -->173  <div class="btn-primary">Done</div>174 175  <!-- Home indicator -->176  <div class="home-indicator"></div>177</div>178</body>179</html>