GD-ML/AndroidCode

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>Oxford Dictionary Mock</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#111; color:#EAEAEA;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14  }15  .status-bar {16    height:80px; padding:0 36px;17    display:flex; align-items:center; justify-content:space-between;18    font-size:36px; color:#eaeaea;19    opacity:0.9;20  }21  .status-icons { display:flex; gap:22px; align-items:center; }22  .topbar {23    height:110px; padding:0 24px;24    display:flex; align-items:center; justify-content:space-between;25  }26  .topbar .left { display:flex; align-items:center; gap:18px; }27  .title { font-size:48px; font-weight:600; }28  .icon-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }29  .crown-dot {30    position:absolute; top:8px; right:8px; width:12px; height:12px; border-radius:50%; background:#f6b43a;31  }32 33  .search-wrap { padding:24px; }34  .search-bar {35    height:110px; border-radius:20px; background:#1a1a1a;36    display:flex; align-items:center; padding:0 24px; gap:20px;37    border:1px solid #222;38  }39  .search-input {40    flex:1; color:#9aa0a6; font-size:40px;41  }42  .search-actions { display:flex; gap:16px; }43  .pill {44    width:88px; height:88px; border-radius:18px; border:2px solid #3b5fb9;45    display:flex; align-items:center; justify-content:center; color:#9db3ff;46    background:#161616;47  }48 49  .card {50    margin:24px; margin-top:12px;51    background:#181818; border-radius:26px;52    border:1px solid #222; padding:36px 32px;53    box-shadow: 0 6px 18px rgba(0,0,0,0.3);54  }55  .word-row { display:flex; align-items:center; gap:18px; }56  .word { font-size:76px; color:#73a2ff; font-weight:700; }57  .pron { font-size:42px; color:#d2d7ff; opacity:0.9; }58  .speaker {59    width:64px; height:64px; border-radius:50%;60    background:#5f89ff; display:flex; align-items:center; justify-content:center;61  }62 63  .def { margin-top:24px; font-size:40px; line-height:1.55; color:#eaeaea; }64  .def .tag { color:#61c15f; font-weight:600; }65  .def .pos { font-weight:800; }66  .example { font-style:italic; color:#cfcfcf; margin-top:10px; }67  .rule { height:2px; background:#3a3a3a; margin:26px 0; }68  .origin { font-size:38px; color:#d9d9d9; }69  .link { color:#73a2ff; text-decoration:underline; }70  .credit { margin-top:18px; color:#a9a9a9; font-size:34px; text-align:right; font-style:italic; }71 72  .card-actions {73    margin-top:26px; padding-top:20px;74    display:flex; justify-content:space-between; align-items:center;75  }76  .action {77    width:120px; height:100px; display:flex; align-items:center; justify-content:center;78    color:#9db3ff;79  }80  .action .heart { color:#9db3ff; }81 82  .content-spacer { height:980px; } /* empty area mimicking scroll space */83 84  .bottom-tabs {85    position:absolute; bottom:210px; left:0; right:0;86    height:140px; display:flex; align-items:center; justify-content:space-around;87    background:#141414; border-top:1px solid #202020;88  }89  .tab { display:flex; flex-direction:column; align-items:center; gap:10px; color:#8f98a3; font-size:34px; }90  .tab.active { color:#7ea3ff; }91  .ad-banner {92    position:absolute; bottom:92px; left:0; right:0;93    height:118px; background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;94    display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;95  }96  .gesture {97    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);98    width:300px; height:8px; border-radius:8px; background:#cfcfcf; opacity:0.6;99  }100 101  /* Simple SVG coloring helper */102  svg { display:block; }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div>3:49</div>111    <div class="status-icons">112      <!-- simple status glyphs -->113      <svg width="34" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M3 18h18L12 6 3 18z"/></svg>114      <svg width="34" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M4 10h16v4H4z"/></svg>115      <svg width="34" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><circle cx="12" cy="12" r="10"/></svg>116      <svg width="34" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M17 3h4v18H3v-4h14V3z"/></svg>117      <svg width="34" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M6 7h12v10H6z"/></svg>118      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="2"><path d="M6 18h12M18 18a3 3 0 0 0 0-6M6 18a3 3 0 0 1 0-6"/></svg>119      <svg width="38" height="34" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M13 3h7v18H4V6h9V3z"/></svg>120    </div>121  </div>122 123  <!-- App bar -->124  <div class="topbar">125    <div class="left">126      <div class="icon-btn">127        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">128          <path d="M15 6l-6 6 6 6"/>129        </svg>130      </div>131      <div class="title">Oxford Dictionary</div>132    </div>133    <div class="left" style="gap:18px;">134      <div class="icon-btn" style="position:relative;">135        <!-- crown icon -->136        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">137          <path d="M3 17l2-8 5 4 4-4 7 8H3z"/>138          <path d="M3 20h18"/>139        </svg>140        <span class="crown-dot"></span>141      </div>142      <div class="icon-btn">143        <!-- gear -->144        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">145          <circle cx="12" cy="12" r="3"/>146          <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1"/>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Search -->153  <div class="search-wrap">154    <div class="search-bar">155      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#9db3ff" stroke-width="2">156        <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>157      </svg>158      <div class="search-input">Search</div>159      <div class="search-actions">160        <div class="pill">161          <!-- mic -->162          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#9db3ff" stroke-width="2">163            <rect x="9" y="4" width="6" height="10" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v4"/>164          </svg>165        </div>166        <div class="pill">167          <!-- camera -->168          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#9db3ff" stroke-width="2">169            <path d="M3 8h18v12H3z"/><path d="M8 8l2-3h4l2 3"/><circle cx="12" cy="14" r="4"/>170          </svg>171        </div>172      </div>173    </div>174  </div>175 176  <!-- Result card -->177  <div class="card">178    <div class="word-row">179      <div class="word">hyper</div>180      <div class="pron">/ˈhʌɪpə/</div>181      <div class="speaker">182        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">183          <path d="M4 10v4h4l5 4V6l-5 4H4z"/>184        </svg>185      </div>186      <div class="pron">/</div>187    </div>188 189    <div class="def">190      <span style="color:#9db3ff;">▸</span> <span class="pos">ADJECTIVE</span> <span class="tag">informal</span> hyperactive or unusually energetic:191      <div class="example">eating sugar makes you hyper.</div>192    </div>193 194    <div class="rule"></div>195 196    <div class="origin">– ORIGIN 1940s: abbreviation of <span class="link">hyperactive</span>.</div>197    <div class="credit">by Oxford Dictionary of English</div>198 199    <div class="card-actions">200      <div class="action">201        <!-- copy icon -->202        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9db3ff" stroke-width="2">203          <rect x="9" y="9" width="10" height="12"/><rect x="5" y="3" width="10" height="12"/>204        </svg>205      </div>206      <div class="action">207        <!-- heart filled -->208        <svg width="64" height="64" viewBox="0 0 24 24" fill="#9db3ff">209          <path d="M12 21s-7-4.6-9-8.6C1.7 8.4 4.2 6 7.2 6c2.2 0 3.4 1.2 4.8 2.6C13.4 7.2 14.6 6 16.8 6c3 0 5.5 2.4 4.2 6.4-2 4-9 8.6-9 8.6z"/>210        </svg>211      </div>212      <div class="action">213        <!-- share -->214        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9db3ff" stroke-width="2">215          <circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/>216          <path d="M8 12l8-6M8 12l8 6"/>217        </svg>218      </div>219    </div>220  </div>221 222  <div class="content-spacer"></div>223 224  <!-- Bottom tabs -->225  <div class="bottom-tabs">226    <div class="tab active">227      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#7ea3ff" stroke-width="2">228        <path d="M6 2h12v18l-6-3-6 3V2z"/>229      </svg>230      <div>Dictionary</div>231    </div>232    <div class="tab">233      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8f98a3" stroke-width="2">234        <path d="M12 21s-7-4.6-9-8.6C1.7 8.4 4.2 6 7.2 6c2.2 0 3.4 1.2 4.8 2.6C13.4 7.2 14.6 6 16.8 6c3 0 5.5 2.4 4.2 6.4-2 4-9 8.6-9 8.6z"/>235      </svg>236      <div>Favourites</div>237    </div>238  </div>239 240  <!-- Ad banner placeholder -->241  <div class="ad-banner">[IMG: Ad Banner - bigbasket & bbnow | OPEN]</div>242 243  <!-- gesture bar -->244  <div class="gesture"></div>245 246</div>247</body>248</html>