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>Delete Confirmation - Notes</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar (dark red background) */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: #651D19;31    color: #fff;32    display: flex;33    align-items: center;34    padding: 0 36px;35    box-sizing: border-box;36    z-index: 1;37  }38  .status-time {39    font-weight: 700;40    font-size: 40px;41    letter-spacing: 1px;42  }43  .status-icons {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 26px;48  }49  .icon {50    width: 36px;51    height: 36px;52    display: inline-flex;53    align-items: center;54    justify-content: center;55  }56  .dot {57    width: 12px;58    height: 12px;59    background: #fff;60    border-radius: 50%;61    opacity: 0.8;62  }63 64  /* Content area (note) */65  .content {66    position: absolute;67    top: 120px; /* below status bar */68    left: 0;69    right: 0;70    bottom: 0;71    background: #FFFFFF;72    z-index: 1;73  }74  .top-actions {75    display: flex;76    align-items: center;77    padding: 36px 36px 0 24px;78  }79  .back-btn {80    width: 70px;81    height: 70px;82    display: inline-flex;83    align-items: center;84    justify-content: center;85  }86  .right-tools {87    margin-left: auto;88    display: flex;89    align-items: center;90    gap: 36px;91    padding-right: 10px;92  }93  .title {94    font-size: 68px;95    font-weight: 800;96    line-height: 1.2;97    padding: 10px 48px;98    color: #1a1a1a;99  }100  .meta {101    font-size: 34px;102    color: #777;103    padding: 8px 48px 0 48px;104  }105  .divider {106    height: 2px;107    background: #E0E0E0;108    margin: 24px 48px;109  }110  .note-text {111    font-size: 44px;112    color: #222;113    padding: 16px 48px;114  }115 116  /* Bottom ad banner */117  .ad-banner {118    position: absolute;119    left: 0;120    bottom: 0;121    width: 1080px;122    height: 180px;123    background: #F4F4F4;124    border-top: 1px solid #D0D0D0;125    display: flex;126    align-items: center;127    padding: 0 28px;128    box-sizing: border-box;129    z-index: 2;130  }131  .ad-text {132    font-size: 40px;133    color: #1e2a50;134    font-weight: 700;135  }136  .ad-sub {137    font-size: 34px;138    color: #355799;139    margin-top: 6px;140  }141  .ad-arrow {142    margin-left: auto;143    width: 64px;144    height: 64px;145    border-radius: 10px;146    background: #2D5AA3;147    display: flex;148    align-items: center;149    justify-content: center;150  }151 152  /* Dim overlay for modal */153  .dim {154    position: absolute;155    inset: 0;156    background: rgba(56, 52, 52, 0.72);157    z-index: 5;158  }159 160  /* Modal dialog */161  .modal {162    position: absolute;163    left: 50%;164    top: 58%;165    transform: translate(-50%, -50%);166    width: 860px;167    background: #FFFFFF;168    border-radius: 28px;169    box-shadow: 0 18px 60px rgba(0,0,0,0.25);170    z-index: 10;171    padding: 56px 60px 48px 60px;172    box-sizing: border-box;173    text-align: center;174  }175  .modal h2 {176    margin: 0;177    font-size: 56px;178    font-weight: 800;179    color: #2b2b2b;180  }181  .modal p {182    margin: 22px 0 46px 0;183    font-size: 38px;184    color: #666;185  }186  .actions {187    display: flex;188    justify-content: space-between;189    gap: 42px;190  }191  .btn {192    flex: 1;193    height: 120px;194    border-radius: 60px;195    border: none;196    font-size: 40px;197    letter-spacing: 4px;198    font-weight: 800;199    cursor: default;200    box-shadow: 0 8px 20px rgba(0,0,0,0.18);201  }202  .btn.cancel {203    background: #D9D9D9;204    color: #222;205  }206  .btn.delete {207    background: #F0B24A;208    color: #fff;209  }210 211  /* Gesture handle (on top) */212  .gesture {213    position: absolute;214    bottom: 200px; /* roughly above ad */215    left: 50%;216    transform: translateX(-50%);217    width: 280px;218    height: 12px;219    background: #FFFFFF;220    border-radius: 8px;221    box-shadow: 0 0 1px rgba(0,0,0,0.2);222    z-index: 12;223    opacity: 0.95;224  }225</style>226</head>227<body>228<div id="render-target">229  <!-- Status bar -->230  <div class="status-bar">231    <div class="status-time">12:07</div>232    <div class="status-icons">233      <!-- simple placeholders for status icons -->234      <div class="icon">235        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">236          <path d="M2 8l10-6 10 6v8l-10 6-10-6V8z" stroke="#fff" stroke-width="2" opacity="0.9"/>237        </svg>238      </div>239      <div class="icon">240        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">241          <path d="M3 10h18M6 14h12M9 18h6" stroke="#fff" stroke-width="2" opacity="0.9"/>242        </svg>243      </div>244      <span class="dot"></span>245      <div class="icon">246        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">247          <path d="M3 18h18" stroke="#fff" stroke-width="2"/>248          <rect x="4" y="6" width="16" height="10" rx="2" stroke="#fff" stroke-width="2"/>249        </svg>250      </div>251      <div class="icon">252        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">253          <path d="M6 18h12a2 2 0 0 0 2-2V8" stroke="#fff" stroke-width="2"/>254          <path d="M6 18V6a2 2 0 0 1 2-2h8" stroke="#fff" stroke-width="2"/>255        </svg>256      </div>257    </div>258  </div>259 260  <!-- Note content -->261  <div class="content">262    <div class="top-actions">263      <div class="back-btn">264        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">265          <path d="M15 5L6 12l9 7" stroke="#1e1e1e" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>266        </svg>267      </div>268      <div class="right-tools">269        <!-- record icon -->270        <svg width="70" height="70" viewBox="0 0 24 24">271          <circle cx="12" cy="12" r="9" fill="none" stroke="#D0493E" stroke-width="2.4"/>272          <circle cx="12" cy="12" r="4" fill="#D0493E" opacity="0.15"/>273        </svg>274        <!-- pencil -->275        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">276          <path d="M3 17.25V21h3.75L18.81 8.94l-3.75-3.75L3 17.25z" fill="#1f1f1f"/>277        </svg>278        <!-- kebab -->279        <svg width="48" height="48" viewBox="0 0 24 24" fill="#1f1f1f">280          <circle cx="12" cy="5" r="2"></circle>281          <circle cx="12" cy="12" r="2"></circle>282          <circle cx="12" cy="19" r="2"></circle>283        </svg>284      </div>285    </div>286 287    <div class="title">things to buy in the future</div>288    <div class="meta">Edited: 10-10 23:07</div>289    <div class="divider"></div>290    <div class="note-text">new car, investment property, home</div>291  </div>292 293  <!-- Bottom ad banner -->294  <div class="ad-banner">295    <div>296      <div class="ad-text">Diploma in Cosmetology</div>297      <div class="ad-sub">VLCC School Of Beauty, Malviya...</div>298    </div>299    <div class="ad-arrow">300      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">301        <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>302      </svg>303    </div>304  </div>305 306  <!-- Dim overlay -->307  <div class="dim"></div>308 309  <!-- Modal -->310  <div class="modal">311    <h2>Delete</h2>312    <p>Are you sure you want to delete?</p>313    <div class="actions">314      <button class="btn cancel">CANCEL</button>315      <button class="btn delete">DELETE</button>316    </div>317  </div>318 319  <!-- Gesture handle -->320  <div class="gesture"></div>321</div>322</body>323</html>