GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Premium Modal UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #0a2e73 0%, #2b3f9d 35%, #5a36b6 70%, #6a2bd1 100%);13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 20px;20 left: 24px;21 right: 24px;22 height: 60px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 letter-spacing: 0.5px;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { display: flex; align-items: center; gap: 22px; }31 .status-time { font-size: 36px; }32 33 /* Simple icons */34 .icon { display: inline-flex; align-items: center; justify-content: center; }35 .wifi svg, .battery svg, .cloud svg { width: 36px; height: 36px; }36 37 /* Page background faint cards (context) */38 .top-title {39 position: absolute;40 top: 170px;41 left: 40px;42 font-size: 58px;43 font-weight: 700;44 opacity: 0.5;45 }46 .pill-row {47 position: absolute;48 top: 270px;49 left: 36px;50 right: 36px;51 display: flex;52 gap: 30px;53 opacity: 0.25;54 }55 .pill {56 flex: 1;57 background: rgba(255,255,255,0.15);58 padding: 28px 32px;59 border-radius: 28px;60 backdrop-filter: blur(2px);61 }62 63 /* Close icon on background */64 .close-bg {65 position: absolute;66 top: 118px;67 left: 28px;68 width: 72px;69 height: 72px;70 display: flex; align-items: center; justify-content: center;71 opacity: 0.6;72 }73 .close-bg svg { width: 40px; height: 40px; }74 75 /* Modal overlay */76 .modal {77 position: absolute;78 left: 40px;79 right: 40px;80 top: 410px;81 padding: 48px 36px 60px;82 border-radius: 26px;83 background: linear-gradient(180deg, rgba(74,123,255,0.95) 0%, rgba(92,95,214,0.95) 50%, rgba(121,64,212,0.95) 100%);84 box-shadow: 0 40px 60px rgba(0,0,0,0.35);85 }86 87 .crown {88 position: absolute;89 top: -48px;90 left: 50%;91 transform: translateX(-50%);92 width: 120px; height: 90px;93 }94 95 .modal h1 {96 margin: 14px 0 34px;97 text-align: center;98 font-size: 64px;99 font-weight: 800;100 letter-spacing: 0.5px;101 }102 103 .feature-box {104 margin: 22px auto 36px;105 width: calc(100% - 80px);106 padding: 40px 48px;107 border-radius: 26px;108 background: linear-gradient(180deg, rgba(113,146,255,0.35), rgba(77,47,200,0.35));109 border: 1px solid rgba(255,255,255,0.25);110 }111 112 .feature {113 display: flex;114 align-items: center;115 gap: 24px;116 padding: 22px 0;117 font-size: 48px;118 font-weight: 700;119 }120 .check {121 width: 56px; height: 56px;122 display: inline-flex; align-items: center; justify-content: center;123 background: transparent;124 }125 .check svg { width: 56px; height: 56px; }126 127 .dots {128 display: flex; gap: 16px; justify-content: center; margin-top: 16px; margin-bottom: 22px;129 }130 .dot {131 width: 18px; height: 18px; border-radius: 50%;132 background: rgba(255,255,255,0.35);133 }134 .dot.active { background: #ffffff; }135 136 /* Plans */137 .plans { display: flex; flex-direction: column; gap: 28px; padding: 0 20px; }138 .plan {139 background: linear-gradient(180deg, #46c55f 0%, #27b14e 100%);140 border-radius: 70px;141 padding: 34px 40px;142 display: flex;143 align-items: center;144 justify-content: space-between;145 color: #0b3b15;146 box-shadow: 0 14px 28px rgba(0,0,0,0.25);147 }148 .plan .left { color: #fff; }149 .months { font-size: 46px; font-weight: 800; }150 .price { font-size: 42px; font-weight: 800; color: #ffe69f; margin-top: 6px; }151 .per { font-size: 32px; color: #ffe69f; margin-left: 8px; }152 .right { text-align: right; color: #fff; }153 .lang { font-size: 40px; font-weight: 800; }154 .lang-sub { font-size: 38px; }155 156 .plan.small { padding: 26px 40px; border-radius: 70px; }157 .popular {158 position: relative;159 padding: 46px 40px 60px;160 }161 162 .popular .label {163 position: absolute;164 top: -26px; left: 50%; transform: translateX(-50%);165 background: #76e08e;166 color: #0e3d19;167 padding: 18px 38px;168 border-radius: 40px;169 font-size: 40px;170 font-weight: 800;171 border: 3px solid rgba(255,255,255,0.4);172 }173 174 .ribbon {175 position: absolute;176 right: 16px;177 top: 18px;178 background: #ff8a3d;179 color: #fff;180 padding: 20px 32px;181 border-radius: 40px 40px 40px 40px;182 font-size: 40px;183 font-weight: 900;184 transform: rotate(-12deg);185 box-shadow: 0 10px 18px rgba(0,0,0,0.25);186 }187 188 .only-today {189 position: absolute;190 left: 50px;191 bottom: -34px;192 background: #ff7a2f;193 color: #fff;194 padding: 20px 28px;195 border-radius: 20px;196 font-size: 36px;197 font-weight: 800;198 box-shadow: 0 10px 18px rgba(0,0,0,0.25);199 }200 .only-today .time { font-weight: 700; margin-top: 6px; font-size: 34px; display: block; }201 202 .legal {203 margin-top: 90px;204 padding: 0 40px;205 font-size: 36px;206 color: rgba(255,255,255,0.9);207 }208 209 /* Faint right-side content image placeholder */210 .side-content {211 position: absolute;212 right: 36px;213 top: 860px;214 width: 140px;215 height: 440px;216 background: rgba(255,255,255,0.12);217 border-radius: 18px;218 border: 1px solid rgba(255,255,255,0.2);219 display: flex;220 align-items: center;221 justify-content: center;222 opacity: 0.4;223 }224 .side-content span { font-size: 28px; text-align: center; color: rgba(255,255,255,0.8); }225 226 /* Bottom start button behind modal (blurred context) */227 .start-btn {228 position: absolute;229 bottom: 160px;230 right: 120px;231 width: 300px; height: 120px;232 background: rgba(255,127,80,0.8);233 border-radius: 60px;234 display: flex; align-items: center; justify-content: center;235 font-size: 52px; font-weight: 800;236 opacity: 0.4;237 }238</style>239</head>240<body>241<div id="render-target">242 243 <!-- Status Bar -->244 <div class="status-bar">245 <div class="status-left">246 <div class="status-time">1:32</div>247 </div>248 <div class="status-right">249 <div class="icon cloud">250 <svg viewBox="0 0 24 24">251 <path d="M6 14a5 5 0 019.5-2.5A4 4 0 1116 18H8a4 4 0 01-2-4z" fill="#ffffff" opacity="0.9"></path>252 </svg>253 </div>254 <div class="icon wifi">255 <svg viewBox="0 0 24 24">256 <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>257 <path d="M5 11c3.8-3.8 10.2-3.8 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>258 <path d="M8 14c2.6-2.6 6.4-2.6 9 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>259 <circle cx="12" cy="18" r="1.8" fill="#fff"/>260 </svg>261 </div>262 <div class="icon battery">263 <svg viewBox="0 0 32 18">264 <rect x="1" y="3" width="26" height="12" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>265 <rect x="4" y="6" width="20" height="6" fill="#fff"/>266 <rect x="27" y="6" width="4" height="6" rx="2" fill="#fff"/>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Background contextual elements -->273 <div class="top-title">Daily Lesson</div>274 <div class="pill-row">275 <div class="pill">Weekly Quiz</div>276 <div class="pill">Monthly Challenge</div>277 </div>278 <div class="close-bg">279 <svg viewBox="0 0 24 24">280 <path d="M5 5L19 19M19 5L5 19" stroke="#fff" stroke-width="3" stroke-linecap="round"/>281 </svg>282 </div>283 284 <!-- Side content placeholder -->285 <div class="side-content"><span>[IMG: Lesson thumbnails]</span></div>286 287 <!-- Modal -->288 <div class="modal">289 <!-- Crown icon -->290 <div class="crown">291 <svg viewBox="0 0 120 80">292 <path d="M10 60 L25 30 L45 55 L60 20 L75 55 L95 30 L110 60 L10 60 Z" fill="#ffd44d" stroke="#e5a800" stroke-width="4"/>293 <circle cx="25" cy="28" r="6" fill="#7e41ff"/>294 <circle cx="60" cy="18" r="6" fill="#7e41ff"/>295 <circle cx="95" cy="28" r="6" fill="#7e41ff"/>296 </svg>297 </div>298 299 <h1>Learn faster with Premium</h1>300 301 <div class="feature-box">302 <div class="feature">303 <div class="check">304 <svg viewBox="0 0 24 24">305 <circle cx="12" cy="12" r="10" fill="none" stroke="#ffd24b" stroke-width="3"/>306 <path d="M6 12l4 4 8-8" stroke="#ffd24b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 </div>309 <div>Unlock all content</div>310 </div>311 <div class="feature">312 <div class="check">313 <svg viewBox="0 0 24 24">314 <circle cx="12" cy="12" r="10" fill="none" stroke="#ffd24b" stroke-width="3"/>315 <path d="M6 12l4 4 8-8" stroke="#ffd24b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>316 </svg>317 </div>318 <div>Learn faster</div>319 </div>320 <div class="feature">321 <div class="check">322 <svg viewBox="0 0 24 24">323 <circle cx="12" cy="12" r="10" fill="none" stroke="#ffd24b" stroke-width="3"/>324 <path d="M6 12l4 4 8-8" stroke="#ffd24b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>325 </svg>326 </div>327 <div>Is fun and easy</div>328 </div>329 </div>330 331 <div class="dots">332 <div class="dot active"></div>333 <div class="dot"></div>334 <div class="dot"></div>335 </div>336 337 <div class="plans">338 <!-- 1 month -->339 <div class="plan small">340 <div class="left">341 <div class="months">1 month</div>342 <div class="price">₹199.00 <span class="per">/month</span></div>343 </div>344 <div class="right">345 <div class="lang">1 language</div>346 <div class="lang-sub">Russian</div>347 </div>348 </div>349 350 <!-- 12 months single language -->351 <div class="plan small">352 <div class="left">353 <div class="months">12 months</div>354 <div class="price">₹49.99 <span class="per">/month</span></div>355 </div>356 <div class="right">357 <div class="lang">1 language</div>358 <div class="lang-sub">Russian</div>359 </div>360 </div>361 362 <!-- Popular 12 months all languages -->363 <div class="plan popular">364 <div class="label">Most popular</div>365 <div class="ribbon">-90%</div>366 <div class="left">367 <div class="months">12 months</div>368 <div class="price">₹49.99 <span class="per">/month</span></div>369 </div>370 <div class="right">371 <div class="lang">33</div>372 <div class="lang-sub">languages</div>373 </div>374 375 <div class="only-today">376 Only today377 <span class="time">15:57:07</span>378 </div>379 </div>380 </div>381 382 <div class="legal">Mondly subscriptions automatically renew.</div>383 </div>384 385 <div class="start-btn">Start</div>386 387</div>388</body>389</html>