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>URecorder Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f10;15    color: #e5e5e5;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 100px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    font-size: 40px;29    letter-spacing: 0.5px;30  }31  .status-bar .right {32    margin-left: auto;33    display: flex; align-items: center; gap: 26px;34    opacity: 0.9;35  }36  .bolt {37    width: 28px; height: 44px;38  }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 100px;44    left: 0; right: 0;45    height: 140px;46    padding: 0 40px;47    display: flex; align-items: center;48    background: #0f0f10;49  }50  .brand {51    font-weight: 700; font-size: 56px; letter-spacing: 0.5px;52  }53  .brand .u { color: #e36a3a; }54  .brand .r { color: #cfcfcf; }55  .app-actions {56    margin-left: auto;57    display: flex; gap: 36px; align-items: center;58  }59  .icon-btn {60    width: 72px; height: 72px; border-radius: 16px;61    display: flex; align-items: center; justify-content: center;62    background: #171717;63  }64  .icon-btn svg { width: 42px; height: 42px; fill: #cfcfcf; }65 66  /* Notice banner */67  .notice {68    position: absolute;69    top: 240px; left: 0; right: 0;70    padding: 36px 40px;71    background: #9d4b34;72    border-top: 2px solid rgba(255,255,255,0.06);73    border-bottom: 2px solid rgba(255,255,255,0.06);74  }75  .notice-title {76    font-size: 54px; font-weight: 700; margin-bottom: 10px; color: #e8e6e4;77  }78  .notice-text {79    font-size: 36px; color: #dcd2cd;80    max-width: 680px;81  }82  .notice .gotit {83    position: absolute; right: 40px; top: 40px;84    background: #b9b3af;85    color: #3a332c;86    padding: 22px 40px;87    border-radius: 48px;88    font-weight: 700;89    font-size: 40px;90    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);91  }92 93  /* Toolbar and count */94  .list-top {95    position: absolute;96    top: 460px; left: 40px; right: 40px;97    display: flex; align-items: center;98  }99  .count {100    font-size: 46px; font-weight: 700; color: #c7c7c7;101  }102  .list-actions {103    margin-left: auto; display: flex; gap: 32px;104  }105  .list-actions .icon-btn { width: 68px; height: 68px; background: #151515; }106  .list-actions svg { width: 40px; height: 40px; fill: #bdbdbd; }107 108  /* Recording card */109  .card {110    position: absolute;111    top: 540px; left: 40px; right: 40px;112    background: #1b1b1c;113    border-radius: 44px;114    padding: 34px 36px;115    display: flex; align-items: center;116    box-shadow: 0 3px 0 rgba(255,255,255,0.04) inset;117  }118  .audio-thumb {119    width: 120px; height: 120px;120    background: #E0E0E0; border: 1px solid #BDBDBD;121    border-radius: 30px;122    display: flex; align-items: center; justify-content: center;123    color: #757575; font-size: 28px;124    margin-right: 28px;125  }126  .card .info {127    flex: 1;128  }129  .title {130    font-size: 48px; font-weight: 700; color: #d8d8d8; margin-bottom: 10px;131  }132  .meta {133    font-size: 32px; color: #9e9e9e;134  }135  .card .right {136    display: flex; align-items: center; gap: 24px; color: #9e9e9e; font-size: 30px;137  }138  .dots {139    width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%;140    box-shadow: 0 22px 0 #9e9e9e, 0 -22px 0 #9e9e9e;141    margin-left: 16px;142  }143 144  /* Share sheet */145  .sheet {146    position: absolute;147    left: 0; right: 0; bottom: 0;148    height: 1100px;149    background: #202223;150    border-top-left-radius: 60px;151    border-top-right-radius: 60px;152    box-shadow: 0 -6px 20px rgba(0,0,0,0.5);153    padding: 40px;154  }155  .sheet .grabber {156    width: 160px; height: 14px; border-radius: 7px;157    background: #6a6a6a; opacity: 0.6;158    margin: 0 auto 40px;159  }160  .file-row {161    display: flex; align-items: center; gap: 26px;162    margin: 20px 0 40px;163    color: #cfcfcf;164  }165  .doc-icon {166    width: 80px; height: 80px; border-radius: 12px;167    background: #E0E0E0; border: 1px solid #BDBDBD;168    display: flex; align-items: center; justify-content: center;169    color: #757575; font-size: 24px;170  }171  .file-name {172    font-size: 44px; color: #cfcfcf;173  }174  .nearby-btn {175    margin: 30px auto 30px;176    width: 220px; text-align: center;177    padding: 20px 0;178    border-radius: 18px;179    border: 2px solid #7aa7ff;180    color: #b2c7ff;181    font-size: 40px; font-weight: 700;182    background: #1b1c1d;183  }184  .hint {185    text-align: center; color: #9ea0a2; font-size: 36px; margin: 30px 0 20px;186  }187  .share-row {188    display: flex; justify-content: space-around;189    margin-top: 40px;190  }191  .share-item {192    display: flex; flex-direction: column; align-items: center; gap: 18px;193  }194  .share-icon {195    width: 140px; height: 140px; border-radius: 50%;196    background: #E0E0E0; border: 1px solid #BDBDBD;197    display: flex; align-items: center; justify-content: center;198    color: #757575; font-size: 26px;199  }200  .share-label { font-size: 34px; color: #cfcfcf; }201 202  /* Gesture bar */203  .gesture {204    position: absolute;205    bottom: 26px; left: 50%;206    transform: translateX(-50%);207    width: 540px; height: 12px; border-radius: 10px;208    background: #d6d6d6; opacity: 0.7;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div>3:43</div>218    <div class="right">219      <svg class="bolt" viewBox="0 0 24 24">220        <path d="M10 0 L3 13 H11 L8 24 L21 10 H13 L16 0 Z"></path>221      </svg>222    </div>223  </div>224 225  <!-- App header -->226  <div class="app-bar">227    <div class="brand"><span class="u">U</span><span class="r">Recorder</span></div>228    <div class="app-actions">229      <div class="icon-btn" title="Trash">230        <svg viewBox="0 0 24 24"><path d="M8 3h8l1 3h3v2H4V6h3l1-3zm1 7h2v9H9V10zm6 0h-2v9h2V10z"/></svg>231      </div>232      <div class="icon-btn" title="Chat">233        <svg viewBox="0 0 24 24"><path d="M4 3h16v12H8l-4 4V3z"/></svg>234      </div>235      <div class="icon-btn" title="Settings">236        <svg viewBox="0 0 24 24"><path d="M12 2l5 3v6l-5 3-5-3V5l5-3zm0 7a3 3 0 110 6 3 3 0 010-6z"/></svg>237      </div>238    </div>239  </div>240 241  <!-- Notice -->242  <div class="notice">243    <div class="notice-title">Notice</div>244    <div class="notice-text">Uninstalling URecorder will result in the loss of your recordings.</div>245    <div class="gotit">Got it</div>246  </div>247 248  <!-- List header -->249  <div class="list-top">250    <div class="count">1 recording</div>251    <div class="list-actions">252      <div class="icon-btn">253        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l6 6" stroke="#bdbdbd" stroke-width="2" fill="none"/></svg>254      </div>255      <div class="icon-btn">256        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/></svg>257      </div>258      <div class="icon-btn">259        <svg viewBox="0 0 24 24"><path d="M4 6h14v2H4zm0 5h10v2H4zm0 5h6v2H4z"/><path d="M18 11l-3 3 1 1 2-2 4 4 1-1z"/></svg>260      </div>261    </div>262  </div>263 264  <!-- Recording card -->265  <div class="card">266    <div class="audio-thumb">[IMG: Audio]</div>267    <div class="info">268      <div class="title">Data Analysis First speech</div>269      <div class="meta">00:04 · 78.66KB · M4A</div>270    </div>271    <div class="right">272      <div>11-09 15:12</div>273      <div class="dots"></div>274    </div>275  </div>276 277  <!-- Share sheet overlay -->278  <div class="sheet">279    <div class="grabber"></div>280 281    <div class="file-row">282      <div class="doc-icon">[IMG]</div>283      <div class="file-name">Data Analysis First speech.m4a</div>284    </div>285 286    <div class="nearby-btn">Nearby</div>287 288    <div class="hint">No recommended people to share with</div>289 290    <div class="share-row">291      <div class="share-item">292        <div class="share-icon">[IMG: Gmail]</div>293        <div class="share-label">Gmail</div>294      </div>295      <div class="share-item">296        <div class="share-icon">[IMG: OneDrive]</div>297        <div class="share-label">OneDrive</div>298      </div>299      <div class="share-item">300        <div class="share-icon">[IMG: Messages]</div>301        <div class="share-label">Messages</div>302      </div>303      <div class="share-item">304        <div class="share-icon">[IMG: Drive]</div>305        <div class="share-label">Drive</div>306      </div>307    </div>308  </div>309 310  <!-- Gesture bar -->311  <div class="gesture"></div>312 313</div>314</body>315</html>