GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Help & Contact - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11    color:#222;12  }13  .status{14    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15    color:#222; font-weight:600; font-size:38px;16  }17  .status .icons{ display:flex; gap:26px; align-items:center; }18  .icon-dot{ width:22px; height:22px; border-radius:50%; background:#888; display:inline-block; }19  .wifi, .battery{20    width:46px; height:28px;21  }22  .wifi svg, .battery svg{ width:100%; height:100%; }23  .header{24    display:flex; align-items:center; padding:22px 36px 10px;25  }26  .close{27    width:86px; height:86px; border-radius:43px; border:1.5px solid #cfcfcf;28    display:flex; align-items:center; justify-content:center; margin-right:18px;29  }30  .close svg{ width:36px; height:36px; }31  .title{32    font-size:64px; font-weight:800; letter-spacing:0.2px;33  }34  .search-wrap{ padding:22px 36px 0; }35  .search{36    height:112px; border-radius:56px; background:#f2f2f2; display:flex; align-items:center;37    padding:0 36px; color:#9e9e9e; font-size:42px;38    box-shadow: inset 0 0 0 1px #e5e5e5;39  }40  .search svg{ width:44px; height:44px; margin-right:18px; fill:#9e9e9e; }41  .accent{ height:40px; background:#e9fbff; margin:18px 36px 6px; border-radius:8px; }42  .content{43    padding:24px 36px 240px; font-size:42px; line-height:1.55;44  }45  .lead{ color:#333; margin-bottom:42px; }46  .section-title{47    display:flex; align-items:center; gap:26px; font-weight:800; font-size:50px; margin:18px 0 14px;48  }49  .minus{50    width:72px; height:72px; border-radius:50%; background:#0a66ff; color:#fff;51    display:flex; align-items:center; justify-content:center; font-size:60px; line-height:0;52  }53  .card{ color:#444; }54  a{ color:#0a66ff; text-decoration:none; }55  ul{ margin:28px 0 0 40px; padding:0; }56  ul li{ margin:22px 0; }57  .subtle{ color:#666; }58  .subheading{ font-size:52px; font-weight:800; margin-top:40px; }59  /* Floating help bubble */60  .help-bubble{61    position:absolute; right:40px; bottom:360px; width:840px;62    background:#1268ff; color:#fff; border-radius:28px; padding:40px;63    box-shadow:0 12px 24px rgba(0,0,0,0.18);64  }65  .help-bubble .close-x{66    position:absolute; right:30px; top:24px; width:64px; height:64px; border-radius:50%;67    display:flex; align-items:center; justify-content:center; color:#fff; opacity:.95;68  }69  .help-bubble .close-x svg{ width:40px; height:40px; fill:#ffffff; }70  .help-text{ font-size:48px; line-height:1.35; margin-right:56px; }71  /* Chat FAB */72  .fab{73    position:absolute; right:36px; bottom:140px; width:170px; height:170px; border-radius:50%;74    background:#0a66ff; display:flex; align-items:center; justify-content:center;75    box-shadow:0 16px 28px rgba(10,102,255,.35);76  }77  .fab svg{ width:90px; height:90px; fill:#fff; }78</style>79</head>80<body>81<div id="render-target">82  <!-- Status bar -->83  <div class="status">84    <div>10:49</div>85    <div class="icons">86      <span class="icon-dot"></span>87      <div class="wifi">88        <svg viewBox="0 0 24 24"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-3.3-2.9 1.1 1.1a3.1 3.1 0 0 1 4.4 0l1.1-1.1a4.7 4.7 0 0 0-6.6 0Zm-3-3 1.1 1.1a8 8 0 0 1 11.4 0l1.1-1.1a9.6 9.6 0 0 0-13.6 0Z"/></svg>89      </div>90      <div class="battery">91        <svg viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" fill="#222"/><rect x="24" y="6" width="3" height="4" fill="#222"/></svg>92      </div>93    </div>94  </div>95 96  <!-- Header -->97  <div class="header">98    <div class="close">99      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>100    </div>101    <div class="title">Help & Contact</div>102  </div>103 104  <!-- Search -->105  <div class="search-wrap">106    <div class="search">107      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="none"/><path d="M15.5 15.5 22 22" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/></svg>108      <span>Search eBay Help...</span>109    </div>110  </div>111  <div class="accent"></div>112 113  <!-- Content -->114  <div class="content">115    <p class="lead">116      Once you request a return, the seller should get back to you within 3 business days. If the seller doesn't respond or you're unable to resolve the issue with them, you can ask us to step in and help.117    </p>118 119    <div class="section-title">120      <div class="minus">–</div>121      <div>More info on when you can return an item</div>122    </div>123 124    <div class="card">125      <p>126        Many eBay sellers accept returns if you've changed your mind. Check the listing in your127        <a href="#">Purchases</a> to see the seller's full return policy, including how long you have to request a return and any other conditions.128      </p>129 130      <ul>131        <li>132          If the seller states in their return policy that they don't accept returns, you can ask them to see if they'll make an exception133        </li>134        <li>135          If the item doesn't match the listing description, or if it is faulty or arrived damaged, you may be covered by our136          <span class="subtle">Money Back Guarantee</span>.137        </li>138      </ul>139 140      <h3 class="subheading">Open a return request</h3>141      <p class="subtle">To request a return, select the item you want to...</p>142    </div>143  </div>144 145  <!-- Floating blue help bubble -->146  <div class="help-bubble">147    <div class="close-x">148      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>149    </div>150    <div class="help-text">151      Get the help you need from our automated assistant, or contact an agent.152    </div>153  </div>154 155  <!-- Chat floating action button -->156  <div class="fab" aria-label="Chat">157    <svg viewBox="0 0 24 24">158      <path d="M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" fill="#fff" opacity=".25"/>159      <path d="M7 9h10M7 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>160      <text x="17" y="10" font-size="6" fill="#fff" font-weight="700">?</text>161    </svg>162  </div>163 164</div>165</body>166</html>