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>Phonebook Export Dialog</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9 10  /* Root container as the mobile screen */11  #render-target {12    position: relative;13    overflow: hidden;14    width: 1080px;15    height: 2400px;16    background: #1f1f1f;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18    color: #eaeaea;19  }20 21  /* Top status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #6a3b10;29    color: #ffffff;30    font-size: 34px;31    display: flex;32    align-items: center;33    padding: 0 32px;34    box-sizing: border-box;35  }36  .status-left { flex: 1; }37  .status-right {38    display: flex;39    align-items: center;40    gap: 26px;41    opacity: 0.95;42  }43  .status-dot {44    width: 10px; height: 10px; background: #fff; border-radius: 50%;45    display: inline-block;46  }47  .battery {48    width: 36px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;49  }50  .battery:after {51    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 1px;52  }53  .battery .level {54    position: absolute; left: 3px; top: 3px; bottom: 3px; width: 24px; background: #fff;55  }56 57  /* App bar */58  .app-bar {59    position: absolute;60    top: 120px;61    left: 0;62    width: 1080px;63    height: 170px;64    background: #6a3b10;65    display: flex;66    align-items: center;67    padding: 0 40px;68    box-sizing: border-box;69    justify-content: space-between;70  }71  .app-title {72    font-size: 64px;73    font-weight: 600;74    letter-spacing: 0.5px;75  }76  .app-actions {77    display: flex;78    align-items: center;79    gap: 40px;80  }81  .icon {82    width: 54px; height: 54px; fill: none; stroke: #eaeaea; stroke-width: 4px;83  }84  .icon-fill { fill: #eaeaea; stroke: none; }85 86  /* Tabs row (icons) */87  .tabs {88    position: absolute;89    top: 290px;90    left: 0;91    width: 1080px;92    height: 110px;93    background: #1f1f1f;94    display: flex;95    align-items: center;96    padding: 0 60px;97    box-sizing: border-box;98    gap: 70px;99    color: #9e9e9e;100  }101  .tab {102    width: 90px; height: 90px; position: relative; display: flex; align-items: center; justify-content: center;103  }104  .tab.active:after {105    content: ""; position: absolute; bottom: 0; left: 15px; right: 15px; height: 6px; background: #ff8c00; border-radius: 3px;106  }107 108  /* Contact list */109  .list {110    position: absolute;111    top: 400px;112    left: 0;113    right: 0;114    bottom: 0;115    padding: 0 40px 220px;116    box-sizing: border-box;117  }118  .contact {119    display: flex;120    align-items: center;121    gap: 28px;122    padding: 34px 0;123    border-bottom: 1px solid rgba(255,255,255,0.06);124  }125  .avatar {126    width: 96px; height: 96px; border-radius: 50%;127    background: #156a7a;128    color: #cfe9ef; font-weight: 700; font-size: 44px;129    display: flex; align-items: center; justify-content: center;130  }131  .contact-name {132    font-size: 42px; color: #e5e5e5;133  }134  .alpha-index {135    position: absolute;136    right: 24px;137    top: 680px;138    color: #7b7b7b;139    font-size: 36px;140    line-height: 60px;141    letter-spacing: 6px;142    text-align: center;143  }144 145  /* Floating action buttons */146  .fab {147    position: absolute;148    width: 140px; height: 140px; border-radius: 50%;149    background: #6a3b10;150    bottom: 130px;151    box-shadow: 0 10px 20px rgba(0,0,0,0.5);152    display: flex; align-items: center; justify-content: center;153  }154  .fab.left { left: 260px; }155  .fab.right { right: 260px; }156  .fab .dot {157    width: 14px; height: 14px; background: #9e9e9e; border-radius: 50%; margin: 6px;158  }159  .grid {160    width: 74px; height: 74px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;161  }162  .plus {163    width: 80px; height: 80px; position: relative;164  }165  .plus:before, .plus:after {166    content: ""; position: absolute; background: #bfbfbf; border-radius: 3px;167  }168  .plus:before { width: 80px; height: 12px; top: 34px; left: 0; }169  .plus:after  { width: 12px; height: 80px; left: 34px; top: 0; }170 171  /* Modal card */172  .modal {173    position: absolute;174    left: 40px;175    width: 1000px;176    top: 980px;177    background: #3a3a3a;178    border-radius: 32px;179    box-shadow: 0 10px 30px rgba(0,0,0,0.6);180    padding: 36px 36px 28px;181    box-sizing: border-box;182  }183  .modal-title {184    font-size: 56px;185    font-weight: 700;186    margin: 8px 8px 22px 8px;187  }188  .label {189    font-size: 32px;190    color: #b9b9b9;191    margin: 24px 8px 14px 8px;192  }193  .textfield {194    margin: 0 8px 26px 8px;195    padding: 18px 0 10px;196    font-size: 36px;197    color: #eaeaea;198    border-bottom: 4px solid #ff8c00;199  }200  .divider {201    height: 2px; background: #555; margin: 18px 8px 26px;202  }203  .option {204    display: flex; align-items: center; gap: 22px; padding: 18px 8px;205    font-size: 36px; color: #e0e0e0;206  }207  .checkbox {208    width: 54px; height: 54px; background: #ff8c00; border-radius: 8px; position: relative; flex: 0 0 auto;209    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);210  }211  .checkbox:after {212    content: ""; position: absolute; left: 13px; top: 18px; width: 26px; height: 12px; border-left: 6px solid #fff; border-bottom: 6px solid #fff; transform: rotate(-45deg);213  }214  .modal-actions {215    display: flex; justify-content: flex-end; gap: 40px; padding: 8px; margin-top: 14px;216  }217  .text-btn {218    font-size: 40px; color: #ff8c00; font-weight: 700; letter-spacing: 1px;219  }220 221  /* Gesture pill */222  .gesture {223    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);224    width: 230px; height: 10px; background: #e6e6e6; border-radius: 6px;225    opacity: 0.9;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Status bar -->233  <div class="status-bar">234    <div class="status-left">2:29</div>235    <div class="status-right">236      <svg class="icon" viewBox="0 0 24 24" stroke-width="2">237        <circle cx="11" cy="11" r="6" stroke="#fff"></circle>238        <line x1="16" y1="16" x2="22" y2="22" stroke="#fff"></line>239      </svg>240      <div class="status-dot"></div>241      <div class="battery"><div class="level"></div></div>242    </div>243  </div>244 245  <!-- App bar -->246  <div class="app-bar">247    <div class="app-title">Phonebook</div>248    <div class="app-actions">249      <!-- Search -->250      <svg class="icon" viewBox="0 0 24 24">251        <circle cx="11" cy="11" r="7" stroke="#eaeaea" stroke-width="2"></circle>252        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#eaeaea" stroke-width="2"></line>253      </svg>254      <!-- Filter -->255      <svg class="icon" viewBox="0 0 24 24">256        <line x1="3" y1="6" x2="21" y2="6" stroke="#eaeaea" stroke-width="2"></line>257        <line x1="8" y1="12" x2="21" y2="12" stroke="#eaeaea" stroke-width="2"></line>258        <line x1="13" y1="18" x2="21" y2="18" stroke="#eaeaea" stroke-width="2"></line>259      </svg>260      <!-- More (vertical dots) -->261      <svg class="icon" viewBox="0 0 24 24">262        <circle cx="12" cy="5" r="2" class="icon-fill"></circle>263        <circle cx="12" cy="12" r="2" class="icon-fill"></circle>264        <circle cx="12" cy="19" r="2" class="icon-fill"></circle>265      </svg>266    </div>267  </div>268 269  <!-- Tabs -->270  <div class="tabs">271    <div class="tab active">272      <svg class="icon" viewBox="0 0 24 24">273        <circle cx="12" cy="7" r="4" stroke="#9e9e9e" stroke-width="2"></circle>274        <path d="M4,21 C4,15 20,15 20,21" stroke="#9e9e9e" stroke-width="2" fill="none"></path>275      </svg>276    </div>277    <div class="tab">278      <svg class="icon" viewBox="0 0 24 24">279        <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" stroke="#9e9e9e" stroke-width="2" fill="none"></polygon>280      </svg>281    </div>282    <div class="tab">283      <svg class="icon" viewBox="0 0 24 24">284        <circle cx="9" cy="8" r="3" stroke="#9e9e9e" stroke-width="2"></circle>285        <circle cx="17" cy="10" r="3" stroke="#9e9e9e" stroke-width="2"></circle>286        <path d="M3,21 C3,16 15,16 21,21" stroke="#9e9e9e" stroke-width="2" fill="none"></path>287      </svg>288    </div>289  </div>290 291  <!-- List -->292  <div class="list">293    <div class="contact">294      <div class="avatar">A</div>295      <div class="contact-name">Abdul Karim</div>296    </div>297    <div class="contact">298      <div class="avatar" style="background:#195f86;">D</div>299      <div class="contact-name">Dad Gregory Van Loon</div>300    </div>301    <div class="contact">302      <div class="avatar" style="background:#0a6b6d;">M</div>303      <div class="contact-name">Mom</div>304    </div>305  </div>306 307  <div class="alpha-index">308    A<br>D<br>M309  </div>310 311  <!-- Modal dialog -->312  <div class="modal">313    <div class="modal-title">Export contacts</div>314    <div class="label">Filename (without .vcf)</div>315    <div class="textfield">contacts_2023_11_24_14_28_59</div>316 317    <div class="divider"></div>318 319    <div class="label" style="margin-top:0;">Include contact sources</div>320 321    <div class="option">322      <div class="checkbox"></div>323      <div>levivanloon93@gmail.com</div>324    </div>325 326    <div class="option">327      <div class="checkbox"></div>328      <div>Phone storage (not visible by other apps)</div>329    </div>330 331    <div class="modal-actions">332      <div class="text-btn">CANCEL</div>333      <div class="text-btn">OK</div>334    </div>335  </div>336 337  <!-- Floating action buttons -->338  <div class="fab left">339    <div class="grid">340      <span class="dot"></span><span class="dot"></span><span class="dot"></span>341      <span class="dot"></span><span class="dot"></span><span class="dot"></span>342      <span class="dot"></span><span class="dot"></span><span class="dot"></span>343    </div>344  </div>345  <div class="fab right">346    <div class="plus"></div>347  </div>348 349  <!-- Gesture bar -->350  <div class="gesture"></div>351</div>352</body>353</html>