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>Meditation Timer UI Mock</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: #0d0d10;15    color: #ECECEC;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* General helpers */20  .muted { color: #B8BAC3; }21  .container { padding: 0 48px; }22 23  /* Top status bar (mock) */24  .status-bar {25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    font-size: 34px;31    color: #ffffff;32    opacity: 0.95;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }40  .triangle {41    width: 0; height: 0;42    border-left: 12px solid transparent;43    border-right: 12px solid transparent;44    border-bottom: 20px solid #fff;45    opacity: 0.9;46  }47 48  /* Header area */49  .header {50    padding: 18px 36px 8px 36px;51    display: flex;52    align-items: center;53    justify-content: space-between;54  }55  .logo {56    width: 72px; height: 36px;57    position: relative;58  }59  .logo:before {60    content: "";61    position: absolute;62    left: 0; right: 0; top: 12px; height: 6px;63    background: linear-gradient(90deg, #9fe3ff, #7ab6ff);64    border-radius: 12px;65    transform: skewX(-20deg);66  }67  .points-and-menu {68    display: flex;69    align-items: center;70    gap: 18px;71  }72  .points-pill {73    display: inline-flex;74    align-items: center;75    gap: 12px;76    padding: 10px 22px;77    border: 2px solid #6b6e74;78    color: #d8dde4;79    border-radius: 28px;80    font-size: 28px;81    background: rgba(255,255,255,0.04);82  }83  .menu-vert {84    width: 44px; height: 44px;85    display: grid; place-items: center;86  }87  .menu-vert svg circle { fill: #C8CBD2; }88 89  /* Chips area */90  .chips {91    padding: 8px 36px 12px 36px;92    display: flex;93    flex-wrap: wrap;94    gap: 22px;95  }96  .chip {97    background: #191a20;98    color: #d4d7df;99    padding: 22px 28px;100    border-radius: 28px;101    font-size: 32px;102    line-height: 1;103    display: inline-flex;104    align-items: center;105    gap: 14px;106    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);107  }108 109  /* Section title */110  .section-title {111    padding: 28px 48px 20px 48px;112    font-size: 60px;113    font-weight: 800;114    font-family: Georgia, "Times New Roman", serif;115    letter-spacing: 0.2px;116    color: #eae6ee;117  }118 119  /* Hero image card */120  .hero-card {121    margin: 0 36px;122    border-radius: 44px;123    overflow: hidden;124    background: #1a1a1f;125  }126  .hero-img {127    height: 620px;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    display: flex;131    align-items: center;132    justify-content: center;133    color: #757575;134    font-size: 36px;135  }136 137  /* Content block below image */138  .content {139    padding: 36px 48px 0 48px;140  }141  .content h2 {142    margin: 24px 0 16px 0;143    font-size: 64px;144    font-weight: 800;145    font-family: Georgia, "Times New Roman", serif;146    color: #ECE8F5;147  }148  .content p {149    margin: 16px 0;150    font-size: 36px;151    line-height: 1.6;152    color: #C9CBD3;153  }154 155  /* Time selector */156  .time-select {157    margin: 36px 0 26px 0;158    background: #1a1b21;159    border-radius: 28px;160    padding: 26px 28px;161    display: flex;162    align-items: center;163    justify-content: space-between;164    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);165  }166  .time-left {167    display: inline-flex;168    align-items: center;169    gap: 18px;170    font-size: 34px;171    color: #E7E7EC;172    letter-spacing: 0.3px;173  }174  .time-left svg { width: 44px; height: 44px; }175  .chevron svg { width: 38px; height: 38px; }176 177  /* Play button */178  .play-btn {179    margin-top: 18px;180    background: #FFFFFF;181    color: #0f1115;182    border-radius: 38px;183    height: 150px;184    display: flex;185    align-items: center;186    justify-content: center;187    box-shadow: 0 8px 24px rgba(0,0,0,0.4);188  }189  .play-btn svg { width: 48px; height: 48px; fill: #121316; }190 191  /* Bottom gesture pill */192  .gesture {193    position: absolute;194    left: 50%;195    transform: translateX(-50%);196    bottom: 22px;197    width: 320px; height: 10px;198    background: #C8C8CC;199    border-radius: 8px;200    opacity: 0.6;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status Bar -->208  <div class="status-bar">209    <div>6:15</div>210    <div class="status-icons">211      <div class="dot" style="width:22px;height:22px;"></div>212      <div class="dot"></div>213      <div class="triangle"></div>214      <div class="dot" style="width:14px;height:14px;"></div>215    </div>216  </div>217 218  <!-- Header: logo, points, menu -->219  <div class="header">220    <div class="logo" aria-label="app logo"></div>221    <div class="points-and-menu">222      <div class="points-pill">223        <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">224          <circle cx="12" cy="12" r="10" stroke="#B8BDC6" stroke-width="2" fill="none"/>225          <circle cx="12" cy="12" r="2" fill="#B8BDC6"/>226        </svg>227        68770228      </div>229      <div class="menu-vert" aria-label="menu">230        <svg width="8" height="28" viewBox="0 0 8 28">231          <circle cx="4" cy="4" r="4"></circle>232          <circle cx="4" cy="14" r="4"></circle>233          <circle cx="4" cy="24" r="4"></circle>234        </svg>235      </div>236    </div>237  </div>238 239  <!-- Chips -->240  <div class="chips">241    <div class="chip">😴 Sleep</div>242    <div class="chip">🚨 Emergency</div>243    <div class="chip">💜 Donate</div>244    <div class="chip">🙂 Guided</div>245    <div class="chip">🌞 Daily meditation</div>246    <div class="chip">⏳ Timer</div>247    <div class="chip">🏆 Challenges</div>248  </div>249 250  <!-- Section title -->251  <div class="section-title">The Medito course</div>252 253  <!-- Hero image card -->254  <div class="hero-card">255    <div class="hero-img">[IMG: Hourglass desert artwork]</div>256  </div>257 258  <!-- Content -->259  <div class="content">260    <h2>Meditation timer</h2>261    <p>A simple timer with a bell at the start, and a bell at the end of the session.</p>262    <p>If you have never meditated before, we recommend that you try the courses first.</p>263 264    <div class="time-select">265      <div class="time-left">266        <svg viewBox="0 0 24 24" aria-hidden="true">267          <circle cx="12" cy="12" r="9" stroke="#E7E7EC" stroke-width="2" fill="none"></circle>268          <path d="M12 7v6l4 2" stroke="#E7E7EC" stroke-width="2" fill="none" stroke-linecap="round"/>269        </svg>270        <span>20 mins</span>271      </div>272      <div class="chevron" aria-hidden="true">273        <svg viewBox="0 0 24 24">274          <path d="M6 9l6 6 6-6" stroke="#E7E7EC" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275        </svg>276      </div>277    </div>278 279    <div class="play-btn" role="button" aria-label="Play">280      <svg viewBox="0 0 24 24" aria-hidden="true">281        <polygon points="8,5 19,12 8,19"></polygon>282      </svg>283    </div>284  </div>285 286  <div class="gesture"></div>287</div>288</body>289</html>