GD-ML/AndroidCode
13.4k
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>Lesson Ready Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121b1e; /* dark app background */15 border-radius: 24px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.25);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 28px;23 left: 36px;24 right: 36px;25 height: 72px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #f4f7f8;30 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;31 font-size: 40px;32 letter-spacing: 0.5px;33 }34 .status-left, .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .status-icon {40 width: 44px;41 height: 44px;42 display: inline-flex;43 align-items: center;44 justify-content: center;45 }46 .status-text {47 font-size: 28px;48 color: #d9e4ea;49 opacity: 0.9;50 }51 52 /* Hero image placeholder */53 .hero-img {54 position: absolute;55 top: 560px;56 left: 140px;57 width: 800px;58 height: 700px;59 background: #E0E0E0;60 border: 1px solid #BDBDBD;61 border-radius: 16px;62 display: flex;63 align-items: center;64 justify-content: center;65 color: #757575;66 font-size: 40px;67 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;68 }69 70 /* Headline and subtitle */71 .headline {72 position: absolute;73 top: 1320px;74 left: 80px;75 width: 920px;76 text-align: center;77 color: #ffffff;78 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;79 font-weight: 800;80 font-size: 68px;81 line-height: 1.25;82 }83 .subtitle {84 position: absolute;85 top: 1450px;86 left: 100px;87 width: 880px;88 text-align: center;89 color: #c8d6dd;90 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;91 font-weight: 600;92 font-size: 44px;93 line-height: 1.3;94 opacity: 0.9;95 }96 97 /* Primary button */98 .primary-btn {99 position: absolute;100 top: 1760px;101 left: 90px;102 width: 900px;103 height: 140px;104 border-radius: 70px;105 background: #72c2ff;106 color: #0d1619;107 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;108 font-weight: 900;109 font-size: 48px;110 letter-spacing: 2px;111 text-transform: uppercase;112 display: flex;113 align-items: center;114 justify-content: center;115 box-shadow: 0 22px 0 #4ea5e3;116 }117 118 /* Secondary link */119 .secondary-link {120 position: absolute;121 top: 1950px;122 left: 80px;123 width: 920px;124 text-align: center;125 color: #7fc8fb;126 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;127 font-weight: 800;128 font-size: 44px;129 letter-spacing: 3px;130 text-transform: uppercase;131 }132 133 /* Gesture bar */134 .gesture-bar {135 position: absolute;136 bottom: 56px;137 left: 50%;138 transform: translateX(-50%);139 width: 360px;140 height: 14px;141 background: #e9eef2;142 border-radius: 10px;143 opacity: 0.85;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Top status bar -->151 <div class="status-bar">152 <div class="status-left">153 <div class="time">8:18</div>154 155 <!-- simple square/rec icon -->156 <div class="status-icon">157 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">158 <rect x="5" y="5" width="14" height="14" rx="3" stroke="#ffffff" stroke-width="2"/>159 <circle cx="12" cy="12" r="3" fill="#ffffff"/>160 </svg>161 </div>162 163 <!-- timer icon -->164 <div class="status-icon">165 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">166 <circle cx="12" cy="12" r="9" stroke="#ffffff" stroke-width="2"/>167 <path d="M12 12V7" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>168 <path d="M12 12l4 3" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>169 </svg>170 </div>171 172 <!-- "Calm" text and cloud icon -->173 <div class="status-text">Calm</div>174 <div class="status-icon">175 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">176 <path d="M7 15a4 4 0 1 1 2-7 5 5 0 1 1 8 5h-10z" fill="#ffffff"/>177 </svg>178 </div>179 180 <!-- small dot -->181 <div class="status-icon">182 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">183 <circle cx="12" cy="12" r="3" fill="#ffffff"/>184 </svg>185 </div>186 </div>187 188 <div class="status-right">189 <!-- wifi -->190 <div class="status-icon">191 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">192 <path d="M3 9c5-4 13-4 18 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>193 <path d="M6 12c3-3 9-3 12 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>194 <path d="M9 15c2-2 4-2 6 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>195 <circle cx="12" cy="18" r="1.5" fill="#ffffff"/>196 </svg>197 </div>198 <!-- battery -->199 <div class="status-icon">200 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">201 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#ffffff" stroke-width="2"/>202 <rect x="19" y="10" width="2" height="4" fill="#ffffff"/>203 <rect x="5" y="9" width="12" height="6" fill="#ffffff"/>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Owl illustration placeholder -->210 <div class="hero-img">[IMG: Duolingo Owl holding a lightbulb]</div>211 212 <!-- Headline -->213 <div class="headline">You’re ready for a new lesson!</div>214 215 <!-- Subtitle -->216 <div class="subtitle">But first, read a few tips!</div>217 218 <!-- Primary button -->219 <div class="primary-btn">SHOW TIP</div>220 221 <!-- Secondary link -->222 <div class="secondary-link">SKIP TO LESSON</div>223 224 <!-- Gesture bar -->225 <div class="gesture-bar"></div>226</div>227</body>228</html>