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>Learn - Words</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F3F1F4;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-size: 34px;27 letter-spacing: 0.5px;28 justify-content: space-between;29 }30 .status-icons { display: flex; align-items: center; gap: 28px; }31 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }32 .battery {33 width: 50px; height: 26px; border: 3px solid #fff; border-radius: 4px; position: relative;34 }35 .battery::after {36 content: ''; position: absolute; right: -8px; top: 7px; width: 6px; height: 10px; background: #fff; border-radius: 2px;37 }38 .battery .level { width: 70%; height: 100%; background: #fff; }39 40 /* Top app bar */41 .appbar {42 height: 140px;43 background: #FFFFFF;44 display: flex;45 align-items: center;46 padding: 0 30px;47 box-sizing: border-box;48 border-bottom: 1px solid #E6E0EA;49 }50 .lang {51 display: flex; align-items: center; gap: 14px;52 }53 .flag {54 width: 84px; height: 84px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;55 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;56 }57 .lang .arrow {58 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #7A6A86; margin-left: 6px;59 }60 .title { flex: 1; text-align: center; font-size: 54px; color: #6E5B7B; font-weight: 600; }61 .app-actions { display: flex; align-items: center; gap: 32px; }62 .icon-btn { width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #7A6A86; }63 .notif { position: relative; }64 .badge {65 position: absolute; right: -6px; top: -6px; background: #D93025; color: #fff; width: 44px; height: 44px; font-size: 26px;66 border-radius: 22px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,0.15);67 }68 69 /* Tabs */70 .tabs {71 height: 120px; background: #FFFFFF;72 display: flex; align-items: flex-end; padding: 0 24px; box-sizing: border-box;73 gap: 28px; border-bottom: 1px solid #E6E0EA;74 }75 .tab {76 flex: 1; text-align: center; color: #C6BFCB; font-size: 44px; padding-bottom: 18px; position: relative; font-weight: 600;77 }78 .tab.active { color: #6E5B7B; }79 .tab.active::after {80 content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);81 width: 280px; height: 8px; background: #E6A33D; border-radius: 4px;82 }83 84 /* Side badges */85 .side-badges { position: absolute; top: 520px; left: 24px; display: flex; flex-direction: column; gap: 26px; }86 .side-badges-right { position: absolute; top: 520px; right: 24px; display: flex; flex-direction: column; gap: 26px; }87 .badge-img {88 width: 140px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;89 display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; font-size: 26px; padding: 8px;90 }91 .start-now {92 width: 160px; height: 190px; border-radius: 28px; background: #E0E0E0; border: 1px solid #BDBDBD;93 display: flex; flex-direction: column; align-items: center; justify-content: center; color: #757575; font-size: 26px; gap: 10px;94 box-shadow: 0 6px 16px rgba(0,0,0,0.1);95 }96 .start-now .btn {97 margin-top: 6px; background: #F14D4D; color: #fff; font-size: 28px; padding: 8px 18px; border-radius: 18px;98 }99 100 /* Main content area */101 .content {102 position: absolute; top: 350px; left: 0; right: 0; bottom: 200px; overflow: hidden;103 }104 .track {105 position: absolute; left: 540px; top: 0; bottom: 0; width: 28px; background: #EEE9F0; border-radius: 16px;106 box-shadow: inset 0 0 0 2px #F2EDF5;107 }108 109 /* Hex cards */110 .hex {111 width: 560px; height: 540px; background: #E4A33F;112 clip-path: polygon(25% 4%, 75% 4%, 96% 50%, 75% 96%, 25% 96%, 4% 50%);113 border-radius: 30px; /* softening edges for shadow */114 box-shadow: 0 14px 24px rgba(0,0,0,0.12);115 position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;116 }117 .hex.small { width: 450px; height: 420px; }118 .hex.medium { width: 520px; height: 480px; }119 120 .hex .img-circle {121 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;122 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;123 margin-bottom: 24px;124 }125 .hex.small .img-circle { width: 180px; height: 180px; font-size: 26px; }126 .hex.medium .img-circle { width: 200px; height: 200px; font-size: 28px; }127 128 .hex .label { font-size: 48px; font-weight: 600; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,0.15); }129 .hex.small .label { font-size: 44px; line-height: 1.2; }130 .hex.medium .label { font-size: 46px; }131 132 /* Positions for hexes */133 .people { left: 260px; top: 40px; }134 .family { left: 110px; top: 640px; }135 .love { right: 110px; top: 640px; }136 .identity { left: 280px; top: 1180px; }137 .age { left: 130px; top: 1720px; }138 139 /* Bottom navigation */140 .bottom-bar {141 position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #FFFFFF; border-top: 1px solid #E6E0EA;142 display: flex; align-items: center; justify-content: space-around;143 }144 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #A49AAD; font-size: 34px; }145 .nav-item.active { color: #6E5B7B; }146 .nav-icon { width: 56px; height: 56px; }147 148 /* Simple SVG styling */149 svg { display: block; }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status Bar -->156 <div class="status-bar">157 <div style="font-weight:600;">12:32</div>158 <div class="status-icons">159 <div class="dot"></div>160 <div class="dot"></div>161 <div style="width:26px;height:26px;border:2px solid #fff;border-radius:50%;"></div>162 <div class="battery"><div class="level"></div></div>163 </div>164 </div>165 166 <!-- App Bar -->167 <div class="appbar">168 <div class="lang">169 <div class="flag">[IMG: Language]</div>170 <div class="arrow"></div>171 </div>172 <div class="title">Learn</div>173 <div class="app-actions">174 <div class="icon-btn" title="Search">175 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#7A6A86" stroke-width="2">176 <circle cx="11" cy="11" r="7"></circle>177 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>178 </svg>179 </div>180 <div class="icon-btn notif" title="Notifications">181 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#7A6A86" stroke-width="2">182 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path>183 <path d="M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7"></path>184 </svg>185 <div class="badge">5</div>186 </div>187 </div>188 </div>189 190 <!-- Tabs -->191 <div class="tabs">192 <div class="tab">Alphabet</div>193 <div class="tab active">Words</div>194 <div class="tab">Sentences</div>195 </div>196 197 <!-- Side badges (left) -->198 <div class="side-badges">199 <div class="badge-img">[IMG: Premium]</div>200 <div class="start-now">201 <div>[IMG: Rocket]</div>202 <div class="btn">Start now</div>203 </div>204 </div>205 206 <!-- Side badges (right) -->207 <div class="side-badges-right">208 <div class="badge-img">[IMG: Crown]</div>209 <div class="badge-img">[IMG: Idea]</div>210 </div>211 212 <!-- Main content -->213 <div class="content">214 <div class="track"></div>215 216 <div class="hex people">217 <div class="img-circle">[IMG: People]</div>218 <div class="label">People</div>219 </div>220 221 <div class="hex small family">222 <div class="img-circle">[IMG: Family]</div>223 <div class="label">Family</div>224 </div>225 226 <div class="hex small love">227 <div class="img-circle">[IMG: Love & Friendship]</div>228 <div class="label">Love &<br>Friendship</div>229 </div>230 231 <div class="hex medium identity">232 <div class="img-circle">[IMG: Identity]</div>233 <div class="label">Identity</div>234 </div>235 236 <div class="hex small age">237 <div class="img-circle">[IMG: Age & Life Events]</div>238 <div class="label">Age & Life<br>Events</div>239 </div>240 </div>241 242 <!-- Bottom Navigation -->243 <div class="bottom-bar">244 <div class="nav-item active">245 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#6E5B7B" fill="none" stroke-width="2">246 <path d="M4 19h16V7l-8-5-8 5v12z"></path>247 <path d="M9 22V12h6v10"></path>248 </svg>249 <div>Learn</div>250 </div>251 <div class="nav-item">252 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#A49AAD" fill="none" stroke-width="2">253 <path d="M12 3l9 4-9 4-9-4 9-4z"></path>254 <path d="M3 10l9 4 9-4"></path>255 <path d="M3 16l9 4 9-4"></path>256 </svg>257 <div>You</div>258 </div>259 <div class="nav-item">260 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#A49AAD" fill="none" stroke-width="2">261 <path d="M3 6h18M3 12h18M3 18h18"></path>262 </svg>263 <div>More</div>264 </div>265 </div>266 267</div>268</body>269</html>