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>Duolingo Intro Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1d21;15    border-radius: 34px;16    box-shadow: 0 18px 40px rgba(0,0,0,0.45);17    color: #e6f2f1;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0; left: 0; right: 0;24    height: 120px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #cfe6dc;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex; align-items: center; gap: 28px;35  }36  .status-icons .icon { width: 36px; height: 36px; opacity: 0.85; }37  .battery {38    display: flex; align-items: center; gap: 10px; color: #cfe6dc; font-weight: 700;39  }40  .battery svg { width: 44px; height: 28px; }41 42  /* Back button */43  .back-btn {44    position: absolute;45    top: 220px; left: 40px;46    width: 72px; height: 72px;47    background: none; border: none; padding: 0; cursor: pointer;48  }49  .back-btn svg { width: 72px; height: 72px; }50  .back-btn svg path { stroke: #a8c3bf; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }51 52  /* Speech bubble */53  .bubble {54    position: absolute;55    width: 780px;56    left: 50%;57    transform: translateX(-50%);58    top: 720px;59    background: #162a2e;60    border: 4px solid #3b4e52;61    border-radius: 36px;62    padding: 40px 44px;63    color: #eaf3f1;64    font-size: 44px;65    line-height: 1.35;66    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);67  }68  /* Tail with border */69  .bubble::before {70    content: "";71    position: absolute;72    left: 50%;73    transform: translateX(-50%);74    bottom: -40px;75    width: 0; height: 0;76    border-left: 26px solid transparent;77    border-right: 26px solid transparent;78    border-top: 40px solid #3b4e52; /* border color */79    z-index: 0;80    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));81  }82  .bubble::after {83    content: "";84    position: absolute;85    left: 50%;86    transform: translateX(-50%);87    bottom: -34px;88    width: 0; height: 0;89    border-left: 22px solid transparent;90    border-right: 22px solid transparent;91    border-top: 34px solid #162a2e; /* fill color */92    z-index: 1;93  }94 95  /* Mascot block */96  .mascot {97    position: absolute;98    left: 50%;99    transform: translateX(-50%);100    top: 980px;101    width: 380px; height: 360px;102  }103  .mascot .shadow {104    position: absolute; bottom: 0; left: 50%;105    transform: translateX(-50%);106    width: 320px; height: 130px;107    background: #1b2f33;108    border-radius: 50%;109    opacity: 0.9;110  }111  .mascot-img {112    position: absolute; top: 0; left: 50%;113    transform: translateX(-50%);114    width: 320px; height: 260px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 22px;118    display: flex; align-items: center; justify-content: center;119    color: #757575; font-weight: 700;120    text-align: center; padding: 12px;121  }122 123  /* Continue button with offset shadow block */124  .cta-wrap {125    position: absolute;126    left: 50%;127    transform: translateX(-50%);128    bottom: 210px;129    width: 960px; height: 156px;130  }131  .cta-shadow {132    position: absolute; left: 30px; top: 22px;133    width: 960px; height: 156px;134    background: #4fa508;135    border-radius: 34px;136    opacity: 1;137  }138  .continue-btn {139    position: absolute; left: 0; top: 0;140    width: 960px; height: 156px;141    background: #8ee21a;142    border-radius: 34px;143    display: flex; align-items: center; justify-content: center;144    color: #0c221f;145    font-size: 44px; font-weight: 900; letter-spacing: 3px;146    text-transform: uppercase;147  }148 149  /* Home indicator bar */150  .home-indicator {151    position: absolute;152    bottom: 90px; left: 50%;153    transform: translateX(-50%);154    width: 320px; height: 12px;155    background: #e7e7e7;156    border-radius: 10px;157    opacity: 0.85;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <div class="status-bar">165    <div class="time">6:11</div>166    <div class="status-icons">167      <!-- Ring icon -->168      <svg class="icon" viewBox="0 0 24 24">169        <circle cx="12" cy="12" r="9" stroke="#cfe6dc" stroke-width="2" fill="none"></circle>170        <circle cx="12" cy="12" r="3" fill="#cfe6dc"></circle>171      </svg>172      <!-- Wi-Fi icon -->173      <svg class="icon" viewBox="0 0 24 24">174        <path d="M2 8c5-5 15-5 20 0" stroke="#cfe6dc" stroke-width="2" fill="none" stroke-linecap="round"/>175        <path d="M6 12c3-3 9-3 12 0" stroke="#cfe6dc" stroke-width="2" fill="none" stroke-linecap="round"/>176        <circle cx="12" cy="16" r="2" fill="#cfe6dc"/>177      </svg>178      <!-- Battery + percentage -->179      <div class="battery">180        <svg viewBox="0 0 48 24">181          <rect x="1" y="3" width="40" height="18" rx="4" ry="4" stroke="#cfe6dc" stroke-width="2" fill="none"/>182          <rect x="42" y="8" width="4" height="8" rx="2" fill="#cfe6dc"/>183          <rect x="4" y="6" width="28" height="12" rx="2" fill="#cfe6dc"/>184        </svg>185        <span>94%</span>186      </div>187    </div>188  </div>189 190  <button class="back-btn" aria-label="Back">191    <svg viewBox="0 0 24 24">192      <path d="M15 5 L8 12 L15 19" />193    </svg>194  </button>195 196  <div class="bubble">197    ...so Duolingo is designed to<br>be fun like a game!198  </div>199 200  <div class="mascot">201    <div class="mascot-img">[IMG: Duolingo Owl Mascot]</div>202    <div class="shadow"></div>203  </div>204 205  <div class="cta-wrap">206    <div class="cta-shadow"></div>207    <div class="continue-btn">CONTINUE</div>208  </div>209 210  <div class="home-indicator"></div>211 212</div>213</body>214</html>