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>Meditation App - The Basics</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    color: #FFFFFF;15  }16 17  /* Top segmented control */18  .top-bar {19    position: absolute;20    top: 110px;21    left: 0;22    right: 0;23    display: flex;24    justify-content: center;25    align-items: center;26    pointer-events: none;27  }28  .segment-wrap {29    width: 700px;30    height: 96px;31    background: #2A2A2E;32    border-radius: 56px;33    position: relative;34    display: flex;35    padding: 8px;36    box-sizing: border-box;37  }38  .segment {39    flex: 1;40    display: flex;41    align-items: center;42    justify-content: center;43    border-radius: 48px;44    font-weight: 700;45    letter-spacing: 1px;46    font-size: 36px;47    color: #A5A6AA;48  }49  .segment.selected {50    background: #FFFFFF;51    color: #1A1A1D;52    box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset;53  }54 55  /* Heart icon */56  .heart-btn {57    position: absolute;58    top: 120px;59    right: 90px;60    width: 72px;61    height: 72px;62  }63  .heart-btn svg { width: 100%; height: 100%; }64 65  /* Title */66  .title-block {67    position: absolute;68    top: 370px;69    left: 0;70    right: 0;71    text-align: center;72  }73  .title {74    font-size: 96px;75    font-weight: 700;76    margin: 0 40px 22px;77    letter-spacing: 1px;78  }79  .subtitle {80    font-size: 44px;81    color: #D0544E;82    letter-spacing: 1px;83  }84 85  /* Video frame placeholder */86  .video-frame {87    position: absolute;88    top: 640px;89    left: 50%;90    transform: translateX(-50%);91    width: 1000px;92    height: 560px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #555555;99    font-size: 36px;100    border-radius: 8px;101  }102 103  /* Controls */104  .controls {105    position: absolute;106    bottom: 340px;107    left: 0;108    right: 0;109    display: flex;110    justify-content: center;111    gap: 180px;112    align-items: center;113  }114  .ctrl-btn {115    width: 86px;116    height: 86px;117  }118  .ctrl-btn svg { width: 100%; height: 100%; fill: #FFFFFF; }119 120  /* Progress bar */121  .progress {122    position: absolute;123    bottom: 250px;124    left: 60px;125    right: 60px;126  }127  .track {128    position: relative;129    height: 10px;130    background: #2F2F33;131    border-radius: 10px;132  }133  .filled {134    position: absolute;135    height: 10px;136    background: #FFFFFF;137    border-radius: 10px 0 0 10px;138    width: 120px; /* approx 3 seconds */139  }140  .knob {141    position: absolute;142    top: 50%;143    left: 120px;144    transform: translate(-50%, -50%);145    width: 28px;146    height: 28px;147    background: #FFFFFF;148    border-radius: 50%;149    box-shadow: 0 2px 6px rgba(0,0,0,0.4);150  }151  .time-row {152    display: flex;153    justify-content: space-between;154    color: #C9C9C9;155    font-size: 34px;156    margin-top: 18px;157  }158 159  /* Home indicator */160  .home-indicator {161    position: absolute;162    bottom: 70px;163    left: 50%;164    transform: translateX(-50%);165    width: 500px;166    height: 10px;167    background: #FFFFFF;168    border-radius: 6px;169    opacity: 0.8;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Segmented control -->177  <div class="top-bar">178    <div class="segment-wrap">179      <div class="segment selected">LEARN</div>180      <div class="segment">MEDITATE</div>181    </div>182  </div>183 184  <!-- Heart icon -->185  <div class="heart-btn" aria-label="Favorite">186    <svg viewBox="0 0 24 24">187      <path d="M12 21s-6.7-4.2-9.4-7C.7 11.9.5 8.4 3 6.4c2.2-1.8 5.1-.9 6.4 1C10.7 5.5 13.6 4.6 15.8 6.4c2.5 2 2.3 5.5.4 7.6-2.7 2.8-9.2 7-9.2 7z" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>188    </svg>189  </div>190 191  <!-- Title -->192  <div class="title-block">193    <div class="title">The Basics</div>194    <div class="subtitle">Session 2</div>195  </div>196 197  <!-- Video frame placeholder -->198  <div class="video-frame">[IMG: Video Frame]</div>199 200  <!-- Controls -->201  <div class="controls">202    <!-- Previous -->203    <div class="ctrl-btn">204      <svg viewBox="0 0 48 48">205        <path d="M10 10h4v28h-4zM38 12v24L18 24 38 12z"/>206      </svg>207    </div>208    <!-- Pause -->209    <div class="ctrl-btn">210      <svg viewBox="0 0 48 48">211        <path d="M12 10h8v28h-8zM28 10h8v28h-8z"/>212      </svg>213    </div>214    <!-- Next -->215    <div class="ctrl-btn">216      <svg viewBox="0 0 48 48">217        <path d="M34 10h4v28h-4zM10 12v24l20-12L10 12z"/>218      </svg>219    </div>220  </div>221 222  <!-- Progress bar -->223  <div class="progress">224    <div class="track">225      <div class="filled"></div>226      <div class="knob"></div>227    </div>228    <div class="time-row">229      <div>0:03</div>230      <div>4:55</div>231    </div>232  </div>233 234  <!-- Home indicator -->235  <div class="home-indicator"></div>236 237</div>238</body>239</html>