GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0B0B0B; color: #EDEDED;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-weight: 600;25    font-size: 44px;26    opacity: 0.95;27  }28  .status-icons {29    display: flex; align-items: center; gap: 28px;30  }31  .status-icons svg { fill: none; stroke: #EDEDED; stroke-width: 3; width: 44px; height: 44px; opacity: 0.9; }32 33  /* Header */34  .header {35    height: 120px;36    display: flex; align-items: center;37    padding: 0 40px;38    border-bottom: 1px solid rgba(255,255,255,0.04);39  }40  .back {41    display: flex; align-items: center; gap: 28px;42    color: #F2F2F2;43  }44  .back svg { width: 44px; height: 44px; stroke: #EDEDED; stroke-width: 4; }45  .title { font-size: 56px; font-weight: 600; letter-spacing: 0.3px; }46 47  /* Content list */48  .content { padding: 10px 40px 0 40px; }49  .item {50    display: flex; justify-content: space-between; align-items: center;51    padding: 36px 0;52    font-size: 44px;53    color: #BDBDBD;54  }55  .item + .item { margin-top: 18px; }56  .secondary { color: #D5D5D5; font-weight: 500; }57 58  /* Bottom sheet */59  .sheet {60    position: absolute; left: 0; right: 0; bottom: 0;61    background: #151515;62    border-top-left-radius: 36px; border-top-right-radius: 36px;63    box-shadow: 0 -12px 24px rgba(0,0,0,0.5);64    padding: 36px 40px 140px 40px;65  }66  .sheet .row {67    display: flex; align-items: center; justify-content: space-between;68  }69  .sheet .left {70    display: flex; align-items: center; gap: 24px;71  }72  .sheet-title {73    font-size: 46px; color: #EFEFEF; font-weight: 600;74  }75  .actions { display: flex; align-items: center; gap: 36px; }76  .action-btn { color: #D9EA6A; font-size: 40px; font-weight: 600; }77  .divider {78    margin: 36px 0; height: 1px; background: rgba(255,255,255,0.08);79  }80  .section-label { color: #ECECEC; font-size: 40px; margin-bottom: 20px; }81  .app-row {82    display: flex; align-items: center; gap: 24px;83    padding: 24px 0;84    color: #EDEDED; font-size: 44px;85  }86 87  /* Image placeholder */88  .img {89    width: 96px; height: 96px;90    background: #E0E0E0; border: 1px solid #BDBDBD;91    display: flex; align-items: center; justify-content: center;92    color: #757575; font-size: 24px; border-radius: 50%;93  }94 95  /* Home indicator */96  .home-indicator {97    position: absolute; bottom: 24px; left: 50%;98    transform: translateX(-50%);99    width: 300px; height: 12px; background: #FFFFFF;100    border-radius: 12px; opacity: 0.9; z-index: 3;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status Bar -->108  <div class="status-bar">109    <div class="time">7:34</div>110    <div class="status-icons">111      <!-- simple dot -->112      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#EDEDED"/></svg>113      <!-- cloud icon (simple) -->114      <svg viewBox="0 0 24 24"><path d="M7 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0-1 9z" fill="#EDEDED"/></svg>115      <!-- wifi -->116      <svg viewBox="0 0 24 24">117        <path d="M2 8c5-4 15-4 20 0" />118        <path d="M5 12c3-3 11-3 14 0" />119        <path d="M8 16c2-2 6-2 8 0" />120        <circle cx="12" cy="19" r="1.6" fill="#EDEDED" stroke="none"/>121      </svg>122      <!-- battery -->123      <svg viewBox="0 0 28 24">124        <rect x="2" y="6" width="20" height="12" rx="2" />125        <rect x="22.5" y="9" width="3" height="6" rx="1" />126        <rect x="4" y="8" width="14" height="8" fill="#EDEDED" stroke="none"/>127      </svg>128    </div>129  </div>130 131  <!-- Header -->132  <div class="header">133    <div class="back">134      <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" fill="none" stroke="#EDEDED" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>135      <div class="title">Settings</div>136    </div>137  </div>138 139  <!-- Content List -->140  <div class="content">141    <div class="item">142      <div>Region</div>143      <div class="secondary">🇮🇳 India - English</div>144    </div>145    <div class="item"><div>Invite Friends</div></div>146    <div class="item"><div>Notification Preferences</div></div>147    <div class="item"><div>Privacy Policy</div></div>148    <div class="item"><div>Terms of Service</div></div>149    <div class="item"><div>Cookpad Community Guidelines</div></div>150    <div class="item"><div>Blocked List</div></div>151    <div class="item"><div>Frequently Asked Questions</div></div>152    <div class="item"><div>Contact Us</div></div>153  </div>154 155  <!-- Bottom Sheet -->156  <div class="sheet">157    <div class="row">158      <div class="left">159        <div class="img">[IMG: Gmail]</div>160        <div class="sheet-title">Send using Gmail</div>161      </div>162      <div class="actions">163        <div class="action-btn">Just once</div>164        <div class="action-btn">Always</div>165      </div>166    </div>167 168    <div class="divider"></div>169 170    <div class="section-label">Use a different app</div>171    <div class="app-row">172      <div class="img" style="border-radius:12px;">[IMG: JustRide Bustang]</div>173      <div>JustRide Bustang</div>174    </div>175  </div>176 177  <!-- Home indicator -->178  <div class="home-indicator"></div>179</div>180</body>181</html>