GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Shop Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0f1f1f;15    color: #e9f2f2;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Top bar */20  .topbar {21    position: relative;22    height: 180px;23    padding: 40px 48px 0 48px; /* room for status area */24    box-sizing: border-box;25    border-bottom: 1px solid rgba(255,255,255,0.06);26  }27  .topbar-inner {28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding-top: 28px;32  }33  .x-btn {34    width: 72px; height: 72px;35    display: flex; align-items: center; justify-content: center;36    opacity: 0.6;37  }38  .top-title {39    position: absolute;40    left: 0; right: 0;41    text-align: center;42    top: 90px;43    font-size: 48px;44    font-weight: 800;45    letter-spacing: 0.5px;46    color: rgba(255,255,255,0.55);47  }48  .gem {49    display: flex; align-items: center; gap: 18px;50  }51  .gem-count {52    font-size: 44px;53    font-weight: 800;54    color: #48c6ff;55  }56  .gem svg {57    width: 58px; height: 58px;58  }59 60  /* Promo card */61  .promo {62    margin: 36px 48px 28px 48px;63    padding: 44px;64    height: 560px;65    box-sizing: border-box;66    border-radius: 36px;67    background: linear-gradient(135deg, #0f4164 10%, #2b2b90 55%, #6b2c8a 100%);68    position: relative;69  }70  .tag {71    display: inline-block;72    padding: 10px 24px;73    border-radius: 16px;74    font-weight: 900;75    letter-spacing: 2px;76    font-size: 36px;77    color: white;78    background: linear-gradient(90deg,#3cffc2,#9b8cff,#ff71d6);79    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);80  }81  .promo h1 {82    margin: 28px 0 14px 0;83    font-size: 76px;84    line-height: 1.06;85    font-weight: 900;86  }87  .promo p {88    margin: 0 0 34px 0;89    font-size: 38px;90    color: rgba(255,255,255,0.85);91  }92  .promo-cta {93    display: inline-block;94    background: #ffffff;95    color: #0b1c24;96    padding: 28px 40px;97    border-radius: 32px;98    font-weight: 900;99    letter-spacing: 2px;100    font-size: 40px;101    box-shadow: 0 10px 0 rgba(0,0,0,0.25);102  }103  .promo-art {104    position: absolute;105    right: 28px;106    top: 40px;107    width: 320px;108    height: 320px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    border-radius: 28px;112    display: flex; align-items: center; justify-content: center;113    color: #757575;114    font-weight: 700;115  }116 117  /* Section title */118  .section-title {119    margin: 32px 48px 18px 48px;120    font-size: 64px;121    font-weight: 900;122  }123 124  /* Offer cards */125  .offer {126    margin: 20px 48px;127    padding: 36px;128    border-radius: 32px;129    border: 2px solid rgba(255,255,255,0.08);130    background: rgba(255,255,255,0.03);131    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);132  }133  .offer-row {134    display: flex;135    gap: 32px;136  }137  .thumb {138    width: 180px; height: 180px;139    border-radius: 28px;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex; align-items: center; justify-content: center;143    color: #757575; font-weight: 700;144  }145  .offer-content h3 {146    margin: 6px 0 8px 0;147    font-size: 54px; font-weight: 900;148  }149  .offer-content p {150    margin: 0 0 24px 0;151    font-size: 38px;152    color: rgba(255,255,255,0.8);153  }154  .cta-link {155    font-size: 42px;156    font-weight: 900;157    color: #41b6ff;158  }159  .cta-link.disabled {160    color: rgba(255,255,255,0.35);161  }162  .accent {163    color: #ffb64b;164    font-weight: 900;165  }166 167  /* Streak header */168  .streak {169    margin: 42px 48px;170    font-size: 64px;171    font-weight: 900;172  }173 174  /* Bottom home indicator */175  .home-indicator {176    position: absolute;177    left: 50%;178    transform: translateX(-50%);179    bottom: 42px;180    width: 320px;181    height: 10px;182    background: rgba(255,255,255,0.35);183    border-radius: 6px;184  }185 186  /* Helpers */187  .muted { color: rgba(255,255,255,0.6); }188 189  /* Simple icons */190  .icon-x line { stroke: #9fb3b6; stroke-width: 8; stroke-linecap: round; }191  .icon-gem polygon { fill: #2dd2ff; }192</style>193</head>194<body>195<div id="render-target">196 197  <div class="topbar">198    <div class="topbar-inner">199      <div class="x-btn">200        <svg class="icon-x" viewBox="0 0 24 24">201          <line x1="5" y1="5" x2="19" y2="19"></line>202          <line x1="19" y1="5" x2="5" y2="19"></line>203        </svg>204      </div>205 206      <div class="gem">207        <svg class="icon-gem" viewBox="0 0 24 24">208          <polygon points="12,2 20,7 20,17 12,22 4,17 4,7"></polygon>209        </svg>210        <div class="gem-count">156</div>211      </div>212    </div>213    <div class="top-title">Shop</div>214  </div>215 216  <div class="promo">217    <div class="tag">SUPER</div>218    <h1>Features for faster learning</h1>219    <p>Get Unlimited Hearts and say goodbye to ads.</p>220    <div class="promo-cta">TRY 2 WEEKS FOR FREE</div>221    <div class="promo-art">[IMG: Promo Art]</div>222  </div>223 224  <div class="section-title">Special Offers</div>225 226  <div class="offer">227    <div class="offer-row">228      <div class="thumb">[IMG: Widget]</div>229      <div class="offer-content">230        <h3>Widget Reward</h3>231        <p>You earned an XP Boost for installing the widget.</p>232        <div class="cta-link">CLAIM REWARD</div>233      </div>234    </div>235  </div>236 237  <div class="offer">238    <div class="offer-row">239      <div class="thumb">[IMG: Chest]</div>240      <div class="offer-content">241        <h3>Free Chest</h3>242        <p>Next free chest will be available in <span class="accent">31 minutes</span></p>243        <div class="cta-link disabled">CLAIM CHEST</div>244      </div>245    </div>246  </div>247 248  <div class="streak">Streak</div>249 250  <div class="home-indicator"></div>251</div>252</body>253</html>