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>Recorder Plus Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f0f10;14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    padding: 0 36px;25    box-sizing: border-box;26    color: #dcdcdc;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 36px;31    letter-spacing: 1px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-dot {39    width: 10px; height: 10px; background: #dcdcdc; border-radius: 50%;40  }41 42  /* Ad banner */43  .ad-banner {44    position: absolute;45    top: 100px;46    left: 0;47    width: 1080px;48    height: 220px;49    background: #E0E0E0;50    border-top: 1px solid #bdbdbd;51    border-bottom: 1px solid #bdbdbd;52    display: flex; align-items: center; justify-content: center;53    color: #5f5f5f;54    font-size: 36px;55  }56 57  /* App header */58  .app-header {59    position: absolute;60    top: 320px;61    left: 0;62    width: 1080px;63    height: 140px;64    display: flex;65    align-items: center;66    padding: 0 32px;67    box-sizing: border-box;68    color: #f2f2f2;69  }70  .app-header .title {71    font-weight: 700;72    font-size: 46px;73    letter-spacing: 1px;74    margin-left: 20px;75  }76  .accent { color: #c4745e; }77  .header-actions {78    margin-left: auto;79    display: flex;80    gap: 36px;81  }82 83  /* List */84  .list {85    position: absolute;86    top: 460px;87    left: 0;88    width: 1080px;89  }90  .item {91    display: flex;92    align-items: center;93    padding: 28px 32px;94    height: 180px;95    box-sizing: border-box;96    border-bottom: 1px solid rgba(255,255,255,0.05);97  }98  .play {99    width: 96px; height: 96px; border-radius: 50%;100    background: #1d1d1f;101    display: flex; align-items: center; justify-content: center;102    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);103    margin-right: 28px;104  }105  .meta { display: flex; flex-direction: column; }106  .title-main { font-size: 44px; margin-bottom: 8px; }107  .subtitle { font-size: 32px; color: #9aa0a6; }108  .item-right {109    margin-left: auto;110    display: flex;111    align-items: center;112    gap: 26px;113  }114  .duration { color: #bdbdbd; font-size: 34px; width: 120px; text-align: right; }115 116  /* Record button and gesture bar */117  .record-container {118    position: absolute;119    bottom: 160px;120    width: 100%;121    display: flex;122    justify-content: center;123  }124  .record-btn {125    width: 180px; height: 180px; border-radius: 50%;126    background: #151515;127    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);128    display: flex; align-items: center; justify-content: center;129  }130  .record-btn .dot {131    width: 80px; height: 80px; border-radius: 50%; background: #b26953;132  }133  .gesture {134    position: absolute;135    bottom: 60px;136    left: 50%;137    transform: translateX(-50%);138    width: 470px; height: 12px; background: #e5e5e5; border-radius: 10px; opacity: 0.9;139  }140 141  /* Modal overlay */142  .overlay {143    position: absolute;144    inset: 0;145    background: rgba(0,0,0,0.55);146  }147  .dialog {148    position: absolute;149    left: 50%;150    top: 58%;151    transform: translate(-50%, -50%);152    width: 890px;153    background: #1a1a1a;154    border-radius: 22px;155    box-shadow: 0 12px 40px rgba(0,0,0,0.6);156    padding: 48px 56px 44px;157    box-sizing: border-box;158  }159  .dialog .question {160    font-size: 48px;161    margin-bottom: 40px;162    color: #f0f0f0;163  }164  .dialog .actions {165    display: flex;166    justify-content: flex-end;167    gap: 60px;168  }169  .btn {170    font-size: 40px;171    letter-spacing: 1px;172    color: #d6d6d6;173  }174  .btn.accent { color: #d08068; }175 176  /* simple icon buttons */177  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }178  .kebab .dot { width: 8px; height: 8px; background: #bdbdbd; border-radius: 50%; margin: 4px 0; display: block; }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div>6:19</div>187    <div class="status-icons">188      <div class="status-dot"></div>189      <div class="status-dot"></div>190      <svg width="36" height="36" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M2 18h20v3H2zM3 14h18v2H3zM6 10h12v2H6zM9 6h6v2H9z"/></svg>191      <svg width="36" height="36" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M16 7c0-2.76-2.24-5-5-5S6 4.24 6 7c0 3.87 4.5 8.43 4.5 8.43.27.29.73.29 1 0C11.5 15.43 16 10.87 16 7zM11 9.5c-1.38 0-2.5-1.12-2.5-2.5S9.62 4.5 11 4.5s2.5 1.12 2.5 2.5S12.38 9.5 11 9.5z"/></svg>192      <svg width="36" height="36" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M11 20v-6H7l5-7 5 7h-4v6z"/></svg>193      <svg width="36" height="36" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M16 20H8c-1.1 0-2-.9-2-2V8h2v10h8v2zM19 6h-4l-1-1h-4L9 6H5v2h14z"/></svg>194      <svg width="36" height="36" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M17 7h-1V3H8v4H7V3H5v4H4c-1.1 0-2 .9-2 2v9h20v-9c0-1.1-.9-2-2-2h-1V3h-2v4z"/></svg>195    </div>196  </div>197 198  <!-- Ad banner -->199  <div class="ad-banner">[IMG: Booking.com Ad Banner]</div>200 201  <!-- App header -->202  <div class="app-header">203    <div class="icon-btn" aria-label="menu">204      <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>205    </div>206    <div class="title">207      RECORDER <span class="accent">PLUS</span>208    </div>209    <div class="header-actions">210      <div class="icon-btn" aria-label="search">211        <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>212      </div>213      <div class="icon-btn kebab" aria-label="more">214        <span class="dot"></span><span class="dot"></span><span class="dot"></span>215      </div>216    </div>217  </div>218 219  <!-- List of recordings -->220  <div class="list">221    <div class="item">222      <div class="play">223        <svg width="50" height="50" viewBox="0 0 24 24" fill="#c4745e"><path d="M8 5v14l11-7z"/></svg>224      </div>225      <div class="meta">226        <div class="title-main">Pray recording</div>227        <div class="subtitle">Oct 03, 18:14</div>228      </div>229      <div class="item-right">230        <div class="duration">00:07</div>231        <div class="icon-btn kebab" aria-label="options">232          <span class="dot"></span><span class="dot"></span><span class="dot"></span>233        </div>234      </div>235    </div>236 237    <div class="item">238      <div class="play">239        <svg width="50" height="50" viewBox="0 0 24 24" fill="#c4745e"><path d="M8 5v14l11-7z"/></svg>240      </div>241      <div class="meta">242        <div class="title-main">Recording 1</div>243        <div class="subtitle">Oct 03, 18:10</div>244      </div>245      <div class="item-right">246        <div class="duration">00:33</div>247        <div class="icon-btn kebab" aria-label="options">248          <span class="dot"></span><span class="dot"></span><span class="dot"></span>249        </div>250      </div>251    </div>252  </div>253 254  <!-- Modal confirmation -->255  <div class="overlay"></div>256  <div class="dialog">257    <div class="question">Delete this recording?</div>258    <div class="actions">259      <div class="btn">CANCEL</div>260      <div class="btn accent">DELETE</div>261    </div>262  </div>263 264  <!-- Record button and gesture bar -->265  <div class="record-container">266    <div class="record-btn"><div class="dot"></div></div>267    <div class="gesture"></div>268  </div>269 270</div>271</body>272</html>