GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Duolingo Shop Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0e1f23;15    color: #eaf6f7;16  }17 18  /* Top app bar */19  .appbar {20    position: relative;21    height: 140px;22    border-bottom: 1px solid rgba(255,255,255,0.06);23    display: flex;24    align-items: center;25    justify-content: center;26    color: #c9f0ff;27    font-weight: 700;28    font-size: 46px;29    letter-spacing: 0.5px;30  }31  .appbar .left, .appbar .right {32    position: absolute;33    top: 38px;34  }35  .appbar .left { left: 32px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }36  .appbar .right { right: 32px; display: flex; align-items: center; gap: 14px; }37  .gem-count {38    display: inline-flex;39    align-items: center;40    gap: 12px;41    color: #6fd6ff;42    font-weight: 800;43    font-size: 40px;44  }45  .gem-icon {46    width: 48px; height: 48px;47  }48 49  /* Page content behind modal */50  .content {51    padding: 24px 32px;52  }53  .super-card {54    width: 1016px;55    height: 540px;56    border-radius: 38px;57    padding: 36px;58    box-sizing: border-box;59    background: linear-gradient(135deg, #0b3d67, #4a147a);60    position: relative;61  }62  .super-pill {63    display: inline-block;64    padding: 10px 24px;65    border-radius: 22px;66    font-weight: 900;67    font-size: 34px;68    background: linear-gradient(90deg, #61f0a2, #b77cff);69    color: #13304b;70    text-shadow: 0 2px 0 rgba(255,255,255,0.25);71    margin-bottom: 24px;72  }73  .super-title {74    font-weight: 900;75    font-size: 56px;76    line-height: 1.15;77    margin: 12px 0 16px;78    color: #eff7ff;79  }80  .super-sub {81    font-size: 32px;82    color: #dfe9ff;83    opacity: 0.9;84    margin-bottom: 36px;85  }86  .super-cta {87    background: #dde2ea;88    color: #0e2430;89    font-weight: 900;90    font-size: 34px;91    border-radius: 28px;92    padding: 26px;93    width: 88%;94    text-align: center;95    box-shadow: 0 10px 0 rgba(0,0,0,0.25);96  }97  .decor-img {98    position: absolute;99    right: 24px;100    bottom: 24px;101    width: 330px;102    height: 330px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex; align-items: center; justify-content: center;106    color: #757575; font-weight: 700;107    border-radius: 20px;108  }109 110  /* Modal overlay */111  .overlay {112    position: absolute;113    inset: 0;114    background: rgba(0,0,0,0.55);115  }116  .modal {117    width: 960px;118    margin: 860px auto 0;119    background: #13292f;120    border-radius: 44px;121    padding: 60px 56px 48px;122    box-sizing: border-box;123    box-shadow: 0 28px 60px rgba(0,0,0,0.6);124    text-align: center;125  }126  .widget-img {127    width: 520px; height: 300px;128    margin: 0 auto 40px;129    border-radius: 26px;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    display: flex; align-items: center; justify-content: center;133    color: #757575; font-weight: 700;134  }135  .modal-title {136    font-size: 56px;137    font-weight: 900;138    line-height: 1.2;139    margin: 6px 0 22px;140    color: #f5fbff;141  }142  .modal-sub {143    font-size: 34px;144    color: #a6c9d1;145    margin-bottom: 46px;146  }147  .primary-btn {148    background: linear-gradient(180deg, #47c3ff, #2ea9e8);149    color: #062028;150    font-weight: 900;151    font-size: 38px;152    border-radius: 32px;153    padding: 32px 20px;154    width: 100%;155    box-shadow: 0 12px 0 rgba(9,43,57,0.7);156    letter-spacing: 1px;157  }158  .link {159    margin-top: 34px;160    color: #59cfff;161    font-weight: 800;162    font-size: 34px;163  }164</style>165</head>166<body>167<div id="render-target">168  <!-- App bar -->169  <div class="appbar">170    <div class="left">171      <!-- Close (X) icon -->172      <svg class="close-icon" width="48" height="48" viewBox="0 0 24 24" fill="none">173        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#89c6db" stroke-width="2.5" stroke-linecap="round"/>174      </svg>175    </div>176    <div>Shop</div>177    <div class="right">178      <!-- Gem icon and count -->179      <svg class="gem-icon" viewBox="0 0 24 24">180        <path d="M12 2 L18 6 L15 20 L9 20 L6 6 Z" fill="#5cc9ff" stroke="#2aa6d9" stroke-width="1.5"/>181      </svg>182      <div class="gem-count">156</div>183    </div>184  </div>185 186  <!-- Main content area (background page) -->187  <div class="content">188    <div class="super-card">189      <span class="super-pill">SUPER</span>190      <div class="super-title">Features for faster learning</div>191      <div class="super-sub">Get Unlimited Hearts and say goodbye to ads.</div>192      <div class="super-cta">TRY 2 WEEKS FOR FREE</div>193      <div class="decor-img">[IMG: decorative keys/hearts]</div>194    </div>195  </div>196 197  <!-- Modal overlay -->198  <div class="overlay">199    <div class="modal">200      <div class="widget-img">[IMG: Duolingo widget preview]</div>201      <div class="modal-title">Try the Duolingo home screen widget!</div>202      <div class="modal-sub">Duo will cheer you on as you make progress in the app.</div>203      <div class="primary-btn">ADD NOW</div>204      <div class="link">NO THANKS</div>205    </div>206  </div>207</div>208</body>209</html>