GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mockup - eBay Help & Contact</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color:#111;13  }14 15  /* Status bar */16  .status-bar {17    height:72px;18    padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#222;21    font-size:34px; font-weight:600;22  }23  .status-right { display:flex; align-items:center; gap:22px; }24  .icon { width:34px; height:34px; }25  .wifi svg, .battery svg { width:40px; height:28px; }26  .dot {27    width:18px; height:18px; border-radius:50%; background:#9e9e9e; display:inline-block; margin-left:12px;28  }29 30  /* App bar */31  .app-bar {32    height:110px;33    display:flex; align-items:center;34    padding:0 32px;35    border-bottom:1px solid #eee;36  }37  .icon-btn {38    width:76px; height:76px;39    border:none; background:#f5f5f7; border-radius:38px;40    display:flex; align-items:center; justify-content:center;41    margin-right:18px;42  }43  .icon-btn svg { width:32px; height:32px; }44  .title {45    font-size:60px; font-weight:700; letter-spacing:0.2px;46  }47 48  /* Search */49  .search-wrap { padding:24px 32px; }50  .search-bar {51    height:96px; border-radius:48px;52    background:#f2f4f7; border:1px solid #e6e8eb;53    display:flex; align-items:center;54    padding:0 30px; color:#777;55    font-size:36px;56  }57  .search-bar svg { width:40px; height:40px; margin-right:18px; }58 59  /* Content */60  .content { padding:8px 40px 160px; line-height:1.5; }61  .bullet {62    display:flex; gap:18px; margin-top:24px; font-size:37px; color:#333;63  }64  .bullet .dot-b {65    width:14px; height:14px; background:#222; border-radius:50%; margin-top:20px;66  }67  a.link { color:#1a73e8; text-decoration:none; }68 69  h2.section-title {70    margin-top:64px; font-size:46px; font-weight:800; color:#111;71  }72  .paragraph {73    margin-top:16px; font-size:36px; color:#333;74  }75 76  .primary-btn {77    margin:36px 0;78    width:100%; max-width:960px;79    height:110px; border-radius:60px;80    background:#1565ff; color:#fff;81    display:flex; align-items:center; justify-content:center;82    font-size:42px; font-weight:700;83    box-shadow: 0 6px 12px rgba(21,101,255,0.25);84  }85 86  .expander {87    display:flex; align-items:center; gap:22px;88    height:auto; padding:26px 0;89    border-top:1px solid #eee;90    font-size:40px; color:#111;91  }92  .plus {93    width:56px; height:56px; border-radius:28px;94    border:2px solid #1a73e8; color:#1a73e8;95    display:flex; align-items:center; justify-content:center; font-weight:700;96  }97 98  .sub-section-title {99    margin-top:54px; font-size:44px; font-weight:800;100  }101 102  /* Floating chat */103  .chat-fab {104    position:absolute; right:36px; bottom:230px;105    width:160px; height:160px; border-radius:80px;106    background:#1a73e8; box-shadow:0 12px 24px rgba(0,0,0,0.25);107    display:flex; align-items:center; justify-content:center;108  }109  .chat-fab svg { width:76px; height:76px; fill:#fff; }110 111  /* Gesture bar */112  .gesture {113    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);114    width:360px; height:12px; border-radius:8px; background:#cfcfcf;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status Bar -->122  <div class="status-bar">123    <div class="status-left">10:50<span class="dot"></span></div>124    <div class="status-right">125      <div class="wifi">126        <svg viewBox="0 0 24 24">127          <path d="M3 8c9-6 18 0 18 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>128          <path d="M6 12c6-4 12 0 12 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>129          <circle cx="12" cy="16" r="2" fill="#333"/>130        </svg>131      </div>132      <div class="battery">133        <svg viewBox="0 0 32 20">134          <rect x="2" y="4" width="26" height="12" rx="3" ry="3" stroke="#333" stroke-width="2" fill="none"/>135          <rect x="4" y="6" width="18" height="8" fill="#333"/>136          <rect x="28" y="7" width="3" height="6" rx="1" fill="#333"/>137        </svg>138      </div>139    </div>140  </div>141 142  <!-- App Bar -->143  <div class="app-bar">144    <button class="icon-btn" aria-label="Close">145      <svg viewBox="0 0 24 24">146        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2" stroke-linecap="round"/>147      </svg>148    </button>149    <div class="title">Help &amp; Contact</div>150  </div>151 152  <!-- Search -->153  <div class="search-wrap">154    <div class="search-bar">155      <svg viewBox="0 0 24 24">156        <circle cx="11" cy="11" r="7" stroke="#999" stroke-width="2" fill="none"/>157        <path d="M20 20 L16 16" stroke="#999" stroke-width="2" stroke-linecap="round"/>158      </svg>159      <span>Search eBay Help...</span>160    </div>161  </div>162 163  <!-- Content -->164  <div class="content">165    <div class="bullet">166      <div class="dot-b"></div>167      <div>168        If the item doesn't match the listing description, or if it is faulty or arrived169        damaged, you may be eligible for <a href="#" class="link">eBay Money Back Guarantee</a>.170        This means that you can return it even if the seller's returns policy says they don't accept returns171      </div>172    </div>173 174    <h2 class="section-title">Open a return request</h2>175    <div class="paragraph">176      To request a return, select the item you want to send back from your recent purchases above, or177      use the button below. You can also start a return request from your <b>Purchases</b> in My eBay.178    </div>179 180    <div class="primary-btn">Start a return</div>181 182    <div class="expander">183      <div class="plus">+</div>184      <div>How to request a return through My eBay</div>185    </div>186    <div class="expander">187      <div class="plus">+</div>188      <div>How to return multiple items</div>189    </div>190 191    <div class="sub-section-title">How the seller may respond to your request</div>192    <div class="paragraph">193      The seller has 3 business days to get back to you. How they can respond depends on the reason for your return:194    </div>195  </div>196 197  <!-- Floating chat button -->198  <div class="chat-fab" aria-label="Help">199    <svg viewBox="0 0 24 24">200      <path d="M12 3c5 0 9 3.5 9 7.8S17 19 12 19c-1.1 0-2.1-.2-3-.5L5 21l1.3-3.3C5.5 16.4 4 14.4 4 10.8 4 6.5 7 3 12 3z" fill="#fff" opacity="0.2"/>201      <text x="11.5" y="16" text-anchor="middle" font-size="14" font-weight="700" fill="#fff">?</text>202    </svg>203  </div>204 205  <!-- Gesture bar -->206  <div class="gesture"></div>207</div>208</body>209</html>