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; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #111214; /* dark app background */13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;14    color: #EDEDED;15  }16  .status-bar {17    height: 100px;18    padding: 0 30px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #FFFFFF;23  }24  .time { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; }25  .sb-icons { display: flex; gap: 26px; align-items: center; }26  .sb-icons svg { fill: none; stroke: #fff; stroke-width: 3px; }27  .header {28    height: 120px;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    background: #151619;34    border-bottom: 1px solid #1F2024;35  }36  .brand {37    font-size: 56px; font-weight: 700; letter-spacing: 0.2px;38  }39  .brand .u { color: #FF6A3A; }40  .hdr-actions { display: flex; gap: 32px; align-items: center; }41  .hdr-actions .icon-btn {42    width: 64px; height: 64px; border-radius: 16px;43    display: grid; place-items: center; background: #1C1D22;44  }45  .notice {46    margin: 24px 0 0 0;47    background: #EC5A2F;48    color: #fff;49    padding: 40px 36px;50    display: flex; align-items: center; justify-content: space-between;51    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);52  }53  .notice .text { max-width: 720px; }54  .notice .title { font-size: 52px; font-weight: 800; margin-bottom: 18px; }55  .notice .desc { font-size: 34px; opacity: 0.95; }56  .pill-btn {57    background: #FFFFFF; color: #EC5A2F;58    font-size: 40px; font-weight: 700;59    padding: 22px 40px; border-radius: 999px; border: 0;60    box-shadow: 0 2px 0 rgba(0,0,0,0.2);61  }62  .toolbar {63    padding: 26px 36px;64    display: flex; align-items: center; justify-content: space-between;65    color: #B9BDC6;66  }67  .toolbar .label { font-size: 38px; font-weight: 600; }68  .toolbar .tools { display: flex; gap: 34px; }69  .toolbar .tools svg { stroke: #B9BDC6; fill: none; stroke-width: 3px; }70  .list-card {71    margin: 10px 36px 0;72    background: #1B1D22;73    border-radius: 32px;74    padding: 30px;75    display: flex; align-items: center; justify-content: space-between;76    color: #EAEAEA;77  }78  .left {79    display: flex; align-items: center; gap: 26px;80  }81  .audio-thumb {82    width: 120px; height: 120px; border-radius: 24px;83    background: #262A31; display: grid; place-items: center;84  }85  .audio-wave { width: 80px; height: 80px; }86  .title { font-size: 40px; font-weight: 700; }87  .meta { margin-top: 10px; font-size: 30px; color: #AAB0BA; }88  .right { display: flex; align-items: center; gap: 26px; color: #AAB0BA; }89  .kebab { width: 10px; height: 40px; display: grid; place-items: center; }90  .spacer {91    height: 950px;92  }93  .snackbar {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: 470px;96    background: #EC5A2F; color: #fff;97    padding: 26px 40px;98    border-radius: 999px;99    display: flex; align-items: center; gap: 22px;100    font-size: 36px; font-weight: 700;101    box-shadow: 0 8px 24px rgba(0,0,0,0.35);102  }103  .snackbar .check {104    width: 56px; height: 56px; border-radius: 50%;105    background: #fff; display: grid; place-items: center;106  }107  .ad-banner {108    position: absolute; left: 0; right: 0; bottom: 310px;109    height: 140px; background: #FFFFFF; color: #1A1A1A;110    display: flex; align-items: center; padding: 0 20px; gap: 20px;111    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);112  }113  .ad-img {114    width: 140px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;115    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 24px;116  }117  .ad-text { flex: 1; font-size: 26px; line-height: 1.3; color: #2C2C2C; }118  .ad-cta {119    background: #1976D2; color: #fff; padding: 20px 26px; border-radius: 8px; font-size: 30px; font-weight: 700;120  }121  .bottom-nav {122    position: absolute; left: 0; right: 0; bottom: 140px;123    height: 120px; background: #191B1F;124    display: flex; align-items: center; justify-content: flex-end; padding: 0 40px;125    border-top-left-radius: 40px; border-top-right-radius: 40px;126  }127  .menu-mark {128    width: 60px; height: 60px; position: relative;129  }130  .menu-mark::before,131  .menu-mark::after,132  .menu-mark span {133    content: ""; position: absolute; left: 0; right: 0; height: 6px; background: #E6E6E6; border-radius: 4px;134  }135  .menu-mark::before { top: 10px; }136  .menu-mark span { top: 26px; background: #FF6A3A; }137  .menu-mark::after { top: 42px; }138  .home-indicator {139    position: absolute; left: 50%; transform: translateX(-50%);140    bottom: 70px; width: 420px; height: 8px; background: #B9BDC6; border-radius: 8px; opacity: 0.5;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    <div class="time">12:27</div>150    <div class="sb-icons">151      <!-- signal -->152      <svg width="40" height="40" viewBox="0 0 24 24">153        <path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2"/>154      </svg>155      <!-- wifi -->156      <svg width="40" height="40" viewBox="0 0 24 24">157        <path d="M2 8c5-4 15-4 20 0"/>158        <path d="M5 12c3-3 11-3 14 0"/>159        <path d="M9 16c2-2 4-2 6 0"/>160        <circle cx="12" cy="19" r="1.2" fill="#fff"></circle>161      </svg>162      <!-- battery + percent -->163      <div style="display:flex; align-items:center; gap:12px;">164        <svg width="54" height="28" viewBox="0 0 27 14">165          <rect x="1" y="1" width="22" height="12" rx="2" stroke="#fff" fill="none"></rect>166          <rect x="3" y="3" width="16" height="8" fill="#fff"></rect>167          <rect x="23" y="4" width="3" height="6" rx="1" fill="#fff"></rect>168        </svg>169        <span style="font-size:28px;">95%</span>170      </div>171    </div>172  </div>173 174  <!-- Header with brand and actions -->175  <div class="header">176    <div class="brand"><span class="u">U</span>Recorder</div>177    <div class="hdr-actions">178      <div class="icon-btn" title="Trash">179        <svg width="34" height="34" viewBox="0 0 24 24">180          <path d="M3 6h18" stroke="#EDEDED"/>181          <path d="M9 6V4h6v2" stroke="#EDEDED"/>182          <rect x="5" y="6" width="14" height="14" rx="2" stroke="#EDEDED" fill="none"></rect>183        </svg>184      </div>185      <div class="icon-btn" title="Message">186        <svg width="34" height="34" viewBox="0 0 24 24">187          <rect x="3" y="4" width="18" height="14" rx="3" stroke="#EDEDED" fill="none"></rect>188          <path d="M8 12h8M8 9h10" stroke="#EDEDED"/>189        </svg>190      </div>191      <div class="icon-btn" title="Settings">192        <svg width="34" height="34" viewBox="0 0 24 24">193          <path d="M12 3l8 5v8l-8 5-8-5V8l8-5Z" stroke="#EDEDED" fill="none"/>194          <circle cx="12" cy="12" r="3" stroke="#EDEDED" fill="none"></circle>195        </svg>196      </div>197    </div>198  </div>199 200  <!-- Notice banner -->201  <div class="notice">202    <div class="text">203      <div class="title">Notice</div>204      <div class="desc">Uninstalling URecorder will result in the loss of your recordings.</div>205    </div>206    <button class="pill-btn">Got it</button>207  </div>208 209  <!-- Toolbar -->210  <div class="toolbar">211    <div class="label">1 recording</div>212    <div class="tools">213      <!-- search -->214      <svg width="46" height="46" viewBox="0 0 24 24">215        <circle cx="11" cy="11" r="7"></circle>216        <path d="M20 20l-4-4"></path>217      </svg>218      <!-- list -->219      <svg width="46" height="46" viewBox="0 0 24 24">220        <path d="M4 6h16M4 12h16M4 18h16"></path>221      </svg>222      <!-- checklist -->223      <svg width="46" height="46" viewBox="0 0 24 24">224        <path d="M4 6h10M4 12h10M4 18h10" />225        <path d="M17 6l3 3M17 12l3 3M17 18l3 3" />226      </svg>227    </div>228  </div>229 230  <!-- Recording list item -->231  <div class="list-card">232    <div class="left">233      <div class="audio-thumb">234        <svg class="audio-wave" viewBox="0 0 64 64">235          <path d="M6 40V24M14 48V16M22 54V10M30 58V6M38 54V10M46 48V16M54 40V24"236                stroke="#FF6A3A" stroke-width="6" stroke-linecap="round" fill="none"/>237        </svg>238      </div>239      <div>240        <div class="title">URecorder_20231128_112418</div>241        <div class="meta">01:09  •  1.07MB  •  M4A</div>242      </div>243    </div>244    <div class="right">245      <div style="font-size:30px;">11-28 11:24</div>246      <div class="kebab">247        <svg width="8" height="32" viewBox="0 0 4 16">248          <circle cx="2" cy="2" r="2" fill="#AAB0BA"></circle>249          <circle cx="2" cy="8" r="2" fill="#AAB0BA"></circle>250          <circle cx="2" cy="14" r="2" fill="#AAB0BA"></circle>251        </svg>252      </div>253    </div>254  </div>255 256  <div class="spacer"></div>257 258  <!-- Snackbar -->259  <div class="snackbar">260    <div class="check">261      <svg width="28" height="28" viewBox="0 0 24 24">262        <path d="M5 13l4 4L19 7" stroke="#EC5A2F" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263      </svg>264    </div>265    Deleted successfully266  </div>267 268  <!-- Ad banner -->269  <div class="ad-banner">270    <div class="ad-img">[IMG: Ad Graphic]</div>271    <div class="ad-text">272      BITS Pilani Call's for Papers on: “Work Integrated Learning - Directions for the future”.273      To know more visit us @ https://iconwil.bits-pilani-wilp.ac.in/call-for-papers274    </div>275    <div class="ad-cta">Learn more</div>276  </div>277 278  <!-- Bottom nav -->279  <div class="bottom-nav">280    <div class="menu-mark"><span></span></div>281  </div>282 283  <!-- System home indicator -->284  <div class="home-indicator"></div>285 286</div>287</body>288</html>