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 App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0D0E11;15    border-radius: 0;16    box-shadow: none;17    color: #EDEDED;18  }19 20  /* Status bar */21  .statusbar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    display: flex;28    align-items: center;29    padding: 0 36px;30    color: #FFFFFF;31    font-weight: 600;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .status-dot, .status-circle {42    width: 22px;43    height: 22px;44    border-radius: 50%;45    background: #FFFFFF;46    opacity: 0.9;47  }48  .status-triangle {49    width: 0; height: 0;50    border-left: 16px solid transparent;51    border-right: 16px solid transparent;52    border-bottom: 26px solid #FFFFFF;53    opacity: 0.9;54  }55  .battery {56    width: 44px; height: 24px;57    border: 3px solid #FFFFFF;58    border-radius: 6px;59    position: relative;60  }61  .battery::after {62    content: "";63    position: absolute;64    right: -10px; top: 7px;65    width: 6px; height: 10px; background: #FFFFFF; border-radius: 2px;66  }67 68  /* Header area */69  .app-header {70    position: absolute;71    top: 150px;72    left: 36px;73    right: 36px;74    height: 120px;75  }76  .logo-wave {77    width: 80px; height: 40px;78    opacity: 0.9;79  }80  .header-right {81    position: absolute;82    top: 0;83    right: 0;84    display: flex;85    align-items: center;86    gap: 22px;87  }88  .pill {89    display: inline-flex;90    align-items: center;91    gap: 18px;92    padding: 12px 22px;93    border-radius: 28px;94    background: #16171C;95    color: #EDEDED;96    border: 2px solid #2A2B31;97    font-size: 32px;98    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);99  }100  .icon-btn {101    width: 60px; height: 60px;102    display: inline-flex; align-items: center; justify-content: center;103    border-radius: 20px;104    background: #16171C;105    border: 2px solid #2A2B31;106  }107  .icon { width: 30px; height: 30px; fill: none; stroke: #EDEDED; stroke-width: 2.2; }108 109  /* Chips row */110  .chip-row {111    position: absolute;112    top: 320px;113    left: 36px;114    right: 36px;115    display: flex;116    flex-wrap: wrap;117    gap: 26px;118  }119  .chip {120    display: inline-flex;121    align-items: center;122    gap: 14px;123    padding: 22px 28px;124    border-radius: 28px;125    background: #17171D;126    border: 2px solid #2A2B31;127    color: #DADADA;128    font-size: 36px;129  }130 131  /* Content card with image */132  .content {133    position: absolute;134    top: 760px;135    left: 36px;136    right: 36px;137    display: grid;138    grid-template-columns: 460px 1fr;139    gap: 36px;140    align-items: start;141  }142  .img-placeholder {143    width: 100%;144    height: 520px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    color: #757575;148    display: flex; align-items: center; justify-content: center;149    border-radius: 48px;150    overflow: hidden;151    font-size: 34px;152    text-align: center;153  }154  .card-text h1 {155    margin: 0;156    font-size: 72px;157    letter-spacing: 0.5px;158    color: #F5F5F5;159  }160  .card-text p {161    margin: 24px 0;162    font-size: 36px;163    line-height: 1.5;164    color: #CFCFCF;165  }166 167  /* Timer button */168  .timer-row {169    margin-top: 24px;170    display: inline-flex;171    align-items: center;172    gap: 18px;173  }174  .timer-btn {175    display: inline-flex;176    align-items: center;177    gap: 16px;178    padding: 20px 26px;179    border-radius: 22px;180    background: #1A1B21;181    border: 2px solid #2A2B31;182    color: #EDEDED;183    font-size: 34px;184  }185  .clock { width: 34px; height: 34px; stroke: #EDEDED; stroke-width: 2.2; fill: none; }186 187  /* Bottom white card hint */188  .bottom-card {189    position: absolute;190    bottom: 140px;191    left: 36px;192    width: 1008px;193    height: 220px;194    background: #FFFFFF;195    border-radius: 36px;196    box-shadow: 0 30px 70px rgba(0,0,0,0.35);197  }198 199  /* Modal dropdown */200  .modal {201    position: absolute;202    left: 90px;203    top: 650px;204    width: 900px;205    height: 1450px;206    background: #2D3037;207    border-radius: 28px;208    box-shadow: 0 40px 80px rgba(0,0,0,0.7);209    overflow: hidden;210  }211  .modal-top {212    background: #494B52;213    height: 140px;214    display: flex; align-items: center;215    padding: 0 40px;216    font-size: 54px;217    color: #F2F2F2;218  }219  .modal-list {220    padding: 16px 40px;221    display: flex;222    flex-direction: column;223    gap: 44px;224  }225  .modal-list .item {226    font-size: 52px;227    color: #F2F2F2;228  }229 230  /* Overflow dots icon */231  .dots {232    width: 26px; height: 26px;233  }234  .dots circle { fill: #EDEDED; }235 236  /* Home indicator */237  .home-indicator {238    position: absolute;239    bottom: 48px;240    left: 50%;241    transform: translateX(-50%);242    width: 300px;243    height: 12px;244    background: #EDEDED;245    border-radius: 6px;246    opacity: 0.9;247  }248</style>249</head>250<body>251<div id="render-target">252 253  <!-- Status bar -->254  <div class="statusbar">255    <div>6:14</div>256    <div class="status-right">257      <div class="status-circle"></div>258      <div class="status-circle" style="opacity:0.6;"></div>259      <div class="status-dot"></div>260      <div class="status-triangle"></div>261      <div class="battery"></div>262    </div>263  </div>264 265  <!-- Header -->266  <div class="app-header">267    <!-- Squiggly logo -->268    <svg class="logo-wave" viewBox="0 0 80 40">269      <path d="M3 25 C14 8,24 32,35 15 S56 8,76 24" stroke="#BEBEBE" stroke-width="6" fill="none" stroke-linecap="round" />270    </svg>271 272    <div class="header-right">273      <div class="pill">274        <span style="font-size:30px;">☼</span>275        <span>68770</span>276      </div>277 278      <!-- Crosshair icon -->279      <div class="icon-btn" title="Target">280        <svg class="icon" viewBox="0 0 24 24">281          <circle cx="12" cy="12" r="7"></circle>282          <line x1="12" y1="2" x2="12" y2="6"></line>283          <line x1="12" y1="18" x2="12" y2="22"></line>284          <line x1="2" y1="12" x2="6" y2="12"></line>285          <line x1="18" y1="12" x2="22" y2="12"></line>286        </svg>287      </div>288 289      <!-- Vertical dots -->290      <div class="icon-btn">291        <svg class="dots" viewBox="0 0 6 24">292          <circle cx="3" cy="4" r="3"></circle>293          <circle cx="3" cy="12" r="3"></circle>294          <circle cx="3" cy="20" r="3"></circle>295        </svg>296      </div>297    </div>298  </div>299 300  <!-- Chip rows -->301  <div class="chip-row">302    <div class="chip">💤 Sleep</div>303    <div class="chip">🚨 Emergency</div>304    <div class="chip">💜 Donate</div>305    <div class="chip">😇 Guidance</div>306    <div class="chip">🌤️ Daily meditation</div>307    <div class="chip">⏳ Timer</div>308    <div class="chip">🏆 Challenges</div>309  </div>310 311  <!-- Main content card -->312  <div class="content">313    <div class="img-placeholder">[IMG: Desert landscape]</div>314    <div class="card-text">315      <h1>Meditation</h1>316      <p>A simple session with a soft bell and calm ambience.</p>317      <p>If you are new, we recommend shorter sessions.</p>318      <div class="timer-row">319        <div class="timer-btn">320          <svg class="clock" viewBox="0 0 24 24">321            <circle cx="12" cy="12" r="9"></circle>322            <line x1="12" y1="12" x2="12" y2="6"></line>323            <line x1="12" y1="12" x2="17" y2="12"></line>324          </svg>325          <span>Timer</span>326        </div>327      </div>328    </div>329  </div>330 331  <!-- Bottom white card hint -->332  <div class="bottom-card"></div>333 334  <!-- Modal dropdown list -->335  <div class="modal">336    <div class="modal-top">3 mins</div>337    <div class="modal-list">338      <div class="item">5 mins</div>339      <div class="item">8 mins</div>340      <div class="item">10 mins</div>341      <div class="item">12 mins</div>342      <div class="item">15 mins</div>343      <div class="item">20 mins</div>344      <div class="item">25 mins</div>345      <div class="item">30 mins</div>346      <div class="item">40 mins</div>347      <div class="item">50 mins</div>348      <div class="item">60 mins</div>349    </div>350  </div>351 352  <!-- Home indicator -->353  <div class="home-indicator"></div>354</div>355</body>356</html>