GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Settings</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0B0B0B;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #eaeaea;29    font-size: 42px;30    letter-spacing: 1px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-icon {38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 110px;47    left: 0;48    width: 1080px;49    height: 150px;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54  }55  .back-btn {56    width: 96px;57    height: 96px;58    display: flex;59    align-items: center;60    justify-content: center;61    margin-right: 12px;62  }63  .title {64    font-size: 72px;65    font-weight: 600;66    letter-spacing: 0.5px;67  }68  .menu-btn {69    margin-left: auto;70    width: 96px;71    height: 96px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76 77  /* Content list */78  .content {79    position: absolute;80    top: 260px;81    left: 0;82    width: 1080px;83    padding: 0 54px;84    box-sizing: border-box;85  }86  .option-row {87    height: 120px;88    display: flex;89    align-items: center;90    font-size: 54px;91    color: #F5F5F5;92  }93  .divider {94    width: 100%;95    height: 1px;96    background: #1E1E1E;97    margin: 18px 0 30px 0;98  }99  .section-label {100    font-size: 40px;101    color: #9AA0A6;102    margin: 18px 0 16px 0;103  }104 105  .list-item {106    height: 120px;107    display: flex;108    align-items: center;109    gap: 36px;110    font-size: 54px;111    color: #FFFFFF;112  }113  .bullet {114    width: 56px;115    height: 56px;116    border-radius: 50%;117    flex: 0 0 56px;118  }119  .bullet.blue { background: #6DA3FF; }120  .bullet.blue2 { background: #7E88FF; }121  .bullet.green { background: #70C690; }122  .bullet.teal { background: #66AEB1; }123 124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status Bar -->130  <div class="status-bar">131    <div class="status-left">9:54</div>132    <div class="status-right">133      <!-- simple icons -->134      <div class="status-icon">135        <!-- bell / notifications -->136        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">137          <path d="M12 3c-3 0-5 2-5 5v3c0 1-1 2-2 3v2h14v-2c-1-1-2-2-2-3V8c0-3-2-5-5-5z" stroke="#eaeaea" stroke-width="1.6" />138          <circle cx="12" cy="20" r="2" fill="#eaeaea"/>139        </svg>140      </div>141      <div class="status-icon">142        <!-- location / pin -->143        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">144          <path d="M12 3a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7z" stroke="#eaeaea" stroke-width="1.6"/>145          <circle cx="12" cy="10" r="2.7" fill="#eaeaea"/>146        </svg>147      </div>148      <div class="status-icon">149        <!-- wifi -->150        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">151          <path d="M2 9c5-5 15-5 20 0" stroke="#eaeaea" stroke-width="1.6" stroke-linecap="round"/>152          <path d="M5 12c4-4 10-4 14 0" stroke="#eaeaea" stroke-width="1.6" stroke-linecap="round"/>153          <path d="M8 15c3-3 5-3 8 0" stroke="#eaeaea" stroke-width="1.6" stroke-linecap="round"/>154          <circle cx="12" cy="18" r="1.7" fill="#eaeaea"/>155        </svg>156      </div>157      <div class="status-icon">158        <!-- battery -->159        <svg width="46" height="34" viewBox="0 0 28 16" fill="none">160          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#eaeaea" stroke-width="1.8"/>161          <rect x="3" y="5" width="15" height="6" fill="#eaeaea"/>162          <rect x="23.5" y="6" width="3" height="4" rx="1" fill="#eaeaea"/>163        </svg>164      </div>165    </div>166  </div>167 168  <!-- Header -->169  <div class="header">170    <div class="back-btn">171      <svg width="60" height="60" viewBox="0 0 36 36" fill="none">172        <path d="M22 6 L10 18 L22 30" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174    </div>175    <div class="title">Settings</div>176    <div class="menu-btn">177      <!-- vertical dots -->178      <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff">179        <circle cx="12" cy="5" r="2.2"/>180        <circle cx="12" cy="12" r="2.2"/>181        <circle cx="12" cy="19" r="2.2"/>182      </svg>183    </div>184  </div>185 186  <!-- Content -->187  <div class="content">188    <div class="option-row">General</div>189    <div class="option-row">Events from Gmail</div>190 191    <div class="divider"></div>192 193    <div class="section-label">dbwscratch.test.id2@gmail.com</div>194    <div class="list-item">195      <div class="bullet blue"></div>196      <div>Events</div>197    </div>198    <div class="list-item">199      <div class="bullet blue2"></div>200      <div>Tasks</div>201    </div>202 203    <div class="divider" style="margin-top:30px;"></div>204 205    <div class="section-label">More</div>206    <div class="list-item">207      <div class="bullet green"></div>208      <div>Birthdays</div>209    </div>210    <div class="list-item">211      <div class="bullet teal"></div>212      <div>Holidays</div>213    </div>214  </div>215 216  <!-- Bottom gesture bar indicator -->217  <div style="218    position: absolute;219    bottom: 40px;220    left: 50%;221    transform: translateX(-50%);222    width: 520px;223    height: 14px;224    background: #E6E6E6;225    border-radius: 8px;226    opacity: 0.7;">227  </div>228</div>229</body>230</html>