GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Rise and Greet the Day</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111820;14    color: #E8EDF2;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 110px;24    background: #2B333B;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37    opacity: 0.9;38  }39  .icon {40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* Hero banner */46  .hero {47    position: absolute;48    top: 110px;49    left: 0;50    width: 100%;51    height: 540px;52    background: #E0E0E0;53    border-bottom: 1px solid #BDBDBD;54    display: flex;55    align-items: flex-end;56    padding: 0 40px 40px 40px;57    box-sizing: border-box;58    color: #ffffff;59  }60  .hero-label {61    position: absolute;62    inset: 0;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #6B6B6B;67    font-weight: 600;68  }69  .hero-title {70    position: absolute;71    left: 160px;72    bottom: 120px;73    font-size: 64px;74    line-height: 1.1;75    color: #ffffff;76    text-shadow: 0 2px 6px rgba(0,0,0,0.35);77  }78  .back-btn {79    position: absolute;80    top: 34px;81    left: 28px;82    width: 84px;83    height: 84px;84    display: flex;85    align-items: center;86    justify-content: center;87  }88  .plus-btn {89    position: absolute;90    top: 36px;91    right: 36px;92    width: 90px;93    height: 90px;94    border-radius: 14px;95    background: rgba(0,0,0,0.35);96    display: flex;97    align-items: center;98    justify-content: center;99  }100 101  .play-fab {102    position: absolute;103    right: 56px;104    bottom: -70px;105    width: 160px;106    height: 160px;107    background: #7FD4D3;108    border-radius: 50%;109    box-shadow: 0 12px 24px rgba(0,0,0,0.35);110    display: flex;111    align-items: center;112    justify-content: center;113  }114 115  /* Section below hero */116  .content {117    position: absolute;118    top: 650px;119    left: 0;120    width: 100%;121    height: calc(2400px - 650px);122    background: #121A22;123  }124 125  .download-row {126    height: 150px;127    background: #1A232D;128    display: flex;129    align-items: center;130    justify-content: space-between;131    padding: 0 44px;132    box-sizing: border-box;133    border-bottom: 1px solid #263140;134    font-size: 48px;135  }136 137  /* Toggle */138  .toggle {139    width: 110px;140    height: 60px;141    background: #2A3440;142    border-radius: 40px;143    position: relative;144    transition: background 0.2s ease;145  }146  .toggle::after {147    content: "";148    position: absolute;149    top: 8px; left: 8px;150    width: 44px; height: 44px;151    background: #C8CDD3;152    border-radius: 50%;153    transition: left 0.2s ease;154  }155  .toggle.on { background: #8AD9D8; }156  .toggle.on::after { left: 58px; background: #ffffff; }157 158  /* Author and description */159  .author {160    display: flex;161    align-items: center;162    gap: 28px;163    padding: 34px 44px 10px 44px;164    box-sizing: border-box;165  }166  .avatar {167    width: 120px;168    height: 120px;169    border-radius: 60px;170    background: #2A3440;171    display: flex;172    align-items: center;173    justify-content: center;174    color: #9AA5B1;175    font-weight: 700;176  }177  .author-name {178    font-size: 44px;179    color: #C9D3DE;180  }181  .desc {182    padding: 10px 44px 0 44px;183    font-size: 40px;184    line-height: 1.5;185    color: #9FB0C0;186  }187 188  .section-title {189    padding: 44px;190    padding-top: 56px;191    font-size: 38px;192    color: #9AA5B1;193    letter-spacing: 3px;194  }195 196  .session-list { padding: 0 20px; }197 198  .session {199    display: grid;200    grid-template-columns: 120px 1fr 90px 150px;201    align-items: center;202    gap: 10px;203    padding: 32px 24px;204    border-bottom: 1px solid #263140;205  }206  .session .index {207    font-size: 44px;208    color: #C9D3DE;209    text-align: center;210  }211  .session .title {212    font-size: 48px;213    color: #E6ECF2;214    white-space: nowrap;215    overflow: hidden;216    text-overflow: ellipsis;217  }218  .session.locked .title { color: #9AA5B1; }219  .duration {220    font-size: 44px;221    text-align: right;222    color: #C9D3DE;223  }224  .lock {225    display: flex;226    align-items: center;227    justify-content: center;228    opacity: 0.85;229  }230 231  /* Helper for thin label within hero placeholder */232  .sr {233    position: absolute;234    left: 0; top: 0;235    width: 100%; height: 100%;236    pointer-events: none;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <!-- Status bar -->244  <div class="status-bar">245    <div style="font-size:46px;">10:49</div>246    <div class="status-right">247      <!-- Wi‑Fi icon -->248      <span class="icon">249        <svg width="48" height="40" viewBox="0 0 24 24" fill="none">250          <path d="M2 8c5-4 15-4 20 0" stroke="#EAF1F6" stroke-width="2" stroke-linecap="round"/>251          <path d="M5 12c3-3 11-3 14 0" stroke="#EAF1F6" stroke-width="2" stroke-linecap="round"/>252          <path d="M9 16c2-2 4-2 6 0" stroke="#EAF1F6" stroke-width="2" stroke-linecap="round"/>253          <circle cx="12" cy="19" r="1.6" fill="#EAF1F6"/>254        </svg>255      </span>256      <!-- Battery icon -->257      <span class="icon">258        <svg width="72" height="40" viewBox="0 0 30 14" fill="none">259          <rect x="1" y="1" width="24" height="12" rx="2" stroke="#EAF1F6" stroke-width="2"/>260          <rect x="3" y="3" width="18" height="8" rx="1.5" fill="#EAF1F6"/>261          <rect x="25" y="4" width="4" height="6" rx="1" fill="#EAF1F6"/>262        </svg>263      </span>264    </div>265  </div>266 267  <!-- Hero banner -->268  <div class="hero">269    <div class="hero-label">[IMG: Person waking in bed]</div>270 271    <!-- Back button -->272    <div class="back-btn">273      <svg width="64" height="64" viewBox="0 0 24 24">274        <path d="M15 19L8 12l7-7" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>275      </svg>276    </div>277 278    <!-- Plus button -->279    <div class="plus-btn">280      <svg width="48" height="48" viewBox="0 0 24 24">281        <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round"/>282      </svg>283    </div>284 285    <!-- Title -->286    <div class="hero-title">Rise and Greet the Day</div>287 288    <!-- Play floating action button -->289    <div class="play-fab">290      <svg width="72" height="72" viewBox="0 0 24 24">291        <path d="M8 5l11 7-11 7V5z" fill="#0B4E4D"/>292      </svg>293    </div>294  </div>295 296  <!-- Content Area -->297  <div class="content">298    <!-- Download row -->299    <div class="download-row">300      <div>Download</div>301      <div class="toggle"></div>302    </div>303 304    <!-- Author -->305    <div class="author">306      <div class="avatar">307        <svg width="56" height="56" viewBox="0 0 24 24">308          <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-5 0-9 2.5-9 5v1h18v-1c0-2.5-4-5-9-5Z" fill="#9AA5B1"/>309        </svg>310      </div>311      <div class="author-name">Nico Hase</div>312    </div>313 314    <!-- Description -->315    <div class="desc">316      Wake up slowly and give yourself the time you need to start the new day in a positive way. Discover how to set an intention, boost motivation, and more.317    </div>318 319    <!-- Sessions -->320    <div class="section-title">SESSIONS</div>321    <div class="session-list">322 323      <div class="session">324        <div class="index">1</div>325        <div class="title">Awaken With Intention</div>326        <div class="lock"></div>327        <div class="duration">5:17</div>328      </div>329 330      <div class="session locked">331        <div class="index">2</div>332        <div class="title">Awaken With Gratitude</div>333        <div class="lock">334          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">335            <rect x="4" y="10" width="16" height="10" rx="2" stroke="#C9D3DE" stroke-width="2"/>336            <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#C9D3DE" stroke-width="2" stroke-linecap="round"/>337          </svg>338        </div>339        <div class="duration">5:39</div>340      </div>341 342      <div class="session locked">343        <div class="index">3</div>344        <div class="title">Awaken With Kindness</div>345        <div class="lock">346          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">347            <rect x="4" y="10" width="16" height="10" rx="2" stroke="#C9D3DE" stroke-width="2"/>348            <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#C9D3DE" stroke-width="2" stroke-linecap="round"/>349          </svg>350        </div>351        <div class="duration">5:37</div>352      </div>353 354      <div class="session locked">355        <div class="index">4</div>356        <div class="title">Awaken With Patience</div>357        <div class="lock">358          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">359            <rect x="4" y="10" width="16" height="10" rx="2" stroke="#C9D3DE" stroke-width="2"/>360            <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#C9D3DE" stroke-width="2" stroke-linecap="round"/>361          </svg>362        </div>363        <div class="duration">5:16</div>364      </div>365 366      <div class="session locked">367        <div class="index">5</div>368        <div class="title">Awaken With Motivation</div>369        <div class="lock">370          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">371            <rect x="4" y="10" width="16" height="10" rx="2" stroke="#C9D3DE" stroke-width="2"/>372            <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#C9D3DE" stroke-width="2" stroke-linecap="round"/>373          </svg>374        </div>375        <div class="duration">5:17</div>376      </div>377 378    </div>379  </div>380</div>381</body>382</html>