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>Tomorrowland Article Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    -webkit-font-smoothing: antialiased;14    -moz-osx-font-smoothing: grayscale;15  }16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #ffffff;22  }23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: #000000;31    color: #ffffff;32    display: flex;33    align-items: center;34    padding: 0 40px;35    box-sizing: border-box;36    font-size: 44px;37    letter-spacing: 0.5px;38  }39  .status-left { display: flex; align-items: center; gap: 20px; }40  .status-right {41    margin-left: auto;42    display: flex;43    align-items: center;44    gap: 24px;45  }46  /* App bar */47  .app-bar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 150px;53    background: #0b0b0b;54    color: #fff;55    display: flex;56    align-items: center;57    padding: 0 32px;58    box-sizing: border-box;59  }60  .app-bar .left {61    width: 100px;62    display: flex;63    align-items: center;64    justify-content: flex-start;65  }66  .app-bar .right {67    margin-left: auto;68    display: flex;69    align-items: center;70    gap: 36px;71    padding-right: 12px;72  }73 74  /* Content area */75  .content {76    position: absolute;77    top: 270px; /* status + app bar */78    left: 0;79    right: 0;80    bottom: 320px; /* space for bottom sheet */81    overflow: hidden;82  }83  .scroll {84    height: 100%;85    overflow-y: auto;86    padding: 40px 60px 120px 60px;87    box-sizing: border-box;88  }89  h1.title {90    font-family: Georgia, "Times New Roman", serif;91    font-size: 100px;92    font-style: italic;93    font-weight: 500;94    line-height: 1.05;95    margin: 24px 0 40px 0;96    color: #111111;97  }98  .paragraph {99    font-size: 44px;100    line-height: 1.75;101    color: #222222;102    margin: 24px 0 24px 0;103  }104  .paragraph b { font-weight: 700; }105  .paragraph a {106    color: #0b57d0;107    text-decoration: underline;108  }109  .divider {110    height: 2px;111    background: #e6e6e6;112    margin: 70px 0;113  }114 115  /* Bottom action sheet */116  .bottom-sheet {117    position: absolute;118    left: 0;119    bottom: 0;120    width: 1080px;121    height: 300px;122    background: #1f1f1f;123    color: #eaeaea;124    border-top-left-radius: 28px;125    border-top-right-radius: 28px;126    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);127    padding: 36px 24px 24px;128    box-sizing: border-box;129  }130  .actions {131    display: flex;132    justify-content: space-around;133    align-items: center;134    height: 100%;135  }136  .action {137    width: 180px;138    display: flex;139    flex-direction: column;140    align-items: center;141    gap: 16px;142    font-size: 34px;143    color: #d9d9d9;144  }145  .action svg { width: 72px; height: 72px; fill: none; stroke: #eaeaea; stroke-width: 3; }146  .home-pill {147    position: absolute;148    bottom: 310px;149    left: 50%;150    transform: translateX(-50%);151    width: 220px;152    height: 16px;153    background: #ffffff;154    opacity: 0.9;155    border-radius: 12px;156  }157 158  /* Thin shadow at top content like page edge */159  .top-fade {160    position: absolute;161    left: 0;162    top: 270px;163    width: 1080px;164    height: 8px;165    background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));166  }167 168  /* Hide default scrollbar for closer look */169  .scroll::-webkit-scrollbar { width: 0; height: 0; }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">7:37</div>178    <div class="status-right">179      <!-- Gmail small envelope -->180      <svg width="44" height="44" viewBox="0 0 24 24">181        <path d="M2 6h20v12H2z" fill="none" stroke="#fff"/>182        <path d="M2 7l10 6 10-6" fill="none" stroke="#fff"/>183      </svg>184      <!-- Download icon -->185      <svg width="44" height="44" viewBox="0 0 24 24">186        <path d="M12 3v12" stroke="#fff"/>187        <path d="M7 10l5 5 5-5" stroke="#fff"/>188        <path d="M4 20h16" stroke="#fff"/>189      </svg>190      <!-- Cloud icon -->191      <svg width="44" height="44" viewBox="0 0 24 24">192        <path d="M7 18h9a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 1 0 0 10z" stroke="#fff" fill="none"/>193      </svg>194      <!-- Wifi icon -->195      <svg width="44" height="44" viewBox="0 0 24 24">196        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" fill="none"/>197        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" fill="none"/>198        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" fill="none"/>199        <circle cx="12" cy="19" r="1.2" fill="#fff" stroke="none"/>200      </svg>201      <!-- Battery icon -->202      <svg width="54" height="44" viewBox="0 0 28 16">203        <rect x="1" y="3" width="22" height="10" stroke="#fff" fill="none" rx="2"/>204        <rect x="24" y="6" width="3" height="4" fill="#fff"/>205        <rect x="3" y="5" width="14" height="6" fill="#fff"/>206      </svg>207    </div>208  </div>209 210  <!-- App Bar -->211  <div class="app-bar">212    <div class="left">213      <!-- Back arrow -->214      <svg width="64" height="64" viewBox="0 0 24 24">215        <path d="M15 4L7 12l8 8" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216      </svg>217    </div>218    <div class="right">219      <!-- Grid icon -->220      <svg width="60" height="60" viewBox="0 0 24 24">221        <rect x="3" y="3" width="6" height="6" fill="none" stroke="#fff"/>222        <rect x="15" y="3" width="6" height="6" fill="none" stroke="#fff"/>223        <rect x="3" y="15" width="6" height="6" fill="none" stroke="#fff"/>224        <rect x="15" y="15" width="6" height="6" fill="none" stroke="#fff"/>225      </svg>226      <!-- Search icon -->227      <svg width="60" height="60" viewBox="0 0 24 24">228        <circle cx="10.5" cy="10.5" r="7" stroke="#fff" fill="none"/>229        <path d="M16 16l5 5" stroke="#fff"/>230      </svg>231      <!-- Kebab menu -->232      <svg width="60" height="60" viewBox="0 0 24 24">233        <circle cx="12" cy="5" r="1.8" fill="#fff"/>234        <circle cx="12" cy="12" r="1.8" fill="#fff"/>235        <circle cx="12" cy="19" r="1.8" fill="#fff"/>236      </svg>237    </div>238  </div>239 240  <div class="top-fade"></div>241 242  <!-- Content -->243  <div class="content">244    <div class="scroll">245      <h1 class="title">Tomorrowland<br>(festival)</h1>246 247      <p class="paragraph">248        <b>Tomorrowland</b> is a large-scale annual249        <a href="#">electronic dance music</a> festival held in250        <a href="#">Boom</a>, Belgium. Taking place within <a href="#">De251        Schorre</a> provincial recreational park, it debuted in 2005, from an idea conceived252        by brothers Manu and Michiel Beers. Since then, Tomorrowland has become one of253        the best known <a href="#">music festivals</a> in the254      </p>255 256      <div class="divider"></div>257 258      <p class="paragraph">259        world. It has won numerous accolades and awards, including being voted five260        times in a row as "best musical event of the year" at the261        <a href="#">International Dance Music Awards</a>. It employs 80 people year‑round262        for the organisation and 15,000 people during the event. [4]263      </p>264 265      <p class="paragraph">266        The festival features multiple stages, elaborate set designs, and performances267        from top DJs around the globe. Tickets often sell out within minutes, reflecting268        the festival’s immense popularity among dance music fans.269      </p>270    </div>271  </div>272 273  <!-- Home gesture pill -->274  <div class="home-pill"></div>275 276  <!-- Bottom Action Sheet -->277  <div class="bottom-sheet">278    <div class="actions">279      <div class="action">280        <svg viewBox="0 0 24 24">281          <path d="M4 12v7h7" />282          <path d="M4 12l10-8v5h6v6h-6v5z" />283        </svg>284        <div>Share</div>285      </div>286      <div class="action">287        <svg viewBox="0 0 24 24">288          <path d="M4 20h16" />289          <path d="M8 20V6l8-2v16" />290          <path d="M8 11l8-2" />291        </svg>292        <div>Annotate</div>293      </div>294      <div class="action">295        <svg viewBox="0 0 24 24">296          <path d="M6 6h12l-1 14H7z" />297          <path d="M9 6V4h6v2" />298        </svg>299        <div>Delete</div>300      </div>301      <div class="action">302        <svg viewBox="0 0 24 24">303          <path d="M6 3h12v16l-6-3-6 3z" />304        </svg>305        <div>Bookmark</div>306      </div>307      <div class="action">308        <svg viewBox="0 0 24 24">309          <path d="M12 3v12" />310          <path d="M7 10l5 5 5-5" />311          <path d="M4 20h16" />312        </svg>313        <div>Download</div>314      </div>315    </div>316  </div>317 318</div>319</body>320</html>