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>Super Note Splash</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 170px;24    background: #F9AE44;25    color: #fff;26  }27  .status-left {28    position: absolute;29    left: 40px;30    top: 50%;31    transform: translateY(-50%);32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .time {37    font-size: 56px;38    font-weight: 600;39    letter-spacing: 1px;40  }41  .notif-dots {42    display: flex;43    gap: 18px;44  }45  .notif-dots span {46    display: inline-block;47    width: 30px;48    height: 30px;49    background: #fff;50    border-radius: 50%;51    opacity: 0.95;52  }53  .center-dot {54    position: absolute;55    left: 520px;56    top: 50%;57    transform: translateY(-55%);58    color: #fff;59    font-size: 70px;60    line-height: 1;61  }62  .status-right {63    position: absolute;64    right: 40px;65    top: 50%;66    transform: translateY(-50%);67    display: flex;68    align-items: center;69    gap: 26px;70  }71  .icon {72    display: inline-flex;73    align-items: center;74    justify-content: center;75  }76 77  /* Center splash content */78  .splash {79    position: absolute;80    top: 800px;81    left: 0;82    width: 100%;83    display: flex;84    flex-direction: column;85    align-items: center;86  }87  .app-icon {88    width: 240px;89    height: 240px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    border-radius: 30px;93    color: #757575;94    display: flex;95    align-items: center;96    justify-content: center;97    box-shadow: 0 10px 18px rgba(0,0,0,0.15);98    font-size: 34px;99    text-align: center;100  }101  .title {102    margin-top: 80px;103    font-size: 96px;104    font-weight: 800;105    color: #F9AE44;106  }107  .subtitle {108    margin-top: 30px;109    font-size: 56px;110    color: rgba(249, 174, 68, 0.95);111  }112 113  /* Bottom info + progress */114  .bottom-area {115    position: absolute;116    left: 0;117    bottom: 210px;118    width: 100%;119    text-align: center;120  }121  .ads-note {122    font-size: 44px;123    color: #222;124  }125  .progress {126    width: 920px;127    height: 16px;128    background: #FDE9C9;129    border-radius: 10px;130    margin: 28px auto 0 auto;131    box-shadow: inset 0 0 0 1px rgba(249, 174, 68, 0.25);132    position: relative;133  }134  .progress .bar {135    position: absolute;136    left: 0;137    top: 0;138    height: 100%;139    width: 68%;140    background: #F9AE44;141    border-radius: 10px;142  }143 144  /* Bottom navigation area */145  .nav-bar {146    position: absolute;147    bottom: 0;148    left: 0;149    width: 1080px;150    height: 160px;151    background: #000;152  }153  .home-indicator {154    position: absolute;155    left: 50%;156    bottom: 46px;157    transform: translateX(-50%);158    width: 250px;159    height: 14px;160    background: #CFCFCF;161    border-radius: 10px;162    opacity: 0.95;163  }164</style>165</head>166<body>167<div id="render-target">168  <!-- Top status bar -->169  <div class="status-bar">170    <div class="status-left">171      <div class="time">5:24</div>172      <div class="notif-dots">173        <span></span><span></span><span></span><span></span>174      </div>175    </div>176    <div class="center-dot">•</div>177    <div class="status-right">178      <!-- WiFi icon -->179      <div class="icon">180        <svg width="58" height="44" viewBox="0 0 58 44" fill="none" xmlns="http://www.w3.org/2000/svg">181          <path d="M5 17Q29 2 53 17" stroke="white" stroke-width="5" stroke-linecap="round"/>182          <path d="M12 22Q29 12 46 22" stroke="white" stroke-width="5" stroke-linecap="round"/>183          <path d="M19 28Q29 22 39 28" stroke="white" stroke-width="5" stroke-linecap="round"/>184          <circle cx="29" cy="35" r="4" fill="white"/>185        </svg>186      </div>187      <!-- Battery with lightning -->188      <div class="icon">189        <svg width="58" height="36" viewBox="0 0 58 36" xmlns="http://www.w3.org/2000/svg">190          <rect x="2" y="4" width="48" height="28" rx="4" ry="4" stroke="white" stroke-width="4" fill="none"/>191          <rect x="50" y="12" width="6" height="12" rx="2" fill="white"/>192          <path d="M26 10 L18 20 H26 L20 30 L38 18 H30 L36 10 Z" fill="white"/>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- Center content -->199  <div class="splash">200    <div class="app-icon">[IMG: Note app icon]</div>201    <div class="title">Super Note</div>202    <div class="subtitle">Organization my life</div>203  </div>204 205  <!-- Bottom message + progress -->206  <div class="bottom-area">207    <div class="ads-note">This action can contain ads</div>208    <div class="progress"><div class="bar"></div></div>209  </div>210 211  <!-- Bottom navigation -->212  <div class="nav-bar">213    <div class="home-indicator"></div>214  </div>215</div>216</body>217</html>