GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Settings Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #111313;19    color: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 110px;29    background: #2a2a2a;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34    color: #f5f5f5;35    font-size: 42px;36    letter-spacing: 0.5px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .status-right {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 26px;48  }49  .status-icon {50    width: 44px;51    height: 44px;52    opacity: 0.9;53  }54 55  /* App bar */56  .app-bar {57    position: absolute;58    top: 110px;59    left: 0;60    width: 1080px;61    height: 130px;62    background: #3a3a3a;63    display: flex;64    align-items: center;65    box-sizing: border-box;66    padding: 0 32px;67  }68  .back-btn {69    width: 64px;70    height: 64px;71    display: inline-flex;72    align-items: center;73    justify-content: center;74    margin-right: 24px;75  }76  .app-title {77    font-size: 56px;78    font-weight: 600;79    color: #ffffff;80  }81 82  /* List */83  .content {84    position: absolute;85    top: 240px;86    left: 0;87    width: 100%;88    height: calc(100% - 240px);89    box-sizing: border-box;90    padding: 10px 40px 180px 40px;91  }92  .item {93    font-size: 46px;94    line-height: 1.35;95    padding: 34px 20px;96    margin-bottom: 34px;97    color: #F0F0F0;98  }99  .item.split {100    display: flex;101    align-items: center;102    justify-content: space-between;103  }104  .item .detail {105    color: #e0e0e0;106    font-size: 42px;107    display: inline-flex;108    align-items: center;109    gap: 12px;110  }111 112  /* Sign out button */113  .signout-wrap {114    width: 100%;115    display: flex;116    justify-content: center;117    margin-top: 140px;118  }119  .signout-btn {120    background: #e9e6e0;121    color: #1e1e1e;122    padding: 28px 44px;123    font-size: 46px;124    border-radius: 26px;125    box-shadow: 0 2px 0 rgba(0,0,0,0.25);126  }127 128  /* Bottom gesture pill */129  .gesture-bar {130    position: absolute;131    bottom: 24px;132    left: 50%;133    transform: translateX(-50%);134    width: 300px;135    height: 12px;136    background: #e6e6e6;137    border-radius: 8px;138    opacity: 0.8;139  }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status Bar -->145  <div class="status-bar">146    <div class="status-left">7:34</div>147    <div class="status-right">148      <!-- simple icons -->149      <svg class="status-icon" viewBox="0 0 24 24" fill="none">150        <rect x="3" y="7" width="14" height="10" rx="2" stroke="#fff" stroke-width="2"></rect>151        <rect x="19" y="10" width="2" height="4" fill="#fff"></rect>152      </svg>153      <svg class="status-icon" viewBox="0 0 24 24" fill="none">154        <path d="M2 16c3.5-4.5 9.5-4.5 13 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>155        <path d="M5 16c2.5-3 6.5-3 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>156        <circle cx="12" cy="18" r="1.8" fill="#fff"></circle>157      </svg>158      <svg class="status-icon" viewBox="0 0 24 24" fill="none">159        <path d="M5 15c0-3.866 3.134-7 7-7s7 3.134 7 7" stroke="#fff" stroke-width="2"></path>160        <path d="M8 15c0-2.761 2.239-5 5-5s5 2.239 5 5" stroke="#fff" stroke-width="2"></path>161      </svg>162      <svg class="status-icon" viewBox="0 0 24 24" fill="none">163        <circle cx="12" cy="12" r="2.2" fill="#fff"></circle>164      </svg>165    </div>166  </div>167 168  <!-- App Bar -->169  <div class="app-bar">170    <div class="back-btn">171      <svg viewBox="0 0 24 24">172        <path d="M15 19L8 12l7-7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>173      </svg>174    </div>175    <div class="app-title">Settings</div>176  </div>177 178  <!-- Content -->179  <div class="content">180    <div class="item split">181      <div>Region</div>182      <div class="detail">🇮🇳 India - English</div>183    </div>184 185    <div class="item">Invite Friends</div>186    <div class="item">Notification Preferences</div>187    <div class="item">Privacy Policy</div>188    <div class="item">Terms of Service</div>189    <div class="item">Cookpad Community Guidelines</div>190    <div class="item">Blocked List</div>191    <div class="item">Frequently Asked Questions</div>192    <div class="item">Contact Us</div>193    <div class="item">About this Application</div>194    <div class="item">Theme</div>195 196    <div class="signout-wrap">197      <div class="signout-btn">Sign out</div>198    </div>199  </div>200 201  <div class="gesture-bar"></div>202</div>203</body>204</html>