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>Word Details UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18 19  /* Top app bar */20  .appbar {21    position: relative;22    width: 100%;23    height: 220px;24    background: #4ea3ff;25  }26  .statusbar {27    height: 88px;28    padding: 0 32px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #fff;33    font-size: 34px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .titlebar {42    height: 132px;43    display: flex;44    align-items: center;45    padding: 0 30px;46    color: #fff;47  }48  .titlebar .title {49    font-size: 48px;50    font-weight: 600;51    margin-left: 18px;52  }53  .icon {54    display: inline-block;55  }56 57  /* Search card */58  .search-card {59    width: 996px;60    margin: 26px auto 12px auto;61    background: #fff;62    border-radius: 22px;63    box-shadow: 0 12px 24px rgba(0,0,0,0.12);64    padding: 26px 28px;65    display: flex;66    align-items: center;67    justify-content: space-between;68  }69  .search-left {70    display: flex;71    align-items: center;72    gap: 22px;73    color: #9e9e9e;74    font-size: 36px;75  }76  .caret {77    width: 5px;78    height: 48px;79    background: #4ea3ff;80    border-radius: 2px;81  }82  .mic-wrap {83    width: 96px;84    height: 96px;85    border-radius: 50%;86    background: #f2f2f2;87    display: flex;88    align-items: center;89    justify-content: center;90  }91 92  /* Content */93  .content {94    padding: 24px 40px 180px 40px;95  }96  .word-heading {97    font-size: 56px;98    font-weight: 600;99    margin: 18px 0 24px 0;100  }101  .label {102    font-size: 32px;103    font-weight: 700;104    margin-top: 14px;105  }106  .subtext {107    font-size: 32px;108    color: #333;109    margin-top: 6px;110  }111  .def {112    font-size: 40px;113    line-height: 1.35;114    color: #4e8af9;115    font-weight: 700;116    margin: 18px 0 26px 0;117  }118  .number {119    color: #4e8af9;120    font-weight: 700;121    margin-right: 12px;122  }123  .hr {124    height: 2px;125    background: #e6e6e6;126    margin: 28px 0;127  }128  .syn-title {129    color: #4e8af9;130    font-size: 40px;131    font-weight: 700;132    margin-bottom: 18px;133  }134  .syn-item {135    font-size: 36px;136    color: #4e8af9;137    padding: 18px 0;138    border-bottom: 2px solid #e6e6e6;139  }140 141  /* Bottom actions */142  .bottom-actions {143    position: absolute;144    left: 24px;145    right: 24px;146    bottom: 90px;147    display: flex;148    align-items: center;149    justify-content: space-between;150  }151  .left-actions {152    display: flex;153    align-items: center;154    gap: 44px;155  }156  .circle-btn {157    width: 120px;158    height: 120px;159    border-radius: 24px;160    background: #fff;161    display: flex;162    align-items: center;163    justify-content: center;164  }165 166  .cta {167    display: flex;168    align-items: center;169    gap: 18px;170    background: #d97a2e;171    color: #fff;172    font-size: 36px;173    font-weight: 700;174    border-radius: 28px;175    padding: 28px 40px;176    box-shadow: 0 10px 22px rgba(0,0,0,0.18);177  }178 179  /* Gesture bar */180  .gesture {181    position: absolute;182    bottom: 26px;183    left: 50%;184    transform: translateX(-50%);185    width: 280px;186    height: 12px;187    background: #dcdcdc;188    border-radius: 6px;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Top app bar -->196  <div class="appbar">197    <div class="statusbar">198      <div>11:22</div>199      <div class="status-right">200        <!-- Minimal status icons -->201        <svg class="icon" width="40" height="40" viewBox="0 0 40 40">202          <path d="M5 20c6-6 24-6 30 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>203          <path d="M10 20c4-4 16-4 20 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.7"/>204          <circle cx="20" cy="20" r="2.2" fill="#fff"/>205        </svg>206        <svg class="icon" width="46" height="40" viewBox="0 0 46 40">207          <rect x="4" y="10" width="34" height="20" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"/>208          <rect x="7" y="13" width="28" height="14" fill="#fff"/>209          <rect x="40" y="15" width="4" height="10" rx="2" fill="#fff"/>210        </svg>211      </div>212    </div>213    <div class="titlebar">214      <svg class="icon" width="54" height="54" viewBox="0 0 54 54">215        <path d="M34 10 L16 27 L34 44" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216      </svg>217      <div class="title">Word Details</div>218    </div>219  </div>220 221  <!-- Search card -->222  <div class="search-card">223    <div class="search-left">224      <div class="caret"></div>225      <div>Search Words Here...</div>226    </div>227    <div class="mic-wrap">228      <svg class="icon" width="40" height="40" viewBox="0 0 40 40">229        <rect x="14" y="8" width="12" height="16" rx="6" fill="#9e9e9e"/>230        <path d="M10 20c0 6 5 10 10 10s10-4 10-10" stroke="#9e9e9e" stroke-width="3" fill="none"/>231        <rect x="18" y="30" width="4" height="6" fill="#9e9e9e"/>232        <rect x="14" y="36" width="12" height="2" fill="#9e9e9e"/>233      </svg>234    </div>235  </div>236 237  <!-- Content -->238  <div class="content">239    <div class="word-heading">Word: Chaos</div>240 241    <div class="label">Hypernyms:</div>242    <div class="subtext">physical phenomenon</div>243 244    <div class="def"><span class="number">3-</span>(n) (Greek mythology) the most ancient of gods; the personification of the infinity of space preceding creation of the universe</div>245 246    <div class="label">Instance Hypernyms:</div>247    <div class="subtext">greek deity</div>248 249    <div class="def"><span class="number">4-</span>(n) (physics) a dynamical system that is extremely sensitive to its initial conditions</div>250 251    <div class="label">Hypernyms:</div>252    <div class="subtext">dynamical system</div>253 254    <div class="hr"></div>255 256    <div class="syn-title">Synonyms</div>257    <div class="syn-item">topsy-turvydom</div>258    <div class="syn-item">chaos</div>259  </div>260 261  <!-- Bottom actions -->262  <div class="bottom-actions">263    <div class="left-actions">264      <div class="circle-btn">265        <svg class="icon" width="72" height="72" viewBox="0 0 72 72">266          <path d="M36 10l8 16 18 3-13 12 3 18-16-8-16 8 3-18-13-12 18-3z"267                fill="none" stroke="#111" stroke-width="3"/>268        </svg>269      </div>270      <div class="circle-btn">271        <svg class="icon" width="72" height="72" viewBox="0 0 72 72">272          <path d="M18 26v20l14-8h10a8 8 0 0 0 0-16H32z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>273        </svg>274      </div>275    </div>276    <div class="cta">277      <svg class="icon" width="44" height="44" viewBox="0 0 44 44">278        <circle cx="22" cy="22" r="20" fill="rgba(255,255,255,0.25)"/>279        <text x="50%" y="54%" text-anchor="middle" font-size="22" fill="#fff" font-weight="700">A</text>280      </svg>281      More Translations282    </div>283  </div>284 285  <!-- Gesture bar -->286  <div class="gesture"></div>287</div>288</body>289</html>