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 - Voice Recorder Permission Dialog</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0e0e10;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    background: #000;21    color: #f5f5f5;22    display: flex;23    align-items: center;24    padding: 0 32px;25    font-weight: 600;26  }27  .status-left { font-size: 42px; }28  .status-right {29    margin-left: auto;30    display: flex;31    gap: 24px;32    align-items: center;33  }34  .status-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }35 36  /* Top action bar */37  .top-bar {38    height: 120px;39    background: #161616;40    color: #d0d0d0;41    display: flex;42    align-items: center;43    padding: 0 28px;44  }45  .sel-count {46    font-size: 64px;47    font-weight: 600;48    color: #bdbdbd;49  }50  .actions {51    margin-left: auto;52    display: flex;53    gap: 44px;54    align-items: center;55  }56  .icon {57    width: 64px;58    height: 64px;59  }60 61  /* List item selected */62  .list {63    background: #0f0f11;64  }65  .file-item {66    display: flex;67    align-items: center;68    gap: 28px;69    padding: 26px 28px;70    background: #2a466a;71    height: 170px;72  }73  .file-icon {74    width: 110px;75    height: 110px;76    border-radius: 12px;77    background: #1e3553;78    border: 2px solid rgba(255,255,255,0.08);79    display: grid;80    place-items: center;81  }82  .file-meta {83    color: #e6eefc;84  }85  .file-name {86    font-size: 50px;87    font-weight: 700;88    letter-spacing: 0.5px;89  }90  .file-sub {91    margin-top: 8px;92    font-size: 36px;93    opacity: 0.85;94  }95  .check {96    margin-left: auto;97    width: 58px; height: 58px;98    border-radius: 8px;99    border: 4px solid #0b0b0b;100    background: #0b0b0b;101  }102 103  /* Middle filler content */104  .filler {105    height: 720px;106    background: #2b2b2b;107  }108 109  /* Controls area & ad (background content) */110  .controls {111    background: #eeeeee;112    height: 240px;113    display: flex;114    align-items: center;115    padding: 0 28px;116    gap: 36px;117    color: #555;118  }119  .control-btn {120    width: 120px; height: 90px;121    border-radius: 12px;122    background: #fafafa;123    border: 1px solid #d9d9d9;124    display: grid; place-items: center;125    font-weight: 600;126  }127  .ad-banner {128    height: 120px;129    display: flex; align-items: center;130    gap: 20px;131    padding: 0 20px;132    background: #f5f5f5;133    border-top: 1px solid #e0e0e0;134  }135  .ad-img {136    width: 120px; height: 90px;137    background: #E0E0E0; border: 1px solid #BDBDBD;138    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;139  }140  .ad-text { font-size: 36px; color: #333; flex: 1; }141 142  /* Bottom navigation */143  .bottom {144    position: absolute; left: 0; right: 0; bottom: 0;145    height: 310px;146    background: #0a0a0a;147    color: #d8d8d8;148    display: flex; flex-direction: column; justify-content: flex-end;149  }150  .bottom-icons {151    display: flex; justify-content: space-around; align-items: center;152    padding-bottom: 40px;153  }154  .nav-icon { width: 92px; height: 92px; }155  .gesture {156    height: 8px; width: 220px; background: #e6e6e6; border-radius: 4px;157    margin: 0 auto 24px auto;158    opacity: 0.9;159  }160 161  /* Overlay and modal */162  .overlay {163    position: absolute; inset: 0;164    background: rgba(0,0,0,0.55);165  }166  .modal {167    position: absolute;168    left: 50%;169    top: 650px;170    transform: translateX(-50%);171    width: 860px;172    height: 1120px;173    border-radius: 44px;174    overflow: hidden;175    box-shadow: 0 40px 120px rgba(0,0,0,0.6);176  }177  .modal-head {178    background: #191a1e;179    color: #ffffff;180    padding: 46px 52px 36px 52px;181    font-size: 48px;182    line-height: 1.25;183    font-weight: 700;184  }185  .modal-body {186    height: calc(100% - 220px);187    background: #2c2f33;188    display: flex; justify-content: center; align-items: center;189  }190  .modal-foot {191    height: 160px;192    background: #191a1e;193    display: flex; align-items: center; justify-content: flex-end;194    gap: 64px; padding: 0 64px;195    color: #dbe2ff;196    font-size: 44px; font-weight: 600;197  }198  .btn-text { cursor: default; }199 200  /* Helper for the big musical note */201  .note-icon { width: 360px; height: 360px; }202</style>203</head>204<body>205  <div id="render-target">206    <!-- Status bar -->207    <div class="status-bar">208      <div class="status-left">9:12</div>209      <div class="status-right">210        <div class="status-dot"></div>211        <div class="status-dot"></div>212        <div class="status