GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Daily Guide UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  :root{9    --accent:#7B61FF;10    --accent-2:#9C8BFF;11    --lav:#F3EEFF;12    --lav-border:#E4DBFF;13    --text:#2D2D2F;14    --sub:#7A7A85;15    --bg:#FFFFFF;16  }17  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color:var(--text); }18  #render-target{19    width:1080px;20    height:2400px;21    position:relative;22    overflow:hidden;23    background:#FFFFFF;24    border-radius:28px;25    box-shadow:0 10px 40px rgba(0,0,0,0.08);26  }27  .top-black{28    height:130px;29    background:#000;30    width:100%;31  }32  .hero{33    position:relative;34    width:100%;35    height:520px;36    padding:0 40px;37    box-sizing:border-box;38  }39  .hero .img{40    width:100%;41    height:100%;42    background:#E0E0E0;43    border:1px solid #BDBDBD;44    border-radius:6px;45    display:flex;46    align-items:center;47    justify-content:center;48    color:#757575;49    font-size:34px;50    text-align:center;51  }52  .quick-actions{53    margin:28px 36px 10px;54    display:flex;55    gap:28px;56  }57  .qa-card{58    flex:1;59    background:var(--lav);60    border:1px solid var(--lav-border);61    border-radius:28px;62    height:140px;63    display:flex;64    align-items:center;65    padding:0 28px;66    gap:18px;67    box-shadow:0 3px 0 rgba(0,0,0,0.02) inset;68  }69  .qa-card span{70    font-size:38px;71    color:var(--text);72  }73  .qa-card .icon{74    width:52px;75    height:52px;76    color:var(--accent);77  }78  .section{79    padding:10px 60px 0;80  }81  .section h2{82    font-size:64px;83    line-height:1.1;84    margin:24px 0 6px;85    font-weight:800;86    letter-spacing:-0.5px;87  }88  .section p{89    margin:0;90    font-size:32px;91    color:var(--sub);92  }93  .timeline{94    position:relative;95    padding-left:120px;96    margin-top:26px;97  }98  .timeline:before{99    content:"";100    position:absolute;101    left:70px;102    top:40px;103    bottom:120px;104    width:4px;105    background:#E5E5EE;106    border-radius:2px;107  }108  .dot{109    position:absolute;110    left:54px;111    width:36px;112    height:36px;113    border-radius:50%;114    border:6px solid var(--accent-2);115    background:#fff;116  }117  .dot.checked{118    background:var(--accent);119    border-color:var(--accent);120  }121  .dot.d1{ top:50px; }122  .dot.d2{ top:490px; }123  .card{124    position:relative;125    width:880px;126    height:360px;127    border-radius:38px;128    overflow:hidden;129    margin-bottom:54px;130    box-shadow:0 12px 30px rgba(0,0,0,0.08);131  }132  .card .img{133    position:absolute;134    inset:0;135    background:#E0E0E0;136    border:1px solid #BDBDBD;137    display:flex;138    align-items:center;139    justify-content:center;140    color:#757575;141    font-size:32px;142    text-align:center;143  }144  .card .time-badge{145    position:absolute;146    top:20px;147    left:24px;148    padding:8px 14px;149    font-size:26px;150    color:#fff;151    background:rgba(0,0,0,0.45);152    border-radius:18px;153  }154  .card .content{155    position:absolute;156    left:30px;157    right:120px;158    bottom:44px;159    color:#fff;160    text-shadow:0 2px 8px rgba(0,0,0,0.35);161  }162  .card .title{163    font-size:48px;164    font-weight:800;165    margin:0 0 6px;166  }167  .card .subtitle{168    font-size:30px;169    opacity:.95;170    margin:0;171  }172  .play{173    position:absolute;174    right:28px;175    bottom:28px;176    width:92px;177    height:92px;178    border-radius:50%;179    background:rgba(255,255,255,0.85);180    display:flex;181    align-items:center;182    justify-content:center;183    box-shadow:0 6px 16px rgba(0,0,0,0.15);184  }185  .play svg{ width:42px; height:42px; fill:var(--text); transform:translateX(2px); }186  .promo-card{187    margin:0 100px;188    height:300px;189    border-radius:34px;190    overflow:hidden;191    position:relative;192    box-shadow:0 12px 30px rgba(0,0,0,0.08);193  }194  .promo-card .img{195    height:100%;196    width:100%;197    background:#E0E0E0;198    border:1px solid #BDBDBD;199    display:flex;200    align-items:center;201    justify-content:center;202    color:#757575;203    font-size:32px;204  }205  .premium-banner{206    position:absolute;207    left:0;208    right:0;209    bottom:210px;210    margin:0 0;211    height:120px;212    display:flex;213    align-items:center;214    padding:0 34px;215    background:linear-gradient(90deg, #7B61FF 0%, #FF77C8 100%);216    color:#fff;217    font-size:34px;218    box-shadow:0 8px 22px rgba(123,97,255,0.35);219  }220  .premium-banner .close{221    margin-left:auto;222    width:44px;223    height:44px;224    border-radius:50%;225    border:2px solid rgba(255,255,255,0.8);226    display:flex;227    align-items:center;228    justify-content:center;229    font-size:28px;230    opacity:0.9;231  }232  .bottom-nav{233    position:absolute;234    left:0;235    right:0;236    bottom:0;237    height:200px;238    background:#fff;239    border-top:1px solid #E9E9EF;240    display:flex;241    align-items:center;242    justify-content:space-around;243    padding-bottom:26px;244    box-sizing:border-box;245  }246  .tab{247    width:160px;248    display:flex;249    flex-direction:column;250    align-items:center;251    gap:16px;252    font-size:28px;253    color:#A0A0AA;254  }255  .tab.active{ color:var(--accent); }256  .tab svg{ width:56px; height:56px; }257  .home-indicator{258    position:absolute;259    bottom:8px;260    left:50%;261    transform:translateX(-50%);262    width:260px;263    height:10px;264    background:#000;265    opacity:0.08;266    border-radius:100px;267  }268  /* Utility star icon for banner */269  .spark{270    width:46px;271    height:46px;272    margin-right:16px;273  }274</style>275</head>276<body>277<div id="render-target">278  <div class="top-black"></div>279 280  <div class="hero">281    <div class="img">[IMG: Ocean at sunset with reflective sphere and inspirational quote]</div>282  </div>283 284  <div class="quick-actions">285    <div class="qa-card">286      <svg class="icon" viewBox="0 0 24 24">287        <path fill="currentColor" d="M12 21s-6-4.35-8.5-6.86C1.8 12.5 2 9.5 4.2 7.8 6 6.4 8.6 6.9 10 8.5c1.4-1.6 4-2.1 5.8-.7 2.2 1.7 2.4 4.7.7 6.34C18 16.65 12 21 12 21z"/>288      </svg>289      <span>Favorites</span>290    </div>291    <div class="qa-card">292      <svg class="icon" viewBox="0 0 24 24">293        <path fill="currentColor" d="M4 4h16v11H7l-3 3V4z"/>294      </svg>295      <span>Mood Check‑in</span>296    </div>297    <div class="qa-card">298      <svg class="icon" viewBox="0 0 24 24">299        <path fill="currentColor" d="M3 8c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2" opacity=".9"/>300        <path fill="currentColor" d="M3 12c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2" opacity=".6"/>301        <path fill="currentColor" d="M3 16c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2" opacity=".4"/>302      </svg>303      <span>Breath Ex.</span>304    </div>305  </div>306 307  <div class="section">308    <h2>Here's your daily guide</h2>309    <p>Handpicked content just for you</p>310  </div>311 312  <div class="timeline">313    <span class="dot checked d1"></span>314 315    <div class="card" style="margin-left:0;">316      <div class="img">[IMG: Cozy morning routine scene]</div>317      <div class="time-badge">2 min</div>318      <div class="content">319        <h3 class="title">Begin your journey</h3>320        <p class="subtitle">How can you get a good start today?</p>321      </div>322      <div class="play">323        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>324      </div>325    </div>326 327    <span class="dot d2"></span>328 329    <div class="card" style="margin-left:0;">330      <div class="img">[IMG: Starry night sky with shooting star]</div>331      <div class="time-badge">10 min</div>332      <div class="content">333        <h3 class="title">Start your first program</h3>334        <p class="subtitle">Deepening breath</p>335      </div>336      <div class="play">337        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>338      </div>339    </div>340  </div>341 342  <div class="promo-card">343    <div class="img">[IMG: Purple gradient card with friendly mascot and chat bubble]</div>344  </div>345 346  <div class="premium-banner">347    <svg class="spark" viewBox="0 0 24 24" fill="none">348      <path d="M12 2l1.6 4.2L18 8l-4.4 1.8L12 14l-1.6-4.2L6 8l4.4-1.8L12 2z" fill="#fff" opacity=".95"/>349    </svg>350    <div>Start your Premium membership with free trial now.</div>351    <div class="close">✕</div>352  </div>353 354  <div class="bottom-nav">355    <div class="tab active">356      <svg viewBox="0 0 24 24" fill="none">357        <path d="M4 10l8-6 8 6v9a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9z" stroke="currentColor" stroke-width="2" fill="none"/>358      </svg>359      <div>Today</div>360    </div>361    <div class="tab">362      <svg viewBox="0 0 24 24" fill="none">363        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>364        <path d="M12 6v6l4 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>365      </svg>366      <div>Meditation</div>367    </div>368    <div class="tab">369      <svg viewBox="0 0 24 24" fill="none">370        <path d="M21 14a7 7 0 1 1-7-7 5 5 0 0 0 7 7z" stroke="currentColor" stroke-width="2"/>371      </svg>372      <div>Sleep</div>373    </div>374    <div class="tab">375      <svg viewBox="0 0 24 24" fill="none">376        <path d="M9 18V6l10-2v12" stroke="currentColor" stroke-width="2"/>377        <circle cx="7" cy="18" r="2" fill="currentColor"/>378        <circle cx="17" cy="16" r="2" fill="currentColor"/>379      </svg>380      <div>Music</div>381    </div>382    <div class="tab">383      <svg viewBox="0 0 24 24" fill="none">384        <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>385        <path d="M4 20c2-4 6-6 8-6s6 2 8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>386      </svg>387      <div>Profile</div>388    </div>389  </div>390 391  <div class="home-indicator"></div>392</div>393</body>394</html>