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 - Delete Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: #101215; color: #e6e6e6;13  }14  .statusbar {15    height: 90px; padding: 0 28px;16    display: flex; align-items: center; justify-content: space-between;17    color: #ffffff; font-weight: 600; font-size: 38px;18  }19  .status-icons { display: flex; align-items: center; gap: 26px; }20  .appbar {21    height: 140px; padding: 0 34px;22    display: flex; align-items: center; justify-content: space-between;23  }24  .brand { font-size: 56px; font-weight: 800; letter-spacing: 0.5px; }25  .brand .u { color: #E25A32; }26  .brand .r { color: #bfbfbf; font-weight: 700; }27  .appbar-icons { display: flex; align-items: center; gap: 30px; }28  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 14px; }29  .icon { width: 44px; height: 44px; fill: #bfbfbf; }30  .notice {31    margin-top: 6px;32    background: #B5482F;33    padding: 34px;34    border-top: 2px solid rgba(255,255,255,0.08);35    border-bottom: 2px solid rgba(0,0,0,0.35);36    display: flex; align-items: center; justify-content: space-between;37  }38  .notice h2 { margin: 0; font-size: 56px; color: #dcdcdc; }39  .notice p { margin: 8px 0 0 0; font-size: 36px; color: #e7cfc8; }40  .pill {41    background: #D6D6D6; color: #383838;42    padding: 26px 46px; border-radius: 48px; font-weight: 700; font-size: 40px;43  }44  .subheader {45    padding: 26px 34px; display: flex; align-items: center; justify-content: space-between;46    color: #bfbfbf; font-size: 42px; border-bottom: 1px solid rgba(255,255,255,0.06);47  }48  .sub-icons { display: flex; align-items: center; gap: 34px; }49  .list {50    padding: 18px 26px 0;51  }52  .card {53    background: #181B20;54    border-radius: 40px;55    padding: 26px;56    display: flex; align-items: center; justify-content: space-between;57    margin-bottom: 28px;58    box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;59  }60  .left {61    display: flex; align-items: center; gap: 24px;62  }63  .wave {64    width: 120px; height: 120px;65    border-radius: 28px; background: #13161A;66    display: flex; align-items: center; justify-content: center;67  }68  .title { font-size: 42px; color: #d1d1d1; }69  .meta { font-size: 32px; color: #a7a7a7; margin-top: 6px; }70  .right { display: flex; align-items: center; gap: 20px; color: #9a9a9a; }71  .date { font-size: 32px; }72  .more { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }73  /* Bottom modal sheet */74  .sheet {75    position: absolute; left: 0; right: 0; bottom: 0;76    background: #262B31; color: #e8e8e8;77    border-top-left-radius: 44px; border-top-right-radius: 44px;78    padding: 44px 40px 220px; height: 1100px;79    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);80  }81  .sheet h3 { margin: 6px 0 20px; font-size: 64px; }82  .sheet p { margin: 16px 0; font-size: 40px; color: #cfd3d8; line-height: 1.5; }83  .filename { color: #E25A32; font-weight: 700; }84  .close-x {85    position: absolute; right: 34px; top: 26px;86    width: 64px; height: 64px; border-radius: 50%;87    display: flex; align-items: center; justify-content: center;88    color: #aeb4bb; font-size: 44px;89  }90  .actions { position: absolute; left: 0; right: 0; bottom: 82px; padding: 0 40px; display: flex; flex-direction: column; gap: 34px; }91  .btn {92    height: 150px; border-radius: 90px; display: flex; align-items: center; justify-content: center;93    font-size: 48px; font-weight: 800; letter-spacing: 0.2px;94  }95  .btn.blue { background: #1E6CFF; color: white; }96  .btn.orange { background: #DB4A2F; color: #fff; }97  /* Home indicator */98  .home-indicator {99    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);100    width: 280px; height: 14px; border-radius: 8px; background: #D9D9D9; opacity: 0.9;101  }102  /* helper */103  .muted { color: #bfbfbf; }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status Bar -->110  <div class="statusbar">111    <div>12:27</div>112    <div class="status-icons">113      <!-- Signal -->114      <svg class="icon" viewBox="0 0 24 24">115        <path fill="#ffffff" d="M2 20h2v-6H2v6zm4 0h2v-9H6v9zm4 0h2v-12h-2v12zm4 0h2V5h-2v15zm4 0h2V2h-2v18z"/>116      </svg>117      <!-- WiFi -->118      <svg class="icon" viewBox="0 0 24 24">119        <path fill="#ffffff" d="M12 20.5l1.6-1.6a2.25 2.25 0 0 0-3.2 0L12 20.5zm-4-4l1.6-1.6a5.25 5.25 0 0 1 4.8 0L16 16.5a7.25 7.25 0 0 0-8 0zM3 12.5l1.6-1.6c4.6-3.3 10.2-3.3 14.8 0L21 12.5c-6-4.5-12-4.5-18 0z"/>120      </svg>121      <!-- Notifications -->122      <svg class="icon" viewBox="0 0 24 24">123        <path fill="#ffffff" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2z"/>124      </svg>125      <!-- Battery -->126      <svg class="icon" viewBox="0 0 28 24">127        <rect x="1" y="5" width="22" height="14" rx="2" ry="2" fill="#ffffff"/>128        <rect x="3" y="7" width="18" height="10" fill="#101215"/>129        <rect x="3" y="7" width="14" height="10" fill="#ffffff"/>130        <rect x="23" y="9" width="4" height="6" rx="1" fill="#ffffff"/>131      </svg>132      <div style="font-size:36px;">95%</div>133    </div>134  </div>135 136  <!-- App Bar -->137  <div class="appbar">138    <div class="brand"><span class="u">U</span><span class="r">Recorder</span></div>139    <div class="appbar-icons">140      <!-- Trash -->141      <div class="icon-btn">142        <svg class="icon" viewBox="0 0 24 24">143          <path d="M7 9h10l-1 11H8L7 9zm2-4h6l1 2H8l1-2z" fill="#bfbfbf"></path>144        </svg>145      </div>146      <!-- Chat -->147      <div class="icon-btn">148        <svg class="icon" viewBox="0 0 24 24">149          <path d="M4 4h16v11H7l-3 3V4z" fill="#bfbfbf"></path>150        </svg>151      </div>152      <!-- Gear (hex-like) -->153      <div class="icon-btn">154        <svg class="icon" viewBox="0 0 24 24">155          <path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm9 5l-2.2 1.3.3 2.5-2.5.3L15.3 18 14 20l-2-1-2 1-1.3-2-1.8-1.9-2.5-.3.3-2.5L3 12l2.2-1.3-.3-2.5 2.5-.3L8.7 6 10 4l2 1 2-1 1.3 2 1.9 1.8 2.5.3-.3 2.5L21 12z" fill="#bfbfbf"/>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Notice Banner -->162  <div class="notice">163    <div>164      <h2>Notice</h2>165      <p>Uninstalling URecorder will result in the loss of your recordings.</p>166    </div>167    <div class="pill">Got it</div>168  </div>169 170  <!-- Sub header -->171  <div class="subheader">172    <div>2 recordings</div>173    <div class="sub-icons">174      <!-- Search -->175      <svg class="icon" viewBox="0 0 24 24">176        <path fill="#bfbfbf" d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm8.7 13.3-3-3-1.4 1.4 3 3 1.4-1.4z"/>177      </svg>178      <!-- Sort/List -->179      <svg class="icon" viewBox="0 0 24 24">180        <path fill="#bfbfbf" d="M4 6h16v2H4V6zm0 5h12v2H4v-2zm0 5h16v2H4v-2z"/>181      </svg>182      <!-- Checkbox/Select -->183      <svg class="icon" viewBox="0 0 24 24">184        <rect x="3" y="5" width="16" height="14" rx="2" fill="#bfbfbf"/>185        <path d="M7 12l2 2 5-5" stroke="#101215" stroke-width="2.5" fill="none"/>186      </svg>187    </div>188  </div>189 190  <!-- List -->191  <div class="list">192    <div class="card">193      <div class="left">194        <div class="wave">195          <svg width="70" height="70" viewBox="0 0 24 24">196            <path d="M3 14h2V10H3v4zm3 2h2V8H6v8zm3-5h2v2h-2v-2zm3 7h2V6h-2v12zm3-4h2V10h-2v4zm3 2h2V8h-2v8z" fill="#E25A32"/>197          </svg>198        </div>199        <div>200          <div class="title">URecorder_20231128_112418</div>201          <div class="meta">01:09  •  1.07MB  •  M4A</div>202        </div>203      </div>204      <div class="right">205        <div class="date">11-28 11:24</div>206        <div class="more">207          <svg width="28" height="28" viewBox="0 0 24 24">208            <circle cx="12" cy="5" r="2" fill="#9a9a9a"></circle>209            <circle cx="12" cy="12" r="2" fill="#9a9a9a"></circle>210            <circle cx="12" cy="19" r="2" fill="#9a9a9a"></circle>211          </svg>212        </div>213      </div>214    </div>215 216    <div class="card">217      <div class="left">218        <div class="wave">219          <svg width="70" height="70" viewBox="0 0 24 24">220            <path d="M3 14h2V10H3v4zm3 2h2V8H6v8zm3-5h2v2h-2v-2zm3 7h2V6h-2v12zm3-4h2V10h-2v4zm3 2h2V8h-2v8z" fill="#E25A32"/>221          </svg>222        </div>223        <div>224          <div class="title">URecorder_20231128_101953</div>225          <div class="meta">00:15  •  251.75KB  •  M4A</div>226        </div>227      </div>228      <div class="right">229        <div class="date">11-28 10:19</div>230        <div class="more">231          <svg width="28" height="28" viewBox="0 0 24 24">232            <circle cx="12" cy="5" r="2" fill="#9a9a9a"></circle>233            <circle cx="12" cy="12" r="2" fill="#9a9a9a"></circle>234            <circle cx="12" cy="19" r="2" fill="#9a9a9a"></circle>235          </svg>236        </div>237      </div>238    </div>239  </div>240 241  <!-- Bottom Modal Sheet -->242  <div class="sheet">243    <div class="close-x">✕</div>244    <h3>Delete</h3>245    <p>Are you sure you want to delete <span class="filename">URecorder_20231128_101953</span>?</p>246    <p>Note that recordings moved to Trash can be restored within 30 days.</p>247 248    <div class="actions">249      <div class="btn blue">Move to trash</div>250      <div class="btn orange">Delete permanently</div>251    </div>252  </div>253 254  <div class="home-indicator"></div>255</div>256</body>257</html>