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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color:#111; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar{18    height: 88px;19    padding: 18px 36px 0 36px;20    box-sizing: border-box;21    font-weight: 600;22    color:#222;23    display: flex;24    align-items: center;25    justify-content: space-between;26  }27  .status-right{ display:flex; gap:26px; align-items:center; }28  .sb-icon{ width:34px; height:34px; }29 30  /* Header */31  .header{32    display:flex;33    align-items:center;34    gap:28px;35    padding:16px 36px 18px 36px;36  }37  .close-btn{38    width:92px; height:92px; border-radius:46px;39    display:flex; align-items:center; justify-content:center;40  }41  .close-btn svg{ width:56px; height:56px; }42  .title{43    font-size:64px; font-weight:800; letter-spacing:.2px;44  }45 46  /* Search */47  .search-wrap{48    padding: 10px 36px 10px 36px;49  }50  .search{51    display:flex; align-items:center; gap:20px;52    background:#f3f4f6; border-radius:36px; height:120px;53    padding: 0 28px;54    box-sizing: border-box;55  }56  .search svg{ width:44px; height:44px; fill:#9aa0a6; }57  .search input{58    border:none; outline:none; background:transparent;59    font-size:42px; color:#6b7280; width:100%;60  }61 62  /* Article section */63  .mini-label{64    color:#2a5bf6; font-size:32px; margin:26px 36px 8px 36px;65  }66  .article-card{67    margin:0 24px;68    border:6px solid #f1a43a;69    border-radius:18px;70    padding:42px 36px;71  }72  .article-title{73    color:#121a7e;74    font-size:72px; font-weight:800; line-height:1.12;75  }76 77  .links{78    margin: 22px 36px;79    display:flex; flex-direction:column; gap:36px;80  }81  .link-row{82    color:#2a5bf6; font-weight:800; font-size:54px;83  }84  .sep-line{85    height:16px; background:#f29a83; margin:40px 0 36px 0;86  }87 88  .info-text{89    padding: 0 36px;90    font-size:54px; line-height:1.35; color:#111; font-weight:600;91  }92 93  .hint-card{94    margin: 36px;95    background:#e9f8ff; border-radius:18px;96    padding: 40px 36px;97    font-size:44px; color:#0f172a;98  }99  .hint-card a{ color:#2a5bf6; font-weight:800; text-decoration:none; }100 101  /* Bottom home indicator */102  .home-indicator{103    position:absolute; left:50%; transform:translateX(-50%);104    bottom:24px; width:380px; height:12px; border-radius:8px; background:#cfcfcf;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div style="font-size:38px;">10:49</div>114    <div class="status-right">115      <!-- simple wifi -->116      <svg class="sb-icon" viewBox="0 0 24 24" fill="#555"><path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3 9.5l1.4 1.4A11 11 0 0 1 19.6 10L21 8.6A13 13 0 0 0 3 9.5zm4 4l1.4 1.4a7 7 0 0 1 7.2 0L17 13.5a9 9 0 0 0-10 0z"/></svg>117      <!-- battery -->118      <svg class="sb-icon" viewBox="0 0 24 24" fill="#555"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>119    </div>120  </div>121 122  <!-- Header -->123  <div class="header">124    <div class="close-btn">125      <svg viewBox="0 0 24 24" stroke="#111" stroke-width="2.5" fill="none">126        <circle cx="12" cy="12" r="10" stroke="#d1d5db"></circle>127        <path d="M7 7l10 10M17 7L7 17"></path>128      </svg>129    </div>130    <div class="title">Help & Contact</div>131  </div>132 133  <!-- Search -->134  <div class="search-wrap">135    <div class="search">136      <svg viewBox="0 0 24 24"><path d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"/></svg>137      <input type="text" placeholder="Search eBay Help..." />138    </div>139  </div>140 141  <!-- Article -->142  <div class="mini-label">4 min article</div>143  <div class="article-card">144    <div class="article-title">Return an item for a refund</div>145  </div>146 147  <div class="links">148    <div class="link-row">Open a return request ↓</div>149    <div class="link-row">Send the item back ↓</div>150    <div class="link-row">Get your refund ↓</div>151    <div class="link-row">Get help from eBay ↓</div>152    <div class="link-row">Close a return request ↓</div>153    <div class="link-row">Misuse of returns ↓</div>154  </div>155 156  <div class="sep-line"></div>157 158  <div class="info-text">159    If you've changed your mind about an item you bought or there's something wrong with it, you can request a return.160  </div>161 162  <div class="hint-card">163    Need an update on an open return request? See how to164    <a href="#">check the status of your return</a>165  </div>166 167  <div class="home-indicator"></div>168</div>169</body>170</html>