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>Mondly Mockup</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", "Segoe UI", Arial, sans-serif; color: #fff; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #4a85d8 0%, #6b5cd3 45%, #7a3fc2 100%);12 border-radius: 36px;13 box-shadow: 0 30px 80px rgba(0,0,0,0.25);14 }15 16 /* Decorative distant mountains */17 .mountains {18 position: absolute; top: 240px; left: 0; right: 0; height: 300px;19 background: linear-gradient(180deg, rgba(180,210,255,0.28), rgba(180,210,255,0.0));20 clip-path: polygon(0% 70%, 10% 50%, 20% 65%, 32% 52%, 42% 68%, 53% 55%, 65% 72%, 78% 52%, 90% 66%, 100% 54%, 100% 100%, 0% 100%);21 }22 23 /* Status bar */24 .status {25 position: absolute; top: 28px; left: 32px; right: 32px; height: 48px;26 display: flex; align-items: center; justify-content: space-between;27 opacity: 0.95;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-left .time { font-weight: 700; font-size: 32px; letter-spacing: 0.5px; }31 .status-icons { display: flex; align-items: center; gap: 16px; }32 .status-right { display: flex; align-items: center; gap: 16px; }33 34 /* Brand area */35 .brand {36 position: absolute; top: 110px; left: 0; right: 0; text-align: center;37 }38 .brand .title { font-weight: 700; font-size: 92px; letter-spacing: 2px; }39 .brand .subtitle { margin-top: -10px; font-size: 28px; opacity: 0.85; }40 41 /* Top profile shortcut */42 .profile-chip {43 position: absolute; top: 118px; left: 36px; width: 120px; height: 120px;44 background: rgba(255,255,255,0.15); border-radius: 60px; display: flex; align-items: center; justify-content: center;45 }46 .flag-badge {47 position: absolute; bottom: -6px; right: -6px; width: 56px; height: 36px; border-radius: 10px;48 border: 2px solid rgba(255,255,255,0.9); overflow: hidden;49 display: flex;50 }51 .flag-badge span { flex: 1; }52 .flag-badge .saff { background: #FF9933; }53 .flag-badge .white { background: #ffffff; }54 .flag-badge .green { background: #128807; }55 .flag-badge .label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #1a1a1a; font-size: 14px; font-weight: 700; opacity: 0.6; }56 57 /* Crown / graduation shortcut */58 .quick-icons { position: absolute; top: 138px; right: 36px; display: flex; align-items: center; gap: 26px; }59 .quick-icon { width: 76px; height: 76px; border-radius: 38px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }60 61 /* Main map pins */62 .pin {63 position: absolute; width: 360px; height: 360px; border-radius: 50%;64 display: flex; align-items: center; justify-content: center;65 }66 .pin.left { top: 520px; left: 120px; box-shadow: 0 18px 30px rgba(0,0,0,0.25); }67 .pin.right { top: 520px; right: 120px; }68 69 .ring.orange { box-shadow: inset 0 0 0 18px #ff9e5f; border: 18px solid #ffa56a; }70 .ring.purple { box-shadow: inset 0 0 0 18px #8136e6; border: 18px solid #8136e6; }71 72 .pin-content {73 width: 86%; height: 86%; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12);74 }75 76 .img-placeholder {77 width: 92%; height: 92%; background: #E0E0E0; border: 1px solid #BDBDBD;78 color: #757575; font-size: 32px; display: flex; align-items: center; justify-content: center; border-radius: 22px;79 }80 81 .calendar-card {82 width: 80%; height: 80%; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 26px;83 display: flex; align-items: center; justify-content: center; flex-direction: column; color: #757575; font-size: 30px;84 }85 .timer-pill {86 position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);87 background: #6f36e1; padding: 14px 24px; border-radius: 28px; font-weight: 700; font-size: 32px;88 display: flex; align-items: center; gap: 12px;89 }90 .pill-check {91 width: 30px; height: 30px; border-radius: 15px; background: #2ecc71; display: flex; align-items: center; justify-content: center;92 }93 94 .pin-label {95 position: absolute; top: 860px; left: 160px; font-size: 48px; font-weight: 700; letter-spacing: 0.5px;96 }97 .pin-label.right { left: auto; right: 140px; }98 99 /* Hand pointer overlay */100 .hand {101 position: absolute; top: 740px; left: 320px; width: 230px; height: 230px; opacity: 0.85;102 }103 104 /* Secondary circles */105 .circle-card {106 position: absolute; width: 300px; height: 300px; border-radius: 50%;107 background: #297c8b; border: 16px solid #f8a94f; box-shadow: 0 14px 26px rgba(0,0,0,0.25);108 display: flex; align-items: center; justify-content: center;109 }110 .circle-card .img-placeholder { width: 84%; height: 84%; border-radius: 50%; }111 .circle-card.left { top: 1080px; left: 140px; }112 .circle-card.right { top: 1080px; left: 600px; background: #255b78; }113 .new-badge {114 position: absolute; top: -10px; right: -10px; background: #d73f3f; color: #fff; font-weight: 800; font-size: 28px;115 padding: 6px 14px; border-radius: 12px;116 }117 .circle-caption {118 position: absolute; top: 1400px; left: 150px; font-size: 36px; opacity: 0.9;119 }120 121 /* Promo card */122 .promo {123 position: absolute; left: 40px; right: 40px; bottom: 520px;124 background: linear-gradient(135deg, #3e8ce6, #6e3fd5); border-radius: 28px;125 padding: 36px 38px 44px; box-shadow: 0 20px 50px rgba(0,0,0,0.35);126 }127 .promo .title { font-size: 44px; font-weight: 900; letter-spacing: 1px; }128 .promo .text { margin-top: 14px; font-size: 34px; line-height: 1.35; }129 .promo .strike { text-decoration: line-through; opacity: 0.7; }130 .promo .cta {131 margin-top: 28px; width: 320px; height: 80px; border-radius: 40px; background: #38d66b;132 display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 38px; color: #153819;133 }134 .promo .close {135 position: absolute; top: 22px; right: 24px; width: 58px; height: 58px; border-radius: 16px;136 background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;137 }138 .carousel {139 position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);140 display: flex; gap: 12px;141 }142 .dot { width: 16px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.6); }143 .dot.active { background: #fff; }144 .promo-arrow {145 position: absolute; right: 30px; bottom: -18px; width: 56px; height: 56px; border-radius: 28px;146 background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;147 }148 149 /* Bottom navigation */150 .bottom-nav {151 position: absolute; left: 28px; right: 28px; bottom: 210px;152 height: 200px; background: rgba(60,20,120,0.55); border: 2px solid rgba(255,255,255,0.3);153 border-radius: 34px; backdrop-filter: blur(2px);154 display: flex; align-items: center; justify-content: space-around;155 padding: 24px 18px;156 }157 .nav-item { text-align: center; color: #d9c8ff; }158 .nav-item.active { color: #9ef0ff; }159 .nav-icon { width: 72px; height: 72px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }160 .nav-label { font-size: 30px; font-weight: 700; }161 .badge {162 position: absolute; top: 22px; right: 26px; min-width: 32px; height: 32px; padding: 0 8px;163 background: #ff4a4a; color: #fff; border-radius: 16px; font-size: 22px; font-weight: 800;164 display: flex; align-items: center; justify-content: center;165 }166 167 /* Home indicator */168 .home-indicator {169 position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);170 width: 280px; height: 12px; background: rgba(255,255,255,0.7); border-radius: 6px;171 }172</style>173</head>174<body>175<div id="render-target">176 177 <div class="mountains"></div>178 179 <!-- Status bar -->180 <div class="status">181 <div class="status-left">182 <div class="time">1:43</div>183 <div class="status-icons">184 <!-- Mail -->185 <svg width="40" height="40" viewBox="0 0 24 24">186 <path fill="#ffffff" d="M3 5h18v14H3zM4 6l8 6 8-6" opacity="0.9"></path>187 </svg>188 <!-- Download -->189 <svg width="40" height="40" viewBox="0 0 24 24">190 <path fill="#ffffff" d="M12 3v10l4-4H8l4 4zM5 19h14v2H5z" opacity="0.9"></path>191 </svg>192 <!-- Play -->193 <svg width="40" height="40" viewBox="0 0 24 24">194 <path fill="#ffffff" d="M8 5l12 7-12 7z" opacity="0.9"></path>195 </svg>196 </div>197 </div>198 <div class="status-right">199 <!-- WiFi -->200 <svg width="40" height="40" viewBox="0 0 24 24">201 <path fill="#ffffff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zM6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zM10 16l2 2 2-2-2-2-2 2z"></path>202 </svg>203 <!-- Battery -->204 <svg width="40" height="40" viewBox="0 0 24 24">205 <path fill="#ffffff" d="M2 8h16v8H2zM20 10h2v4h-2z"></path>206 </svg>207 </div>208 </div>209 210 <!-- Brand -->211 <div class="brand">212 <div class="title">mondly</div>213 <div class="subtitle">by Pearson</div>214 </div>215 216 <!-- Top profile chip with flag -->217 <div class="profile-chip">218 <svg width="72" height="72" viewBox="0 0 24 24">219 <circle cx="12" cy="8" r="4" fill="#ffffff" opacity="0.85"></circle>220 <path d="M4 22c1-4 5-6 8-6s7 2 8 6" fill="#ffffff" opacity="0.85"></path>221 </svg>222 <div class="flag-badge">223 <span class="saff"></span><span class="white"></span><span class="green"></span>224 <div class="label">IN</div>225 </div>226 </div>227 228 <!-- Quick icons -->229 <div class="quick-icons">230 <div class="quick-icon">231 <!-- Crown -->232 <svg width="50" height="50" viewBox="0 0 24 24">233 <path fill="#ffd75e" d="M2 18l2-9 5 4 5-6 6 7 2-6 0 10H2z"></path>234 </svg>235 </div>236 <div class="quick-icon">237 <!-- Graduation cap -->238 <svg width="50" height="50" viewBox="0 0 24 24">239 <path fill="#ffffff" d="M12 3l10 5-10 5L2 8l10-5zM4 13v3c3 2 13 2 16 0v-3" opacity="0.95"></path>240 </svg>241 </div>242 </div>243 244 <!-- Left main pin -->245 <div class="pin left ring orange">246 <div class="pin-content">247 <div class="img-placeholder">[IMG: User Avatar]</div>248 </div>249 </div>250 <div class="pin-label">Hello</div>251 252 <!-- Hand overlay -->253 <svg class="hand" viewBox="0 0 200 200">254 <path fill="#ffffff" opacity="0.9" d="M40 160c-8-20 10-40 24-30l18-38c3-6 10-8 16-5s8 10 5 16l-8 18 14-22c4-6 12-8 18-4s8 12 4 18l-14 22 18-18c6-6 14-6 20 0s6 14 0 20l-36 36c-10 10-40 20-59 7z"></path>255 <path fill="#ffffff" d="M26 168c10 12 30 16 48 10" opacity="0.7"></path>256 </svg>257 258 <!-- Right main pin -->259 <div class="pin right ring purple">260 <div class="pin-content" style="background: #f7ba56;">261 <div class="calendar-card">262 <div style="font-weight:800;">T F S</div>263 <div style="margin-top:8px; display:flex; gap:8px;">264 <div style="width:40px;height:40px;border-radius:20px;background:#2ecc71;display:flex;align-items:center;justify-content:center;color:#fff;">1</div>265 <div style="width:40px;height:40px;border-radius:20px;background:#2ecc71;display:flex;align-items:center;justify-content:center;color:#fff;">2</div>266 <div style="width:40px;height:40px;border-radius:20px;background:#2ecc71;display:flex;align-items:center;justify-content:center;color:#fff;">3</div>267 </div>268 </div>269 </div>270 <div class="timer-pill">271 10:20:34272 <div class="pill-check">273 <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#fff" d="M4 13l4 4 12-12"></path></svg>274 </div>275 </div>276 </div>277 <div class="pin-label right">Daily Lesson</div>278 279 <!-- Secondary round cards -->280 <div class="circle-card left">281 <div class="img-placeholder">[IMG: Chat Bubbles]</div>282 <div class="new-badge">New</div>283 </div>284 285 <div class="circle-card right">286 <div class="img-placeholder">[IMG: Thank you in many languages]</div>287 <div class="new-badge">New</div>288 </div>289 290 <!-- Promo card -->291 <div class="promo">292 <div class="title">LIMITED TIME OFFER</div>293 <div class="text">294 60% off when you upgrade to an annual plan.295 <span class="strike">₹199.00</span> ₹49.99/month. Billed annually at ₹599.99.296 </div>297 <div class="cta">Activate</div>298 <div class="close">299 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#fff" d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2"/></svg>300 </div>301 <div class="carousel">302 <div class="dot active"></div>303 <div class="dot"></div><div class="dot"></div><div class="dot"></div>304 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>305 </div>306 <div class="promo-arrow">307 <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#fff" d="M8 5l8 7-8 7"></path></svg>308 </div>309 </div>310 311 <!-- Bottom navigation -->312 <div class="bottom-nav">313 <div class="nav-item active">314 <div class="nav-icon">315 <!-- Categories (map) -->316 <svg width="54" height="54" viewBox="0 0 24 24">317 <path fill="#9ef0ff" d="M3 5l6-2 6 2 6-2v16l-6 2-6-2-6 2V5zM9 5v14M15 7v14" opacity="0.95"></path>318 </svg>319 </div>320 <div class="nav-label">Categories</div>321 </div>322 <div class="nav-item">323 <div class="nav-icon">324 <!-- Lessons (document) -->325 <svg width="54" height="54" viewBox="0 0 24 24">326 <path fill="#d9c8ff" d="M6 3h10l4 4v14H6zM16 3v5h5" opacity="0.95"></path>327 <path fill="#d9c8ff" d="M8 10h8M8 13h8M8 16h6"></path>328 </svg>329 </div>330 <div class="nav-label">Lessons</div>331 </div>332 <div class="nav-item">333 <div class="nav-icon">334 <!-- Statistics (network) -->335 <svg width="54" height="54" viewBox="0 0 24 24">336 <circle cx="6" cy="18" r="3" fill="#d9c8ff"></circle>337 <circle cx="12" cy="6" r="3" fill="#d9c8ff"></circle>338 <circle cx="18" cy="14" r="3" fill="#d9c8ff"></circle>339 <path d="M7 16l4-8 6 6" stroke="#d9c8ff" stroke-width="2" fill="none"></path>340 </svg>341 </div>342 <div class="nav-label">Statistics</div>343 </div>344 <div class="nav-item">345 <div class="nav-icon">346 <!-- Leaderboard (bars) -->347 <svg width="54" height="54" viewBox="0 0 24 24">348 <path fill="#d9c8ff" d="M4 20h4V10H4zM10 20h4V4h-4zM16 20h4v-7h-4z"></path>349 </svg>350 </div>351 <div class="nav-label">Leaderboard</div>352 </div>353 <div class="nav-item" style="position: relative;">354 <div class="nav-icon">355 <!-- Shop (cart) -->356 <svg width="54" height="54" viewBox="0 0 24 24">357 <path fill="#d9c8ff" d="M4 5h2l2 10h10l2-6H8" opacity="0.95"></path>358 <circle cx="10" cy="19" r="2" fill="#d9c8ff"></circle>359 <circle cx="18" cy="19" r="2" fill="#d9c8ff"></circle>360 </svg>361 </div>362 <div class="nav-label">Shop</div>363 <div class="badge">!</div>364 </div>365 </div>366 367 <!-- Home indicator -->368 <div class="home-indicator"></div>369 370</div>371</body>372</html>