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>UI Recreation - Night Meditation Playlist</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0b0b0b;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 110px;20    background: rgba(0,0,0,0.65);21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 36px;23    box-sizing: border-box;24  }25  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 1px; }26  .status-center, .status-right { display: flex; align-items: center; gap: 22px; }27  .status-icon svg { fill: #eaeaea; }28 29  /* Video area / image placeholder */30  .video-area {31    position: absolute; top: 110px; left: 0; width: 1080px; height: 900px;32    background: #121212;33    display: flex; align-items: center; justify-content: center;34  }35  .img-placeholder {36    width: 1020px; height: 840px;37    background: #E0E0E0;38    border: 1px solid #BDBDBD;39    display: flex; align-items: center; justify-content: center;40    color: #757575; font-size: 42px; font-weight: 600; text-align: center;41  }42 43  /* Divider line resembling player/edge */44  .divider {45    position: absolute; top: 1010px; left: 0; width: 1080px; height: 8px;46    background: #1f1f1f;47  }48 49  /* Bottom sheet */50  .sheet {51    position: absolute; top: 1018px; left: 0;52    width: 1080px; height: 1382px;53    background: #121212;54    border-top-left-radius: 24px; border-top-right-radius: 24px;55    box-shadow: 0 -10px 30px rgba(0,0,0,0.4);56    overflow: hidden;57  }58  .sheet-handle {59    width: 140px; height: 12px; background: #2a2a2a;60    border-radius: 6px; margin: 16px auto 8px auto;61  }62  .sheet-header {63    display: flex; align-items: center; justify-content: space-between;64    padding: 24px 32px 18px 32px;65  }66  .sheet-title {67    font-size: 48px; font-weight: 700;68  }69  .sheet-sub {70    font-size: 44px; color: #b8b8b8; margin-left: 10px;71  }72  .header-right {73    display: flex; align-items: center; gap: 26px;74  }75  .icon-btn { width: 56px; height: 56px; display: grid; place-items: center; }76  .icon-btn svg { stroke: #eaeaea; fill: none; stroke-width: 7; }77 78  .controls {79    display: flex; gap: 34px; padding: 12px 40px 12px 40px;80  }81  .controls svg { fill: none; stroke: #cfcfcf; stroke-width: 7; }82 83  /* List items */84  .list {85    padding: 10px 20px 30px 20px;86  }87  .row {88    display: grid;89    grid-template-columns: 64px 340px 1fr 80px;90    gap: 26px;91    align-items: start;92    padding: 26px 12px;93    border-radius: 14px;94  }95  .reorder {96    display: flex; align-items: center; justify-content: center; height: 200px;97  }98  .thumb {99    width: 340px; height: 200px; border-radius: 16px; overflow: hidden; position: relative;100  }101  .thumb .img-placeholder {102    width: 100%; height: 100%; font-size: 30px; font-weight: 600;103  }104  .thumb-time {105    position: absolute; right: 12px; bottom: 12px;106    background: rgba(0,0,0,0.75); color: #fff;107    font-size: 30px; padding: 6px 10px; border-radius: 8px;108  }109  .meta .title {110    font-size: 40px; line-height: 48px; font-weight: 700; color: #ffffff;111    margin-bottom: 8px;112  }113  .meta .sub {114    font-size: 32px; color: #bdbdbd; margin-bottom: 14px;115  }116  .actions {117    display: flex; gap: 26px; margin-top: 8px;118  }119  .actions svg, .menu svg { fill: none; stroke: #cfcfcf; stroke-width: 7; }120  .menu { display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }121 122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-left">10:20</div>130    <div class="status-center">131      <span class="status-icon">132        <!-- Headphones -->133        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 13v5h3v-5a5 5 0 1 1 10 0v5h3v-5C20 8.6 16.4 5 12 5S4 8.6 4 13z"/></svg>134      </span>135      <span class="status-icon">136        <!-- Battery -->137        <svg width="34" height="34" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2"></rect><rect x="20" y="10" width="2" height="4"></rect></svg>138      </span>139    </div>140    <div class="status-right">141      <span class="status-icon">142        <!-- Wifi -->143        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M11.5 19.5l1.5 1.5 1.5-1.5-1.5-1.5-1.5 1.5z" stroke="#eaeaea" fill="none" stroke-width="2"/></svg>144      </span>145      <span class="status-icon">146        <!-- Battery full -->147        <svg width="34" height="34" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" fill="#eaeaea"></rect><rect x="20" y="10" width="2" height="4" fill="#eaeaea"></rect></svg>148      </span>149    </div>150  </div>151 152  <!-- Video area -->153  <div class="video-area">154    <div class="img-placeholder">[IMG: Meditation countdown screen]</div>155  </div>156 157  <div class="divider"></div>158 159  <!-- Bottom sheet -->160  <div class="sheet">161    <div class="sheet-handle"></div>162    <div class="sheet-header">163      <div style="display:flex; align-items:center;">164        <div class="sheet-title">Night meditation</div>165        <div class="sheet-sub">· 1/2</div>166      </div>167      <div class="header-right">168        <!-- Close X -->169        <div class="icon-btn">170          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>171        </div>172      </div>173    </div>174 175    <!-- Controls row (repeat/shuffle) -->176    <div class="controls">177      <!-- Repeat icon -->178      <svg width="60" height="60" viewBox="0 0 24 24">179        <path d="M4 7h10l-2-2M4 7v6a5 5 0 0 0 5 5h7" />180        <path d="M20 17H10l2 2M20 17V11a5 5 0 0 0-5-5H8" />181      </svg>182      <!-- Shuffle icon -->183      <svg width="60" height="60" viewBox="0 0 24 24">184        <path d="M4 17h4l6-6h6M4 7h4l2 2M16 7h4l-3 3M16 17h4l-3-3" />185      </svg>186    </div>187 188    <div class="list">189      <!-- Row 1 -->190      <div class="row">191        <div class="reorder">192          <!-- Simple reorder (=) icon -->193          <svg width="46" height="46" viewBox="0 0 24 24"><path d="M4 9h16M4 15h16" stroke="#bdbdbd" stroke-width="3" fill="none"/></svg>194        </div>195        <div class="thumb">196          <div class="img-placeholder">[IMG: Thumbnail - LISTEN FOR 21 DAYS]</div>197        </div>198        <div class="meta">199          <div class="title">Most Powerful Meditation for ...</div>200          <div class="sub">Aaron Doughty<br>6.9M views · 5 years ago</div>201          <div class="actions">202            <!-- Thumbs up -->203            <svg width="44" height="44" viewBox="0 0 24 24">204              <path d="M2 11h5v9H2zM7 11l5-8 1 1v7h7l-2 9H7z" />205            </svg>206            <!-- Download icon -->207            <svg width="44" height="44" viewBox="0 0 24 24">208              <path d="M12 3v12M7 10l5 5 5-5M4 21h16" />209            </svg>210          </div>211        </div>212        <div class="menu">213          <!-- Vertical dots -->214          <svg width="40" height="40" viewBox="0 0 24 24">215            <circle cx="12" cy="5" r="2" fill="#cfcfcf"></circle>216            <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>217            <circle cx="12" cy="19" r="2" fill="#cfcfcf"></circle>218          </svg>219        </div>220      </div>221 222      <!-- Row 2 -->223      <div class="row">224        <div class="reorder">225          <svg width="46" height="46" viewBox="0 0 24 24"><path d="M4 9h16M4 15h16" stroke="#bdbdbd" stroke-width="3" fill="none"/></svg>226        </div>227        <div class="thumb">228          <div class="img-placeholder">[IMG: Thumbnail - ATTRACT YOUR SOULMATE]</div>229          <div class="thumb-time">26:18</div>230        </div>231        <div class="meta">232          <div class="title">Powerful Love Affirmations For Singles To Attract Soulmate ...</div>233          <div class="sub">Mind Body Soul<br>744K views · 1 year ago</div>234        </div>235        <div class="menu">236          <svg width="40" height="40" viewBox="0 0 24 24">237            <circle cx="12" cy="5" r="2" fill="#cfcfcf"></circle>238            <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>239            <circle cx="12" cy="19" r="2" fill="#cfcfcf"></circle>240          </svg>241        </div>242      </div>243    </div>244  </div>245 246</div>247</body>248</html>