GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Unlocked Gift UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1a1d; /* deep dark background */13    font-family: Arial, Helvetica, sans-serif;14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    color: #e9f0f4;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    opacity: 0.95;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 24px;36    font-weight: 600;37    font-size: 36px;38    letter-spacing: 0.5px;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 18px;44  }45  .dot {46    width: 12px;47    height: 12px;48    background: #cfd8dc;49    border-radius: 50%;50  }51 52  /* Main content */53  .content {54    position: absolute;55    top: 520px;56    left: 0;57    width: 100%;58    display: flex;59    flex-direction: column;60    align-items: center;61    text-align: center;62  }63 64  .image-placeholder {65    width: 460px;66    height: 460px;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    border-radius: 30px;70    display: flex;71    justify-content: center;72    align-items: center;73    color: #757575;74    font-size: 32px;75    box-shadow: 0 20px 40px rgba(0,0,0,0.35);76  }77 78  .title {79    margin-top: 120px;80    font-size: 72px;81    font-weight: 800;82    letter-spacing: 0.5px;83  }84 85  .subtitle {86    margin-top: 36px;87    width: 860px;88    font-size: 40px;89    line-height: 1.6;90    color: #cfe0e8;91  }92 93  /* Button at bottom */94  .cta {95    position: absolute;96    left: 60px;97    bottom: 220px;98    width: 960px;99    height: 140px;100    background: #6EC2FF;101    border-radius: 40px;102    box-shadow: 0 18px 0 rgba(64,142,208,0.55);103    display: flex;104    align-items: center;105    justify-content: center;106  }107  .cta span {108    font-size: 48px;109    font-weight: 800;110    letter-spacing: 2px;111    color: #0b2a3a;112  }113 114  /* Home indicator */115  .home-indicator {116    position: absolute;117    bottom: 100px;118    left: 50%;119    transform: translateX(-50%);120    width: 360px;121    height: 12px;122    border-radius: 12px;123    background: #cfd8dc;124    opacity: 0.85;125  }126 127  /* Simple icons */128  .icon {129    display: inline-block;130  }131  svg { display: block; }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status Bar -->138  <div class="status-bar">139    <div class="status-left">140      <div>6:01</div>141      <div class="status-icons">142        <!-- Notification bell -->143        <span class="icon">144          <svg width="34" height="34" viewBox="0 0 24 24" fill="#e9f0f4">145            <path d="M12 2a3 3 0 0 0-3 3v1.1C6.6 7.1 5 9.3 5 12v4l-1 1v1h16v-1l-1-1v-4c0-2.7-1.6-4.9-4-5.9V5a3 3 0 0 0-3-3zM9 19a3 3 0 0 0 6 0H9z"/>146          </svg>147        </span>148        <!-- Small square icon -->149        <span class="icon">150          <svg width="34" height="34" viewBox="0 0 24 24" fill="#e9f0f4">151            <rect x="5" y="5" width="14" height="14" rx="3"></rect>152          </svg>153        </span>154        <!-- Dot -->155        <div class="dot"></div>156      </div>157    </div>158 159    <div class="status-icons">160      <!-- WiFi -->161      <span class="icon">162        <svg width="42" height="42" viewBox="0 0 24 24" fill="#e9f0f4">163          <path d="M12 18.5l1.5 1.5-1.5 1.5-1.5-1.5 1.5-1.5zM2.1 9.6C5.7 7 10.3 6 15 7.4c1.7.5 3.3 1.2 4.8 2.2l-1.7 2.3c-4.5-3-10.3-3.1-14.9 0L2.1 9.6zM6 13c3.6-2.3 8.4-2.3 12 0l-1.8 2.2c-2.9-1.8-5.5-1.8-8.4 0L6 13z"/>164        </svg>165      </span>166      <!-- Battery -->167      <span class="icon">168        <svg width="58" height="42" viewBox="0 0 28 16" fill="#e9f0f4">169          <rect x="1" y="2" width="22" height="12" rx="2"></rect>170          <rect x="24" y="5" width="3" height="6" rx="1"></rect>171        </svg>172      </span>173      <div style="font-size:32px;font-weight:700;margin-left:8px;">100%</div>174    </div>175  </div>176 177  <!-- Main Content -->178  <div class="content">179    <div class="image-placeholder">[IMG: Ice Crystals / Streak Freeze]</div>180 181    <div class="title">You've unlocked a gift!</div>182 183    <div class="subtitle">184      A Streak Freeze will save your streak, even if you miss a day.185    </div>186  </div>187 188  <!-- CTA Button -->189  <div class="cta">190    <span>EQUIP FOR FREE</span>191  </div>192 193  <!-- Home Indicator -->194  <div class="home-indicator"></div>195</div>196</body>197</html>