GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0f191c;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 26px;25    left: 34px;26    right: 34px;27    height: 60px;28    color: #dfe5e6;29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-size: 42px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    gap: 26px;38    align-items: center;39  }40  .icon {41    width: 48px;42    height: 48px;43  }44 45  /* Back arrow and progress bar */46  .top-controls {47    position: absolute;48    top: 160px;49    left: 34px;50    right: 34px;51    height: 80px;52    display: flex;53    align-items: center;54    gap: 28px;55  }56  .back-btn svg {57    width: 64px;58    height: 64px;59  }60  .progress-track {61    flex: 1;62    height: 48px;63    background: #3a444b;64    border-radius: 24px;65    position: relative;66  }67  .progress-fill {68    position: absolute;69    top: 0;70    left: 0;71    height: 48px;72    width: 48%;73    background: #a6e34e;74    border-radius: 24px;75  }76 77  /* Character + speech bubble */78  .scene {79    position: absolute;80    top: 320px;81    left: 34px;82    right: 34px;83    display: flex;84    align-items: center;85    gap: 36px;86  }87  .avatar {88    width: 220px;89    height: 220px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    border-radius: 28px;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #757575;97    font-weight: 600;98    text-align: center;99  }100  .bubble {101    position: relative;102    flex: 1;103    min-height: 220px;104    color: #dfe6e8;105    border: 4px solid #374148;106    border-radius: 36px;107    padding: 34px 40px;108    font-size: 44px;109    line-height: 64px;110  }111  .bubble-tail {112    position: absolute;113    left: -26px;114    top: 90px;115    width: 34px;116    height: 34px;117    transform: rotate(45deg);118    background: transparent;119    border-left: 4px solid #374148;120    border-bottom: 4px solid #374148;121    border-top: 0;122    border-right: 0;123    border-radius: 0 0 0 16px;124  }125 126  /* Bottom Continue button */127  .bottom-area {128    position: absolute;129    left: 34px;130    right: 34px;131    bottom: 180px;132  }133  .primary-btn {134    width: 1012px; /* 1080 - 68 */135    height: 140px;136    background: #a6e34e;137    border-radius: 56px;138    display: flex;139    align-items: center;140    justify-content: center;141    font-weight: 800;142    font-size: 46px;143    letter-spacing: 4px;144    color: #0f191c;145    box-shadow: 0 18px 0 #7fc03a;146  }147 148  /* Gesture bar */149  .gesture {150    position: absolute;151    bottom: 64px;152    left: 390px; /* centered: (1080-300)/2 */153    width: 300px;154    height: 12px;155    background: #e6e6e6;156    border-radius: 6px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163  <!-- Status bar -->164  <div class="status-bar">165    <div class="time">8:13</div>166    <div class="status-right">167      <!-- Simple placeholder icons -->168      <svg class="icon" viewBox="0 0 48 48">169        <path d="M24 10c8 0 14 6 14 14" stroke="#cfd7da" stroke-width="4" fill="none" stroke-linecap="round"/>170        <path d="M24 18c4 0 8 4 8 8" stroke="#cfd7da" stroke-width="4" fill="none" stroke-linecap="round"/>171        <circle cx="24" cy="32" r="3" fill="#cfd7da"/>172      </svg>173      <svg class="icon" viewBox="0 0 48 48">174        <rect x="6" y="12" width="32" height="24" rx="4" ry="4" fill="none" stroke="#cfd7da" stroke-width="4"/>175        <rect x="10" y="16" width="24" height="16" rx="2" ry="2" fill="#cfd7da"/>176        <rect x="40" y="18" width="4" height="12" rx="1" ry="1" fill="#cfd7da"/>177      </svg>178    </div>179  </div>180 181  <!-- Back button and progress -->182  <div class="top-controls">183    <div class="back-btn">184      <svg viewBox="0 0 48 48">185        <path d="M34 8 L14 24 L34 40" stroke="#9fb0b6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186      </svg>187    </div>188    <div class="progress-track">189      <div class="progress-fill"></div>190    </div>191  </div>192 193  <!-- Scene with avatar and bubble -->194  <div class="scene">195    <div class="avatar">[IMG: Duolingo Owl]</div>196    <div class="bubble">197      <div class="bubble-tail"></div>198      Best thing to pack is<br>the local language!199    </div>200  </div>201 202  <!-- Bottom Continue button -->203  <div class="bottom-area">204    <div class="primary-btn">CONTINUE</div>205  </div>206 207  <!-- Gesture bar -->208  <div class="gesture"></div>209</div>210</body>211</html>