GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Get Support</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #111111;16  }17 18  /* Simulated OS status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000000;26    color: #ffffff;27    font-size: 40px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 32px;32    box-sizing: border-box;33    letter-spacing: 1px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .status-icons svg { display: block; }41 42  /* Back button */43  .back-btn {44    position: absolute;45    top: 150px;46    left: 28px;47    width: 80px;48    height: 80px;49    display: flex;50    align-items: center;51    justify-content: center;52  }53 54  /* Title and subtitle */55  .title-wrap {56    position: absolute;57    top: 390px;58    left: 0;59    width: 100%;60    text-align: center;61    padding: 0 80px;62    box-sizing: border-box;63  }64  .title {65    font-size: 64px;66    font-weight: 700;67    margin: 0 0 28px 0;68    letter-spacing: 0.2px;69  }70  .subtitle {71    font-size: 36px;72    color: #9E9E9E;73    line-height: 1.4;74    margin: 0;75  }76 77  /* List */78  .list {79    position: absolute;80    top: 950px;81    left: 0;82    width: 100%;83  }84  .list-item {85    display: flex;86    align-items: center;87    padding: 48px 0;88    margin: 0 32px;89    border-bottom: 1px solid #ECECEC;90  }91  .icon-box {92    width: 120px;93    height: 120px;94    display: flex;95    align-items: center;96    justify-content: center;97    margin-right: 28px;98  }99  .text {100    font-size: 44px;101    font-weight: 500;102  }103 104  /* Bottom nav gesture area */105  .nav-bar {106    position: absolute;107    bottom: 0;108    left: 0;109    width: 1080px;110    height: 128px;111    background: #000000;112  }113  .gesture-pill {114    position: absolute;115    bottom: 36px;116    left: 50%;117    transform: translateX(-50%);118    width: 300px;119    height: 14px;120    background: #E0E0E0;121    border-radius: 10px;122    opacity: 0.9;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Simulated OS status bar -->130  <div class="status-bar">131    <div>9:18</div>132    <div class="status-icons">133      <!-- simple wifi -->134      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">135        <path d="M2 8c5.5-4.7 14.5-4.7 20 0"/>136        <path d="M5 12c3.9-3 10.1-3 14 0"/>137        <path d="M8.5 16c2.2-1.6 4.8-1.6 7 0"/>138        <circle cx="12" cy="19" r="1.3" fill="#ffffff" stroke="none"/>139      </svg>140      <!-- battery -->141      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">142        <rect x="2" y="7" width="18" height="10" rx="2"/>143        <rect x="4" y="9" width="14" height="6" fill="#ffffff" stroke="none"/>144        <rect x="20" y="10" width="2" height="4" fill="#ffffff" stroke="none"/>145      </svg>146      <div style="font-size:40px;">100%</div>147    </div>148  </div>149 150  <!-- Back button -->151  <div class="back-btn" aria-label="Back">152    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">153      <path d="M15 18l-6-6 6-6"/>154    </svg>155  </div>156 157  <!-- Title -->158  <div class="title-wrap">159    <h1 class="title">Get Support</h1>160    <p class="subtitle">Get help finding the right products and services for your needs.</p>161  </div>162 163  <!-- Options list -->164  <div class="list">165    <div class="list-item">166      <div class="icon-box">167        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.8">168          <rect x="7" y="2" width="10" height="20" rx="2"/>169          <circle cx="12" cy="18" r="1.2" fill="#111" stroke="none"/>170        </svg>171      </div>172      <div class="text">Call Us</div>173    </div>174 175    <div class="list-item">176      <div class="icon-box">177        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.8">178          <rect x="3" y="5" width="18" height="14" rx="2"/>179          <path d="M3 7l9 6 9-6"/>180        </svg>181      </div>182      <div class="text">Report an Issue</div>183    </div>184 185    <div class="list-item" style="border-bottom: none;">186      <div class="icon-box">187        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">188          <circle cx="12" cy="12" r="9"/>189          <path d="M9.6 9.5a2.6 2.6 0 1 1 4.8 1.4c-.6 1.2-2.2 1.5-2.2 3.1"/>190          <circle cx="12" cy="17.2" r="1"/>191        </svg>192      </div>193      <div class="text">Browse FAQs</div>194    </div>195  </div>196 197  <!-- Bottom navigation bar -->198  <div class="nav-bar">199    <div class="gesture-pill"></div>200  </div>201 202</div>203</body>204</html>