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>Dark Note - Movies</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #202124;20    color: #EAEAEA;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 96px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 40px;34    font-size: 36px;35    color: #EDEDED;36    opacity: 0.95;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icons svg {44    width: 38px;45    height: 38px;46    stroke: #EDEDED;47    fill: none;48    stroke-width: 2.4;49  }50 51  /* Top app bar */52  .app-bar {53    position: absolute;54    top: 96px;55    left: 0;56    width: 1080px;57    height: 104px;58    display: flex;59    align-items: center;60    justify-content: space-between;61    padding: 0 36px;62  }63  .app-bar .left,64  .app-bar .right {65    display: flex;66    align-items: center;67    gap: 28px;68  }69  .icon {70    width: 56px;71    height: 56px;72    display: inline-flex;73    align-items: center;74    justify-content: center;75  }76  .icon svg {77    width: 56px;78    height: 56px;79    stroke: #A8A8A8;80    fill: none;81    stroke-width: 2.6;82  }83 84  /* Content */85  .content {86    position: absolute;87    top: 240px;88    left: 72px;89    right: 72px;90  }91  .title {92    font-size: 88px;93    font-weight: 500;94    margin: 8px 0 24px;95    color: #E6E6E6;96    letter-spacing: -0.5px;97  }98  .subtitle {99    font-size: 44px;100    color: #B8B8B8;101  }102 103  /* Bottom actions */104  .bottom-bar {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 120px;109    height: 96px;110    display: flex;111    align-items: center;112    justify-content: space-between;113    padding: 0 36px;114  }115  .bottom-left, .bottom-right {116    display: flex;117    align-items: center;118    gap: 28px;119  }120  .bottom-bar .label {121    position: absolute;122    left: 50%;123    transform: translateX(-50%);124    color: #CFCFCF;125    font-size: 36px;126  }127  .bottom-icon svg {128    width: 56px;129    height: 56px;130    stroke: #B5B5B5;131    fill: none;132    stroke-width: 2.6;133  }134 135  /* Gesture bar */136  .gesture {137    position: absolute;138    bottom: 40px;139    left: 50%;140    transform: translateX(-50%);141    width: 320px;142    height: 10px;143    background: #D2D2D2;144    opacity: 0.7;145    border-radius: 8px;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="time">1:20</div>155    <div class="status-icons">156      <!-- Wi-Fi -->157      <svg viewBox="0 0 24 24">158        <path d="M2 8c5-4 15-4 20 0" />159        <path d="M5 12c3-3 11-3 14 0" />160        <path d="M8 16c2-2 6-2 8 0" />161        <circle cx="12" cy="20" r="1.6" fill="#EDEDED" stroke="none"/>162      </svg>163      <!-- Battery -->164      <svg viewBox="0 0 24 24">165        <rect x="2" y="7" width="18" height="10" rx="2"></rect>166        <rect x="20" y="10" width="2" height="4"></rect>167      </svg>168    </div>169  </div>170 171  <!-- Top App Bar -->172  <div class="app-bar">173    <div class="left">174      <!-- Back Arrow -->175      <div class="icon">176        <svg viewBox="0 0 24 24">177          <polyline points="15,4 7,12 15,20"></polyline>178        </svg>179      </div>180    </div>181    <div class="right">182      <!-- Pin -->183      <div class="icon">184        <svg viewBox="0 0 24 24">185          <path d="M8 3l4 4 5 1-6 6-2-2-5 7" />186        </svg>187      </div>188      <!-- Bell with plus -->189      <div class="icon">190        <svg viewBox="0 0 24 24">191          <path d="M12 4c-3 0-5 2-5 5v3l-2 2h14l-2-2V9c0-3-2-5-5-5z" />192          <path d="M9 18c.5 1 1.5 2 3 2s2.5-1 3-2" />193          <path d="M16 6h4" />194          <path d="M18 4v4" />195        </svg>196      </div>197      <!-- Archive/Download -->198      <div class="icon">199        <svg viewBox="0 0 24 24">200          <rect x="3" y="5" width="18" height="5" rx="1.5"></rect>201          <rect x="4" y="10" width="16" height="9" rx="1.5"></rect>202          <path d="M12 8v6" />203          <path d="M9 11l3 3 3-3" />204        </svg>205      </div>206    </div>207  </div>208 209  <!-- Content -->210  <div class="content">211    <div class="title">Movies</div>212    <div class="subtitle">Kill Bill</div>213  </div>214 215  <!-- Bottom Action Bar -->216  <div class="bottom-bar">217    <div class="bottom-left">218      <!-- Add box -->219      <div class="icon bottom-icon">220        <svg viewBox="0 0 24 24">221          <rect x="4" y="4" width="16" height="16" rx="2"></rect>222          <path d="M12 8v8" />223          <path d="M8 12h8" />224        </svg>225      </div>226      <!-- Palette -->227      <div class="icon bottom-icon">228        <svg viewBox="0 0 24 24">229          <circle cx="12" cy="12" r="7"></circle>230          <circle cx="9" cy="10" r="1.2" fill="#B5B5B5" stroke="none"></circle>231          <circle cx="15" cy="9" r="1.2" fill="#B5B5B5" stroke="none"></circle>232          <circle cx="16" cy="14" r="1.2" fill="#B5B5B5" stroke="none"></circle>233        </svg>234      </div>235    </div>236 237    <div class="label">Edited 10:18 AM</div>238 239    <div class="bottom-right">240      <!-- More vertical -->241      <div class="icon bottom-icon">242        <svg viewBox="0 0 24 24">243          <circle cx="12" cy="5" r="1.8" fill="#B5B5B5" stroke="none"></circle>244          <circle cx="12" cy="12" r="1.8" fill="#B5B5B5" stroke="none"></circle>245          <circle cx="12" cy="19" r="1.8" fill="#B5B5B5" stroke="none"></circle>246        </svg>247      </div>248    </div>249  </div>250 251  <!-- Gesture navigation pill -->252  <div class="gesture"></div>253</div>254</body>255</html>