GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Oxford Dictionary - Mock UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1114;15 color: #eaeef7;16 }17 18 /* Header */19 .header {20 position: absolute;21 top: 40px;22 left: 32px;23 right: 32px;24 height: 120px;25 display: flex;26 align-items: center;27 gap: 24px;28 }29 .back-btn {30 width: 56px; height: 56px; border-radius: 16px;31 display: flex; align-items: center; justify-content: center;32 }33 .header-title {34 font-size: 44px; font-weight: 600; letter-spacing: 0.2px;35 }36 .header-actions {37 margin-left: auto; display: flex; gap: 28px; align-items: center;38 }39 .action-icon {40 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;41 }42 .dot {43 position: absolute; width: 14px; height: 14px; border-radius: 50%;44 background: #ffab41; top: -2px; right: -2px;45 }46 47 /* Search bar */48 .search-wrap {49 position: absolute;50 top: 180px; left: 40px; right: 40px;51 }52 .search-bar {53 height: 120px; border-radius: 24px;54 background: #171a1f; border: 1px solid #1f232a;55 display: flex; align-items: center; padding: 0 28px; gap: 24px;56 }57 .search-input {58 color: #8b93a6; font-size: 36px; flex: 1;59 }60 .pill-icon {61 width: 92px; height: 88px; border-radius: 22px;62 border: 2px solid #8faaff; color: #8faaff;63 display: flex; align-items: center; justify-content: center;64 }65 66 /* Card */67 .card {68 position: absolute;69 top: 330px; left: 36px; right: 36px;70 background: #12161b; border: 1px solid #232832; border-radius: 32px;71 padding: 40px 40px 28px 40px;72 box-shadow: 0 10px 24px rgba(0,0,0,0.4);73 }74 .word-line {75 display: flex; align-items: center; gap: 22px; flex-wrap: wrap;76 }77 .word {78 font-size: 64px; font-weight: 700; color: #6da2ff;79 }80 .phonetic {81 font-size: 40px; color: #ff7a7a; opacity: 0.9;82 }83 .slash { color: #c6cbd8; font-size: 44px; margin: 0 8px; opacity: 0.7; }84 .speaker {85 width: 64px; height: 64px; border-radius: 50%; background: #5b8dff;86 display: flex; align-items: center; justify-content: center;87 }88 .def {89 margin-top: 28px; font-size: 36px; line-height: 1.5;90 }91 .def b { color: #ffffff; }92 .def .green { color: #71c56c; font-weight: 600; }93 .example { margin-top: 12px; font-size: 34px; font-style: italic; color: #dfe4f2; }94 .divider {95 margin: 26px 0; height: 2px; background: #394252;96 }97 .origin { font-size: 34px; color: #cbd3e6; }98 .origin a { color: #6da2ff; text-decoration: underline; }99 .byline { text-align: right; margin-top: 18px; color: #9aa3b7; font-style: italic; font-size: 30px; }100 101 .card-actions {102 display: flex; justify-content: space-between; margin-top: 34px; padding-top: 20px;103 }104 .card-btn {105 width: 160px; height: 120px; border-radius: 28px; display: flex;106 align-items: center; justify-content: center; color: #9eb0ff; border: 1px solid #2a3240; background: #11151a;107 }108 109 /* Bottom nav */110 .bottom-nav {111 position: absolute; bottom: 220px; left: 0; right: 0;112 height: 220px; display: flex; justify-content: space-between; padding: 0 120px; align-items: flex-start;113 color: #a7b3cc;114 }115 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }116 .nav-item .icon {117 width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center;118 color: #9eb0ff;119 }120 .nav-item span { font-size: 34px; color: #98a4c0; }121 122 /* Ad banner */123 .ad {124 position: absolute; bottom: 96px; left: 0; right: 0;125 height: 160px; background: #ffffff; display: flex; align-items: center; padding: 0 24px; gap: 24px;126 box-shadow: 0 -8px 24px rgba(0,0,0,0.45);127 }128 .ad .close {129 position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; border-radius: 18px; background: #e6efff;130 display: flex; align-items: center; justify-content: center; color: #2f6eff; font-weight: 700;131 font-size: 22px;132 }133 .ad-icon {134 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;135 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 18px;136 }137 .ad-content { flex: 1; display: flex; flex-direction: column; gap: 10px; }138 .ad-title { font-size: 40px; color: #1a1a1a; font-weight: 700; }139 .ad-sub { font-size: 30px; color: #5b5b5b; display: flex; align-items: center; gap: 12px; }140 .ad-open {141 width: 160px; height: 72px; border-radius: 36px; background: #17a267; color: #fff; font-weight: 700;142 display: flex; align-items: center; justify-content: center; font-size: 32px;143 }144 145 /* Home indicator */146 .home-indicator {147 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);148 width: 280px; height: 14px; background: #d2d6db; border-radius: 10px; opacity: 0.7;149 }150 151 /* SVG helper */152 svg { display: block; }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Header -->159 <div class="header">160 <div class="back-btn">161 <svg width="44" height="44" viewBox="0 0 24 24">162 <path d="M14 6l-6 6 6 6" fill="none" stroke="#eaeef7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 <div class="header-title">Oxford Dictionary</div>166 <div class="header-actions">167 <div class="action-icon" style="position:relative">168 <span class="dot"></span>169 <svg width="36" height="36" viewBox="0 0 24 24">170 <path d="M3 18l3-9 3 4 3-4 3 9z" fill="none" stroke="#eaeef7" stroke-width="2" stroke-linejoin="round"/>171 <circle cx="12" cy="6" r="2" fill="none" stroke="#eaeef7" stroke-width="2"/>172 </svg>173 </div>174 <div class="action-icon">175 <svg width="40" height="40" viewBox="0 0 24 24">176 <path d="M12 15a3 3 0 100-6 3 3 0 000 6zm8-3l-2.2-.6a7.1 7.1 0 00-1-2.3l1.3-1.9-2.1-2.1-1.9 1.3a7.1 7.1 0 00-2.3-1L12 2H12l-.6 2.2a7.1 7.1 0 00-2.3 1L7.2 3.9 5.1 6l1.3 1.9a7.1 7.1 0 00-1 2.3L3 12l2.2.6a7.1 7.1 0 001 2.3L4.9 16.8 7 18.9l1.9-1.3a7.1 7.1 0 002.3 1L12 22l.6-2.2a7.1 7.1 0 002.3-1l1.9 1.3 2.1-2.1-1.3-1.9a7.1 7.1 0 001-2.3L20 12z" fill="none" stroke="#eaeef7" stroke-width="1.6" stroke-linejoin="round"/>177 </svg>178 </div>179 </div>180 </div>181 182 <!-- Search -->183 <div class="search-wrap">184 <div class="search-bar">185 <svg width="44" height="44" viewBox="0 0 24 24">186 <circle cx="11" cy="11" r="7" fill="none" stroke="#9eb0ff" stroke-width="2"/>187 <path d="M20 20l-4-4" stroke="#9eb0ff" stroke-width="2" stroke-linecap="round"/>188 </svg>189 <div class="search-input">Search</div>190 <div class="pill-icon">191 <svg width="36" height="36" viewBox="0 0 24 24">192 <path d="M12 14c2 0 3-1.3 3-3V7c0-1.7-1-3-3-3s-3 1.3-3 3v4c0 1.7 1 3 3 3zM8 14v2c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-2" fill="none" stroke="#8faaff" stroke-width="1.8" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="pill-icon">196 <svg width="36" height="36" viewBox="0 0 24 24">197 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#8faaff" stroke-width="1.8"/>198 <path d="M3 17l5-6 4 5 3-3 6 4" fill="none" stroke="#8faaff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Dictionary Card -->205 <div class="card">206 <div class="word-line">207 <div class="word">hyper</div>208 <div class="phonetic">/ˈhʌɪpə/</div>209 <div class="speaker">210 <svg width="28" height="28" viewBox="0 0 24 24">211 <path d="M6 10H3v4h3l4 3V7l-4 3z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>212 <path d="M14 9a3 3 0 010 6M16 7a5 5 0 010 10" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>213 </svg>214 </div>215 <span class="slash">/</span>216 </div>217 218 <div class="def">219 <span>▸ <b>ADJECTIVE</b> <span class="green">informal</span> hyperactive or unusually energetic:</span>220 <div class="example">eating sugar makes you hyper.</div>221 </div>222 223 <div class="divider"></div>224 225 <div class="origin">– <b>ORIGIN</b> 1940s: abbreviation of <a href="#">hyperactive</a>.</div>226 227 <div class="byline">by Oxford Dictionary of English</div>228 229 <div class="card-actions">230 <div class="card-btn">231 <svg width="48" height="48" viewBox="0 0 24 24">232 <path d="M6 3h9a2 2 0 012 2v16l-6-3-6 3V5a2 2 0 012-2z" fill="none" stroke="#9eb0ff" stroke-width="1.8" stroke-linejoin="round"/>233 </svg>234 </div>235 <div class="card-btn">236 <svg width="48" height="48" viewBox="0 0 24 24">237 <path d="M12 21s-6-4.3-6-9a4 4 0 018 0 4 4 0 018 0c0 4.7-6 9-6 9" fill="none" stroke="#9eb0ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 <div class="card-btn">241 <svg width="48" height="48" viewBox="0 0 24 24">242 <path d="M4 12h9M9 7l5 5-5 5" fill="none" stroke="#9eb0ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 </div>246 </div>247 248 <!-- Bottom Navigation -->249 <div class="bottom-nav">250 <div class="nav-item">251 <div class="icon">252 <svg width="44" height="44" viewBox="0 0 24 24">253 <path d="M5 3h12v16H5zM9 3v16" fill="none" stroke="#9eb0ff" stroke-width="2"/>254 </svg>255 </div>256 <span>Dictionary</span>257 </div>258 <div class="nav-item">259 <div class="icon">260 <svg width="44" height="44" viewBox="0 0 24 24">261 <path d="M12 20s-7-4.5-7-9a4 4 0 017-2 4 4 0 017 2c0 4.5-7 9-7 9z" fill="none" stroke="#9eb0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 </div>264 <span>Favourites</span>265 </div>266 </div>267 268 <!-- Ad Banner -->269 <div class="ad">270 <div class="close">×</div>271 <div class="ad-icon">[IMG: Ad App Icon]</div>272 <div class="ad-content">273 <div class="ad-title">bigbasket & bbnow</div>274 <div class="ad-sub">275 <span>4.4 ★</span>276 <span>FREE</span>277 </div>278 </div>279 <div class="ad-open">OPEN</div>280 </div>281 282 <div class="home-indicator"></div>283</div>284</body>285</html>