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>The Basics - Session 2</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  .segment-wrapper {19    position: absolute;20    top: 140px;21    left: 160px;22    width: 760px;23    height: 110px;24    background: #1f2023;25    border-radius: 60px;26    display: flex;27    padding: 8px;28    box-sizing: border-box;29  }30  .segment {31    flex: 1;32    border-radius: 52px;33    display: flex;34    align-items: center;35    justify-content: center;36    font-weight: 600;37    font-size: 42px;38    letter-spacing: 0.5px;39    color: #D7D7D7;40  }41  .segment.active {42    background: #E6E6E6;43    color: #1a1a1a;44    box-shadow: 0 2px 6px rgba(255,255,255,0.08) inset;45  }46 47  /* Heart icon on the right */48  .heart {49    position: absolute;50    top: 155px;51    right: 70px;52    width: 70px;53    height: 70px;54  }55  .heart svg { width: 100%; height: 100%; }56  .heart svg path { fill: none; stroke: #FFFFFF; stroke-width: 4; }57 58  /* Title & subtitle */59  .title {60    position: absolute;61    top: 360px;62    width: 100%;63    text-align: center;64    font-size: 88px;65    font-weight: 600;66    letter-spacing: 0.5px;67  }68  .subtitle {69    position: absolute;70    top: 470px;71    width: 100%;72    text-align: center;73    font-size: 40px;74    color: #d96b6b;75    font-weight: 500;76  }77 78  /* Video area */79  .video-area {80    position: absolute;81    top: 640px;82    left: 0;83    width: 1080px;84    height: 860px;85    display: flex;86    align-items: center;87    justify-content: center;88    background: #E0E0E0;89    border-top: 1px solid #4a4a4a;90    border-bottom: 1px solid #4a4a4a;91    color: #757575;92    font-size: 42px;93    letter-spacing: 0.2px;94  }95 96  /* Controls row */97  .controls-row {98    position: absolute;99    bottom: 350px;100    left: 70px;101    right: 70px;102    display: flex;103    align-items: center;104    gap: 130px;105  }106  .cc-btn {107    width: 92px;108    height: 72px;109    border-radius: 12px;110    background: #2a2a2a;111    border: 2px solid #3a3a3a;112    display: flex;113    align-items: center;114    justify-content: center;115    color: #FFFFFF;116    font-weight: 700;117    font-size: 34px;118  }119  .icon-btn {120    width: 80px;121    height: 80px;122    display: flex;123    align-items: center;124    justify-content: center;125  }126  .icon-btn svg { width: 76px; height: 76px; }127  .icon-btn svg path, .icon-btn svg rect, .icon-btn svg polygon, .icon-btn svg line {128    fill: none; stroke: #FFFFFF; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round;129  }130 131  /* Progress bar */132  .progress-wrap {133    position: absolute;134    bottom: 270px;135    left: 60px;136    width: 960px;137  }138  .track {139    position: relative;140    height: 8px;141    background: #2a2a2a;142    border-radius: 8px;143    overflow: hidden;144  }145  .progress {146    position: absolute;147    left: 0;148    top: 0;149    height: 8px;150    width: 700px; /* current progress */151    background: #e2e2e2;152    border-radius: 8px;153  }154  .thumb {155    position: absolute;156    top: -16px;157    left: 700px;158    width: 36px;159    height: 36px;160    background: #FFFFFF;161    border-radius: 50%;162    box-shadow: 0 2px 10px rgba(255,255,255,0.25);163  }164  .time-left, .time-right {165    position: absolute;166    bottom: 210px;167    font-size: 34px;168    color: #CFCFCF;169  }170  .time-left { left: 60px; }171  .time-right { right: 60px; text-align: right; }172 173  /* Home indicator */174  .home-indicator {175    position: absolute;176    bottom: 40px;177    left: 240px;178    width: 600px;179    height: 12px;180    background: #FFFFFF;181    opacity: 0.75;182    border-radius: 6px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Segmented control -->190  <div class="segment-wrapper">191    <div class="segment active">LEARN</div>192    <div class="segment">MEDITATE</div>193  </div>194 195  <!-- Heart icon -->196  <div class="heart" aria-label="Favorite">197    <svg viewBox="0 0 100 100">198      <path d="M50 84 C40 72 18 58 18 36 C18 24 27 16 38 16 C45 16 50 20 52 24 C54 20 59 16 66 16 C77 16 86 24 86 36 C86 58 64 72 54 84 Z"></path>199    </svg>200  </div>201 202  <!-- Title -->203  <div class="title">The Basics</div>204  <div class="subtitle">Session 2</div>205 206  <!-- Video area placeholder -->207  <div class="video-area">[IMG: Interview video frame]</div>208 209  <!-- Controls -->210  <div class="controls-row">211    <div class="cc-btn">CC</div>212 213    <div class="icon-btn" aria-label="Previous">214      <svg viewBox="0 0 100 100">215        <line x1="24" y1="20" x2="24" y2="80"></line>216        <polygon points="76,20 36,50 76,80"></polygon>217      </svg>218    </div>219 220    <div class="icon-btn" aria-label="Pause">221      <svg viewBox="0 0 100 100">222        <rect x="26" y="20" width="18" height="60"></rect>223        <rect x="56" y="20" width="18" height="60"></rect>224      </svg>225    </div>226 227    <div class="icon-btn" aria-label="Next">228      <svg viewBox="0 0 100 100">229        <line x1="76" y1="20" x2="76" y2="80"></line>230        <polygon points="24,20 64,50 24,80"></polygon>231      </svg>232    </div>233  </div>234 235  <!-- Progress & Times -->236  <div class="progress-wrap">237    <div class="track"></div>238    <div class="progress"></div>239    <div class="thumb"></div>240  </div>241  <div class="time-left">0:05</div>242  <div class="time-right">1:24</div>243 244  <!-- Home indicator -->245  <div class="home-indicator"></div>246</div>247</body>248</html>